/* =========================================================
   AGORIÀMO — Design system
   Palette "Tramonto Contemporaneo, variante Ibrida"
   Font: Familjen Grotesk (titoli e corpo testo)
   Target: adulti 65-75 anni — accessibilità prioritaria
   ========================================================= */

:root {
  /* --- Colori brand --- */
  --petrolio: #1B3A4B;
  --petrolio-90: #16303e;
  --tramonto: #EE7F38;
  --tramonto-dark: #d76a26;
  --teal: #4A9E94;
  --teal-dark: #3d857c;
  --panna: #F5F1EB;
  --pesca: #FAE8D8;
  --bianco: #FFFFFF;

  /* --- Ruoli semantici --- */
  --colore-testo: var(--petrolio);
  --colore-testo-soft: #3d5666;
  --colore-sfondo: var(--panna);
  --colore-sfondo-alt: var(--pesca);
  --colore-sfondo-scuro: var(--petrolio);
  --colore-focus: #1d6f63;

  /* --- Tipografia --- */
  --font-principale: "Familjen Grotesk", Arial, Helvetica, sans-serif;

  --fs-base: 19px;
  --lh-base: 1.65;

  --fs-h1: clamp(3rem, 5.5vw + 1rem, 5.75rem);
  --fs-h2: clamp(2.3rem, 3.4vw + 1rem, 3.6rem);
  --fs-h3: clamp(1.5rem, 1.3vw + 1rem, 1.9rem);
  --fs-lead: clamp(1.2rem, 0.7vw + 1rem, 1.5rem);
  --fs-small: 0.9em;

  --lh-heading: 1.05;

  /* --- Spaziature --- */
  --spazio-xs: 0.5rem;
  --spazio-sm: 1rem;
  --spazio-md: 1.75rem;
  --spazio-lg: 3rem;
  --spazio-xl: 5rem;
  --spazio-xxl: 7.5rem;

  --raggio-card: 24px;
  --raggio-btn: 16px;
  --raggio-badge: 999px;

  --touch-min: 44px;

  --container-max: 1180px;

  --ombra-card: 0 12px 32px rgba(27, 58, 75, 0.08);
  --bordo-soft: 1px solid rgba(27, 58, 75, 0.1);

  /* --- Gradienti (solo combinazioni verificate per contrasto AA) --- */
  --grad-tramonto: linear-gradient(135deg, #F4A261 0%, #EE7F38 100%);
  --grad-teal: linear-gradient(135deg, #6FBFB4 0%, #4A9E94 100%);
  --grad-petrolio: linear-gradient(150deg, #234a5f 0%, #142a37 100%);
  --grad-petrolio-teal: linear-gradient(135deg, #1B3A4B 0%, #3d857c 100%);
  --grad-teal-petrolio: linear-gradient(135deg, #3d857c 0%, #1B3A4B 100%);
  --grad-warm: linear-gradient(135deg, #FCEFE2 0%, #FAE8D8 100%);

  --ombra-glow-tramonto: 0 20px 45px -12px rgba(238, 127, 56, 0.45);
  --ombra-glow-teal: 0 20px 45px -12px rgba(74, 158, 148, 0.4);
  --ombra-glow-petrolio: 0 25px 55px -15px rgba(27, 58, 75, 0.45);
  --ombra-lift: 0 30px 60px -22px rgba(27, 58, 75, 0.3);
}

/* =========================================================
   Reset essenziale
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 96px;
}

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

body {
  margin: 0;
  font-family: var(--font-principale);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-principale);
  font-weight: 600;
  line-height: var(--lh-heading);
  margin: 0 0 var(--spazio-sm);
  color: var(--petrolio);
}

h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0 0 var(--spazio-sm);
}

a {
  color: var(--teal-dark);
  text-underline-offset: 3px;
}

a:not([class]) {
  color: var(--teal-dark);
}

ul, ol {
  padding-left: 1.3em;
}

/* --- Focus visibile sempre --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--colore-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   Utility di layout
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--spazio-md);
}

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

.sezione {
  position: relative;
}

.sezione--alt {
  background: var(--pesca);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sezione--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(35% 45% at 92% 0%, rgba(74, 158, 148, 0.18), transparent 70%),
    radial-gradient(30% 40% at 4% 100%, rgba(238, 127, 56, 0.15), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.sezione--scura {
  background: var(--petrolio);
  color: var(--panna);
}

.sezione--scura h2,
.sezione--scura h3 {
  color: var(--bianco);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--tramonto-dark);
  background: var(--grad-warm);
  border: 1.5px solid rgba(238, 127, 56, 0.3);
  padding: 0.5em 1.2em;
  border-radius: var(--raggio-badge);
  margin-bottom: var(--spazio-md);
}

.eyebrow::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 3px;
  background: var(--tramonto);
  flex-shrink: 0;
}

.sezione--scura .eyebrow {
  background: rgba(245, 241, 235, 0.14);
  color: var(--pesca);
}

.intestazione-sezione {
  max-width: 46ch;
  margin-bottom: var(--spazio-lg);
}

.intestazione-sezione--centro {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--colore-testo-soft);
}

.sezione--scura .lead {
  color: rgba(245, 241, 235, 0.85);
}

/* =========================================================
   Skip link
   ========================================================= */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -120px;
  background: var(--petrolio);
  color: var(--bianco);
  padding: 0.9em 1.4em;
  border-radius: var(--raggio-btn);
  font-weight: 700;
  white-space: nowrap;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* =========================================================
   Bottoni
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: var(--touch-min);
  padding: 0.85em 1.6em;
  border-radius: var(--raggio-btn);
  font-family: var(--font-principale);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  line-height: 1.2;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primario {
  background: var(--grad-tramonto);
  color: var(--petrolio);
  box-shadow: var(--ombra-glow-tramonto);
}

.btn-primario:hover {
  box-shadow: 0 26px 50px -14px rgba(238, 127, 56, 0.55);
}

.btn-secondario {
  background: transparent;
  color: var(--petrolio);
  border-color: var(--petrolio);
}

.btn-secondario:hover {
  background: var(--petrolio);
  color: var(--bianco);
}

.sezione--scura .btn-secondario {
  color: var(--panna);
  border-color: var(--panna);
}

.sezione--scura .btn-secondario:hover {
  background: var(--panna);
  color: var(--petrolio);
}

.btn-teal {
  background: var(--teal);
  color: var(--bianco);
}

.btn-teal:hover {
  background: var(--teal-dark);
}

.btn-blocco {
  width: 100%;
}

/* =========================================================
   Header
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(245, 241, 235, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--bordo-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-md);
  padding-block: 0.9rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
  color: var(--petrolio);
  font-weight: 700;
  font-size: 1.4rem;
}

.logo__icona {
  width: 40px;
  height: 40px;
  color: var(--teal);
  flex-shrink: 0;
}

.logo__testo em {
  font-style: normal;
  color: var(--tramonto-dark);
}

.nav-principale {
  display: flex;
  align-items: center;
  gap: var(--spazio-lg);
}

.nav-principale__lista {
  display: flex;
  gap: var(--spazio-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-principale__lista a {
  color: var(--petrolio);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5em 0.2em;
  border-bottom: 2px solid transparent;
}

.nav-principale__lista a:hover {
  border-bottom-color: var(--tramonto);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--touch-min);
  height: var(--touch-min);
  background: transparent;
  border: 2px solid var(--petrolio);
  border-radius: 10px;
  cursor: pointer;
}

.nav-toggle__icona,
.nav-toggle__icona::before,
.nav-toggle__icona::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--petrolio);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle__icona::before { position: absolute; top: -7px; }
.nav-toggle__icona::after { position: absolute; top: 7px; }

.header--aperto .nav-toggle__icona { background: transparent; }
.header--aperto .nav-toggle__icona::before { transform: translateY(7px) rotate(45deg); }
.header--aperto .nav-toggle__icona::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-principale {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 340px);
    height: 100vh;
    background: var(--panna);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6rem var(--spazio-md) var(--spazio-md);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -12px 0 30px rgba(0,0,0,0.12);
  }

  .header--aperto .nav-principale {
    transform: translateX(0);
  }

  .nav-principale__lista {
    flex-direction: column;
    gap: var(--spazio-sm);
  }

  .nav-principale__lista a {
    display: block;
    font-size: 1.2rem;
    padding: 0.7em 0;
  }

  .nav-principale .btn {
    margin-top: var(--spazio-md);
  }

  .nav-toggle {
    display: inline-flex;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding-block: var(--spazio-xl) var(--spazio-xxl);
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -15% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(40% 50% at 88% 8%, rgba(238, 127, 56, 0.32), transparent 70%),
    radial-gradient(32% 40% at 8% 65%, rgba(74, 158, 148, 0.26), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero__eco-logo {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 460px;
  height: 460px;
  color: var(--petrolio);
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__eco-logo {
    animation: rotazione-lenta 90s linear infinite;
  }
}

@keyframes rotazione-lenta {
  to { transform: rotate(360deg); }
}

.hero__griglia {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--spazio-xl);
  align-items: center;
}

.hero__cta-gruppo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-sm);
  margin-top: var(--spazio-md);
}

.hero__sub {
  max-width: 52ch;
}

.hero__illustrazione {
  width: 108%;
  max-width: 108%;
  height: auto;
  --hover-transform: rotate(2deg);
  filter: drop-shadow(0 35px 55px rgba(27, 58, 75, 0.22));
}

.hero__widget {
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  box-shadow: var(--ombra-lift);
  padding: var(--spazio-md);
  margin-top: var(--spazio-lg);
  transform: rotate(-1deg);
}

.hero__widget h3 {
  font-size: 1.15rem;
  margin-bottom: var(--spazio-sm);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.hero__widget h3::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tramonto);
}

.hero__appuntamenti {
  list-style: none;
  margin: 0 0 var(--spazio-sm);
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.hero__appuntamento {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem;
  border-radius: 12px;
  background: var(--panna);
}

.hero__appuntamento-giorno {
  font-weight: 700;
  color: var(--teal-dark);
  font-size: 0.95rem;
  white-space: nowrap;
}

.hero__appuntamento-titolo {
  font-weight: 600;
}

.hero__widget-link {
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 900px) {
  .hero__griglia {
    grid-template-columns: 1fr;
  }
  .hero__illustrazione {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* =========================================================
   Statistiche (perché esistiamo)
   ========================================================= */
.statistiche {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(2, auto);
  gap: var(--spazio-md);
  margin-block: var(--spazio-lg);
}

.statistica {
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  padding: var(--spazio-lg) var(--spazio-md);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.statistica:hover {
  --hover-transform: translateY(-6px);
  box-shadow: var(--ombra-lift);
}

.statistica:first-child {
  grid-row: 1 / 3;
  background: var(--grad-petrolio);
  color: var(--bianco);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--ombra-glow-petrolio);
  text-align: left;
}

.statistica__numero {
  display: block;
  font-size: clamp(2.6rem, 3.4vw + 1rem, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--tramonto), var(--tramonto-dark));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 0.3em;
}

.statistica:first-child .statistica__numero {
  font-size: clamp(4rem, 6.5vw + 1rem, 6.5rem);
  background: none;
  -webkit-text-fill-color: var(--bianco);
  color: var(--bianco);
}

.statistica__etichetta {
  color: var(--colore-testo-soft);
  font-size: 1.05rem;
  font-weight: 600;
}

.statistica:first-child .statistica__etichetta {
  color: rgba(245, 241, 235, 0.85);
  font-size: 1.2rem;
}

.callout {
  background: var(--grad-teal);
  color: var(--petrolio);
  border-radius: var(--raggio-card);
  padding: var(--spazio-md) var(--spazio-lg);
  font-size: var(--fs-lead);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--ombra-glow-teal);
}

@media (max-width: 760px) {
  .statistiche {
    grid-template-columns: 1fr;
  }
  .statistica:first-child {
    grid-row: auto;
  }
}

/* =========================================================
   Come funziona — step
   ========================================================= */
.step-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spazio-md);
  counter-reset: step;
}

.step {
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  padding: var(--spazio-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step:hover {
  --hover-transform: translateY(-6px);
  box-shadow: var(--ombra-lift);
}

.step__numero {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-tramonto);
  color: var(--petrolio);
  font-weight: 700;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spazio-sm);
  box-shadow: var(--ombra-glow-tramonto);
}

@media (min-width: 901px) {
  .step:nth-child(2n) {
    margin-top: 2rem;
  }
}

.riquadro-rassicurazione {
  margin-top: var(--spazio-lg);
  background: var(--grad-warm);
  border: 2px solid rgba(238, 127, 56, 0.18);
  border-radius: var(--raggio-card);
  padding: var(--spazio-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-lg);
  align-items: start;
}

.riquadro-rassicurazione__lista li {
  background: var(--bianco);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 8px 20px -10px rgba(27, 58, 75, 0.15);
}

.riquadro-rassicurazione__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-sm);
}

.riquadro-rassicurazione__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  font-weight: 600;
}

.riquadro-rassicurazione__lista svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--teal-dark);
  margin-top: 0.1em;
}

@media (max-width: 900px) {
  .step-lista {
    grid-template-columns: 1fr 1fr;
  }
  .riquadro-rassicurazione {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .step-lista {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Feature (cosa trovi ogni settimana)
   ========================================================= */
.feature-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spazio-md);
}

.feature {
  padding: var(--spazio-md);
  transition: transform 0.25s ease;
}

.feature:hover {
  --hover-transform: translateY(-6px);
}

.feature__icona {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--grad-tramonto);
  color: var(--petrolio);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spazio-sm);
  box-shadow: var(--ombra-glow-tramonto);
}

.feature:nth-child(2) .feature__icona {
  background: var(--grad-teal);
  box-shadow: var(--ombra-glow-teal);
}

.feature:nth-child(3) .feature__icona {
  background: var(--grad-petrolio);
  color: var(--bianco);
  box-shadow: var(--ombra-glow-petrolio);
}

.feature__icona svg {
  width: 32px;
  height: 32px;
}

@media (max-width: 760px) {
  .feature-lista {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Categorie di corsi
   ========================================================= */
.categorie-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spazio-md);
}

.categoria {
  text-decoration: none;
  color: var(--petrolio);
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  padding: var(--spazio-lg) var(--spazio-md);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.categoria:hover {
  --hover-transform: translateY(-8px) scale(1.02);
}

.categoria__icona {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--spazio-sm);
  color: var(--teal-dark);
}

.categoria__nome {
  font-weight: 700;
  font-size: 1.3rem;
  display: block;
}

.categoria__conteggio {
  color: var(--colore-testo-soft);
  font-weight: 600;
}

/* Varianti colore per categoria — combinazioni sempre verificate AA */
.categoria--salute {
  background: var(--grad-tramonto);
  box-shadow: var(--ombra-glow-tramonto);
}
.categoria--salute .categoria__icona { color: var(--petrolio); }
.categoria--salute .categoria__conteggio { color: rgba(27, 58, 75, 0.72); }

.categoria--tecnologia {
  background: var(--grad-teal);
  box-shadow: var(--ombra-glow-teal);
}
.categoria--tecnologia .categoria__icona { color: var(--petrolio); }
.categoria--tecnologia .categoria__conteggio { color: rgba(27, 58, 75, 0.72); }

.categoria--cultura {
  background: var(--grad-petrolio);
  color: var(--bianco);
  box-shadow: var(--ombra-glow-petrolio);
}
.categoria--cultura .categoria__icona { color: var(--bianco); }
.categoria--cultura .categoria__conteggio { color: rgba(245, 241, 235, 0.75); }

.categoria--diritti {
  background: var(--grad-teal-petrolio);
  color: var(--bianco);
  box-shadow: var(--ombra-glow-petrolio);
}
.categoria--diritti .categoria__icona { color: var(--bianco); }
.categoria--diritti .categoria__conteggio { color: rgba(245, 241, 235, 0.75); }

@media (max-width: 760px) {
  .categorie-lista {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   Calendario
   ========================================================= */
.calendario-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-sm);
}

.calendario-item {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: var(--spazio-md);
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  padding: var(--spazio-sm) var(--spazio-md);
}

.calendario-item__data {
  font-weight: 700;
  color: var(--teal-dark);
}

.calendario-item__titolo {
  font-weight: 600;
}

@media (max-width: 760px) {
  .calendario-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    text-align: left;
  }
}

/* =========================================================
   Doppio target
   ========================================================= */
.doppio-target {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-md);
}

.target-card {
  border-radius: var(--raggio-card);
  padding: var(--spazio-lg);
}

.target-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.target-card--anziano {
  background: var(--bianco);
  border: 2px solid var(--petrolio);
  box-shadow: var(--ombra-lift);
}

.target-card--anziano:hover {
  --hover-transform: translateY(-6px);
}

.target-card--figlio {
  background: var(--grad-petrolio);
  color: var(--panna);
  box-shadow: var(--ombra-glow-petrolio);
}

.target-card--figlio:hover {
  --hover-transform: translateY(-6px);
}

.target-card--figlio h3 {
  color: var(--bianco);
}

.target-card blockquote {
  margin: var(--spazio-md) 0;
  padding-left: 1em;
  border-left: 4px solid var(--tramonto);
  font-style: italic;
  font-size: var(--fs-lead);
}

@media (max-width: 760px) {
  .doppio-target {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Testimonianza
   ========================================================= */
.testimonianza {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.testimonianza blockquote {
  font-size: clamp(1.7rem, 2.2vw + 1rem, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spazio-sm);
  color: var(--petrolio);
}

.testimonianza cite {
  font-style: normal;
  color: var(--colore-testo-soft);
}

/* =========================================================
   Prezzi
   ========================================================= */
.prezzi-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-md);
  max-width: 900px;
  margin-inline: auto;
}

.piano {
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: 2px solid rgba(27,58,75,0.12);
  padding: var(--spazio-lg);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.piano:hover {
  --hover-transform: translateY(-6px);
}

.piano--evidenza {
  background: var(--grad-petrolio);
  color: var(--bianco);
  border: none;
  box-shadow: var(--ombra-glow-petrolio);
  --hover-transform: scale(1.04);
}

.piano--evidenza:hover {
  --hover-transform: scale(1.04) translateY(-6px);
}

.piano--evidenza h3 {
  color: var(--bianco);
}

.piano--evidenza .piano__lista li {
  color: rgba(245, 241, 235, 0.9);
}

.piano__badge {
  position: absolute;
  top: -14px;
  left: var(--spazio-lg);
  background: var(--grad-tramonto);
  color: var(--petrolio);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35em 1em;
  border-radius: var(--raggio-badge);
  box-shadow: var(--ombra-glow-tramonto);
}

.piano__prezzo {
  font-size: clamp(2.6rem, 3.6vw + 1rem, 3.6rem);
  font-weight: 700;
  color: var(--petrolio);
  margin: var(--spazio-sm) 0;
  letter-spacing: -0.02em;
}

.piano--evidenza .piano__prezzo {
  color: var(--bianco);
}

.piano__prezzo span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--colore-testo-soft);
}

.piano--evidenza .piano__prezzo span {
  color: rgba(245, 241, 235, 0.75);
}

.piano__lista {
  list-style: none;
  margin: var(--spazio-md) 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.piano__lista li {
  display: flex;
  gap: 0.6em;
}

.piano__lista li::before {
  content: "✓";
  color: var(--teal-dark);
  font-weight: 700;
}

@media (max-width: 760px) {
  .prezzi-lista {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Team
   ========================================================= */
.team-lista {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spazio-md);
}

.team-card {
  text-align: center;
}

.team-card {
  transition: transform 0.25s ease;
}

.team-card:hover {
  --hover-transform: translateY(-6px);
}

.team-card__avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto var(--spazio-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--bianco);
  box-shadow: var(--ombra-lift);
}

@media (min-width: 901px) {
  .team-card:nth-child(odd) {
    --hover-transform: translateY(-1.5rem);
  }
  .team-card:nth-child(odd):hover {
    --hover-transform: translateY(-1.5rem) translateY(-6px);
  }
}

.team-card__ruolo {
  color: var(--tramonto-dark);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4em;
}

.team-card__descrizione {
  font-size: 0.95rem;
  color: var(--colore-testo-soft);
}

@media (max-width: 900px) {
  .team-lista {
    grid-template-columns: 1fr 1fr;
    gap: var(--spazio-lg) var(--spazio-md);
  }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-lista {
  max-width: 800px;
  margin-inline: auto;
  display: grid;
  gap: var(--spazio-sm);
}

.faq-item {
  background: var(--bianco);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--spazio-md);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spazio-sm);
  min-height: var(--touch-min);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--tramonto-dark);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__risposta {
  padding: 0 var(--spazio-md) var(--spazio-md);
  color: var(--colore-testo-soft);
}

/* =========================================================
   Form iscrizione
   ========================================================= */
.form-iscrizione {
  max-width: 720px;
  margin-inline: auto;
  background: var(--bianco);
  color: var(--colore-testo);
  border-radius: var(--raggio-card);
  border: var(--bordo-soft);
  padding: var(--spazio-lg);
  box-shadow: var(--ombra-card);
}

.campo {
  margin-bottom: var(--spazio-md);
}

.campo label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4em;
}

.campo .facoltativo {
  font-weight: 400;
  color: var(--colore-testo-soft);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
  width: 100%;
  font: inherit;
  padding: 0.8em 1em;
  border: 2px solid rgba(27,58,75,0.25);
  border-radius: 12px;
  background: var(--panna);
  color: var(--colore-testo);
  min-height: var(--touch-min);
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--teal-dark);
}

.campo textarea {
  min-height: 120px;
  resize: vertical;
}

.radio-gruppo {
  display: grid;
  gap: 0.6rem;
}

.radio-opzione {
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: var(--panna);
  border: 2px solid rgba(27,58,75,0.15);
  border-radius: 12px;
  padding: 0.8em 1em;
  cursor: pointer;
  min-height: var(--touch-min);
}

.radio-opzione input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--teal-dark);
}

.checkbox-riga {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  margin-bottom: var(--spazio-md);
}

.checkbox-riga input {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0.15em;
  accent-color: var(--teal-dark);
}

.form-esito {
  margin-top: var(--spazio-sm);
  padding: var(--spazio-sm) var(--spazio-md);
  border-radius: 12px;
  font-weight: 600;
  display: none;
}

.form-esito--ok {
  display: block;
  background: rgba(74, 158, 148, 0.15);
  color: var(--teal-dark);
}

.form-esito--errore {
  display: block;
  background: rgba(238, 127, 56, 0.15);
  color: var(--tramonto-dark);
}

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--petrolio);
  color: var(--panna);
  padding-block: var(--spazio-xl) var(--spazio-lg);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--spazio-lg);
  margin-bottom: var(--spazio-lg);
}

.footer .logo {
  color: var(--panna);
}

.footer__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.footer__lista a {
  color: var(--panna);
  text-decoration: none;
  opacity: 0.9;
}

.footer__lista a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer__bottom {
  border-top: 1px solid rgba(245,241,235,0.2);
  padding-top: var(--spazio-md);
  font-size: 0.9rem;
  opacity: 0.8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (max-width: 760px) {
  .footer__inner {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Reveal on scroll (rispetta prefers-reduced-motion)
   ========================================================= */
.reveal {
  opacity: 0;
  transform: var(--hover-transform, none) translateY(28px) scale(0.97);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.reveal--visibile {
  opacity: 1;
  transform: var(--hover-transform, none);
}

/* Effetto cascata: le card dello stesso gruppo entrano in sequenza */
.reveal:nth-child(2) { transition-delay: 0.09s; }
.reveal:nth-child(3) { transition-delay: 0.18s; }
.reveal:nth-child(4) { transition-delay: 0.27s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive generico sezioni grandi
   ========================================================= */
@media (max-width: 640px) {
  :root {
    --fs-base: 18px;
  }
  .sezione {
    padding-block: var(--spazio-lg);
  }
}