/* ═══════════════════════════════════════════════════════════════════════════════════════════
   VEXILLA — foglio di stile del sito.

   I colori NON sono inventati qui: sono quelli dell'emblema (Vexilla-Loghi/*.svg) e quelli del
   velo di caricamento del gioco (Assets/WebGLTemplates/Vexilla/index.html). Chi passa dal sito
   al gioco deve vedere la stessa cosa, non due prodotti diversi con lo stesso nome.

   Nessun font esterno: la pila serif e' la stessa gia' usata dal velo di caricamento. Un font
   scaricato sarebbe una richiesta di rete in piu' prima del primo pixel, per una differenza che
   in questo stile nessuno noterebbe.
   ═════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --notte:        #0e0b09;
  --pece:         #12100a;
  --pietra:       #1a1611;
  --pietra-alta:  #241e16;
  --oro:          #c8a24a;
  --oro-chiaro:   #f5c742;
  --oro-pallido:  #fce79b;
  --crema:        #e8dcc8;
  --crema-fioca:  rgba(232, 220, 200, 0.62);
  --porpora:      #7a1e16;
  --porpora-viva: #9b2e22;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;

  --lato:   clamp(1.25rem, 5vw, 4.5rem);
  --misura: 1180px;
}

* { box-sizing: border-box; }

html { 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(--notte);
  color: var(--crema);
  font-family: var(--serif);
  font-size: clamp(1rem, .96rem + .22vw, 1.12rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--oro-chiaro); text-decoration-color: rgba(200,162,74,.4); text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--oro-chiaro); }

h1, h2, h3 { font-weight: 600; line-height: 1.16; margin: 0; }

.dentro { width: 100%; max-width: var(--misura); margin-inline: auto; padding-inline: var(--lato); }

/* Occhiello: la righetta in maiuscoletto spaziato sopra ai titoli. Ricorre in tutto il sito. */
.occhiello {
  margin: 0 0 .9rem;
  font-size: .74rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--oro);
  opacity: .85;
}

/* ── BARRA ────────────────────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 11, 9, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(200, 162, 74, .16);
}
.barra > .dentro {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 68px;
}
.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.marchio svg { width: 26px; height: 26px; display: block; }
.marchio b {
  font-weight: 600; font-size: 1.02rem;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--oro);
}
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.barra nav a { color: var(--crema-fioca); text-decoration: none; font-size: .93rem; letter-spacing: .04em; }
.barra nav a:hover { color: var(--crema); }
@media (max-width: 760px) { .barra nav a.solo-largo { display: none; } }

/* ── BOTTONI ──────────────────────────────────────────────────────────────────────────── */
.bottone {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .78rem 1.7rem;
  border: 1px solid var(--oro);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--oro-chiaro), #b8862a);
  color: #1a1206;
  font-family: var(--serif);
  font-size: .92rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; text-indent: .18em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bottone:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(200,162,74,.22); }
.bottone.fantasma {
  background: transparent; color: var(--oro-chiaro);
  border-color: rgba(200,162,74,.45);
}
.bottone.fantasma:hover { border-color: var(--oro); box-shadow: none; }
.bottone.piccolo { padding: .5rem 1.05rem; font-size: .76rem; letter-spacing: .14em; text-indent: .14em; }

/* ── APERTURA ─────────────────────────────────────────────────────────────────────────── */
.apertura {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  /* Il fondo: una luce calda in alto al centro, come il medaglione dell'emblema. */
  background:
    radial-gradient(120% 90% at 50% -10%, #2a2016 0%, #171009 52%, var(--notte) 100%);
}
/* Reticolo della mappa, appena percepibile: e' il mondo a caselle, non un motivo decorativo. */
.apertura::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,162,74,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,162,74,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(78% 62% at 50% 34%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(78% 62% at 50% 34%, #000 0%, transparent 76%);
  pointer-events: none;
}
.apertura > .dentro { position: relative; text-align: center; }

.emblema { width: clamp(112px, 15vw, 158px); height: auto; margin: 0 auto 1.6rem; display: block; }

.apertura h1 {
  font-size: clamp(2.9rem, 9vw, 5.6rem);
  letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--oro-pallido) 0%, var(--oro-chiaro) 44%, #be861f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.motto {
  margin: 1.1rem auto 0; max-width: 34ch;
  font-size: clamp(1.12rem, 2.4vw, 1.45rem);
  color: var(--crema); opacity: .92;
}
.sottotesto { margin: 1.15rem auto 0; max-width: 56ch; color: var(--crema-fioca); }
.azioni { margin-top: 2.2rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.stemma-prova {
  display: inline-block; margin-top: 1.8rem;
  padding: .3rem .95rem;
  border: 1px solid rgba(200,162,74,.3); border-radius: 999px;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro); opacity: .82;
}

/* ── NUMERI ───────────────────────────────────────────────────────────────────────────── */
.numeri {
  border-block: 1px solid rgba(200,162,74,.16);
  background: var(--pece);
}
.numeri > .dentro {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 2.2rem;
}
.numeri > .dentro > div { text-align: center; }
.numeri > .dentro > div + div { border-left: 1px solid rgba(200,162,74,.14); }
.numeri b {
  display: block;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 600;
  color: var(--oro-chiaro); letter-spacing: .02em;
}
.numeri span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--crema-fioca); }
@media (max-width: 720px) {
  .numeri > .dentro { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 0; }
  .numeri > .dentro > div:nth-child(odd) { border-left: 0; }
  .numeri > .dentro > div:nth-child(-n+2) { padding-bottom: 1.2rem; }
}

/* ── SEZIONI ──────────────────────────────────────────────────────────────────────────── */
.sezione { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sezione.scura { background: var(--pece); }
.testata { max-width: 62ch; margin-bottom: 3rem; }
.testata h2 { font-size: clamp(1.85rem, 4.2vw, 2.7rem); letter-spacing: .01em; }
.testata p { margin: 1rem 0 0; color: var(--crema-fioca); }

/* ── PILASTRI ─────────────────────────────────────────────────────────────────────────── */
.pilastri { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1px;
            background: rgba(200,162,74,.16); border: 1px solid rgba(200,162,74,.16); }
.pilastro { background: var(--notte); padding: 2rem 1.8rem; }
.sezione.scura .pilastro { background: var(--pece); }
.pilastro svg { width: 34px; height: 34px; color: var(--oro); margin-bottom: 1.1rem; display: block; }
.pilastro h3 { font-size: 1.22rem; color: var(--crema); margin-bottom: .55rem; }
.pilastro p { margin: 0; color: var(--crema-fioca); font-size: .96rem; }

/* ── PASSI ────────────────────────────────────────────────────────────────────────────── */
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.4rem; }
.passo { position: relative; padding-top: 1.4rem; border-top: 1px solid rgba(200,162,74,.28); }
.passo b {
  position: absolute; top: -.85rem; left: 0;
  background: var(--notte); padding-right: .7rem;
  font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--oro);
}
.sezione.scura .passo b { background: var(--pece); }
.passo h3 { font-size: 1.16rem; margin-bottom: .5rem; }
.passo p { margin: 0; color: var(--crema-fioca); font-size: .96rem; }

/* ── CHIUSURA ─────────────────────────────────────────────────────────────────────────── */
.chiusura {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: radial-gradient(90% 130% at 50% 120%, #2a2016 0%, var(--notte) 62%);
  border-top: 1px solid rgba(200,162,74,.16);
}
.chiusura h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.chiusura p { margin: 1.1rem auto 2rem; max-width: 50ch; color: var(--crema-fioca); }

/* ── PIEDE ────────────────────────────────────────────────────────────────────────────── */
.piede { border-top: 1px solid rgba(200,162,74,.14); background: var(--pece); padding-block: 2.4rem; }
.piede > .dentro { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.piede small { color: var(--crema-fioca); font-size: .84rem; }
.piede nav { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.piede nav a { color: var(--crema-fioca); text-decoration: none; font-size: .84rem; }
.piede nav a:hover { color: var(--oro-chiaro); }

/* ── Notizie e avviso di manutenzione (li accende vex-sito.js) ─────────────────────────── */
.nascosta { display: none !important; }

.nastro-avviso {
  background: linear-gradient(90deg, var(--porpora), var(--porpora-viva));
  color: #f6e6d8; text-align: center;
  padding: .65rem var(--lato); font-size: .9rem; letter-spacing: .02em;
  border-bottom: 1px solid rgba(200,162,74,.3);
}

.elenco-notizie { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.2rem; }
.notizia { border-top: 1px solid rgba(200,162,74,.28); padding-top: 1.1rem; }
.notizia .quando-notizia {
  margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro); opacity: .8;
}
.notizia h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.notizia p { margin: 0; color: var(--crema-fioca); font-size: .95rem; }

/* ── Pagine di documento (termini, privacy) e di atterraggio (conferma, recupera) ───────── */
.documento { padding-top: 7rem; }
.documento .dentro.stretto { max-width: 72ch; }
.documento .centrato { text-align: center; }
.documento h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: .3rem 0 .4rem; }
.documento h2 { font-size: 1.18rem; margin: 2.4rem 0 .7rem; color: var(--oro); }
.documento p, .documento li { color: var(--crema-fioca); line-height: 1.75; }
.documento ul { margin: 0 0 1rem 1.1rem; }
.documento li { margin-bottom: .4rem; }
.fioco { color: var(--crema-fioca); opacity: .7; }

.tabella-dati { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .93rem; }
.tabella-dati th, .tabella-dati td {
  text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgba(200,162,74,.18);
  color: var(--crema-fioca); vertical-align: top;
}
.tabella-dati th { color: var(--oro); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }

/* Dichiarata bozza IN PAGINA: un documento legale che finge di essere definitivo mentre non lo
   e' rivisto e' peggio di uno che lo dice. */
.nota-bozza {
  margin-top: 2.6rem; padding: .9rem 1.1rem; font-size: .86rem;
  border-left: 2px solid var(--oro); background: rgba(200,162,74,.06); opacity: .85;
}

.campo-web { text-align: left; margin: 0 auto 1rem; max-width: 34ch; }
.campo-web label { display: block; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oro); margin-bottom: .35rem; }
.campo-web input {
  width: 100%; padding: .7rem .85rem; background: rgba(0,0,0,.35);
  border: 1px solid rgba(200,162,74,.3); border-radius: 2px; color: var(--crema);
  font-family: inherit; font-size: 1rem;
}
.campo-web input:focus { outline: none; border-color: var(--oro); }