/* Castelli Romani Trail ASD — foglio di stile del sito pubblico.
   Direzione «Monte Cavo»: sezioni scure color bosco alternate a sezioni chiare color carta,
   giallo sole del logo come colore acceso, terra del sentiero per i dettagli.
   Font di sistema, titoli grandi e compatti. Contrasti verificati (WCAG 2.2 AA):
   inchiostro/carta 14,5:1 · tenue/carta 6,6:1 · terra/carta 5,2:1 · bosco/sole 9,2:1 ·
   carta/bosco 15,2:1 · nebbia/bosco 11:1. Riferimenti: docs/decisioni-sito.md. */

:root {
  --bosco: #11201a;        /* sezioni scure, footer */
  --bosco-2: #1a3127;      /* card e superfici sul bosco */
  --muschio: #2f6b45;      /* verde del logo, scurito: link su carta */
  --sole: #f2b51d;         /* giallo del logo: pulsanti, dettagli accesi */
  --sole-2: #ffc93d;       /* hover del giallo */
  --terra: #a54b20;        /* terra del sentiero: occhielli e categorie su chiaro */
  --carta: #f6f3ec;        /* sezioni chiare */
  --pietra: #ece6d9;       /* seconda superficie chiara */
  --linea: #d9d1bf;        /* bordi su chiaro (decorativi) */
  --inchiostro: #17241d;   /* testo su chiaro */
  --tenue: #4b5a51;        /* testo secondario su chiaro */
  --nebbia: #c9d3cc;       /* testo secondario su bosco */
  --bianco: #ffffff;
  --bordo-campo: #6f7d74;  /* bordi dei campi: 4,1:1 su carta */
  --errore: #b3261e;
  --errore-sfondo: #fdecea;
  --ok: #1e6b46;
  --ok-sfondo: #e4f2e8;

  --carattere: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --corpo: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);            /* 16 → 18px */
  --t-mega: clamp(3rem, 1.4rem + 6.4vw, 7.5rem);                /* titolo della home */
  --t-grande: clamp(2.25rem, 1.3rem + 3.6vw, 4.75rem);          /* titoli di sezione */
  --t-pagina: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);              /* titoli delle pagine interne */
  --t-medio: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --t-occhiello: 0.8125rem;

  --contenitore: min(100% - 2 * clamp(1.25rem, 0.5rem + 3vw, 3rem), 1360px);
  --stretto: min(100% - 2.5rem, 760px);
  --sezione: clamp(4.5rem, 2.5rem + 8vw, 10rem);
  --alt-header: 76px;
  --raggio: 14px;
  --raggio-l: 22px;
  --tocco: 44px;
  --veloce: 160ms;
  --base: 320ms;
  --uscita: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alt-header) + 16px); }
body { margin: 0; background: var(--carta); color: var(--inchiostro); font: 400 var(--corpo)/1.6 var(--carattere); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, h4 { color: inherit; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 0.6em; text-wrap: balance; }
h3 { font-size: var(--t-medio); letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--muschio); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--inchiostro); }
.sezione--bosco a:not(.bottone), .hero a:not(.bottone), .copertina a:not(.bottone), .piede a { color: var(--sole); }
:focus-visible { outline: 3px solid var(--sole); outline-offset: 3px; border-radius: 4px; }
.sezione--carta :focus-visible, .sezione--pietra :focus-visible, .testata :focus-visible, main > .sezione:not(.sezione--bosco) :focus-visible { outline-color: var(--inchiostro); }
[hidden] { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--sole); color: var(--inchiostro); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.salta:focus { top: 10px; }

.contenitore { width: var(--contenitore); margin-inline: auto; }
.stretto { width: var(--stretto); margin-inline: auto; }
.sezione { padding-block: var(--sezione); position: relative; }
.sezione--carta { background: var(--carta); color: var(--inchiostro); }
.sezione--pietra { background: var(--pietra); color: var(--inchiostro); }
.sezione--bosco { background: var(--bosco); color: var(--carta); }
.sezione--grigia { background: var(--pietra); }
.titolo-grande { font-size: var(--t-grande); max-width: 18ch; }
.titolo-sezione { font-size: var(--t-grande); max-width: 20ch; }
.titolo-grande a, .titolo-sezione a { color: inherit; text-decoration: none; }
.titolo-grande a:hover { color: var(--terra); }
.testo-grande { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.55; }
.occhiello { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); }
.occhiello::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sezione--bosco .occhiello { color: var(--sole); }
.nessuno { padding: 2rem 0; }

/* ───── bottoni: pillola gialla con la freccia che ruota ───── */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 6px 26px; border: 0; border-radius: 999px;
  background: var(--sole); color: var(--inchiostro); font: 700 1rem/1.2 var(--carattere); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; transition: background-color var(--veloce), color var(--veloce), box-shadow var(--veloce);
}
.bottone:hover { background: var(--sole-2); color: var(--inchiostro); }
.bottone--freccia { padding-right: 8px; }
.bottone--freccia::after {
  content: "" / ""; display: inline-block; width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2b51d' d='M5 11h10.6l-4.3-4.3 1.4-1.4L19.4 12l-6.7 6.7-1.4-1.4 4.3-4.3H5z'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform var(--base) var(--uscita);
}
.bottone--freccia:hover::after { transform: rotate(-45deg); }
.bottone--scuro { background: var(--inchiostro); color: var(--carta); }
.bottone--scuro:hover { background: var(--bosco-2); color: var(--carta); }
.bottone--scuro.bottone--freccia::after { background-color: var(--sole); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317241d' d='M5 11h10.6l-4.3-4.3 1.4-1.4L19.4 12l-6.7 6.7-1.4-1.4 4.3-4.3H5z'/%3E%3C/svg%3E"); }
.bottone--linea { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.bottone--linea:hover { background: rgb(255 255 255 / 10%); color: inherit; }
.sezione--carta .bottone--linea:hover, .sezione--pietra .bottone--linea:hover { background: rgb(23 36 29 / 6%); }
.bottone--vuoto { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.bottone--vuoto:hover { background: var(--inchiostro); color: var(--carta); }
.bottone--chiaro { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.bottone--pieno { width: 100%; }
.bottone--card { min-height: 48px; }
.gruppo-bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 2rem; }

/* ───── header: vetro leggero su carta ───── */
/* il vetro sta su uno strato a parte: un backdrop-filter sull'header farebbe da contenitore al menu fisso del telefono e lo taglierebbe */
.testata { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgb(23 36 29 / 8%); }
.testata::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(246 243 236 / 82%); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .testata::before { background: var(--carta); } }
.testata__dentro { display: flex; align-items: center; gap: 24px; height: var(--alt-header); }
.logo { display: block; flex: none; transition: transform 0.5s var(--uscita); }
.logo:hover { transform: rotate(-8deg) scale(1.04); }
.logo img { width: 58px; height: 58px; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a, .nav button {
  display: flex; align-items: center; min-height: var(--tocco); padding: 0 14px; border-radius: 999px;
  font: 600 0.9375rem/1 var(--carattere); letter-spacing: -0.01em; color: var(--inchiostro);
  text-decoration: none; background: none; border: 0; cursor: pointer; transition: background-color var(--veloce);
}
.nav a:hover, .nav button:hover { background: rgb(23 36 29 / 7%); color: var(--inchiostro); }
.nav a[aria-current="page"] { background: var(--inchiostro); color: var(--carta); }
.testata__divisore { display: none; }
.testata__azioni { display: flex; align-items: center; gap: 8px; }
.bottone--testata { min-height: var(--tocco); padding: 0 20px; font-size: 0.9375rem; }
.menu-apri { display: none; align-items: center; justify-content: center; gap: 8px; min-width: var(--tocco); height: var(--tocco); padding: 0 12px; background: var(--inchiostro); border: 0; border-radius: 999px; color: var(--carta); cursor: pointer; }
.menu-apri svg { width: 20px; height: 20px; }

/* ───── hero della home ───── */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: calc(100svh - var(--alt-header)); padding: 6rem 0 clamp(2.5rem, 1rem + 5vw, 5.5rem); color: var(--carta); background: var(--bosco); overflow: hidden; }
.hero__img, .copertina__img, .sponsor-home__img, .fascia-foto__img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__img img, .copertina__img img, .sponsor-home__img img, .fascia-foto__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__img img { transform: scale(1.06); animation: hero-zoom 2.4s var(--uscita) forwards; }
@keyframes hero-zoom { to { transform: scale(1); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(17 32 26 / 30%) 0%, rgb(17 32 26 / 45%) 40%, rgb(17 32 26 / 88%) 75%, rgb(17 32 26 / 96%) 100%); }
.hero__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.hero__titolo { margin: 0; font-size: var(--t-mega); line-height: 0.92; letter-spacing: -0.045em; max-width: 12ch; }
.hero__lato { max-width: 46rem; }
.hero__lato p { font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); color: var(--carta); }
.hero__lato .gruppo-bottoni { margin-top: 1.75rem; }

/* ───── testata delle pagine interne ───── */
.copertina { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(22rem, 15rem + 22vw, 34rem); padding: 7rem 0 clamp(2.5rem, 1.5rem + 3vw, 4rem); background: var(--bosco); color: var(--carta); overflow: hidden; }
.copertina::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(17 32 26 / 50%) 0%, rgb(17 32 26 / 90%) 100%); }
.copertina__testo { display: flex; flex-direction: column; }
/* variante «bosco»: foto sbiadita sotto il verde sfumato, come la sezione sponsor della home */
.copertina--bosco .copertina__img { opacity: 0.28; }
.copertina--bosco::before { background: linear-gradient(180deg, var(--bosco) 0%, rgb(17 32 26 / 70%) 45%, var(--bosco) 100%); }
.copertina h1 { order: 2; font-size: var(--t-pagina); line-height: 0.95; letter-spacing: -0.04em; max-width: 16ch; margin-bottom: 0.4em; }
.copertina p { order: 3; max-width: 46rem; color: var(--nebbia); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); margin: 0 0 0.4em; }
.copertina .briciole { order: 1; margin: 0 0 1.25rem; }
.briciole { font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.briciole ol { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; color: var(--nebbia); }
.briciole li + li::before { content: "/"; margin-right: 10px; opacity: 0.6; }
.briciole a { color: var(--sole); text-decoration: none; }
.briciole a:hover { color: var(--carta); }
.copertina--articolo { min-height: clamp(24rem, 16rem + 24vw, 38rem); }
.copertina--articolo h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); max-width: 22ch; }
.copertina__meta { order: 4; margin-top: 0.75rem !important; font-size: var(--t-occhiello) !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--nebbia) !important; }

/* ───── chi siamo: testo + mosaico sfalsato ───── */
.chi__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
.mosaico { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.mosaico figure { border-radius: var(--raggio-l); overflow: hidden; background: var(--pietra); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; }
.mosaico__a { grid-row: 1 / 3; aspect-ratio: 3 / 4.4; }
.mosaico__b { aspect-ratio: 1; margin-top: 3rem; }
.mosaico__c { aspect-ratio: 1; }

/* ───── sponsor in home: bosco con foto in trasparenza ───── */
.sponsor-home { overflow: hidden; isolation: isolate; }
.sponsor-home__img { opacity: 0.28; }
.sponsor-home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bosco) 0%, rgb(17 32 26 / 70%) 45%, var(--bosco) 100%); }
.due-testi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 1rem + 4vw, 5rem); max-width: 68rem; margin-top: 2.5rem; color: var(--nebbia); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); }
.loghi { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 3.5rem 0 0; padding: 0; }
.loghi li { display: grid; place-items: center; height: 84px; padding: 12px 20px; background: var(--carta); border-radius: var(--raggio); }
.loghi img { max-height: 56px; width: auto; max-width: 150px; object-fit: contain; }
.loghi__foto { padding: 0 !important; width: 84px; overflow: hidden; border-radius: 50% !important; }
.loghi__foto img { width: 84px; height: 84px; max-height: none; max-width: none; object-fit: cover; object-position: 50% 30%; }

/* ───── FAQ ───── */
.faq-home__griglia { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 3rem clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.faq-home__intro { position: sticky; top: calc(var(--alt-header) + 2rem); }
.faq-home__intro p { color: var(--tenue); }
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; align-items: baseline; gap: 18px; min-height: var(--tocco); padding: 1.4rem 3rem 1.4rem 0; position: relative; list-style: none; cursor: pointer; font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.375rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0; top: 1.35rem; width: 34px; height: 34px; border-radius: 50%; background: var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6f3ec' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform var(--base) var(--uscita), background-color var(--veloce); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--terra); }
.faq summary:hover .faq__domanda { color: var(--terra); }
.faq__num { flex: none; font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.1em; color: var(--terra); font-variant-numeric: tabular-nums; }
.faq .risposta { padding: 0 0 1.75rem calc(18px + 2ch); color: var(--tenue); max-width: 62ch; }
.faq .risposta p { margin-bottom: 0.9em; }
.faq .risposta strong { color: var(--inchiostro); }
.faq-pagina .faq { margin-top: 2rem; }

/* ───── card degli articoli: editoriali, senza scatola ───── */
.blog-home__testa { max-width: 52rem; }
.blog-home__testa p { color: var(--tenue); }
.griglia-articoli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 28px; list-style: none; margin: 3.5rem 0 0; padding: 0; }
.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--raggio-l); overflow: hidden; background: var(--linea); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--uscita); }
.card:hover .card__img img { transform: scale(1.05); }
.card__corpo { display: flex; flex-direction: column; flex: 1; padding-top: 1.25rem; }
.card__meta { order: -1; margin: 0 0 0.7rem; font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terra); }
.card__meta a { color: var(--terra); text-decoration: none; }
.card__meta a:hover { text-decoration: underline; }
.card__titolo { margin: 0 0 0.6rem; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
.card__titolo a { color: var(--inchiostro); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--base) var(--uscita); }
.card:hover .card__titolo a { background-size: 100% 1.5px; }
.card__estratto { margin: 0 0 1rem; color: var(--tenue); font-size: 0.975em; }
.card__piu { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tocco); font-weight: 700; color: var(--inchiostro); text-decoration: none; }
.card__piu span[aria-hidden] { transition: transform var(--base) var(--uscita); }
.card:hover .card__piu span[aria-hidden] { transform: translateX(5px); }

/* ───── blog: elenco + barra laterale ───── */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; align-items: start; }
.blog-layout .griglia-articoli { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-layout__laterale { display: grid; gap: 24px; position: sticky; top: calc(var(--alt-header) + 2rem); }
.cerca__titolo { font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 12px; }
.cerca__campo { position: relative; }
.cerca__campo input { width: 100%; min-height: 52px; padding: 0 56px 0 20px; font: inherit; color: var(--inchiostro); background: var(--bianco); border: 1px solid var(--bordo-campo); border-radius: 999px; }
.cerca__campo button { position: absolute; right: 4px; top: 4px; width: var(--tocco); height: var(--tocco); display: grid; place-items: center; background: var(--inchiostro); border: 0; border-radius: 50%; color: var(--carta); cursor: pointer; }
/* Mentre la ricerca interattiva carica (filtri.js mette aria-busy sulla zona) i risultati si attenuano. */
main[aria-busy="true"] .blog-layout__principale { opacity: .55; transition: opacity var(--veloce); }
.sostieni { padding: 32px 28px; background: var(--bosco); color: var(--carta); border-radius: var(--raggio-l); }
.sostieni h2 { font-size: 1.6rem; }
.sostieni p { color: var(--nebbia); font-size: 0.95em; }
.sostieni .bottone { margin-top: 1.5rem; }
.paginazione { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4rem 0 0; padding: 0; }
.paginazione a, .paginazione span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px; border-radius: 999px; color: var(--inchiostro); text-decoration: none; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--linea); }
.paginazione a:hover { box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.paginazione [aria-current="page"] { background: var(--inchiostro); color: var(--carta); box-shadow: none; }

/* ───── articolo ───── */
.articolo { background: var(--carta); }
.articolo__testo { width: var(--stretto); margin-inline: auto; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); }
.articolo__testo h3 { margin-top: 1.8em; }
.articolo__testo blockquote { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--sole); font-size: 1.1em; }
.articolo__testo figure { margin: 2em 0; }
.articolo__testo figure img { border-radius: var(--raggio); }
.video-link { display: flex; align-items: center; min-height: var(--tocco); padding: 16px 22px; background: var(--pietra); border-radius: var(--raggio); font-weight: 700; text-decoration: none; color: var(--inchiostro); }
.condividi { margin-top: 4rem; }
.condividi__titolo { font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 14px; }
.condividi__elenco { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.condividi__elenco a, .condividi__elenco button { display: grid; place-items: center; width: 52px; height: 52px; background: var(--inchiostro); border: 0; border-radius: 50%; color: var(--carta); cursor: pointer; transition: background-color var(--veloce), color var(--veloce); }
.condividi__elenco a:hover, .condividi__elenco button:hover { background: var(--sole); color: var(--inchiostro); }
.condividi__elenco svg { width: 20px; height: 20px; }
.articoli-vicini { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--linea); }
.articoli-vicini a { display: grid; gap: 6px; min-height: var(--tocco); text-decoration: none; color: var(--inchiostro); }
.articoli-vicini span { font-size: var(--t-occhiello); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra); }
.articoli-vicini strong { font-size: 1.125rem; line-height: 1.3; }
.articoli-vicini a:hover strong { text-decoration: underline; }
.articoli-vicini__succ { text-align: right; justify-items: end; }

dialog.chi-siamo { width: min(92vw, 760px); padding: clamp(28px, 4vw, 56px); border: 0; border-radius: var(--raggio-l); background: var(--carta); color: var(--inchiostro); box-shadow: 0 30px 80px rgb(10 18 14 / 35%); }
dialog.chi-siamo::backdrop { background: rgb(10 18 14 / 70%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.chi-siamo h2 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
dialog.chi-siamo form { margin-top: 2rem; }
.finestra-chiudi { display: inline-flex; align-items: center; justify-content: center; width: var(--tocco); height: var(--tocco); border: 0; background: var(--carta); color: var(--inchiostro); border-radius: 50%; cursor: pointer; font-size: 1.5rem; line-height: 1; }

/* ───── sponsor: card con sfondo, tutte uguali ───── */
.sponsor-griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 3rem 0 0; }
/* verde bosco unito, come la sezione sponsor della home (niente foto né sfumature: decisione del 7.10) */
.sponsor-box { position: relative; border-radius: var(--raggio-l); overflow: hidden; color: var(--carta); background: var(--bosco); transition: transform var(--base) var(--uscita), box-shadow var(--base); }
.sponsor-box:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgb(17 32 26 / 45%); }
.sponsor-box__dentro { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 480px; padding: clamp(24px, 2rem + 1vw, 44px); }
.sponsor-box__logo { display: inline-flex; align-self: flex-start; align-items: center; padding: 10px 16px; background: var(--carta); border-radius: var(--raggio); }
.sponsor-box__logo img { max-height: 64px; width: auto; }
.sponsor-box__logo--foto { padding: 0; background: none; border-radius: 50%; box-shadow: 0 0 0 4px var(--sole); }
.sponsor-box__logo--foto img { width: 104px; height: 104px; max-height: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.sponsor-box h3 { margin: 0 0 0.5em; color: var(--carta); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.sponsor-box p { margin: 0 0 1.75rem; color: var(--nebbia); max-width: 48ch; }
.convenzioni-intro { margin-top: clamp(5rem, 3rem + 6vw, 9rem); }
.convenzioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 3rem; }
.convenzione { display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio-l); color: var(--inchiostro); transition: transform var(--base) var(--uscita), box-shadow var(--base); }
.convenzione:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgb(17 32 26 / 25%); }
.convenzione__logo { height: 72px; display: flex; align-items: center; }
.convenzione__logo img { max-height: 72px; width: auto; max-width: 160px; border-radius: 6px; }
.convenzione h3 { margin: 0; font-size: 1.25rem; }
.convenzione p, .convenzione ul { margin: 0; color: var(--tenue); font-size: 0.95em; }
.convenzione ul { padding-left: 1.1em; display: grid; gap: 6px; }
.convenzione__locandina img { width: 100%; border-radius: var(--raggio); }
.convenzione .bottone { align-self: flex-start; margin-top: auto; min-height: 46px; }
.convenzione__tutto { display: flex; flex-direction: column; gap: 16px; }
/* con JS: card breve (testo su tre righe) e il resto nel pannello laterale */
.con-pannello .convenzione .convenzione__breve { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.con-pannello .convenzione .convenzione__tutto { display: none; }
.con-pannello .convenzioni { grid-auto-rows: 1fr; }   /* card tutte alte uguali */

/* pannello laterale: entra da sinistra e sposta la pagina a destra; largo 40vw (minimo 480px), a tutto schermo sotto i 1000px */
:root { --pannello: min(100vw, max(40vw, 480px)); --pannello-tempo: 520ms; }
@media (max-width: 999px) { :root { --pannello: 100vw; } }
body { overflow-x: clip; }
.testata, main, .piede { transition: transform var(--pannello-tempo) var(--uscita); }
html.pannello-aperto { overflow: hidden; }
html.pannello-aperto .testata, html.pannello-aperto main, html.pannello-aperto .piede { transform: translateX(var(--pannello)); }
dialog.pannello { position: fixed; inset: 0 auto 0 0; width: var(--pannello); max-width: 100vw; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--carta); color: var(--inchiostro); box-shadow: 30px 0 80px rgb(10 18 14 / 30%); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform var(--pannello-tempo) var(--uscita); }
dialog.pannello.entra { transform: none; }
dialog.pannello::backdrop { background: rgb(10 18 14 / 0%); transition: background var(--pannello-tempo); }
dialog.pannello.entra::backdrop { background: rgb(10 18 14 / 40%); }
.pannello__testa { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: 16px 16px 8px; background: linear-gradient(var(--carta) 70%, rgb(246 243 236 / 0%)); }
.pannello .finestra-chiudi { background: var(--pietra); }
.pannello .finestra-chiudi:hover { background: var(--inchiostro); color: var(--carta); }
.pannello__corpo { display: flex; flex-direction: column; gap: 20px; padding: 0 clamp(24px, 5vw, 48px) 32px; }
/* il pulsante «Visita il sito» resta fisso in fondo al pannello */
.pannello__piede { position: sticky; bottom: 0; padding: 16px clamp(24px, 5vw, 48px) max(16px, env(safe-area-inset-bottom)); background: var(--carta); border-top: 1px solid var(--linea); }
.pannello__piede .bottone { width: 100%; justify-content: center; min-height: 52px; }
.pannello__corpo h2 { margin: 0; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.pannello__corpo p, .pannello__corpo ul { margin: 0; color: var(--tenue); }
.pannello__corpo ul { padding-left: 1.1em; display: grid; gap: 8px; }
.pannello__corpo .convenzione__logo img { max-height: 80px; width: auto; max-width: 200px; border-radius: 6px; }
.pannello__corpo .convenzione__locandina img { width: 100%; border-radius: var(--raggio); }
.pannello__corpo .bottone { align-self: flex-start; min-height: 46px; }

/* fascia con foto (invito convenzioni) */
.fascia-foto { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 70vh; padding: var(--sezione) 0; color: var(--carta); background: var(--bosco); overflow: hidden; }
.fascia-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(17 32 26 / 55%) 0%, rgb(17 32 26 / 92%) 100%); }
.fascia-foto p { max-width: 60ch; color: var(--nebbia); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); }
.fascia-foto .titolo-sezione { color: var(--carta); }

/* ───── contatti ───── */
.contatti-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.contatti-info__titolo { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); max-width: 18ch; }
.contatti-info p { font-size: 1.125rem; line-height: 1.8; }
.mappa { margin-top: 2rem; }
.mappa img { border-radius: var(--raggio-l); width: 100%; }
.contatti-modulo { padding: clamp(28px, 2rem + 1vw, 48px); background: var(--bosco); color: var(--carta); border-radius: var(--raggio-l); }
.contatti-modulo h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.contatti-modulo > p { color: var(--nebbia); }
.contatti-modulo .campo input[type], .contatti-modulo .campo textarea { background: var(--bosco-2); color: var(--carta); border-color: #6c8577; }
.contatti-modulo .campo [aria-invalid="true"][type], .contatti-modulo .campo textarea[aria-invalid="true"] { background: var(--errore-sfondo); color: var(--inchiostro); border-color: var(--errore); }
.contatti-modulo .campo ::placeholder { color: #a9b8ae; }
.contatti-modulo .campo--flottante > label { color: #c3d0c7; }
.contatti-modulo .req { color: #ffb4a8; }
.contatti-modulo .campo--flottante:focus-within > label { color: var(--sole); }
.contatti-modulo .campo--flottante:has([aria-invalid="true"]) > label { color: var(--errore); }
.contatti-modulo .campo input:hover, .contatti-modulo .campo textarea:hover { border-color: #9fb3a6; }
.contatti-modulo .riepilogo-errori { background: var(--errore-sfondo); }
/* La frase con il link all'informativa al posto della casella di consenso (n. 145): stessi colori del testo sul bosco. */
.contatti-modulo .aiuto { color: var(--nebbia); margin-top: 0.25rem; }
.contatti-modulo .aiuto a { color: var(--sole); }
.contatti-modulo .errore-campo { color: #ffb4a8; }
.contatti-modulo .bottone { margin-top: 0.5rem; }

/* ───── moduli ───── */
.form { display: grid; gap: 1.25rem; }
.form--compatto { gap: 0.85rem; margin-top: 1.5rem; }
.campo { position: relative; display: grid; gap: 6px; align-content: start; }
.campo label, .campo legend, .campo__titolo { font-weight: 700; font-size: 0.9375rem; padding: 0; margin: 0; }
.campo .req { color: var(--errore); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=password], .campo input[type=date], .campo input[type=file], .campo textarea, .campo select {
  width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--inchiostro);
  background: var(--bianco); border: 1px solid var(--bordo-campo); border-radius: var(--raggio);
  transition: border-color var(--veloce), box-shadow var(--veloce), background-color var(--veloce);
}
.campo textarea { min-height: 10rem; resize: vertical; }
.campo input:hover, .campo textarea:hover { border-color: var(--tenue); }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible { outline: 3px solid var(--sole); outline-offset: 1px; border-color: var(--muschio); }
.campo [aria-invalid="true"] { border-color: var(--errore); background: var(--errore-sfondo); color: var(--inchiostro); }
.campo ::placeholder { color: #66726a; }

/* ───── etichetta flottante (come i form-floating di Bootstrap) ─────
   L'etichetta sta dentro il campo, in alto e piccola. Con :has(), finché il campo è vuoto e non ha il fuoco,
   scende al centro e si legge come un segnaposto; quando si scrive torna su e resta visibile.
   Senza :has() resta sempre su: non copre mai il testo. */
.campo--flottante > label { position: absolute; z-index: 2; top: 9px; left: 17px; right: 17px; font-size: 0.8125rem; font-weight: 700; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition: top var(--veloce) var(--uscita), font-size var(--veloce) var(--uscita), color var(--veloce); }
.campo.campo--flottante input, .campo.campo--flottante textarea { min-height: 60px; padding: 27px 16px 8px; }
.campo.campo--flottante textarea { padding-top: 32px; min-height: 9rem; }
.campo--flottante:focus-within > label { color: var(--muschio); }
.campo--flottante:has([aria-invalid="true"]) > label { color: var(--errore); }
.campo--flottante:has(.campo-password) > label { right: 112px; }
.campo--data > label { right: 64px; }
.campo.campo--flottante input.comp-data-testo { padding-right: 56px; font-variant-numeric: tabular-nums; }
@supports selector(:has(*)) {
  .campo--flottante:not(.campo--data):has(:is(input, textarea):placeholder-shown:not(:focus)) > label { top: 19px; font-size: 1rem; font-weight: 400; }
  .campo--area:has(textarea:placeholder-shown:not(:focus)) > label { top: 20px; }
}
.campo--flottante input::placeholder, .campo--flottante textarea::placeholder { color: transparent; }
.campo--data .comp-data-testo::placeholder { color: #66726a; }
.aiuto { font-size: 0.875rem; color: var(--tenue); margin: 0; }
.aiuto--sopra { margin-top: 1rem; }
.errore-campo { font-size: 0.875rem; color: var(--errore); font-weight: 700; margin: 0; }
.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.griglia-campi .piena { grid-column: 1 / -1; }
/* casella da spuntare nello stile del sito: resta un vero checkbox (appearance: none) */
.spunta { display: flex; align-items: flex-start; gap: 12px; min-height: var(--tocco); padding-top: 6px; font-weight: 400 !important; font-size: 0.9375rem; cursor: pointer; }
.spunta input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 2px solid var(--bordo-campo); border-radius: 7px; background: var(--bianco); cursor: pointer; transition: background-color var(--veloce), border-color var(--veloce); }
.spunta input::before { content: ""; width: 12px; height: 12px; background: var(--bianco); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform var(--veloce) var(--uscita); }
.spunta input:checked { background: var(--muschio); border-color: var(--muschio); }
.spunta input:checked::before { transform: scale(1); }
.spunta:hover input:not(:checked) { border-color: var(--muschio); }
.spunta input:focus-visible { outline: 3px solid var(--sole); outline-offset: 2px; }
.spunta input[aria-invalid="true"] { border-color: var(--errore); background: var(--errore-sfondo); }
.campo__titolo + .aiuto { margin-top: -2px; }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avviso { padding: 14px 18px; border-radius: var(--raggio); font-weight: 600; border: 1px solid; }
.avviso--ok { background: var(--ok-sfondo); border-color: var(--ok); color: var(--ok); }
.avviso--errore { background: var(--errore-sfondo); border-color: var(--errore); color: var(--errore); }
.avviso--info { background: var(--bianco); border-color: var(--sole); color: var(--inchiostro); font-weight: 400; }
.avviso--info p { margin: 0 0 0.25rem; }
.iscrizione > .avviso { margin: 1.25rem 0; }
.iscrizione > .avviso p:last-child { margin-bottom: 0; }

/* ───── contatore dei soci attivi (si vede da 20 soci in su) ───── */
.contatore-soci { margin: 0.5rem 0 1.5rem; font-size: 1.0625rem; color: var(--tenue); }
.contatore-soci strong, .hero__soci strong, .piede__soci strong { font-variant-numeric: tabular-nums; }
.contatore-soci strong { color: var(--muschio); font-size: 1.25em; }
.hero__soci { margin: 1.25rem 0 0; font-size: 1rem; color: var(--nebbia) !important; }
.hero__soci strong { color: var(--sole); font-size: 1.35em; }
.piede__soci { color: var(--carta); }
.piede__soci strong { color: var(--sole); font-size: 1.25em; }

/* ───── area soci (/area-soci): stesso aspetto del sito ───── */
.testata__soci { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tocco); padding: 0 14px; border-radius: 999px; color: var(--inchiostro); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background-color var(--veloce); }
.testata__soci svg { width: 22px; height: 22px; }
.testata__soci:hover, .testata__soci[aria-current="page"] { background: var(--pietra); }
.socio { max-width: 920px; margin-inline: auto; }
.socio--fuori { max-width: 560px; }
.socio__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.socio__testa .occhiello { margin-bottom: 0.75rem; }
.socio__testa .iscrizione__titolo { margin: 0; }
.socio__nav { margin: 0 0 2rem; border-bottom: 1px solid var(--linea); }
.socio__nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; list-style: none; }
.socio__nav a { display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0 16px; border-bottom: 3px solid transparent; color: var(--tenue); font-weight: 700; text-decoration: none; white-space: nowrap; }
.socio__nav a:hover { color: var(--inchiostro); }
.socio__nav a[aria-current="page"] { color: var(--inchiostro); border-bottom-color: var(--sole); }
.socio .avviso { margin: 0 0 1.5rem; }
.socio-card { margin: 0 0 1.5rem; padding: clamp(20px, 3vw, 32px); background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio-l); }
.socio-card__testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.socio-card h2 { margin: 0; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }
.socio-card > p:last-child, .socio-card form:last-child { margin-bottom: 0; }
.socio-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 1.5rem; }
.socio-dati dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.socio-dati dd { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.socio-stato { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; border: 1px solid; white-space: nowrap; }
.socio-stato--ok { color: var(--ok); background: var(--ok-sfondo); }
.socio-stato--attenzione { color: #7a4d00; background: #fdf1d4; }
.socio-stato--scaduto { color: var(--errore); background: var(--errore-sfondo); }
.socio-stato--attesa { color: var(--tenue); background: var(--pietra); }
.socio-link { display: inline-flex; align-items: center; min-height: var(--tocco); padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--muschio); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.socio-link:hover { color: var(--inchiostro); }
.socio-nota { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linea); color: var(--tenue); }
.socio .gruppo-bottoni { align-items: center; gap: 12px 24px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tabella th { padding: 0 12px 10px 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); text-align: left; border-bottom: 1px solid var(--linea); }
.tabella td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella tr:last-child td { border-bottom: 0; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella small { color: var(--tenue); }
@media (max-width: 689px) {
  .testata__soci { padding: 0 10px; }
  .socio__nav a { padding: 0 8px; font-size: 0.9375rem; }
  .socio__nav ul { gap: 0; }
  .testata__soci span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* tabella dei pagamenti a schede su telefono */
  .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tr { padding: 14px 0; border-bottom: 1px solid var(--linea); }
  .tabella tr:last-child { border-bottom: 0; }
  .tabella td { display: flex; justify-content: space-between; gap: 1rem; padding: 4px 0; border: 0; text-align: right; }
  .tabella td::before { content: attr(data-etichetta); font-weight: 700; color: var(--tenue); text-align: left; }
  .tabella td:last-child:empty { display: none; }
  .tabella .num { text-align: right; }
}

/* mostra/nascondi password (site.js) */
.campo-password { position: relative; }
.campo.campo--flottante .campo-password input, .campo .campo-password input { padding-right: 104px; }
.mostra-password { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); min-height: var(--tocco); padding: 0 14px; border: 0; border-radius: calc(var(--raggio) - 2px); background: transparent; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--muschio); cursor: pointer; }
.mostra-password:hover { background: var(--pietra); }
.mostra-password:focus-visible { outline: 3px solid var(--sole); outline-offset: 1px; }

/* ───── iscrizione ───── */
.sezione--iscrizione { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.iscrizione { max-width: 860px; margin-inline: auto; }
.iscrizione__titolo { margin: 0 0 0.5em; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; }
.passi { display: flex; gap: 12px; list-style: none; margin: 2rem 0 2.5rem; padding: 0; counter-reset: passo; }
.passi li { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 3px solid var(--linea); font-size: 0.9375rem; font-weight: 700; color: var(--tenue); counter-increment: passo; }
.passi li::before { content: "0" counter(passo); font-size: var(--t-occhiello); letter-spacing: 0.1em; color: var(--tenue); }
.passi li[aria-current="step"] { color: var(--inchiostro); border-top-color: var(--sole); }
.passi li[aria-current="step"]::before { color: var(--terra); }
fieldset.passo { border: 0; padding: 0; margin: 0; min-width: 0; }
.firma-box { position: relative; margin-top: 4px; background: var(--bianco); border: 2px dashed var(--bordo-campo); border-radius: var(--raggio); overflow: hidden; transition: border-color var(--veloce); }
.firma-box:hover, .firma-box.firmato { border-color: var(--muschio); border-style: solid; }
.firma-box canvas { position: relative; z-index: 1; display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.firma-box::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 42px; border-bottom: 1px solid var(--linea); pointer-events: none; }
.firma-box__invito { position: absolute; left: 24px; bottom: 50px; font-size: 1.125rem; font-weight: 700; color: var(--tenue); pointer-events: none; }
.firma-box.firmato .firma-box__invito { display: none; }
.firma-box .azzera { position: absolute; z-index: 2; right: 8px; top: 8px; min-height: var(--tocco); padding: 0 16px; font-size: 0.875rem; background: var(--bianco); }

/* ───── componenti dei modelli (calendario, allegati) vestiti con i token del sito ───── */
:root {
  --comp-carattere: var(--carattere); --comp-accento: var(--muschio); --comp-accento-testo: var(--bianco);
  --comp-superficie: var(--bianco); --comp-superficie-2: var(--pietra); --comp-testo: var(--inchiostro); --comp-testo-2: var(--tenue);
  --comp-bordo: var(--linea); --comp-bordo-campo: var(--bordo-campo); --comp-testo-campo: var(--inchiostro); --comp-focus: var(--muschio);
  --comp-raggio: var(--raggio); --comp-raggio-piccolo: 8px; --comp-raggio-grande: var(--raggio-l);
  --comp-ombra: 0 24px 60px -20px rgb(17 32 26 / 35%); --comp-velo: rgb(10 18 14 / 45%);
  --comp-errore: var(--errore); --comp-errore-sfondo: var(--errore-sfondo);
}
.campo .comp-data-campo { display: block; }
.campo .comp-data-apri { top: 50%; transform: translateY(-50%); right: 6px; }
.campo--file .comp-allegati { margin-top: 4px; }
.campo--file .comp-allegati-zona { min-height: 120px; border-radius: var(--raggio); }
/* zona dei file: pulsante a sinistra e testi a destra, tutto centrato; su telefono i testi vanno sotto */
.campo--file .comp-allegati-zona { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; align-items: center; column-gap: 20px; row-gap: 2px; padding: 20px 24px; text-align: left; }
.campo--file .comp-allegati-azione { grid-row: 1 / span 2; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; }
.campo--file .comp-allegati-trascina { grid-column: 2; align-self: end; font-weight: 700; color: var(--inchiostro); }
.campo--file .comp-allegati-aiuto { grid-column: 2; align-self: start; }
@media (pointer: coarse) { .campo--file .comp-allegati-aiuto { grid-row: 1 / span 2; align-self: center; } }
@media (max-width: 689px) {
  .campo--file .comp-allegati-zona { grid-template-columns: 1fr; justify-items: center; row-gap: 8px; text-align: center; }
  .campo--file .comp-allegati-azione, .campo--file .comp-allegati-trascina, .campo--file .comp-allegati-aiuto { grid-row: auto; grid-column: 1; align-self: center; }
}
.campo--file:has([aria-invalid="true"]) .comp-allegati-zona { border-color: var(--errore); background: var(--errore-sfondo); }
.link-da-copiare { width: 100%; max-width: 28rem; min-height: var(--tocco); margin-top: 8px; padding: 0 12px; font: inherit; border: 1px solid var(--bordo-campo); border-radius: var(--raggio); }

/* ───── salvataggio automatico del modulo ───── */
.salvataggio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 12px 12px 18px; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); }
.salvataggio--ripreso { border-color: var(--muschio); background: var(--ok-sfondo); }
.salvataggio__testo { flex: 1 1 18rem; margin: 0; font-size: 0.875rem; color: var(--tenue); }
.salvataggio--ripreso .salvataggio__testo { color: var(--ok); font-weight: 600; }
.salvataggio__ora { white-space: nowrap; }
.salvataggio__azzera { min-height: var(--tocco); padding: 0 18px; font-size: 0.875rem; }
@media (max-width: 689px) { .salvataggio__azzera { flex: 1 1 100%; } }

/* ───── riepilogo degli errori in cima ai moduli ───── */
.riepilogo-errori { margin: 1.25rem 0; font-weight: 400; }
.riepilogo-errori p { margin: 0 0 0.35rem; font-weight: 700; }
.riepilogo-errori ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.riepilogo-errori a { color: var(--errore); font-weight: 700; }
.riepilogo-errori:focus-visible { outline: 3px solid var(--sole); outline-offset: 2px; }
.dichiarazione { background: var(--pietra); border-radius: var(--raggio-l); padding: clamp(20px, 1rem + 1vw, 32px); }
.quota { padding: 2.5rem; background: var(--bosco); color: var(--carta); border-radius: var(--raggio-l); }
.quota strong { display: block; font-size: clamp(3rem, 2rem + 4vw, 5rem); color: var(--sole); line-height: 1; letter-spacing: -0.04em; }
.azioni-passo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1rem; }
.esito { padding-block: var(--sezione); }
.esito h1 { font-size: var(--t-pagina); max-width: 16ch; }
.esito p { max-width: 40rem; font-size: 1.25rem; color: var(--tenue); }
.esito .bottone { margin-top: 1.5rem; }

/* ───── footer: bosco con il nome in grande ───── */
.piede { background: var(--bosco); color: var(--nebbia); padding: clamp(4rem, 2rem + 6vw, 7rem) 0 2rem; font-size: 0.9375rem; line-height: 1.6; overflow: hidden; }
.piede__marchio { margin: 0 0 3rem !important; font-size: clamp(3rem, 0.5rem + 9vw, 10.5rem); font-weight: 800; letter-spacing: -0.05em; line-height: 0.88; color: var(--carta); }
.piede__marchio span { color: var(--sole); }
.piede__dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; padding-top: 2rem; border-top: 1px solid rgb(201 211 204 / 20%); }
.piede p { margin: 0 0 4px; }
.piede__nome { color: var(--carta); font-weight: 700; }
.piede a { color: var(--carta); }
.piede a:hover { color: var(--sole); }
.social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tocco); padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgb(201 211 204 / 35%); color: var(--carta); text-decoration: none; font-size: 0.875rem; font-weight: 700; }
.social a:hover { background: var(--sole); color: var(--inchiostro); box-shadow: none; }
.social svg { width: 16px; height: 16px; }

/* ───── movimento: titoli che si rivelano, comparse, foto (solo senza «riduci movimento»; tutto visibile senza JS) ───── */
@media (prefers-reduced-motion: no-preference) {
  .js .rivela { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--uscita), transform 700ms var(--uscita); }
  .js .rivela.visibile { opacity: 1; transform: none; }
  .js .rivela-titolo { opacity: 0; transform: translateY(0.35em); filter: blur(6px); transition: opacity 650ms var(--uscita), transform 650ms var(--uscita), filter 650ms var(--uscita); }
  .js .rivela-titolo.visibile { opacity: 1; transform: none; filter: none; }
  .js .rivela-foto { clip-path: inset(18% 0 0 0 round var(--raggio-l)); transition: clip-path 1s var(--uscita); }
  .js .rivela-foto img { transform: scale(1.12); transition: transform 1.4s var(--uscita); }
  .js .rivela-foto.visibile { clip-path: inset(0 0 0 0 round var(--raggio-l)); }
  .js .rivela-foto.visibile img { transform: none; }
  .js .griglia-articoli > li:nth-child(2) { transition-delay: 90ms; }
  .js .griglia-articoli > li:nth-child(3) { transition-delay: 180ms; }
  .js .mosaico__b { transition-delay: 120ms; }
  .js .mosaico__c { transition-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .hero__img img { transform: none; }
}

/* ───── tablet ───── */
@media (max-width: 999px) {
  :root { --alt-header: 68px; }
  .logo img { width: 52px; height: 52px; }
  .menu-apri { display: inline-flex; }
  .testata__azioni { margin-left: auto; }
  .nav { position: fixed; inset: var(--alt-header) 0 0 0; z-index: 90; margin: 0; padding: 2rem var(--sezione) 3rem 5vw; background: var(--bosco); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--base), visibility var(--base); }
  .nav.aperta { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav a, .nav button { min-height: 64px; padding: 0; border-radius: 0; font-size: clamp(2rem, 1.2rem + 3.5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--carta); background: none; }
  .nav a:hover, .nav button:hover, .nav a[aria-current="page"] { background: none; color: var(--sole); }
  .hero__griglia, .chi__griglia, .contatti-griglia, .faq-home__griglia, .blog-home__testa { grid-template-columns: 1fr; }
  .faq-home__intro { position: static; }
  .griglia-articoli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-layout { grid-template-columns: 1fr; }
  .blog-layout__laterale { position: static; grid-template-columns: 1fr 1fr; }
  .convenzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .due-testi { grid-template-columns: 1fr; }
}

/* ───── telefono ───── */
@media (max-width: 689px) {
  :root { --alt-header: 62px; }
  .testata__dentro { gap: 12px; }
  .logo img { width: 46px; height: 46px; }
  .bottone--testata { padding: 0 16px; }
  .menu-apri span { display: none; }
  .hero { min-height: calc(92svh - var(--alt-header)); }
  .hero__titolo { max-width: none; }
  .mosaico { grid-template-columns: 1fr 1fr; }
  .mosaico__a { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .mosaico__b { margin-top: 0; }
  .loghi li { height: 70px; padding: 10px 14px; }
  .loghi img { max-height: 46px; max-width: 110px; }
  .griglia-articoli, .blog-layout .griglia-articoli, .sponsor-griglia, .convenzioni { grid-template-columns: 1fr; }
  .blog-layout__laterale { grid-template-columns: 1fr; }
  .sponsor-box__dentro { min-height: 420px; }
  .griglia-campi { grid-template-columns: 1fr; }
  .passi li span { display: none; }
  .passi li[aria-current="step"] span { display: inline; }
  .gruppo-bottoni .bottone, .azioni-passo .bottone { flex: 1 1 100%; justify-content: center; }
  .gruppo-bottoni .bottone--freccia, .azioni-passo .bottone--freccia { justify-content: space-between; }
  .gruppo-bottoni .bottone:not(.bottone--freccia) { justify-content: center; }
  .articoli-vicini { grid-template-columns: 1fr; }
  .articoli-vicini__succ { text-align: left; justify-items: start; }
  .piede__dentro { grid-template-columns: 1fr; }
  .faq summary { padding-right: 2.75rem; }
  .faq .risposta { padding-left: 0; }
}

/* ───── Editor a blocchi (libreria 0.17.2, M-018): struttura da dc-custom-tools/assets/editor/contenuto.css ─────
   Copiata qui perché la tela dell'editor e le pagine del sito usino lo stesso foglio. Sotto, l'aspetto di Bike Area
   per ogni blocco (dentro .articolo__testo, il contenitore del testo degli articoli). */
:where(.dcb)::after { content: ""; display: table; clear: both; }
:where(.dcb) :where(img, video) { max-width: 100%; height: auto; }
:where(.dcb) :where(figure) { margin-inline: 0; }
:where(.dcb) :where(figure > img, figure > a > img) { display: block; }

/* Allineamenti del testo */
:where(.dcb-centro) { text-align: center; }
:where(.dcb-destra) { text-align: right; }

/* Immagini: misure e posizione */
:where(figure.dcb-centro) { margin-inline: auto; }
:where(figure.dcb-centro) :where(img) { margin-inline: auto; }
:where(figure.dcb-sinistra) { float: left; max-width: 50%; margin: .3em 1.5em 1em 0; }
:where(figure.dcb-destra) { float: right; max-width: 50%; margin: .3em 0 1em 1.5em; text-align: inherit; }
:where(.dcb-piccola) { max-width: 50%; }
:where(.dcb-larga) { width: min(calc(100vw - 2rem), var(--dcb-larga, 1200px)); max-width: none; margin-inline: calc(50% - min(calc(50vw - 1rem), calc(var(--dcb-larga, 1200px) / 2))); }
:where(.dcb-piena) { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
:where(.dcb-larga, .dcb-piena) :where(img) { width: 100%; }
:where(.dcb-piena) > :where(figcaption) { padding-inline: 1rem; }

/* Galleria: griglia di foto quadrate */
:where([class*="dcb-galleria-"]) { display: grid; gap: var(--dcb-spazio-griglia, 1rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.dcb-galleria-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.dcb-galleria-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:where(.dcb-galleria-5) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:where([class*="dcb-galleria-"]) > :where(figure) { margin: 0; }
:where([class*="dcb-galleria-"]) :where(img) { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Video: 16:9 per YouTube e Vimeo */
:where(.dcb-video-riquadro) { position: relative; aspect-ratio: 16 / 9; }
:where(.dcb-video-riquadro) > :where(iframe, div) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
:where(.dcb-video) :where(video) { display: block; width: 100%; }
:where(.dcb-audio) :where(audio) { display: block; width: 100%; }

/* Pulsanti */
:where(.dcb-pulsanti) { display: flex; flex-wrap: wrap; gap: .75rem; }
:where(.dcb-pulsanti.dcb-centro) { justify-content: center; }
:where(.dcb-pulsanti.dcb-destra) { justify-content: flex-end; }
:where(.dcb-pulsante) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; }

/* Colonne: affiancate, una sotto l'altra sul telefono */
:where(.dcb-colonne) { display: grid; gap: var(--dcb-spazio-colonne, 2rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(.dcb-colonne-33-67) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
:where(.dcb-colonne-67-33) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
:where(.dcb-colonne-25-75) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
:where(.dcb-colonne-75-25) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
:where(.dcb-colonne-33-33-33) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:where(.dcb-colonna) { min-width: 0; }
:where(.dcb-colonna, .dcb-fisarmonica-corpo, .dcb-nota) > :where(:first-child) { margin-top: 0; }
:where(.dcb-colonna, .dcb-fisarmonica-corpo, .dcb-nota) > :where(:last-child) { margin-bottom: 0; }

/* Tabella: larga quanto il testo */
:where(.dcb-tabella) { overflow-x: auto; }
:where(.dcb-tabella) :where(table) { width: 100%; border-collapse: collapse; }
:where(.dcb-tabella) :where(th, td) { text-align: left; vertical-align: top; }

/* Fisarmonica, codice, file, spazi */
:where(.dcb-fisarmonica) > :where(summary) { cursor: pointer; }
:where(.dcb-codice) { overflow-x: auto; white-space: pre; }
:where(.dcb-file-info) { opacity: .7; font-size: .875em; }
:where(.dcb-spazio-s) { height: 1.5rem; }
:where(.dcb-spazio-m) { height: 3rem; }
:where(.dcb-spazio-l) { height: 5rem; }

/* Elenco con le spunte */
:where(.dcb-spunte) { list-style: none; padding-left: 0; }
:where(.dcb-spunte) > :where(li) { position: relative; padding-left: 1.7em; }
:where(.dcb-spunte) > :where(li)::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }

/* Dati in breve: nome e valore affiancati */
:where(.dcb-dati) { margin-inline: 0; }
:where(.dcb-dati) > :where(div) { display: grid; grid-template-columns: minmax(8em, 1fr) 2fr; gap: 1rem; }
:where(.dcb-dati) :where(dt) { font-weight: 600; }
:where(.dcb-dati) :where(dd) { margin: 0; }

/* Mappa */
:where(.dcb-mappa) :where(iframe) { display: block; width: 100%; height: 360px; border: 0; }
:where(.dcb-mappa-s) :where(iframe) { height: 240px; }
:where(.dcb-mappa-l) :where(iframe) { height: 480px; }
:where(.dcb-mappa-apri) { display: inline-block; margin-top: .5em; }

/* Indice e Leggi anche */
:where(.dcb-indice-titolo, .dcb-leggi-titolo) { font-weight: 600; }
:where(.dcb-leggi) :where(ul) { list-style: none; padding-left: 0; }
:where(.dcb-leggi) :where(li) + :where(li) { margin-top: .75em; }
:where(.dcb-leggi) :where(li > a) { display: inline-flex; align-items: center; gap: .75em; }
:where(.dcb-leggi) :where(li > a > img) { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; flex: 0 0 auto; }
:where(.dcb-leggi-descrizione) { margin: .25em 0 0; }

/* Testo solo per i lettori di schermo (es. «si apre in una nuova scheda») */
:where(.dcb-vh) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Video e mappe come link (nessun servizio esterno finché il visitatore non ci va) */
:where(.dcb-video-apri, .dcb-mappa-link .dcb-mappa-apri) { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .9rem 1.2rem; border: 1px solid currentColor; border-radius: .6rem; text-decoration: none; }

/* Foto che si ingrandiscono: si aprono nella Galleria della libreria (assets/componenti/galleria, libreria 0.20, M-022) */
:where(.dcb-ingrandisci) { display: block; cursor: zoom-in; }
/* I colori della Galleria sono quelli del sito: su body, così vincono su :root di galleria.css (caricato dopo). */
body {
  --dcg-fondo: rgb(10 18 14 / 96%);
  --dcg-testo: var(--carta);
  --dcg-tenue: rgb(246 243 236 / 62%);
  --dcg-accento: var(--sole);
  --dcg-pulsante: rgb(17 32 26 / 82%);
  --dcg-pulsante-sopra: rgb(26 49 39 / 94%);
  --dcg-bordo: rgb(246 243 236 / 22%);
  --dcg-punto: rgb(246 243 236 / 38%);
  --dcg-raggio-miniatura: 6px;
}

@media (max-width: 767px) {
  :where(.dcb-dati) > :where(div) { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  :where(.dcb-colonne) { grid-template-columns: minmax(0, 1fr); }
  :where(.dcb-galleria-3, .dcb-galleria-4, .dcb-galleria-5) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(figure.dcb-sinistra, figure.dcb-destra, .dcb-piccola) { float: none; max-width: 100%; margin-inline: 0; }
  /* La tabella con intestazione diventa una scheda per riga: il nome della colonna accanto a ogni valore. */
  :where(.dcb-tabella) { overflow-x: visible; }
  :where(.dcb-tabella:has(thead)) :where(thead) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.dcb-tabella:has(thead)) :where(tr) { display: block; margin-bottom: 1rem; }
  :where(.dcb-tabella:has(thead)) :where(td, tbody th) { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  :where(.dcb-tabella:has(thead)) :where(td, tbody th)[data-label]::before { content: attr(data-label); font-weight: 600; text-align: left; }
}

/* Aspetto di Bike Area dei blocchi */
.articolo__testo .dcb > * + * { margin-top: 1.1em; }
.articolo__testo .dcb-intro { font-size: 1.2em; line-height: 1.5; color: var(--inchiostro); }
.articolo__testo .dcb a:not([class]) { color: var(--muschio); text-underline-offset: 0.18em; }
.articolo__testo .dcb a:not([class]):hover { color: var(--inchiostro); }
.articolo__testo .dcb figure { margin-block: 2em; }
.articolo__testo .dcb figure img, .articolo__testo .dcb video { border-radius: var(--raggio); }
.articolo__testo .dcb figcaption { margin-top: 0.6em; font-size: 0.875em; color: var(--tenue); }
.articolo__testo .dcb-piena img, .articolo__testo .dcb-larga img { border-radius: 0; }
.articolo__testo [class*="dcb-galleria-"] img { border-radius: var(--raggio); }
.articolo__testo .dcb-video-riquadro { border-radius: var(--raggio); overflow: hidden; background: var(--bosco); }
.articolo__testo .dcb-pulsante { padding: 0 24px; border-radius: 999px; font: 700 1rem/1.2 var(--carattere); letter-spacing: -0.01em; transition: background var(--veloce), color var(--veloce); }
.articolo__testo .dcb-pulsante-primario { background: var(--sole); color: var(--inchiostro); }
.articolo__testo .dcb-pulsante-primario:hover { background: var(--sole-2); }
.articolo__testo .dcb-pulsante-secondario { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px currentColor; }
.articolo__testo .dcb-pulsante-secondario:hover { background: rgb(23 36 29 / 6%); }
.articolo__testo .dcb-pulsante-testo { padding-inline: 4px; color: var(--muschio); text-decoration: underline; text-underline-offset: 0.18em; }
.articolo__testo .dcb-tabella table { font-size: 0.9375em; }
.articolo__testo .dcb-tabella th, .articolo__testo .dcb-tabella td { padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.articolo__testo .dcb-tabella thead th { border-bottom: 2px solid var(--inchiostro); font-weight: 700; }
.articolo__testo .dcb-citazione { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--sole); font-size: 1.1em; }
.articolo__testo .dcb-citazione cite { display: block; margin-top: 0.6em; font-size: 0.85em; font-style: normal; color: var(--tenue); }
.articolo__testo .dcb-nota { padding: 18px 20px; border-radius: var(--raggio); background: var(--pietra); border-left: 4px solid var(--muschio); }
.articolo__testo .dcb-nota-successo { background: var(--ok-sfondo); border-left-color: var(--ok); }
.articolo__testo .dcb-nota-attenzione { background: #fdf3d8; border-left-color: var(--sole); }
.articolo__testo .dcb-nota-pericolo { background: var(--errore-sfondo); border-left-color: var(--errore); }
.articolo__testo .dcb-codice { padding: 16px 18px; border-radius: var(--raggio); background: var(--bosco); color: var(--carta); font: 0.875em/1.6 ui-monospace, Menlo, monospace; }
.articolo__testo .dcb-fisarmonica { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.articolo__testo .dcb-fisarmonica > summary { min-height: var(--tocco); display: flex; align-items: center; padding: 10px 0; font-weight: 700; }
.articolo__testo .dcb-fisarmonica-corpo { padding: 0 0 16px; }
.articolo__testo .dcb-separatore { border: 0; border-top: 1px solid var(--linea); margin-block: 2.5em; }
.articolo__testo .dcb-spunte > li::before { color: var(--muschio); }
.articolo__testo .dcb-dati > div { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.articolo__testo .dcb-dati dt { color: var(--tenue); }
.articolo__testo .dcb-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 18px; border-radius: var(--raggio); background: var(--pietra); }
.articolo__testo .dcb-file a { color: var(--muschio); font-weight: 700; }
.articolo__testo .dcb-mappa iframe { border-radius: var(--raggio); }
.articolo__testo .dcb-mappa-apri { color: var(--muschio); }
.articolo__testo .dcb-indice { padding: 18px 20px; border-radius: var(--raggio); background: var(--pietra); }
.articolo__testo .dcb-indice a, .articolo__testo .dcb-leggi a { color: var(--muschio); }
.articolo__testo .dcb-leggi { padding-top: 1.5em; border-top: 1px solid var(--linea); }
.articolo__testo .dcb-leggi li > a > img { border-radius: calc(var(--raggio) / 2); }
.articolo__testo .dcb-leggi-descrizione { font-size: 0.875em; color: var(--tenue); }