/* Stile comune alle vetrine: colori, font e "palco" 1920x1080 */

@font-face { font-family: 'Lora'; font-weight: 500; font-display: swap; src: url('fonts/lora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 600; font-display: swap; src: url('fonts/lora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-weight: 700; font-display: swap; src: url('fonts/lora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif'; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif'; font-weight: 600; font-display: swap; src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }

:root {
  --blu: #132f53;
  --blu-chiaro: #2a4a73;
  --crema: #F7F9ED;
  --crema-scuro: #e9ecdc;
  --arancio: #f28c28;
  --mattone: #d97a3d;
  --grigio: #4f6077;
  --titoli: 'Lora', Georgia, serif;
  --testi: 'Source Serif', Georgia, serif;
}

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; background: var(--crema);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  cursor: none; user-select: none;
}

/* Il palco è sempre 1920x1080: la pagina lo adatta allo schermo reale */
#palco {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--crema);
  color: var(--blu);
  font-family: var(--testi);
}

/* Barra del marchio in basso, uguale su tutte le schermate */
.barra {
  position: absolute; left: 0; bottom: 0; width: 1920px; height: 120px;
  background: var(--blu); color: var(--crema);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 72px; box-sizing: border-box; z-index: 20;
}
.barra .marchio { font-family: var(--titoli); font-weight: 600; font-size: 46px; letter-spacing: -0.01em; line-height: 1; }
.barra .marchio small { display: block; font-family: var(--testi); font-weight: 400; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 8px; }
.barra .contatti { display: flex; gap: 64px; align-items: center; font-size: 30px; }
.barra .contatti b { font-weight: 600; font-size: 36px; }
.barra .contatti span { display: block; font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 4px; }
.barra .avanzamento {
  position: absolute; left: 0; top: 0; height: 6px; width: 100%;
  background: var(--arancio); transform-origin: 0 0; transform: scaleX(0);
}

/* Riquadro di stato, visibile solo con ?debug=1 */
#stato {
  position: absolute; right: 16px; top: 16px; z-index: 99;
  background: rgba(0,0,0,0.75); color: #fff; font: 18px/1.4 monospace;
  padding: 10px 14px; border-radius: 6px; white-space: pre; display: none;
}