/* Atlante dei Miti — un solo stile: «Carta d'esploratore» (scelto da Simone il 27/10). Mare turchese, terre sabbia, medaglioni dorati.
   Caratteri: Fraunces + Nunito Sans, ospitati qui (licenza OFL). */
@font-face { font-family: 'Fraunces'; src: url(caratteri/fraunces-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; src: url(caratteri/fraunces-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito Sans'; src: url(caratteri/nunito-sans-latin-wght-normal.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito Sans'; src: url(caratteri/nunito-sans-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --fondo: #FBF6EC; --carta: #FFFFFF; --testo: #1E2233; --tenue: #575C72; --linea: #EADFC8; --accento: #2C6FB7; --accento-testo: #fff;
  --primo: #D43F42; --primo-testo: #fff; --oro-testo: #9A6408; --oro: #FFC21A; --oro-scuro: #B7790A; --mare1: #7FC8F8; --mare2: #4FA9E6;
  --terra1: #F4E1BC; --terra2: #EED9B0; --terra3: #F6E8CC; --terra4: #F2E3C6; --terra-sel: #FFF8E4; --confine: #fff; --etichetta: #6B4F22;
  /* tinte ad acquerello delle regioni: sabbia, ocra, salvia, rosa antico, azzurro polvere, lilla polvere */
  --tinta-1: #F2DDB4; --tinta-2: #EBCB92; --tinta-3: #D5DEBA; --tinta-4: #EED0C4; --tinta-5: #D3E0E4; --tinta-6: #E3D6E6;
  --accesa: #FFF6DC; --oro-bordo: #E3A008;
  --raggio: 26px; --raggio-p: 16px; --ombra: 0 14px 34px rgba(120, 90, 30, .12); --ombra-forte: 0 40px 90px rgba(30, 34, 51, .4);
  --font: 'Nunito Sans', system-ui, sans-serif; --titoli: 'Fraunces', Georgia, serif; --peso-t: 600; --spazio-t: -.01em;
  --testata-bg: rgba(251, 246, 236, .94); --testata-testo: #1E2233; --piede-bg: #1E2233; --piede-testo: #F3EBDA; --bordo-carta: 0 solid transparent; --campo: #F3EBDA;
  --buco: #8B5CF6;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; overflow-x: hidden; background: var(--fondo); color: var(--testo); font: 400 18px/1.6 var(--font); }
img, svg { display: block; max-width: 100%; }
a { color: var(--accento); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titoli); font-weight: var(--peso-t); letter-spacing: var(--spazio-t); line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(34px, 5vw, 58px); }
h2 { font-size: clamp(24px, 3vw, 34px); }
h3 { font-size: 21px; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 4px solid var(--accento); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: 12px; background: var(--testo); color: var(--fondo); font-weight: 800; text-decoration: none; }
.salta:focus { top: 10px; }
.cornice { width: min(1280px, 100% - 32px); margin-inline: auto; }
main { display: block; min-height: 60vh; }
main:focus { outline: none; }
.piccolo { font-size: 15px; color: var(--tenue); }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 50; background: var(--testata-bg); color: var(--testata-testo); border-bottom: 2px solid var(--linea); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.testata__riga { display: flex; align-items: center; gap: 10px; min-height: 74px; }
.marchio { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; text-decoration: none; font: var(--peso-t) 25px/1 var(--titoli); letter-spacing: var(--spazio-t); white-space: nowrap; }
.marchio__segno { width: 42px; height: 42px; }
.marchio__segno .m1 { fill: #FFF3D1; stroke: var(--oro-scuro); stroke-width: 3; } .marchio__segno .m2 { fill: #F25F5C; } .marchio__segno .m3 { fill: #2C6FB7; } .marchio__segno .m4 { fill: #fff; }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 8px 13px; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 800; font-size: 16px; }
.nav a:hover, .nav a[aria-current] { background: var(--campo); }
.nav .ico { width: 20px; height: 20px; color: var(--oro-scuro); }
.contatore { display: inline-flex; align-items: center; gap: 5px; min-height: 46px; padding: 6px 13px; border-radius: 999px; background: var(--oro); color: #2A1E00; text-decoration: none; font-weight: 900; font-size: 16px; }
.contatore__ico .ico { width: 20px; height: 20px; }
.contatore__tot { font-weight: 700; opacity: .75; font-size: 14px; }
.contatore.pulsa { animation: pulsa .6s; }
@keyframes pulsa { 40% { transform: scale(1.25); } }
.tondo { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--linea); background: var(--carta); color: var(--testo); cursor: pointer; }
.tondo .ico { width: 24px; height: 24px; }
.apri-menu { display: none; }

/* ---------- elementi comuni ---------- */
.briciole ol { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 18px 0 0; padding: 0; font-size: 15px; font-weight: 700; color: var(--tenue); }
.briciole li + li::before { content: '›'; margin-right: 10px; opacity: .6; }
.briciole a { color: var(--tenue); }
.sopra { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 900; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--oro-testo); }
.sopra .ico { width: 18px; height: 18px; }
.intro { font-size: 20px; color: var(--tenue); max-width: 62ch; }
.titoletto { font-size: 24px; margin: 26px 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--testo); background: var(--carta); color: var(--testo); font: 800 17px var(--font); text-decoration: none; cursor: pointer; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); }
.btn .ico { width: 22px; height: 22px; }
.btn--primo { background: var(--primo); border-color: var(--primo); color: var(--primo-testo); }
.btn--figurina { background: var(--primo); border-color: var(--primo); color: var(--primo-testo); }
.btn--figurina.presa { background: #DDF7E8; border-color: #1FB866; color: #0B4A2A; }
.btn--leggero { border-color: var(--linea); }
.bottoni { display: flex; flex-wrap: wrap; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 15px; border-radius: 999px; border: 2px solid var(--t, var(--linea)); background: var(--carta); color: var(--testo); font-weight: 800; font-size: 16px; text-decoration: none; }
.chip small { font-weight: 600; color: var(--tenue); }
.chip:hover { background: color-mix(in srgb, var(--t, var(--oro)) 14%, var(--carta)); }
.chip-tipo { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--t) 18%, var(--carta)); border: 2px solid var(--t); color: var(--testo); font-weight: 900; font-size: 14px; text-transform: lowercase; }
.lune { display: inline-flex; gap: 2px; }
.lune .ico { width: 20px; height: 20px; }
.lune .piena { color: #E9A800; } .lune .piena .ico { fill: currentColor; }
.lune .vuota { color: color-mix(in srgb, var(--tenue) 45%, transparent); }
.paura { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 800; font-size: 16px; color: var(--tenue); }
.cura { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raggio-p); background: color-mix(in srgb, var(--accento) 10%, var(--carta)); font-size: 16px; }
.cura .ico { margin-top: 3px; color: var(--accento); }

/* medaglioni (stemma disegnato o illustrazione) */
.med { --s: 64px; flex: none; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--t) 70%, #fff), var(--t)); box-shadow: 0 0 0 3px var(--carta), 0 0 0 6px var(--oro); --buco: var(--t); }
.med img { width: 100%; height: 100%; object-fit: cover; }
.med svg { width: 100%; height: 100%; }
.emb { fill: #fff; color: #fff; }
.emb .b { fill: var(--buco); }
.med.piccolo { --s: 40px; box-shadow: 0 0 0 2px var(--carta), 0 0 0 4px var(--oro); }
.med.mini { --s: 34px; box-shadow: 0 0 0 2px var(--carta); }

/* carte delle leggende */
.carta { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); color: var(--testo); text-decoration: none; box-shadow: var(--ombra); transition: transform .2s; }
.carta:hover { transform: translateY(-2px); }
.carta__testo b { display: block; font: var(--peso-t) 21px/1.2 var(--titoli); letter-spacing: var(--spazio-t); }
.carta__testo > span { display: block; font-size: 15px; color: var(--tenue); font-weight: 700; }
.carta__paura { display: flex !important; align-items: center; gap: 6px; margin-top: 3px; }
.carta__paura .ico { width: 16px; height: 16px; }
.lista-carte { display: grid; gap: 12px; }
.lista-carte--larga { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- home ---------- */
.esplora { display: grid; grid-template-columns: minmax(330px, .82fr) 1.18fr; gap: 34px; padding: 26px 0 40px; align-items: start; }
.racconto { position: sticky; top: 96px; }
.racconto h1 em { font-style: normal; color: var(--primo); }
.finto-cerca { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 0 20px; margin-bottom: 8px; border-radius: 999px; border: 2px solid var(--linea); background: var(--carta); color: var(--tenue); font-weight: 700; font-size: 17px; text-align: left; cursor: pointer; }
.finto-cerca .ico { width: 22px; height: 22px; color: var(--testo); }
.medaglioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.medaglioni .carta { grid-template-columns: auto 1fr; padding: 10px; gap: 12px; }
.medaglioni .med { --s: 50px; }
.medaglioni .carta__testo b { font-size: 18px; }
.medaglioni .carta__testo > span { font-size: 14px; }
.link-elenco { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 12px; font-weight: 800; }
.regione-box { padding: 22px 22px 24px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); }
.regione-box .torna { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 10px; margin-bottom: 8px; border-radius: 999px; border: 0; background: var(--campo); font-weight: 800; color: var(--testo); cursor: pointer; }
.regione-box h2 { font-size: 34px; }
.regione-box .lista-carte { margin: 12px 0 16px; }
.tavola { position: relative; padding: 16px; border-radius: 34px; background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .5), transparent 40%), repeating-radial-gradient(circle at 70% 80%, transparent 0 16px, rgba(255, 255, 255, .18) 16px 18px), linear-gradient(160deg, var(--mare1), var(--mare2)); box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 10px var(--linea), 0 30px 60px rgba(40, 90, 140, .22); }
.mappa { width: 100%; height: auto; max-height: calc(100dvh - 130px); margin: 0 auto; overflow: hidden; touch-action: manipulation; }
.regione path { fill: var(--tinta, var(--terra4)); stroke: var(--confine); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: fill .35s ease, opacity .3s, stroke .35s ease; }
/* la regione si accende: più chiara e calda, bordo dorato (il bordo intero lo disegna .contorno, sopra le vicine) */
.regione:hover path, .regione:focus path { fill: color-mix(in srgb, var(--tinta, var(--terra4)) 30%, var(--accesa)); stroke: var(--oro-bordo); stroke-width: 2.5; }
.regione:focus { outline: none; } .regione:focus-visible path { stroke: var(--accento); stroke-width: 3; }
.regione.scelta path { fill: color-mix(in srgb, var(--tinta, var(--terra4)) 22%, var(--accesa)); stroke: var(--oro-scuro); stroke-width: 2.4; }
.regione.spenta path, .zoomata .regione:not(.scelta) path { opacity: .5; }
.regione.spenta path, .zoomata .regione:not(.scelta) path { fill: var(--terra4); } /* nella pagina di una regione le vicine restano sabbia: la tinta sopra il mare veniva torbida */
.contorno { fill: none; stroke: var(--oro-bordo); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.contorno.on { opacity: 1; } .contorno.fuoco { stroke: var(--accento); stroke-width: 3.5; }
.etichette text { font: 800 11px var(--font); fill: var(--etichetta); text-anchor: middle; paint-order: stroke; stroke: rgba(255, 250, 238, .75); stroke-width: 2.6px; stroke-linejoin: round; pointer-events: none; transition: opacity .3s; }
.zoomata .etichette text { opacity: 0; }
.seg { cursor: pointer; transition: opacity .3s; }
.seg__bordo { fill: #fff; stroke: var(--oro); stroke-width: 4; vector-effect: non-scaling-stroke; }
.seg__punta { fill: var(--oro); }
.seg__fondo { fill: var(--t); }
.seg__emb { fill: #fff; color: #fff; --buco: var(--t); }
.seg__emb .b { fill: var(--t); }
.seg:hover .seg__bordo, .seg:focus-visible .seg__bordo { stroke: var(--primo); stroke-width: 6; }
.seg:focus { outline: none; }
.seg--altro { opacity: 0; pointer-events: none; visibility: hidden; }
.zoomata .seg--altro.vicino { opacity: 1; pointer-events: auto; visibility: visible; }
.zoomata .seg:not(.vicino) { opacity: 0; pointer-events: none; }
.rosa { position: absolute; right: 26px; bottom: 26px; width: 100px; opacity: .9; pointer-events: none; animation: gira 80s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.fumetto { position: absolute; left: 50%; top: 22px; z-index: 2; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; background: #fff; color: #1E2233; font-weight: 900; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); animation: ondeggia 3s ease-in-out infinite; pointer-events: none; white-space: nowrap; }
@keyframes ondeggia { 50% { transform: translate(-50%, -6px); } }
.blocco { padding: 34px 0 10px; }
.blocco__intro { color: var(--tenue); max-width: 70ch; }
.griglia-regioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.carta-regione { display: grid; gap: 4px; padding: 16px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; }
.carta-regione b { font: var(--peso-t) 22px var(--titoli); }
.carta-regione > span:last-child { font-size: 15px; color: var(--tenue); line-height: 1.4; }
.carta-regione__med, .carta-mito__med { display: flex; gap: 2px; margin-bottom: 8px; }
.carta-regione__med .med + .med, .carta-mito__med .med + .med { margin-left: -6px; }
.carta-regione:hover, .carta-mito:hover, .carta-percorso:hover { transform: translateY(-2px); }
.striscia-miti { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.striscia-miti a { display: inline-flex; align-items: center; min-height: 46px; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--m); background: var(--carta); color: var(--testo); font-weight: 800; text-decoration: none; }
.striscia-miti a::before { content: ''; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; background: var(--m); }
.griglia-percorsi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.carta-percorso { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; align-items: center; padding: 16px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; transition: transform .2s; }
.carta-percorso .med { grid-row: 1 / 4; --s: 58px; }
.carta-percorso b { font: var(--peso-t) 21px/1.15 var(--titoli); }
.carta-percorso span:not(.med) { font-size: 15px; color: var(--tenue); line-height: 1.4; }
.carta-percorso small { font-weight: 800; color: var(--oro-testo); }
.gioca > div { padding: 30px; border-radius: 34px; background: linear-gradient(135deg, color-mix(in srgb, var(--oro) 35%, var(--carta)), var(--carta)); border: var(--bordo-carta); box-shadow: var(--ombra); }

/* ---------- pannello di anteprima (home) ---------- */
.velo { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(20, 22, 40, .5); opacity: 0; transition: opacity .25s; }
.velo.aperto { opacity: 1; }
.pannello { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px; border-radius: var(--raggio); background: var(--carta); color: var(--testo); border: var(--bordo-carta); box-shadow: var(--ombra-forte); transform: translateY(16px); transition: transform .3s; }
.velo.aperto .pannello { transform: none; }
.chiudi { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--campo); color: var(--testo); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); text-decoration: none; }
.chiudi .ico { width: 24px; height: 24px; }
.anteprima { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding-right: 50px; }
.anteprima .med { --s: 92px; }
.anteprima h2 { font-size: 30px; margin: 4px 0; }
.anteprima p { margin: 6px 0 12px; }
.avviso { position: fixed; left: 50%; bottom: 22px; z-index: 130; max-width: calc(100% - 32px); padding: 14px 22px; border-radius: 999px; background: var(--testo); color: var(--fondo); font-weight: 800; box-shadow: var(--ombra-forte); transform: translate(-50%, 180%); transition: transform .3s; }
.avviso.visibile { transform: translate(-50%, 0); }
.volante { position: fixed; z-index: 140; pointer-events: none; transition: transform .8s cubic-bezier(.5, -.3, .4, 1.2), opacity .8s; }

/* ---------- ricerca ---------- */
.cerca-velo { position: fixed; inset: 0; z-index: 120; padding: 80px 16px 16px; background: rgba(20, 22, 40, .55); }
.cerca-velo[hidden] { display: none; }
.cerca { width: min(720px, 100%); margin: 0 auto; padding: 16px; border-radius: var(--raggio); background: var(--carta); box-shadow: var(--ombra-forte); }
.cerca__riga { display: flex; gap: 10px; align-items: center; }
.cerca__campo { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--linea); background: var(--fondo); }
.cerca__campo input { flex: 1; min-width: 0; border: 0; background: none; color: var(--testo); font: 700 19px var(--font); min-height: 50px; }
.cerca__campo input:focus { outline: none; }
.cerca__campo:focus-within { border-color: var(--accento); }
.cerca .chiudi { position: static; flex: none; }
.cerca__risultati { max-height: 60dvh; overflow: auto; margin-top: 10px; }
.risultato { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: var(--raggio-p); color: var(--testo); text-decoration: none; }
.risultato:hover, .risultato:focus { background: var(--campo); }
.risultato .med { --s: 42px; box-shadow: none; }
.risultato b { display: block; } .risultato span { font-size: 15px; color: var(--tenue); }
.cerca__vuoto { padding: 12px; color: var(--tenue); }

/* ---------- regione ---------- */
.regione-pagina { display: grid; grid-template-columns: minmax(320px, .9fr) 1.1fr; gap: 34px; padding: 18px 0 30px; align-items: start; }
.tavola--regione { position: sticky; top: 96px; }
.mappa--regione { max-height: calc(100dvh - 140px); }
.azioni-stampa { margin-top: 22px; }
.stampa-schede { display: none; }

/* ---------- scheda (libro aperto) ---------- */
.libro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); margin: 18px 0 18px; border-radius: 30px; background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra-forte), 0 0 0 10px color-mix(in srgb, var(--carta) 80%, transparent); }
.libro::after { content: ''; position: absolute; top: 0; bottom: 0; left: 47.6%; width: 40px; margin-left: -20px; background: linear-gradient(90deg, transparent, rgba(120, 90, 30, .1) 45%, rgba(120, 90, 30, .18) 50%, rgba(120, 90, 30, .1) 55%, transparent); pointer-events: none; }
.libro__chiudi { top: 16px; right: 16px; }
.libro__illu { margin: 22px 0 22px 22px; border-radius: 22px; overflow: hidden; background: color-mix(in srgb, var(--t) 12%, var(--carta)); align-self: start; position: sticky; top: 100px; }
.illu__img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* 30/10, critica di Simone: «alcune sono rotonde, alcune quadrate». Tutte le illustrazioni partono quadrate (1024×1024) e il SITO le ritaglia sempre a cerchio, nello stesso modo
   ovunque (mappa, medaglioni, album, schede). Le 246 che Codex ha già disegnato dentro un cerchio con gli angoli bianchi (margine 3-44 px) si ingrandiscono di poco per non lasciare
   un anello bianco; le 48 piene a bordo a bordo coprono il cerchio da sole. */
.libro__illu { background: transparent; border-radius: 0; overflow: visible; }
.libro__illu .illu__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; transform: scale(1.045); box-shadow: none; }
.libro__illu { padding: 14px; } /* aria per lo zoom */
.libro__illu .stemma { aspect-ratio: 1 / 1; border-radius: 50%; }
.libro__illu::before { content: none; }
.med img { transform: scale(1.045); } /* stesso zoom nei medaglioni */

.stemma { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 12%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t) 24%, var(--carta)), color-mix(in srgb, var(--t) 8%, var(--carta)) 70%), repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--t) 7%, transparent) 0 10deg, transparent 10deg 20deg); --buco: var(--t); }
.stemma svg { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--t) 40%, transparent)); }
.stemma__anello { fill: #fff; stroke: var(--oro); stroke-width: 5; }
.stemma__disco { fill: var(--t); }
.stemma span { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); }
.libro__corpo { padding: 28px 32px 30px 40px; }
.libro__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 56px 12px 0; font-weight: 700; font-size: 15px; color: var(--tenue); }
.libro h1 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 4px; }
.libro__orig { margin: 0 0 10px; font-style: italic; color: var(--tenue); }
.libro__testo { font-size: 19.5px; line-height: 1.65; }
.losai { padding: 14px 16px; border-radius: 6px var(--raggio-p) var(--raggio-p) 6px; border-left: 5px solid var(--oro); background: color-mix(in srgb, var(--oro) 18%, var(--carta)); font-size: 18px; }
.libro__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.parenti h2, .fonti h2 { margin: 18px 0 10px; font: 900 14px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.fonti ul { margin: 0; padding-left: 20px; font-size: 16px; color: var(--tenue); }
.fonti li { margin-bottom: 4px; }
.sfoglia { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 0 0 20px; }
.sfoglia a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 16px; border-radius: var(--raggio-p); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; font-weight: 800; }
.sfoglia a:last-child { justify-content: flex-end; text-align: right; }
.sfoglia small { display: block; font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.sfoglia__su { justify-content: center; }

/* ---------- mondo, mitologie ---------- */
.pagina-titolo { padding: 18px 0 8px; }
.pagina-titolo h1 { max-width: 22ch; }
.mare-mondo { padding: 12px; border-radius: 30px; background: linear-gradient(160deg, var(--mare1), var(--mare2)); box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 10px var(--linea); overflow: hidden; }
.mondo { width: 100%; height: auto; }
.paese { fill: var(--terra4); stroke: #fff; stroke-width: .35; }
.mitico path, path.paese.mitico { fill: color-mix(in srgb, var(--m) 34%, var(--terra4)); stroke: #fff; stroke-width: .35; cursor: pointer; transition: fill .35s ease, stroke .35s ease; }
.mitico:hover path, .mitico:focus path { fill: color-mix(in srgb, var(--m) 22%, var(--accesa)); stroke: var(--oro-bordo); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.mitico:focus { outline: none; } .mitico:focus-visible path { stroke: var(--accento); stroke-width: 2.5px; }
.bolla rect { fill: #fff; stroke: var(--m); stroke-width: 2.4; }
.bolla text { font: 900 11px var(--font); fill: #1E2233; }
.bolla:hover rect, .bolla:focus rect { fill: var(--m); } .bolla:hover text, .bolla:focus text { fill: #fff; }
.bolla:focus { outline: none; }
.griglia-miti { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.carta-mito { display: grid; gap: 4px; padding: 16px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); border-top: 6px solid var(--m); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; transition: transform .2s; }
.carta-mito b { font: var(--peso-t) 22px var(--titoli); }
.carta-mito > span:not(.carta-mito__med) { font-size: 15px; color: var(--tenue); }
.carta-mito small { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--campo); font-weight: 800; font-size: 13px; }
.albero-blocco h2 { display: flex; align-items: center; gap: 10px; }
.albero { position: relative; display: grid; gap: 34px; padding: 26px 16px; border-radius: var(--raggio); background: color-mix(in srgb, var(--m) 8%, var(--carta)); border: var(--bordo-carta); overflow-x: auto; }
.albero__riga { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nodo { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--carta); border: 2px solid color-mix(in srgb, var(--m) 50%, var(--linea)); color: var(--testo); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, opacity .2s; }
.nodo--senza { padding-left: 14px; }
.nodo__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--m); }
.albero.scelto .nodo { opacity: .45; }
.albero.scelto .nodo.attivo, .albero.scelto .nodo.parente, .albero.scelto .nodo.figlio { opacity: 1; }
.nodo.attivo { box-shadow: 0 0 0 4px var(--m); transform: scale(1.05); }
.nodo.parente, .nodo.figlio { box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 50%, transparent); }
.albero__linee { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.albero__linee path { fill: none; stroke: color-mix(in srgb, var(--m) 55%, var(--linea)); stroke-width: 2.5; }
.albero__linee path.acceso { stroke: var(--m); stroke-width: 4; }
.albero__info { min-height: 28px; margin-top: 10px; font-weight: 700; color: var(--tenue); }
.luoghi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; }
.luoghi div { padding: 16px; border-radius: var(--raggio-p); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); }
.luoghi dt { font: var(--peso-t) 20px var(--titoli); margin-bottom: 4px; }
.luoghi dd { margin: 0; color: var(--tenue); font-size: 16px; }
.fonti-lista { color: var(--tenue); }

/* ---------- percorsi ---------- */
.frase-grande { font: var(--peso-t) clamp(24px, 3vw, 34px)/1.25 var(--titoli); color: var(--primo); max-width: 30ch; }
.tappe { list-style: none; margin: 10px 0 20px; padding: 0; counter-reset: t; }
.tappa { position: relative; display: grid; grid-template-columns: 54px minmax(240px, 380px) 1fr; gap: 16px; align-items: center; padding: 10px 0; }
.tappa::before { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 3px; background: repeating-linear-gradient(var(--m, var(--oro)) 0 8px, transparent 8px 14px); }
.tappa:first-child::before { top: 50%; } .tappa:last-child::before { bottom: 50%; }
.tappa__n { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--m, var(--oro)); color: #fff; font: 900 22px var(--font); box-shadow: 0 0 0 5px var(--fondo); }
.tappa__carta { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--raggio); background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; }
.tappa__carta .med { --s: 54px; }
.tappa__carta b { display: block; font: var(--peso-t) 20px/1.2 var(--titoli); }
.tappa__carta small { color: var(--tenue); font-weight: 700; font-size: 14px; }
.tappa__ponte { margin: 0; color: var(--tenue); font-size: 17px; }
.prossimo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 800; }
.domande li { margin-bottom: 10px; }

/* ---------- quiz e album ---------- */
.foglio { padding: 28px; border-radius: 30px; background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); margin: 10px 0 20px; }
.foglio[data-quiz] { min-height: 300px; } /* il posto della domanda più corta: la pagina non salta quando il quiz compare */
.q__testa { display: flex; justify-content: space-between; gap: 10px; font-weight: 900; }
.q__tipo { padding: 4px 14px; border-radius: 999px; background: var(--campo); }
.q__barra { height: 10px; margin: 12px 0 22px; border-radius: 99px; background: var(--campo); overflow: hidden; }
.q__barra i { display: block; height: 100%; background: var(--oro); transition: width .4s; }
.q__domanda { font: var(--peso-t) clamp(26px, 4vw, 38px)/1.15 var(--titoli); margin: 0 0 18px; }
.q__domanda small { display: block; margin-bottom: 6px; font: 900 15px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); }
.q__figura { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.q__figura .med { --s: 150px; }
.q__figura .med.img { border-radius: 24px; }
.q__indizio { font-size: 20px; font-style: italic; }
.q__opzioni { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opz { min-height: 62px; padding: 10px 16px; border-radius: var(--raggio-p); border: 2px solid var(--linea); background: var(--carta); color: var(--testo); font: 800 18px var(--font); cursor: pointer; text-align: center; }
.opz:hover:not(:disabled) { border-color: var(--accento); }
.opz.giusta, .regione.giusta path { background: #2FD27A; border-color: #1FB866; color: #08381E; fill: #2FD27A !important; }
.regione.giusta path { stroke: #0B6B36; stroke-width: 3.5; }
.opz.sbagliata, .regione.sbagliata path { background: #FF4D5A; border-color: #E0484A; color: #fff; fill: #FF8A93 !important; }
.q__mappa { max-width: 420px; margin: 0 auto 10px; }
.q__mappa .mappa { max-height: 60dvh; }
.q__esito { min-height: 30px; margin: 18px 0 0; font-size: 18px; font-weight: 700; }
.q__esito .btn { margin: 10px 0 0 8px; }
.q__punti { font: var(--peso-t) 72px/1 var(--titoli); margin: 8px 0; }
.q__punti b { color: var(--primo); }
.premio { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--raggio-p); background: color-mix(in srgb, var(--oro) 25%, var(--carta)); font-size: 19px; font-weight: 800; }
.album__conti { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline; font-size: 19px; margin-bottom: 14px; }
.album__conti b { font: var(--peso-t) 42px var(--titoli); color: var(--primo); }
.album__schede { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.album__schede button { min-height: 46px; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--linea); background: var(--carta); font-weight: 800; cursor: pointer; }
.album__schede button[aria-pressed="true"] { background: var(--testo); color: var(--fondo); border-color: var(--testo); }
.album__gruppo { margin: 20px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.album__gruppo h2 { font-size: 26px; margin: 0; }
.album__gruppo .conto { font-weight: 800; color: var(--tenue); }
.album__gruppo .medaglia { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--oro); color: #2A1E00; font-weight: 900; font-size: 14px; }
.album__griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.fig { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; padding: 8px; border-radius: 16px; border: 3px solid var(--t); background: var(--carta); overflow: hidden; color: var(--testo); text-decoration: none; }
.fig .fig__fondo { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--t) 40%, #fff), var(--t)); --buco: var(--t); }
.fig .fig__fondo img { width: 82%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; margin-top: -14%; box-shadow: 0 6px 14px rgba(30, 34, 51, .28), 0 0 0 4px rgba(255, 255, 255, .9); } /* 30/10: nell'album l'illustrazione è sempre un medaglione tondo centrato, uguale per tutte */
.fig .fig__fondo svg { width: 70%; }
.fig__nome { position: relative; align-self: flex-start; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #1E2233; font: 800 15px/1.15 var(--font); }
.fig.manca { border: 3px dashed color-mix(in srgb, var(--tenue) 40%, transparent); background: var(--campo); }
.fig.manca .fig__fondo { background: none; filter: grayscale(1); opacity: .25; }
.fig.manca .fig__fondo .emb { fill: var(--tenue); }
.fig.manca .fig__nome { background: none; color: var(--tenue); }
.fig.dorata { border-color: #E9A800; box-shadow: 0 0 0 3px #FFE58A, 0 0 22px rgba(242, 183, 5, .6); }
.fig.dorata::after { content: '★'; position: absolute; top: 6px; right: 8px; color: #FFD23F; font-size: 22px; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---------- testi, elenco ---------- */
.testo-lungo { max-width: 780px; padding: 18px 0 20px; }
.testo-lungo h2 { margin-top: 30px; }
.testo-lungo p { font-size: 19px; }
.elenco h2 { margin-top: 26px; } .elenco h3 { margin: 18px 0 6px; } .elenco ul { margin: 0; padding-left: 20px; } .elenco li { margin: 4px 0; } .elenco li span { color: var(--tenue); font-size: 15px; }
.vuoto-404 { padding: 60px 0; }

/* ---------- chi c'è dietro, piede ---------- */
.dietro { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin: 40px 0 30px; padding: 30px; border-radius: 34px; background: var(--carta); border: var(--bordo-carta); box-shadow: var(--ombra); }
.dietro img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--carta), 0 0 0 9px var(--oro); }
.dietro h2 { margin: 0; }
.dietro__nome { margin: 2px 0 8px; font-weight: 900; color: var(--oro-testo); }
.dietro p { max-width: 66ch; }
.dietro .btn { min-height: 48px; font-size: 16px; }
.piede { margin-top: 20px; padding: 40px 0 46px; background: var(--piede-bg); color: var(--piede-testo); }
.piede a { color: inherit; }
.piede__griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; font-size: 16px; }
.piede__marchio { display: flex; align-items: center; gap: 10px; font: var(--peso-t) 22px var(--titoli); }
.piede__marchio .marchio__segno { width: 34px; height: 34px; }
.piede ul { list-style: none; margin: 0; padding: 0; } .piede li { margin: 0 0 4px; } .piede li a { display: inline-block; padding: 6px 0; min-height: 44px; }
.fratelli__t { font-weight: 900; margin-bottom: 6px; }

/* ---------- telefono e tablet ---------- */
@media (max-width: 1050px) {
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: 80px; flex-direction: column; padding: 10px; border-radius: 24px; background: var(--carta); box-shadow: var(--ombra-forte); }
  .nav.aperto { display: flex; } .nav a { font-size: 19px; padding: 12px 16px; min-height: 52px; color: var(--testo); }
  .apri-menu { display: inline-grid; }
  .esplora, .regione-pagina { grid-template-columns: 1fr; }
  .racconto, .tavola--regione, .libro__illu { position: static; }
  .esplora .tavola, .regione-pagina .tavola { order: -1; }
  .piede__griglia { grid-template-columns: 1fr 1fr; } .piede__griglia > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .testata__riga { min-height: 64px; gap: 6px; }
  .marchio { font-size: 21px; } .marchio__segno { width: 34px; height: 34px; }
  .contatore { padding: 6px 10px; } .contatore__tot { display: none; }
  .tondo { width: 46px; height: 46px; }
  .nav { top: 70px; }
  .tavola { padding: 8px; border-radius: 22px; }
  .mappa { max-height: none; }
  .rosa { width: 60px; right: 14px; bottom: 14px; }
  .medaglioni { grid-template-columns: 1fr; }
  .libro { grid-template-columns: 1fr; border-radius: 24px; }
  .libro::after { display: none; }
  .libro__illu { margin: 0; border-radius: 24px 24px 0 0; padding: 22px 22px 0; }
  .stemma { aspect-ratio: 16 / 11; padding: 5% 0 9%; } .stemma svg { width: auto; height: 100%; }
  .libro__corpo { padding: 20px 18px 24px; }
  .libro__meta { margin-right: 0; }
  .libro__chiudi { top: 12px; right: 12px; background: rgba(255, 255, 255, .92); }
  .sfoglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sfoglia__su { grid-column: 1 / -1; order: -1; }
  .sfoglia a { min-width: 0; overflow-wrap: anywhere; } /* controllo finale 26/10: a 360 px i nomi lunghi allargavano la pagina */
  .tappa { grid-template-columns: 44px 1fr; } .tappa__ponte { grid-column: 2; } .tappa__n { width: 44px; height: 44px; font-size: 18px; } .tappa::before { left: 21px; }
  .q__opzioni { grid-template-columns: 1fr; }
  .q__figura { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .album__griglia { grid-template-columns: repeat(3, 1fr); gap: 8px; } .fig { padding: 5px; border-radius: 12px; } .fig__nome { font-size: 12px; padding: 2px 5px; }
  .dietro { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 18px; } .dietro .bottoni { justify-content: center; }
  .piede__griglia { grid-template-columns: 1fr; }
  .foglio { padding: 20px 16px; border-radius: 24px; } .foglio[data-quiz] { min-height: 400px; }
  .velo { place-items: end stretch; padding: 0; }
  .pannello { width: 100%; border-radius: var(--raggio) var(--raggio) 0 0; max-height: 88dvh; }
  .anteprima { grid-template-columns: 1fr; padding-right: 0; } .anteprima .med { --s: 76px; }
  .cerca-velo { padding: 12px; }
  .intro { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- stampa ---------- */
@media print {
  .testata, .piede, .dietro, .briciole, .libro__azioni, .sfoglia, .libro__chiudi, .cerca-velo, .tavola, .azioni-stampa, .salta, .chips, .regione-pagina__testo .lista-carte, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 13pt; }
  .libro { display: block; box-shadow: none; border: 0; }
  .libro__illu { width: 45mm; float: right; margin: 0 0 6mm 6mm; position: static; }
  .pag-regione .regione-pagina { display: block; }
  .pag-regione .stampa-schede { display: block !important; }
  .foglio-stampa { break-inside: avoid; border-top: 1px solid #999; padding-top: 6mm; margin-top: 6mm; }
  a { color: #000; text-decoration: none; }
  .stemma span { display: none; } /* 27/10: in stampa la scritta copriva lo stemma */
  .libro::after, .parenti { display: none !important; } /* 27/10, secondo controllo: la piega copriva il testo nel PDF; parenti e percorsi sono solo link */
  .libro__illu { width: 45mm !important; max-width: 45mm !important; margin: 0 0 6mm 6mm !important; }
  .titoletto--vicine { display: none !important; }
  h2, h3 { break-after: avoid; }
  .libro__illu { margin-right: 4mm !important; }
  .illu__img { height: auto !important; } /* l'attributo height=520 vinceva su aspect-ratio nel riquadro da 45 mm */
}
.lingua { text-decoration: none; font-weight: 900; font-size: 15px; }
.regione-box .sopra { display: flex; }
.cerca__forse { padding: 4px 12px 8px; color: var(--tenue); font-size: .95em; }
/* controllo finale 26/10: al computer la mappa del quiz «Di dove viene?» va a destra della domanda e sta tutta nello
   schermo (prima era più alta della finestra e per toccare il Sud bisognava scorrere) */
@media (min-width: 900px) {
  .q[data-tipo="dove"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 32px; align-items: start; }
  .q[data-tipo="dove"] > .q__testa, .q[data-tipo="dove"] > .q__barra { grid-column: 1 / -1; }
  .q[data-tipo="dove"] > .q__domanda { grid-column: 1; grid-row: 3; }
  .q[data-tipo="dove"] > .q__esito { grid-column: 1; grid-row: 4; }
  .q[data-tipo="dove"] > .q__mappa { grid-column: 2; grid-row: 3 / span 2; margin: 0; max-width: none; }
  .q[data-tipo="dove"] .q__mappa .mappa { max-height: max(340px, calc(100dvh - 500px)); }
}
/* traduzioni 26/10: sul telefono il tasto IT/EN della testata lascia il posto alla voce «English/Italiano» dentro il menu
   (con cinque tasti in fila i bersagli scendevano sotto i 44 px) */
.nav__lingua { display: none !important; }
@media (max-width: 1050px) { .nav.aperto .nav__lingua { display: flex !important; } }
@media (max-width: 760px) { .testata .lingua { display: none; } }

/* ---- ritocchi della Carta d'esploratore (erano in temi/1.css) ---- */
body { background: radial-gradient(circle at 10% 0%, #FFF3D9 0, transparent 40%), var(--fondo); }
.racconto h1 { font-size: clamp(40px, 4.6vw, 62px); }

/* 30/10: l'album si disegna col JS; la struttura vuota occupa lo stesso spazio così il piede non salta (CLS) */
.album__scheletro { min-height: 100px; }
.album__vuoto-testa { height: 128px; }
.album__scheletro .fig.manca { display: block; }

/* La storia lunga sulla scheda (30/10): colonna di lettura, righe comode */
.libro .storia { margin: 1.6rem 0 1.2rem; max-width: 40rem; }
.libro .storia h2 { font-size: 1.25rem; margin: 0 0 .6rem; }
.libro .storia p { font-size: 1.06rem; line-height: 1.75; margin: 0 0 1rem; }

/* «Gioca e colleziona» si apre toccando il riquadro dove vuoi (31/10, Simone): il bottone del quiz lo copre con ::after;
   «Il tuo album» resta sopra e porta all'album */
.gioca > div { position: relative; }
.gioca .btn--primo::after { content: ""; position: absolute; inset: 0; border-radius: 34px; z-index: 1; }
.gioca .btn--primo, .gioca .btn--primo:hover, .gioca .btn--primo:active { transform: none; }
.gioca .bottoni .btn:not(.btn--primo) { position: relative; z-index: 2; }
.gioca > div:has(.btn--primo:focus-visible) { outline: 3px solid var(--accento); outline-offset: 3px; }

/* pannello «condividi»: WhatsApp per primo, tasti da 44 px */
.cond-pannello{flex:1 1 100%;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;padding:10px;border:1px solid rgba(30,34,51,.18);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(30,34,51,.12)}
.cond-voce{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:2px solid transparent;font:700 16px/1 inherit;font-family:inherit;text-decoration:none;color:#fff;cursor:pointer}
.cond-wa{background:#1E7B45}.cond-tg{background:#1F6FA8}.cond-fb{background:#2F55A4}
.cond-copia,.cond-altro{background:#fff;color:#1E2233;border-color:#1E2233}
.cond-voce:focus-visible{outline:3px solid #FFC21A;outline-offset:2px}
@media (max-width:480px){.cond-pannello{flex-direction:column}.cond-voce{justify-content:flex-start}}

/* collegamento «Nella storia vera» (Storiascopio): card intera, tocco ≥44 px */
.incrocio__lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.incrocio__lista a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:12px 16px;border:2px solid #6C5CE7;border-radius:14px;background:#fff;color:#1E2233;text-decoration:none}
.incrocio__lista a:hover{background:#F1EEFF}.incrocio__lista span{font-size:.9em;color:#3C4058}

/* home al telefono (2/11): titolo e ricerca PRIMA della mappa; sotto la mappa, subito il tasto «tutte le regioni come elenco» (alternativa ai medaglioni piccoli) */
@media (max-width: 1050px) {
  .pag-home .esplora { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .pag-home .racconto, .pag-home #vista-home { display: contents; }
  .pag-home .esplora .tavola { order: 1; width: 100%; box-sizing: border-box; align-self: stretch; } /* Safari: senza larghezza esplicita la mappa restava al 78% */
  .pag-home .link-elenco { order: 2; justify-content: center; width: 100%; min-height: 52px; margin: 0; border: 2px solid var(--linea); border-radius: 999px; background: #fff; }
  .pag-home .titoletto, .pag-home .medaglioni, .pag-home #vista-regione { order: 3; }
  .pag-home #vista-home[hidden] { display: none; } /* con una regione aperta, sotto la mappa c'è solo il suo elenco (prima restava 1400 px più giù) */
}

/* lettore della storia (2/11): barra, ±15″, velocità; tasti da 44 px */
.lettore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 18px; background: #fff; }
.lettore__b { min-width: 56px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--testo); background: #fff; color: var(--testo); font: 800 16px/1 inherit; font-family: inherit; cursor: pointer }
.lettore__b:focus-visible, .lettore__barra:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px }
.lettore__barra { flex: 1 1 160px; min-height: 44px; accent-color: var(--primo); }
.lettore__tempo { font-weight: 700; font-size: 14px; min-width: 84px; text-align: right }

.approfondimento p{max-width:68ch;line-height:1.7}

/* 3/11: collegamenti ai prodotti di Simone (riga in «Chi c'è dietro» e riquadro «Ascolta / Leggi anche») */
.dietro__altri { font-size: .92rem; margin: 0 0 12px; }
.dietro__altri a { display: inline-block; padding: 10px 2px; min-height: 44px; box-sizing: border-box; }

/* 3/11, controllo esterno: bersagli da 44 px per logo, briciole ed elenco */
.marchio { min-height: 44px; }
.briciole a { display: inline-block; padding: 11px 2px; }
.link-elenco, .lista-elenco a { min-height: 44px; }

.ascolta__due { padding: 12px 14px; border: 1px solid currentColor; border-radius: 12px; list-style: none; }
.ascolta__due b, .ascolta__due > span { display: block; }
.ascolta__link { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ascolta__link a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: 999px; font-weight: 800; text-decoration: none; }

/* 3/11: altri bersagli da 44 px (elenco, piedi, fonti) */
.pag-elenco li a, .elenco li a, .piede a, .fonti a { display: inline-block; padding: 11px 0; }
.piede__marchio { min-height: 44px; }

/* Ascolta in risalto (4/11): primo tasto, grande, colorato, con un leggero battito */
.libro__azioni .btn--ascolta { order: -1; flex: 1 1 100%; min-height: 68px; font-size: 22px; background: var(--primo); border-color: var(--primo); color: var(--primo-testo); box-shadow: 0 7px 0 rgba(0,0,0,.18), 0 14px 28px rgba(30,34,51,.16); animation: ascolta-pulsa 2.6s ease-in-out 4; }
.libro__azioni .btn--ascolta .ico { width: 30px; height: 30px; }
.libro__azioni .btn--ascolta[aria-pressed="true"] { animation: none; background: var(--testo); border-color: var(--testo); }
@keyframes ascolta-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@media (min-width: 700px) { .libro__azioni .btn--ascolta { flex: 0 1 auto; min-width: 280px; } }
@media (prefers-reduced-motion: reduce) { .libro__azioni .btn--ascolta { animation: none; } }

/* Musica in risalto (4/11): riquadro pieno e colorato, tasti bianchi grandi */
.incrocio__lista > .ascolta__due { grid-column: 1 / -1; padding: 22px 24px; border: 0; border-radius: 22px; background: var(--era, var(--primo, #6a4fe0)); color: var(--era-t, var(--primo-testo, #fff)); box-shadow: 0 8px 0 rgba(0,0,0,.16), 0 14px 30px rgba(30,34,51,.16); }
.ascolta__due b { font-size: 22px; line-height: 1.2; }
.ascolta__due > span:not(.ascolta__link) { margin-top: 4px; font-size: 16px; opacity: .95; }
.ascolta__due .ascolta__link { gap: 12px; margin-top: 14px; }
.ascolta__due .ascolta__link a { min-height: 52px; padding: 0 24px; border: 0; background: #fff; color: #1E2233; font-size: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.ascolta__due .ascolta__link a:hover { transform: translateY(-2px); }

/* lettore fisso in basso mentre si ascolta, e paragrafo letto evidenziato (4/11) */
.lettore { position: sticky; top: 74px; z-index: 40; box-shadow: 0 10px 30px rgba(30, 34, 51, .28); border-color: var(--primo); }
.storia p.leggo { background: var(--accesa); box-shadow: -12px 0 0 var(--accesa), 12px 0 0 var(--accesa); border-radius: 8px; }

/* Riquadro musica, rifatto (4/11): carta scura con icona, titolo e due tasti larghi centrati */
.incrocio__lista > li.ascolta__due { grid-column: 1 / -1; display: block; padding: 20px; border: 0; border-radius: 22px; background: linear-gradient(135deg, #25235e 0%, #4a37b8 100%); color: #fff; box-shadow: 0 10px 28px rgba(30, 34, 51, .28); }
.ascolta__due .ascolta__testa { display: flex; align-items: center; gap: 14px; color: #fff; font-size: inherit; }
.ascolta__due .ascolta__nota { flex: none; width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #FFD84D; }
.ascolta__due .ascolta__titoli { display: flex; flex-direction: column; gap: 4px; color: #fff; font-size: inherit; }
.ascolta__due .ascolta__titoli b { font-size: 21px; line-height: 1.2; color: #fff; }
.ascolta__due .ascolta__desc { display: block; font-size: 15px; line-height: 1.35; color: #E4E0FF; }
.ascolta__due .ascolta__link { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; color: inherit; }
.ascolta__due .ascolta__link a { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: #1E2233; font-size: 18px; font-weight: 800; text-align: center; text-decoration: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.ascolta__due .ascolta__link a i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.ascolta__due .ascolta__sp i { background: #1DB954; } .ascolta__due .ascolta__yt i { background: #FF0033; }
.ascolta__due .ascolta__link a:hover { transform: translateY(-2px); }
.ascolta__due .ascolta__link a { flex-direction: row; }

.lettore__pausa { min-width: 96px; background: var(--primo); border-color: var(--primo); color: var(--primo-testo); }

/* QA 4/11: lettore più basso al telefono (due righe invece di tre: tasti, poi velocità + barra + tempo), così copre meno testo */
@media (max-width: 480px) {
  .lettore { gap: 6px; padding: 8px; border-radius: 16px; }
  .lettore__b { min-width: 0; padding: 0 9px; font-size: 15px; }
  .lettore__pausa { min-width: 84px; }
  .lettore__barra { flex: 1 1 110px; min-width: 110px; }
  .lettore__tempo { min-width: 0; font-size: 13px; text-align: left; }
}
.lettore__vel { min-width: 44px; }

/* QA 4/11: briciole allineate (l'ultima voce stava più in alto dei link da 44 px) */
.briciole ol { align-items: center; }
.briciole li { display: flex; align-items: center; min-height: 44px; }

/* QA 4/11: stampa su A4 con margini decisi da noi, righe senza vedove, firma in fondo */
@page { size: A4; margin: 16mm 15mm 18mm; }
@media print {
  p { orphans: 3; widows: 3; }
  .losai, .fonti li, .storia blockquote { break-inside: avoid; }
  main::after { content: "Atlante dei Miti · atlantedeimiti.com"; display: block; margin-top: 10mm; padding-top: 3mm; border-top: 1px solid #999; font-size: 10pt; color: #444; }
  img { max-width: 100% !important; break-inside: avoid; }
}

/* QA 4/11: numero della tappa bianco su oro = contrasto 1,98; senza colore di mitologia ora è blu notte */
.tappa__n { background: var(--m, var(--testo)); }
@media (max-width: 760px) { .tappa__n { font-size: 19px; } }

/* mappa del mondo al telefono (4/11): le etichette misuravano 4 px; la mappa ora è più larga del riquadro e si scorre con il dito (sotto restano le schede delle mitologie) */
@media (max-width: 760px) {
  .mare-mondo { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .mare-mondo .mondo { width: 880px; max-width: none; }
}

/* mappa del mondo sul telefono: scritta che dice di scorrere, e la mappa parte da un lato (4/11) */
@media (max-width: 700px) { .mare-mondo::after { content: "Scorri la mappa col dito \2192"; position: sticky; left: 8px; display: block; width: max-content; margin: 8px 0 0 4px; padding: 6px 12px; border-radius: 999px; background: rgba(30, 34, 51, .85); color: #fff; font: 800 14px var(--font); } }

/* selettore della lingua (it, en, es, fr, de): 6/11/2026 */
.lingua-sel { position: relative; }
.lingua-sel summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 56px; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--linea); background: var(--carta); color: var(--testo); font: 900 15px var(--font); cursor: pointer; }
.lingua-sel summary::-webkit-details-marker { display: none; }
.lingua-sel summary::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lingua-sel__lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; display: grid; min-width: 160px; padding: 6px; border-radius: 16px; background: var(--carta); color: var(--testo); border: 1px solid var(--linea); box-shadow: var(--ombra); }
.lingua-sel__lista a, .lingua-sel__lista span { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 10px; font: 800 16px var(--font); text-decoration: none; color: inherit; }
.lingua-sel__lista a:hover, .lingua-sel__lista a:focus-visible { background: var(--terra3); }
.lingua-sel__lista [aria-current] { background: var(--accento); color: var(--accento-testo); }
@media (max-width: 760px) { .testata .lingua-sel { display: none; } }
@media print { .lingua-sel { display: none; } }

/* ---- tinte delle regioni: scritte da costruisci.mjs (vicine sempre diverse) ---- */
.regione[data-id="piemonte"]{--tinta:var(--tinta-1)}
.regione[data-id="valle-d-aosta"]{--tinta:var(--tinta-2)}
.regione[data-id="liguria"]{--tinta:var(--tinta-5)}
.regione[data-id="lombardia"]{--tinta:var(--tinta-6)}
.regione[data-id="trentino-alto-adige"]{--tinta:var(--tinta-2)}
.regione[data-id="veneto"]{--tinta:var(--tinta-5)}
.regione[data-id="friuli-venezia-giulia"]{--tinta:var(--tinta-1)}
.regione[data-id="emilia-romagna"]{--tinta:var(--tinta-2)}
.regione[data-id="marche"]{--tinta:var(--tinta-4)}
.regione[data-id="toscana"]{--tinta:var(--tinta-3)}
.regione[data-id="umbria"]{--tinta:var(--tinta-6)}
.regione[data-id="lazio"]{--tinta:var(--tinta-1)}
.regione[data-id="campania"]{--tinta:var(--tinta-3)}
.regione[data-id="abruzzo"]{--tinta:var(--tinta-3)}
.regione[data-id="molise"]{--tinta:var(--tinta-2)}
.regione[data-id="puglia"]{--tinta:var(--tinta-1)}
.regione[data-id="basilicata"]{--tinta:var(--tinta-4)}
.regione[data-id="calabria"]{--tinta:var(--tinta-5)}
.regione[data-id="sicilia"]{--tinta:var(--tinta-6)}
.regione[data-id="sardegna"]{--tinta:var(--tinta-4)}