/* WikiVino — foglio di stile unico. Tema "Netto": bianco e nero, un solo accento color vino.
   I colori delle tipologie (rosso, bianco, rosato, spumante, dolce) servono solo a indicare il tipo di vino. */

/* Caratteri serviti dal sito (nessuna richiesta a server esterni). Licenza SIL OFL 1.1: assets/font/OFL-Hanken-Grotesk.txt */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/hanken-grotesk-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(font/hanken-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(font/hanken-grotesk-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(font/hanken-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(font/hanken-grotesk-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(font/hanken-grotesk-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(font/hanken-grotesk-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(font/hanken-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --fondo: #FFFFFF; --superficie: #FFFFFF; --campo: #F4F4F2; --testo: #26262A; --titolo: #0E0E10; --tenue: #66666D;
  --linea: #E4E4E8; --linea-forte: #0E0E10; --accento: #A3133A; --su-accento: #FFFFFF; --accento-tenue: #FBEDF0;
  --testata: rgba(255, 255, 255, 0.92); --piede: #0E0E10; --su-piede: #A3A3AB;
  --m1: #EDEDEF; --m2: #D5D5DA; --m3: #B3B3BA; --m4: #5D5D66; --m5: #0E0E10; --m-bordo: #FFFFFF;
  --giusto: #1E7A46; --c-rosso: #8E1F3A; --c-bianco: #E3B341; --c-rosato: #EE9AAE; --c-spumante: #D9D27A; --c-dolce: #C9752B; --c-vari: #9A9187;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --misura: 42rem; --larghezza: 76rem; --margine: 1.5rem; --testata-h: 4rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #111113; --superficie: #18181B; --campo: #1F1F23; --testo: #D6D6DB; --titolo: #FFFFFF; --tenue: #9C9CA5;
    --linea: #2C2C32; --linea-forte: #F2F2F4; --accento: #F0718F; --su-accento: #1A0A0F; --accento-tenue: #2B151B;
    --testata: rgba(17, 17, 19, 0.92); --piede: #09090A;
    --m1: #2A2A2F; --m2: #45454C; --m3: #6E6E77; --m4: #A9A9B2; --m5: #F2F2F4; --m-bordo: #111113;
    --giusto: #5BC488; --c-rosso: #C9506B; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #111113; --superficie: #18181B; --campo: #1F1F23; --testo: #D6D6DB; --titolo: #FFFFFF; --tenue: #9C9CA5;
  --linea: #2C2C32; --linea-forte: #F2F2F4; --accento: #F0718F; --su-accento: #1A0A0F; --accento-tenue: #2B151B;
  --testata: rgba(17, 17, 19, 0.92); --piede: #09090A;
  --m1: #2A2A2F; --m2: #45454C; --m3: #6E6E77; --m4: #A9A9B2; --m5: #F2F2F4; --m-bordo: #111113;
  --giusto: #5BC488; --c-rosso: #C9506B; color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata-h) + 1rem); }
body {
  margin: 0; background: var(--fondo); color: var(--testo); font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { color: var(--titolo); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
strong { font-weight: 700; color: var(--titolo); }
.in { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding-left: var(--margine); padding-right: var(--margine); }
.visivo-no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -999px; top: 0; }
.salta:focus { left: 1rem; top: 1rem; background: var(--superficie); color: var(--titolo); padding: 0.6rem 1rem; z-index: 20; border: 2px solid var(--titolo); }

/* Tipologie */
.tipo-rosso { --vino: var(--c-rosso); } .tipo-bianco { --vino: var(--c-bianco); } .tipo-rosato { --vino: var(--c-rosato); }
.tipo-spumante { --vino: var(--c-spumante); } .tipo-dolce { --vino: var(--c-dolce); } .tipo-vari { --vino: var(--c-vari); }
.bicchiere { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--vino, var(--c-vari)); flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }

/* Categorie: DOCG piena, DOC contorno, IGT tratteggiata */
.cat { display: inline-block; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.08em; padding: 0.3rem 0.45rem; border-radius: 3px; border: 1.5px solid var(--titolo); color: var(--titolo); vertical-align: 0.12em; white-space: nowrap; }
.cat-docg { background: var(--titolo); color: var(--fondo); }
.cat-igt { border-style: dashed; color: var(--tenue); border-color: var(--tenue); }

/* ── Testata ──────────────────────────────────────────── */
.testata { position: sticky; top: 0; z-index: 10; background: var(--testata); border-bottom: 1px solid var(--linea); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.testata .in { display: flex; align-items: center; gap: 2rem; height: var(--testata-h); }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--titolo); flex: none; }
.logo:hover { text-decoration: none; }
.logo b { color: var(--accento); font-weight: 700; }
.logo svg { width: 2rem; height: 2rem; flex: none; }
.logo-vino { fill: var(--accento); } .logo-calice { fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.menu { display: flex; align-items: center; gap: 1.6rem; font-weight: 500; font-size: 0.95rem; }
.menu a { color: var(--tenue); padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--titolo); text-decoration: none; }
.menu a[aria-current] { color: var(--titolo); border-bottom-color: var(--accento); }
.testata-azioni { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.cerca-btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-width: 14rem; height: 2.5rem; padding: 0 0.55rem 0 0.9rem;
  font: 400 0.92rem var(--sans); color: var(--tenue); background: var(--campo); border: 1px solid var(--linea); border-radius: 4px; cursor: pointer;
}
.cerca-btn:hover { border-color: var(--tenue); text-decoration: none; color: var(--titolo); }
.cerca-btn span { flex: 1; text-align: left; }
.cerca-btn kbd { font: 500 0.72rem var(--sans); border: 1px solid var(--linea); background: var(--superficie); border-radius: 3px; padding: 0.1rem 0.4rem; }
.lente { display: inline-block; width: 0.85rem; height: 0.85rem; border: 2px solid currentColor; border-radius: 50%; position: relative; flex: none; }
.lente::after { content: ""; position: absolute; width: 2px; height: 0.38rem; background: currentColor; right: -0.26rem; bottom: -0.32rem; transform: rotate(-45deg); border-radius: 1px; }
.menu-toggle { display: none; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: none; border: 1px solid var(--linea); border-radius: 4px; cursor: pointer; padding: 0; }
.menu-toggle i { display: block; width: 18px; height: 2px; background: var(--titolo); border-radius: 1px; transition: transform 0.15s, opacity 0.15s; }
.menu-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Ricerca ──────────────────────────────────────────── */
.ricerca { position: relative; max-width: 36rem; }
.ricerca-campo { display: flex; align-items: center; gap: 0.75rem; background: var(--superficie); border: 2px solid var(--titolo); border-radius: 4px; padding: 0.35rem 0.35rem 0.35rem 1.1rem; color: var(--tenue); }
.ricerca-campo:focus-within { outline: 3px solid var(--accento); outline-offset: 2px; }
.ricerca input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0.55rem 0;
  font: 400 1.05rem var(--sans); color: var(--titolo);
}
.ricerca input::placeholder { color: var(--tenue); opacity: 1; }
.ricerca input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ricerca button[type="submit"] {
  flex: none; font: 600 1rem var(--sans); color: var(--su-accento); background: var(--accento); border: 0; border-radius: 3px;
  padding: 0.7rem 1.3rem; cursor: pointer;
}
.ricerca button[type="submit"]:hover { filter: brightness(1.1); }
.ricerca button[type="submit"]:focus-visible { outline-offset: 3px; }
.suggerimenti {
  position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 0.4rem); list-style: none; margin: 0; padding: 0.35rem 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
  max-height: min(26rem, 60vh); overflow-y: auto;
}
.suggerimenti:empty { display: none; }
.suggerimenti a { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem; color: var(--testo); }
.suggerimenti a:hover, .suggerimenti [aria-selected="true"] a { background: var(--campo); text-decoration: none; }
.suggerimenti [aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--accento); }
.sug-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sug-nome { font-weight: 600; color: var(--titolo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-info { font-size: 0.85rem; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug-tipo { font-size: 0.75rem; color: var(--tenue); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex: none; }
.suggerimenti .vuoto, .suggerimenti .tutti a { font-size: 0.92rem; }
.suggerimenti .vuoto { padding: 0.6rem 1rem; color: var(--tenue); margin: 0; }
.suggerimenti .tutti { border-top: 1px solid var(--linea); margin-top: 0.3rem; padding-top: 0.3rem; }
.suggerimenti .tutti a { color: var(--accento); font-weight: 600; }

/* Finestra di ricerca (dalla testata, su tutte le pagine) */
.cerca-dialogo { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: transparent; }
.cerca-dialogo::backdrop { background: rgba(14, 14, 16, 0.55); }
.cerca-dialogo .ricerca { margin: 12vh auto 0; width: calc(100% - 2 * var(--margine)); max-width: 40rem; }
.cerca-dialogo .ricerca-campo { border-color: var(--linea-forte); }
.cerca-dialogo .suggerimenti { position: static; margin-top: 0.4rem; }
.chiudi { flex: none; font: 500 0.8rem var(--sans); color: var(--tenue); background: var(--campo); border: 1px solid var(--linea); border-radius: 3px; padding: 0.35rem 0.55rem; cursor: pointer; }

/* ── Pagine interne ──────────────────────────────────── */
.pagina { padding-top: 1.75rem; }
.briciole { font-size: 0.88rem; color: var(--tenue); margin: 0 0 1.5rem; }
.briciole a { color: var(--tenue); }
.briciole a:hover { color: var(--titolo); }
.briciole span[aria-hidden] { margin: 0 0.4rem; opacity: 0.6; }
.intestazione { border-bottom: 2px solid var(--titolo); padding-bottom: 1.75rem; margin-bottom: 2.25rem; }
.intestazione-con-mappa { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 2.5rem; align-items: end; }
.intestazione h1 { margin-bottom: 0.6rem; }
.intestazione .sommario { margin-bottom: 0; }
.occhiello { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--accento); margin: 0 0 0.8rem; }
.sommario { font-size: 1.2rem; line-height: 1.55; color: var(--tenue); max-width: var(--misura); }
.sommario strong { color: var(--titolo); }
.mini-mappa { margin: 0; text-align: center; }
.mini-mappa img { width: 100%; height: auto; display: block; }
.mini-mappa figcaption { font-size: 0.8rem; color: var(--tenue); margin-top: 0.4rem; }

.testo { max-width: var(--misura); line-height: 1.7; }
.testo h2 { font-size: 1.45rem; margin: 2.2rem 0 0.6rem; }
.testo h2:first-child { margin-top: 0; }
.testo h3 { margin: 1.6rem 0 0.4rem; }
.testo ul, .testo ol { padding-left: 1.2rem; margin: 0 0 1.2em; }
.testo li { margin-bottom: 0.45em; }
.testo li::marker { color: var(--tenue); }
.testo a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accento) 35%, transparent); text-underline-offset: 0.2em; }
.testo a:hover { text-decoration-color: var(--accento); }

.blocco { margin-top: 3.5rem; }
.blocco > h2, .blocco-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-top: 2px solid var(--titolo); padding-top: 0.8rem; margin: 0 0 1.25rem; }
.blocco-testa h2 { margin: 0; }
/* Niente doppia riga nera quando un blocco segue subito l'intestazione */
.intestazione + .blocco { margin-top: 0; }
.intestazione + .blocco > h2, .intestazione + .blocco > .blocco-testa { border-top: 0; padding-top: 0; }
.blocco-testa a { font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.conta { font-size: 0.95rem; font-weight: 500; color: var(--tenue); letter-spacing: 0; }
.blocco > h2 .conta { margin-left: auto; }
.nota { font-size: 0.95rem; color: var(--tenue); max-width: var(--misura); margin: 2rem 0 0; }
.fonte, .verifica { font-size: 0.88rem; color: var(--tenue); max-width: var(--misura); }
.fonte { border-top: 1px solid var(--linea); padding-top: 1rem; margin: 2.5rem 0 0; }
.verifica { margin: 0 0 1.5rem; }
.vuoto { color: var(--tenue); }
.voce-extra { display: block; font-size: 0.88rem; color: var(--tenue); line-height: 1.4; }
.voce-nome { font-weight: 500; color: var(--titolo); }

/* Legenda dei colori del vino */
.legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.88rem; color: var(--tenue); margin: 0 0 1rem; }
.legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--vino); }

/* Righe con scheda: nome, vitigni e barretta del colore */
.elenco-docg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.riga-docg { border-bottom: 1px solid var(--linea); }
.riga-docg a { display: flex; flex-direction: column; gap: 0.1rem; height: 100%; padding: 0.8rem 0 0.8rem 1rem; color: inherit; box-shadow: inset 3px 0 0 var(--vino, var(--linea)); }
.riga-docg a:hover { text-decoration: none; background: var(--campo); }
.riga-docg a:hover .riga-nome { color: var(--accento); }
.riga-nome { font-weight: 700; font-size: 1.08rem; color: var(--titolo); line-height: 1.3; }
.riga-vitigni { font-size: 0.9rem; color: var(--tenue); line-height: 1.4; }
.compatto .riga-docg a { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.riga-docg:target, .elenco-nomi li:target { background: var(--accento-tenue); }

/* Elenchi semplici di DOC e IGT */
.elenco-nomi { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.elenco-docg + .elenco-nomi { margin-top: 1.5rem; }
.elenco-nomi li { break-inside: avoid; padding: 0.55rem 0; border-bottom: 1px solid var(--linea); line-height: 1.35; }
.elenco-nomi a { font-weight: 600; }
.elenco-nomi .cat { margin-left: 0.3rem; }

/* Regioni */
.area { margin-top: 2.5rem; }
.area:first-of-type { margin-top: 0; }
.area > h2, .area > h3 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); border-bottom: 2px solid var(--titolo); padding-bottom: 0.5rem; margin: 0; }
.elenco-regioni { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
.elenco-regioni li { border-bottom: 1px solid var(--linea); }
.elenco-regioni a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; color: inherit; }
.elenco-regioni a:hover { text-decoration: none; }
.elenco-regioni a:hover .er-nome { color: var(--accento); }
.er-nome { font-weight: 600; font-size: 1.05rem; color: var(--titolo); }
.er-conta { font-size: 0.85rem; color: var(--tenue); white-space: nowrap; }
.gettoni { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gettoni li { font-size: 0.95rem; background: var(--campo); border-radius: 3px; padding: 0.35rem 0.75rem; }
.gettoni a { font-weight: 600; }

/* ── Scheda ───────────────────────────────────────────── */
.s-testa { border-bottom: 2px solid var(--titolo); padding-bottom: 2rem; margin-bottom: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 12rem; gap: 3rem; align-items: end; }
.s-badge { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 500; padding: 0.22rem 0.7rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--titolo); background: var(--superficie); }
a.pill:hover { border-color: var(--titolo); text-decoration: none; }
.s-testa h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); letter-spacing: -0.04em; line-height: 1; margin: 1rem 0 0.5rem; }
.s-nomi { font-size: 1rem; color: var(--tenue); margin: 0 0 0.9rem; }
.s-testa .risposta { font-size: 1.2rem; line-height: 1.55; color: var(--testo); max-width: 40rem; margin: 0 0 0.8rem; }
.s-testa .verifica { margin: 0; }
.s-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 4rem; align-items: start; }
.s-testo { min-width: 0; }
.ricorda { background: var(--accento-tenue); border-left: 4px solid var(--accento); padding: 1.2rem 1.4rem; margin-bottom: 2.5rem; max-width: var(--misura); }
.ricorda h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accento); margin: 0 0 0.4rem; }
.ricorda p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--titolo); font-weight: 500; }
.approfondimento { margin-bottom: 2.25rem; }
.approfondimento h2 { margin: 0 0 0.5rem; }
.approfondimento p:last-child { margin-bottom: 0; }
.s-lato { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--testata-h) + 1.5rem); }
.in-breve { border-top: 2px solid var(--titolo); padding-top: 0.9rem; }
.etichetta-lato { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); margin: 0 0 0.5rem; }
.in-breve dl { margin: 0; }
.in-breve div { padding: 0.7rem 0; border-bottom: 1px solid var(--linea); }
.in-breve div:last-child { border-bottom: 0; }
.in-breve dt { font-size: 0.8rem; color: var(--tenue); margin-bottom: 0.15rem; }
.in-breve dd { margin: 0; font-size: 0.95rem; color: var(--titolo); line-height: 1.5; }
.confronti-lato { display: flex; flex-direction: column; gap: 0.5rem; }
.carta-confronto { display: flex; flex-direction: column; gap: 0.25rem; background: var(--accento); color: var(--su-accento); padding: 1.1rem 1.25rem; }
.carta-confronto:hover { text-decoration: none; filter: brightness(1.08); }
.carta-confronto strong { color: inherit; font-size: 1.1rem; line-height: 1.25; }
.carta-confronto span { font-size: 0.9rem; opacity: 0.88; line-height: 1.4; }
.s-piede { margin-top: 1rem; }

/* ── Home ─────────────────────────────────────────────── */
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: center; padding-top: 3.5rem; padding-bottom: 3rem; }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.03; letter-spacing: -0.04em; }
.hero h1 span { color: var(--accento); }
.hero-sotto { font-size: 1.18rem; line-height: 1.55; color: var(--tenue); max-width: 34rem; margin: 1.3rem 0 2rem; }
.prova { font-size: 0.92rem; color: var(--tenue); margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: baseline; }
.prova a { color: var(--titolo); font-weight: 500; border-bottom: 1px solid var(--linea-forte); }
.prova a:hover { color: var(--accento); border-color: var(--accento); text-decoration: none; }

.mappa-box { position: relative; justify-self: center; width: 100%; max-width: 30rem; }
.mappa { width: 100%; height: auto; display: block; overflow: visible; }
.mappa a { outline: none; }
.reg { stroke: var(--m-bordo); stroke-width: 1; stroke-linejoin: round; transition: fill 0.12s; }
.reg.l1 { fill: var(--m1); } .reg.l2 { fill: var(--m2); } .reg.l3 { fill: var(--m3); } .reg.l4 { fill: var(--m4); } .reg.l5 { fill: var(--m5); }
.mappa a:hover .reg, .mappa a:focus-visible .reg { fill: var(--accento); }
.mappa a:focus-visible .reg { stroke: var(--titolo); stroke-width: 2; }
.mappa-tip {
  position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px));
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 4px; padding: 0.5rem 0.8rem;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; line-height: 1.3; white-space: nowrap;
}
.mappa-tip strong { font-size: 0.95rem; }
.mappa-tip span { font-size: 0.8rem; color: var(--tenue); }
.mappa-legenda { display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.75rem; color: var(--tenue); margin: 0.75rem 0 0; }
.mappa-legenda i { width: 1.4rem; height: 0.5rem; }
.mappa-legenda span { margin: 0 0.3rem; }
.mappa-legenda .l1 { background: var(--m1); } .mappa-legenda .l2 { background: var(--m2); } .mappa-legenda .l3 { background: var(--m3); } .mappa-legenda .l4 { background: var(--m4); } .mappa-legenda .l5 { background: var(--m5); }

.cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--titolo); border-bottom: 1px solid var(--linea); }
.cifra { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.3rem 1.5rem; border-left: 1px solid var(--linea); color: var(--testo); }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra:hover { text-decoration: none; background: var(--campo); }
.cifra strong { font-size: 2.5rem; line-height: 1; letter-spacing: -0.035em; }
.cifra span { font-size: 0.88rem; color: var(--tenue); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cifra .cat-docg { color: var(--fondo); } .cifra .cat-doc { color: var(--titolo); }
.cifra-domanda strong { color: var(--accento); }
.cifra-domanda span { color: var(--titolo); font-weight: 500; }

.sezione { margin-top: 4.5rem; }
.tipi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.tipo { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 0 0; border-top: 4px solid var(--vino); color: var(--testo); }
.tipo:hover { text-decoration: none; }
.tipo:hover strong { color: var(--accento); }
.tipo strong { font-size: 1.15rem; }
.tipo span { font-size: 0.88rem; color: var(--tenue); line-height: 1.45; }
.carte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; }
.carta { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0 1.2rem; border-bottom: 1px solid var(--linea); color: var(--testo); }
.carta:hover { text-decoration: none; }
.carta:hover strong { color: var(--accento); }
.carta-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.carta strong { font-size: 1.12rem; line-height: 1.25; }
.carta-reg { font-size: 0.85rem; font-weight: 500; color: var(--accento); }
.carta-vit { font-size: 0.85rem; color: var(--tenue); line-height: 1.4; }
.regioni-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.5rem; }
.regioni-griglia h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); margin: 0 0 0.3rem; }
.regioni-griglia ul { list-style: none; margin: 0; padding: 0; }
.regioni-griglia li a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linea); color: var(--titolo); font-weight: 500; }
.regioni-griglia li a:hover { color: var(--accento); text-decoration: none; }
.regioni-griglia li span { color: var(--tenue); font-weight: 400; font-size: 0.85rem; }
.strumenti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.strumento { display: flex; flex-direction: column; gap: 0.4rem; background: var(--campo); padding: 1.5rem; color: var(--testo); }
.strumento:hover { text-decoration: none; }
.strumento:hover strong { color: var(--accento); }
.strumento-n { font-size: 2rem; line-height: 1; font-weight: 700; color: var(--accento); letter-spacing: -0.03em; margin-bottom: 0.5rem; }
.strumento strong { font-size: 1.15rem; }
.strumento span:last-child { color: var(--tenue); font-size: 0.93rem; }
.guide-home { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.guide-home li { border-bottom: 1px solid var(--linea); }
.guide-home a { display: block; padding: 0.7rem 0; font-weight: 500; }
.fiducia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--linea); padding-top: 2rem; }
.fiducia div { display: flex; flex-direction: column; gap: 0.2rem; }
.fiducia span { font-size: 0.92rem; color: var(--tenue); }

/* ── Database, tabelle e moduli ───────────────────────── */
table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.98rem; line-height: 1.45; }
th, td { text-align: left; vertical-align: top; padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--linea); }
thead th { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); border-bottom: 2px solid var(--titolo); }
tbody th { font-weight: 600; color: var(--titolo); }
.tabella-scorre { overflow-x: auto; position: relative; }
.filtri { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr); gap: 1rem 1.5rem; align-items: end; margin-bottom: 1.5rem; }
.campo { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.campo label, .campo-etichetta { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.filtri input[type="search"], select {
  font: 400 1rem var(--sans); color: var(--titolo); background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 4px;
  padding: 0 0.75rem; height: 2.75rem; width: 100%;
}
.filtri input[type="search"]:focus, select:focus { border-color: var(--titolo); outline: none; }
.filtri input[type="search"]:focus-visible, select:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.scelte { display: flex; flex-wrap: wrap; gap: 0.4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.scelte label { position: relative; }
.scelte input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scelte span { display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1rem; font-size: 0.95rem; font-weight: 500; border: 1.5px solid var(--linea); border-radius: 4px; cursor: pointer; color: var(--titolo); }
.scelte span:hover { border-color: var(--titolo); }
.scelte input:checked + span { background: var(--titolo); color: var(--fondo); border-color: var(--titolo); }
.scelte input:focus-visible + span { outline: 3px solid var(--accento); outline-offset: 2px; }
.conteggio { font-size: 0.92rem; color: var(--tenue); margin: 0 0 0.5rem; }
.database { margin-top: 0; }
.database td:first-child a { color: var(--titolo); font-weight: 600; }
.database td:first-child a:hover { color: var(--accento); }
.database td:nth-child(2) { width: 6rem; }
.database td:nth-child(3) { color: var(--tenue); }
.numeri { max-width: 44rem; }
.numeri caption { text-align: left; font-size: 0.9rem; color: var(--tenue); padding-bottom: 0.6rem; }
.numeri td { font-variant-numeric: tabular-nums; text-align: right; }
.numeri thead th:not(:first-child) { text-align: right; }
.numeri tbody th a { color: var(--titolo); }
.numeri tbody th a:hover { color: var(--accento); }

/* Pagina dei risultati */
.risultati-pagina { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.risultati-pagina li { border-bottom: 1px solid var(--linea); }
.risultati-pagina a { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0.75rem; color: var(--testo); }
.risultati-pagina a:hover { background: var(--campo); text-decoration: none; }
.risultati-pagina a:hover .sug-nome { color: var(--accento); }
.risultati-pagina .sug-nome, .risultati-pagina .sug-info { white-space: normal; }
.risultati-pagina .sug-nome { font-size: 1.05rem; }
.pagina .ricerca { margin-bottom: 1.5rem; }

/* Glossario */
.glossario { margin: 0; }
.glossario div { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 0.25rem 2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linea); }
.glossario dt a { font-weight: 700; }
.glossario dt .voce-extra { font-weight: 400; }
.glossario dd { margin: 0; line-height: 1.5; }

/* Confronti */
.elenco-confronti { list-style: none; padding: 0; margin: 0; }
.elenco-confronti li { padding: 0.8rem 0; border-bottom: 1px solid var(--linea); line-height: 1.4; }
.elenco-confronti a { font-weight: 700; }
.elenco-confronti.grande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.elenco-confronti.grande a { font-size: 1.1rem; }
.confondere { margin: 0 0 2.5rem; max-width: var(--misura); }
.confondere h2 { font-size: 1.45rem; margin: 0 0 0.5rem; }
.tabella-confronto { margin-top: 0; }
.tabella-confronto thead td { border-bottom: 2px solid var(--titolo); }
.tabella-confronto thead th { border-top: 4px solid var(--vino); padding-top: 0.6rem; font-size: 1.1rem; letter-spacing: -0.01em; text-transform: none; }
.tabella-confronto thead th a { color: var(--titolo); }
.tabella-confronto tbody th { width: 9.5rem; font-weight: 600; color: var(--tenue); font-size: 0.9rem; }
.tabella-confronto td.uguale { color: var(--tenue); }
.confronto .testo { margin-top: 3rem; }

/* Annate */
.provvisoria { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--tenue); border: 1px solid var(--linea); border-radius: 3px; padding: 0.1rem 0.35rem; margin-left: 0.4rem; vertical-align: 0.15em; }
.nota-su { margin: -0.5rem 0 1rem; }
.annate-tabella { margin-top: 0; min-width: 40rem; }
.annate-tabella tbody th { white-space: nowrap; }
.annate-tabella tbody th a { font-weight: 700; color: var(--titolo); }
.annate-tabella td a { color: var(--testo); }
.annate-tabella td.vuota { color: var(--tenue); }
.annate-tabella td a:hover { color: var(--accento); }
.annate-zone { list-style: none; padding: 0; margin: 1.5rem 0 0; font-size: 0.92rem; color: var(--tenue); max-width: var(--misura); }
.annate-zone li { margin-bottom: 0.4rem; }
.elenco-annate { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
.elenco-annate li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--linea); line-height: 1.4; }
.elenco-annate a { font-weight: 700; grid-row: span 2; }
.elenco-annate span { font-size: 0.9rem; color: var(--tenue); }
.annata .intestazione h1 { font-size: clamp(3rem, 8vw, 5rem); }
.avviso { font-size: 0.95rem; color: var(--tenue); border-left: 3px solid var(--linea); padding-left: 0.9rem; }
.annata-salti { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 0; }
.annata-salti a { font-size: 0.92rem; font-weight: 600; background: var(--campo); border-radius: 3px; padding: 0.35rem 0.75rem; }
.annata-regione .blocco-testa .conta { margin-left: 0.4rem; color: var(--accento); font-weight: 600; }
.annata-zona { font-size: 0.92rem; color: var(--tenue); margin: -0.5rem 0 1.25rem; max-width: var(--misura); }
.annata-dati { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2.5rem; margin: 0; }
.annata-dati .annata-clima { grid-column: 1 / -1; max-width: var(--misura); }
.annata-dati dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); margin-bottom: 0.3rem; }
.annata-dati dd { margin: 0; line-height: 1.6; }
.annata-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 3rem; border-top: 2px solid var(--titolo); padding-top: 1rem; }
.annata-nav a { display: flex; flex-direction: column; }
.annata-nav a:hover { text-decoration: none; }
.annata-nav span { font-size: 0.8rem; color: var(--tenue); }
.annata-nav strong { font-size: 1.4rem; color: var(--titolo); }
.annata-nav a:hover strong { color: var(--accento); }
.annata-succ { text-align: right; align-items: flex-end; }
.annata-tutte { font-weight: 600; }
.annate-lato { border-top: 2px solid var(--titolo); padding-top: 0.9rem; }
.annate-lato ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.annate-lato li { display: flex; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--linea); font-size: 0.92rem; }
.annate-lato a { font-weight: 700; }
.annate-lato span { color: var(--tenue); }
.annate-tutte { display: inline-block; margin-top: 0.6rem; font-size: 0.92rem; font-weight: 600; }

/* ── Quiz e flashcard ─────────────────────────────────── */
.bottone {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0 1.3rem; font: 600 1rem var(--sans);
  color: var(--su-accento); background: var(--accento); border: 1.5px solid var(--accento); border-radius: 4px; cursor: pointer;
}
.bottone:hover { filter: brightness(1.1); }
.bottone:disabled { opacity: 0.45; cursor: default; filter: none; }
.bottone:focus-visible, .q-opzioni button:focus-visible, .link-bottone:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.bottone-secondario { color: var(--titolo); background: transparent; border-color: var(--titolo); }
.bottone kbd, .q-opzioni kbd { font: 600 0.72rem var(--sans); border: 1px solid currentColor; border-radius: 3px; padding: 0.05rem 0.35rem; opacity: 0.7; }
.link-bottone { font: 600 0.92rem var(--sans); color: var(--accento); background: none; border: 0; padding: 0; cursor: pointer; }
.link-bottone:hover { text-decoration: underline; }
.quiz { border-top: 2px solid var(--titolo); padding-top: 1.5rem; scroll-margin-top: calc(var(--testata-h) + 1rem); }
.intestazione + .quiz { border-top: 0; padding-top: 0; }
.quiz .scelte label { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.quiz-stato { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; font-size: 0.92rem; color: var(--tenue); margin-bottom: 1.25rem; }
.quiz-impostazioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; max-width: 48rem; }
.quiz-filtro, .quiz-avvio { grid-column: 1 / -1; margin: 0; }
.quiz-filtro { background: var(--accento-tenue); padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }
.quiz-avvio { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.quiz-disponibili { margin: 0; font-size: 0.95rem; color: var(--tenue); flex-basis: 100%; }
.quiz-gioco { max-width: 44rem; }
.q-testa { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--tenue); margin-bottom: 1.75rem; }
.q-conta { white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-barra { flex: 1; height: 4px; background: var(--linea); }
.q-barra i { display: block; height: 100%; background: var(--accento); }
.q-gruppo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); margin: 0 0 0.6rem; }
.q-domanda { font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.3; margin: 0 0 1.5rem; outline: none; }
.q-opzioni { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.q-opzioni button {
  display: flex; align-items: flex-start; gap: 0.85rem; width: 100%; text-align: left; padding: 0.95rem 1.1rem; min-height: 3.25rem;
  font: 500 1.02rem/1.4 var(--sans); color: var(--titolo); background: var(--superficie); border: 1.5px solid var(--linea); border-radius: 4px; cursor: pointer;
}
.q-opzioni button:hover:not(:disabled) { border-color: var(--titolo); }
.q-opzioni button:disabled { cursor: default; color: var(--tenue); }
.q-opzioni kbd { flex: none; margin-top: 0.15rem; }
.q-opzioni button.giusta { border-color: var(--giusto); box-shadow: inset 4px 0 0 var(--giusto); color: var(--titolo); }
.q-opzioni button.sbagliata { border-color: var(--accento); box-shadow: inset 4px 0 0 var(--accento); color: var(--titolo); }
.q-verdetto { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; }
.q-verdetto.si { color: var(--giusto); }
.q-verdetto.no { color: var(--accento); }
.q-verdetto strong { color: var(--titolo); }
.q-spiega { margin: 0 0 0.5rem; line-height: 1.55; }
.q-fonte { margin: 0 0 1.5rem; font-size: 0.95rem; }
.q-giusta { font-size: 1.25rem; font-weight: 700; color: var(--titolo); border-left: 4px solid var(--accento); padding-left: 1rem; margin: 0 0 1rem; }
.q-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.q-fine h3 { margin: 2.5rem 0 0.75rem; border-top: 2px solid var(--titolo); padding-top: 0.8rem; font-size: 1.1rem; }
.q-errori { padding-left: 1.25rem; margin: 0; }
.q-errori li { padding: 0.5rem 0; border-bottom: 1px solid var(--linea); }
.q-errori p { margin: 0 0 0.2rem; }
.mazzi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mazzo .mazzo-progressi { font-size: 0.85rem; color: var(--tenue); }
.mazzo-progressi:empty { display: none; }
.mazzo-progressi i { display: block; height: 4px; margin: 0.4rem 0; background: linear-gradient(to right, var(--accento) var(--quota), var(--linea) var(--quota)); }
.carta-quiz { display: flex; flex-direction: column; gap: 0.25rem; border: 1.5px solid var(--titolo); padding: 1rem 1.25rem; color: var(--titolo); }
.carta-quiz:hover { text-decoration: none; border-color: var(--accento); }
.carta-quiz:hover strong { color: var(--accento); }
.carta-quiz span { font-size: 0.9rem; color: var(--tenue); }
.domande-gruppo { border-bottom: 1px solid var(--linea); }
.domande-gruppo summary { cursor: pointer; padding: 0.9rem 0; font-weight: 700; color: var(--titolo); }
.domande-gruppo summary .conta { font-weight: 500; color: var(--tenue); margin-left: 0.4rem; }
.domande-elenco { margin: 0 0 1.25rem; padding-left: 1.5rem; max-width: var(--misura); }
.domande-elenco li { padding: 0.5rem 0; }
.d-domanda { margin: 0 0 0.2rem; font-weight: 600; color: var(--titolo); }
.d-risposta { margin: 0; font-size: 0.95rem; }
.d-risposta span { color: var(--tenue); }

/* ── Piede ────────────────────────────────────────────── */
.piede { margin-top: 5rem; background: var(--piede); color: var(--su-piede); font-size: 0.9rem; }
.piede .in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem 2.5rem; padding-top: 3rem; padding-bottom: 2.5rem; }
.piede .logo { color: #FFFFFF; }
.piede .logo b { color: #F0718F; } .piede .logo-vino { fill: #F0718F; }
.piede-marchio p { max-width: 20rem; margin: 0.9rem 0 0; }
.piede-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.piede-col a { color: var(--su-piede); }
.piede-col a:hover { color: #FFFFFF; }
.piede-tit { font-weight: 700; color: #FFFFFF; margin: 0 0 0.2rem; }
.piede-nota { grid-column: 1 / -1; font-size: 0.8rem; border-top: 1px solid #2A2A30; padding-top: 1.4rem; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.piede-nota p { margin: 0; }
.piede :focus-visible { outline-color: #FFFFFF; }

/* ── Schermi medi e piccoli ───────────────────────────── */
@media (max-width: 64rem) {
  .menu-toggle { display: inline-flex; }
  .menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fondo); border-bottom: 1px solid var(--linea); padding: 0.5rem var(--margine) 1rem; box-shadow: 0 20px 30px -24px rgba(0, 0, 0, 0.4);
  }
  .menu.aperto { display: flex; }
  .menu a { padding: 0.85rem 0; border-bottom: 1px solid var(--linea); font-size: 1.05rem; color: var(--titolo); }
  .menu a:last-child { border-bottom: 0; }
  .menu a[aria-current] { border-bottom-color: var(--linea); color: var(--accento); }
  .cerca-btn { min-width: 0; }
  .cerca-btn kbd { display: none; }
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; gap: 2.5rem; }
  .mappa-box { max-width: 24rem; }
  .cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--linea); }
  .cifra:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid var(--linea); }
  .cifra:nth-last-child(-n+2) { border-bottom: 0; }
  .tipi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carte, .regioni-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regioni-griglia > div { margin-bottom: 1.5rem; }
  .strumenti, .mazzi { grid-template-columns: minmax(0, 1fr); }
  .elenco-regioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-corpo { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .s-lato { display: contents; }
  .in-breve { order: -1; border-top: 0; padding-top: 0; }
  .confronti-lato { order: 1; }
  .annate-lato { order: 2; }
  .annata-dati { grid-template-columns: minmax(0, 1fr); }
  .piede .in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piede-marchio { grid-column: 1 / -1; }
  .filtri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .campo-testo { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  :root { --margine: 1rem; --testata-h: 3.5rem; }
  body { font-size: 1rem; }
  .testata .in { gap: 0.75rem; }
  .logo { font-size: 1.1rem; }
  .logo svg { width: 1.75rem; height: 1.75rem; }
  .cerca-btn { width: 2.5rem; padding: 0; justify-content: center; }
  .cerca-btn span { display: none; }
  .hero-in { padding-top: 2rem; padding-bottom: 2.5rem; }
  .hero-sotto { font-size: 1.05rem; margin: 1rem 0 1.5rem; }
  .ricerca-campo { padding-left: 0.85rem; }
  .ricerca button[type="submit"] { padding: 0.7rem 1rem; }
  .cifra { padding-top: 1rem; padding-bottom: 1rem; }
  .cifra:nth-child(even) { padding-left: 1rem; }
  .cifra strong { font-size: 2rem; }
  .sezione { margin-top: 3.5rem; }
  .tipi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .tipo:last-child { grid-column: 1 / -1; }
  .carte, .guide-home, .elenco-docg, .elenco-confronti.grande, .elenco-annate, .fiducia { grid-template-columns: minmax(0, 1fr); }
  .fiducia { gap: 1.25rem; }
  .elenco-regioni { grid-template-columns: minmax(0, 1fr); }
  .elenco-nomi { columns: 1; }
  /* La mappa piccola resta in alto a destra, il testo usa tutta la larghezza */
  .intestazione-con-mappa, .s-testa { display: block; position: relative; }
  .intestazione-con-mappa .mini-mappa, .s-testa .mini-mappa { position: absolute; top: 0; right: 0; width: 4.75rem; }
  .intestazione-con-mappa .occhiello, .intestazione-con-mappa h1, .s-badge, .s-testa h1 { padding-right: 5.5rem; }
  .mini-mappa figcaption { display: none; }
  .s-testa .risposta, .sommario { font-size: 1.08rem; }
  .mappa-box { max-width: 17rem; }
  .piede .in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtri, .quiz-impostazioni { grid-template-columns: minmax(0, 1fr); }
  .glossario div { grid-template-columns: minmax(0, 1fr); }
  .testo table { display: block; overflow-x: auto; }
  .tabella-confronto, .tabella-confronto tbody, .tabella-confronto tr, .tabella-confronto th, .tabella-confronto td { display: block; width: auto; }
  .tabella-confronto thead { display: none; }
  .tabella-confronto tr { border-bottom: 1px solid var(--linea); padding: 0.6rem 0; }
  .tabella-confronto tbody th { border: 0; padding: 0 0 0.3rem; }
  .tabella-confronto td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; border: 0; padding: 0.2rem 0; }
  .tabella-confronto td::before { content: attr(data-nome); font-weight: 700; color: var(--titolo); }
  .tabella-confronto td.uguale { color: inherit; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .testata, .piede, .briciole, .menu-toggle, .filtri, .ricerca, .mini-mappa, .s-lato .confronti-lato { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .s-corpo { display: block; }
}