/* =========================
   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;
  }
  
 

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; }
  }
  
  /* =========================
     Main / Hero
  ========================= */
  main{
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
  }
  
  /* Titolo pagina */
  .formazione-header{
    width:100%;
    text-align:center;
    padding:6% 0;
    color:#fff;
  }
  .formazione-header h2{
    color:#fff;
    font-size:clamp(1.5rem, 2.5vw, 4.5rem);
    margin:0 0 5px;
    font-weight:bold;
  }
  
  /* =========================
     Cards Servizi
  ========================= */
  #servizi{
    width:100vw;
    margin-left:calc(-50vw + 50%); /* sezione full-bleed centrata */
    background:var(--c-white);
    position:relative;
    z-index:1;
  }
  .servizi-content{
    padding:5%;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-evenly;
    row-gap:40px;
    align-items:stretch;
  }
  
  .servizio{
    opacity:0;
    transform:translateY(40px);
    transition:transform .3s, opacity .3s;
    flex-basis:30%;
    max-width:300px;
    padding:20px;
    text-align:center;
    font-weight:350;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    min-height:350px;
    height:100%;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
  }
  .servizio.visible{
    opacity:1;
    transform:translateY(0);
  }
  
  .servizio-image img{
    width:30%;
    height:auto;
    margin:20% 0 0;
  }
  
  .servizio h3{
    margin:10px 0 0;
    text-align:center;
    font-weight:bold;
    font-size:18px;
  }
  
  .servizio a{ text-decoration:none; font-weight:400; }
  
  /* Pulsante toggle testo */
  .start-button{
    background-color:var(--c-brand);
    color:var(--c-white);
    font-size:1rem;
    font-weight:350;
    padding:12px 24px;
    border:0;
    cursor:pointer;
    margin:20px;
    opacity:0;
    transform:translateY(20px);
    animation:slideIn .8s ease-out .5s forwards;
    border-radius:10px;
    transition:background-color .3s ease, transform .2s ease;
  }
  .start-button:hover{ background-color:#f0b86a; transform:scale(1.05); }
  .start-button:active{ transform:scale(0.97); }
  
  /* Testo nascosto */
  .hidden-text{
    display:none;
    text-align:center;
    margin:2%;
    font-size:15px;
    line-height:1.5;
  }
  
  /* Animazioni */
  @keyframes slideIn{
    to{ opacity:1; transform:translateY(0); }
  }
  
  /* Responsive cards */
  @media (max-width:800px){
    .servizi-content{ padding-top:15%; }
    .servizio{
      flex-basis:100%;
      max-width:300px;
      min-height:350px;
      padding:20px;
    }
    .servizio-image img{ margin-top:10%; }
  }
  
  /* =========================
     Contatti (mappa + form)
  ========================= */
  #contacts{ width:100%; }
  
  .contacts-wrapper{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    overflow-x:hidden;
    justify-content:center;
    align-items:stretch;
  }
  .map-box,
  .form-box{
    flex:1 1 45%;
    min-width:300px;
    min-height:400px;
    height:450px;
    overflow:hidden;
  }
  .form-box{
    padding:20px;
    background:var(--c-header-grad);
  }
  .form-box form{
    display:flex;
    flex-direction:column;
    gap:15px;
  }
  .form-box h2,
  .form-box p{ color:#fff; }
  
  .form-box input,
  .form-box textarea{
    width:100%;
    padding:12px;
    font-size:16px;
    border:1px solid #ccc;
    border-radius:10px;
  }
  
  .form-box button{
    padding:12px;
    font-size:16px;
    background-color:var(--c-brand);
    color:#fff;
    border:0;
    cursor:pointer;
    border-radius:10px;
    transition:background-color .3s ease;
  }
  .form-box button:hover{ background-color:var(--c-brand-strong); }
  
  @media (max-width:768px){
    .contacts-wrapper{
      flex-direction:column;
      align-items:stretch;
      padding:0;
      margin:0;
    }
    .map-box,
    .form-box{
      flex:1 1 100%;
      width:100%;
      margin:0;
      padding:0;
    }
    .map-box{ height:300px; }
    .map-box iframe{
      width:100%;
      height:100%;
      display:block;
      border:0;
    }
    .form-box{ padding:20px; }
  }
  
  /* =========================
     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
  ========================= */
  .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;
  }