/* ==========================================================================
   VibrazioniArtistiche — foglio di stile principale
   Stile: acquerello raffinato — blu notte, azzurro polvere, avorio, oro antico
   ========================================================================== */

/* ---------- Font (auto-hosted: Playfair Display, Cormorant Garamond, Lora) ----------
   I file dei font vivono in css/fonts/ e sono serviti direttamente da qui, non da
   fonts.googleapis.com/fonts.gstatic.com: nessuna richiesta a server Google, quindi
   nessun trasferimento dell'indirizzo IP del visitatore a terzi e nessun bisogno di
   banner cookie/consenso per questo motivo. */
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:500; font-display:swap;
  src:url(./fonts/playfair-display-latin-500-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:600; font-display:swap;
  src:url(./fonts/playfair-display-latin-600-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url(./fonts/playfair-display-latin-700-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:500; font-display:swap;
  src:url(./fonts/playfair-display-latin-500-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:italic; font-weight:600; font-display:swap;
  src:url(./fonts/playfair-display-latin-600-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap;
  src:url(./fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap;
  src:url(./fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url(./fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap;
  src:url(./fonts/lora-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap;
  src:url(./fonts/lora-latin-500-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lora'; font-style:normal; font-weight:600; font-display:swap;
  src:url(./fonts/lora-latin-600-normal.woff2) format('woff2');
}
@font-face{
  font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap;
  src:url(./fonts/lora-latin-400-italic.woff2) format('woff2');
}

/* ---------- Design tokens ---------- */
:root{
  --blu-notte: #16244a;
  --blu-notte-2: #1e3160;
  --blu-notte-scuro: #0d1730;
  /* tono esatto (campionato) del bordo inferiore di sfondo-notte.jpg: deve
     combaciare pixel-per-pixel con la base dell'immagine, altrimenti nel
     punto in cui l'immagine finisce e il colore pieno inizia resta visibile
     una giuntura. Non è lo stesso di --blu-notte-scuro, leggermente diverso. */
  --sfondo-notte-base: #021e45;
  /* Colore risultante quando il velo semitrasparente rgba(13,23,48,0.5)
     dello sfondo-collana copre --sfondo-notte-base (verificato per
     campionamento pixel: RGB(8,27,59)). Serve a far combaciare il footer
     con la zona piatta sotto le pagine lunghe, che mostra gia' questo
     colore composito e non il --sfondo-notte-base "crudo". */
  --sfondo-notte-composito: #081b3b;
  --azzurro-polvere: #b7c9de;
  --azzurro-polvere-2: #d7e2ee;
  --avorio: #faf6ec;
  --avorio-2: #f2ead9;
  --avorio-3: #efe6d3;
  --oro-antico: #b8945a;
  --oro-antico-chiaro: #d7b57e;
  --oro-antico-scuro: #8f7038;
  --testo-notte: #212e4c;
  --testo-notte-tenue: #4a5578;
  --testo-chiaro: #f7f2e6;
  --ombra-morbida: 0 18px 40px -20px rgba(22,36,74,0.35);
  --ombra-card: 0 12px 30px -16px rgba(22,36,74,0.45);
  --raggio-lg: 22px;
  --raggio-md: 14px;
  --raggio-sm: 8px;
  --max-width: 1280px;
  --font-titoli: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-titoli-corsivo: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-corpo: 'Lora', Georgia, 'Times New Roman', serif;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-corpo);
  color: var(--testo-notte);
  background-color: var(--avorio);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-titoli); font-weight:600; margin:0 0 .5em; color: var(--blu-notte); line-height:1.15; }
p{ margin:0 0 1em; line-height:1.75; color: var(--testo-notte-tenue); }
.container{ max-width: var(--max-width); margin:0 auto; padding: 0 6vw; }
@media (min-width: 1400px){ .container{ padding: 0 4vw; } }

/* ---------- Texture di sfondo materica e leggera (SVG inline, nessuna immagine pesante) ---------- */
body{
  background-image:
    radial-gradient(ellipse 900px 500px at 8% -5%, rgba(183,201,222,0.35), transparent 60%),
    radial-gradient(ellipse 800px 600px at 96% 8%, rgba(212,181,120,0.16), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.68  0 0 0 0 0.58  0 0 0 0 0.38  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-color: var(--avorio);
}

/* ==========================================================================
   HEADER / NAVIGAZIONE
   ========================================================================== */
.sito-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: linear-gradient(180deg, var(--blu-notte) 0%, var(--blu-notte-2) 100%);
  box-shadow: 0 6px 24px -10px rgba(13,23,48,0.55);
}
.nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 4vw;
  max-width: 1560px;
  margin:0 auto;
}
.logo{
  display:flex;
  flex-direction:column;
  line-height:1;
  color: var(--avorio);
}
.logo .logo-nome{
  font-family: var(--font-titoli);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  letter-spacing:.04em;
  font-weight:600;
  color: var(--avorio);
}
.logo .logo-payoff{
  font-family: var(--font-titoli-corsivo);
  font-style: italic;
  font-size: .78rem;
  color: var(--oro-antico-chiaro);
  margin-top:4px;
  letter-spacing:.03em;
}
.nav-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: clamp(8px, 1.1vw, 20px);
  margin-left: clamp(20px, 3vw, 44px);
}
.nav-menu a{
  color: var(--avorio-2);
  font-family: var(--font-corpo);
  font-size: .87rem;
  letter-spacing:.02em;
  padding: 8px 2px;
  position:relative;
  white-space:nowrap;
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: var(--oro-antico-chiaro);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .3s ease;
}
.nav-menu a:hover::after,
.nav-menu a.attivo::after{ transform: scaleX(1); }
.nav-menu a.attivo{ color: var(--oro-antico-chiaro); }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:26px; height:2px;
  background: var(--avorio);
  border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.aperto span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.aperto span:nth-child(2){ opacity:0; }
.nav-toggle.aperto span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1540px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--blu-notte-scuro);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    max-height:0;
    overflow:hidden;
    transition: max-height .35s ease;
  }
  .nav-menu.aperto{ max-height: 620px; }
  .nav-menu a{
    width:100%;
    padding: 15px 6vw;
    border-top: 1px solid rgba(247,242,230,0.08);
  }
  .nav-menu a::after{ display:none; }
}

/* ==========================================================================
   HERO / INTESTAZIONE DI PAGINA
   ========================================================================== */
.hero{
  position:relative;
  padding: 78px 0 64px;
  overflow:hidden;
}
.hero .container, .page-hero .container{ position:relative; z-index:2; }
.hero-eyelet{
  display:inline-block;
  font-family: var(--font-titoli-corsivo);
  font-style:italic;
  color: var(--oro-antico-scuro);
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  max-width: 16ch;
}
.hero .sottotitolo{
  font-family: var(--font-titoli-corsivo);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--blu-notte-2);
  max-width: 44ch;
  margin-bottom: 18px;
}
.hero .intro{
  max-width: 62ch;
  font-size: 1.06rem;
}
.hero-decoro{
  position:absolute;
  pointer-events:none;
  opacity:.85;
  z-index:-1;
}

.hero-immagine{
  position:relative;
  margin-top: 34px;
  border-radius: var(--raggio-lg);
  overflow:hidden;
  height: min(46vw, 360px);
  min-height:200px;
  box-shadow: var(--ombra-morbida);
}
.hero-immagine img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 20%;
}
.hero-immagine::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(22,36,74,0) 55%, rgba(13,23,48,0.38) 100%);
}

/* ---------- Sfondo reale a piena pagina (collane, Chi siamo, Color Mix, Home) ----------
   L'immagine (decorata solo nella parte alta, poi sfuma nel blu pieno) viene
   ancorata UNA SOLA VOLTA in cima alla pagina, mai ripetuta: la ripetizione
   verticale creava una fascia vuota a metà delle pagine lunghe, dove la parte
   piatta di ogni tessera si affiancava a quella della tessera successiva.
   Sotto alla decorazione la pagina prosegue con background-color, lo stesso
   tono pieno della base dell'immagine, così qualunque lunghezza di pagina
   resta coerente senza soluzione di continuità. Sopra a tutto, una velatura
   blu notte uniforme garantisce che il testo chiaro resti sempre leggibile. */
body.sfondo-collana{
  background-image: linear-gradient(rgba(13,23,48,0.5), rgba(13,23,48,0.5)), var(--img-collana);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, top center;
  background-size: 100% 100%, 100% auto;
  background-color: var(--sfondo-notte-base);
}
/* Variante 'chiara': per le texture già chiare/avorio (le collane, non Home
   né Chi siamo) nessuna velatura scura sopra l'immagine — il testo resta
   quello scuro standard del sito, come su sfondo avorio normale. */
body.sfondo-collana.chiaro{
  background-image: var(--img-collana);
}
/* La Home usa un'unica immagine pensata apposta per coprire per intero le
   due sezioni della pagina: niente ripetizione, niente velatura. */
body.sfondo-collana.sfondo-unico{
  background-image: var(--img-collana);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.pannello-vetro{
  background: rgba(213,227,241,0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: var(--raggio-lg);
  padding: clamp(22px,4vw,42px) clamp(22px,4vw,46px);
  box-shadow: var(--ombra-morbida);
}
/* Testo scritto direttamente sull'immagine di sfondo, senza pannello (Home) */
.hero-su-immagine{
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}
.hero-su-immagine .hero-eyelet{ color: var(--oro-antico-chiaro); }
.hero-su-immagine h1{ color: var(--avorio); max-width:none; margin-left:auto; margin-right:auto; text-shadow: 0 2px 18px rgba(13,23,48,0.35); }
.hero-su-immagine .sottotitolo{ color: var(--oro-antico-chiaro); margin-left:auto; margin-right:auto; }
.hero-su-immagine .intro{ color: var(--azzurro-polvere-2); margin-left:auto; margin-right:auto; text-align:justify; text-align-last:left; }
.hero-su-immagine .riga-bottoni{ display:flex; gap:16px; flex-wrap:wrap; margin-top:22px; justify-content:center; }
/* Testo lungo (non hero) scritto direttamente sull'immagine, senza pannello */
.testo-su-immagine{
  max-width: 70ch;
  position:relative;
  z-index:2;
}
.testo-su-immagine p{
  color: var(--azzurro-polvere-2);
  text-shadow: 0 1px 14px rgba(13,23,48,0.55);
  font-size: 1.06rem;
}
.testo-su-immagine h2{
  color: var(--avorio);
  text-shadow: 0 2px 18px rgba(13,23,48,0.45);
}
/* Pagine legali (Privacy/Cookie Policy): testo minuto e sobrio, come le
   clausole di un contratto — niente titoli grandi né colori vistosi, solo
   piccole voci numerate una sotto l'altra, di basso risalto visivo. */
.legale-intestazione{
  color: var(--azzurro-polvere-2);
  opacity:.7;
  font-size:.78rem;
  letter-spacing:.02em;
  margin: -8px auto 10px;
  max-width: 62ch;
  text-align:center;
  white-space: nowrap;
}
@media (max-width: 560px){
  /* Sotto i 560px la riga non ci sta piu' su un'unica riga leggibile:
     si lascia andare a capo solo qui, non sui viewport normali. */
  .legale-intestazione{ white-space:normal; }
}
.lista-legale{
  max-width: 62ch;
  margin: 0 auto;
}
.voce-legale{
  color: var(--azzurro-polvere-2);
  opacity:.72;
  font-size:.78rem;
  line-height:1.7;
  text-align:justify;
  text-align-last:left;
  margin:0;
}
.voce-legale .tit{
  font-weight:600;
  opacity:.92;
}

/* Header di pagina secondaria (senza immagine grande) */
.page-hero{
  position:relative;
  z-index:0;
  padding: 64px 0 50px;
  overflow:hidden;
  border-bottom: 1px solid rgba(184,148,90,0.25);
}
.page-hero h1{ font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 22ch; }
.page-hero .intro{ max-width: 68ch; font-size: 1.05rem; }
/* Variante centrata: quando il titolo è l'unica scritta in testa alla
   pagina (niente più sezione "Tutti i titoli della collana" sotto), resta
   grande, in alto e centrato. */
.page-hero-centrato{ padding: 88px 0 40px; text-align:center; }
.page-hero-centrato .container{ display:flex; flex-direction:column; align-items:center; }
.page-hero-centrato .hero-eyelet{ font-size: 1.1rem; }
.page-hero-centrato h1{ font-size: clamp(2.6rem, 5.2vw, 4.2rem); max-width: 18ch; }
/* Meno spazio vuoto tra il titolo di pagina e l'intestazione della prima
   sezione subito sotto (es. "Funny Books" seguito da "Amici da Colorare"). */
.page-hero-centrato + .sezione{ padding-top: 18px; }

/* ---------- Testo e schede direttamente sull'immagine reale, senza riquadri:
   colori chiari con una leggera ombra per restare leggibili su tutta la
   pagina, grazie anche alla velatura uniforme dietro all'immagine. ---------- */
.sfondo-collana .page-hero{ border-bottom: none; }
.sfondo-collana .sezione + .sezione{ border-top: none; }
.sfondo-collana .page-hero .hero-eyelet{ color: var(--oro-antico-chiaro); }
.sfondo-collana .page-hero h1{ color: var(--avorio); text-shadow: 0 2px 18px rgba(13,23,48,0.5); }
.sfondo-collana .sezione-intestazione{
  max-width: 74ch;
}
.sfondo-collana .sottosezione-intestazione{
  max-width: 100%;
}
.sfondo-collana .sezione-intestazione .sezione-kicker,
.sfondo-collana .sottosezione-intestazione .sezione-kicker{ color: var(--oro-antico-chiaro); }
.sfondo-collana .sezione-intestazione h2,
.sfondo-collana .sottosezione-intestazione h3{
  color: var(--avorio);
  text-shadow: 0 2px 16px rgba(13,23,48,0.55);
}
.sfondo-collana .sezione-intestazione p,
.sfondo-collana .sottosezione-intestazione p{
  color: var(--azzurro-polvere-2);
  text-shadow: 0 1px 12px rgba(13,23,48,0.55);
}
.sfondo-collana .card-libro h3{ color: var(--avorio); text-shadow: 0 1px 10px rgba(13,23,48,0.5); }
.sfondo-collana .card-libro .categoria-libro{ color: var(--azzurro-polvere-2); }
.sfondo-collana .due-colonne h3{ color: var(--avorio); text-shadow: 0 2px 16px rgba(13,23,48,0.55); }
.sfondo-collana .due-colonne p{ color: var(--azzurro-polvere-2); text-shadow: 0 1px 12px rgba(13,23,48,0.55); }
.sfondo-collana .blocco-libro-testo h3{ color: var(--avorio); text-shadow: 0 2px 16px rgba(13,23,48,0.55); }
.sfondo-collana .blocco-libro-testo p{ color: var(--azzurro-polvere-2); text-shadow: 0 1px 12px rgba(13,23,48,0.55); }
.sfondo-collana .btn{ color: var(--oro-antico-chiaro); border-color: var(--oro-antico-chiaro); }
.sfondo-collana .btn:hover{ color: var(--blu-notte-scuro); }
/* Il bottone pieno (sfondo oro a tinta unita) ha già abbastanza contrasto da
   solo: il testo resta blu notte scuro invece di diventare oro-su-oro. */
.sfondo-collana .btn-pieno{ color: var(--blu-notte-scuro); border-color: var(--oro-antico); }
.sfondo-collana .btn-pieno:hover{ color: var(--avorio); }

/* Variante 'chiara': ripristina i colori di testo standard (scuri), dato
   che qui lo sfondo è avorio/chiaro e non serve più il testo chiaro. Si usa
   sempre il blu notte (mai l'oro) per testo/pulsanti: l'oro sulle nuvole
   colorate della texture (es. la variante bronzo di Steampunk) avrebbe un
   contrasto troppo debole, il blu notte invece si legge bene su ogni tinta
   chiara della texture, qualunque sia la collana.
   Un alone chiaro (non un riquadro) dietro al testo garantisce la leggibilità
   anche se, in un punto imprevedibile della texture, il testo scuro finisse
   sopra una zona più satura della foto (es. il bordo acquerello di un'immagine
   dalle proporzioni diverse da quelle previste). */
:root{ --alone-chiaro: 0 0 5px rgba(250,246,236,0.95), 0 0 12px rgba(250,246,236,0.85), 0 0 22px rgba(250,246,236,0.65); }
.sfondo-collana.chiaro .page-hero h1{ color: var(--blu-notte); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .page-hero .hero-eyelet{ color: var(--blu-notte-2); font-weight:600; text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .sezione-intestazione h2,
.sfondo-collana.chiaro .sottosezione-intestazione h3{ color: var(--blu-notte); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .sezione-intestazione p,
.sfondo-collana.chiaro .sottosezione-intestazione p{ color: var(--blu-notte-2); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .sezione-intestazione .sezione-kicker,
.sfondo-collana.chiaro .sottosezione-intestazione .sezione-kicker{ color: var(--blu-notte-2); font-weight:600; text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .card-libro h3{ color: var(--blu-notte); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .card-libro .categoria-libro{ color: var(--blu-notte-2); text-shadow: var(--alone-chiaro); }
/* Sotto ogni copertina, sull'immagine di sfondo reale il contrasto varia da
   punto a punto: un leggero fondo chiaro dietro a titolo e categoria garantisce
   la leggibilità ovunque cada la card, senza diventare una cornice pesante. */
.sfondo-collana.chiaro .card-testo{
  background: rgba(250,247,240,0.74);
  border-radius: var(--raggio-md);
  padding: 10px 12px 6px;
  margin: 12px -12px 4px;
}
.sfondo-collana.chiaro .card-libro h3{ margin-top:0; }
.sfondo-collana.chiaro .btn{ color: var(--oro-antico-scuro); border-color: var(--oro-antico); background: rgba(250,246,236,0.8); }
.sfondo-collana.chiaro .btn:hover{ color: var(--avorio); background: var(--oro-antico-chiaro); border-color: var(--oro-antico-chiaro); }
.sfondo-collana.chiaro .hero-su-immagine .hero-eyelet{ color: var(--blu-notte-2); font-weight:600; text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .hero-su-immagine h1{ color: var(--blu-notte); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .hero-su-immagine .sottotitolo{ color: var(--blu-notte-2); font-weight:600; text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .hero-su-immagine .intro{ color: var(--blu-notte-2); text-shadow: var(--alone-chiaro); }
.sfondo-collana.chiaro .testo-su-immagine p{ color: var(--blu-notte-2); text-shadow: var(--alone-chiaro); }

/* ---------- Intestazione a fotografia vera (nuova impostazione):
   l'immagine reale intera (cornice acquerello + zona chiara centrale, cosi
   com'è, non tagliata a striscia e non ripetuta) resta SOLO nell'intestazione,
   a proporzioni generose; il testo va nella sua zona chiara naturale, senza
   velatura. Il resto della pagina torna sullo sfondo chiaro standard del
   sito, come richiesto dal progetto ("sfondi chiari leggermente materici"). */
.hero-foto{
  position:relative;
  padding: 84px 0 60px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  min-height: clamp(420px, 46vw, 620px);
  display:flex;
  align-items:center;
  border-bottom: 3px solid var(--oro-antico);
}
.hero-foto .hero-eyelet{ color: var(--oro-antico-scuro); }
.hero-foto h1{ color: var(--blu-notte); }
.hero-foto .intro{ color: var(--blu-notte-2); }

/* ==========================================================================
   SEZIONI EDITORIALI
   ========================================================================== */
.sezione{
  position:relative;
  padding: 62px 0;
}
.sezione + .sezione{ border-top: 1px solid rgba(22,36,74,0.08); }
/* Centrata di default: titolo, occhiello e paragrafo di intestazione stanno
   sempre in mezzo alla pagina, non a sinistra (richiesto dall'autrice per
   ogni pagina del sito). Il paragrafo resta giustificato (bordo destro
   dritto) con l'ultima riga allineata a sinistra - regola tipografica
   standard che evita una riga corta isolata a meta' quando e' centrata. */
.sezione-intestazione{
  max-width: 70ch;
  margin: 0 auto 38px;
  position:relative;
  z-index:2;
  text-align:center;
}
.sezione-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-family: var(--font-titoli-corsivo);
  font-style:italic;
  color: var(--oro-antico-scuro);
  font-size: 1rem;
  margin-bottom:10px;
}
.sezione-kicker::before{
  content:"";
  width:34px; height:1px;
  background: var(--oro-antico);
  display:inline-block;
}
.sezione-intestazione h2{ font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.missione-titolo{ white-space:nowrap; }
@media (max-width: 680px){ .missione-titolo{ white-space:normal; } }
.sezione-intestazione .divisore{
  width:64px; height:2px;
  margin: 16px auto 18px;
  background: linear-gradient(90deg, var(--oro-antico), transparent);
}
.sezione-intestazione p{ font-size: 1.02rem; text-align:justify; text-align-last:left; }

/* .centrata resta come classe (retrocompatibile con l'HTML esistente) ma non
   fa piu' nulla di diverso dalla base, ora centrata di default. */
.sezione-intestazione.centrata{ margin-left:auto; margin-right:auto; }

.sezione-decoro{
  position:absolute;
  pointer-events:none;
  z-index:-1;
  opacity:.9;
}

.sezione-footer-link{
  margin-top: 30px;
  display:flex;
}

/* ==========================================================================
   GRIGLIA COPERTINE / CARD LIBRO
   ========================================================================== */
/* Flexbox invece di CSS Grid: cosi' l'ultima riga incompleta (o un'intera
   sezione con 1, 2 o 3 sole copertine) si centra automaticamente, senza
   bisogno di calcolare a mano quali card sono "orfane" per ogni breakpoint. */
.griglia-libri{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 34px 28px;
  align-items:start;
}
.griglia-libri > .card-libro{
  flex: 0 0 calc((100% - 84px) / 4);
  max-width: calc((100% - 84px) / 4);
}
.griglia-libri.compatta{ gap: 28px 22px; }
.griglia-libri.compatta > .card-libro{
  flex-basis: calc((100% - 66px) / 4);
  max-width: calc((100% - 66px) / 4);
}

.card-libro{
  display:flex;
  flex-direction:column;
}
.card-libro .cover-wrap{
  position:relative;
  border-radius: var(--raggio-md);
  overflow:hidden;
  box-shadow: var(--ombra-card);
  /* Trasparente: dove la proporzione reale della copertina lascia un
     margine dentro il riquadro 4:5, si vede lo sfondo della pagina invece
     di un'etichetta beige piena, che risultava troppo evidente. */
  background: transparent;
  transition: transform .35s ease, box-shadow .35s ease;
  /* 4:5 e' la proporzione della maggior parte delle copertine reali del
     catalogo (formato KDP tipico, non 2:3 da romanzo): riquadro unico per
     ogni copertina della griglia, cosi' ogni card ha la stessa altezza e
     titolo + pulsante restano allineati riga per riga, con il minimo
     ritaglio o margine possibile qualunque sia la proporzione reale. */
  aspect-ratio: 4 / 5;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* object-fit:contain: l'immagine reale resta sempre intera dentro il
   riquadro (mai ritagliata - niente piu' titoli o bordi tagliati sulle
   copertine con testo a bordo pagina), con un margine minimo dove la
   proporzione reale si discosta dal riquadro 4:5. */
.card-libro .cover-wrap img{
  width:100%; height:100%; object-fit:contain;
}
.card-libro:hover .cover-wrap{
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -16px rgba(22,36,74,0.5);
}
.card-libro .card-testo{ text-align:center; }
.card-libro h3{
  font-size: 1.08rem;
  margin: 16px 0 4px;
  color: var(--blu-notte);
  line-height:1.3;
  /* Riserva lo spazio di due righe cosi' il pulsante "Scopri il libro"
     resta alla stessa altezza in ogni card della riga, che il titolo
     occupi una riga sola o vada a capo. */
  min-height: 2.6em;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.card-libro .categoria-libro{
  font-family: var(--font-titoli-corsivo);
  font-style:italic;
  font-size: .85rem;
  color: var(--testo-notte-tenue);
  margin-bottom: 12px;
}

/* ---------- Bottoni oro antico ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--font-corpo);
  font-size: .88rem;
  letter-spacing:.03em;
  border: 1px solid var(--oro-antico);
  color: var(--oro-antico-scuro);
  background: transparent;
  cursor:pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
  align-self:flex-start;
}
.btn:hover{
  background: var(--oro-antico);
  color: var(--avorio);
  box-shadow: 0 10px 22px -10px rgba(184,148,90,0.65);
}
.btn-pieno{
  background: linear-gradient(180deg, var(--oro-antico-chiaro), var(--oro-antico));
  color: var(--blu-notte-scuro);
  border-color: var(--oro-antico);
}
.btn-pieno:hover{
  background: linear-gradient(180deg, var(--oro-antico), var(--oro-antico-scuro));
  color: var(--avorio);
}
.btn-scuro{
  border-color: rgba(247,242,230,0.5);
  color: var(--avorio);
}
.btn-scuro:hover{
  background: var(--oro-antico);
  border-color: var(--oro-antico);
  color: var(--blu-notte-scuro);
}
.card-libro .btn{ width:100%; }
.btn-prossimamente{
  border-style:dashed;
  color: var(--oro-antico-scuro);
  opacity:.72;
  cursor:default;
  pointer-events:none;
}
.btn-prossimamente:hover{
  background: transparent;
  box-shadow:none;
}

/* ==========================================================================
   BLOCCHI SPECIALI: introduzione a due colonne, citazione, valori
   ========================================================================== */
.due-colonne{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items:start;
}
.due-colonne img{
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-morbida);
}
/* Copertina + testo affiancati, con la copertina alla STESSA dimensione
   delle copertine in griglia (non ingrandita come in .due-colonne). */
.blocco-libro-testo{
  display:flex;
  gap: 32px;
  align-items:flex-start;
  margin-bottom: 40px;
}
.blocco-libro-testo .cover-wrap{
  flex: 0 0 300px;
  width: 300px;
  aspect-ratio: 1 / 1;
  border-radius: var(--raggio-md);
  overflow:hidden;
  box-shadow: var(--ombra-card);
}
.blocco-libro-testo .cover-wrap img{
  width:100%; height:100%; object-fit:cover;
}
.blocco-libro-testo .blocco-libro-corpo{ flex:1; padding-top:4px; }
.blocco-libro-testo .blocco-libro-corpo p{ text-align:justify; text-align-last:left; }

/* Chi siamo: logo a sinistra, testo affiancato a destra. */
.chi-siamo-intro{
  display:flex;
  gap: 56px;
  align-items:center;
}
.chi-siamo-intro .chi-siamo-logo{
  flex: 0 0 300px;
  width: 300px;
}
.chi-siamo-intro .chi-siamo-logo img{
  width:100%;
  height:auto;
  display:block;
}
.chi-siamo-intro .chi-siamo-testo{ flex:1; min-width:0; max-width:60ch; }
.chi-siamo-intro .chi-siamo-testo p{ text-align:justify; text-align-last:left; }
@media (max-width: 820px){
  .chi-siamo-intro{ flex-direction:column; gap:30px; }
  .chi-siamo-intro .chi-siamo-logo{ width:220px; flex-basis:auto; margin:0 auto; }
  .chi-siamo-intro .chi-siamo-testo{ max-width:none; }
}
.blocco-citazione{
  position:relative;
  padding: 40px 6vw;
  background: linear-gradient(180deg, var(--blu-notte) 0%, var(--blu-notte-2) 100%);
  color: var(--avorio);
}
.blocco-citazione blockquote{
  max-width: 900px;
  margin: 0 auto;
  text-align:center;
  font-family: var(--font-titoli-corsivo);
  font-style:italic;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height:1.5;
  color: var(--avorio);
}
.blocco-citazione cite{
  display:block;
  margin-top:18px;
  font-family: var(--font-corpo);
  font-style:normal;
  font-size: .85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--oro-antico-chiaro);
}

.griglia-valori{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.valore-card{
  padding: 28px 26px;
  background: var(--avorio);
  border: 1px solid rgba(184,148,90,0.28);
  border-radius: var(--raggio-md);
}
.valore-card .numero{
  font-family: var(--font-titoli);
  font-size: 1.6rem;
  color: var(--oro-antico);
  margin-bottom: 10px;
  display:block;
}
.valore-card h3{ font-size: 1.15rem; }
.valore-card p{ font-size: .96rem; margin-bottom:0; }

/* Griglia categorie in Home */
.griglia-categorie{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.categoria-card{
  position:relative;
  border-radius: var(--raggio-lg);
  overflow:hidden;
  min-height: 230px;
  display:flex;
  align-items:flex-end;
  padding: 26px 24px;
  box-shadow: var(--ombra-card);
  isolation:isolate;
}
.categoria-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:-2;
  transition: transform .5s ease;
}
.categoria-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(22,36,74,0.05) 30%, rgba(13,23,48,0.82) 100%);
  z-index:-1;
}
.categoria-card:hover img{ transform: scale(1.06); }
.categoria-card h3{ color: var(--avorio); margin-bottom:6px; font-size:1.3rem; }
.categoria-card p{ color: var(--azzurro-polvere-2); font-size:.88rem; margin-bottom:14px; }
.categoria-card .btn{ align-self:flex-start; }

/* Sottosezioni Color Mix */
.sottosezione{
  position:relative;
  padding: 46px 0;
}
/* Centrata come .sezione-intestazione: titolo e paragrafo di ogni
   sottosezione (Color Mix, Natale, Mandala e Mindfulness, Libri Attivita',
   Reverse Art...) in mezzo alla pagina, uno sopra l'altro, invece che
   affiancati titolo-a-sinistra/testo-a-destra. */
.sottosezione-intestazione{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: 8px;
  margin: 0 auto 26px;
}
.sottosezione-intestazione h3{
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.sottosezione-intestazione p{ margin:0 auto; font-size:.95rem; max-width:100%; text-align:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sito-footer{
  /* Il gradiente parte da --sfondo-notte-composito: e' il colore che si
     vede davvero appena sopra il footer nelle pagine lunghe (il velo
     semitrasparente dello sfondo-collana composto sopra il colore piatto
     di fondo) - non --sfondo-notte-base "crudo", che risulterebbe piu'
     scuro e creerebbe una giuntura visibile. Cosi' dove finisce lo sfondo
     di pagina e inizia il footer (separati dal margin-top qui sotto) non
     si vede alcuna giuntura di colore, qualunque sia la lunghezza della
     pagina. */
  margin-top: 90px;
  background: linear-gradient(180deg, var(--sfondo-notte-composito) 0%, var(--blu-notte-scuro) 100%);
  color: var(--avorio-2);
  padding: 48px 0 22px;
  position:relative;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 34px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(247,242,230,0.14);
  text-align:center;
}
.footer-grid h4{
  color: var(--oro-antico-chiaro);
  font-size: .78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom: 18px;
  font-family: var(--font-corpo);
  font-weight:600;
}
.footer-brand .logo-nome{ color: var(--avorio); font-size:1.4rem; }
.footer-brand p{ color: var(--azzurro-polvere-2); font-size:.92rem; max-width: 34ch; margin-top:14px; text-align:justify; text-align-last:left; }
.footer-grid a{
  display:block;
  color: var(--avorio-2);
  font-size: .92rem;
  padding: 6px 0;
  opacity:.9;
  transition: color .25s ease, padding-left .25s ease;
}
.footer-grid a:hover{ color: var(--oro-antico-chiaro); padding-left:4px; }
.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding-top: 20px;
  font-size: .82rem;
  color: rgba(247,242,230,0.6);
  text-align:center;
}
.footer-bottom .cuore{ color: var(--oro-antico-chiaro); }
.footer-legale{ font-size:.92rem; color: var(--azzurro-polvere-2); }
.footer-legale a{ color: var(--azzurro-polvere-2); opacity:.92; text-decoration: underline; text-underline-offset:2px; }
.footer-legale a:hover{ color: var(--oro-antico-chiaro); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px){
  .griglia-libri > .card-libro{ flex-basis: calc((100% - 56px) / 3); max-width: calc((100% - 56px) / 3); }
  .griglia-libri.compatta > .card-libro{ flex-basis: calc((100% - 44px) / 3); max-width: calc((100% - 44px) / 3); }
  .griglia-categorie{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col-newsletter{ grid-column: 1 / -1; }
}

@media (max-width: 960px){
  .due-colonne{ grid-template-columns: 1fr; gap:34px; }
  .griglia-valori{ grid-template-columns: 1fr 1fr; }
  .blocco-libro-testo{ flex-direction:column; gap:20px; align-items:center; }
  .blocco-libro-testo .cover-wrap{ width:220px; flex-basis:auto; }
  .blocco-libro-testo .blocco-libro-corpo{ align-self:stretch; }
}

@media (max-width: 680px){
  .griglia-libri, .griglia-libri.compatta{ gap: 26px 16px; }
  .griglia-libri > .card-libro, .griglia-libri.compatta > .card-libro{ flex-basis: calc((100% - 16px) / 2); max-width: calc((100% - 16px) / 2); }
  .griglia-categorie{ grid-template-columns: 1fr; }
  .griglia-valori{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 6px 14px; padding-bottom: 10px; }
  .footer-grid h4{ margin-bottom: 2px; }
  .footer-grid a{ padding: 1px 0; font-size: .82rem; line-height: 1.2; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-brand .logo-nome{ font-size: 1.15rem; }
  .footer-brand p{ display:none; }
  .footer-col-newsletter{ grid-column: 1 / -1; }
  .footer-col-newsletter a{ padding: 1px 0; line-height: 1.2; }
  .sito-footer{ margin-top: 20px; padding: 14px 0 6px; }
  .footer-bottom{ padding-top: 6px; font-size: .78rem; }
  .sezione{ padding: 46px 0; }
  .hero{ padding: 54px 0 42px; }
  .hero-immagine{ height: 58vw; }
}

@media (max-width: 460px){
  .griglia-libri, .griglia-libri.compatta{ max-width: 380px; margin-left:auto; margin-right:auto; }
  .griglia-libri > .card-libro, .griglia-libri.compatta > .card-libro{ flex-basis: 100%; max-width: 100%; }
}

/* ---------- Utility ---------- */
.solo-mobile{ display:none; }
@media (max-width: 680px){ .solo-mobile{ display:block; } .nascondi-mobile{ display:none; } }