/* ==========================================================================
   LIBRERIA DI BEA — Foglio di stile unico
   Mood: "Biblioteca segreta in un giardino d'inverno"
   Autore: progettato per Beatrice (@libreria_di_bea)
   --------------------------------------------------------------------------
   INDICE
   01. Font
   02. Variabili (palette, tipografia, spazi, ombre)
   03. Reset e base
   04. Accessibilità (skip link, focus, motion)
   05. Tipografia
   06. Layout: container, sezioni, ornamenti
   07. Bottoni e CTA
   08. Header e navigazione
   09. Hero
   10. Sezione "Chi sono"
   11. Card libro e griglia recensioni
   12. Filtri per genere (solo CSS)
   13. Moodboard consigli di lettura
   14. Social
   15. Newsletter / collaborazioni
   16. Form contatti
   17. Banner pubblicitario
   18. Footer
   19. Animazioni al caricamento
   20. Media queries (480 / 768 / 1024 / 1440)
   ========================================================================== */


/* ==========================================================================
   01. FONT
   Serif elegante per i titoli, sans-serif moderno per il testo,
   manoscritto delicato per le citazioni.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@300;400;500;600&family=Parisienne&display=swap');


/* ==========================================================================
   02. VARIABILI
   Cambiando i valori qui dentro cambia il colore di tutto il sito.
   ========================================================================== */
:root {

  /* --- Palette pastello (5 tinte coordinate) --- */
  --rosa-antico:      #d9a5ac;   /* PRIMARIO — il colore del brand */
  --rosa-profondo:    #8e5560;   /* versione scura, leggibile sul chiaro */
  --rosa-nebbia:      #f6e6e8;   /* velo rosato per gli sfondi */

  --salvia:           #a9bfa8;   /* accento botanico */
  --salvia-profonda:  #5f7a5f;
  --salvia-nebbia:    #e8efe7;

  --lilla:            #c7bcd8;   /* accento sognante */
  --lilla-profondo:   #776a8f;
  --lilla-nebbia:     #efeaf5;

  --terracotta:       #e0a188;   /* accento caldo, usato per le CTA */
  --terracotta-scura: #b06a4e;
  --terracotta-nebbia:#faeae2;

  --crema:            #fbf7f1;   /* sfondo pagina */
  --crema-scura:      #f3ece2;   /* sfondo sezioni alternate */

  /* --- Ruoli semantici --- */
  --sfondo:           var(--crema);
  --sfondo-alt:       var(--crema-scura);
  --superficie:       #ffffff;          /* card, box, form */
  --bordo:            #e7dcd2;
  --bordo-tenue:      #f0e7dd;

  --testo:            #3a3236;          /* inchiostro caldo */
  --testo-morbido:    #6d6167;
  --testo-tenue:      #948a8f;

  --primario:         var(--rosa-profondo);
  --cta:              var(--terracotta-scura);
  --cta-hover:        #97583f;
  --stella:           #d9a441;          /* oro tenue per il rating */

  /* --- Gradienti romantici --- */
  --grad-hero: linear-gradient(160deg,
                  var(--rosa-nebbia)    0%,
                  var(--crema)         38%,
                  var(--lilla-nebbia)  72%,
                  var(--salvia-nebbia) 100%);
  --grad-soft: linear-gradient(135deg, var(--crema) 0%, var(--rosa-nebbia) 100%);
  --grad-cta:  linear-gradient(135deg, var(--terracotta) 0%, var(--rosa-antico) 100%);

  /* --- Tipografia --- */
  --font-titoli:  'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-testo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accento: 'Parisienne', 'Brush Script MT', cursive;

  --peso-normale: 400;
  --peso-medio:   500;
  --peso-forte:   600;

  /* Scala tipografica fluida: si adatta da sola alla larghezza dello schermo */
  --t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --t-sm:   clamp(0.87rem, 0.84rem + 0.15vw, 0.94rem);
  --t-base: clamp(1rem,    0.97rem + 0.18vw, 1.09rem);
  --t-md:   clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --t-lg:   clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --t-xl:   clamp(1.85rem, 1.55rem + 1.50vw, 2.85rem);
  --t-xxl:  clamp(2.35rem, 1.80rem + 2.70vw, 4.20rem);

  /* --- Spazi --- */
  --sp-1: 0.35rem;
  --sp-2: 0.7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.4rem;
  --sp-7: 5rem;
  --sp-8: 7rem;

  /* --- Forme e ombre --- */
  --raggio-sm: 8px;
  --raggio:    16px;
  --raggio-lg: 26px;
  --raggio-tondo: 999px;

  --ombra-sm: 0 2px 8px rgba(142, 85, 96, 0.06);
  --ombra:    0 8px 26px rgba(142, 85, 96, 0.09);
  --ombra-lg: 0 18px 48px rgba(142, 85, 96, 0.14);

  /* --- Transizioni --- */
  --tr-veloce: 180ms cubic-bezier(.4, 0, .2, 1);
  --tr:        320ms cubic-bezier(.4, 0, .2, 1);
  --tr-lenta:  600ms cubic-bezier(.22, 1, .36, 1);

  /* --- Misure --- */
  --larghezza-max: 1180px;
  --larghezza-testo: 68ch;
  --altezza-header: 74px;
}


/* ==========================================================================
   03. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altezza-header) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  font-weight: var(--peso-normale);
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--primario); text-decoration: none; transition: color var(--tr-veloce); }
a:hover { color: var(--cta); }

ul, ol { padding-left: 1.15rem; }

button, input, textarea, select { font: inherit; color: inherit; }

hr { border: 0; height: 1px; background: var(--bordo); margin: var(--sp-5) 0; }


/* ==========================================================================
   04. ACCESSIBILITÀ
   ========================================================================== */

/* Link "salta al contenuto" per chi naviga da tastiera */
.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--primario);
  color: #fff;
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--raggio-sm) 0;
}
.salta-al-contenuto:focus { left: 0; color: #fff; }

/* Testo visibile solo agli screen reader */
.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;
}

/* Anello di focus sempre ben visibile (WCAG 2.1 AA) */
:focus-visible {
  outline: 3px solid var(--rosa-profondo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Rispetta la preferenza "riduci le animazioni" del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   05. TIPOGRAFIA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: var(--peso-forte);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--testo);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }

/* Occhiello sopra i titoli di sezione */
.occhiello {
  display: inline-block;
  font-family: var(--font-testo);
  font-size: var(--t-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--salvia-profonda);
  margin-bottom: var(--sp-2);
}

/* Frase manoscritta */
.manoscritto {
  font-family: var(--font-accento);
  font-size: var(--t-lg);
  line-height: 1.4;
  color: var(--rosa-profondo);
  letter-spacing: 0.01em;
}

/* Citazione decorativa */
.citazione {
  font-family: var(--font-accento);
  font-size: var(--t-lg);
  color: var(--lilla-profondo);
  text-align: center;
  max-width: 46ch;
  margin: var(--sp-5) auto;
  line-height: 1.5;
}

.sottotitolo {
  font-size: var(--t-md);
  color: var(--testo-morbido);
  font-weight: var(--peso-normale);
  max-width: 58ch;
}

.testo-centro { text-align: center; }
.testo-centro .sottotitolo,
.testo-centro .misura { margin-left: auto; margin-right: auto; }
.misura { max-width: var(--larghezza-testo); }


/* ==========================================================================
   06. LAYOUT: CONTAINER, SEZIONI, ORNAMENTI
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.container-stretto { max-width: 820px; }

.sezione { padding-block: var(--sp-6); position: relative; }
.sezione-alt { background: var(--sfondo-alt); }
.sezione-velo { background: var(--grad-soft); }

.intestazione-sezione {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--sp-5);
}

/* Filo decorativo con fiorellino al centro */
.filo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) auto var(--sp-4);
  max-width: 260px;
  color: var(--rosa-antico);
}
.filo::before, .filo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rosa-antico), transparent);
}
.filo svg { width: 20px; height: 20px; flex: none; }

/* Petali/foglie di sfondo: pura decorazione, invisibili agli screen reader */
.ornamento {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.45;
  z-index: 0;
}
.ornamento--alto-sx  { top: -20px;  left: -40px;  width: 190px; color: var(--salvia); }
.ornamento--alto-dx  { top: 40px;   right: -50px; width: 160px; color: var(--lilla); }
.ornamento--basso-dx { bottom: -30px; right: -30px; width: 200px; color: var(--rosa-antico); }
.ornamento--basso-sx { bottom: 10px; left: -60px;  width: 170px; color: var(--terracotta); }

.sopra { position: relative; z-index: 1; }

/* Trama sottile "carta" da sovrapporre alle sezioni chiare */
.carta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(217,165,172,.10) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(199,188,216,.10) 0, transparent 45%);
}


/* ==========================================================================
   07. BOTTONI E CTA
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--raggio-tondo);
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  transition: transform var(--tr-veloce), box-shadow var(--tr), background var(--tr), color var(--tr);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primario {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--ombra);
}
.btn-primario:hover { color: #fff; box-shadow: var(--ombra-lg); }

.btn-secondario {
  background: var(--superficie);
  color: var(--primario);
  border-color: var(--rosa-antico);
  box-shadow: var(--ombra-sm);
}
.btn-secondario:hover {
  background: var(--rosa-nebbia);
  color: var(--rosa-profondo);
  box-shadow: var(--ombra);
}

.btn-fantasma {
  background: transparent;
  color: var(--testo-morbido);
  border-color: var(--bordo);
}
.btn-fantasma:hover { border-color: var(--salvia); color: var(--salvia-profonda); }

.btn-piccolo { padding: 0.6rem 1.3rem; font-size: var(--t-xs); }

.gruppo-btn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.testo-centro .gruppo-btn { justify-content: center; }

/* Freccina che scivola in avanti al passaggio del mouse */
.btn .freccia { transition: transform var(--tr); }
.btn:hover .freccia { transform: translateX(4px); }


/* ==========================================================================
   08. HEADER E NAVIGAZIONE
   ========================================================================== */
.header-sito {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 241, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo-tenue);
}

.barra-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--altezza-header);
}

/* Logo con avatar */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--testo);
  flex: none;
}
.logo img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rosa-nebbia);
  box-shadow: var(--ombra-sm);
  transition: transform var(--tr), border-color var(--tr);
}
.logo:hover img { transform: rotate(-4deg) scale(1.05); border-color: var(--rosa-antico); }
.logo-testo {
  font-family: var(--font-titoli);
  font-size: 1.12rem;
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.logo-testo small {
  display: block;
  font-family: var(--font-accento);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--rosa-profondo);
  letter-spacing: 0.02em;
}

/* Voci di menu */
.menu {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  position: relative;
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-morbido);
  padding-block: 0.4rem;
}
.menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--rosa-antico);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--tr);
}
.menu a:hover { color: var(--rosa-profondo); }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu a[aria-current="page"] { color: var(--rosa-profondo); font-weight: var(--peso-forte); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }

/* Pulsante hamburger — funziona senza JavaScript, con una checkbox nascosta */
.interruttore-menu { display: none; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  background: var(--superficie);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--primario);
  border-radius: 2px;
  transition: transform var(--tr), opacity var(--tr-veloce);
}
.interruttore-menu:checked ~ .barra-nav .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.interruttore-menu:checked ~ .barra-nav .hamburger span:nth-child(2) { opacity: 0; }
.interruttore-menu:checked ~ .barra-nav .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   09. HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-hero);
  padding-block: var(--sp-7) var(--sp-6);
  text-align: center;
}

.hero-avatar {
  position: relative;
  width: 190px; height: 190px;
  margin: 0 auto var(--sp-4);
}
.hero-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 6px solid var(--superficie);
  box-shadow: var(--ombra-lg);
  position: relative;
  z-index: 2;
}
/* Alone luminoso che pulsa piano dietro l'avatar */
.hero-avatar::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      var(--rosa-antico), var(--lilla), var(--salvia), var(--terracotta), var(--rosa-antico));
  opacity: 0.4;
  filter: blur(14px);
  animation: respiro 7s ease-in-out infinite;
  z-index: 1;
}
@keyframes respiro {
  0%, 100% { transform: scale(1);    opacity: 0.35; }
  50%      { transform: scale(1.07); opacity: 0.55; }
}

.hero h1 { margin-bottom: var(--sp-2); }
.hero h1 .accento {
  display: block;
  font-family: var(--font-accento);
  font-size: 0.56em;
  font-weight: 400;
  color: var(--rosa-profondo);
  letter-spacing: 0.02em;
}

.hero-claim {
  font-size: var(--t-md);
  color: var(--testo-morbido);
  max-width: 54ch;
  margin: 0 auto var(--sp-4);
}

/* Piccoli dati sotto l'hero */
.hero-dati {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(217, 165, 172, .35);
}
.dato { text-align: center; }
.dato strong {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-lg);
  color: var(--rosa-profondo);
  line-height: 1;
}
.dato span {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* Hero ridotto per le pagine interne */
.hero-pagina {
  padding-block: var(--sp-6) var(--sp-5);
}
.hero-pagina h1 { margin-bottom: var(--sp-2); }

/* Briciole di pane */
.briciole {
  font-size: var(--t-xs);
  color: var(--testo-tenue);
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}
.briciole a { color: var(--testo-morbido); }
.briciole span { margin-inline: 0.4rem; opacity: 0.5; }


/* ==========================================================================
   10. SEZIONE "CHI SONO"
   ========================================================================== */
.chi-sono {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.ritratto {
  position: relative;
  max-width: 320px;
  margin-inline: auto;
}
.ritratto img {
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
  position: relative;
  z-index: 2;
}
/* Cornice sfalsata dietro la foto */
.ritratto::after {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--salvia);
  border-radius: var(--raggio-lg);
  z-index: 1;
}

.firma {
  font-family: var(--font-accento);
  font-size: var(--t-lg);
  color: var(--rosa-profondo);
  margin-top: var(--sp-2);
}

/* Elenco con fiorellini al posto dei pallini */
.elenco-fiori { list-style: none; padding: 0; margin: var(--sp-3) 0; }
.elenco-fiori li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: var(--sp-2);
}
.elenco-fiori li::before {
  content: '❀';
  position: absolute;
  left: 0; top: 0;
  color: var(--rosa-antico);
  font-size: 0.9em;
}


/* ==========================================================================
   11. CARD LIBRO E GRIGLIA RECENSIONI
   ========================================================================== */
.griglia-libri {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-libro {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-lg);
  overflow: hidden;
  box-shadow: var(--ombra-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.card-libro:hover,
.card-libro:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--ombra-lg);
  border-color: var(--rosa-antico);
}

/* Copertina */
.copertina {
  position: relative;
  overflow: hidden;
  background: var(--crema-scura);
  aspect-ratio: 2 / 3;
}
.copertina img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tr-lenta);
}
.card-libro:hover .copertina img { transform: scale(1.05); }

/* Velo che sale sulla copertina al passaggio del mouse */
.copertina::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(58,50,54,.55) 100%);
  opacity: 0;
  transition: opacity var(--tr);
}
.card-libro:hover .copertina::after { opacity: 1; }

/* Etichetta del genere */
.etichetta-genere {
  position: absolute;
  top: var(--sp-2); left: var(--sp-2);
  z-index: 2;
  padding: 0.28rem 0.8rem;
  border-radius: var(--raggio-tondo);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  font-size: 0.7rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rosa-profondo);
  box-shadow: var(--ombra-sm);
}
.etichetta-genere[data-colore="fantasy"]      { color: var(--lilla-profondo); }
.etichetta-genere[data-colore="thriller"]     { color: var(--terracotta-scura); }
.etichetta-genere[data-colore="paranormal"]   { color: var(--salvia-profonda); }
.etichetta-genere[data-colore="contemporaneo"]{ color: var(--testo-morbido); }

/* Corpo della card */
.corpo-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-4);
  gap: var(--sp-2);
}
.titolo-libro {
  font-size: var(--t-md);
  margin: 0;
  line-height: 1.25;
}
.autore-libro {
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin: 0;
}

/* Stelline */
.stelle {
  display: inline-flex;
  gap: 2px;
  color: var(--stella);
  line-height: 1;
}
.stelle svg { width: 16px; height: 16px; }
.stelle .vuota { color: var(--bordo); }

.testo-recensione {
  color: var(--testo-morbido);
  font-size: var(--t-sm);
  margin: 0;
}
/* Le recensioni lunghe si aprono con il <details>: niente JavaScript */
.leggi-tutto { margin-top: auto; }
.leggi-tutto > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--primario);
  padding: 0.3rem 0;
  transition: color var(--tr-veloce), gap var(--tr-veloce);
}
.leggi-tutto > summary::-webkit-details-marker { display: none; }
.leggi-tutto > summary::after {
  content: '↓';
  transition: transform var(--tr);
}
.leggi-tutto[open] > summary::after { transform: rotate(180deg); }
.leggi-tutto > summary:hover { color: var(--cta); gap: 0.6rem; }
.leggi-tutto[open] > summary { color: var(--cta); }
.contenuto-recensione {
  border-top: 1px dashed var(--bordo);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  font-size: var(--t-sm);
  color: var(--testo-morbido);
  animation: apri var(--tr) ease;
}
@keyframes apri {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contenuto-recensione p:last-child { margin-bottom: 0; }

/* Piede della card: link ad Amazon */
.piede-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
  background: var(--crema);
}
.link-acquista {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  color: var(--cta);
}
.link-acquista:hover { color: var(--cta-hover); }
.link-acquista svg { width: 15px; height: 15px; }
.data-lettura { font-size: var(--t-xs); color: var(--testo-tenue); }

/* Card orizzontale usata in home per le ultime 3 recensioni */
.card-libro--compatta .contenuto-recensione { display: none; }

/* Messaggio "nessun risultato" per i filtri */
.nessun-risultato {
  display: none;
  text-align: center;
  padding: var(--sp-6) var(--sp-3);
  color: var(--testo-tenue);
  font-family: var(--font-accento);
  font-size: var(--t-lg);
}


/* ==========================================================================
   12. FILTRI PER GENERE — solo CSS, nessun JavaScript
   Funzionano con radio nascoste + il selettore :has()
   ========================================================================== */
.filtri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.filtri input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.filtri label {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-tondo);
  background: var(--superficie);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-morbido);
  cursor: pointer;
  transition: all var(--tr-veloce);
  user-select: none;
}
.filtri label:hover {
  border-color: var(--rosa-antico);
  color: var(--rosa-profondo);
  transform: translateY(-1px);
}
.filtri input:checked + label {
  background: var(--grad-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ombra);
}
.filtri input:focus-visible + label {
  outline: 3px solid var(--rosa-profondo);
  outline-offset: 3px;
}

/* Nascondi le card che non appartengono al genere selezionato */
body:has(#filtro-romance:checked)       .card-libro:not([data-genere~="romance"]),
body:has(#filtro-fantasy:checked)       .card-libro:not([data-genere~="fantasy"]),
body:has(#filtro-thriller:checked)      .card-libro:not([data-genere~="thriller"]),
body:has(#filtro-paranormal:checked)    .card-libro:not([data-genere~="paranormal"]),
body:has(#filtro-contemporaneo:checked) .card-libro:not([data-genere~="contemporaneo"]) {
  display: none;
}

/* Se per quel genere non c'è ancora nulla, mostra un messaggio gentile */
body:has(#filtro-romance:checked):not(:has(.card-libro[data-genere~="romance"]))             .nessun-risultato,
body:has(#filtro-fantasy:checked):not(:has(.card-libro[data-genere~="fantasy"]))             .nessun-risultato,
body:has(#filtro-thriller:checked):not(:has(.card-libro[data-genere~="thriller"]))           .nessun-risultato,
body:has(#filtro-paranormal:checked):not(:has(.card-libro[data-genere~="paranormal"]))       .nessun-risultato,
body:has(#filtro-contemporaneo:checked):not(:has(.card-libro[data-genere~="contemporaneo"])) .nessun-risultato {
  display: block;
}


/* ==========================================================================
   13. MOODBOARD — pagina consigli di lettura
   ========================================================================== */
.tema {
  position: relative;
  border-radius: var(--raggio-lg);
  padding: var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-5);
  overflow: hidden;
  border: 1px solid var(--bordo-tenue);
  box-shadow: var(--ombra-sm);
}
/* Ogni tema ha la sua tinta pastello */
.tema[data-tinta="rosa"]       { background: linear-gradient(135deg, var(--rosa-nebbia), var(--crema)); }
.tema[data-tinta="salvia"]     { background: linear-gradient(135deg, var(--salvia-nebbia), var(--crema)); }
.tema[data-tinta="lilla"]      { background: linear-gradient(135deg, var(--lilla-nebbia), var(--crema)); }
.tema[data-tinta="terracotta"] { background: linear-gradient(135deg, var(--terracotta-nebbia), var(--crema)); }

.tema-testa {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.tema-icona {
  flex: none;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--ombra-sm);
  color: var(--rosa-profondo);
}
.tema-icona svg { width: 26px; height: 26px; }
.tema-testa h2 { font-size: var(--t-lg); margin-bottom: 0.2rem; }
.tema-testa p  { margin: 0; color: var(--testo-morbido); font-size: var(--t-sm); }

/* Griglia di "polaroid" letterarie */
.griglia-mood {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.scheda-mood {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--raggio);
  padding: var(--sp-3);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.scheda-mood:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.scheda-mood img {
  width: 74px;
  flex: none;
  border-radius: var(--raggio-sm);
  box-shadow: var(--ombra-sm);
  aspect-ratio: 2/3;
  object-fit: cover;
}
.scheda-mood h3 { font-size: var(--t-base); margin-bottom: 0.15rem; line-height: 1.25; }
.scheda-mood p  { font-size: var(--t-xs); color: var(--testo-morbido); margin: 0; }

/* Segnaposto quando il libro non ha ancora una copertina */
.copertina-vuota {
  width: 74px;
  aspect-ratio: 2/3;
  flex: none;
  border-radius: var(--raggio-sm);
  background: var(--grad-soft);
  border: 1px dashed var(--rosa-antico);
  display: grid;
  place-items: center;
  color: var(--rosa-antico);
  font-size: 1.3rem;
}


/* ==========================================================================
   14. SOCIAL
   ========================================================================== */
.griglia-social {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.card-social {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-sm);
  color: var(--testo);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.card-social:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombra-lg);
  border-color: var(--rosa-antico);
  color: var(--testo);
}
.icona-social {
  flex: none;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-soft);
  color: var(--rosa-profondo);
  transition: transform var(--tr-lenta), background var(--tr), color var(--tr);
}
.icona-social svg { width: 24px; height: 24px; }
.card-social:hover .icona-social {
  transform: rotate(-8deg) scale(1.1);
  background: var(--grad-cta);
  color: #fff;
}
.card-social strong { display: block; font-family: var(--font-titoli); font-size: var(--t-base); }
.card-social span   { font-size: var(--t-xs); color: var(--testo-tenue); }

/* Riga compatta di icone (footer, contatti) */
.icone-social {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}
.icone-social a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  color: var(--rosa-profondo);
  transition: transform var(--tr), background var(--tr), color var(--tr), border-color var(--tr);
}
.icone-social a:hover {
  transform: translateY(-4px) rotate(-6deg);
  background: var(--grad-cta);
  border-color: transparent;
  color: #fff;
}
.icone-social svg { width: 20px; height: 20px; }


/* ==========================================================================
   15. NEWSLETTER / COLLABORAZIONI
   ========================================================================== */
.riquadro-invito {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio-lg);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background: var(--grad-hero);
  border: 1px solid var(--bordo-tenue);
  box-shadow: var(--ombra);
}
.riquadro-invito h2 { margin-bottom: var(--sp-2); }

.form-newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 460px;
  margin: var(--sp-4) auto 0;
}
.form-newsletter input[type="email"] {
  flex: 1;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-tondo);
  background: var(--superficie);
  transition: border-color var(--tr-veloce), box-shadow var(--tr-veloce);
}
.form-newsletter input[type="email"]:focus {
  border-color: var(--rosa-antico);
  box-shadow: 0 0 0 4px var(--rosa-nebbia);
  outline: none;
}
.nota-privacy {
  font-size: var(--t-xs);
  color: var(--testo-tenue);
  margin-top: var(--sp-2);
}


/* ==========================================================================
   16. FORM CONTATTI
   ========================================================================== */
.box-form {
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-lg);
  padding: var(--sp-5);
  box-shadow: var(--ombra);
}

.campo { margin-bottom: var(--sp-3); }
.campo label {
  display: block;
  font-size: var(--t-sm);
  font-weight: var(--peso-forte);
  margin-bottom: 0.4rem;
  color: var(--testo);
}
.campo .aiuto {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--peso-normale);
  color: var(--testo-tenue);
  margin-top: 0.15rem;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm);
  background: var(--crema);
  transition: border-color var(--tr-veloce), box-shadow var(--tr-veloce), background var(--tr-veloce);
}
.campo textarea { min-height: 160px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  background: var(--superficie);
  border-color: var(--rosa-antico);
  box-shadow: 0 0 0 4px var(--rosa-nebbia);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: #c0564f;
  box-shadow: 0 0 0 4px #f7e3e1;
}

.riga-campi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* Casella privacy */
.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--t-sm);
  color: var(--testo-morbido);
  margin-bottom: var(--sp-4);
}
.campo-check input { width: 18px; height: 18px; margin-top: 4px; flex: none; accent-color: var(--rosa-profondo); }

/* Messaggi di esito e di errore */
.messaggio-form {
  border-radius: var(--raggio-sm);
  padding: var(--sp-3);
  font-size: var(--t-sm);
  margin-bottom: var(--sp-3);
}
.messaggio-form:empty { display: none; }
.messaggio-esito { background: var(--salvia-nebbia); border: 1px solid var(--salvia); color: var(--salvia-profonda); }
.messaggio-errore { background: #fbeae8; border: 1px solid #e3a9a3; color: #99413a; }
.errore-campo {
  display: block;
  font-size: var(--t-xs);
  color: #99413a;
  margin-top: 0.3rem;
}
.errore-campo:empty { display: none; }

/* Trappola per gli spam-bot: invisibile agli umani */
.campo-miele {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
}

/* Card "collaborazioni" */
.griglia-collab {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.card-collab {
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-left: 3px solid var(--rosa-antico);
  border-radius: var(--raggio);
  padding: var(--sp-4);
  box-shadow: var(--ombra-sm);
  transition: transform var(--tr), box-shadow var(--tr), border-left-color var(--tr);
}
.card-collab:hover {
  transform: translateX(4px);
  box-shadow: var(--ombra);
  border-left-color: var(--terracotta-scura);
}
.card-collab h3 { font-size: var(--t-base); margin-bottom: 0.3rem; }
.card-collab p  { font-size: var(--t-sm); color: var(--testo-morbido); margin: 0; }

/* Blocco contatti diretti */
.contatti-diretti {
  background: var(--grad-soft);
  border-radius: var(--raggio-lg);
  padding: var(--sp-5);
  border: 1px solid var(--bordo-tenue);
}
.voce-contatto {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--bordo);
}
.voce-contatto:last-child { border-bottom: 0; }
.voce-contatto svg { width: 22px; height: 22px; color: var(--rosa-profondo); flex: none; }
.voce-contatto span { font-size: var(--t-xs); color: var(--testo-tenue); display: block; }


/* ==========================================================================
   17. BANNER PUBBLICITARIO
   Spazio riservato in fondo alle pagine, sopra il footer.
   ========================================================================== */
.zona-banner {
  padding-block: var(--sp-5);
  background: var(--sfondo-alt);
  border-top: 1px solid var(--bordo-tenue);
}
.banner-pubblicita {
  min-height: 100px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo-tenue);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-3);
  overflow: hidden;
}
/* Quando il banner reale viene inserito, il segnaposto sparisce da solo */
.banner-pubblicita:has(ins, iframe, img, script + *) {
  border-style: none;
  padding: 0;
  background: transparent;
}
.etichetta-banner {
  display: block;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: var(--sp-2);
}


/* ==========================================================================
   17-bis. BANNER COOKIE
   Compare in basso finché il visitatore non sceglie. La scelta viene
   ricordata nel browser (localStorage) e Analytics parte solo se accetta.
   ========================================================================== */
.banner-cookie {
  position: fixed;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 200;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-lg);
  padding: var(--sp-4);
  animation: sali var(--tr-lenta) both;
}
.cookie-contenuto {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--larghezza-max);
  margin-inline: auto;
  align-items: flex-start;
}
.banner-cookie strong {
  display: block;
  font-family: var(--font-titoli);
  font-size: var(--t-md);
  margin-bottom: 0.3rem;
}
.banner-cookie p {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--testo-morbido);
  max-width: 72ch;
}
.cookie-bottoni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex: none;
}
@media (min-width: 768px) {
  .cookie-contenuto { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-5); }
  .banner-cookie { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
}

/* Piccolo link per riaprire le preferenze cookie (nel footer) */
.riapri-cookie {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.riapri-cookie:hover { color: var(--rosa-antico); }


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.footer-sito {
  background: var(--testo);
  color: #e9e0e3;
  padding-block: var(--sp-6) var(--sp-4);
}
.footer-sito a { color: #f0dfe2; }
.footer-sito a:hover { color: var(--rosa-antico); }

.griglia-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-sito h3 {
  color: #fff;
  font-size: var(--t-base);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-3);
}
.footer-sito p, .footer-sito li { font-size: var(--t-sm); color: #cbbfc4; }
.footer-sito ul { list-style: none; padding: 0; margin: 0; }
.footer-sito ul li { margin-bottom: 0.55rem; }

.footer-logo { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sp-3); }
.footer-logo img { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.footer-logo strong { font-family: var(--font-titoli); font-size: 1.1rem; color: #fff; }

.footer-sito .icone-social a {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #f0dfe2;
}
.footer-sito .icone-social a:hover { background: var(--grad-cta); border-color: transparent; color: #fff; }

.coda-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  text-align: center;
  padding-top: var(--sp-4);
  font-size: var(--t-xs);
  color: #a99ba0;
}
.nota-affiliazione {
  max-width: 62ch;
  line-height: 1.6;
  color: #9a8d92;
}


/* ==========================================================================
   18-bis. PAGINE DI TESTO (privacy policy, note legali)
   ========================================================================== */
.pagina-testo {
  max-width: var(--larghezza-testo);
  margin-inline: auto;
}
.pagina-testo h2 {
  font-size: var(--t-lg);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
}
.pagina-testo h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.pagina-testo h3 { font-size: var(--t-md); margin-top: var(--sp-4); }
.pagina-testo ul { margin-bottom: var(--sp-3); }
.pagina-testo li { margin-bottom: var(--sp-2); }
.pagina-testo table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  margin-bottom: var(--sp-4);
}
.pagina-testo th, .pagina-testo td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: top;
}
.pagina-testo th { background: var(--crema-scura); font-weight: var(--peso-forte); }
/* Le tabelle larghe scorrono da sole invece di sfondare la pagina */
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabella-scorrevole table { min-width: 480px; }

.riquadro-nota {
  background: var(--salvia-nebbia);
  border-left: 3px solid var(--salvia);
  border-radius: var(--raggio-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-sm);
  margin-bottom: var(--sp-4);
}
.riquadro-nota p:last-child { margin-bottom: 0; }
.da-compilare {
  background: var(--terracotta-nebbia);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font-weight: var(--peso-forte);
  color: var(--terracotta-scura);
}
.data-aggiornamento {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}


/* ==========================================================================
   19. ANIMAZIONI AL CARICAMENTO
   Le sezioni salgono dolcemente quando entrano nello schermo.
   ========================================================================== */
@keyframes sali {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anima { animation: sali var(--tr-lenta) both; }
.anima-1 { animation-delay: 60ms; }
.anima-2 { animation-delay: 140ms; }
.anima-3 { animation-delay: 220ms; }

/* Con JS attivo gli elementi partono nascosti e compaiono allo scroll */
.js .rivela { opacity: 0; transform: translateY(24px); transition: opacity var(--tr-lenta), transform var(--tr-lenta); }
.js .rivela.visibile { opacity: 1; transform: none; }


/* ==========================================================================
   20. MEDIA QUERIES — mobile first
   ========================================================================== */

/* --- da 480px: telefoni grandi --- */
@media (min-width: 480px) {
  .form-newsletter { flex-direction: row; }
  .griglia-libri { grid-template-columns: repeat(2, 1fr); }
  .coda-footer { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* --- fino a 767px: menu a tendina --- */
@media (max-width: 767px) {
  .hamburger { display: flex; }
  .menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    box-shadow: var(--ombra);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tr), opacity var(--tr);
    opacity: 0;
  }
  .interruttore-menu:checked ~ .barra-nav .menu { max-height: 420px; opacity: 1; }
  .menu li { border-bottom: 1px solid var(--bordo-tenue); }
  .menu li:last-child { border-bottom: 0; }
  .menu a { display: block; padding: 1rem var(--sp-4); font-size: var(--t-base); }
  .menu a::after { display: none; }
  .menu a[aria-current="page"] { background: var(--rosa-nebbia); }
  .header-sito .container { position: relative; }
  .ornamento { display: none; }
}

/* --- da 768px: tablet --- */
@media (min-width: 768px) {
  :root { --altezza-header: 82px; }

  .sezione { padding-block: var(--sp-7); }
  .griglia-libri { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .griglia-social { grid-template-columns: repeat(3, 1fr); }
  .griglia-mood { grid-template-columns: repeat(2, 1fr); }
  .griglia-collab { grid-template-columns: repeat(2, 1fr); }
  .griglia-footer { grid-template-columns: 1.4fr 1fr 1fr; }
  .riga-campi { grid-template-columns: 1fr 1fr; }

  .chi-sono { grid-template-columns: 320px 1fr; gap: var(--sp-6); }
  .ritratto { margin-inline: 0; }

  .tema { padding: var(--sp-5); }
  .riquadro-invito { padding: var(--sp-7) var(--sp-6); }
  .hero { padding-block: var(--sp-8) var(--sp-7); }
}

/* --- da 1024px: desktop --- */
@media (min-width: 1024px) {
  .griglia-libri { grid-template-columns: repeat(3, 1fr); }
  .griglia-mood  { grid-template-columns: repeat(3, 1fr); }
  .container { padding-inline: var(--sp-5); }
  .hero-avatar { width: 220px; height: 220px; }

  /* Impaginazione a due colonne per la pagina contatti */
  .layout-contatti {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: var(--sp-6);
    align-items: start;
  }
}

/* --- da 1440px: schermi larghi --- */
@media (min-width: 1440px) {
  :root { --larghezza-max: 1280px; }
  .griglia-libri { gap: var(--sp-5); }
  .ornamento { opacity: 0.55; }
}

/* --- Stampa: pulita, senza decorazioni --- */
@media print {
  .header-sito, .footer-sito, .zona-banner, .ornamento, .filtri, .gruppo-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card-libro { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .contenuto-recensione { display: block !important; }
}