/* GaraScan — CSS del SITO pubblico. Mobile-first, vanilla, nessun build JS. */

/* ============================================================
   1. Design token
   ============================================================ */
:root {
    /* Palette */
    --st-blu: #123a5e;
    --st-blu-scuro: #0d2a44;
    --st-blu-chiaro: #1f5687;
    --st-accent: #1e7f5c;
    --st-accent-scuro: #176448;
    --st-bg: #ffffff;
    --st-bg-alt: #f4f7fa;
    --st-bg-soft: #eef2f7;
    --st-testo: #1b232b;
    --st-muted: #51606f;
    --st-bordo: #dde3ea;
    --st-bordo-forte: #c8d2dd;

    /* Forma */
    --st-radius: 12px;
    --st-radius-sm: 8px;
    --st-max: 68rem;
    --st-measure: 68ch;

    /* Ombre */
    --st-ombra: 0 1px 2px rgba(16, 32, 48, .04), 0 1px 3px rgba(16, 32, 48, .06);
    --st-ombra-media: 0 4px 14px rgba(16, 32, 48, .09);
    --st-ombra-forte: 0 10px 30px rgba(16, 32, 48, .12);

    /* Focus (accessibilità WCAG) */
    --st-ring: #2b6cb0;

    /* Scala tipografica */
    --st-fs-xs: 0.8rem;
    --st-fs-sm: 0.9rem;
    --st-fs-base: 1rem;
    --st-fs-md: 1.125rem;
    --st-fs-lg: 1.35rem;
    --st-fs-xl: 1.6rem;
    --st-fs-2xl: clamp(1.9rem, 1.35rem + 2.4vw, 2.6rem);

    /* Spaziatura / ritmo verticale */
    --st-sp-1: 0.25rem;
    --st-sp-2: 0.5rem;
    --st-sp-3: 0.75rem;
    --st-sp-4: 1rem;
    --st-sp-5: 1.5rem;
    --st-sp-6: 2rem;
    --st-sp-7: 3rem;
    --st-sp-8: 4.5rem;

    /* Transizioni */
    --st-trans: 140ms ease;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--st-testo);
    background: var(--st-bg);
    line-height: 1.6;
    font-size: var(--st-fs-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--st-accent-scuro); text-underline-offset: 0.14em; }

/* Ritmo tipografico di base */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h2, h3 { scroll-margin-top: 5rem; } /* offset per header sticky su ancore in-page */
p { text-wrap: pretty; overflow-wrap: break-word; }

/* Media difensive: mai overflow orizzontale da contenuti larghi */
img, svg, video, table { max-width: 100%; height: auto; }

::selection { background: rgba(30, 127, 92, .18); color: var(--st-testo); }

/* Focus visibile e coerente ovunque (accessibilità) */
:focus-visible {
    outline: 2px solid var(--st-ring);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

.st-container {
    width: 100%;
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.st-muted { color: var(--st-muted); }
.st-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   2. Header / nav
   ============================================================ */
.st-header {
    background: var(--st-blu);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(13, 42, 68, .18);
    position: sticky;
    top: 0;
    z-index: 50;
}
.st-header-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem 1rem; min-height: 3.75rem; flex-wrap: wrap;
    padding-block: 0.5rem;
}
.st-logo {
    color: #fff; font-weight: 800; font-size: 1.25rem; text-decoration: none;
    letter-spacing: -0.01em;
}
.st-logo:hover { color: #fff; }
.st-nav { display: flex; align-items: center; gap: 0.5rem 1.15rem; flex-wrap: wrap; }
.st-nav a {
    color: #dbe7f1; text-decoration: none; font-size: 0.95rem;
    padding: 0.35rem 0; border-bottom: 2px solid transparent; transition: color var(--st-trans);
}
.st-nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.st-nav .st-btn { border-bottom: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* ============================================================
   3. Bottoni
   ============================================================ */
.st-btn {
    display: inline-block; padding: 0.6rem 1.2rem; border-radius: var(--st-radius-sm);
    text-decoration: none; font-weight: 600; font-size: 0.95rem;
    border: 1px solid transparent; cursor: pointer; line-height: 1.2;
    transition: background var(--st-trans), color var(--st-trans),
                box-shadow var(--st-trans), transform var(--st-trans), border-color var(--st-trans);
}
.st-btn:active { transform: translateY(1px); }
.st-btn-primario {
    background: var(--st-accent); color: #fff;
    box-shadow: 0 1px 2px rgba(23, 100, 72, .25);
}
.st-btn-primario:hover { background: var(--st-accent-scuro); color: #fff; box-shadow: var(--st-ombra-media); }
.st-btn-ghost { background: transparent; border-color: currentColor; color: inherit; }
.st-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.st-nav .st-btn-primario { color: #fff; }
.st-btn-lg { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* ============================================================
   4. Hero
   ============================================================ */
.st-hero {
    background: linear-gradient(155deg, var(--st-blu-chiaro) 0%, var(--st-blu) 45%, var(--st-blu-scuro) 100%);
    color: #fff; padding: var(--st-sp-8) 0;
    position: relative; overflow: hidden;
}
.st-hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(60rem 30rem at 100% -10%, rgba(30, 127, 92, .18), transparent 60%);
    pointer-events: none;
}
.st-hero > .st-container { position: relative; z-index: 1; }
.st-hero-compatto { padding: var(--st-sp-7) 0; }
.st-hero h1 { margin: 0 0 1rem; font-size: var(--st-fs-2xl); line-height: 1.12; max-width: 42rem; letter-spacing: -0.015em; }
.st-hero-sub { font-size: var(--st-fs-md); line-height: 1.6; max-width: 44rem; color: #d8e6f2; margin: 0; }
.st-hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.st-hero-nota { margin-top: 1rem; color: #b6c8d8; font-size: var(--st-fs-sm); }

/* ============================================================
   5. Sezioni
   ============================================================ */
.st-section { padding: var(--st-sp-7) 0; }
.st-section-alt { background: var(--st-bg-alt); border-block: 1px solid var(--st-bordo); }
.st-section h2 { font-size: var(--st-fs-xl); color: var(--st-blu); margin-top: 0; letter-spacing: -0.01em; }
.st-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.st-section-head h2 { margin-bottom: 0; }
.st-link {
    font-weight: 600; text-decoration: none; white-space: nowrap;
    color: var(--st-accent-scuro);
}
.st-link:hover { text-decoration: underline; }

/* ============================================================
   6. Griglie / card
   ============================================================ */
.st-griglia-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.st-card {
    background: #fff; border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius); padding: 1.5rem;
    box-shadow: var(--st-ombra);
    transition: box-shadow var(--st-trans), border-color var(--st-trans), transform var(--st-trans);
}
.st-card h3 { margin-top: 0; margin-bottom: 0.5rem; color: var(--st-blu); font-size: var(--st-fs-md); }
.st-card p { margin-bottom: 0; }
.st-passi { padding-left: 1.3rem; max-width: var(--st-measure); }
.st-passi li { margin-bottom: 0.75rem; padding-left: 0.25rem; }
.st-passi li::marker { color: var(--st-accent); font-weight: 700; }

.st-cta-finale { text-align: center; }
.st-cta-finale h2 { margin-bottom: 0.5rem; }
.st-cta-finale .st-hero-cta { justify-content: center; }

/* ============================================================
   7. Gare in evidenza / card list
   ============================================================ */
.st-evidenza { background: var(--st-bg-alt); border-block: 1px solid var(--st-bordo); }
.st-card-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 1rem; grid-template-columns: 1fr;
}
.st-card-gara {
    display: flex; flex-direction: column; gap: 0.75rem;
    border-top: 3px solid var(--st-accent);
}
.st-card-gara:hover { box-shadow: var(--st-ombra-media); transform: translateY(-2px); }
.st-card-titolo { font-weight: 700; text-decoration: none; color: var(--st-blu); line-height: 1.35; overflow-wrap: anywhere; }
.st-card-titolo:hover { text-decoration: underline; }
.st-meta { margin: 0; display: grid; gap: 0.3rem; }
.st-meta > div { display: flex; gap: 0.4rem; font-size: var(--st-fs-sm); }
.st-meta dt { color: var(--st-muted); margin: 0; min-width: 6.5rem; flex: 0 0 auto; }
.st-meta dd { margin: 0; font-weight: 600; }

/* ============================================================
   8. Prezzi
   ============================================================ */
.st-griglia-prezzi { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.st-piano {
    border: 1px solid var(--st-bordo); border-radius: var(--st-radius);
    padding: 1.75rem; background: #fff; display: flex; flex-direction: column;
    box-shadow: var(--st-ombra);
    transition: box-shadow var(--st-trans), transform var(--st-trans), border-color var(--st-trans);
}
.st-piano:hover { box-shadow: var(--st-ombra-media); transform: translateY(-2px); border-color: var(--st-bordo-forte); }
.st-piano-nome { margin: 0 0 0.25rem; color: var(--st-blu); font-size: var(--st-fs-lg); }
.st-piano-tipo { margin: 0 0 1.25rem; color: var(--st-muted); font-size: var(--st-fs-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.st-piano-prezzo { margin: 0; }
.st-prezzo-val { font-size: 2rem; font-weight: 800; color: var(--st-testo); letter-spacing: -0.02em; }
.st-prezzo-iva { display: block; font-size: var(--st-fs-xs); color: var(--st-muted); }
.st-piano-imponibile { font-size: var(--st-fs-sm); margin: 0.35rem 0 1.25rem; }
.st-piano-feat { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.st-piano-feat li { padding: 0.5rem 0 0.5rem 1.6rem; border-top: 1px solid var(--st-bordo); font-size: var(--st-fs-sm); position: relative; }
.st-piano-feat li::before {
    content: ""; position: absolute; left: 0; top: 0.85rem;
    width: 0.7rem; height: 0.4rem; border-left: 2px solid var(--st-accent);
    border-bottom: 2px solid var(--st-accent); transform: rotate(-45deg);
}
.st-piano-cta { text-align: center; }
.st-nota-acquisto { margin-top: 1.75rem; text-align: center; }

/* ============================================================
   9. Prosa legale / informativa
   ============================================================ */
.st-prosa { max-width: var(--st-measure); margin-top: 1rem; }
.st-prosa p { margin: 0.6rem 0; }
.st-prosa h1 { color: var(--st-blu); }
.st-prosa h2 { font-size: var(--st-fs-lg); margin-top: 2rem; color: var(--st-blu); }
.st-avviso-legale {
    background: #fff7e6; border: 1px solid #f0d491; border-left: 4px solid #d99a1c;
    border-radius: var(--st-radius-sm);
    padding: 0.9rem 1.1rem; font-size: var(--st-fs-sm);
}

/* ============================================================
   10. Stato vuoto / 404
   ============================================================ */
.st-vuoto {
    border: 1px dashed var(--st-bordo-forte); border-radius: var(--st-radius);
    padding: 2.5rem 2rem; text-align: center; color: var(--st-muted);
    background: var(--st-bg-alt);
}
.st-404 { }
.st-404-cod { font-size: 3.5rem; font-weight: 800; color: var(--st-blu); margin: 0; letter-spacing: -0.02em; }
.st-404 .st-hero-cta { justify-content: center; }

/* ============================================================
   11. Scheda gara / breadcrumb / stati
   ============================================================ */
.st-breadcrumb { font-size: var(--st-fs-sm); color: var(--st-muted); margin-bottom: 1.25rem; }
.st-breadcrumb a { color: var(--st-accent-scuro); text-decoration: none; }
.st-breadcrumb a:hover { text-decoration: underline; }
.st-breadcrumb span { margin: 0 0.3rem; color: var(--st-bordo-forte); }
.st-gara { background: var(--st-bg-alt); }
.st-gara h1 { color: var(--st-blu); font-size: var(--st-fs-xl); line-height: 1.2; margin: 0.25rem 0 0.5rem; letter-spacing: -0.01em; }
.st-gara-head { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; }
.st-stato {
    font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px;
    background: var(--st-bg-soft); color: var(--st-blu); text-transform: uppercase; letter-spacing: 0.04em;
}
.st-stato-aperta { background: #dcf1e6; color: var(--st-accent-scuro); }
.st-stato-aggiudicata { background: #e2ebf6; color: var(--st-blu); }
.st-stato-scaduta, .st-stato-annullata { background: #f7e3e3; color: #8a2b2b; }
.st-tag {
    font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px;
    background: var(--st-blu); color: #fff; text-transform: uppercase; letter-spacing: 0.03em;
}
.st-tag-storica { background: #6b7683; }

.st-gara-corpo { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.75rem; }
.st-gara-main { min-width: 0; }
.st-scheda { display: grid; gap: 0; margin: 0; }
.st-scheda > div { display: grid; grid-template-columns: 1fr; gap: 0.15rem 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--st-bordo); }
.st-scheda > div:last-child { border-bottom: 0; }
.st-scheda dt { color: var(--st-muted); margin: 0; }
.st-scheda dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.st-gara-link { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* Ogni gruppo di informazioni è una scheda bianca sul canvas grigio della
   pagina: le sezioni si distinguono a colpo d'occhio. */
.st-blocco {
    margin-top: 1.5rem;
    background: var(--st-bg);
    border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--st-ombra);
}
.st-blocco > :first-child { margin-top: 0; }
.st-blocco h2 {
    font-size: var(--st-fs-lg); color: var(--st-blu);
    border-bottom: 1px solid var(--st-bordo); padding-bottom: 0.5rem; margin-bottom: 1rem;
}
.st-sa-nome { font-weight: 700; font-size: var(--st-fs-md); margin: 0.5rem 0 0.25rem; }
.st-agg-nome { font-weight: 700; font-size: var(--st-fs-md); margin: 0 0 0.5rem; }
.st-aggiudicatario { padding: 1rem 0; border-bottom: 1px solid var(--st-bordo); }
.st-aggiudicatario:last-child { border-bottom: 0; }
.st-corr-tit { font-size: var(--st-fs-sm); font-weight: 700; color: var(--st-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 1.25rem 0 0.6rem; }

.st-corr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.st-corr-item { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0; border-bottom: 1px solid var(--st-bordo); }
.st-corr-item:last-child { border-bottom: 0; }
.st-corr-item a { text-decoration: none; font-weight: 600; color: var(--st-blu); overflow-wrap: anywhere; }
.st-corr-item a:hover { text-decoration: underline; }
.st-corr-meta { font-size: var(--st-fs-sm); color: var(--st-muted); overflow-wrap: anywhere; }

.st-gara-side .st-blocco:first-child { margin-top: 0; }
.st-cta-box {
    margin-top: 2rem;
    background: linear-gradient(160deg, #f0f6f3, var(--st-bg-alt));
    border: 1px solid var(--st-bordo); border-left: 4px solid var(--st-accent);
    border-radius: var(--st-radius); padding: 1.4rem; text-align: center;
    box-shadow: var(--st-ombra);
}
.st-cta-box p { margin-top: 0; }

.st-fonte {
    margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--st-bordo);
    font-size: var(--st-fs-sm); color: var(--st-muted);
}

/* ============================================================
   12. Statistiche denormalizzate (S3/S4)
   ============================================================ */
.st-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem;
    margin: 1.5rem 0 0.5rem;
}
.st-stat {
    background: var(--st-bg); border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius); padding: 1rem 1.1rem;
    position: relative;
}
.st-stat::before {
    content: ""; position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem;
    width: 3px; border-radius: 3px; background: var(--st-accent);
}
.st-stat-num { display: block; font-size: clamp(1.15rem, 1rem + 1.1vw, 1.35rem); font-weight: 800; color: var(--st-blu); letter-spacing: -0.01em; padding-left: 0.5rem; overflow-wrap: anywhere; }
.st-stat-eti { display: block; font-size: var(--st-fs-xs); color: var(--st-muted); margin-top: 0.25rem; padding-left: 0.5rem; }

/* Distribuzione settore/regione (chip) */
.st-griglia-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.st-chip-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.st-chip {
    background: #fff; border: 1px solid var(--st-bordo); border-radius: 999px;
    padding: 0.3rem 0.8rem; font-size: var(--st-fs-sm); color: var(--st-testo);
}
.st-chip span { font-weight: 700; color: var(--st-blu); margin-left: 0.25rem; }

/* Blocco fatturatoitalia (§8) */
.st-fi-box {
    background: linear-gradient(165deg, #eef4f9, var(--st-bg-alt));
    border: 1px solid var(--st-bordo); border-left: 4px solid var(--st-blu-chiaro);
    border-radius: var(--st-radius); padding: 1.4rem; margin-top: 2rem;
    box-shadow: var(--st-ombra);
}
.st-fi-box h2 { border: 0; margin-top: 0; padding-bottom: 0; }
.st-fi-box p:first-of-type { margin-top: 0; }
.st-fi-box .st-btn { margin-top: 0.75rem; }
.st-fi-links { list-style: none; margin: 0.85rem 0 0; padding: 0; }
.st-fi-links li { margin: 0.5rem 0; padding-left: 1.2rem; position: relative; line-height: 1.45; }
.st-fi-links li::before { content: "\203A"; position: absolute; left: 0.2rem; top: -0.02em; color: var(--st-blu-chiaro); font-weight: 700; }
.st-fi-links a { color: var(--st-blu-chiaro); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31, 86, 135, .35); text-underline-offset: 0.16em; overflow-wrap: anywhere; }
.st-fi-links a:hover { text-decoration-color: currentColor; }
.st-fi-box .st-btn-primario { background: var(--st-blu-chiaro); box-shadow: 0 1px 2px rgba(18, 58, 94, .25); }
.st-fi-box .st-btn-primario:hover { background: var(--st-blu); box-shadow: var(--st-ombra-media); }
.st-fi-nota { margin-bottom: 0; margin-top: 0.85rem; font-size: var(--st-fs-xs); }

/* ============================================================
   13. Lead / quick answer (GEO/AEO)
   ============================================================ */
.st-lead {
    font-size: var(--st-fs-md); line-height: 1.65; max-width: var(--st-measure);
    margin: 0.75rem 0 0.5rem; color: var(--st-testo);
}

/* ============================================================
   14. Form di ricerca (home + /cerca)
   ============================================================ */
.st-cerca-form { margin: 1.75rem 0 0.5rem; }
.st-hero .st-cerca-form { max-width: 44rem; }
.st-cerca-riga { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.st-cerca-input {
    flex: 1 1 16rem; min-width: 0; padding: 0.8rem 1rem; font-size: 1rem;
    border: 1px solid var(--st-bordo); border-radius: var(--st-radius-sm);
    background: #fff; color: var(--st-testo); box-shadow: var(--st-ombra);
}
.st-cerca-input:focus { outline: 2px solid var(--st-accent); outline-offset: 1px; border-color: var(--st-accent); }
.st-cerca-tipo {
    flex: 0 0 auto; padding: 0.8rem 0.75rem; font-size: 1rem;
    border: 1px solid var(--st-bordo); border-radius: var(--st-radius-sm);
    background: #fff; color: var(--st-testo); box-shadow: var(--st-ombra); cursor: pointer;
}
.st-cerca-tipo:focus { outline: 2px solid var(--st-accent); outline-offset: 1px; border-color: var(--st-accent); }
.st-cerca-form .st-btn { flex: 0 0 auto; }
.st-cerca-filtri { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.85rem; }
.st-cerca-campo { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--st-fs-sm); color: var(--st-muted); }
.st-hero .st-cerca-campo { color: #d8e6f2; }
.st-cerca-campo select, .st-cerca-campo input {
    padding: 0.55rem 0.7rem; font-size: 0.95rem; border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius-sm); background: #fff; color: var(--st-testo); min-width: 12rem;
}

/* ============================================================
   15. Risultati ricerca
   ============================================================ */
.st-cerca-riepilogo { margin-bottom: 1.75rem; }
.st-cerca-gruppo { margin-bottom: 2.5rem; }
.st-cerca-gruppo h2 {
    font-size: var(--st-fs-lg); color: var(--st-blu);
    border-bottom: 2px solid var(--st-bordo); padding-bottom: 0.5rem;
}
.st-cerca-intro { margin-top: 0.5rem; }

/* ============================================================
   16. Footer
   ============================================================ */
.st-footer { background: var(--st-blu-scuro); color: #cdd9e4; margin-top: var(--st-sp-7); padding: var(--st-sp-7) 0 1.75rem; }
.st-footer a { color: #dbe7f1; text-decoration: none; }
.st-footer a:hover { color: #fff; text-decoration: underline; }
.st-footer-in { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.st-footer strong { color: #fff; font-size: 1.05rem; }
.st-footer .st-muted { color: #9db0c1; }
.st-footer-nav { display: grid; gap: 0.55rem; font-size: var(--st-fs-sm); }
.st-copy { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.st-copy small { color: #9db0c1; }

/* ============================================================
   17. Indici / elenchi
   ============================================================ */
/* Le pagine indice: la lista è una scheda bianca di righe sul canvas grigio. */
.st-indice { background: var(--st-bg-alt); }
.st-elenco {
    list-style: none; margin: 1.5rem 0; padding: 0.4rem 1.4rem;
    background: var(--st-bg); border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius); box-shadow: var(--st-ombra);
}
.st-elenco-item {
    padding: 1rem 0; border-top: 1px solid var(--st-bordo);
}
.st-elenco-item:first-child { border-top: none; }
.st-elenco-tit { font-weight: 600; text-decoration: none; color: var(--st-blu); font-size: var(--st-fs-md); line-height: 1.35; overflow-wrap: anywhere; }
.st-elenco-tit:hover { text-decoration: underline; }
.st-elenco-meta {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem;
    margin-top: 0.4rem; font-size: var(--st-fs-sm); color: var(--st-testo);
}
.st-elenco-meta > span { position: relative; }
.st-elenco-meta > span + span::before {
    content: ""; position: absolute; left: -0.5rem; top: 50%;
    width: 3px; height: 3px; border-radius: 50%; background: var(--st-bordo-forte); transform: translateY(-50%);
}
.st-elenco-meta .st-muted { color: var(--st-muted); }

/* ============================================================
   18. Paginazione
   ============================================================ */
.st-paginazione {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 2rem 0; flex-wrap: wrap;
}

/* ============================================================
   19. Nuvola di tag (esplora per settore/regione)
   ============================================================ */
.st-tag-cloud { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.st-tag-link {
    display: inline-block; padding: 0.45rem 0.9rem;
    background: #fff; border: 1px solid var(--st-bordo);
    border-radius: 999px; text-decoration: none; font-size: var(--st-fs-sm);
    color: var(--st-blu); font-weight: 600;
    transition: background var(--st-trans), color var(--st-trans), border-color var(--st-trans);
}
.st-tag-link:hover { background: var(--st-blu); color: #fff; border-color: var(--st-blu); }

/* ============================================================
   20. Indice appalti: colonne per settore + scorciatoie
   ============================================================ */
.st-hub-per-settore { display: grid; gap: 1.25rem; margin: 1rem 0 2rem; }
.st-indice-scorciatoie { margin-top: 1.5rem; }
.st-indice-scorciatoie .st-card { text-decoration: none; color: inherit; display: block; }
.st-indice-scorciatoie .st-card:hover { border-color: var(--st-accent); box-shadow: var(--st-ombra-media); transform: translateY(-2px); }

/* Tag tipo contratto sulla scheda gara */
.st-tag-tipo { background: var(--st-accent); color: #fff; }

/* ============================================================
   21. Quick Answer "In sintesi" (GEO/AEO)
   ============================================================ */
.st-sintesi {
    background: linear-gradient(160deg, #f0f6f3, var(--st-bg-alt));
    border: 1px solid var(--st-bordo);
    border-left: 4px solid var(--st-accent);
    border-radius: var(--st-radius);
    padding: 1.1rem 1.3rem;
    margin: 1.25rem 0 1.75rem;
    box-shadow: var(--st-ombra);
    /* larghezza piena come i blocchi/schede successivi (niente max-width) */
}
.st-sintesi p { margin: 0; line-height: 1.6; }
.st-sintesi-eti { font-weight: 700; color: var(--st-accent-scuro); }

/* Definition lead: frase-definizione a inizio sezione */
.st-def { color: var(--st-muted); margin: 0.15rem 0 1rem; max-width: var(--st-measure); }

/* Nota accordo quadro / procedura multi-lotto: distingue il valore del singolo
   lotto dal tetto complessivo della procedura (rigore informativo). */
.st-nota-quadro {
    margin: 1rem 0 0; padding: 0.85rem 1.1rem; font-size: var(--st-fs-sm);
    line-height: 1.55; color: #6a4b16;
    background: #fdf6e3; border: 1px solid #efdca6; border-left: 4px solid #d9a441;
    border-radius: var(--st-radius-sm); max-width: var(--st-measure);
}

/* Grafico "appalti per anno": barre orizzontali in CSS puro (niente JS) */
.st-anni { list-style: none; margin: 1rem 0 0.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.st-anno-riga { display: grid; grid-template-columns: 3.2rem 1fr; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; }
.st-anno-eti { grid-row: 1 / 3; font-weight: 700; color: var(--st-blu); font-variant-numeric: tabular-nums; }
.st-anno-barra { grid-column: 2; grid-row: 1; background: var(--st-bg-soft); border: 1px solid var(--st-bordo); border-radius: 999px; height: 1.25rem; overflow: hidden; }
.st-anno-fill { display: block; height: 100%; min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--st-blu-chiaro), var(--st-accent)); }
.st-anno-val { grid-column: 2; grid-row: 2; margin-top: 0.15rem; font-size: var(--st-fs-sm); color: var(--st-muted); }
.st-anno-tot { margin-top: 0.85rem; }

/* ============================================================
   22. FAQ (GEO/AEO)
   ============================================================ */
.st-faq-item {
    border: 1px solid var(--st-bordo);
    border-radius: var(--st-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    background: #fff;
    scroll-margin-top: 5rem;
    transition: border-color var(--st-trans), box-shadow var(--st-trans);
}
.st-faq-item:hover { border-color: var(--st-bordo-forte); }
.st-faq-item[open] { box-shadow: var(--st-ombra); border-color: var(--st-bordo-forte); }
.st-faq-item summary {
    font-weight: 600;
    color: var(--st-blu);
    cursor: pointer;
    list-style-position: inside;
}
.st-faq-item summary:hover { color: var(--st-blu-chiaro); }
.st-faq-item[open] summary { margin-bottom: 0.5rem; }
.st-faq-item p { margin: 0; color: var(--st-testo); }

/* Freshness: riga fonte con <time> */
.st-fonte time { font-weight: 600; color: var(--st-testo); }

/* Citazione normativa (fattuale) */
.st-norma {
    font-size: var(--st-fs-sm);
    color: var(--st-muted);
    border-top: 1px solid var(--st-bordo);
    margin-top: 1.5rem;
    padding-top: 0.9rem;
}

/* ============================================================
   23. Breakpoint tablet/desktop
   ============================================================ */
@media (min-width: 34rem) {
    .st-scheda > div { grid-template-columns: 11rem 1fr; }
    .st-scheda-inline > div { grid-template-columns: 13rem 1fr; }
}
@media (min-width: 40rem) {
    .st-container { padding: 0 1.5rem; }
    .st-griglia-3 { grid-template-columns: repeat(3, 1fr); }
    .st-card-list { grid-template-columns: repeat(2, 1fr); }
    .st-griglia-prezzi { grid-template-columns: repeat(2, 1fr); }
    .st-stats { grid-template-columns: repeat(4, 1fr); }
    .st-griglia-2 { grid-template-columns: repeat(2, 1fr); }
    .st-hub-per-settore { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 60rem) {
    .st-card-list { grid-template-columns: repeat(3, 1fr); }
    .st-griglia-prezzi { grid-template-columns: repeat(3, 1fr); }
    .st-gara-corpo { grid-template-columns: 1fr 21rem; }
}