/* =========================================================================
   Europa Building — sistema visivo
   Colori presi dal marchio: indaco profondo e arancio mattone.
   Due temi, un solo insieme di variabili.
   ========================================================================= */

:root {
  /* superfici */
  --sfondo: #F7F5F2;
  --sfondo-alt: #EDE9E4;
  --carta: #FFFFFF;
  --carta-alt: #FAF8F5;
  --bordo: #DFD9D1;
  --bordo-forte: #C6BDB1;

  /* testo */
  --testo: #16143A;
  --testo-medio: #4B4970;
  --testo-tenue: #6F6D8C;
  --su-scuro: #F2F0FA;

  /* identità */
  --indaco: #141979;
  --indaco-chiaro: #3B2FB0;
  --indaco-tenue: #E8E7F7;
  /* Fondo delle fasce scure: è un colore di sfondo, non di testo, e cambia
     con il tema in modo indipendente da --indaco. */
  --fondo-forte: #141979;
  --accento: #E0250F;
  --accento-scuro: #B31C08;
  --accento-tenue: #FCE9E2;
  --ambra: #FF8400;

  /* stati */
  --ok: #1C6B4A;
  --ok-tenue: #E1F1E9;
  --attenzione: #8A5A10;

  --ombra-s: 0 1px 2px rgba(22, 20, 58, .06), 0 2px 6px rgba(22, 20, 58, .04);
  --ombra-m: 0 2px 6px rgba(22, 20, 58, .06), 0 12px 28px rgba(22, 20, 58, .09);
  --ombra-l: 0 8px 20px rgba(22, 20, 58, .10), 0 28px 64px rgba(22, 20, 58, .14);

  --raggio: 14px;
  --raggio-s: 8px;
  --raggio-l: 22px;
  --colonna: 1200px;
  --testo-colonna: 66ch;

  --corpo: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: var(--corpo);

  color-scheme: light;
}

html[data-tema="scuro"] {
  --sfondo: #0D0B24;
  --sfondo-alt: #13103A;
  --carta: #171442;
  --carta-alt: #1D1950;
  --bordo: #2C2769;
  --bordo-forte: #413A8C;

  --testo: #EFEDFA;
  --testo-medio: #B9B4DC;
  --testo-tenue: #948FC0;

  --indaco: #8C79F0;
  --indaco-chiaro: #A995FF;
  --indaco-tenue: #211C57;
  --fondo-forte: #1D1950;
  --accento: #FF6A3D;
  --accento-scuro: #FF8A63;
  --accento-tenue: #341B18;
  --ambra: #FFB04A;

  --ok: #55C79A;
  --ok-tenue: #143B2E;

  --ombra-s: 0 1px 2px rgba(0, 0, 0, .45);
  --ombra-m: 0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .5);
  --ombra-l: 0 10px 24px rgba(0, 0, 0, .5), 0 30px 70px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema="chiaro"]) {
    --sfondo: #0D0B24; --sfondo-alt: #13103A; --carta: #171442; --carta-alt: #1D1950;
    --bordo: #2C2769; --bordo-forte: #413A8C;
    --testo: #EFEDFA; --testo-medio: #B9B4DC; --testo-tenue: #948FC0;
    --indaco: #8C79F0; --indaco-chiaro: #A995FF; --indaco-tenue: #211C57; --fondo-forte: #1D1950;
    --accento: #FF6A3D; --accento-scuro: #FF8A63; --accento-tenue: #341B18; --ambra: #FFB04A;
    --ok: #55C79A; --ok-tenue: #143B2E;
    --ombra-s: 0 1px 2px rgba(0,0,0,.45);
    --ombra-m: 0 2px 6px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.5);
    --ombra-l: 0 10px 24px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; border-radius: 4px; }

.salta {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--carta); color: var(--testo); padding: .7rem 1rem; border-radius: 0 0 var(--raggio-s) 0;
}
.salta:focus { left: 0; }

/* ---------- impalcatura ---------- */

.contenitore { width: min(100% - 2.5rem, var(--colonna)); margin-inline: auto; }
.stretto { width: min(100% - 2.5rem, 800px); margin-inline: auto; }

.sezione { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sezione-alt { background: var(--sfondo-alt); }
.sezione-scura { background: var(--fondo-forte); color: var(--su-scuro); }

.occhiello {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accento); margin-bottom: .9rem;
}
.occhiello::before { content: ""; width: 26px; height: 2px; background: var(--accento); }

.guida { color: var(--testo-medio); max-width: var(--testo-colonna); font-size: 1.05rem; }
.sezione-scura .guida { color: color-mix(in srgb, var(--su-scuro) 82%, transparent); }

.intestazione-sezione { margin-bottom: clamp(2rem, 4vw, 3rem); }

.piccolo { font-size: .88rem; }
.tenue { color: var(--testo-tenue); }
.mt1 { margin-top: .75rem; } .mt2 { margin-top: 1.5rem; } .mt3 { margin-top: 2.5rem; }

/* ---------- bottoni ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 650; font-size: .97rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primario { background: var(--accento); color: #fff; box-shadow: var(--ombra-s); }
.btn-primario:hover { background: var(--accento-scuro); box-shadow: var(--ombra-m); }

.btn-secondario { background: transparent; color: var(--testo); border-color: var(--bordo-forte); }
.btn-secondario:hover { border-color: var(--testo); background: var(--carta); }

.btn-chiaro { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-chiaro:hover { background: rgba(255,255,255,.22); border-color: #fff; }

.btn-piccolo { padding: .6rem 1.05rem; font-size: .88rem; }

/* ---------- testata ---------- */

.testata {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--sfondo) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.testata-riga { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }

.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; color: var(--indaco); }
html[data-tema="scuro"] .marchio { color: var(--su-scuro); }
@media (prefers-color-scheme: dark) { html:not([data-tema="chiaro"]) .marchio { color: var(--su-scuro); } }
.marchio-immagine { height: 44px; width: auto; }
@media (max-width: 560px) { .marchio-immagine { height: 36px; } }

/* Due versioni del marchio: quella a colori sul chiaro, quella schiarita sullo
   scuro. Vale sia per il tema scelto a mano sia per quello di sistema. */
.marchio-chiaro { display: none; }
html[data-tema="scuro"] .marchio-colore { display: none; }
html[data-tema="scuro"] .marchio-chiaro { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="chiaro"]) .marchio-colore { display: none; }
  html:not([data-tema="chiaro"]) .marchio-chiaro { display: block; }
}
/* Nel piede il fondo è sempre scuro, qualunque sia il tema. */
.piede-marchio .marchio-colore { display: none; }
.piede-marchio .marchio-chiaro { display: block; }
.marchio-testo { display: flex; flex-direction: column; line-height: 1.05; }
.marchio-nome { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; color: var(--indaco); }
.marchio-nota { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-tenue); }

.nav { display: flex; gap: .3rem; }
.nav a {
  padding: .5rem .85rem; border-radius: 999px; text-decoration: none;
  font-size: .95rem; font-weight: 550; color: var(--testo-medio);
}
.nav a:hover { background: var(--carta); color: var(--testo); }
.nav a[aria-current="page"] { color: var(--accento); background: var(--accento-tenue); }

.azioni-testata { display: flex; align-items: center; gap: .5rem; }

.tema-bottone, .menu-bottone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px;
  border: 1.5px solid var(--bordo); background: transparent; color: var(--testo-medio); cursor: pointer;
}
.tema-bottone:hover, .menu-bottone:hover { border-color: var(--bordo-forte); color: var(--testo); }
.menu-bottone { display: none; }

html:not([data-tema="scuro"]) .luna { display: none; }
html[data-tema="scuro"] .sole { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-tema="chiaro"]) .sole { display: none; }
  html:not([data-tema="chiaro"]) .luna { display: inline; }
}

@media (max-width: 900px) {
  .menu-bottone { display: inline-flex; }
  .nav {
    position: absolute; inset: 74px 0 auto; flex-direction: column; gap: 0;
    background: var(--carta); border-bottom: 1px solid var(--bordo);
    padding: .5rem 1.25rem 1.25rem; box-shadow: var(--ombra-m);
    display: none;
  }
  .nav.aperto { display: flex; }
  .nav a { padding: .8rem .5rem; border-radius: var(--raggio-s); }
  .azioni-testata .btn { display: none; }
}

/* ---------- apertura ---------- */

.apertura { position: relative; isolation: isolate; color: #fff; }
.apertura-foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.apertura-foto img { width: 100%; height: 100%; object-fit: cover; }
.apertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,11,36,.72) 0%, rgba(13,11,36,.58) 45%, rgba(13,11,36,.88) 100%),
    linear-gradient(100deg, rgba(42,26,110,.55) 0%, rgba(42,26,110,0) 60%);
}
.apertura-corpo { padding: clamp(4.5rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 5.5rem); max-width: 800px; }

.marchietto {
  display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem .95rem; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(6px);
}
.marchietto .punto { width: 6px; height: 6px; border-radius: 999px; background: var(--ambra); }

.apertura h1 { margin: 1.1rem 0 .8rem; color: #fff; text-wrap: balance; }
.apertura .guida { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.apertura-azioni { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- nastro dei numeri ---------- */

.nastro { background: var(--fondo-forte); color: var(--su-scuro); }
.nastro-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.nastro-voce { padding: 1.9rem 1.6rem; border-right: 1px solid rgba(255,255,255,.14); }
.nastro-voce:last-child { border-right: 0; }
.nastro-valore {
  font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 800;
  letter-spacing: -.03em; color: #fff; line-height: 1;
}
.nastro-etichetta { font-weight: 650; margin-top: .5rem; font-size: .97rem; }
.nastro-nota { font-size: .84rem; color: rgba(255,255,255,.62); margin-top: .3rem; line-height: 1.45; }

@media (max-width: 700px) {
  .nastro-voce { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .nastro-voce:last-child { border-bottom: 0; }
}

/* ---------- due imprese ---------- */

.duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .coppia { grid-template-columns: 1fr; } }

.impresa {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.5rem 1.4rem; box-shadow: var(--ombra-s);
}
.impresa-nome { font-weight: 800; letter-spacing: -.015em; font-size: 1.08rem; margin-bottom: .15rem; }
.impresa-ruolo { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accento); font-weight: 700; }
.impresa p { color: var(--testo-medio); font-size: .95rem; margin-top: .8rem; }
.impresa-dato { font-size: .82rem; color: var(--testo-tenue); margin-top: .9rem; border-top: 1px solid var(--bordo); padding-top: .7rem; }

.segno {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--indaco-tenue); color: var(--indaco); margin-bottom: 1rem;
}

/* ---------- servizi ---------- */

.griglia-servizi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }

.scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.6rem 1.5rem; box-shadow: var(--ombra-s);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra-m); border-color: var(--bordo-forte); }
.scheda h3 { margin-bottom: .4rem; }
.scheda p { color: var(--testo-medio); font-size: .95rem; }

.elenco-voci { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .42rem; }
.elenco-voci li { position: relative; padding-left: 1.35rem; font-size: .91rem; color: var(--testo-medio); }
.elenco-voci li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accento);
}

.ambito-titolo { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 1.3rem; }
.ambito-titolo h2 { margin: 0; }
.ambito-nota { font-size: .88rem; color: var(--testo-tenue); }

/* ---------- metodo ---------- */

.metodo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.5rem; counter-reset: fase; }
.fase { position: relative; padding-top: 2.6rem; }
.fase::before {
  counter-increment: fase; content: counter(fase, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: var(--accento);
  letter-spacing: .04em;
}
.fase::after {
  content: ""; position: absolute; top: 1.65rem; left: 0; right: 1.5rem; height: 2px;
  background: linear-gradient(90deg, var(--accento) 0 18%, var(--bordo) 18%);
}
.fase:last-child::after { right: 0; }
.fase h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.fase p { font-size: .93rem; color: var(--testo-medio); }
.sezione-scura .fase p { color: color-mix(in srgb, var(--su-scuro) 78%, transparent); }
.sezione-scura .fase::after { background: linear-gradient(90deg, var(--ambra) 0 18%, rgba(255,255,255,.22) 18%); }
.sezione-scura .fase::before { color: var(--ambra); }

/* ---------- realizzazioni ---------- */

.griglia-lavori { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }

.lavoro {
  display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden; box-shadow: var(--ombra-s); text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lavoro:hover { transform: translateY(-4px); box-shadow: var(--ombra-l); }
.lavoro-foto { aspect-ratio: 16 / 10; background: var(--sfondo-alt); overflow: hidden; }
.lavoro-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lavoro:hover .lavoro-foto img { transform: scale(1.04); }
.lavoro-vuota {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indaco-tenue), var(--sfondo-alt));
  color: var(--indaco); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.lavoro-corpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.lavoro-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .8rem; color: var(--testo-tenue); }
.lavoro h3 { margin: 0; font-size: 1.22rem; }
.lavoro p { font-size: .94rem; color: var(--testo-medio); margin: 0; }

.pillola {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--indaco-tenue); color: var(--indaco);
}
.pillola-corso { background: var(--accento-tenue); color: var(--accento-scuro); }

/* scheda della singola realizzazione */
.lavoro-testata { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 850px) { .lavoro-testata { grid-template-columns: 1fr; } }

.dati-lavoro { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.dati-lavoro > li { display: grid; gap: .1rem; border-bottom: 1px solid var(--bordo); padding-bottom: .8rem; }
.dati-lavoro dt, .dati-lavoro .voce { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-tenue); }
.dati-lavoro .valore { font-weight: 650; }

.galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.galleria figure { margin: 0; }
.galleria img { border-radius: var(--raggio-s); border: 1px solid var(--bordo); }
.galleria figcaption { font-size: .84rem; color: var(--testo-tenue); margin-top: .45rem; }

/* ---------- domande ---------- */

.domande { display: grid; gap: .7rem; max-width: 880px; }
.domanda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  padding: 1.05rem 1.2rem;
}
.domanda[open] { border-color: var(--bordo-forte); box-shadow: var(--ombra-s); }
.domanda summary {
  cursor: pointer; font-weight: 650; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: "+"; font-size: 1.3rem; line-height: 1; color: var(--accento); flex: none; font-weight: 400;
}
.domanda[open] summary::after { content: "–"; }
.domanda p { margin-top: .8rem; color: var(--testo-medio); font-size: .96rem; }

/* ---------- fascia di richiamo ---------- */

.richiamo {
  background: var(--fondo-forte); color: var(--su-scuro);
  border-radius: var(--raggio-l); padding: clamp(2.2rem, 5vw, 3.4rem);
  display: grid; grid-template-columns: 1.5fr auto; gap: 2rem; align-items: center;
  background-image: radial-gradient(circle at 88% 12%, rgba(240,146,28,.28), transparent 45%);
}
.richiamo h2 { color: #fff; margin-bottom: .5rem; }
.richiamo p { color: rgba(255,255,255,.82); max-width: 52ch; }
@media (max-width: 820px) { .richiamo { grid-template-columns: 1fr; } }

/* ---------- modulo ---------- */

.modulo { display: grid; gap: 1.1rem; }
.modulo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .modulo-riga { grid-template-columns: 1fr; } }

.campo-blocco { display: grid; gap: .35rem; }
.campo-blocco label { font-size: .88rem; font-weight: 650; }

.campo {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: .97rem;
  background: var(--carta); color: var(--testo);
  border: 1.5px solid var(--bordo); border-radius: var(--raggio-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--testo-tenue) 50%), linear-gradient(135deg, var(--testo-tenue) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
textarea.campo { resize: vertical; min-height: 130px; }

.consenso { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--testo-medio); }
.consenso input { margin-top: .28rem; width: 18px; height: 18px; accent-color: var(--accento); flex: none; }

.errore { color: var(--accento-scuro); font-size: .85rem; font-weight: 600; }

.avviso { padding: .95rem 1.15rem; border-radius: var(--raggio-s); border: 1px solid var(--bordo); background: var(--carta); font-size: .95rem; }
.avviso-ok { background: var(--ok-tenue); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); font-weight: 600; }
.avviso-errore { background: var(--accento-tenue); border-color: color-mix(in srgb, var(--accento) 35%, transparent); color: var(--accento-scuro); }

/* ---------- recapiti ---------- */

.recapiti { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.recapito { display: flex; gap: .9rem; align-items: flex-start; }
.recapito .segno { width: 40px; height: 40px; margin: 0; flex: none; border-radius: 10px; }
.recapito .voce { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-tenue); }
.recapito .valore { font-weight: 650; }
.recapito a { text-decoration: none; }
.recapito a:hover { color: var(--accento); }

/* ---------- piede ---------- */

.piede { background: var(--fondo-forte); color: rgba(255,255,255,.78); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.piede-griglia { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 900px) { .piede-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .piede-griglia { grid-template-columns: 1fr; } }

.piede h4 { color: #fff; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .9rem; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.piede a { text-decoration: none; }
.piede a:hover { color: #fff; text-decoration: underline; }
.piede-marchio .marchio-immagine { height: 48px; width: auto; margin-bottom: .9rem; }
.piede-basso {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: rgba(255,255,255,.6);
}

.social { display: flex; gap: .5rem; }
.social a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
}
.social a:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- pagine interne ---------- */

.testata-pagina { padding: clamp(2.8rem, 6vw, 4.5rem) 0 clamp(1.8rem, 4vw, 3rem); background: var(--sfondo-alt); border-bottom: 1px solid var(--bordo); }
.briciole { font-size: .84rem; color: var(--testo-tenue); margin-bottom: .8rem; }
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--accento); }

.prosa { max-width: var(--testo-colonna); }
.prosa p { color: var(--testo-medio); }
.prosa h3 { margin-top: 2rem; color: var(--testo); }

.lettere { display: grid; gap: .55rem; }
.lettera-riga { display: flex; gap: .9rem; align-items: flex-start; font-size: .93rem; color: var(--testo-medio); }
.lettera-segno {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
  background: var(--accento-tenue); color: var(--accento-scuro); font-weight: 800; font-size: .9rem;
}

/* ---------- documenti ---------- */

.documento { display: flex; flex-direction: column; gap: .45rem; text-decoration: none; color: inherit; }
.documento-tipo {
  align-self: flex-start; padding: .28rem .6rem; border-radius: var(--raggio-s);
  background: var(--indaco-tenue); color: var(--indaco);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
}
.documento h3 { margin: .3rem 0 0; font-size: 1.12rem; }
.documento-peso {
  margin-top: auto; padding-top: .7rem; font-size: .85rem; font-weight: 650; color: var(--accento);
}
.documento:hover .documento-peso { text-decoration: underline; }

/* ---------- notizie ---------- */

.griglia-notizie { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.3rem; }

.notizia {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-s); transition: transform .18s ease, box-shadow .18s ease;
}
.notizia:hover { transform: translateY(-3px); box-shadow: var(--ombra-m); }
.notizia-foto { aspect-ratio: 16 / 9; background: var(--sfondo-alt); overflow: hidden; }
.notizia-foto img { width: 100%; height: 100%; object-fit: cover; }
.notizia-corpo { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.notizia h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.notizia h3 a { text-decoration: none; }
.notizia h3 a:hover { color: var(--accento); }
.notizia p { margin: 0; font-size: .91rem; color: var(--testo-medio); }
.notizia-vai { margin-top: auto; padding-top: .5rem; font-size: .86rem; font-weight: 650; color: var(--accento); text-decoration: none; }
.notizia-vai:hover { text-decoration: underline; }

/* ---------- accesso riservato, discreto in fondo ---------- */

.accesso-riservato {
  margin-left: .9rem; opacity: .42; font-size: .76rem; text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.accesso-riservato:hover { opacity: 1; }

/* ---------- avviso nel retro del sito ---------- */

.allarme {
  padding: 1.1rem 1.25rem; border-radius: var(--raggio-s);
  background: var(--accento-tenue); border: 1.5px solid var(--accento);
  color: var(--testo); font-size: .93rem; line-height: 1.55;
}
.allarme strong { display: block; margin-bottom: .3rem; color: var(--accento-scuro); }

/* Il logout vuole un POST: il modulo deve sembrare un collegamento qualsiasi. */
.esci-riga { display: inline; }
.esci-riga button {
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; text-decoration: underline;
  text-underline-offset: .18em;
}
.esci-riga button:hover { color: var(--accento); }
.piede .esci-riga button { text-decoration: none; }
.piede .esci-riga button:hover { color: #fff; text-decoration: underline; }