/* ==========================================================================
   Marco Gnesa, decoratore d'interni. Foglio di stile unico.
   Nessun build step: si modifica questo file direttamente.

   Direzione: la soluzione classica della categoria, eseguita per intero.
   Il giallo non e' una scelta estetica nostra: e' il colore della sua tuta
   da lavoro, che lui stesso indica come segno riconoscibile.
   ========================================================================== */

/* --- Caratteri, self-hosted, nessuna chiamata esterna --------------------- */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/barlow-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/barlow-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Sistema ------------------------------------------------------------- */

:root {
  /* colore */
  --giallo: #f6be00;        /* il giallo della tuta */
  --giallo-scuro: #d9a600;  /* stessa famiglia, per bordi e stati */
  --inchiostro: #23201c;    /* testo e fondi scuri, caldo */
  --inchiostro-70: #56514a;
  /* Misurato: 5,86:1 su bianco e 5,28:1 su --carta-2. Il grigio precedente
     (#837c72) stava a 4,12 e 3,72, cioe' sotto AA proprio sui testi che dicono
     cosa contiene ogni scheda. Il pubblico di questo sito non e' giovane. */
  --inchiostro-45: #6a645a;
  --carta: #ffffff;
  --carta-2: #f4f3f0;       /* fasce alternate */
  --linea: #ddd9d2;

  /* caratteri */
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* scala tipografica, fluida */
  --t-xxl: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem);
  --t-xl: clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
  --t-l: clamp(1.35rem, 1.15rem + 0.85vw, 1.8rem);
  --t-m: clamp(1.06rem, 1rem + 0.28vw, 1.2rem);
  --t-s: 0.95rem;
  --t-xs: 0.82rem;

  /* ritmo */
  --sp-sezione: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --sp-l: 2.5rem;
  --sp-m: 1.5rem;
  --sp-s: 0.75rem;
  --larghezza: 1180px;
  --lettura: 62ch;
  --raggio: 4px;
}

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

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

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-m);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-xxl);
}
h2 {
  font-size: var(--t-xl);
}
h3 {
  font-size: var(--t-l);
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 var(--sp-m);
  max-width: var(--lettura);
}

/* --- Impianto ------------------------------------------------------------ */

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

.sezione {
  padding-block: var(--sp-sezione);
}

.sezione--grigia {
  background: var(--carta-2);
}

.sezione--scura {
  background: var(--inchiostro);
  color: var(--carta);
}

/* Gli occhielli sopra i titoli sono stati tolti: ripetevano il titolo che
   avevano sotto ("Il mestiere" sopra "Cosa faccio") e sono il tic piu'
   riconoscibile delle pagine generate. I titoli si reggono da soli, e per
   orientarsi c'e' la navigazione. */

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--inchiostro);
  color: var(--carta);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}

.salta-al-contenuto:focus {
  left: 0;
}

/* Anello di focus in inchiostro: 9,49:1 sul giallo dei pulsanti e 16,22:1 sul
   bianco. Il giallo scuro precedente stava a 1,31:1 sulla barra telefonica,
   cioe' invisibile proprio sull'azione che il sito esiste per ottenere. */
:where(a, button):focus-visible {
  outline: 3px solid var(--inchiostro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sui fondi scuri l'anello si inverte, altrimenti sparisce. */
.sezione--scura :where(a, button):focus-visible,
.piede :where(a, button):focus-visible {
  outline-color: var(--carta);
}

/* --- Azione principale: la telefonata ------------------------------------ */

.telefono {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--giallo);
  color: var(--inchiostro);
  font-weight: 700;
  font-size: var(--t-m);
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border-radius: var(--raggio);
  transition: background 0.15s ease, transform 0.15s ease;
}

.telefono:hover {
  background: #ffcd1f;
  transform: translateY(-1px);
}

.telefono svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* --- Testata ------------------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--carta);
  border-bottom: 1px solid var(--linea);
}

.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  padding-block: 0.7rem;
}

.marchio {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marchio__nome {
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}

.marchio__mestiere {
  font-size: var(--t-xs);
  color: var(--inchiostro-70);
  letter-spacing: 0.05em;
}

.navigazione {
  display: none;
  gap: 1.6rem;
  font-size: var(--t-s);
  font-weight: 500;
}

.navigazione a {
  text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
}

.navigazione a:hover {
  border-bottom-color: var(--giallo);
}

.testata .telefono {
  padding: 0.6rem 1.1rem;
  font-size: var(--t-s);
}

/* La navigazione compare gia' a 48rem: fra 736 e 992 px la pagina restava
   lunga 7000 px senza un solo modo di saltare da una sezione all'altra. */
@media (min-width: 48rem) {
  .navigazione {
    display: flex;
    gap: 1rem;
    font-size: var(--t-xs);
  }
}

@media (min-width: 62rem) {
  .navigazione {
    gap: 1.6rem;
    font-size: var(--t-s);
  }
}

/* --- Piede --------------------------------------------------------------- */

.piede {
  background: var(--inchiostro);
  color: var(--carta);
  padding-block: var(--sp-l) var(--sp-m);
  font-size: var(--t-s);
}

.piede a {
  color: var(--carta);
}

.piede__fine {
  margin-top: var(--sp-l);
  padding-top: var(--sp-m);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--t-xs);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* --- Segnaposto dichiarati ----------------------------------------------- */
/* Restano visibili finche' il cliente non manda il materiale vero.
   Sono elencati uno per uno in da-sostituire.md. */

.segnaposto {
  border: 1px dashed var(--inchiostro-45);
  background: repeating-linear-gradient(
    -45deg,
    rgba(246, 190, 0, 0.07) 0 12px,
    transparent 12px 24px
  );
  color: var(--inchiostro-70);
  padding: var(--sp-m);
  border-radius: var(--raggio);
  font-size: var(--t-s);
}

.segnaposto__etichetta {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inchiostro);
  background: var(--giallo);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  margin-bottom: var(--sp-s);
}

/* --- Apertura ------------------------------------------------------------ */

.apertura {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
  position: relative;
}

.apertura__griglia {
  display: grid;
  gap: var(--sp-l);
  align-items: center;
}

.apertura__sommario {
  font-size: var(--t-l);
  line-height: 1.45;
  color: var(--inchiostro-70);
  font-weight: 400;
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-m);
  margin-top: var(--sp-m);
}

.apertura__azione-principale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.apertura__nota {
  font-size: var(--t-s);
  color: var(--inchiostro-45);
  margin: 0;
}

.collegamento-piano {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--giallo);
  padding-bottom: 2px;
}

.collegamento-piano:hover {
  border-bottom-color: var(--inchiostro);
}

.apertura__figura {
  margin: 0;
  position: relative;
}

.apertura__figura img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--raggio);
}

.apertura__figura::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 42%;
  height: 34%;
  background: var(--giallo);
  border-radius: var(--raggio);
  z-index: -1;
}

@media (min-width: 56rem) {
  .apertura__griglia {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .apertura {
    padding-bottom: var(--sp-m);
  }
}

/* --- Sezioni: introduzione ----------------------------------------------- */

.sezione__introduzione {
  font-size: var(--t-l);
  color: var(--inchiostro-70);
  margin-bottom: var(--sp-l);
}

.sezione--scura .sezione__introduzione {
  color: rgba(255, 255, 255, 0.72);
}

/* --- Cosa faccio: schede ------------------------------------------------- */

.schede {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.scheda {
  display: flex;
  flex-direction: column;
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.scheda:hover {
  box-shadow: 0 10px 30px rgba(35, 32, 28, 0.09);
  transform: translateY(-2px);
}

.scheda__immagine {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Il filo giallo sta solo sulla scheda della specializzazione. Ripetuto su
   tutte e cinque non era piu' un accento, era carta da parati, e appiattiva
   la gerarchia proprio dove il cliente ha qualcosa da far risaltare. */
.scheda__testo {
  padding: var(--sp-m);
}

.scheda__testo h3 {
  margin-bottom: 0.15rem;
}

.scheda__sottotitolo {
  font-size: var(--t-s);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inchiostro-45);
  margin-bottom: var(--sp-s);
}

.scheda__testo p:last-child {
  margin-bottom: 0;
}

/* La specializzazione dichiarata dal cliente, protezione solare e zanzariere,
   non si segnala con un filo colorato di lato: prende il campo pieno. E' anche
   il modo corretto di usare questo giallo, campi interi con testo scuro sopra
   (9,49:1) invece di accenti sparsi su fondo bianco. */
.scheda--larga .scheda__testo {
  background: var(--giallo);
  color: var(--inchiostro);
}

.scheda--larga .scheda__sottotitolo {
  color: var(--inchiostro);
  font-weight: 700;
}

.scheda--larga {
  border-color: var(--giallo-scuro);
}

@media (min-width: 64rem) {
  .schede {
    grid-template-columns: repeat(4, 1fr);
  }
  .scheda--larga {
    grid-column: span 2;
    flex-direction: row;
  }
  .scheda--larga .scheda__immagine {
    width: 50%;
    aspect-ratio: auto;
  }
  .scheda--larga .scheda__testo {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* --- Come lavoro: passaggi ----------------------------------------------- */

.passaggi {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.passaggio {
  counter-increment: passo;
  position: relative;
  padding-top: var(--sp-m);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.passaggio::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: var(--sp-m);
  right: 0;
  font-size: var(--t-l);
  font-weight: 700;
  color: #9a938a; /* 5,34:1 sul fondo scuro: i numeri sono contenuto, non decoro */
  line-height: 1;
}

.passaggio__icona {
  display: block;
  color: var(--giallo);
  margin-bottom: var(--sp-s);
}

.passaggio__icona svg {
  width: 2.6rem;
  height: 2.6rem;
}

.passaggio h3 {
  font-size: var(--t-m);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.passaggio p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--t-s);
  margin-bottom: 0;
}

/* --- Chi sono ------------------------------------------------------------ */

.chi-sono {
  display: grid;
  gap: var(--sp-l);
  align-items: center;
}

.chi-sono__tuta {
  font-weight: 600;
  font-size: var(--t-l);
  line-height: 1.35;
  border-left: 5px solid var(--giallo);
  padding-left: var(--sp-m);
  margin-top: var(--sp-l);
  margin-bottom: 0;
}

.chi-sono__figura {
  margin: 0;
}

.chi-sono__figura img {
  width: 100%;
  border-radius: var(--raggio);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.chi-sono__figura figcaption,
.galleria__voce figcaption {
  font-size: var(--t-s);
  color: var(--inchiostro-45);
  margin-top: 0.6rem;
}

@media (min-width: 56rem) {
  .chi-sono {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --- Galleria ------------------------------------------------------------ */

.galleria {
  display: grid;
  gap: var(--sp-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.galleria__voce {
  margin: 0;
}

.galleria__voce img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio);
}

@media (min-width: 64rem) {
  .galleria {
    grid-template-columns: repeat(6, 1fr);
  }
  .galleria__voce:nth-child(1),
  .galleria__voce:nth-child(2) {
    grid-column: span 3;
  }
  .galleria__voce:nth-child(3),
  .galleria__voce:nth-child(4),
  .galleria__voce:nth-child(5) {
    grid-column: span 2;
  }
}

/* --- Fascia -------------------------------------------------------------- */

/* La fotografia di fondo e' un elemento immagine nel markup e non uno sfondo
   CSS, cosi' puo' essere caricata in differita: come sfondo pesava 130 KB
   scaricati subito su telefono, per una fascia che sta cinque schermate piu'
   in basso. Misurato dopo la modifica: carico iniziale a 390px sceso a 211 KB. */
.fascia {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background-color: var(--inchiostro);
  color: var(--carta);
  overflow: hidden;
}

.fascia__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.fascia::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 32, 28, 0.72);
  z-index: -1;
}

.fascia__contenuto {
  display: grid;
  gap: var(--sp-m);
  align-items: center;
}

.fascia__testo {
  font-size: var(--t-l);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  max-width: 34ch;
}

.fascia .telefono {
  justify-self: start;
}

@media (min-width: 56rem) {
  .fascia__contenuto {
    grid-template-columns: 1fr auto;
    gap: var(--sp-l);
  }
}

/* --- Contatti ------------------------------------------------------------ */

.contatti {
  display: grid;
  gap: var(--sp-l);
}

.numero-grande {
  display: inline-block;
  margin-top: var(--sp-s);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  border-bottom: 5px solid var(--giallo);
  padding-bottom: 0.15rem;
}

.numero-grande:hover {
  border-bottom-color: var(--inchiostro);
}

.indirizzo {
  font-style: normal;
  line-height: 1.8;
  padding: var(--sp-l);
  background: var(--carta-2);
  border-radius: var(--raggio);
  align-self: start;
}

@media (min-width: 56rem) {
  .contatti {
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* --- Piede --------------------------------------------------------------- */

.piede__colonne {
  display: grid;
  gap: var(--sp-m);
}

.piede__colonne p {
  margin: 0;
}

.piede__collegamenti {
  display: flex;
  gap: var(--sp-m);
}

.piede__collegamenti a {
  text-decoration: none;
  border-bottom: 2px solid var(--giallo);
  padding-bottom: 2px;
}

@media (min-width: 56rem) {
  .piede__colonne {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* --- Barra telefonica fissa su schermi stretti --------------------------- */

.barra-telefono {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--giallo);
  color: var(--inchiostro);
  font-weight: 700;
  text-decoration: none;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(35, 32, 28, 0.18);
}

.barra-telefono svg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

@media (min-width: 46rem) {
  .barra-telefono {
    display: none;
  }
}

/* La barra copre il fondo pagina: si compensa il piede, ma solo nelle pagine
   che la barra ce l'hanno davvero. Privacy e impressum non la hanno, e senza
   questa distinzione si ritrovavano 80 px di piede scuro vuoto sul telefono. */
@media (max-width: 45.99rem) {
  .ha-barra-telefono .piede {
    padding-bottom: 5rem;
  }
  .testata__telefono span {
    display: none;
  }
  .testata__telefono {
    padding: 0.6rem 0.85rem;
  }
}

/* Nessun bersaglio tattile sotto i 44 px. */
.testata__telefono {
  min-height: 44px;
}

/* Le ancore non devono finire sotto la testata fissa. */
[id] {
  scroll-margin-top: 5.5rem;
}

/* Nessuna comparsa allo scorrimento, per scelta: il contenuto di questo sito
   deve essere visibile sempre, anche se lo script non parte. */

/* --- Pagine di testo (privacy, impressum) -------------------------------- */

.pagina-testo {
  padding-block: var(--sp-sezione);
}

.pagina-testo h2 {
  font-size: var(--t-l);
  margin-top: var(--sp-l);
}

.pagina-testo p,
.pagina-testo li {
  max-width: var(--lettura);
}

/* Segnaposto di fatto dentro il testo: restano visibili finche' il cliente
   non manda il dato vero. Elencati in da-sostituire.md. */
.da-completare {
  background: rgba(246, 190, 0, 0.35);
  box-shadow: inset 0 -2px 0 var(--giallo-scuro);
  padding: 0 0.2em;
  font-weight: 600;
}

.pagina-testo .ritorno {
  display: inline-block;
  margin-bottom: var(--sp-l);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--giallo);
}