/* Il sito di Gianea: la struttura del sito di prima, con il marchio nuovo.
   Colori, caratteri e spazi vengono da DESIGN.md: qui ci sono solo i loro valori. */

@font-face { font-family: "Jost"; src: url("fonti/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonti/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Il bianco caldo è la pagina, il blu scrive, l'oro firma. */
  --carta: #F6F5F1;
  --carta-scura: #EFEDE7;
  --bianco: #FFFFFF;
  --inchiostro: #0A1F4A;
  --inchiostro-sopra: #1E3F7E;
  --inchiostro-tenue: #5B6275;
  --filo: #E3E0D9;
  --filo-forte: #D3CEC3;
  --oro: #D4A537;          /* solo forme */
  --oro-chiaro: #F3E6C4;   /* fondo dei cartellini «nuovo» */
  --oro-scritta: #8E6B1E;  /* solo parole */
  --oro-su-oro: #7A5A14;   /* parole sul fondo oro chiaro: 5,1:1 */
  --blu-chiaro: #E3E8F2;   /* fondo dei cartellini «prezzo cambiato» */

  --carattere: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --largo: 1120px;
  --margine: clamp(24px, 5vw, 64px);

  --pillola: 999px;
  --raggio: 12px;
  --raggio-scheda: 16px;
  --ombra-immagine: 0 24px 48px -24px rgba(10, 31, 74, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 17px/1.55 var(--carattere);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* L'anello del fuoco è blu: l'oro sul bianco caldo non si vede abbastanza (2,1:1). */
:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 88px; }

.wrap { max-width: calc(var(--largo) + 2 * var(--margine)); margin: 0 auto; padding: 0 var(--margine); }

.salta {
  position: absolute; left: var(--s2); top: -100px; z-index: 50;
  background: var(--inchiostro); color: var(--carta); padding: var(--s1) var(--s2); border-radius: var(--pillola);
}
.salta:focus { top: var(--s2); }

/* Pulsanti a pillola: uno pieno e uno a bordo. */
.tasto {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--pillola); border: 1.5px solid var(--inchiostro);
  font: 500 16px/1 var(--carattere); letter-spacing: .01em;
  cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.tasto.pieno { background: var(--inchiostro); color: var(--carta); }
.tasto.pieno:hover { background: var(--inchiostro-sopra); border-color: var(--inchiostro-sopra); }
.tasto.bordo { background: transparent; color: var(--inchiostro); }
.tasto.bordo:hover { background: var(--inchiostro); color: var(--carta); }
.tasto.piccolo { min-height: 36px; padding: 7px 16px; font-size: 15px; }
.tasto.spento { border-color: var(--filo-forte); color: var(--inchiostro-tenue); cursor: default; }
.tasto.spento:hover { background: transparent; color: var(--inchiostro-tenue); }
.tasto:focus-visible { border-radius: var(--pillola); }
.azioni { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; }
.azioni.centro { justify-content: center; }

.link { font-weight: 500; }
.link:hover, .testo a:not(.tasto):hover { text-decoration: underline; text-underline-offset: 4px; }
.testo a:not(.tasto) { font-weight: 500; text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--carta);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.testata.scorsa { border-bottom-color: var(--filo); }
.testata-dentro {
  max-width: 1280px; margin: 0 auto; height: 72px;
  padding: 0 var(--margine);
  display: flex; align-items: center; gap: var(--s4);
}
.marchio img { height: 26px; width: auto; }
.voci { display: flex; gap: var(--s4); margin: 0 0 0 auto; list-style: none; padding: 0; }
.voci a { font-size: 15px; }
.voci a:hover { text-decoration: underline; text-underline-offset: 4px; }
.testata .tasto.bordo { margin-left: var(--s1); }
.apri-menu {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  font: 500 13px/1 var(--carattere); letter-spacing: .24em; text-transform: uppercase;
  color: var(--inchiostro); cursor: pointer;
}
.apri-menu span[aria-hidden] { display: grid; gap: 5px; }
.apri-menu span[aria-hidden] i { display: block; width: 18px; height: 1.5px; background: currentColor; }

/* Menu: l'indice per famiglie, a tutta pagina. */
.indice { position: fixed; inset: 0; z-index: 40; background: var(--carta); overflow-y: auto; padding-bottom: var(--s7); }
.indice[hidden] { display: none; }
.indice-testa { max-width: 1280px; margin: 0 auto; height: 72px; padding: 0 var(--margine); display: flex; align-items: center; justify-content: space-between; }
.indice-colonne {
  max-width: calc(var(--largo) + 2 * var(--margine)); margin: var(--s6) auto 0; padding: 0 var(--margine);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s5) var(--s4);
}
.indice h2 {
  margin-bottom: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--filo);
  font: 500 13px/1.2 var(--carattere); letter-spacing: .24em; text-transform: uppercase; color: var(--inchiostro-tenue);
}
.indice ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.indice a { font-size: 19px; }
.indice a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Scritte comuni */
.occhiello {
  font: 500 13px/1.2 var(--carattere); letter-spacing: .24em; text-transform: uppercase;
  color: var(--inchiostro-tenue); margin-bottom: var(--s2);
}
.oro {
  color: var(--oro-scritta);
  background: linear-gradient(var(--oro), var(--oro)) no-repeat 0 94% / 100% 2px;
  white-space: nowrap;
}
h2 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.01em; max-width: 22ch; }
h3 { font-size: 21px; line-height: 1.25; margin-bottom: var(--s1); }
.tenue { color: var(--inchiostro-tenue); }
.nota { font-size: 14px; color: var(--inchiostro-tenue); }

/* Apertura: il foglio a quadretti, come un file Excel, con poche celle accese. */
.apertura { position: relative; overflow: hidden; padding: clamp(56px, 8vh, 96px) 0 var(--s7); text-align: center; }
.quadretti {
  position: absolute; inset: 0 0 auto 0; height: 640px; pointer-events: none;
  background-image: linear-gradient(var(--filo) 1px, transparent 1px), linear-gradient(90deg, var(--filo) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 92%); mask-image: linear-gradient(180deg, #000 20%, transparent 92%);
}
.cella { position: absolute; width: 64px; height: 64px; pointer-events: none; }
.cella.oro-pieno { background: var(--oro); }
.cella.oro-tenue { background: var(--oro-chiaro); }
.cella.blu { background: var(--inchiostro); }
/* Le posizioni stanno qui e non nella pagina: il sito non accetta stili scritti dentro l'HTML. */
.cella.c1 { left: calc(50% - 512px); top: 128px; }
.cella.c2 { left: calc(50% - 448px); top: 128px; }
.cella.c3 { left: calc(50% + 448px); top: 256px; }
.cella.c4 { left: calc(50% + 384px); top: 256px; }
.apertura .wrap { position: relative; }
.apertura h1 {
  margin: 0 auto; max-width: 20ch;
  font-size: clamp(40px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -.01em;
}
.apertura .sottotitolo {
  margin: var(--s3) auto 0; max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--inchiostro-tenue);
}
.apertura .azioni { margin-top: var(--s4); }
.apertura .nota { margin-top: var(--s2); }

.vetrina { position: relative; max-width: 960px; margin: var(--s6) auto 0; }
.cornice {
  border-radius: var(--raggio); overflow: hidden; background: var(--bianco);
  box-shadow: var(--ombra-immagine), 0 0 0 1px var(--filo);
}
.cornice img { width: 100%; }
.vetrina figcaption { margin-top: var(--s4); text-align: right; }

/* Il listino del fornitore appoggiato sopra il programma: esempio inventato. */
.listino {
  background: var(--bianco); border-radius: 10px; overflow: hidden; text-align: left;
  font-size: 14px; font-variant-numeric: tabular-nums;
  box-shadow: var(--ombra-immagine), 0 0 0 1px var(--filo);
}
.vetrina .listino { position: absolute; left: -7%; bottom: -24px; width: 46%; transform: rotate(-2deg); }
.listino .testa-listino {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px;
  background: var(--carta-scura); border-bottom: 1px solid var(--filo); font-weight: 500; font-size: 13px;
}
.listino .testa-listino small { font-weight: 400; color: var(--inchiostro-tenue); }
.listino .riga {
  display: grid; grid-template-columns: 56px 1fr auto 112px; gap: 10px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--carta-scura);
}
.listino .riga:last-child { border-bottom: 0; }
.listino .cod { color: var(--inchiostro-tenue); font-size: 12px; }
.cartellino { justify-self: end; font: 500 12px/1 var(--carattere); padding: 4px 10px; border-radius: var(--pillola); white-space: nowrap; }
.cartellino.nuovo { background: var(--oro-chiaro); color: var(--oro-su-oro); }
.cartellino.prezzo { background: var(--blu-chiaro); color: var(--inchiostro); }

/* Sezioni */
.stanza { padding: var(--s8) 0; border-top: 1px solid var(--filo); }
.stanza h2 { margin-bottom: var(--s5); }

/* Cosa fa: due grandi, quattro piccole, separate da fili e non da riquadri. */
.funzioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); }
.funzioni > div { padding-top: var(--s3); border-top: 1px solid var(--filo-forte); }
.funzioni > .grande { grid-column: span 2; border-top: 2px solid var(--oro); }
.funzioni > .grande h3 { font-size: 26px; }
.funzioni > .grande p { font-size: 18px; }
.funzioni p { color: var(--inchiostro-tenue); max-width: 62ch; }

.duo { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s6); align-items: center; }
.duo + .duo { margin-top: var(--s8); }
.duo.inverso > div { order: 2; }
.duo h2 { margin-bottom: var(--s3); }
.duo p { color: var(--inchiostro-tenue); max-width: 62ch; }
.duo p + p { margin-top: var(--s2); }
.duo .link { display: inline-block; margin-top: var(--s3); color: var(--inchiostro); }

/* Gianea: il volto compare una volta sola, piccolo. Apre gli occhi quando entra (gianea.js). */
.volto { position: relative; width: 72px; height: 72px; margin-bottom: var(--s3); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--oro); }
.volto img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s; }
.volto .chiusi { opacity: 0; }
.volto.riposo .chiusi { opacity: 1; }
.volto.riposo .aperti { opacity: 0; }

/* Scarica */
.versioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.versione {
  background: var(--bianco); border: 1px solid var(--filo); border-radius: var(--raggio-scheda); padding: var(--s4);
  display: flex; flex-direction: column; align-items: flex-start;
}
/* «sys» resta il nome che cerca Sito/strumenti/numeri_versione.py per cambiare il numero della versione. */
.versione .sys {
  margin-bottom: var(--s1);
  font: 500 13px/1.2 var(--carattere); letter-spacing: .24em; text-transform: uppercase; color: var(--inchiostro-tenue);
}
.versione h3 { font-size: 24px; }
.versione p { color: var(--inchiostro-tenue); margin-bottom: var(--s3); flex: 1; }
.versione.qui { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); }
.versione .sug { flex: 0; letter-spacing: 0; text-transform: none; margin-bottom: var(--s1); font-size: 14px; font-weight: 500; color: var(--oro-scritta); }
.primo { margin-top: var(--s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); color: var(--inchiostro-tenue); font-size: 16px; }
.primo strong { display: block; font-weight: 500; color: var(--inchiostro); margin-bottom: 4px; }

/* Tre passaggi */
.passi { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: passo; }
.passi li { counter-increment: passo; padding-top: var(--s3); border-top: 1px solid var(--filo-forte); }
.passi li::before {
  content: counter(passo); display: block; margin-bottom: var(--s2);
  font-size: 40px; line-height: 1; color: var(--oro-scritta);
}
.passi p { color: var(--inchiostro-tenue); }
.passi .tasto { margin-top: var(--s3); }

/* Chiusura */
.chiusura { padding: var(--s8) 0; border-top: 1px solid var(--filo); text-align: center; }
.chiusura h2 { margin: 0 auto var(--s2); }
.chiusura p { color: var(--inchiostro-tenue); margin-bottom: var(--s4); }

/* Piede */
.piede { border-top: 1px solid var(--filo); padding: var(--s6) 0 var(--s5); font-size: 15px; color: var(--inchiostro-tenue); }
.piede-alto { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); align-items: flex-start; }
.piede .motto { margin-top: var(--s2); color: var(--inchiostro); }
.piede ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.piede a:hover { color: var(--inchiostro); text-decoration: underline; text-underline-offset: 4px; }
.piede .legale { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--filo); font-size: 14px; }

/* Una dissolvenza lenta quando la pagina si apre, e basta. */
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra 1s cubic-bezier(.2, .7, .2, 1) both; }
  .entra.dopo { animation-delay: .25s; }
  @keyframes entra { from { opacity: 0; transform: translateY(12px); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .volto img { transition: none; }
}

@media (max-width: 960px) {
  .voci, .testata .tasto.bordo { display: none; }
  .apri-menu { margin-left: auto; }
  .funzioni { grid-template-columns: 1fr 1fr; }
  .duo, .versioni, .primo, .passi { grid-template-columns: 1fr; }
  .duo { gap: var(--s4); }
  .duo.inverso > div { order: 0; }
  .duo + .duo { margin-top: var(--s7); }
  .cella.lontana { display: none; }
  .vetrina .listino { position: static; transform: none; width: auto; margin-top: var(--s2); }
  .vetrina figcaption { margin-top: var(--s2); text-align: center; }
}
@media (max-width: 560px) {
  .oro { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .testata-dentro, .indice-testa { height: 60px; }
  .marchio img { height: 22px; }
  .stanza, .chiusura { padding: var(--s7) 0; }
  .funzioni { grid-template-columns: 1fr; }
  .funzioni > .grande { grid-column: auto; }
  .apertura .azioni { flex-direction: column; }
  .apertura .azioni .tasto { width: 100%; max-width: 320px; }
  .quadretti { background-size: 48px 48px; height: 480px; }
  .cella { width: 48px; height: 48px; }
  .listino .riga { grid-template-columns: 1fr auto; }
  .listino .cod { display: none; }
  .listino .cartellino { grid-column: 1 / -1; justify-self: start; }
  .cartellino:empty { display: none; }
  /* Sul telefono le foto del programma si guardano da vicino: la pagina, senza la barra laterale. */
  .vetrina .cornice, .duo .cornice { aspect-ratio: 4 / 3; }
  .vetrina .cornice img, .duo .cornice img { width: 165%; max-width: none; margin-left: -29%; }
  .vetrina .cornice img { width: 128%; margin: 0 0 0 -26%; }
}

/* Pagine di servizio: installare, assistenza e le pagine legali. Una colonna sola, da leggere. */
.pagina { max-width: calc(720px + 2 * var(--margine)); padding-top: var(--s7); padding-bottom: var(--s8); }
.pagina h1 { font-size: clamp(36px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.01em; margin-bottom: var(--s3); }
.pagina h2 { font-size: 26px; max-width: none; margin: var(--s6) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--filo); }
.pagina .sottotitolo { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--inchiostro-tenue); margin-bottom: var(--s4); }
.pagina p + p, .pagina ul + p, .pagina p + ul, .pagina ol + p { margin-top: var(--s2); }
.pagina p, .pagina li { color: var(--inchiostro-tenue); }
.pagina ul { padding-left: 20px; }
.pagina ul li + li { margin-top: var(--s1); }
.pagina strong { color: var(--inchiostro); font-weight: 500; }
.pagina .azioni { margin-top: var(--s3); }
.nota-legale { font-size: 15px; padding: var(--s2) 0; border-top: 1px solid var(--filo); border-bottom: 1px solid var(--filo); margin-bottom: var(--s4); }
.pagina .nota-legale + .sottotitolo { margin-top: 0; }
/* I passi numerati: il numero in oro, come in «Pronto in tre passaggi». */
.elenco { list-style: none; padding: 0; counter-reset: passo; }
.elenco li { counter-increment: passo; position: relative; padding-left: 44px; }
.elenco li + li { margin-top: var(--s2); }
.elenco li::before { content: counter(passo); position: absolute; left: 0; top: -2px; font-size: 22px; color: var(--oro-scritta); }
.voci a[aria-current] { text-decoration: underline; text-decoration-color: var(--oro); text-decoration-thickness: 2px; text-underline-offset: 6px; }