@charset "UTF-8";
/* compilazione dart SN:5 */
:root {
  /* 🎨 Colori principali */
  --theme-primary-color: #F26A1B; /* Colore principale per il design */
  --theme-secondary-color: #422A1F; /* Colore secondario per accenti */
  --theme-text-color: #422A1F; /* Colore del testo principale */
  --theme-link-color: #F26A1B; /* Colore dei link */
  /*--theme-link-hover: #71BD7C;  Colore dei link al passaggio del mouse */
  /*--theme-bg-color: #fff;  Colore di sfondo generico da usare solo se diverso da bianco*/
  /* 🔗 Menu e navigazione */
  --theme-menu-color: #422A1F; /* Colore del menu */
  /*--theme-menu-hover: #838282;  Colore del menu al passaggio del mouse */
  --theme-menu-size: .9rem; /* Dimensione del testo nel menu */
  --theme-menu-weight: 400; /* Peso del font nel menu */
  /* 🎨 Bottoni */
  --theme-button-color: #fff;
  --theme-button-bg-color: #F26A1B;
  --theme-button-border: none;
  --theme-button-radius: 10px;
  --theme-focus-ring: 0 0 0 3px #422A1F;
  /* 🔠 Tipografia */
  --theme-primary-font: 'Sora', sans-serif;
  --theme-line-height: 1.6; /* Altezza della linea per la leggibilità */
  --fs-h1: clamp(2.5rem, 4vw, 3.3rem);
  --lh-h1: clamp(3rem, 5vw, 4rem);
  --fs-h2: clamp(1.8rem, 2.5vw, 3rem);
  --lh-h2: clamp(2.3rem, 4vw, 4.5rem);
  --fs-h3: clamp(1.5rem, 3vw, 0.9rem);
  --lh-h3: clamp(2rem, 3.5vw, 3.2rem);
  --fs-h4: clamp(1rem, 2vw, 1.5rem);
  --lh-h4: clamp(1.4rem, 2.5vw, 1.6rem);
  --fs-h5: clamp(0.9rem, 1.5vw, 1.2rem);
  --lh-h5: clamp(1.5rem, 2vw, 1.5rem);
  /* 📐 Spaziatura e padding */
  --theme-main-padding: 0; /* Padding orizzontale del contenitore default 0 se necessario usare clamp(0.2rem, 5vw, 1rem);*/
  --screen-padding-block: clamp(3rem, 6vw, 5rem); /* Padding verticale della schermata */
  --screen-padding-inline: clamp(1rem, 5vw, 3rem); /* Padding orizzontale della schermata */
  --spacer-h: clamp(1rem, 2vw, 1.3rem); /* Spazio tra gli elementi */
  /* Movimento e transizioni */
   --transition-speed: 0.3s linear; /* Valore predefinito */
}


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

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

body {
  margin: 0;
  font-family: var(--theme-primary-font);
  font-size: var(--theme-font-size);
  line-height: var(--theme-line-height);
  color: var(--theme-text-color);
  background: var(--theme-bg-color);
  text-rendering: optimizeLegibility;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

h1, .h1, h2, .h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: 1.2rem;
  font-family: var(--theme-primary-font);
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--theme-link-color);
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}
a:hover, a:focus {
  color: var(--theme-link-hover);
  outline: none;
}


ul{list-style-position: inside}


.btn {
  font-weight: 300;
  cursor: pointer;
  overflow: visible;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 15px;
  border-radius: var(--theme-button-radius);
  background-color: var(--theme-button-bg-color);
  color: var(--theme-button-color);
  border: var(--theme-button-border);
  background-clip: padding-box;
  transition: color var(--transition-speed), opacity var(--transition-speed), border var(--transition-speed), background var(--transition-speed), box-shadow var(--transition-speed)
}

button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--theme-link-color);
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease;
}
button:hover, button:focus {
  background: var(--theme-link-hover);
}
button:disabled {
  background: #999;
  cursor: not-allowed;
}

button[disabled], input[disabled], .btn[disabled] {
  cursor: default;
  background: #eee;
  border: #eee;
  color: #999;
}

.top-btn {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 60px;
  z-index: 99;
  width: 40px;
  font-size: 18px;
  border: var(--theme-button-border);
  background-color: var(--theme-button-bg-color);
  fill: var(--theme-button-color);
  cursor: pointer;
  padding: 8px 6px 9px 12px;
  border-radius: 50%;
  transition: 0.5s all linear;
}

header {
  width: 100%;
  z-index: 4;
  background-color: #fff;
  top: 0;
  box-shadow: 0 27px 65px -21px rgba(0, 0, 0, 0.1607843137);
  -moz-box-shadow: 0 27px 65px -21px rgba(0, 0, 0, 0.1607843137);
  -webkit-box-shadow: 15px 27px 74px 7px rgba(0, 0, 0, 0.1607843137);
}


main {
  margin-inline: auto;
  padding-inline: var(--theme-main-padding);
}

.wip-container{min-height: 62vh;width: 100%;display: flex; justify-content: center; align-items: center;text-align: center;flex-direction: column; padding: 20px;}

.screen {
  padding-block: var(--screen-padding-block);
  padding-inline: var(--screen-padding-inline);
}

.screen h1,
.screen h2,
.screen h3,
.screen h4,
.screen h5 {
  margin-block: var(--spacer-h);
}

.logogrup{
  max-width:180px;
  margin: 0 auto;
}
footer .logogrup{
  max-width:100px;
  margin: 20px auto;
}
footer {
  padding: 0.8rem;
  color: #fff;
  background-color: var(--theme-primary-color);
  font-size: 0.9rem;
}

footer a {
  color: #fff;
  font-weight: 400;
}

footer a:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  :root {
      --transition-speed: none;
    }
  html {
    scroll-behavior: auto;
  }
}