/* ==========================================================================
   NICA — foglio di stile unico
   Indice:
   1. Font          5. Testata (header)      9. Home
   2. Variabili     6. Pulsanti e pillole   10. Footer
   3. Base          7. Etichette e titoli   11. Movimento ridotto
   4. Layout        8. Sezioni         9b. Prodotto  9c. Chi siamo  9d. Contatti  9e. 404
   ========================================================================== */

/* 1. Font (self-hosted, licenza OFL: vedi assets/fonts/OFL.txt) ---------- */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-vf-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-vf-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Variabili --------------------------------------------------------- */

:root {
  /* Colori dai PDF di riferimento */
  --crema: #F5EAD9;
  --card: #FAF5ED;
  --beige: #EEDFC7;
  --marrone: #2A1C11;
  --ruggine: #893A11;
  --oliva: #3E4C1B;
  --verde-chiaro: #E2EACE;
  --pesca: #E8B389;
  --arancio: #E8682D;

  /* Derivati */
  --testo-2: #5A4636;
  --bordo: #E3D2B6;
  --rosso-allarme: #E5392A;
  --crema-tenue: rgba(245, 234, 217, 0.78);

  /* Tipografia */
  --font-titoli: "Fraunces", Georgia, "Times New Roman", serif;
  --font-testo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Misure */
  --max: 1200px;
  --gutter: 20px;
  --sezione: clamp(72px, 10vw, 136px);
  --raggio: 16px;
  --raggio-grande: 24px;
  --altezza-testata: 64px;
}

@media (min-width: 700px) {
  :root {
    --gutter: 32px;
    --altezza-testata: 76px;
  }
}

/* 3. Base -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--altezza-testata) + 16px);
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--marrone);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 700px) {
  body {
    font-size: 1.125rem;
  }
}

body.menu-aperto {
  overflow: hidden;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
ol,
ul,
figure {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--arancio);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta-al-contenuto {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--marrone);
  color: var(--crema);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}

.salta-al-contenuto:focus {
  top: 12px;
}

.visivamente-nascosto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 4. Layout ------------------------------------------------------------ */

.contenitore {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 5. Testata (header) --------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid var(--bordo);
}

.testata__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--altezza-testata);
}

.logo {
  display: inline-flex;
  align-items: center;
  color: var(--marrone);
  text-decoration: none;
  /* area di tocco comoda */
  padding-block: 10px;
}

.logo svg {
  width: auto;
  height: 22px;
  fill: currentColor;
}

@media (min-width: 700px) {
  .logo svg {
    height: 26px;
  }
}

.testata__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--marrone);
  cursor: pointer;
}

.testata__menu-icona {
  position: relative;
  width: 24px;
  height: 14px;
}

.testata__menu-icona::before,
.testata__menu-icona::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease, top 0.25s ease;
}

.testata__menu-icona::before { top: 0; }
.testata__menu-icona::after { top: 12px; }

.is-aperto .testata__menu-icona::before {
  top: 6px;
  transform: rotate(45deg);
}

.is-aperto .testata__menu-icona::after {
  top: 6px;
  transform: rotate(-45deg);
}

/* Menu: su mobile è un pannello a tutto schermo sotto la testata */
.menu {
  position: fixed;
  inset: var(--altezza-testata) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 40px var(--gutter);
  background: var(--crema);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.is-aperto .menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.menu__lista {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.menu__lista a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordo);
  font-family: var(--font-titoli);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.menu__lista a[aria-current="page"] {
  color: var(--ruggine);
}

@media (max-width: 859px) {
  .menu .pulsante {
    min-height: 56px;
    font-size: 1.125rem;
  }
}

@media (min-width: 860px) {
  .testata__menu-btn {
    display: none;
  }

  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .menu__lista {
    flex-direction: row;
    gap: 32px;
  }

  .menu__lista a {
    padding: 8px 0;
    border: 0;
    font-family: var(--font-testo);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.2s ease;
  }

  .menu__lista a:hover,
  .menu__lista a[aria-current="page"] {
    text-decoration-color: currentColor;
  }

  .menu__lista a[aria-current="page"] {
    color: var(--marrone);
  }
}

/* 6. Pulsanti e pillole ------------------------------------------------- */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Pulsante principale su fondi chiari */
.pulsante--pieno {
  background: var(--ruggine);
  color: var(--crema);
}

.pulsante--pieno:hover {
  background: #6F2E0D;
}

/* Pulsante principale su fondi scuri */
.pulsante--pesca {
  background: var(--pesca);
  color: var(--marrone);
}

.pulsante--pesca:hover {
  background: #F0C6A3;
}

/* Pulsante secondario su fondi chiari */
.pulsante--contorno-scuro {
  border-color: var(--marrone);
  color: var(--marrone);
}

.pulsante--contorno-scuro:hover {
  background: var(--marrone);
  color: var(--crema);
}

/* Pulsante secondario su fondi scuri */
.pulsante--contorno-chiaro {
  border-color: rgba(245, 234, 217, 0.5);
  color: var(--crema);
}

.pulsante--contorno-chiaro:hover {
  border-color: var(--crema);
  background: rgba(245, 234, 217, 0.08);
}

.pulsante--piccolo {
  min-height: 44px;
  padding: 8px 18px;
  font-size: 0.9375rem;
}

.gruppo-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 479px) {
  .gruppo-pulsanti .pulsante {
    width: 100%;
  }
}

.pillola {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--verde-chiaro);
  color: var(--oliva);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.link-testo {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.link-testo:hover {
  text-decoration-thickness: 3px;
}

/* 7. Etichette e titoli ------------------------------------------------- */

.etichetta {
  margin-bottom: 16px;
  color: var(--ruggine);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.titolo-1,
.titolo-2 {
  font-family: var(--font-titoli);
  font-weight: 800;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.titolo-1 {
  font-size: clamp(2.6rem, 1.4rem + 5vw, 4.75rem);
  line-height: 1.02;
}

.titolo-2 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.06;
}

.testo-guida {
  max-width: 34em;
  color: var(--testo-2);
  font-size: 1.125rem;
}

@media (min-width: 700px) {
  .testo-guida {
    font-size: 1.25rem;
  }
}

/* 8. Sezioni ------------------------------------------------------------ */

.sezione {
  padding-block: var(--sezione);
}

.sezione--scura {
  background: var(--marrone);
  color: var(--crema);
}

.sezione--beige {
  background: var(--beige);
}

.sezione--oliva {
  background: var(--oliva);
  color: var(--crema);
}

.sezione--scura .etichetta {
  color: var(--pesca);
}

.sezione--oliva .etichetta {
  color: var(--verde-chiaro);
}

/* 9. Home -------------------------------------------------------------- */

/* 9.1 Hero: pannello marrone + foto, come la copertina della presentazione */

.hero {
  position: relative;
  background: var(--marrone);
  color: var(--crema);
  overflow: hidden;
}

.hero__foto {
  position: relative;
  aspect-ratio: 4 / 3.3;
}

.hero__foto picture {
  height: 100%;
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 50%;
}

/* sfumatura verso il marrone, per unire foto e pannello */
.hero__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(42, 28, 17, 0) 55%, var(--marrone) 100%);
}

.hero__contenuto {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 72px;
}

.hero__testo {
  max-width: 36rem;
}

.hero .pillola {
  margin-bottom: 20px;
}

.hero__sottotitolo {
  margin-top: 20px;
  color: var(--pesca);
  font-family: var(--font-titoli);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
}

.hero__descrizione {
  margin-top: 12px;
  max-width: 30em;
  color: var(--crema-tenue);
}

.hero .gruppo-pulsanti {
  margin-top: 32px;
}

/* La notifica che "arriva": unico movimento automatico del sito */
.notifica {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  /* a cavallo tra foto e pannello */
  top: calc(var(--altezza-foto-mobile, 0px) - 48px);
  max-width: 420px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 2px 12px;
  padding: 14px 18px 14px 20px;
  border-radius: 22px;
  background: rgba(247, 245, 241, 0.97);
  color: #1D1D1F;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  line-height: 1.25;
  box-shadow: 0 14px 36px rgba(20, 12, 6, 0.35);
  animation: notifica-arriva 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.9s both;
}

/* barra rossa a sinistra, come nella notifica reale */
.notifica::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 4px;
  background: var(--rosso-allarme);
}

.notifica__icona {
  grid-row: span 3;
  width: 44px;
  height: 44px;
}

.notifica__app {
  color: #77736E;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.notifica__quando {
  color: #8E8A85;
  font-size: 0.8125rem;
}

.notifica__titolo {
  grid-column: 2 / 4;
  color: #C8261B;
  font-size: 1.125rem;
  font-weight: 700;
}

.notifica__testo {
  grid-column: 2 / 4;
  font-size: 0.9375rem;
}

@keyframes notifica-arriva {
  from {
    opacity: 0;
    translate: 0 -28px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* Mobile: la foto è in alto (proporzione 4:3.3) e la notifica sta sul suo bordo basso */
@media (max-width: 899px) {
  .hero {
    --altezza-foto-mobile: calc(100vw * 3.3 / 4);
  }

  .hero__contenuto {
    padding-top: 80px;
  }
}

/* Desktop: pannello a sinistra, foto a destra */
@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(600px, calc(100vh - var(--altezza-testata)), 780px);
  }

  .hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60%;
    aspect-ratio: auto;
  }

  .hero__foto img {
    object-position: 20% 50%;
  }

  .hero__foto::after {
    background: linear-gradient(to right, var(--marrone) 0%, rgba(42, 28, 17, 0.7) 14%, rgba(42, 28, 17, 0) 38%);
  }

  .hero__contenuto {
    padding-block: 96px;
  }

  .hero__testo {
    max-width: 34rem;
  }

  .notifica {
    top: 15%;
    left: 64.5%;
    right: auto;
    width: min(400px, 33vw);
  }
}

@media (min-width: 1280px) {
  .hero__testo {
    max-width: 38rem;
  }
}

/* 9.2 Il problema */

.problema__griglia {
  display: grid;
  gap: 40px;
}

.problema__griglia .testo-guida {
  margin-top: 24px;
}

.dato {
  padding: 32px 28px 24px;
  border-radius: var(--raggio-grande);
  background: var(--beige);
}

.dato__numero {
  color: var(--ruggine);
  font-family: var(--font-titoli);
  font-size: clamp(3.25rem, 2rem + 6vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.dato__numero small {
  display: block;
  font-size: 0.45em;
  letter-spacing: 0;
}

.dato__cosa {
  margin-top: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.dato__nota {
  margin-top: 6px;
  color: var(--testo-2);
}

.dato__fonte {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(137, 58, 17, 0.2);
  color: var(--testo-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .problema__griglia {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 64px;
  }

  .dato {
    padding: 48px 44px 32px;
  }
}

/* 9.3 L'idea e come funziona */

.idea__frase {
  max-width: 21em;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  line-height: 1.1;
}

.evidenza {
  color: var(--pesca);
}

.idea__griglia {
  display: grid;
  gap: 48px;
  margin-top: clamp(56px, 8vw, 96px);
}

/* I passi, uniti da una linea come i sensori lungo il perimetro */
.passi {
  position: relative;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 36px;
}

.passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: -44px;
  width: 2px;
  background: rgba(232, 179, 137, 0.35);
}

.passo {
  position: relative;
  padding-left: 48px;
}

.passo::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pesca);
  box-shadow: 0 0 0 6px var(--oliva);
}

.passo__numero {
  display: block;
  color: var(--pesca);
  font-family: var(--font-titoli);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.passo__titolo {
  margin-top: 8px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.passo__testo {
  margin-top: 6px;
  max-width: 26em;
  color: var(--crema-tenue);
}

.idea__figura img {
  width: 100%;
  max-width: 560px;
}

.idea__figura figcaption {
  margin-top: 8px;
  max-width: 30em;
  color: var(--crema-tenue);
  font-size: 0.9375rem;
}

.idea__link {
  margin-top: 40px;
  color: var(--pesca);
}

@media (min-width: 900px) {
  .idea__griglia {
    grid-template-columns: 5fr 6fr;
    align-items: end;
    gap: 64px;
  }

  .idea__figura {
    padding-bottom: 8px;
  }
}

/* 9.4 Teaser progetto pilota */

.pilota {
  padding: 36px 24px;
  border-radius: var(--raggio-grande);
  background: var(--beige);
}

.pilota .titolo-2 {
  margin-top: 20px;
}

.pilota .testo-guida {
  margin-top: 16px;
}

.calendario {
  position: relative;
  list-style: none;
  margin-top: 40px;
  padding: 0;
  display: grid;
  gap: 20px;
}

/* linea verticale tra le tappe (mobile) */
.tappa:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: -28px;
  width: 2px;
  background: #DDB792;
}

.tappa {
  position: relative;
  padding-left: 36px;
}

.tappa::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ruggine);
  box-shadow: 0 0 0 4px var(--anello, var(--beige));
}

.tappa__quando {
  display: block;
  color: var(--ruggine);
  font-weight: 700;
  line-height: 1.4;
}

.tappa__cosa {
  display: block;
  line-height: 1.4;
}

.tappa--attiva::before {
  background: var(--oliva);
}

.tappa--attiva .tappa__quando {
  color: var(--oliva);
}

.tappa--attiva .tappa__cosa {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--verde-chiaro);
  color: var(--oliva);
  font-weight: 700;
}

.pilota .gruppo-pulsanti {
  margin-top: 40px;
}

@media (min-width: 700px) {
  .pilota {
    padding: 56px 48px;
  }
}

/* calendario orizzontale come nella presentazione */
@media (min-width: 960px) {
  .pilota {
    padding: 64px;
  }

  .calendario {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 56px;
  }

  .tappa:not(:last-child)::after {
    left: 12px;
    right: -16px;
    top: 6px;
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .tappa {
    padding-left: 0;
    padding-top: 32px;
  }

  .tappa::before {
    top: 0;
  }
}

/* 9.5 Chiusura */

.chiusura .titolo-2 {
  max-width: 14em;
}

.chiusura__testo {
  margin-top: 20px;
  max-width: 32em;
  color: var(--crema-tenue);
  font-size: 1.125rem;
}

.chiusura .gruppo-pulsanti {
  margin-top: 36px;
}

@media (min-width: 700px) {
  .chiusura__testo {
    font-size: 1.25rem;
  }
}

/* 9b. Prodotto ---------------------------------------------------------- */

/* 9b.1 Il sensore */

.sezione.sensore {
  padding-top: clamp(40px, 6vw, 88px);
}

.sensore__griglia {
  display: grid;
  gap: 40px;
}

.elenco-punti {
  list-style: none;
  margin-top: 28px;
  padding: 0;
  font-size: 1.125rem;
}

.elenco-punti li {
  position: relative;
  max-width: 28em;
  padding-left: 28px;
}

.elenco-punti li + li {
  margin-top: 12px;
}

.elenco-punti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ruggine);
}

.sensore__figura img {
  width: 100%;
  border-radius: var(--raggio-grande);
}

.sensore .titolo-1 {
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
}

@media (max-width: 899px) {
  .sensore__figura img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
}

.sensore__figura figcaption,
.quanti__figura figcaption {
  margin-top: 10px;
  color: var(--testo-2);
  font-size: 0.875rem;
}

@media (min-width: 700px) {
  .elenco-punti {
    font-size: 1.25rem;
  }
}

@media (min-width: 900px) {
  .sensore__griglia {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
  }
}

/* 9b.2 Come funziona, con il telefono */

.funziona__griglia {
  display: grid;
  gap: 56px;
}

.funziona__passi {
  margin-top: 40px;
}

.nota-verde {
  margin-top: 40px;
  max-width: 34em;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--verde-chiaro);
  color: var(--oliva);
  font-size: 1rem;
}

.telefono-figura {
  justify-self: center;
}

/* cornice di smartphone stilizzata */
.telefono {
  position: relative;
  width: min(280px, 72vw);
  padding: 9px;
  border-radius: 46px;
  background: #15100B;
  box-shadow: 0 0 0 2px rgba(245, 234, 217, 0.16);
}

.telefono::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  width: 30%;
  height: 22px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
}

.telefono picture img {
  width: 100%;
  border-radius: 37px;
}

/* la notifica, leggibile, sta dentro lo schermo sopra quella dell'immagine */
.telefono .notifica {
  top: 28%;
  background: #F7F5F1;
  left: 18px;
  right: 18px;
  width: auto;
  max-width: none;
  gap: 1px 8px;
  padding: 12px 12px 12px 16px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  animation: none;
}

.telefono .notifica__icona {
  width: 30px;
  height: 30px;
}

.telefono .notifica__titolo {
  font-size: 0.9375rem;
}

.telefono .notifica__testo {
  font-size: 0.75rem;
}

@media (min-width: 900px) {
  .funziona__griglia {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 64px;
  }

  .telefono {
    width: 300px;
  }
}

/* 9b.3 Quanti sensori: schema del campo */

.quanti__griglia {
  display: grid;
  gap: 40px;
}

.quanti__griglia .testo-guida {
  margin-top: 24px;
}

.quanti__griglia .testo-guida + .testo-guida {
  margin-top: 12px;
}

.quanti__figura {
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  background: var(--card);
}

.schema {
  width: 100%;
  height: auto;
}

.schema__copertura {
  fill: rgba(232, 104, 45, 0.1);
  stroke: rgba(232, 104, 45, 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.schema__campo {
  fill: #B9C98F;
}

.schema__filare {
  stroke: #9AAE68;
  stroke-width: 1.5;
}

.schema__perimetro {
  fill: none;
  stroke: var(--arancio);
  stroke-width: 3;
}

.schema__sensore {
  fill: var(--ruggine);
  stroke: var(--card);
  stroke-width: 2;
}

@media (min-width: 900px) {
  .quanti__griglia {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 64px;
  }

  .quanti__figura {
    padding: 32px;
  }
}

/* 9b.4 Progetto pilota: calendario grande e condizioni */

.pilota__titolo {
  margin-top: 20px;
}

.calendario--grande {
  --anello: var(--crema);
  margin-top: 48px;
}

.calendario--grande .tappa__quando {
  font-size: 1.125rem;
}

.condizioni__titolo {
  margin-top: clamp(72px, 9vw, 112px);
}

.condizioni {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.condizioni__card {
  padding: 32px 24px;
  border-radius: var(--raggio-grande);
}

.condizioni__card--offriamo {
  background: var(--verde-chiaro);
}

.condizioni__card--chiediamo {
  background: var(--beige);
}

.condizioni__nome {
  font-family: var(--font-titoli);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.condizioni__card--offriamo .condizioni__nome {
  color: var(--oliva);
}

.condizioni__card--chiediamo .condizioni__nome {
  color: var(--ruggine);
}

.condizioni__lista {
  list-style: none;
  margin-top: 16px;
  padding: 0;
}

.condizioni__lista li {
  padding: 12px 0;
  border-top: 1px solid rgba(42, 28, 17, 0.12);
}

.condizioni__lista li:first-child {
  border-top: 0;
}

@media (min-width: 760px) {
  .condizioni {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .condizioni__card {
    padding: 40px;
  }
}

/* 9b.5 Scheda prezzi */

.prezzi {
  margin-top: 40px;
  padding: 32px 24px;
  border-radius: var(--raggio-grande);
  background: var(--marrone);
  color: var(--crema);
}

.prezzi__intestazione {
  margin-bottom: 8px;
  color: var(--pesca);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prezzi__riga {
  display: grid;
  gap: 6px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(245, 234, 217, 0.15);
}

.prezzi__voce {
  font-size: 1.25rem;
  font-weight: 700;
}

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--arancio);
  color: var(--marrone);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  vertical-align: 0.2em;
}

.prezzi__pieno {
  color: rgba(245, 234, 217, 0.6);
  font-size: 1.0625rem;
}

/* prezzo pieno barrato con una riga obliqua arancione, come nei PDF */
.prezzi__barrato {
  position: relative;
  display: inline-block;
  margin-right: 4px;
  font-family: var(--font-titoli);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}

.prezzi__barrato::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 52%;
  height: 3px;
  border-radius: 2px;
  background: var(--arancio);
  transform: rotate(-14deg);
}

.prezzi__pilota {
  margin-top: 4px;
}

.prezzi__cifra {
  font-family: var(--font-titoli);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
}

.prezzi__unita {
  display: block;
  margin-top: 6px;
  color: var(--crema-tenue);
  font-size: 0.9375rem;
}

.prezzi__nota {
  margin-top: 24px;
  color: var(--crema-tenue);
  font-size: 0.9375rem;
}

@media (min-width: 760px) {
  .prezzi {
    padding: 48px 56px;
  }

  .prezzi__riga {
    grid-template-columns: 1fr auto minmax(240px, auto);
    align-items: center;
    gap: 40px;
  }

  .prezzi__pilota {
    margin-top: 0;
    text-align: right;
  }
}

/* 9b.6 Avvertenza (preallarme, non spegnimento) */

.avvertenza {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--bordo);
  border-left: 6px solid var(--ruggine);
  border-radius: 12px;
  background: var(--card);
  font-size: 1.0625rem;
}

@media (min-width: 700px) {
  .avvertenza {
    padding: 24px 32px;
    font-size: 1.125rem;
  }
}

/* 9c. Chi siamo --------------------------------------------------------- */

.sezione.perche {
  padding-top: clamp(40px, 6vw, 88px);
}

.perche__testo {
  margin-top: 28px;
  max-width: 38em;
  color: var(--testo-2);
  font-size: 1.125rem;
}

.perche__testo p + p {
  margin-top: 16px;
}

/* la prima frase, in evidenza */
.perche__testo .perche__apertura {
  max-width: 30em;
  margin-bottom: 28px;
  color: var(--marrone);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.45;
}

@media (min-width: 700px) {
  .perche__testo {
    font-size: 1.1875rem;
  }
}

.team {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.persona {
  padding: 16px 16px 32px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  background: var(--card);
}

/* foto in formato verticale 4:5 */
.persona__foto {
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--beige);
}

.persona__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.persona__nome,
.persona__ruolo,
.persona__bio {
  padding-inline: 8px;
}

.persona__nome {
  margin-top: 24px;
  font-family: var(--font-titoli);
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: 800;
  line-height: 1.15;
}

.persona__ruolo {
  margin-top: 4px;
  color: var(--ruggine);
  font-weight: 700;
}

.persona__bio {
  margin-top: 12px;
  color: var(--testo-2);
}

/* Tablet e PC: schede affiancate, della stessa altezza */
@media (min-width: 760px) {
  .team {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .persona {
    padding: 20px 20px 36px;
  }

  .persona__nome,
  .persona__ruolo,
  .persona__bio {
    padding-inline: 12px;
  }
}

/* PC: foto a sinistra e testi a destra, a tutta larghezza */
@media (min-width: 1000px) {
  .persona {
    display: grid;
    grid-template-columns: minmax(170px, 36%) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    padding: 20px;
  }

  .persona__foto {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
  }

  .persona__nome,
  .persona__ruolo,
  .persona__bio {
    grid-column: 2;
    padding-inline: 0;
  }

  .persona__nome {
    margin-top: 12px;
    font-size: 1.5rem;
  }
}

/* 9d. Contatti ---------------------------------------------------------- */

.sezione.contatti {
  padding-top: clamp(40px, 6vw, 88px);
}

.contatti__intro {
  margin-top: 24px;
}

.contatti__azioni {
  margin-top: 40px;
  max-width: 880px;
}

/* pulsanti grandi, comodi da toccare col pollice */
.pulsante-contatto {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 22px;
  border: 2px solid var(--marrone);
  border-radius: 14px;
  color: var(--marrone);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pulsante-contatto:hover {
  background: var(--marrone);
  color: var(--crema);
}

.pulsante-contatto__icona {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pulsante-contatto__pieno {
  fill: currentColor;
  stroke: none;
}

.pulsante-contatto--email {
  border-color: var(--ruggine);
  background: var(--ruggine);
  color: var(--crema);
  font-size: 1.25rem;
}

.pulsante-contatto--email:hover {
  border-color: #6F2E0D;
  background: #6F2E0D;
}

.pulsante-contatto--whatsapp {
  border-color: var(--oliva);
  background: var(--oliva);
  color: var(--crema);
}

.pulsante-contatto--whatsapp:hover {
  border-color: #2F3A14;
  background: #2F3A14;
}

.contatti__email {
  margin-top: 12px;
  color: var(--testo-2);
  font-size: 1rem;
}

.contatti__email a {
  color: var(--marrone);
  font-weight: 600;
  text-underline-offset: 4px;
}

.contatti__persone {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.persona-contatto {
  padding: 24px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-grande);
  background: var(--card);
}

.persona-contatto__nome {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

.persona-contatto__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* su mobile un pulsante per riga, a tutta larghezza: comodo da toccare */
.persona-contatto__azioni .pulsante-contatto {
  flex: 1 1 100%;
  justify-content: center;
}

.promemoria {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  max-width: 880px;
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: var(--raggio);
  background: var(--verde-chiaro);
  color: var(--oliva);
}

@media (min-width: 760px) {
  .contatti__persone {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .persona-contatto {
    padding: 28px;
  }

  .pulsante-contatto--email {
    display: inline-flex;
    padding-inline: 32px;
  }

  /* su PC prendono solo la larghezza del testo */
  .persona-contatto__azioni .pulsante-contatto {
    flex: 0 0 auto;
    padding-inline: 24px;
  }
}

/* 9e. Pagina non trovata (404) ------------------------------------------ */

.non-trovata {
  min-height: 60vh;
}

.non-trovata__testo {
  margin-top: 20px;
}

.non-trovata__pulsanti {
  margin-top: 36px;
}

/* 10. Footer ----------------------------------------------------------- */

.piede {
  padding-block: 56px 32px;
  background: var(--beige);
  color: var(--marrone);
  font-size: 0.9375rem;
}

.piede__griglia {
  display: grid;
  gap: 36px;
}

.piede .logo svg {
  height: 24px;
}

.piede__nome {
  margin-top: 8px;
  color: var(--testo-2);
}

.piede__titolo {
  margin-bottom: 10px;
  color: var(--ruggine);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.piede__lista {
  list-style: none;
  padding: 0;
}

.piede__lista a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}

.piede__lista a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.piede__fondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid rgba(42, 28, 17, 0.15);
  color: var(--testo-2);
  font-size: 0.875rem;
}

@media (min-width: 760px) {
  .piede__griglia {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
  }
}

/* 11. Movimento ridotto ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}