/* ======================== BASE CSS ========================= */





/* 1. Reset modernizzato */


*, *::before, *::after {


  box-sizing: border-box;


  margin: 0;


  padding: 0;


}





html {


  scroll-behavior: smooth;


  font-size: 16px;


}





body {


  font-family: 'Inter', sans-serif;


  line-height: 1.6;


  color: #ffffff;


  background-color: #fff;


  overflow-x: hidden;


}





img, video {


  max-width: 100%;


  height: auto;


  display: block;


}





a {


  text-decoration: none;


  color: inherit;


}





ul, ol {


  list-style: none;


}





button {


  background: none;


  border: none;


  cursor: pointer;


}





/* 2. Variabili CSS */


:root {


  --color-primary: #2f553a;


  --color-secondary: #e8f5e9;


  --color-accent: #82c785;


  --color-dark: #ffffff;


  --color-light: #fdfdfd;





  --font-size-base: clamp(1rem, 1.5vw, 1.2rem);


  --font-size-lg: clamp(1.2rem, 2vw, 1.6rem);


  --font-size-xl: clamp(1.8rem, 3vw, 2.5rem);


  --font-size-xxl: clamp(2.4rem, 5vw, 3.5rem);





  --spacing-xs: 0.5rem;


  --spacing-sm: 1rem;


  --spacing-md: 2rem;


  --spacing-lg: 4rem;


  --spacing-xl: 6rem;


  --spacing-xxl: 8rem;





  --max-width: 1280px;


  --transition: 0.3s ease-in-out;


}





/* 3. Elementi generici */


.container {


  max-width: var(--max-width);


  margin-inline: auto;


  padding-inline: var(--spacing-sm);


}





h1, h2, h3, h4, h5, h6 {


   font-size: var(--font-size-base);


  margin-bottom: var(--spacing-sm);


  color: var(--color-dark);


  font-weight: normal;


}





p {


  font-size: var(--font-size-base);


  margin-bottom: var(--spacing-sm);


  color: var(--color-dark);


}





em {


  font-style: italic;


  color: var(--color-primary);


}





strong {


  font-weight: 700;


  color: var(--color-dark);


}





/* 4. Accessibilità */


:focus-visible {


  outline: 2px dashed var(--color-accent);


  outline-offset: 3px;


}





/* 5. Utilità */


.hide {


  display: none !important;


}





.text-center {


  text-align: center;


}





.uppercase {


  text-transform: uppercase;


}





/* 6. Scrollbar personalizzata */


::-webkit-scrollbar {


  width: 8px;


}





::-webkit-scrollbar-track {


  background: var(--color-light);


}





::-webkit-scrollbar-thumb {


  background: var(--color-accent);


  border-radius: 4px;


}