/* ============================================================
   LE DOLCEZZE DI GIOIA — « Sospesa »
   Palette panna · rosa pastello · oro  ·  design editoriale-wedding
   ============================================================ */

/* ---- FONT self-hosted (subset latin) --------------------------
   Serviti dal nostro dominio, non dalla CDN di Google: nessun IP
   del visitatore inviato a terzi → nessun cookie banner dovuto.  */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('assets/fonts/cormorant-garamond-500-italic.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap;
  src:url('assets/fonts/inter-300.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/inter-500.woff2') format('woff2'); }

:root{
  --panna:      #FAF5EF;
  --panna-2:    #F4EBE1;
  --panna-3:    #EFE3D6;
  --avorio:     #FFFDFA;
  --rosa:       #E3A0B4;
  --rosa-2:     #EBBAC6;
  --rosa-soft:  #F6DBE1;
  --rosa-pale:  #FBEDF0;
  --rosa-testo: #CE597C;   /* il rosa quando è TESTO: #E3A0B4 sul panna era 1,9:1, illeggibile;
                              questo regge 3:1 (testo grande) su tutti gli sfondi del sito.
                              Bottoni e decorazioni restano --rosa */
  --oro:        #C2A16B;
  --oro-2:      #D8BE93;
  --oro-deep:   #866C3F;   /* era #A2824C: 3,3:1 sul panna, sotto il minimo 4,5 per il testo piccolo */
  --ink:        #43302B;   /* testo caldo scuro */
  --ink-soft:   #806D64;   /* era #8A756C: 4,0:1 → 4,5:1 */
  --line:       #E4D6C7;
  --shadow:     26px 40px 70px -34px rgba(90,55,45,.42);
  --shadow-sm:  12px 20px 40px -22px rgba(90,55,45,.4);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overscroll-behavior-y:none; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--panna);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  line-height:1.6;
}
/* grana morbida su tutto */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:multiply;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- tipografia condivisa ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--oro-deep);
}
.h2{
  font-family:var(--serif); font-weight:500; line-height:1.02;
  font-size:clamp(2.6rem,6vw,4.8rem); letter-spacing:-.01em;
}
.h2--center{ text-align:center; }
.is-italic{ font-style:italic; color:var(--rosa-testo); font-weight:400; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.82rem; font-weight:500; letter-spacing:.04em;
  padding:.95em 1.9em; border-radius:100px; cursor:pointer;
  transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .5s var(--ease);
  border:1px solid transparent; white-space:nowrap;
}
.btn--pink{ background:var(--rosa); color:var(--ink); box-shadow:0 14px 26px -14px rgba(200,110,135,.7); }
.btn--pink:hover{ transform:translateY(-3px); background:#DB8FA6; box-shadow:0 20px 32px -14px rgba(200,110,135,.85); }
.btn--gold{ background:var(--ink); color:var(--panna); }
.btn--gold:hover{ transform:translateY(-3px); background:var(--oro-deep); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--oro); color:var(--oro-deep); transform:translateY(-3px); }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--panna);
  display:flex; align-items:flex-start; justify-content:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__hang{ text-align:center; transform:translateY(-30px); animation:drop 1.1s var(--ease) both; }
.preloader__wire{ display:block; width:1px; height:26vh; margin:0 auto; background:linear-gradient(var(--oro),transparent); }
.preloader__seal{
  width:76px; height:76px; margin:-6px auto 0; border-radius:50%;
  background:var(--avorio); border:1px solid var(--oro-2);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
  transform-origin:top center; animation:swing 3.4s var(--ease) .6s infinite;
}
.preloader__bow path{ fill:none; stroke:var(--rosa); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.preloader__bow circle{ fill:var(--rosa); stroke:none; }
.preloader__bow{ width:42px; height:42px; }
.preloader__name{ font-family:var(--serif); font-size:1.7rem; font-style:italic; margin-top:1.1rem; opacity:0; animation:fade .8s var(--ease) 1s both; }
.preloader__sub{ font-size:.7rem; letter-spacing:.35em; text-transform:uppercase; color:var(--oro-deep); opacity:0; animation:fade .8s var(--ease) 1.2s both; }
/* solo transform: niente ricalcolo del layout a ogni fotogramma */
@keyframes drop{ from{ transform:translateY(calc(-30px - 26vh)); } }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{opacity:1;transform:none;} }
@keyframes swing{ 0%,100%{ transform:rotate(-7deg);} 50%{ transform:rotate(7deg);} }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem clamp(1.2rem,4vw,3.4rem);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
  /* su iOS Safari una barra fixed senza layer proprio può "sdoppiarsi" un
     istante durante lo scroll veloce (l'animazione della barra indirizzi
     disegna un fotogramma vecchio sopra quello nuovo): forzare il suo
     compositing risolve, stesso principio del fix sulla galleria. */
  transform:translateZ(0); will-change:transform; backface-visibility:hidden;
}
.nav.is-scrolled{ background:rgba(250,245,239,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding-top:.9rem; padding-bottom:.9rem; box-shadow:0 1px 0 var(--line); }
.nav__brand{ display:flex; flex-direction:column; line-height:1; }
.nav__brand-script{ font-family:var(--serif); font-style:italic; font-size:1.5rem; font-weight:500; }
.nav__brand-sub{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--oro-deep); margin-top:.3rem; }

/* ---- MENU — un <details>, quindi si apre senza una riga di JS ----------
   Sul telefono i link stanno in un pannello che cala da sotto la barra;
   da 960px il <details> diventa `display:contents` e gli stessi link
   tornano in fila nella barra. Un elenco solo, scritto una volta sola.
   (Il pannello si richiude da sé: in home ci pensa script.js al click,
   nel catalogo i link cambiano pagina e la ricaricano.) */
.nav__more{ order:3; }
.nav__toggle{
  list-style:none; cursor:pointer;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.nav__toggle::-webkit-details-marker{ display:none; }
.nav__toggle span{ position:relative; display:block; width:22px; height:1px; background:var(--ink); }
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:22px; height:1px; background:var(--ink);
  transition:transform .35s var(--ease);
}
.nav__toggle span::before{ top:-7px; }
.nav__toggle span::after{ top:7px; }
/* aperto, le due stanghette diventano una × */
.nav__more[open] .nav__toggle span{ background:transparent; }
.nav__more[open] .nav__toggle span::before{ transform:translateY(7px) rotate(45deg); }
.nav__more[open] .nav__toggle span::after{ transform:translateY(-7px) rotate(-45deg); }

.nav__links{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:rgba(250,245,239,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 20px 30px -24px rgba(90,55,45,.5);
  padding:.25rem clamp(1.2rem,4vw,3.4rem) .75rem;
}
.nav__more[open] .nav__links{ display:flex; }
.nav__links a{
  font-family:var(--serif); font-size:1.35rem; letter-spacing:0;
  position:relative; padding:.7em 0; color:var(--ink-soft);
  border-bottom:1px solid var(--line); transition:color .4s;
}
.nav__links a:last-child{ border-bottom:none; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--oro); transition:width .4s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ order:2; margin-left:auto; font-size:.8rem; font-weight:500; padding:.7em 1.4em; border:1px solid var(--oro); border-radius:100px; color:var(--oro-deep); transition:background .4s,color .4s; }
.nav__cta:hover{ background:var(--oro); color:#fff; }
/* "Ordina" da solo sul telefono, "Ordina su WhatsApp" da 960px */
.nav__cta span{ display:none; opacity:.8; }

@media (min-width:960px){
  /* il details si dissolve: summary via, i link tornano item della barra */
  .nav__more{ display:contents; }
  .nav__toggle{ display:none; }
  .nav__links{
    display:flex; flex-direction:row; order:2; gap:2.2rem;
    position:static; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
    border:none; box-shadow:none; padding:0;
  }
  .nav__links a{ font-family:var(--sans); font-size:.82rem; letter-spacing:.06em; padding:.2em 0; border-bottom:none; }
  .nav__links a::after{ bottom:-2px; }
  .nav__cta{ order:3; margin-left:0; }
  .nav__cta span{ display:inline; }
}

/* ============================================================
   PENDOLI (meccanica-firma)
   ============================================================ */
.pendulum{
  position:absolute; top:0; transform-origin:top center; will-change:transform;
  display:flex; flex-direction:column; align-items:center;
  margin-left:0; /* left set inline; centrato via translateX in JS wrapper */
}
.pendulum[style*="left"]{ transform:translateX(-50%); } /* base; JS sovrascrive con rotate composto */
.pendulum__wire{
  width:1px; height:var(--len,140px);
  background:linear-gradient(var(--oro-2),rgba(194,161,107,.35));
}
.pendulum__bob{ position:relative; transform-origin:top center; }

/* --- torte incorniciate come "medaglioni" sospesi --- */
.bob--cake img{
  border-radius:50% 50% 46% 46% / 54% 54% 46% 46%;
  border:5px solid var(--avorio);
  box-shadow:var(--shadow);
  object-fit:cover;
}
/* la torta grande parte piccola: sul telefono a piena misura sfondava
   il mobile di torte. Cresce da 600px in su. */
.bob--lg img{ width:180px; height:234px; }
.bob--md img{ width:150px; height:196px; }
.bob--sm img{ width:120px; height:156px; }
@media (min-width:600px){
  .bob--lg img{ width:230px; height:300px; }
}
.bob--frame img{ width:clamp(220px,26vw,340px); height:auto; aspect-ratio:4/5; border-radius:180px 180px 26px 26px; }
.bob__bow{ position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:52px; z-index:2; }
.bob__bow path{ fill:var(--rosa-2); stroke:var(--rosa); stroke-width:1; }
.bob__bow circle{ fill:var(--rosa); }
.bob--cake{ cursor:grab; }

/* ornamenti */
.bob--heart svg{ width:34px; fill:var(--rosa); filter:drop-shadow(0 8px 10px rgba(200,110,135,.35)); }
.bob--bow svg path{ fill:none; stroke:var(--oro); stroke-width:2; stroke-linecap:round; }
.bob--bow svg circle{ fill:var(--oro); }
.bob--bow svg{ width:44px; }
.bob--pearls{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.bob--pearls span{ width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff, var(--rosa-soft) 70%, var(--rosa-2)); box-shadow:0 3px 5px rgba(200,110,135,.3); }
.bob--pearls-sm span{ width:10px; height:10px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; overflow:hidden; }
.hero__rail{
  position:absolute; top:0; left:0; right:0; height:74px; z-index:1;
  background:linear-gradient(var(--panna-3),var(--panna));
  box-shadow:0 2px 0 rgba(194,161,107,.4), 0 14px 30px -20px rgba(90,55,45,.3);
}
.hero__rail::before,.hero__rail::after{ content:""; position:absolute; top:14px; width:9px; height:9px; border-radius:50%; background:var(--oro-deep); box-shadow:0 0 0 4px var(--panna-3); }
.hero__rail::before{ left:12%; } .hero__rail::after{ right:12%; }
/* mobile first: sul telefono il mobile di torte è rimpicciolito in blocco
   (scale) invece che rifatto pezzo per pezzo — così le proporzioni fra i
   pendoli restano quelle disegnate. Da 600px torna a grandezza naturale. */
.hero__mobile{
  position:absolute; top:64px; left:0; right:0; height:44vh; z-index:2;
  transform:scale(.72); transform-origin:top center;
}

.hero__copy{
  position:absolute; left:50%; bottom:6vh; transform:translateX(-50%);
  text-align:center; z-index:5; width:min(92vw,760px);
}
.hero__title{
  font-family:var(--serif); font-weight:500; line-height:.94;
  font-size:clamp(3.4rem,11vw,8.5rem); letter-spacing:-.015em; margin:.5rem 0 .2rem;
}
.hero__title span{ display:block; }
.hero__lead{ font-size:1.06rem; color:var(--ink-soft); max-width:34ch; margin:1rem auto 1.8rem; }
.hero__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
/* sul telefono l'indicatore sta stretto fra i due pulsanti e il bordo:
   scende quasi a filo, e la lineetta si accorcia — allungandola invece
   uscirebbe dal viewport. Da 600px riprende aria e lunghezza piene. */
.hero__scroll{ position:absolute; bottom:.35rem; left:50%; transform:translateX(-50%); z-index:5; text-align:center; color:var(--ink-soft); }
.hero__scroll span{ font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; }
.hero__scroll i{ display:block; width:1px; height:20px; margin:.35rem auto 0; background:var(--oro); animation:scrollLine 2s var(--ease) infinite; transform-origin:top; }
@keyframes scrollLine{ 0%{ transform:scaleY(0);} 40%{transform:scaleY(1);} 100%{ transform:scaleY(0); transform-origin:bottom;} }

@media (min-width:600px){
  .hero__mobile{ height:60vh; transform:none; }
  .hero__copy{ bottom:9vh; }
  /* «scorri» scende quasi a filo del bordo: prima galleggiava a metà strada
     fra i pulsanti e il fondo, e leggeva come parte dell'hero invece che
     come indicazione di uscita */
  .hero__scroll{ bottom:.45rem; }
  .hero__scroll i{ height:34px; margin-top:.6rem; }
}

/* reveal base */
[data-reveal]{ opacity:0; transform:translateY(12px); }

/* ============================================================
   SEGNO
   ============================================================ */
/* mobile first: una colonna sola e tutto centrato — la torta appesa sopra,
   il racconto sotto. Le due colonne affiancate arrivano da 960px, dove
   c'è davvero lo spazio per leggere una riga lunga accanto a un'immagine. */
.segno{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,6vw,6rem);
  align-items:center; padding:clamp(6rem,12vw,10rem) clamp(1.4rem,7vw,7rem);
  background:linear-gradient(var(--panna),var(--panna-2));
  text-align:center;
}
.segno__media{ position:relative; display:flex; justify-content:center; }
.segno__hang{ position:relative; display:flex; flex-direction:column; align-items:center; }
.segno__wire{ width:1px; height:70px; background:linear-gradient(var(--oro-2),transparent); }
.pendulum--inline{ position:relative; transform:none; }
.pendulum--inline[style*="left"]{ transform:none; }
.segno__text p{ font-size:1.06rem; color:var(--ink-soft); margin-top:1.1rem; max-width:52ch; margin-inline:auto; }
.segno__text .h2{ margin:.6rem 0 .4rem; }
.segno__text strong{ color:var(--ink); font-weight:500; }
.segno__note{ font-style:italic; color:var(--oro-deep) !important; border-left:2px solid var(--oro-2); padding-left:1rem; }
.segno__stats{ display:flex; gap:1.4rem; margin-top:2.4rem; flex-wrap:wrap; justify-content:center; }
.segno__stats div{ display:flex; flex-direction:column; }
.segno__stats b{ font-family:var(--serif); font-size:2.6rem; color:var(--rosa-testo); font-weight:600; line-height:1; }
.segno__stats span{ font-size:.74rem; letter-spacing:.05em; color:var(--ink-soft); margin-top:.4rem; max-width:14ch; }

@media (min-width:600px){
  .segno__stats{ gap:2.4rem; }
}
@media (min-width:960px){
  .segno{ grid-template-columns:1fr 1.1fr; text-align:left; }
  .segno__text p{ margin-inline:0; }
  .segno__stats{ justify-content:flex-start; }
}

/* ============================================================
   CREAZIONI
   ============================================================ */
.section-head{ text-align:center; max-width:640px; margin:0 auto; padding:clamp(5rem,10vw,8rem) 1.4rem 2.5rem; }
.section-head .h2{ margin:.6rem 0 .8rem; }
.section-head__lead{ color:var(--ink-soft); }
.creazioni{ background:var(--panna); padding-bottom:clamp(4rem,9vw,8rem); }
/* il titolo di questa sezione era tarato sull'hero: troppo grande, e
   si spezzava male. Qui sta sopra una griglia, non da solo in pagina. */
.creazioni .section-head{ padding:3.5rem 1.25rem 2rem; }
.creazioni .section-head .h2{ font-size:2.2rem; line-height:1.1; text-wrap:balance; }
.creazioni .section-head__lead{ font-family:var(--sans); font-size:.92rem; color:var(--ink-soft); }
@media (min-width:600px){
  .creazioni .section-head{ padding:5rem 2rem 2.5rem; }
  .creazioni .section-head .h2{ font-size:3rem; }
}
@media (min-width:960px){
  .creazioni .section-head .h2{ font-size:3.6rem; }
}

/* ============================================================
   DOLCE-CARD — il componente del catalogo
   Una card sola, usata in due posti: le tre in vetrina qui in home
   e tutte e quindici in catalogo.html. Toccarla qui le cambia
   entrambe, ed è voluto: le due pagine devono parlare uguale.

   Due varianti dello stesso oggetto:
     a.dolce-card       → in home: cliccabile, con descrizione, porta al catalogo
     article.dolce-card → nel catalogo: nuda, solo numero e titolo

   La forma ad arco della finestra non è decorazione a caso: è la
   nicchia di una vetrina di pasticceria, e tiene insieme le foto
   vere e i segni disegnati finché le foto non ci sono tutte.
   ============================================================ */
.dolce-card{
  display:flex; flex-direction:column; color:inherit;
  background:var(--avorio); border:1px solid var(--line);
  border-radius:24px; padding:.55rem .55rem 1.4rem;
  box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease),
             border-color .55s var(--ease);
}
.dolce-card:focus-visible{ outline:2px solid var(--oro-deep); outline-offset:4px; }

/* ---- la finestra: foto vera o segno disegnato ---- */
.dolce-card__media{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/5; border-radius:200px 200px 16px 16px;
  background:linear-gradient(165deg,var(--avorio),var(--panna-3));
}
.dolce-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.dolce-card__media--rosa{ background:linear-gradient(165deg,var(--rosa-pale),var(--rosa-soft)); }
.dolce-card__media--oro{ background:linear-gradient(165deg,#FDF8F0,#EFE0C6); }
/* il segno compare UNA volta sola e grande: ripetuto tre volte per
   riga (com'era prima) non riempiva il vuoto, lo triplicava */
.dolce-card__sign{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.dolce-card__sign svg{
  width:44%; max-width:96px; fill:none; stroke:var(--oro-deep);
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.42;
}

/* ---- il testo ----
   in home il corpo è uno <span> dentro un <a> (un <div> lì non sarebbe
   valido): va reso blocco a mano, nel catalogo è già un <div>. */
.dolce-card__body{ display:block; padding:1.15rem .8rem 0; }
.dolce-card__num{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:.95rem; line-height:1; color:var(--oro-2);
}
.dolce-card__title{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:1.4rem; line-height:1.15; letter-spacing:-.005em;
  color:var(--ink); margin-top:.3rem; transition:color .45s var(--ease);
}
/* filetto d'oro sotto il titolo: si allunga al passaggio del mouse */
.dolce-card__title::after{
  content:""; display:block; width:26px; height:1px;
  background:var(--oro-2); margin-top:.85rem;
  transition:width .6s var(--ease), background .6s var(--ease);
}
.dolce-card__desc{
  font-family:var(--sans); font-weight:300; font-size:.86rem;
  line-height:1.62; color:var(--ink-soft); margin-top:.75rem;
}
.dolce-card__more{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--oro-deep); margin-top:1rem;
}
.dolce-card__more i{ font-style:normal; transition:transform .45s var(--ease); }

/* ---- vita al passaggio del mouse (solo la variante cliccabile) ---- */
a.dolce-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:var(--oro-2); }
a.dolce-card:hover .dolce-card__media img{ transform:scale(1.05); }
a.dolce-card:hover .dolce-card__title{ color:var(--oro-deep); }
a.dolce-card:hover .dolce-card__title::after{ width:56px; background:var(--oro-deep); }
a.dolce-card:hover .dolce-card__more i{ transform:translateX(6px); }
/* nel catalogo la card è un bottone (apre la galleria): si scalda appena,
   senza saltare come in home — il salto è per il link, qui l'azione è
   già dentro la card */
button.dolce-card:hover{ border-color:var(--oro-2); box-shadow:var(--shadow); }
button.dolce-card:hover .dolce-card__title::after{ width:56px; }
button.dolce-card:hover .dolce-card__media img{ transform:scale(1.05); }
@media (prefers-reduced-motion:reduce){
  .dolce-card,.dolce-card__media img,.dolce-card__title,
  .dolce-card__title::after,.dolce-card__more i{ transition:none; }
  a.dolce-card:hover{ transform:none; }
  a.dolce-card:hover .dolce-card__media img{ transform:none; }
}

/* ============================================================
   GALLERIA DI CATEGORIA — card del catalogo che apre a schermo
   intero, adattato dal componente Knowledge "grid-to-preview"
   (09_grid-animations): lì la rivelazione è un mask a croce
   attivato dall'hover del mouse — qui, mobile-first, è un tap
   che dissolve in su, stessa grammatica di [data-reveal] già
   usata nel resto del sito (non un effetto a parte). Nessuna
   nuova dipendenza: solo GSAP core, già self-hostato in
   assets/js/gsap.min.js. */
button.dolce-card{
  appearance:none; -webkit-appearance:none; font:inherit; text-align:inherit;
  cursor:pointer; width:100%;
}
.cat-lightbox{
  position:fixed; inset:0; z-index:9600; /* sopra il FAB (9500): altrimenti il
    bottone WhatsApp restava visibile sopra la galleria aperta */
  background:linear-gradient(var(--panna),var(--panna-2));
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.cat-lightbox.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), visibility 0s linear 0s;
}
.cat-lightbox__close{
  position:sticky; top:0; z-index:2; margin-left:auto;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin:1.1rem 1.1rem 0 auto;
  background:var(--avorio); border:1px solid var(--oro-2); border-radius:50%;
  box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.cat-lightbox__close:hover{ color:var(--oro-deep); border-color:var(--oro); transform:rotate(90deg); }
.cat-lightbox__close svg{ width:17px; height:17px; }

/* ---- testata della galleria: eyebrow + titolo corsivo + filetto,
   la stessa grammatica delle dolce-card, non un pattern nuovo ---- */
.cat-lightbox__head{ text-align:center; padding:.4rem 1.5rem 1.8rem; }
.cat-lightbox__eyebrow{
  display:block; font-family:var(--sans); font-size:.62rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--oro-deep);
}
.cat-lightbox__title{
  display:block; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.9rem; margin-top:.5rem;
}
.cat-lightbox__title::after{
  content:""; display:block; width:34px; height:1px;
  background:var(--oro-2); margin:.9rem auto 0;
}

/* ---- griglia a mattoncini: colonne CSS, non grid a righe fisse.
   Con grid-auto-flow:dense e altezze forzate una foto poteva finire
   incastrata fra due caselle non sue (sembrava "duplicata") e veniva
   sempre tagliata con object-fit:cover. Le colonne CSS impilano ogni
   foto per intero, nella sua proporzione vera, e funzionano con
   qualunque numero di foto nella cartella. ---- */
.cat-lightbox__grid{
  column-count:2; column-gap:.55rem;
  padding:0 .8rem 3rem;
}
.cat-lightbox__tile{
  display:block; margin-bottom:.55rem;
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm);
  break-inside:avoid; -webkit-column-break-inside:avoid;
  /* il tassello panna si vede subito; la foto ci si accende sopra */
  background:var(--panna-3);
}
.cat-lightbox__tile img{
  /* width/height veri nell'HTML (catalogo-foto.js) → il tassello ha già la
     forma giusta prima che la foto arrivi, e non spinge giù le altre */
  display:block; width:100%; height:auto;
  color:transparent; /* niente testo alternativo stampato mentre carica */
  transition:opacity .45s var(--ease);
}
/* la foto si accende quando è arrivata (classe messa da catalogo.js) */
.cat-lightbox__tile img:not(.is-loaded){ opacity:0; }

@media (min-width:600px){
  .cat-lightbox__head{ padding:.6rem 2rem 2.2rem; }
  .cat-lightbox__title{ font-size:2.4rem; }
  .cat-lightbox__grid{ column-count:4; column-gap:.85rem; padding:0 2.2rem 3.5rem; }
  .cat-lightbox__tile{ margin-bottom:.85rem; }
}
@media (min-width:960px){
  .cat-lightbox__grid{ column-count:6; column-gap:1rem; padding:0 3.5rem 4.5rem; }
  .cat-lightbox__tile{ margin-bottom:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .cat-lightbox{ transition:none; }
  .cat-lightbox__close:hover{ transform:none; }
  .cat-lightbox__tile img{ transition:none; }
}

/* ---- VETRINA in home — mobile first --------------------------
   Sul telefono le tre card scorrono col pollice e la quarta sbircia
   dal bordo: dire "ce n'è dell'altro" senza scriverlo. Da 600px in
   su stanno affiancate, tre colonne piene. */
.vetrina{
  display:flex; gap:.9rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem 1.25rem 1rem; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.vetrina::-webkit-scrollbar{ display:none; }
.vetrina .dolce-card{ flex:0 0 76%; scroll-snap-align:center; }

.vetrina__more{ display:flex; justify-content:center; margin-top:2rem; padding:0 1.25rem; }
.vetrina__more .btn{ font-size:.78rem; letter-spacing:.06em; padding:1em 2.1em; }

@media (min-width:600px){
  .vetrina{
    display:grid; grid-template-columns:repeat(3,1fr); overflow:visible;
    gap:1.1rem; padding:.4rem clamp(1.5rem,5vw,4rem) 0;
  }
  .vetrina .dolce-card{ flex:none; }
  .dolce-card__title{ font-size:1.5rem; }
  .vetrina__more{ margin-top:3.5rem; }
}
@media (min-width:960px){
  .vetrina{ gap:1.6rem; padding:.4rem clamp(3rem,7vw,7rem) 0; }
  .dolce-card{ padding:.65rem .65rem 1.6rem; }
  .dolce-card__body{ padding:1.3rem .9rem 0; }
  .dolce-card__title{ font-size:1.65rem; }
  .dolce-card__desc{ font-size:.9rem; }
}

/* ============================================================
   MOMENTI
   ============================================================ */
.momenti{
  background:linear-gradient(135deg,var(--rosa-pale),var(--panna-2));
  padding:clamp(6rem,13vw,11rem) 1.4rem; text-align:center; position:relative; overflow:hidden;
}
.momenti::before,.momenti::after{ content:""; position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; }
.momenti::before{ width:280px; height:280px; background:var(--rosa-soft); top:-60px; left:-40px; }
.momenti::after{ width:220px; height:220px; background:var(--oro-2); bottom:-50px; right:-30px; opacity:.28; }
.momenti__inner{ position:relative; max-width:640px; margin:0 auto; }
.momenti__lead{ color:var(--ink-soft); font-size:1.1rem; margin:1.2rem auto 2.2rem; max-width:44ch; }
.momenti__media{ display:flex; justify-content:center; margin-bottom:1.6rem; }

/* ============================================================
   DOVE
   ============================================================ */
/* mobile first: sul telefono conta solo il NAP — indirizzo, orari, contatti.
   La torta decorativa a fianco è un lusso da schermo largo: sotto i 960px
   non viene nemmeno mostrata (e quindi non pesa). */
.dove{
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,6vw,5rem); align-items:center;
  padding:clamp(6rem,12vw,10rem) clamp(1.4rem,7vw,7rem);
  background:linear-gradient(var(--panna-2),var(--panna-3));
}
.dove__stores{ display:flex; gap:2.5rem; margin:2rem 0 1.6rem; flex-wrap:wrap; }
.store h3{ font-family:var(--serif); font-style:italic; font-size:1.4rem; color:var(--ink); margin-bottom:.4rem; }
.store p{ color:var(--ink-soft); font-size:.95rem; }
.is-placeholder{ opacity:.7; }
.is-placeholder span{ font-size:.78rem; color:var(--oro-deep); }
.dove__hours p{ font-size:.92rem; color:var(--ink-soft); }
.dove__hours b{ color:var(--ink); font-weight:500; }
.dove__contacts{ display:flex; gap:.8rem; align-items:center; margin-top:1.8rem; flex-wrap:wrap; }
/* l'handle sta dentro una pillola come gli altri due contatti, ma tiene il
   serif corsivo oro: è un nome, non un'etichetta. Il padding è tarato a mano
   (il .btn è .95em/1.9em su .82rem) perché a 1.05rem di serif la pillola
   verrebbe più alta delle altre due e la riga si scomporrebbe. */
.dove__ig{
  color:var(--oro-deep); font-style:italic; font-family:var(--serif);
  font-size:1.05rem; padding:.55em 1.3em;
}
.dove__deco{ position:relative; display:none; justify-content:center; align-items:flex-start; min-height:340px; }

@media (min-width:960px){
  .dove{ grid-template-columns:1.2fr .8fr; }
  .dove__deco{ display:flex; }
}

/* ============================================================
   FOOTER + FAB
   ============================================================ */
.footer{ background:var(--ink); color:var(--panna); text-align:center; padding:4rem 1.4rem 3rem; }
.footer__brand{ font-family:var(--serif); font-style:italic; font-size:2rem; }
.footer__tag{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--oro-2); margin-top:.6rem; }
.footer__legal{ font-size:.72rem; color:rgba(250,245,239,.7); margin-top:1.6rem; }

/* il pulsante WhatsApp fluttuante è per il pollice: c'è sul telefono,
   sparisce da 960px dove la stessa azione è già nella barra in alto */
.fab{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:9500;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(150deg,var(--rosa-2),var(--rosa) 65%,#DB8FA6);
  border:3px solid var(--avorio);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 28px -12px rgba(200,110,135,.75);
  transition:transform .45s var(--ease), opacity .45s var(--ease), visibility .45s, box-shadow .45s var(--ease);
  backface-visibility:hidden;
}
/* alone che respira piano: si nota senza gridare, stesso passo lento
   delle altre animazioni del sito (niente di "acceso a lampeggio") */
.fab::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--rosa-2); animation:fabPulse 2.8s var(--ease) infinite;
}
.fab:hover{ transform:scale(1.08); box-shadow:0 18px 34px -12px rgba(200,110,135,.9); }
.fab svg{ width:25px; fill:#fff; position:relative; z-index:1; }

@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.55; }
  70%,100%{ transform:scale(1.25); opacity:0; }
}

/* Nell'hero il FAB si sovrapponeva al pulsante "Il segno": lì è anche
   inutile, perché "Ordina" è già a un dito di distanza. Quindi entra
   solo dopo che si è scrollato.
   La classe `fab--auto` la mette il JS: se il JS non parte — o dove non
   c'è affatto, come nel catalogo — il pulsante resta semplicemente
   sempre visibile, che è il comportamento sicuro. */
.fab--auto.is-out{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px) scale(.85);
}

@media (min-width:960px){
  .fab{ display:none; }
}

/* accessibilità: niente dondolii per chi li disattiva */
@media (prefers-reduced-motion:reduce){
  .preloader__seal,.preloader__hang,.hero__scroll i,.fab::before{ animation:none !important; }
  .fab::before{ display:none; }
  *{ scroll-behavior:auto; }
}


/* ============================================================
   CATALOGO — scritto MOBILE FIRST
   Le regole base sono quelle del telefono. Si sale con @media
   (min-width), mai al contrario. Nessun JS su catalogo.html.
   ============================================================ */
.page-catalogo{ background:var(--panna); }
.nav__links a.is-current{ color:var(--ink); }
.nav__links a.is-current::after{ width:100%; }

.cat-page{ padding-top:5.5rem; }

/* ---------------- testata ---------------- */
.cat-hero{ padding:1.5rem 1.25rem 2.5rem; }
.cat-hero__back{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.06em;
  color:var(--ink-soft); display:inline-block; margin-bottom:1.75rem;
}
.cat-hero__back:hover{ color:var(--oro-deep); }
.cat-hero .eyebrow{ font-size:.64rem; letter-spacing:.3em; }
.h1-cat{
  font-family:var(--serif); font-weight:500; line-height:1.04;
  font-size:2.5rem; letter-spacing:-.01em; margin:.75rem 0 1rem; color:var(--ink);
}
.cat-hero__lead{
  font-family:var(--sans); font-size:1rem; line-height:1.65;
  color:var(--ink-soft); max-width:46ch;
}

/* ---------------- le tipologie: una griglia sola ----------------
   Sedici card, tutte insieme, senza famiglie e senza indice: l'elenco
   si guarda, non si naviga. Da 960px vanno in file da 4 — sedici card
   fanno quattro righe piene, senza orfane in fondo.

   Le card qui sono NUDE: finestra, numero, titolo. Niente descrizione
   e niente CTA per card — a parlare è la foto, e l'azione sta una volta
   sola in fondo alla pagina. In home invece la descrizione resta: lì le
   card sono tre e devono invogliare, qui sono sedici e devono respirare. */
.cat-all{ padding:2.5rem 1.25rem 1rem; }
.cat-grid{ display:grid; grid-template-columns:1fr; gap:1rem; }
.cat-grid .dolce-card{ scroll-margin-top:6rem; }

/* ---------------- chiusura ---------------- */
.cat-end{
  padding:4rem 1.25rem; text-align:center;
  background:linear-gradient(150deg,var(--rosa-pale),var(--panna-2));
}
.cat-end .h2{ font-size:2.3rem; }
.cat-end__lead{
  font-family:var(--sans); font-size:.98rem; line-height:1.65;
  color:var(--ink-soft); max-width:44ch; margin:1rem auto 1.75rem;
}
.cat-end .btn{ width:100%; max-width:340px; }

/* ============================================================
   ↑ mobile   ·   ↓ da qui in su si allarga
   ============================================================ */
@media (min-width:600px){
  .cat-page{ padding-top:7rem; }
  .cat-hero{ padding:2rem 2.5rem 3rem; }
  .h1-cat{ font-size:3.4rem; }
  .cat-all{ padding:3.5rem 2.5rem 1.5rem; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); gap:1.3rem; }
  .cat-end .btn{ width:auto; }
}

@media (min-width:960px){
  .cat-hero{ text-align:center; max-width:760px; margin:0 auto; padding:2.5rem 2rem 3.5rem; }
  .cat-hero__lead{ margin-inline:auto; }
  .h1-cat{ font-size:4.4rem; }
  .cat-all{ padding:4rem clamp(2.5rem,6vw,6rem) 2rem; }
  .cat-grid{ grid-template-columns:repeat(4,1fr); gap:1.4rem; }
  /* quattro per riga = card strette: il titolo della home (1.65rem) qui
     spezzerebbe "Comunione e cresima" su tre righe */
  .cat-grid .dolce-card__title{ font-size:1.25rem; }
  .cat-end{ padding:7rem 2rem; }
  .cat-end .h2{ font-size:3.6rem; }
}


/* ============================================================
   NOTE LEGALI — scritto MOBILE FIRST, zero JS
   Riusa nav, cat-page, cat-hero e footer del catalogo: qui sotto
   c'è solo il corpo del testo. Colonna stretta (68ch) perché è
   l'unica pagina del sito che si legge riga per riga.
   ============================================================ */
.legal{ max-width:68ch; margin:0 auto; padding:0 1.25rem 4rem; }
.legal section{ margin-bottom:2.8rem; }
.legal h2{
  font-family:var(--serif); font-weight:500; font-size:1.55rem;
  color:var(--ink); margin-bottom:.9rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.legal p{ font-size:.95rem; line-height:1.75; color:var(--ink-soft); margin-bottom:.9rem; }
.legal p b{ color:var(--ink); font-weight:500; }
.legal a{ color:var(--oro-deep); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--ink); }

/* schede dati: etichetta sopra, valore sotto. Da 600px vanno in riga
   e le etichette si allineano in colonna. */
.legal__dati{ list-style:none; margin:0 0 1.2rem; padding:0; border-top:1px solid var(--line); }
.legal__dati li{
  display:flex; flex-direction:column; gap:.15rem;
  padding:.75rem 0; border-bottom:1px solid var(--line);
}
.legal__dati span{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.legal__dati b{ font-weight:400; font-size:.92rem; line-height:1.55; color:var(--ink); }

/* i buchi devono essere impossibili da non vedere: è già successo di
   mandare online un "DA COMPILARE" perché era scritto in grigino */
.da-compilare{
  color:var(--oro-deep) !important; background:rgba(194,161,107,.14);
  border-bottom:1px dashed var(--oro); padding:.1rem .35rem; border-radius:3px;
}

.legal__warn{
  background:var(--panna-2); border-radius:6px; padding:1rem 1.1rem;
  font-size:.9rem;
}
.legal__updated{ font-size:.8rem; color:var(--ink-soft); margin-top:1.4rem; }

/* footer: NAP e link legale, su tutte le pagine */
.footer__nap{ font-size:.8rem; color:rgba(250,245,239,.65); margin-top:1.2rem; }
.footer__nap a{ color:inherit; text-decoration:none; }
.footer__nap a:hover{ color:var(--oro-2); }
/* ragione sociale + P.IVA: obbligatori in home page (art. 35 DPR 633/72) */
.footer__societa{ font-size:.72rem; color:rgba(250,245,239,.7); margin-top:.5rem; }
.footer__links{ margin-top:.7rem; }
.footer__links a{
  font-size:.75rem; letter-spacing:.08em; color:var(--oro-2);
  text-decoration:underline; text-underline-offset:3px;
}
.footer__links a:hover{ color:var(--panna); }

@media (min-width:600px){
  .legal{ padding:0 2.5rem 6rem; }
  .legal h2{ font-size:1.9rem; }
  .legal p{ font-size:1rem; }
  .legal__dati li{ flex-direction:row; align-items:baseline; gap:1.5rem; padding:.9rem 0; }
  .legal__dati span{ flex:0 0 11rem; }
}

@media (min-width:960px){
  .legal{ padding:0 2rem 7rem; }
}