/* OLFING · varianti F/G: la "tavola" con foto a tutto schermo, uno sfondo solo e colori sobri (note OLFING 22/10). Si appoggia a b-tavola/tavola.css. */
:root {
  /* niente sezioni scure: la "notte" diventa la stessa carta */
  --colore-notte: var(--colore-carta);
  --colore-su-notte: var(--colore-inchiostro);
  --colore-su-notte-2: var(--colore-inchiostro-2);
  --colore-filetto-notte: var(--colore-filetto);
  --colore-velo: 22 20 18;
}

/* ---------- primo schermo a tutta foto ---------- */
.hero { position: relative; isolation: isolate; min-height: clamp(560px, 100vh, 1000px); min-height: clamp(560px, 100svh, 1000px); display: flex; flex-direction: column; color: #fff; }
.hero-foto { position: absolute; inset: 0; margin: 0; z-index: -1; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--colore-velo) / 0.62) 0%, rgb(var(--colore-velo) / 0.38) 38%, rgb(var(--colore-velo) / 0) 68%), linear-gradient(180deg, rgb(var(--colore-velo) / 0.45) 0%, rgb(var(--colore-velo) / 0) 22%, rgb(var(--colore-velo) / 0) 60%, rgb(var(--colore-velo) / 0.55) 100%); }
.hero-foto figcaption { position: absolute; right: var(--margine); bottom: 28px; z-index: 1; padding: 0; gap: 28px; color: rgb(255 255 255 / 0.85); }
.hero .testata { border-bottom-color: rgb(255 255 255 / 0.35); }
.hero .nav a { color: rgb(255 255 255 / 0.85); }
.hero .nav a:hover { color: #fff; }
.hero .nav .nav-azione { color: #fff; border-bottom-color: #fff; }
.hero .intestazione { color: rgb(255 255 255 / 0.85); }
.hero .cartello-corpo { display: block; margin-top: auto; padding: 0 0 clamp(72px, 9vw, 120px); max-width: 44rem; }
.hero .payoff { color: #fff; }
.hero .sottotitolo { color: rgb(255 255 255 / 0.92); max-width: 40ch; margin-bottom: 36px; }
.hero .bottone { background: #fff; color: var(--colore-inchiostro); }
.hero .bottone:hover { background: var(--colore-carta); }
.hero .nota-azione { color: rgb(255 255 255 / 0.85); }
.hero .menu-bottone { color: #fff; border-color: #fff; }

.cartiglio-blocco { padding: 0 var(--margine); }
.cartiglio { border-top: 0; }

/* ---------- uno sfondo solo: le sezioni si separano con lo spazio e un filetto ---------- */
.telo-scuro { background: transparent; color: var(--colore-inchiostro); margin-top: 0; padding-bottom: 0 !important; }
.perchi.telo-scuro, .soci.telo-scuro { margin-top: 0; }
main > section { padding-top: var(--spazio-sezione); }
main > section + section { margin-top: var(--spazio-sezione); background-image: linear-gradient(var(--colore-filetto), var(--colore-filetto)); background-size: calc(100% - 2 * var(--margine)) 1px; background-position: center top; background-repeat: no-repeat; }
.cantiere img { object-position: center 35%; }
.tavola-scura img { opacity: 1; }
.impegni { border-top-color: var(--colore-filetto-forte); }
.prova { border-top-color: var(--colore-filetto); }

@media (max-width: 1024px) {
  .hero .nav.aperto { background: var(--colore-carta); }
  .hero .nav.aperto a { color: var(--colore-inchiostro); }
  .hero .cartello-corpo { padding-bottom: 88px; }
  .hero-foto figcaption { left: var(--margine); right: auto; }
}
@media (max-width: 600px) {
  .hero-foto::after { background: linear-gradient(180deg, rgb(var(--colore-velo) / 0.5) 0%, rgb(var(--colore-velo) / 0.25) 35%, rgb(var(--colore-velo) / 0.7) 100%); }
  .hero .payoff { font-size: clamp(2.6rem, 11vw, 3.4rem); }
  .hero .sottotitolo { font-size: var(--testo-m); }
  .hero .azione .bottone { width: 100%; justify-content: space-between; letter-spacing: 0.08em; font-size: 0.875rem; padding: 0 20px; }
  .hero .cartello-corpo { padding-bottom: 40px; }
  .hero-foto figcaption { display: none; }
}
.tuo-cartello .campi dd.vuoto { color: var(--colore-inchiostro-2); }