/* OpenTrek — foglio di stile unico.
   Colori principali (cambiali qui per tutto il sito): */
:root {
  --petrolio: #1f454f;
  --accento: #964818;
  --accento-scuro: #6f3917;
  --barra: #806a4b;
  --barra-testo: #ffffff;
  --barra-voci: #4f473a;
  --barra-linea: #2e8b37;
  --testo: #2b2b2b;
  --testo-2: #3f3f3f;
  --grigio: #66625a;
  --bordo: #e6decc;
  --bordo-chiaro: #efeae0;
  --crema: #f6f2e7;
  --sfondo: #ece5d3;
  --piede: #4d473c;
}

@font-face { font-family: 'Source Sans 3'; src: url('../fonts/source-sans-3.woff?v=201be6d2') format('woff'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('../fonts/oswald-logo.woff?v=070502e3') format('woff'); font-weight: 200 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--sfondo); color: var(--testo); font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--accento); }
a:hover { color: var(--accento-scuro); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #e7c77f; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 8px; top: -60px; z-index: 50; background: #fff; padding: 8px 14px; border-radius: 8px; }
.salta:focus { top: 8px; }

/* Sfondo cartografico fisso */
.sfondo { position: fixed; inset: 0; z-index: 0; background: var(--sfondo) url('../img/sfondo-cartografia.svg?v=2cb59e55') center top / cover no-repeat; }

/* ---------- Barra in alto ---------- */
.testata { position: sticky; top: 0; z-index: 20; background: var(--barra); color: var(--barra-testo); border-bottom: 1px solid rgba(0,0,0,.14); box-shadow: 0 2px 10px rgba(40,32,20,.14); }
.testata-in { max-width: 1312px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px 28px; }
.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
.logo img { display: block; width: 46px; height: 46px; }
.logo-scritta { font-family: 'Oswald', 'Source Sans 3', sans-serif; font-weight: 600; font-size: 33px; line-height: 1; letter-spacing: .04em; color: var(--barra-testo); }
.menu { display: flex; flex-wrap: wrap; gap: 2px 28px; margin-left: auto; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.menu a { color: #fff; text-decoration: none; padding: 12px 0; text-underline-offset: 7px; text-decoration-thickness: 2.5px; }
.menu a:hover, .menu a[aria-current] { color: #fff; text-decoration: underline; text-decoration-color: #fff; }
/* Voce di menu con tendina (Info) */
.menu-tendina { position: relative; display: flex; }
.menu-voce { display: inline-flex; align-items: center; gap: 6px; padding: 12px 0; border: 0; background: none; color: #fff; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-underline-offset: 7px; text-decoration-thickness: 2.5px; }
.menu-voce:hover, .menu-voce.attiva { text-decoration: underline; }
.menu-voce svg { transition: transform .15s; }
.menu-voce[aria-expanded="true"] svg { transform: rotate(180deg); }
.tendina { display: none; position: absolute; top: 100%; right: -14px; z-index: 30; min-width: 240px; padding: 8px; background: #fff; border: 1px solid var(--bordo); border-radius: 12px; box-shadow: 0 12px 28px rgba(40,32,20,.18); }
.menu-voce[aria-expanded="true"] + .tendina { display: block; }
@media (hover: hover) { .menu-tendina:hover .tendina { display: block; } }
.menu .tendina a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--testo-2); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: none; text-decoration: none; }
.menu .tendina a:hover, .menu .tendina a:focus-visible { background: var(--crema); color: var(--petrolio); text-decoration: none; }
.menu .tendina a[aria-current] { color: var(--petrolio); background: var(--crema); text-decoration: none; }
.menu-fisa { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: transparent; color: var(--barra-testo); font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; cursor: pointer; text-align: left; }
.menu-fisa svg { transition: transform .2s; }
.menu-fisa[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-fisa[aria-expanded="false"] + .menu-fisa-voci { display: none; }
.menu-fisa-voci { background: rgba(0,0,0,.14); }
.menu-mobile a.menu-sotto { padding-left: 36px; text-transform: none; letter-spacing: .02em; font-size: 16px; }
.menu-mobile a.menu-sotto[aria-current] { box-shadow: inset 4px 0 #f3c95a; }
/* Foto in testa alle pagine di testo (es. Gran Via) */
.pagina-foto { margin: 0 0 22px; }
.pagina-foto img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; }
.pulsante-cerca { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 1px 3px rgba(40,32,20,.12); color: var(--barra-testo); text-decoration: none; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.pulsante-cerca, .pulsante-cerca:hover { color: #2b2b2b; }
.hamburger { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; }

.menu-mobile { display: none; border-top: 1px solid rgba(255,255,255,.18); background: var(--barra); }
.menu-mobile a { display: block; padding: 14px 20px; color: var(--barra-testo); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu-mobile.aperto { display: block; }

/* ---------- Contenitore bianco ---------- */
.contenitore { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; max-width: 1312px; margin: 0 auto; padding: 0 16px; }
.scatola { background: #fff; border: 1px solid #dcd3c0; border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; overflow: clip; }
.pad { padding-left: 28px; padding-right: 28px; }

.briciole { position: sticky; top: 66px; z-index: 15; padding-top: 10px; padding-bottom: 10px; font-size: 15px; font-weight: 600; color: #8a8175; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bordo-chiaro); box-shadow: 0 3px 8px -6px rgba(40,32,20,.35); }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.briciole ol::-webkit-scrollbar { display: none; }
.briciole li { display: flex; align-items: center; flex-shrink: 0; }
.briciole li + li::before { content: '›'; margin: 0 8px; color: #b3a990; font-weight: 700; }
.briciole a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: #f4efe3; color: var(--accento); text-decoration: none; transition: background .15s; }
.briciole a:hover { background: #ebe2cd; }
.briciole li:first-child a { color: var(--testo-2); }
.briciole li:first-child a svg { margin-top: -1px; }
.briciole [aria-current] { color: var(--grigio); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.briciole li.qui { flex-shrink: 1; min-width: 0; }
@media (max-width: 640px) {
  .briciole { padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
  .briciole li.qui { display: none; }
  .briciole .casa-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .briciole li:first-child a { padding: 0 9px; }
  .briciole { transition: transform .25s ease, opacity .2s ease; }
  .briciole.nascosta { transform: translateY(-110%); opacity: 0; pointer-events: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .briciole { transition: none; } }

/* ---------- Testata della scheda ---------- */
.eroe { display: flex; flex-wrap: wrap; background: var(--crema); border-bottom: 1px solid #e6decc; }
.eroe-testo { flex: 1 1 380px; min-width: 0; padding-top: 32px; padding-bottom: 26px; display: flex; flex-direction: column; gap: 14px; }
.etichetta { align-self: flex-start; background: #fff; border: 1px solid #e2d7be; color: #625744; font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; text-decoration: none; }
h1 { margin: 0; font-size: clamp(32px, 4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; color: var(--petrolio); }
.quote { margin: 0; font-size: 20px; font-weight: 600; color: #625744; }
.sentieri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; color: var(--grigio); }
.sentieri span + span, .codice { background: #fff; border: 1px solid #e2d7be; border-radius: 6px; padding: 1px 8px; font-weight: 700; color: var(--testo-2); }
.profilo { margin-top: auto; padding-top: 10px; }
.profilo p { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--grigio); }
.profilo svg { display: block; width: 100%; height: 76px; }
.profilo-area { fill: var(--accento); fill-opacity: .18; }
.profilo-linea { fill: none; stroke: var(--accento); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pend { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pend.p1 { stroke: #3b8a3a; } .pend.p2 { stroke: #d4a017; } .pend.p3 { stroke: #e07b2a; } .pend.p4 { stroke: #b8321f; }
.legenda-pend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--grigio); }
.legenda-pend li { display: flex; align-items: center; gap: 5px; }
.legenda-pend span { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.legenda-pend .p1 { background: #3b8a3a; } .legenda-pend .p2 { background: #d4a017; } .legenda-pend .p3 { background: #e07b2a; } .legenda-pend .p4 { background: #b8321f; }
.pendenza { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; color: var(--grigio); }
.pendenza b { color: var(--petrolio); font-weight: 800; }
.profilo-scala { position: relative; height: 18px; font-size: 12px; color: var(--grigio); margin-top: 4px; }
.profilo-scala:has(.cima) { height: 34px; }
.profilo-scala span { position: absolute; top: 0; white-space: nowrap; }
.profilo-scala span:first-child { left: 0; }
.profilo-scala span:last-child { right: 0; }
.profilo-scala span.cima { top: 16px; left: auto; right: auto; font-weight: 700; color: var(--petrolio); }
.profilo-scala span.cima[style^="left"] { margin-left: -4px; }
.profilo-scala span.cima[style^="right"] { margin-right: -4px; }
.profilo-scala span.cima.centro { top: 14px; transform: translateX(-50%); text-align: center; line-height: 1.15; }
.profilo-scala:has(.centro) { height: 54px; }

.mappa { flex: 1.2 1 420px; min-width: 0; min-height: 300px; background: #efe9db url('../img/sfondo-cartografia.svg?v=2cb59e55') center / 900px auto; position: relative; }
.mappa::before { content: ''; position: absolute; inset: 0; background: rgba(239,233,219,.72); }
.mappa svg { position: relative; display: block; width: 100%; height: 100%; min-height: 300px; }
.traccia-bordo { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.traccia { fill: none; stroke: var(--accento); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.traccia.p1 { stroke: #3b8a3a; } .traccia.p2 { stroke: #d4a017; } .traccia.p3 { stroke: #e07b2a; } .traccia.p4 { stroke: #b8321f; }
.punto-partenza { fill: #2f9a3a; stroke: #fff; stroke-width: 3; }
.asta { stroke: #2b2b2b; stroke-width: 2.5; stroke-linecap: round; }
.piede-bandiera { fill: #2b2b2b; stroke: #fff; stroke-width: 1.5; }
.bandiera-meta { fill: #c8322a; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }

.mappa text { font-family: 'Source Sans 3', sans-serif; font-size: 19px; font-weight: 700; fill: #3f3f3f; paint-order: stroke; stroke: #f6f2e7; stroke-width: 5px; stroke-linejoin: round; }
.scala path { fill: none; stroke: #3f3f3f; stroke-width: 2; }
.scala text, .nord text { font-size: 14px; font-weight: 600; }
.nord path { fill: #3f3f3f; }

/* ---------- Dati tecnici ---------- */
.dati { margin: 0; padding-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dato { position: relative; border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px 14px 72px; min-height: 76px; display: flex; flex-direction: column; justify-content: center; }
.dato-icona { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dato dt { font-size: 14px; color: var(--grigio); font-weight: 500; }
.dato dd { margin: 0; }
.dato dd { margin: 1px 0 0; font-size: 24px; font-weight: 800; color: var(--petrolio); }
.dato dd small { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.i-dislivello { background: #fbebdd; color: #b4561c; }
.i-sviluppo { background: #e3eef4; color: #2d6d93; }
.i-difficolta { background: #e4f0e1; color: #3b7a3a; }
.i-tempo { background: #f7edcf; color: #8a6410; }

/* ---------- Corpo: articolo e colonna ---------- */
.corpo { display: flex; flex-wrap: wrap; gap: 36px; padding-top: 32px; align-items: flex-start; }
.articolo { flex: 999 1 540px; min-width: 0; font-size: 18px; line-height: 1.7; color: var(--testo-2); }
.articolo p { margin: 0 0 18px; }
.articolo p.intro { font-size: 19px; color: var(--testo); margin-bottom: 16px; }
.articolo h2 { margin: 34px 0 4px; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--petrolio); }
.articolo h3 { margin: 26px 0 6px; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--petrolio); }
.articolo h2 + h3 { margin-top: 16px; }
.articolo ul { padding-left: 22px; margin: 0 0 18px; }
.nota { font-size: 16px !important; line-height: 1.55; padding: 12px 16px; background: var(--crema); border-radius: 10px; color: #4a3a1e; }
.nota-avviso { background: #fff6dc; border: 1px solid #ebcb7e; }
.faq { border-top: 1px solid var(--bordo); margin-top: 12px; }
.faq details { border-bottom: 1px solid var(--bordo); padding: 12px 0; }
.faq summary { cursor: pointer; color: var(--testo); }
.faq summary h3 { display: inline; margin: 0; font-size: 18px; font-weight: 700; color: var(--testo); }
.faq details p { margin: 8px 0 0; }

.avvertenza { margin-top: 32px; display: flex; gap: 14px; align-items: flex-start; background: #fff6dc; border: 1px solid #ebcb7e; border-radius: 12px; padding: 16px 18px; }
.avvertenza svg { flex-shrink: 0; margin-top: 2px; }
.avvertenza p { margin: 0 !important; font-size: 16px; line-height: 1.5; color: #4a3a1e; }
.avvertenza strong { display: block; font-size: 18px; color: #6b3a0e; margin-bottom: 2px; }

.precedente-successiva { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; font-size: 16px; }
.precedente-successiva a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--bordo); border-radius: 12px; text-decoration: none; color: var(--testo); line-height: 1.35; }
.precedente-successiva a.succ { justify-content: flex-end; text-align: right; }
.precedente-successiva small { display: block; font-size: 13px; color: var(--grigio); }
.precedente-successiva b { font-weight: 700; }
.freccia { width: 38px; height: 38px; border-radius: 50%; background: var(--crema); display: flex; align-items: center; justify-content: center; color: var(--accento); flex-shrink: 0; }

.colonna { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.riquadro { border: 1px solid var(--bordo); border-radius: 12px; padding: 16px 18px; }
.riquadro-titolo { margin: 0 0 4px; font-size: 19px; font-weight: 800; color: var(--petrolio); }
.info { padding: 0; overflow: hidden; }
.info .riquadro-titolo { margin: 0; padding: 14px 18px; background: #e8f1f3; border-bottom: 1px solid #d4e4e8; }
.info ul { list-style: none; margin: 0; padding: 2px 18px; }
.info li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bordo-chiaro); font-size: 16px; }
.info li:last-child { border-bottom: 0; }
.info li span { color: var(--grigio); }
.info li[hidden] { display: none; }
.info li:has(+ li[hidden]:last-child) { border-bottom: 0; }
.info li.visite b { font-weight: 600; color: var(--petrolio); font-variant-numeric: tabular-nums; }
.info a, .info button { font-weight: 700; }
.link-pulsante { background: none; border: 0; padding: 0; font: inherit; color: var(--accento); text-decoration: underline; cursor: pointer; }
.correlate .sotto { margin: 0 0 6px; font-size: 13px; color: var(--grigio); }
.correlate ul { list-style: none; margin: 0; padding: 0; }
.correlate li + li { border-top: 1px solid var(--bordo-chiaro); }
.correlate a { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: var(--testo); line-height: 1.3; }
.correlate img, .miniatura-vuota { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #e6dfce; }
.correlate b { display: block; font-size: 16px; }
.correlate small { font-size: 13px; color: var(--grigio); }
.dona { padding: 0; overflow: hidden; background: #fff6dc; border-color: #ebcb7e; }
.dona > svg { display: block; width: 100%; height: auto; }
.dona div { padding: 14px 18px 18px; }
.dona .riquadro-titolo { color: #6b3a0e; margin: 0; text-transform: uppercase; font-size: 22px; letter-spacing: .04em; line-height: 1.15; }
.dona p { margin: 4px 0 12px; font-size: 15px; line-height: 1.5; color: #4a3a1e; }
.pulsante-bordo { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 20px; border: 1.5px solid var(--accento); color: var(--accento); background: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
.dona .pulsante-bordo { border-color: #6b3a0e; color: #6b3a0e; }
.condividi .riquadro-titolo { font-size: 17px; margin-bottom: 12px; }
.condividi div { display: flex; flex-wrap: wrap; gap: 10px; }
.condividi a, .condividi button { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 0; cursor: pointer; padding: 0; }
.c-wa { background: #1fa855; } .c-fb { background: #1877f2; } .c-tg { background: #229ed9; } .c-x { background: #111; } .c-link { background: #625744; }
.copiato { font-size: 14px; color: var(--grigio); margin: 8px 0 0; min-height: 1em; }

/* ---------- Galleria ---------- */
.galleria { padding-top: 40px; padding-bottom: 40px; }
.galleria-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.galleria h2 { margin: 0; font-size: 26px; font-weight: 800; color: var(--petrolio); }
.galleria-testa span { font-size: 15px; color: var(--grigio); }
.griglia-foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 160px; grid-auto-flow: dense; gap: 8px; }
.griglia-foto a { display: block; border-radius: 10px; overflow: hidden; background: #e6dfce; }
.griglia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.griglia-foto a:hover img { transform: scale(1.03); }
.griglia-foto .grande { grid-column: span 2; grid-row: span 2; }
.griglia-foto .alto { grid-row: span 2; }

.collabora { margin: 28px 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px 22px; border-radius: 12px; border: 1px dashed #c9b88f; background: #fbf8f1; }
.collabora > div { max-width: 60ch; }
.collabora p { margin: 0; }
.collabora .titolo { font-size: 19px; font-weight: 800; color: var(--petrolio); }
.collabora .sotto { margin-top: 2px; font-size: 15px; color: var(--grigio); }

/* Visore foto */
.visore { position: fixed; inset: 0; z-index: 100; background: rgba(20,18,14,.92); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 16px; }
.visore.aperto { display: flex; }
.visore img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 6px; }
.visore p { color: #eee; margin: 12px 0 0; text-align: center; max-width: 70ch; }
.visore button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; cursor: pointer; }
.visore .chiudi { top: 14px; right: 14px; }
.visore .prec { left: 14px; top: 50%; }
.visore .succ { right: 14px; top: 50%; }

/* ---------- Elenchi di escursioni (valle, home, ricerca) ---------- */
.pagina-testa { padding-top: 32px; padding-bottom: 8px; }
.pagina-testa p { font-size: 18px; color: var(--testo-2); }
.carte { list-style: none; margin: 0; padding-top: 24px; padding-bottom: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.carta { border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.carta a { position: relative; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.carta img, .carta .foto-vuota { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #e6dfce; }
.carta-testo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carta h2, .carta h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--petrolio); }
.carta .luogo { font-size: 14px; color: var(--grigio); }
.carta .numeri { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; white-space: nowrap; align-items: center; gap: 6px 13px; font-size: 16px; font-weight: 700; color: var(--testo-2); }
.diff { display: inline-block; border-radius: 6px; padding: 0 7px; color: #fff; font-weight: 800; line-height: 1.5; }
/* stessi colori delle tracce sulla mappa */
.diff-t { background: #3b7a3a; } .diff-e { background: #2d6d93; } .diff-ee { background: #b4561c; } .diff-eea { background: #7a2f8a; }
.dato dd:has(.diff) { display: flex; align-items: center; gap: 8px; }
.lunga { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: #8A5310; background: #FDF1DC; border: 1px solid #F0D3A2; border-radius: 6px; padding: 1px 8px; }
.lunga span[aria-hidden] { font-size: 10px; }
/* Nei box l'etichetta sta sulla foto: così non cambia l'altezza del testo e i box vicini restano allineati */
.carta .lunga { position: absolute; top: 10px; left: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.nota-lunga { margin: 14px 28px 0; padding: 12px 16px; background: #FDF1DC; border-left: 4px solid #D9922E; border-radius: 0 10px 10px 0; font-size: 16px; color: var(--testo-2); }
.nota-lunga b { color: #8A5310; }
.nota-attenzione { display: flex; gap: 12px; align-items: flex-start; margin: 14px 28px 0; padding: 12px 16px; background: #FBE6E1; border-left: 4px solid #B3361F; border-radius: 0 10px 10px 0; font-size: 16px; color: var(--testo-2); }
.nota-attenzione svg { flex: none; stroke: #B3361F; margin-top: 1px; }
.nota-attenzione p { margin: 0; }
.nota-attenzione b { color: #8E2A17; }
.carta .numeri .diff { font-size: 15px; padding: 1px 8px; }
.dato dd .diff { font-size: 18px; padding: 1px 8px; flex-shrink: 0; }
.dato dd .diff + small { font-size: 12px; line-height: 1.15; }
.vedi-mappa { margin-top: 4px; }
.valli { list-style: none; margin: 0; padding: 16px 0 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.valli a, .valli span { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--bordo); border-radius: 12px; text-decoration: none; color: var(--testo); font-weight: 700; font-size: 18px; }
.valli small { font-weight: 600; color: var(--grigio); font-size: 14px; }
.valli span { color: #9a9284; font-weight: 600; }
.sezione-titolo { margin: 8px 0 0; font-size: 26px; font-weight: 800; color: var(--petrolio); }
.testo-pagina { padding-top: 32px; padding-bottom: 32px; font-size: 18px; line-height: 1.7; color: var(--testo-2); }
.testo-pagina h1 { margin-bottom: 20px; }
.testo-pagina h2 { font-size: 24px; color: var(--petrolio); margin: 30px 0 6px; }


/* ---------- Mappa della zona ---------- */
.mappa-zona-box { padding-top: 8px; padding-bottom: 32px; scroll-margin-top: 80px; }
.sotto-mappa { margin: 4px 0 10px; font-size: 15px; color: var(--grigio); }
.mappa-zona { height: 460px; border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; background: #efe9db; z-index: 0; position: relative; }
.mappa-attesa { margin: 0; padding: 20px; color: var(--grigio); }
.mappa-avviso { position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; background: rgba(20,30,32,.5); color: #fff; font-size: 18px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; }
.mappa-avviso.visibile { opacity: 1; }
.legenda { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--grigio); }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda span { width: 22px; height: 5px; border-radius: 3px; display: inline-block; }
.l-t { background: #3b7a3a; } .l-e { background: #2d6d93; } .l-ee { background: #b4561c; } .l-eea { background: #7a2f8a; }
.pop { display: flex; flex-direction: column; gap: 2px; font-family: 'Source Sans 3', sans-serif; font-size: 14px; line-height: 1.35; min-width: 180px; }
.pop b { font-size: 16px; color: var(--petrolio); }
.pop span { color: var(--grigio); }
.pop a { margin-top: 6px; font-weight: 700; }
.elenco-testa { padding-top: 24px; }
@media (max-width: 640px) { .mappa-zona { height: 380px; } }

/* ---------- Home: testata con foto e ricerca ---------- */
.eroe-home { position: relative; overflow: hidden; background: var(--petrolio); color: #fff; }
.eroe-home-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; }
.eroe-home::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,25,28,.62) 0%, rgba(15,25,28,.35) 45%, rgba(15,25,28,.05) 75%), linear-gradient(180deg, rgba(15,25,28,0) 55%, rgba(15,25,28,.35)); }
.eroe-home-in { position: relative; z-index: 1; padding: 84px 28px 70px; max-width: 760px; }
.eroe-home h1 { color: #fff; font-size: clamp(32px, 4.6vw, 50px); text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.eroe-home p { margin: 12px 0 22px; font-size: 20px; line-height: 1.45; text-shadow: 0 1px 8px rgba(0,0,0,.4); max-width: 46ch; }
.cerca-home { display: flex; background: #fff; border-radius: 999px; padding: 5px; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 620px; }
.cerca-home input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font: inherit; font-size: 17px; color: var(--testo); min-height: 48px; }
.cerca-home input:focus { outline: none; }
.cerca-home:focus-within { box-shadow: 0 0 0 3px #e7c77f, 0 6px 24px rgba(0,0,0,.25); }
.cerca-home button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: var(--accento); color: #fff; font: inherit; font-weight: 700; padding: 0 22px; min-height: 48px; cursor: pointer; }
.cerca-home button:hover { background: var(--accento-scuro); }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.scorciatoie a { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--testo); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.scorciatoie a:hover { background: #fff; color: var(--testo); }
.scorciatoie a.tutti { background: #68b75c; color: #1c2b18; }
.scorciatoie a.tutti:hover { background: #5ca850; color: #1c2b18; }
.scorciatoie .diff { font-size: 12px; padding: 1px 6px; }
.spazio-sopra { margin-top: 32px; }

/* ---------- Zone con foto ---------- */
.zone { list-style: none; margin: 0; padding-top: 16px; padding-bottom: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.zona a { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #e6dfce; text-decoration: none; }
.zona img, .zona .foto-vuota { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.zona a:hover img { transform: scale(1.04); }
.zona-testo { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent, rgba(15,25,28,.82)); color: #fff; display: flex; flex-direction: column; gap: 2px; }
.zona h2, .zona h3 { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.15; color: #fff; }
.zona-testo { padding-top: 70px; background: linear-gradient(180deg, transparent, rgba(15,25,28,.55) 30%, rgba(15,25,28,.88)); }
.zona-dati { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 15px; font-weight: 600; }
.zona-dati > span { display: flex; align-items: center; gap: 7px; }
.zona-dati svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }
.zona-n { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.zona-diff { gap: 5px !important; margin-top: 3px; }
.zona-diff .diff { font-size: 13px; padding: 0 7px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.in-arrivo { margin: 0; padding-top: 4px; padding-bottom: 16px; font-size: 15px; color: var(--grigio); }
.in-arrivo b { color: var(--testo-2); }

/* ---------- Ricerca ---------- */
.filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 18px; padding: 18px; margin-top: 16px; background: var(--crema); border: 1px solid var(--bordo); border-radius: 12px; }
.filtri label, .filtri legend { display: block; font-size: 14px; font-weight: 700; color: var(--grigio); margin-bottom: 6px; padding: 0; }
.filtri fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtri input[type=search], .filtri select, .filtri input[type=number] { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #d6c9ac; border-radius: 10px; background: #fff; font: inherit; color: var(--testo); }
.intervallo { display: flex; align-items: center; gap: 8px; }
.intervallo input { min-width: 0; }
.scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scelte label { margin: 0; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 1px solid #d6c9ac; border-radius: 20px; background: #fff; font-weight: 700; color: var(--testo-2); cursor: pointer; }
.scelte input { accent-color: var(--petrolio); }
.scelte .d-t { color: #3b7a3a; } .scelte .d-e { color: #2d6d93; } .scelte .d-ee { color: #b4561c; } .scelte .d-eea { color: #7a2f8a; }
.risultati-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-top: 18px; }
.risultati-testa p { margin: 0; font-weight: 700; }
.ordina { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ordina[hidden] { display: none; }
.ordina-titolo { font-size: 14px; font-weight: 700; color: var(--grigio); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.ordina button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 15px; border: 1px solid #d6c9ac; border-radius: 999px; background: #fff; color: var(--testo); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.ordina button:hover { border-color: #68b75c; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ordina button:focus-visible { outline: 3px solid #1f454f; outline-offset: 2px; }
.ordina button[aria-pressed="true"] { background: #68b75c; border-color: #68b75c; color: #1c2b18; box-shadow: 0 2px 8px rgba(60,110,50,.25); }
.ordina .verso { display: none; transition: transform .2s; }
.ordina button[aria-pressed="true"] .verso { display: block; transform: rotate(180deg); }
.ordina button.giu .verso { transform: none; }
@media (max-width: 640px) { .ordina-titolo { flex-basis: 100%; } .ordina button { min-height: 38px; padding: 0 13px; font-size: 14px; } }
.risultati-testa select { min-height: 40px; border: 1px solid #d6c9ac; border-radius: 10px; padding: 0 10px; font: inherit; background: #fff; }
.vuoto { padding-top: 8px; padding-bottom: 48px; color: var(--grigio); }
.vuoto p { margin: 0; padding: 18px 20px; background: var(--crema); border: 1px dashed #d6c9ac; border-radius: 12px; }
.vuoto b { color: var(--testo); }
/* Pagina Cerca: presentazione, ricerche pronte, azzera */
.cerca-intro { max-width: 780px; margin: 6px 0 0; }
.scorciatoie-cerca { margin-top: 14px; align-items: center; }
.scorciatoie-cerca a { box-shadow: none; border: 1px solid #d6c9ac; background: #fff; min-height: 38px; font-size: 14px; }
.scorciatoie-cerca a:hover { border-color: #68b75c; }
.scorciatoie-titolo { font-size: 14px; font-weight: 700; color: var(--grigio); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.azzera { margin-right: auto; min-height: 36px; padding: 0 14px; border: 1px solid #d6c9ac; border-radius: 999px; background: #fff; color: var(--testo-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.azzera:hover { border-color: #b4561c; color: #b4561c; }
.azzera[hidden] { display: none; }

/* ---------- Piè di pagina ---------- */
.piede { position: relative; z-index: 1; margin-top: 48px; background: var(--piede); color: #e8e2d4; font-size: 15px; }
.piede-in { max-width: 1312px; margin: 0 auto; padding: 40px 16px 30px; display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 32px 48px; }
.piede-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.piede-logo span { font-family: 'Oswald', 'Source Sans 3', sans-serif; font-weight: 600; font-size: 26px; letter-spacing: .04em; color: #fff; }
.piede p { margin: 0 0 12px; line-height: 1.55; max-width: 46ch; }
.piede .piede-motto { font-style: italic; color: #fff; font-size: 17px; }
.piede-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 16px; border-radius: 999px; border: 1.5px solid #f3c95a; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.piede-btn:hover { background: rgba(243,201,90,.14); color: #fff; }
.piede-t { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #f3c95a; font-weight: 700; font-family: inherit; }
.piede-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.piede-lista a, .piede .piede-voce { display: flex; gap: 12px; align-items: flex-start; color: #fff; text-decoration: none; padding: 6px 0; }
.piede-lista a:hover b, .piede-semplice a:hover { text-decoration: underline; }
.piede-lista b { font-weight: 600; color: #fff; }
.piede .piede-voce { margin: 0; max-width: none; line-height: 1.5; }
.piede-lista small { display: block; color: #cfc7b5; font-size: 13px; }
.piede-ico { flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #f3c95a; }
.piede-ico-sos { color: #f08a70; font-size: 11px; font-weight: 800; }
.piede-semplice a { font-weight: 600; }
.piede-social { display: flex; gap: 10px; margin-top: 14px !important; }
.piede-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; }
.piede-social a:hover { background: rgba(255,255,255,.22); }
.piede-barra { border-top: 1px solid rgba(255,255,255,.14); }
.piede-barra p { margin: 0; max-width: 90ch; line-height: 1.6; }
.piede-barra div { max-width: 1312px; margin: 0 auto; padding: 14px 16px; font-size: 13px; color: #d3ccbc; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 860px) { .piede-in { grid-template-columns: 1fr 1fr; } .piede-c1 { grid-column: 1 / -1; } }
@media (max-width: 560px) { .piede-in { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Schermi piccoli ---------- */
@media (max-width: 980px) {
  .corpo { flex-direction: column; align-items: stretch; gap: 24px; }
  .articolo { flex: none; }
  .colonna { display: contents; }
  .colonna > section { flex: none; }
  .info { order: -1; }
}
@media (max-width: 820px) {
  .menu, .logo-scritta { display: none; }
  .hamburger { display: inline-flex; }
  .pulsante-cerca { margin-left: auto; }
  .hamburger { margin-left: 0; }
}
@media (max-width: 640px) {
  .contenitore { padding: 0; }
  .eroe-home-in { padding: 48px 16px 40px; }
  .eroe-home::after { background: linear-gradient(180deg, rgba(15,25,28,.35), rgba(15,25,28,.6)); }
  .eroe-home p { font-size: 18px; }
  .cerca-home button span { display: none; }
  .cerca-home button { padding: 0 16px; }
  .scatola { border: 0; border-radius: 0; }
  .piede { margin-top: 0; }
  .pad { padding-left: 16px; padding-right: 16px; }
  .nota-lunga { margin-left: 16px; margin-right: 16px; font-size: 15px; }
  .nota-attenzione { margin-left: 16px; margin-right: 16px; font-size: 15px; }
  .pulsante-cerca { padding: 0 12px; }
  .mappa text { font-size: 34px; stroke-width: 8px; }
  .mappa .scala text, .mappa .nord text { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .griglia-foto img { transition: none; } }

/* ---------- Stampa e PDF: solo logo, titolo e descrizione ---------- */
.stampa-testata, .stampa-link, .stampa-avviso { display: none; }
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; font-size: 11pt; color: #222; }
  .sfondo, .testata, .briciole, .colonna, .galleria, .collabora, .piede, .precedente-successiva, .mappa-zona-box,
  .visore, .salta, .etichetta, .quote, .sentieri, .profilo, .mappa, .dati, .avvertenza { display: none !important; }
  .stampa-testata { display: flex !important; align-items: center; gap: 10px; padding-bottom: 8mm; margin-bottom: 6mm; border-bottom: 1px solid #ccc; }
  .stampa-testata span { font-family: 'Oswald', 'Source Sans 3', sans-serif; font-weight: 600; font-size: 20pt; letter-spacing: .04em; color: #2b2b2b; }
  .contenitore { max-width: none; padding: 0; }
  .scatola { border: 0; }
  .pad { padding-left: 0; padding-right: 0; }
  .eroe { display: block; background: #fff; border: 0; }
  .eroe-testo { padding: 0 0 4mm; }
  h1 { font-size: 22pt; }
  .corpo { display: block; padding-top: 0; }
  .articolo { font-size: 11pt; line-height: 1.5; color: #222; }
  .articolo p, .articolo ul { max-width: none; }
  .articolo h2, .articolo h3 { break-after: avoid; }
  .faq details > div { display: block; }
  .stampa-avviso { display: block !important; margin-top: 8mm; padding: 3mm 4mm; border-left: 3px solid #8A5310; background: #f6f1e7; font-size: 9.5pt; color: #333; }
  .stampa-link { display: block !important; margin-top: 3mm; font-size: 9pt; color: #555; }
  a { color: inherit; text-decoration: none; }
}

/* Riquadri delle zone: foto pulita in alto, nome e dati sotto */
.zona-carta a { aspect-ratio: auto; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--bordo); transition: box-shadow .2s, border-color .2s; }
.zona-carta a:hover { border-color: #cdbf9f; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.zona-carta img, .zona-carta .foto-vuota { height: auto; aspect-ratio: 16 / 10; }
.zona-carta .zona-testo { position: static; padding: 12px 16px 14px; background: none; color: var(--testo-2); gap: 4px; flex: 1; }
.zona-carta h2, .zona-carta h3 { color: var(--petrolio); font-size: 22px; }
.zona-carta .zona-dati { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; font-size: 15px; font-weight: 700; }
.zona-carta .zona-n { flex-basis: 100%; color: var(--grigio); font-size: 13px; opacity: 1; }
.zona-carta .zona-dati svg { opacity: .75; }
.zona-carta .zona-diff { flex-basis: 100%; margin-top: 4px; }
.zona-carta .zona-diff .diff { box-shadow: none; }
.sezione-sotto { margin: 4px 0 0; color: var(--grigio); font-size: 17px; }
/* Nei box stretti i dati si rimpiccioliscono un po' per restare su una riga */
.carta { container-type: inline-size; }
@container (max-width: 300px) { .carta .numeri { font-size: 15px; gap: 6px 10px; } .carta .numeri .diff { font-size: 14px; padding: 1px 6px; } }
@container (max-width: 275px) { .carta .numeri { font-size: 14px; gap: 6px 8px; } .carta .numeri .diff { font-size: 13px; } }
.carte:empty { padding-top: 0; padding-bottom: 0; }
/* Telefono: riquadri delle zone in orizzontale (foto a sinistra, dati a destra) per non allungare troppo la pagina */
@media (max-width: 560px) {
  .zone { gap: 12px; }
  .zona-carta a { flex-direction: row; }
  .zona-carta img, .zona-carta .foto-vuota { width: 38%; flex-shrink: 0; aspect-ratio: auto; height: auto; min-height: 100%; object-fit: cover; }
  .zona-carta .zona-testo { padding: 10px 12px; }
  .zona-carta h2, .zona-carta h3 { font-size: 19px; }
  .zona-carta .zona-dati { font-size: 14px; gap: 2px 10px; }
  .zona-carta .zona-dati svg { width: 15px; height: 15px; }
}

/* Pagina "Gradi di difficoltà": testata a infografica */
.info-diff { margin: 4px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--bordo); }
.info-diff-svg { display: block; width: 100%; height: auto; }
.info-diff-carte { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 12px; }
.info-diff-carta { display: flex; flex-direction: column; border: 1px solid var(--bordo); border-top: 5px solid var(--c); border-radius: 12px; background: #fff; overflow: hidden; }
.info-diff-carta > a:first-child { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; color: var(--testo-2); text-decoration: none; flex: 1; font-size: 15px; line-height: 1.4; }
.info-diff-carta > a:first-child:hover b { text-decoration: underline; }
.info-diff-carta .diff { align-self: flex-start; font-size: 16px; }
.info-diff-carta b { color: var(--petrolio); font-size: 17px; line-height: 1.25; }
.info-diff-n { padding: 8px 14px; border-top: 1px solid var(--bordo-chiaro); font-size: 14px; font-weight: 700; color: var(--c); text-decoration: none; background: var(--crema); }
.info-diff-n:hover { text-decoration: underline; }
@media (max-width: 860px) { .info-diff-carte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .info-diff-carte[style*="--n:3"] { grid-template-columns: 1fr; } }
@media print { .info-diff, .info-diff-carte { display: none; } }

/* Carte delle guide (pagina Escursioni guidate) */
.persone { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 18px; }
.persona { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; background: #fff; border: 1px solid #e3dccb; border-radius: 14px; padding: 16px; }
.persona img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.persona h3 { margin: 2px 0 2px; }
.persona-ruolo { margin: 0 0 8px; color: #6b5a3e; font-weight: 600; font-size: .95em; }
.persona-testo p { margin: 0 0 10px; }
.persona-contatti { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px !important; }
.persona-contatti a { display: inline-flex; align-items: center; gap: 6px; }
.pulsante-wa { padding: 9px 16px; border-radius: 999px; background: #1f7a4a; color: #fff !important; font-weight: 700; text-decoration: none; }
.pulsante-wa:hover { background: #17603a; }
@media (max-width: 640px) { .persona { grid-template-columns: 1fr; } }

/* Banner donazioni largo (pagina Contatti) */
.dona-largo { display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 0; margin: 22px 0 28px; background: #fff6dc; border: 1px solid #ebcb7e; border-radius: 14px; overflow: hidden; }
.dona-largo-img { background: #F4A340; display: flex; align-items: center; height: 100%; }
.dona-largo-img svg { width: 100%; height: auto; display: block; }
.galleria-nota { margin: -6px 0 14px; color: var(--testo-2); font-size: .95em; }
.dona-largo > div { padding: 18px 22px; }
.dona-largo .riquadro-titolo { font-size: 1.25em; margin: 0 0 10px; }
.dona-voci { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dona-voci li { background: #fff; border-radius: 10px; padding: 8px 10px; font-size: .92em; line-height: 1.3; border: 1px solid #f0dca8; }
.dona-voci b { display: block; color: #8a4a12; }
.dona-zero { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px !important; }
.dona-zero span { font-size: .85em; font-weight: 700; color: #5A2E0B; background: #f3e1ae; border-radius: 999px; padding: 3px 10px; }
@media (max-width: 760px) { .dona-largo { grid-template-columns: 1fr; } .dona-voci { grid-template-columns: 1fr; } }
.galleria-pagina { padding: 12px 0 0; }

/* ---------- Home: sezioni ---------- */
.carte-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .carte-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1000px) { .carte-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* sul telefono le proposte della home scorrono di lato */
@media (max-width: 560px) {
  .carte-3, .carte-4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; gap: 12px; }
  .carte-3::-webkit-scrollbar, .carte-4::-webkit-scrollbar { display: none; }
  .carte-3 > li, .carte-4 > li { scroll-snap-align: start; }
}
.stagione-tag { display: inline-block; vertical-align: middle; margin: -4px 12px 0 0; padding: 3px 10px; border-radius: 999px; background: #f3c95a; color: #4a3610; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.evidenza { list-style: none; margin: 0; padding-top: 20px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ev-zona { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bordo); border-radius: 14px; overflow: hidden; }
.ev-testa { position: relative; display: block; height: 170px; color: #fff; text-decoration: none; background: var(--petrolio); }
.ev-testa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-testa > span { position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ev-testa h3 { margin: 0; font-size: 24px; color: #fff; line-height: 1.15; }
.ev-n { font-size: 14px; opacity: .92; }
.ev-testa:hover h3 { text-decoration: underline; }
.ev-lista { list-style: none; margin: 0; padding: 6px 0; }
.ev-lista a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 18px; color: var(--testo); text-decoration: none; border-bottom: 1px solid var(--bordo); }
.ev-lista li:last-child a { border-bottom: 0; }
.ev-lista a:hover .ev-nome { text-decoration: underline; color: var(--petrolio); }
.ev-nome { font-weight: 700; color: var(--petrolio); line-height: 1.25; }
.ev-dati { font-size: 14px; color: var(--grigio); white-space: nowrap; }
.ev-tutte { margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--bordo); background: var(--crema); font-weight: 700; color: var(--petrolio); text-decoration: none; }
.ev-tutte:hover { text-decoration: underline; }
@media (max-width: 760px) { .evidenza { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ev-lista a { grid-template-columns: auto 1fr; } .ev-dati { grid-column: 2; } }

.cammini { list-style: none; margin: 0; padding-top: 20px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cammino a { position: relative; display: block; height: 220px; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none; background: var(--petrolio); }
.cammino img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.cammino a:hover img { transform: scale(1.03); }
.cammino a > span { position: absolute; inset: auto 0 0 0; padding: 50px 20px 18px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.cammino h3 { margin: 0 0 4px; font-size: 24px; color: #fff; }
.cammino a > span > span { font-size: 15px; line-height: 1.4; display: block; max-width: 44ch; }
@media (max-width: 760px) { .cammini { grid-template-columns: 1fr; } .cammino a { height: 190px; } }

.tutte-zone { padding-top: 12px; padding-bottom: 36px; }
.tutte-zone ul { list-style: none; margin: 16px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tutte-zone li a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bordo); color: var(--petrolio); font-weight: 700; text-decoration: none; font-size: 15px; }
.tutte-zone li a:hover { border-color: var(--petrolio); }
.tutte-zone li span { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: var(--crema); color: var(--testo-2); font-size: 13px; text-align: center; }
.tutte-zone p { margin: 0; font-size: 15px; }