/* Container */
.container { max-width: 1100px; margin:0 auto; padding:0 16px; }

body {
    font-family: Roboto, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    color: #333;
}
/* Reset box-sizing per evitare overflow */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Header principale */
header {
  width: 100%;
  background-color: #ffffff; /* sfondo bianco */
  color: #222222;            /* testo scuro visibile */
  text-align: center;
  padding: 20px 0;
  overflow: hidden;          /* contiene float, evita overflow */
}

/* Titolo */
header h1 {
  margin: 0;
  font-size: 2rem; /* unità relative per accessibilità */
}

header h1 a {
  color: #ffffff;         /* colore del testo (rosso del brand) */
  background-color: #e23a27;
  text-decoration: none;   /* rimuove la sottolineatura del link */
  display: inline-block;   /* serve per poter applicare padding/border */
  padding: 15px 20px;      /* spazio interno */
  border: 2px solid #c13223; /* quadrato/contorno */
  border-radius: 8px;      /* opzionale: angoli arrotondati */
  font-size: 1.5rem;       /* grandezza del testo */
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease; /* animazione al passaggio mouse */
}

/* Effetto hover */
header h1 a:hover {
  background-color: #c13223; /* riempie lo sfondo */
  color: #ffffff;            /* testo bianco sopra rosso */
}

/* Logo responsive */
header .logo-header {
  max-width: 100%;  /* non supera la larghezza del contenitore */
  height: auto;     /* mantiene proporzioni corrette */
  display: block;
  margin: 0 auto;   /* centra se inline in blocco */
  object-fit: cover; /* utile solo se c'è contenitore con altezza fissa */
}

/* Navbar */
header nav ul {
  display: flex;
  flex-wrap: wrap;        /* evita che i link escano su mobile */
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;       /* rimuove i puntini */
}

/* Link della navbar */
header nav ul li a {
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #e23a27;
  color: #ffffff;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.15s ease;
  font-size: 1rem;
  white-space: nowrap; /* evita che si spezzino le parole */
}

/* Hover e focus (mouse + tastiera) */
header nav ul li a:hover,
header nav ul li a:focus-visible {
  background-color: #c13223;
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 50, 35, 0.2); /* evidenzia focus */
}

/* Hero */
.hero { background:#ffffff; padding:36px 0; }
.hero-inner { display:flex; align-items:center; gap:24px; }
.hero-left { flex:1; }
.hero-right {
    flex: 1;           /* rende il contenitore flex */
  flex-direction: column;  /* mantiene testo sopra pulsante */
  align-items: center;     /* centra pulsante e testo orizzontalmente */
  text-align: center;      /* centra anche i paragrafi */
}
.hero-left img { width:100%; height:auto; border-radius:8px; display:block; }
.hero-right h1 { margin:0 0 12px; text-align: center; font-size:1.8rem; }
.hero-right p { margin:0 0 18px; text-align: center; color:#333; }
.cta-whatsapp {
  display: inline-block;       /* permette di usare margin auto */
  margin: 0 auto;              /* centra orizzontalmente */
  padding: 12px 20px;
  background: #e23a27;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}

/* Hover e focus */
.cta-whatsapp:hover,
.cta-whatsapp:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px #c13223;
  outline: none;
}


/* Footer */
footer {
  background-color: #ffffff; /* sfondo bianco */
  color: #222222;            /* testo scuro leggibile */
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
  overflow-x: hidden;        /* evita scroll orizzontale su Safari */
}

/* Testo del footer */
footer .footer-text {
  color: #e23a27;  /* rosso del brand */
  margin-top: 20px;
  font-size: 0.9rem; /* unità relative per accessibilità */
}

/* Navbar Footer */
footer nav ul {
  display: flex;
  flex-wrap: wrap;       /* consente ai link di andare a capo su mobile */
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;      /* rimuove i pallini */
}

/* Link della navbar */
footer nav ul li a {
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  background-color: #e23a27;
  color: #ffffff;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.15s ease;
  font-size: 0.95rem;
  white-space: nowrap; /* impedisce la rottura delle parole */
}

/* Hover e focus (mouse + tastiera) */
footer nav ul li a:hover,
footer nav ul li a:focus-visible {
  background-color: #c13223;
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 50, 35, 0.2); /* visibilità focus */
}
/* Responsive */
@media (max-width: 768px) {
  .hero-inner { flex-direction:column; text-align:center; }
  .hero-left img { max-width:80%; margin:0 auto; }
  .hero-right h2 { font-size:1.4rem; }
  .image-grid img { height:140px; }
}

@media (max-width: 480px) {
  .cta-whatsapp { padding:10px 14px; font-size:0.95rem; }
  .image-grid img { height:120px; }
}