/* =========================
   Variabili / Reset base
========================= */
:root{
    --c-text:#333;
    --c-white:#fff;
    --c-offwhite:rgb(254,255,251);
    --c-brand:#e7cb93;
    --c-brand-strong:#f0896a;
    --c-header-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.6);
    --c-fullscreen-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.9);
    --tr-fast:.3s ease;
  }
  
  *,
  *::before,
  *::after{ box-sizing:border-box; }
  
  html, body{
    margin:0;
    padding:0;
    height:100%;
    min-height:100vh;
    font-family:Arial, sans-serif;
    overflow-x:hidden;
  }
  
  /* =========================
     Sfondo pagina
  ========================= */


  body {
    /* niente transform sul body! */
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
                url('../img/home.png') no-repeat center center / cover;
  }
  
  /* =========================
     Header / Navigazione
  ========================= */
  header{
    position:relative;
    width:100%;
    height:10vh;
    min-height:64px;
    display:flex;
    align-items:center;
    background:var(--c-header-grad);
  }
  
  .header-content{
    width:90%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1% 0;
  }
  
  /* Logo + testi */
  .header-icon{
    width:clamp(10px, 10vw, 60px);
    max-width:60px;
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
  }
  .header-text{
    position:absolute;
    top:50%;
    left:calc(5px + 70px);
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  header h1{
    margin:0;
    font-size:clamp(.5rem, 2vw, 1.3rem);
    color:var(--c-offwhite);
  }
  header .subtitle{
    margin:5px 0 0 0;
    font-size:clamp(.4rem, 1.2vw, .9rem);
    font-style:italic;
    color:var(--c-offwhite);
  }
  
  /* Landscape con poca altezza */
  @media (max-height:500px) and (orientation:landscape){
    .header-icon{ width:25px; }
    .header-text{ left:calc(10px + 40px); }
  }
  
  /* Nav principale */
  .nav-bar{
    display:flex;
    align-items:center;
    margin-left:auto;
  }
  .nav-bar .menu{
    display:flex;
    gap:.75rem;
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav-bar .menu li + li{ position:relative; }
  .nav-bar .menu li + li::before{
    content:"|";
    opacity:.5;
    margin-right:.75rem;
    color:var(--c-offwhite);
  }
  .nav-bar a{
    color:var(--c-offwhite);
    text-decoration:none;
    font-size:1.1em;
    transition:color var(--tr-fast), text-decoration var(--tr-fast);
  }
  .nav-bar a:hover{ color:#333; }
  
  /* Hamburger */
  .hamburger{
    font-size:1.5em;
    cursor:pointer;
    display:none;
    color:var(--c-offwhite);
    background:none;
    border:0;
  }
  
  /* Fullscreen menu (mobile) */
  .fullscreen-menu{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:fixed;
    inset:0;
    background:var(--c-fullscreen-grad);
    z-index:9999;
  }
  .fullscreen-menu[hidden]{ display:none; }
  .fullscreen-menu a{
    color:var(--c-offwhite);
    font-size:1.5em;
    text-decoration:none;
  }
  .close-btn{
    position:absolute;
    top:20px;
    right:20px;
    font-size:2em;
    color:var(--c-offwhite);
    background:none;
    border:none;
    cursor:pointer;
  }
  
  /* Nav responsive */
  @media (max-width:965px){
    .nav-bar .menu{ display:none; }
    .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  }
  
  /* =========================
     Sezione Percorso
  ========================= */
  .percorso{
    background-color:#fefefe;
    padding:60px 20px;
    color:var(--c-text);
  }
  .contenitore{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
  }
  .percorso h2{
    font-size:2.2rem;
    margin-bottom:10px;
    color:#2b2b2b;
  }
  .percorso .intro{
    font-size:1.1rem;
    margin-bottom:40px;
    color:#666;
  }
  
  .step-container{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    justify-content:center;
  }
  .step{
    background-color:#f8f8f8;
    padding:30px;
    border-radius:16px;
    box-shadow:0 4px 10px rgba(0,0,0,.05);
    flex:1 1 280px;
    max-width:320px;
    text-align:left;
  }
  .step .numero{
    font-size:2.5rem;
    color:var(--c-brand);
    font-weight:bold;
    margin-bottom:10px;
  }
  .step h3{
    font-size:1.2rem;
    margin-bottom:10px;
    color:#222;
  }
  .step ul{
    padding-left:20px;
    margin-bottom:15px;
    color:#555;
  }
  .step ul li{
    list-style:disc;
    margin-bottom:6px;
  }
  .step .descrizione{
    font-size:.95rem;
    color:#777;
  }
  
  .cta{ margin-top:50px; }
  .btn{
    background-color:var(--c-brand);
    color:var(--c-white);
    padding:14px 30px;
    border:none;
    border-radius:25px;
    font-size:1rem;
    text-decoration:none;
    transition:background .3s ease;
  }
  .btn:hover{ background-color:#e2a834; }
  
  /* =========================
     Footer
  ========================= */
  footer{
    color:var(--c-offwhite);
    text-align:center;
    padding:clamp(8px, 3vw, 15px);
    width:100%;
    background:var(--c-header-grad);
    margin:0 auto;
    font-size:clamp(.9em, 2vw, 1.2em);
  }
  @media (max-width:768px){
    footer{
      padding:clamp(7px, 4vw, 9px);
      font-size:clamp(.8em, 3vw, 1em);
    }
  }
  
  .footer-content{ text-align:center; padding:20px; }
  
  .footer-menu{
    list-style:none;
    padding:0;
    margin:5px 0 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .footer-menu li{ display:inline; font-size:1em; }
  .footer-menu-inline li{ font-size:clamp(.6em, 3vw, .8em); }
  .footer-menu a{
    text-decoration:none;
    color:var(--c-offwhite);
  }
  .footer-menu a:hover{ text-decoration:underline; }
  /* Separatore footer via CSS */
  .footer-menu li + li::before{
    content:"|";
    color:#aaa;
    opacity:.7;
    margin-right:8px;
  }
  /* Nota legale */
  .footer-small{
    padding-top:1%;
    font-size:clamp(.6em, 3vw, .8em);
  }
  /* Footer responsive */
  @media (max-width:768px){
    .footer-content{ padding:15px; }
    .footer-menu{ gap:5px; }
  }
  @media (max-width:480px){
    .footer-menu{ flex-direction:column; gap:5px; }
    .footer-menu-inline{ flex-direction:row !important; flex-wrap:nowrap; gap:8px; }
    .footer-menu li + li::before{ content:none; }
  }
  
  /* =========================
     Utility / Accessibilità
  ========================= */
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
  
  /* Riduci animazioni se preferito */
  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
  }