/* ==========================================================
   Cùntamelo — sito pubblico
   "Quaderno di famiglia": carta avorio, terracotta, verde ulivo,
   titoli serif morbidi (Fraunces), testo tondo (Nunito),
   poesie in corsivo (Lora). Immagini grandi ovunque.
   ========================================================== */

:root{
  --carta:      #f6efe3;
  --carta-2:    #efe5d2;
  --panna:      #fbf7ef;
  --linea:      #e3d6bf;
  --inchiostro: #2b2118;
  --tenue:      #7a6a58;
  --terra:      #b5532e;
  --terra-s:    #9a4525;
  --terra-c:    #f6e2d6;
  --ulivo:      #5f6b3a;
  --ulivo-c:    #e6ead8;
  --grano:      #d9a441;
  --grano-c:    #f7e9c6;
  --mare:       #2f5d7c;
  --r:          18px;
  --ombra:      0 14px 40px -18px rgba(90, 60, 30, .35);
  --serif:      "Fraunces", Georgia, serif;
  --sans:       "Nunito", system-ui, sans-serif;
  --corsivo:    "Lora", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--sans); font-size:17px; line-height:1.6;
  color:var(--inchiostro); background:var(--carta);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--terra-s); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--terra); }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.12; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(2.2rem, 5vw, 3.6rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1em; }
button{ font:inherit; }
.contenitore{ width:min(1180px, 100% - 2rem); margin-inline:auto; }
.visivamente-nascosto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* etichetta piccola sopra i titoli */
.sopratitolo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terra);
  margin-bottom:.6rem;
}
.sopratitolo::before{ content:""; width:22px; height:3px; border-radius:3px; background:var(--terra); }
.sottotitolo{ color:var(--tenue); font-size:1.1rem; max-width:60ch; }

/* ----------------------------- bottoni ----------------------------- */
.b{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.35rem; border-radius:999px; border:2px solid transparent;
  font-weight:800; font-size:1rem; line-height:1; text-decoration:none; cursor:pointer;
  transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.b:active{ transform:translateY(1px); }
.b svg{ width:18px; height:18px; flex:none; }
.b-terra{ background:var(--terra); color:#fff; }
.b-terra:hover{ background:var(--terra-s); color:#fff; }
.b-ulivo{ background:var(--ulivo); color:#fff; }
.b-ulivo:hover{ background:#4c5630; color:#fff; }
.b-vuoto{ background:transparent; color:var(--inchiostro); border-color:var(--inchiostro); }
.b-vuoto:hover{ background:var(--inchiostro); color:var(--carta); }
.b-carta{ background:var(--panna); color:var(--inchiostro); border-color:var(--linea); }
.b-carta:hover{ border-color:var(--inchiostro); color:var(--inchiostro); }
.b-piccolo{ padding:.55rem .95rem; font-size:.9rem; }
.b-grande{ padding:1rem 1.8rem; font-size:1.1rem; }

/* ----------------------------- testata ----------------------------- */
.testata{
  position:sticky; top:0; z-index:40;
  background:rgba(246,239,227,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.testata .contenitore{ display:flex; align-items:center; gap:1.5rem; min-height:76px; }
.marchio{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--inchiostro); margin-right:auto; }
.marchio svg{ width:44px; height:44px; }
.marchio b{ font-family:var(--serif); font-size:1.65rem; font-weight:700; letter-spacing:-.01em; }
.marchio small{ display:block; font-size:.72rem; color:var(--tenue); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:-.2rem; }
.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{
  padding:.55rem .9rem; border-radius:999px; text-decoration:none; color:var(--inchiostro); font-weight:800; font-size:1rem;
}
.nav a:hover,.nav a.attivo{ background:var(--carta-2); color:var(--terra-s); }
.nav .b{ margin-left:.5rem; }
.cerca-tasto{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; border:2px solid var(--linea); background:var(--panna); color:var(--inchiostro); cursor:pointer;
}
.cerca-tasto:hover{ border-color:var(--inchiostro); }
.cerca-tasto svg{ width:20px; height:20px; }
.burger{ display:none; width:44px; height:44px; border-radius:12px; border:2px solid var(--linea); background:var(--panna); cursor:pointer; align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }

/* barra di ricerca a scomparsa */
.cerca-barra{ display:none; border-top:1px solid var(--linea); background:var(--panna); }
.cerca-barra.aperta{ display:block; }
.cerca-barra form{ display:flex; gap:.6rem; padding:.9rem 0; }
.cerca-barra input{
  flex:1; font:inherit; font-size:1.1rem; padding:.8rem 1.1rem; border-radius:999px;
  border:2px solid var(--linea); background:#fff; color:var(--inchiostro);
}
.cerca-barra input:focus{ outline:none; border-color:var(--terra); }

@media (max-width:860px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; padding:1rem; gap:.3rem;
    background:var(--panna); border-bottom:1px solid var(--linea); box-shadow:var(--ombra);
  }
  .nav.aperta{ display:flex; }
  .nav a{ font-size:1.1rem; padding:.8rem 1rem; }
  .nav .b{ margin:.5rem 0 0; }
  .burger{ display:inline-flex; }
  .marchio svg{ width:38px; height:38px; }
  .marchio b{ font-size:1.4rem; }
}

/* ----------------------------- quaderno ----------------------------- */
/* le righe del quaderno: sfondo dell'apertura e delle fasce importanti */
.quaderno{
  position:relative;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(2.5rem - 1px), rgba(181,83,46,.22) calc(2.5rem - 1px), rgba(181,83,46,.22) 2.5rem, transparent 2.5rem),
    repeating-linear-gradient(180deg, transparent 0, transparent 35px, rgba(95,107,58,.14) 35px, rgba(95,107,58,.14) 36px),
    var(--panna);
}
.quaderno::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 70% 40%, transparent 55%, rgba(246,239,227,.75));
}
.quaderno > *{ position:relative; z-index:1; }

/* ----------------------------- apertura ----------------------------- */
.apertura{ padding:3.5rem 0 3rem; border-bottom:1px solid var(--linea); }
.apertura .contenitore{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:3rem; align-items:center; }
.apertura .parola{ font-size:clamp(3rem, 8.5vw, 6.2rem); line-height:1; margin:.2rem 0 .4rem; color:var(--inchiostro); }
.apertura .pronuncia{ font-family:var(--corsivo); font-style:italic; color:var(--tenue); font-size:1.25rem; }
.apertura .significato{ font-size:clamp(1.3rem, 2.4vw, 1.7rem); font-weight:800; color:var(--terra-s); margin:.8rem 0 .4rem; }
.apertura .descrizione{ font-size:1.1rem; color:#4a3d31; max-width:56ch; }
.apertura .azioni{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; margin-top:1.4rem; }
.apertura .figura{ position:relative; }
.apertura .figura img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:28px;
  box-shadow:var(--ombra); border:6px solid var(--panna); transform:rotate(1.5deg);
}
.apertura .figura .timbro{
  position:absolute; left:-14px; bottom:-14px; transform:rotate(-8deg);
  background:var(--grano); color:var(--inchiostro); font-family:var(--serif); font-weight:700; font-size:1.05rem;
  padding:.55rem 1rem; border-radius:12px; box-shadow:0 6px 16px -8px rgba(0,0,0,.4);
}
@media (max-width:860px){
  .apertura{ padding:2rem 0 2.2rem; }
  .apertura .contenitore{ grid-template-columns:1fr; gap:1.6rem; }
  .apertura .figura{ order:-1; }
  .apertura .figura img{ transform:none; border-radius:22px; }
  .apertura .figura .timbro{ left:12px; bottom:-10px; }
}

/* numeri */
.numeri{ display:flex; flex-wrap:wrap; gap:1rem 2.5rem; padding:1.4rem 0; border-bottom:1px solid var(--linea); }
.numeri div{ display:flex; align-items:baseline; gap:.5rem; }
.numeri b{ font-family:var(--serif); font-size:2rem; color:var(--terra); }
.numeri span{ color:var(--tenue); font-weight:700; }

/* ----------------------------- sezioni ----------------------------- */
.sezione{ padding:3.6rem 0; }
.sezione-testa{ display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.sezione-testa .b{ flex:none; }
.sezione-alt{ background:var(--panna); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
@media (max-width:860px){ .sezione{ padding:2.4rem 0; } }

/* griglie */
.griglia{ display:grid; gap:1.4rem; grid-template-columns:repeat(4, minmax(0,1fr)); }
.griglia-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.griglia-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:1000px){ .griglia,.griglia-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .griglia,.griglia-3,.griglia-2{ grid-template-columns:1fr; } }

/* ----------------------------- scheda voce ----------------------------- */
.scheda{
  position:relative; display:flex; flex-direction:column;
  background:var(--panna); border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; box-shadow:0 1px 0 rgba(90,60,30,.04);
  transition:transform .18s, box-shadow .18s;
}
.scheda:hover{ transform:translateY(-3px); box-shadow:var(--ombra); }
.scheda-figura{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--carta-2); }
.scheda-figura img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.scheda:hover .scheda-figura img{ transform:scale(1.04); }
.scheda-corpo{ padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.3rem; flex:1; }
.scheda-tipo{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tenue); }
.bollino{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--grano); }
.scheda h3{ font-size:1.55rem; }
.scheda h3 a{ color:inherit; text-decoration:none; }
.scheda h3 a::after{ content:""; position:absolute; inset:0; }
.scheda .pronuncia{ font-family:var(--corsivo); font-style:italic; color:var(--tenue); font-size:.98rem; }
.scheda .significato{ font-weight:800; color:var(--terra-s); font-size:1.05rem; }
.scheda .versi{ font-family:var(--corsivo); font-style:italic; color:#4a3d31; font-size:1.02rem; line-height:1.5; }
.scheda .paese{ color:var(--tenue); font-size:.9rem; margin-top:auto; padding-top:.5rem; display:flex; align-items:center; gap:.35rem; }
.scheda .paese svg{ width:14px; height:14px; }
.scheda-piede{ position:relative; z-index:2; display:flex; align-items:center; gap:.5rem; padding:0 1.2rem 1.1rem; }
.scheda-piede .condividi{ margin-left:auto; }

/* ----------------------------- ascolta (audio) ----------------------------- */
.ascolta{
  display:inline-flex; align-items:center; gap:.6rem; padding:.45rem .9rem .45rem .45rem;
  border-radius:999px; border:2px solid var(--ulivo); background:var(--ulivo-c); color:var(--ulivo);
  font-weight:800; font-size:.92rem; cursor:pointer; line-height:1;
}
.ascolta .cerchio{
  width:30px; height:30px; border-radius:50%; background:var(--ulivo); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
.ascolta .cerchio svg{ width:14px; height:14px; }
.ascolta .icona-pausa{ display:none; }
.ascolta.suona{ background:var(--ulivo); color:#fff; }
.ascolta.suona .cerchio{ background:#fff; color:var(--ulivo); }
.ascolta.suona .icona-play{ display:none; }
.ascolta.suona .icona-pausa{ display:block; }
.ascolta-grande{ font-size:1.05rem; padding:.55rem 1.2rem .55rem .55rem; }
.ascolta-grande .cerchio{ width:44px; height:44px; }
.ascolta-grande .cerchio svg{ width:18px; height:18px; }
.ascolta .barra{ display:none; width:80px; height:4px; border-radius:4px; background:rgba(255,255,255,.35); overflow:hidden; }
.ascolta.suona .barra{ display:block; }
.ascolta .barra i{ display:block; height:100%; width:0; background:#fff; }

/* ----------------------------- condividi ----------------------------- */
.condividi{ position:relative; }
.condividi-tasto{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:999px;
  border:2px solid var(--linea); background:#fff; color:var(--inchiostro); font-weight:800; font-size:.9rem; cursor:pointer; line-height:1;
}
.condividi-tasto:hover{ border-color:var(--inchiostro); }
.condividi-tasto svg{ width:16px; height:16px; }
.condividi-menu{
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:30; min-width:250px;
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:.5rem; box-shadow:var(--ombra);
  display:none;
}
.condividi.aperto .condividi-menu{ display:block; }
.condividi-menu.sotto{ bottom:auto; top:calc(100% + 8px); }
.condividi-menu a,.condividi-menu button{
  display:flex; align-items:center; gap:.7rem; width:100%; padding:.6rem .7rem; border-radius:10px;
  border:0; background:transparent; color:var(--inchiostro); text-decoration:none; font-weight:700; font-size:.95rem; cursor:pointer; text-align:left;
}
.condividi-menu a:hover,.condividi-menu button:hover{ background:var(--carta); }
.condividi-menu .ico{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.condividi-menu .ico svg{ width:16px; height:16px; fill:currentColor; }
.ico-wa{ background:#25D366; } .ico-fb{ background:#1877F2; } .ico-tg{ background:#26A5E4; } .ico-x{ background:#111; }
.ico-mail{ background:var(--mare); } .ico-link{ background:var(--tenue); } .ico-img{ background:var(--terra); } .ico-altro{ background:var(--ulivo); }
.condividi-menu hr{ border:0; border-top:1px solid var(--linea); margin:.35rem 0; }
.condividi-menu small{ display:block; color:var(--tenue); font-weight:600; font-size:.78rem; }

/* barra di condivisione estesa (pagina della voce) */
.condividi-barra{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.condividi-barra a,.condividi-barra button{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; border:2px solid var(--linea);
  background:#fff; color:var(--inchiostro); text-decoration:none; font-weight:800; font-size:.92rem; cursor:pointer; line-height:1;
}
.condividi-barra a:hover,.condividi-barra button:hover{ border-color:var(--inchiostro); }
.condividi-barra .ico{ width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.condividi-barra .ico svg{ width:13px; height:13px; fill:currentColor; }

/* avviso "link copiato" */
.brindisi{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%) translateY(20px); opacity:0; z-index:90;
  background:var(--inchiostro); color:var(--carta); padding:.7rem 1.1rem; border-radius:999px; font-weight:800; font-size:.95rem;
  transition:opacity .2s, transform .2s; pointer-events:none;
}
.brindisi.visibile{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ----------------------------- categorie / abbecedario ----------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:999px;
  border:2px solid var(--linea); background:var(--panna); color:var(--inchiostro); font-weight:800; font-size:.92rem; text-decoration:none;
}
.chip:hover{ border-color:var(--inchiostro); color:var(--inchiostro); }
.chip.attiva{ background:var(--inchiostro); border-color:var(--inchiostro); color:var(--carta); }
.chip .n{ color:var(--tenue); font-weight:700; }
.chip.attiva .n{ color:rgba(255,255,255,.7); }
.abbecedario{ display:flex; flex-wrap:wrap; gap:.3rem; }
.abbecedario a,.abbecedario span{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px;
  font-family:var(--serif); font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--inchiostro);
  background:var(--panna); border:1px solid var(--linea);
}
.abbecedario span{ color:#c9bda8; background:transparent; }
.abbecedario a:hover{ border-color:var(--inchiostro); }
.abbecedario a.attiva{ background:var(--terra); border-color:var(--terra); color:#fff; }

/* filtri della pagina parole */
.filtri{ display:grid; gap:1.2rem; margin-bottom:2rem; }
.filtri form.cerca{ display:flex; gap:.6rem; max-width:560px; }
.filtri form.cerca input{ flex:1; font:inherit; font-size:1.05rem; padding:.75rem 1.1rem; border-radius:999px; border:2px solid var(--linea); background:#fff; }
.filtri form.cerca input:focus{ outline:none; border-color:var(--terra); }
.filtri .riga{ display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; align-items:center; }
.filtri .riga > b{ color:var(--tenue); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.ordina{ display:flex; gap:.3rem; }
.ordina a{ padding:.35rem .7rem; border-radius:8px; text-decoration:none; color:var(--tenue); font-weight:800; font-size:.9rem; }
.ordina a.attiva,.ordina a:hover{ background:var(--carta-2); color:var(--inchiostro); }

.vuoto{ text-align:center; padding:3rem 1rem; color:var(--tenue); background:var(--panna); border:1px dashed var(--linea); border-radius:var(--r); }
.vuoto img{ width:160px; margin:0 auto 1rem; opacity:.9; }

/* paginazione */
.paginazione{ margin-top:2.5rem; display:flex; justify-content:center; }
.paginazione nav > div:first-child{ display:none; }
.paginazione span[aria-current] span, .paginazione a, .paginazione span[aria-disabled] span{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 .6rem; margin:0 .15rem;
  border-radius:10px; border:1px solid var(--linea); background:var(--panna); color:var(--inchiostro); text-decoration:none; font-weight:800;
}
.paginazione span[aria-current] span{ background:var(--terra); border-color:var(--terra); color:#fff; }
.paginazione span[aria-disabled] span{ opacity:.4; }
.paginazione svg{ width:16px; height:16px; }
.paginazione p{ display:none; }

/* ----------------------------- pagina della voce ----------------------------- */
.briciole{ font-size:.9rem; color:var(--tenue); display:flex; gap:.5rem; flex-wrap:wrap; padding:1.2rem 0 0; }
.briciole a{ color:var(--tenue); }
.voce-testa{ padding:1.5rem 0 2.5rem; }
.voce-testa .contenitore{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:3rem; align-items:start; }
.voce-testa .parola{ font-size:clamp(2.6rem, 7vw, 5.2rem); line-height:1; margin:.3rem 0 .5rem; }
.voce-testa .pronuncia{ font-family:var(--corsivo); font-style:italic; color:var(--tenue); font-size:1.25rem; }
.voce-testa .significato{ font-size:clamp(1.3rem, 2.4vw, 1.75rem); font-weight:800; color:var(--terra-s); margin:.9rem 0 .2rem; }
.voce-testa .meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; color:var(--tenue); font-weight:700; font-size:.95rem; margin-top:1rem; }
.voce-testa .meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.voce-testa .meta svg{ width:16px; height:16px; }
.voce-testa .media{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-top:1.4rem; }
.voce-testa .media .di{ color:var(--tenue); font-size:.9rem; }
.voce-figura img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:28px; border:6px solid var(--panna); box-shadow:var(--ombra); }
.voce-figura figcaption{ color:var(--tenue); font-size:.9rem; margin-top:.6rem; text-align:center; font-style:italic; font-family:var(--corsivo); }
@media (max-width:860px){
  .voce-testa .contenitore{ grid-template-columns:1fr; gap:1.5rem; }
  .voce-figura{ order:-1; }
  .voce-figura img{ border-radius:22px; }
}

.voce-corpo{ padding:0 0 3rem; }
.voce-corpo .contenitore{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:3rem; align-items:start; }
@media (max-width:960px){ .voce-corpo .contenitore{ grid-template-columns:1fr; } }
.prosa{ font-size:1.12rem; line-height:1.75; max-width:68ch; }
.prosa p{ margin-bottom:1.1em; }
.prosa em{ font-family:var(--corsivo); }
.esempio{
  margin:1.8rem 0; padding:1.4rem 1.6rem; border-left:5px solid var(--grano); background:var(--grano-c); border-radius:0 var(--r) var(--r) 0;
}
.esempio .dialetto{ font-family:var(--corsivo); font-style:italic; font-size:1.35rem; line-height:1.45; }
.esempio .italiano{ color:#5a4a3a; margin-top:.5rem; }
.esempio .italiano::before{ content:"→ "; color:var(--terra); font-weight:800; }

.video{ aspect-ratio:16/9; border-radius:var(--r); overflow:hidden; background:#000; margin:1.5rem 0; box-shadow:var(--ombra); }
.video iframe,.video video{ width:100%; height:100%; border:0; display:block; }

/* poesia */
.poesia{ font-family:var(--corsivo); font-size:1.3rem; line-height:1.7; }
.poesia .strofa{ margin-bottom:1.5em; }
.poesia .verso{ display:block; }
.poesia .verso::first-letter{ color:var(--terra); }
.traduzione summary{ cursor:pointer; font-weight:800; color:var(--terra-s); font-family:var(--sans); font-size:1rem; margin:.5rem 0 1rem; }
.traduzione .poesia{ color:var(--tenue); font-size:1.08rem; }

/* colonna laterale */
.laterale{ display:grid; gap:1.4rem; position:sticky; top:96px; }
.riquadro{ background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); padding:1.3rem 1.4rem; }
.riquadro h4{ font-size:1.15rem; margin-bottom:.8rem; }
.riquadro .aiuto{ color:var(--tenue); font-size:.9rem; }
.cartolina-anteprima{ border-radius:12px; border:1px solid var(--linea); box-shadow:0 8px 24px -14px rgba(0,0,0,.4); margin-bottom:.9rem; }
.riquadro .azioni{ display:flex; flex-wrap:wrap; gap:.5rem; }
.scheda-dati dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem 1rem; font-size:.95rem; }
.scheda-dati dt{ color:var(--tenue); font-weight:700; }
.scheda-dati dd{ margin:0; font-weight:700; }

/* ----------------------------- fascia proponi ----------------------------- */
.fascia-proponi{ background:var(--terra); color:#fff; padding:3.5rem 0; overflow:hidden; }
.fascia-proponi .contenitore{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2.5rem; align-items:center; }
.fascia-proponi h2{ color:#fff; font-size:clamp(1.9rem, 4vw, 3rem); }
.fascia-proponi p{ font-size:1.15rem; color:rgba(255,255,255,.88); max-width:52ch; }
.fascia-proponi .b-carta{ background:#fff; color:var(--terra-s); border-color:#fff; }
.fascia-proponi .b-carta:hover{ background:var(--carta); }
.fascia-proponi img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; border:8px solid rgba(255,255,255,.25); }
@media (max-width:860px){ .fascia-proponi .contenitore{ grid-template-columns:1fr; } .fascia-proponi img{ max-width:220px; margin:0 auto; } }

/* ----------------------------- moduli ----------------------------- */
.modulo{ display:grid; gap:1.1rem; }
.modulo .campi{ display:grid; gap:1.1rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
.modulo .campi .pieno{ grid-column:1 / -1; }
@media (max-width:640px){ .modulo .campi{ grid-template-columns:1fr; } }
.campo label{ display:block; font-weight:800; margin-bottom:.35rem; }
.campo label small{ color:var(--tenue); font-weight:600; }
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea,.campo select{
  width:100%; font:inherit; font-size:1.05rem; padding:.8rem 1rem; border-radius:14px; border:2px solid var(--linea); background:#fff; color:var(--inchiostro);
}
.campo textarea{ min-height:120px; resize:vertical; }
.campo input:focus,.campo textarea:focus,.campo select:focus{ outline:none; border-color:var(--terra); box-shadow:0 0 0 4px var(--terra-c); }
.campo .aiuto{ color:var(--tenue); font-size:.9rem; margin-top:.3rem; }
.campo .errore{ color:#a12d1e; font-weight:700; font-size:.92rem; margin-top:.3rem; }
.campo input[type=file]{ font:inherit; }
.scelta-tipo{ display:flex; gap:.5rem; flex-wrap:wrap; }
.scelta-tipo label{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:999px; border:2px solid var(--linea); background:var(--panna); cursor:pointer; font-weight:800; margin:0; }
.scelta-tipo input{ accent-color:var(--terra); }
.scelta-tipo label:has(input:checked){ border-color:var(--terra); background:var(--terra-c); color:var(--terra-s); }
.consenso{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:#4a3d31; }
.consenso input{ width:20px; height:20px; accent-color:var(--terra); margin-top:.2rem; flex:none; }
.avviso{ padding:1rem 1.2rem; border-radius:14px; font-weight:700; }
.avviso-errore{ background:#fbe4df; color:#8f2a1c; border:1px solid #f0bdb2; }
.avviso-ok{ background:var(--ulivo-c); color:#3f4a26; border:1px solid #cdd6b4; }
.trappola{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.pagina-stretta{ max-width:760px; }
.pagina-stretta .prosa{ max-width:none; }

/* ----------------------------- piede ----------------------------- */
.piede{ background:var(--inchiostro); color:#d8ccb8; padding:3.5rem 0 2rem; margin-top:0; }
.piede a{ color:#f0e6d4; }
.piede .colonne{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.piede h4{ color:#fff; font-size:1.1rem; margin-bottom:.8rem; }
.piede .marchio b,.piede .marchio{ color:#fff; }
.piede .marchio small{ color:#b8a98f; }
.piede ul{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.piede .social{ display:flex; gap:.6rem; margin-top:1rem; }
.piede .social a{ width:40px; height:40px; border-radius:50%; border:1px solid #5a4b3a; display:inline-flex; align-items:center; justify-content:center; }
.piede .social a:hover{ background:var(--terra); border-color:var(--terra); }
.piede .social svg{ width:18px; height:18px; fill:currentColor; }
.piede .crediti{ border-top:1px solid #4a3d31; margin-top:2.5rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem 2rem; font-size:.92rem; color:#b8a98f; }
.piede .crediti b{ color:#f0e6d4; font-weight:800; }
@media (max-width:900px){ .piede .colonne{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .piede .colonne{ grid-template-columns:1fr; } }

/* ----------------------------- 404 ----------------------------- */
.errore-pagina{ text-align:center; padding:4rem 0; }
.errore-pagina img{ width:260px; margin:0 auto 1.5rem; }

/* ----------------------------- commenti e recensioni ----------------------------- */
.commenti{ margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--linea); }
.lista-commenti{ display:grid; gap:1rem; margin-bottom:2rem; }
.commento{ background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); padding:1.2rem 1.4rem; }
.commento p{ margin:.8rem 0 0; font-size:1.02rem; }
.commento-testa{ display:flex; gap:.8rem; align-items:center; }
.commento .avatar{
  width:42px; height:42px; border-radius:50%; background:var(--terra); color:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.2rem;
}
.commento .da{ color:var(--tenue); font-weight:600; }
.commento .quando{ color:var(--tenue); font-size:.85rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.modulo-commento{ background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); padding:1.5rem; gap:1rem; }
.modulo-commento h3{ font-size:1.35rem; }
.modulo-commento .campo textarea{ min-height:100px; }

.stelle{ display:inline-flex; gap:1px; vertical-align:middle; }
.stelle svg{ width:16px; height:16px; fill:#d8cdb8; }
.stelle svg.piena{ fill:var(--grano); }
.scelta-stelle{ display:inline-flex; flex-direction:row-reverse; gap:.1rem; }
.scelta-stelle input{ position:absolute; opacity:0; width:1px; height:1px; }
.scelta-stelle label{ cursor:pointer; margin:0; padding:.1rem; }
.scelta-stelle label svg{ width:32px; height:32px; fill:#d8cdb8; transition:fill .1s, transform .1s; }
.scelta-stelle label:hover svg,.scelta-stelle label:hover ~ label svg,
.scelta-stelle input:checked ~ label svg{ fill:var(--grano); }
.scelta-stelle label:hover svg{ transform:scale(1.12); }
.scelta-stelle input:focus-visible + label svg{ outline:2px solid var(--terra); border-radius:4px; }

/* donazione */
.donazione{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.fascia-sostieni{ background:var(--ulivo); color:#fff; padding:3rem 0; }
.fascia-sostieni .contenitore{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between; }
.fascia-sostieni h2{ color:#fff; font-size:clamp(1.6rem, 3vw, 2.3rem); }
.fascia-sostieni p{ color:rgba(255,255,255,.85); margin:.4rem 0 0; max-width:52ch; }
.fascia-sostieni .b-carta{ background:#fff; color:var(--ulivo); border-color:#fff; }
.fascia-sostieni .b-carta:hover{ background:var(--carta); }
.recensioni-home{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.4rem; }
@media (max-width:860px){ .recensioni-home{ grid-template-columns:1fr; } }
.nav a.cuore{ color:var(--terra-s); }
.nav a.cuore svg{ width:15px; height:15px; vertical-align:-2px; margin-right:.2rem; fill:currentColor; }

/* ----------------------------- mappa dei paesi ----------------------------- */
.mappa-cornice{ border-radius:var(--r); overflow:hidden; border:6px solid var(--panna); box-shadow:var(--ombra); background:var(--carta-2); }
.mappa{ height:min(560px, 70vh); min-height:320px; }
.leaflet-container{ font-family:var(--sans); font-size:.95rem; }
.leaflet-tooltip{ border-radius:10px; border:1px solid var(--linea); background:var(--panna); color:var(--inchiostro); font-weight:700; padding:.4rem .7rem; box-shadow:var(--ombra); }
.chips-paesi .chip{ font-size:1rem; }
.fascia-mappa{ display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:2rem; align-items:center; background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); padding:2rem 2.2rem; }
.mappa-invito{ display:flex; flex-direction:column; align-items:center; gap:.4rem; text-decoration:none; color:var(--terra-s); font-weight:800; }
.mappa-invito svg{ width:150px; height:150px; transition:transform .3s; }
.mappa-invito:hover svg{ transform:scale(1.05) rotate(-2deg); }
@media (max-width:760px){ .fascia-mappa{ grid-template-columns:1fr; } .mappa-invito svg{ width:110px; height:110px; } }

/* varianti e etimologia nella scheda */
.si-dice-anche,.etimologia{ margin:2rem 0; padding:1.4rem 1.6rem; background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); }
.si-dice-anche h3,.etimologia h3{ font-size:1.3rem; margin-bottom:.8rem; }
.si-dice-anche ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.si-dice-anche li{ font-size:1.05rem; display:flex; flex-wrap:wrap; gap:.3rem .5rem; align-items:baseline; }
.si-dice-anche li b{ font-family:var(--serif); font-size:1.3rem; color:var(--terra-s); }
.si-dice-anche .dove{ color:var(--tenue); font-weight:700; }
.si-dice-anche small{ color:var(--tenue); font-style:italic; font-family:var(--corsivo); font-size:.95rem; }
.si-dice-anche .aiuto{ color:var(--tenue); font-size:.9rem; margin:.9rem 0 0; }
.etimologia .prosa{ font-size:1.05rem; }
.etimologia .prosa p:last-child{ margin-bottom:0; }
.origine-pill,.voce-testa .meta .origine{ display:inline-block; padding:.2rem .7rem; border-radius:999px; background:var(--grano-c); color:#7a5a12; font-weight:800; font-size:.85rem; margin-bottom:.8rem; }
.voce-testa .meta .origine{ margin:0; }
.varianti-lista{ display:grid; gap:.8rem; grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:860px){ .varianti-lista{ grid-template-columns:1fr; } }
.variante{ display:grid; gap:.2rem; text-decoration:none; color:var(--inchiostro); background:var(--panna); border:1px solid var(--linea); border-radius:var(--r); padding:1rem 1.2rem; }
.variante:hover{ border-color:var(--terra); }
.variante b{ font-family:var(--serif); font-size:1.5rem; color:var(--terra-s); }
.variante span{ color:var(--tenue); }
.variante small{ font-style:italic; font-family:var(--corsivo); color:var(--tenue); }

/* registratore vocale */
.registra-riquadro{ background:var(--panna); border:2px dashed var(--linea); border-radius:14px; padding:1rem 1.1rem; display:grid; gap:.7rem; }
.registra-riquadro .oppure{ color:var(--tenue); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.registratore{ display:grid; gap:.6rem; }
.reg-tasti{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.reg-avvia,.reg-ferma,.reg-usa,.reg-rifai{
  font:inherit; font-weight:800; cursor:pointer; border-radius:999px; padding:.65rem 1.2rem; border:2px solid var(--terra); background:#fff; color:var(--terra-s); display:inline-flex; align-items:center; gap:.5rem;
}
.reg-avvia:disabled{ opacity:.5; cursor:not-allowed; }
.reg-avvia .reg-punto{ width:12px; height:12px; border-radius:50%; background:#c62828; }
.reg-ferma{ background:var(--terra); color:#fff; }
.in-corso .reg-ferma{ animation:pulsa 1s infinite; }
@keyframes pulsa{ 0%,100%{ box-shadow:0 0 0 0 rgba(181,83,46,.4); } 50%{ box-shadow:0 0 0 8px rgba(181,83,46,0); } }
.reg-tempo{ font-variant-numeric:tabular-nums; font-weight:800; color:#c62828; }
.reg-esito{ display:grid; gap:.6rem; }
.reg-esito audio{ width:100%; max-width:420px; }
.reg-azioni{ display:flex; gap:.5rem; flex-wrap:wrap; }
.reg-usa{ background:var(--ulivo); border-color:var(--ulivo); color:#fff; }
.reg-usa:disabled{ opacity:.6; cursor:default; }
.reg-rifai{ border-color:var(--linea); color:var(--tenue); }
.reg-stato{ font-size:.9rem; color:var(--tenue); }
.pronta .reg-stato{ color:var(--ulivo); font-weight:700; }

/* gli elementi con attributo hidden restano nascosti anche se hanno una classe con display */
.registratore [hidden]{ display:none !important; }
.ico-ig{ background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7); }
.brindisi{ max-width:min(90vw, 420px); text-align:center; }

/* ----------------------------- ritocchi grafici (26/10) ----------------------------- */
/* la parola del giorno con l'evidenziatore giallo, come su un quaderno */
.apertura .parola .evidenziata{
  background:linear-gradient(transparent 58%, var(--grano-c) 58%, var(--grano-c) 94%, transparent 94%);
  padding:0 .12em; margin:0 -.12em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
/* la foto attaccata con lo scotch */
.apertura .figura::before{
  content:""; position:absolute; z-index:2; top:-13px; right:12%; width:118px; height:30px; transform:rotate(5deg);
  background:rgba(217,164,65,.5); border-left:2px dashed rgba(255,255,255,.5); border-right:2px dashed rgba(255,255,255,.5);
  box-shadow:0 2px 6px -2px rgba(0,0,0,.25);
}
@media (max-width:860px){ .apertura .figura::before{ right:8%; width:90px; } }
/* i numeri come cartellini */
.numeri{ border-bottom:0; gap:.7rem; padding:1.3rem 0 .2rem; }
.numeri div{ background:var(--panna); border:1px solid var(--linea); border-radius:14px; padding:.55rem 1.1rem .55rem .9rem; box-shadow:0 6px 14px -12px rgba(90,60,30,.5); }
.numeri b{ font-size:1.8rem; line-height:1; }
/* schede: filo colorato della categoria, comparsa morbida */
.scheda{ border-top:4px solid var(--cat, var(--grano)); }
html.js .scheda{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease, box-shadow .25s; }
html.js .scheda.visto{ opacity:1; transform:none; }
html.js .scheda.visto:hover{ transform:translateY(-3px); }
/* le poesie su carta a righe, con la virgoletta grande */
.scheda-poesia .scheda-corpo{
  position:relative; padding-top:1.4rem;
  background:repeating-linear-gradient(transparent 0 26px, rgba(181,83,46,.13) 26px 27px);
}
.scheda-poesia .scheda-corpo::before{
  content:"\201C"; position:absolute; right:1rem; top:-.1rem; font-family:var(--serif); font-size:4.5rem; line-height:1; color:var(--terra); opacity:.22; pointer-events:none;
}
.scheda-poesia .versi{ font-size:1.08rem; }
/* i bottoni pieni hanno uno spessore */
.b-terra,.b-ulivo{ box-shadow:0 3px 0 rgba(0,0,0,.18); }
.b-terra:active,.b-ulivo:active{ box-shadow:0 1px 0 rgba(0,0,0,.18); }
/* il piede con il bordo smerlato, come un biglietto */
.piede{ position:relative; margin-top:16px; }
.piede::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:15px;
  background:radial-gradient(circle at 11px 15px, var(--inchiostro) 10px, transparent 11px) repeat-x; background-size:22px 15px;
}
/* titoli di sezione con il filo decorativo a destra */
.sezione-testa > div:first-child{ position:relative; }
.sezione-testa h2{ position:relative; display:inline-block; }
.sezione-testa h2::after{
  content:""; display:inline-block; width:38px; height:8px; margin-left:.6rem; vertical-align:middle; border-radius:8px;
  background:linear-gradient(90deg, var(--terra) 0 33%, var(--grano) 33% 66%, var(--ulivo) 66%); opacity:.9;
}

/* il marchio: la C che parla */
.marchio svg{ width:46px; height:46px; filter:drop-shadow(0 3px 6px rgba(90,60,30,.25)); }
.marchio:hover svg path:last-child{ animation:voce .9s ease-in-out; }
@keyframes voce{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }