/* ==========================================================================
   Aretusa Global - foglio di stile principale
   Ordine: reset, base, layout, componenti, sezioni, form, utility.
   I valori arrivano tutti da tokens.css: qui non ci sono colori letterali.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  overflow-x: clip;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, video, svg { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

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

/* --- Base ----------------------------------------------------------- */
body {
  font-family: var(--ag-font);
  font-size: var(--ag-fs-body);
  line-height: var(--ag-lh-body);
  color: var(--ag-text);
  background: var(--ag-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ag-font-display);
  font-weight: var(--ag-fw-display);
  line-height: var(--ag-lh-title);
  color: var(--ag-deep);
  text-wrap: balance;
  letter-spacing: -.015em;
}
h1 { font-size: var(--ag-fs-h1); line-height: var(--ag-lh-tight); }
h2 { font-size: var(--ag-fs-h2); }
h3 { font-size: var(--ag-fs-h3); }

p { max-width: var(--ag-measure); }
a { color: var(--ag-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 3px solid var(--ag-primary);
  outline-offset: 2px;
  border-radius: var(--ag-radius-sm);
}

.ag-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ag-primary); color: var(--ag-white);
  padding: var(--ag-s3) var(--ag-s6); border-radius: 0 0 var(--ag-radius) 0;
}
/* Solo :focus-visible: col mouse il fuoco puo' arrivare qui per via
   del pulsante "torna su", e il riquadro non deve comparire. */
.ag-skip-link:focus-visible { left: 0; }

.ag-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;
}

/* --- Layout --------------------------------------------------------- */
.ag-container {
  width: 100%;
  max-width: calc(var(--ag-container) + var(--ag-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ag-gutter);
}
.ag-container--content { max-width: calc(var(--ag-content) + var(--ag-gutter) * 2); }
.ag-container--grid    { max-width: calc(var(--ag-grid)    + var(--ag-gutter) * 2); }

.ag-section { padding-block: var(--ag-section-y); position: relative; }
.ag-section--tight  { padding-block: calc(var(--ag-section-y) * .55); }
.ag-section--flush-top    { padding-top: 0; }
.ag-section--flush-bottom { padding-bottom: 0; }

/* Testata delle pagine interne: gli stessi aloni della home invece di
   una sfumatura diagonale piatta, cosi' le pagine si assomigliano. */
.ag-section--warm {
  position: relative; overflow: hidden;
  background:
    radial-gradient(58% 130% at 12% 0%, rgba(236, 105, 20, .16) 0%, rgba(236, 105, 20, 0) 62%),
    radial-gradient(62% 140% at 90% 20%, rgba(129, 53, 230, .14) 0%, rgba(129, 53, 230, 0) 66%),
    linear-gradient(180deg, #FDF7F2 0%, #FAF4FD 100%);
}
/* Alternanza discreta fra due sezioni chiare consecutive. */
.ag-section--alt {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 120% at 85% 10%, rgba(129, 53, 230, .07) 0%, rgba(129, 53, 230, 0) 64%),
    linear-gradient(180deg, #FCFAFE 0%, #F8F3FD 100%);
}

/* Gli aloni del progetto grafico sono ellissi da 1042px che attraversano
   la pagina. Vanno disegnati come cerchi veri, non come riquadri con una
   sfumatura dentro: un riquadro mostra sempre i suoi quattro bordi come
   tagli netti, per quanto lo si allarghi.

   Con "closest-side" su un elemento circolare la sfumatura finisce
   esattamente sul bordo del cerchio, quindi non c'e' nessun taglio.
   Le sezioni restano trasparenti e l'alone sta dietro a tutto. */
.ag-section--glow-orange,
.ag-section--glow-viola,
.ag-section--glow-soft {
  background: transparent;
  /* Gli aloni sbordano di proposito oltre i lati della sezione, ma oltre
     il bordo dello schermo creano scorrimento orizzontale. "clip" taglia
     solo in orizzontale e lascia intatto lo sconfinamento verticale, che
     e' quello che serve al disegno. */
  overflow-x: clip;
}

.ag-section--glow-orange::before,
.ag-section--glow-viola::before,
.ag-section--glow-soft::before,
.ag-section--glow-soft::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Il cerchio si adatta all'altezza della sezione: cosi' non sale a
     colorare quelle sopra e sotto, che devono restare bianche. */
  height: min(1042px, 118%); width: auto; aspect-ratio: 1;
  max-width: 95vw; border-radius: 50%;
  top: 50%; translate: 0 -50%;
}

/* Di norma l'alone sta a sinistra. Nei blocchi affiancati va invece
   messo dal lato del testo, altrimenti illumina l'immagine e lascia
   spento il contenuto che deve leggersi. */
.ag-section--glow-orange.ag-glow--dx::before { left: auto; right: min(-260px, -18vw); }
.ag-section--glow-viola.ag-glow--sx::before  { right: auto; left: min(-260px, -18vw); }

.ag-section--glow-orange::before {
  left: min(-260px, -18vw);
  background: radial-gradient(circle closest-side,
    rgba(236, 105, 20, .26) 0%,
    rgba(236, 105, 20, .10) 52%,
    rgba(236, 105, 20, 0) 100%);
}

.ag-section--glow-viola::before {
  right: min(-260px, -18vw);
  background: radial-gradient(circle closest-side,
    rgba(129, 53, 230, .22) 0%,
    rgba(129, 53, 230, .08) 52%,
    rgba(129, 53, 230, 0) 100%);
}

/* L'alone misto ne usa due, uno per lato, come nella fascia in fondo
   alla home del progetto grafico. */
.ag-section--glow-soft::before {
  left: min(-280px, -20vw);
  background: radial-gradient(circle closest-side,
    rgba(236, 105, 20, .18) 0%,
    rgba(236, 105, 20, .06) 55%,
    rgba(236, 105, 20, 0) 100%);
}
.ag-section--glow-soft::after {
  right: min(-280px, -20vw);
  background: radial-gradient(circle closest-side,
    rgba(129, 53, 230, .18) 0%,
    rgba(129, 53, 230, .06) 55%,
    rgba(129, 53, 230, 0) 100%);
}

/* Su schermi stretti gli aloni si riducono, altrimenti coprono il testo. */
@media (max-width: 767px) {
  .ag-section--glow-orange::before,
  .ag-section--glow-viola::before,
  .ag-section--glow-soft::before,
  .ag-section--glow-soft::after { height: 90%; opacity: .7; }
}

/* Testata di pagina: il primo blocco dopo l'header, quindi vuole piu'
   spazio sopra per non finire schiacciato sotto la barra fissa. */
.ag-pagina-testata { padding-top: calc(var(--ag-section-y) * .85); }

/* Intestazione di sezione: occhiello, titolo, sottotitolo, centrati. */
.ag-section-head {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ag-s4); text-align: center;
  max-width: var(--ag-content); margin-inline: auto;
  margin-bottom: var(--ag-s12);
}
.ag-section-head--left { align-items: flex-start; text-align: left; margin-inline: 0; }
.ag-section-head--left .ag-eyebrow { align-self: flex-start; }
.ag-section-head p { max-width: 44rem; color: var(--ag-text-soft); font-size: var(--ag-fs-lead); }
.ag-section-head .ag-eyebrow { margin-bottom: calc(var(--ag-s2) * -1); }
/* Il pittogramma del marchio sopra il titolo di sezione, come nel Figma. */
.ag-section-head__mark { display: block; width: 50px; height: 50px; }
.ag-section-head__mark img { width: 100%; height: 100%; object-fit: contain; }

.ag-eyebrow {
  align-self: center; width: fit-content;
  font-size: var(--ag-fs-label); font-weight: var(--ag-fw-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ag-magenta);
}

/* La parola evidenziata dentro un titolo, come nel Figma. */
.ag-accent { color: var(--ag-magenta); }

/* Sui fondi scuri il magenta su viola non ha contrasto sufficiente:
   li' l'accento passa all'arancio, che sul viola profondo si legge. */
.ag-hero .ag-accent,
.ag-vision .ag-accent,
.ag-cta .ag-accent { color: var(--ag-orange); }

/* --- Pulsanti ------------------------------------------------------- */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ag-s2);
  min-height: 48px; min-width: 200px;
  padding: 0 var(--ag-s8);
  border-radius: var(--ag-radius-pill);
  font-size: var(--ag-fs-small); font-weight: var(--ag-fw-bold);
  letter-spacing: .02em; text-decoration: none; text-align: center;
  transition: background-color var(--ag-dur) var(--ag-ease),
              color var(--ag-dur) var(--ag-ease),
              transform var(--ag-dur) var(--ag-ease);
}
.ag-btn:hover { transform: translateY(-1px); }

.ag-btn--primary {
  background: var(--ag-gradient-btn); color: var(--ag-white);
  box-shadow: 0 6px 18px -10px rgba(122, 40, 222, .65);
}
.ag-btn--primary:hover { background: var(--ag-gradient-btn-h); color: var(--ag-white); }

.ag-btn--ghost {
  background: transparent; color: var(--ag-primary);
  border: 1px solid var(--ag-border-strong);
}
.ag-btn--ghost:hover { background: var(--ag-primary); color: var(--ag-white); border-color: var(--ag-primary); }

.ag-btn--light { background: var(--ag-white); color: var(--ag-primary); }
.ag-btn--light:hover { background: var(--ag-cool); color: var(--ag-primary-dark); }

/* Pulsante grande di chiusura sezione: 66px nel Figma. */
.ag-btn--lg { min-height: 66px; padding-inline: var(--ag-s12); font-size: var(--ag-fs-body); }

/* Pulsante dentro le card. Nel Figma e' 37px: alzato a 44 per rispettare
   l'area di tocco minima richiesta da WCAG 2.1 AA. */
.ag-btn--sm { min-height: var(--ag-tap); min-width: 0; padding-inline: var(--ag-s6); }

.ag-btn-row { display: flex; flex-wrap: wrap; gap: var(--ag-s3); }
.ag-section-head .ag-btn-row,
.ag-hero .ag-btn-row,
.ag-cta .ag-btn-row { justify-content: center; }

/* --- Badge di categoria --------------------------------------------- */
.ag-badge {
  display: inline-flex; align-items: center;
  align-self: flex-start; width: fit-content; flex: 0 0 auto;
  padding: var(--ag-s1) var(--ag-s3);
  border-radius: var(--ag-radius-pill);
  font-size: 0.6875rem; font-weight: var(--ag-fw-bold);
  letter-spacing: .09em; text-transform: uppercase;
  /* Fondo tenue e testo pieno: pieno colore erano troppo squillanti e
     rubavano l'occhio al titolo della card. */
  color: var(--ag-primary);
  background: color-mix(in srgb, var(--ag-primary) 12%, #FFFFFF);
}

/* Sulle testate sfumate il fondo tenue si mescola con la sfumatura e
   l'etichetta perde il contorno: li' diventa un chip bianco pieno. */
.ag-section--warm .ag-badge,
.ag-hero .ag-badge {
  background: var(--ag-white);
  border: 1px solid var(--ag-border);
  box-shadow: 0 1px 3px rgba(57, 24, 109, .08);
}
.ag-section--warm .ag-badge--cantieri,
.ag-hero .ag-badge--cantieri {
  border-color: color-mix(in srgb, var(--ag-orange) 30%, transparent);
}
.ag-section--warm .ag-badge--aziende,
.ag-hero .ag-badge--aziende {
  border-color: color-mix(in srgb, var(--ag-primary) 26%, transparent);
}
.ag-badge--aziende {
  color: var(--ag-deep);
  background: color-mix(in srgb, var(--ag-primary) 12%, #FFFFFF);
}
.ag-badge--cantieri {
  color: #A2470A;
  background: color-mix(in srgb, var(--ag-orange) 14%, #FFFFFF);
}

/* --- Header --------------------------------------------------------- */
.ag-header {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--ag-header-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ag-dur) var(--ag-ease),
              box-shadow var(--ag-dur) var(--ag-ease);
}
.ag-header.is-stuck { border-bottom-color: var(--ag-border); box-shadow: var(--ag-shadow-sm); }

.ag-header__inner { display: flex; align-items: center; gap: var(--ag-s6); width: 100%; }
.ag-logo { flex: 0 0 auto; display: block; }
.ag-logo img { width: 220px; height: auto; }

.ag-nav { margin-inline: auto; }
.ag-nav ul { display: flex; align-items: center; gap: var(--ag-s8); }
.ag-nav a {
  display: inline-flex; align-items: center; min-height: var(--ag-tap);
  font-size: var(--ag-fs-body); font-weight: var(--ag-fw-medium);
  color: var(--ag-deep); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ag-nav a:hover { color: var(--ag-primary); }
.ag-nav .current-menu-item > a,
.ag-nav .current_page_parent > a { color: var(--ag-primary); border-bottom-color: var(--ag-orange); }

/* Dentro il menu il pulsante deve restare bianco: la regola generica
   delle voci di menu e' piu' specifica e gli imponeva il viola scuro. */
.ag-nav .ag-btn--primary { color: var(--ag-white); border-bottom: 0; }
.ag-nav .ag-btn--primary:hover { color: var(--ag-white); }
.ag-nav .ag-btn--ghost { color: var(--ag-primary); border-bottom-width: 1px; }

.ag-header__cta { flex: 0 0 auto; }
/* Nell'header il pulsante non cresce: deve stare nella barra da 123px. */
.ag-header .ag-btn {
  min-height: 45px; padding-inline: var(--ag-s6);
  font-size: var(--ag-fs-label);
}

.ag-burger {
  display: none;
  width: var(--ag-tap); height: var(--ag-tap);
  align-items: center; justify-content: center;
  border-radius: var(--ag-radius-sm); color: var(--ag-deep);
}
.ag-burger span {
  display: block; width: 22px; height: 2px; background: currentColor;
  border-radius: 2px; position: relative;
  transition: transform var(--ag-dur) var(--ag-ease), background-color var(--ag-dur);
}
.ag-burger span::before, .ag-burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--ag-dur) var(--ag-ease);
}
.ag-burger span::before { top: -7px; }
.ag-burger span::after  { top: 7px; }
.ag-burger[aria-expanded="true"] span { background: transparent; }
.ag-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.ag-burger[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .ag-burger { display: inline-flex; margin-left: auto; }
  .ag-nav {
    position: fixed; inset: var(--ag-header-h) 0 auto 0;
    background: var(--ag-white); border-bottom: 1px solid var(--ag-border);
    padding: var(--ag-s6) var(--ag-gutter) var(--ag-s8);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--ag-dur) var(--ag-ease),
                transform var(--ag-dur) var(--ag-ease),
                visibility var(--ag-dur);
    box-shadow: var(--ag-shadow);
  }
  .ag-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .ag-nav ul { flex-direction: column; align-items: stretch; gap: var(--ag-s1); }
  .ag-nav a { font-size: 1.125rem; padding-block: var(--ag-s2); }
  .ag-header__cta { display: none; }
  .ag-nav .ag-nav__cta { display: block; margin-top: var(--ag-s4); }
  .ag-nav .ag-nav__cta .ag-btn { width: 100%; }
}
@media (min-width: 1024px) { .ag-nav__cta { display: none; } }

/* --- Hero ----------------------------------------------------------- */
.ag-hero {
  position: relative; isolation: isolate;
  min-height: 695px;
  display: flex; align-items: center;
  border-radius: 0 0 var(--ag-radius-lg) var(--ag-radius-lg);
  overflow: hidden;
  margin-top: calc(var(--ag-header-h) * -1);
  padding-top: var(--ag-header-h);
}
.ag-hero__media { position: absolute; inset: 0; z-index: -2; }
.ag-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ag-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43,33,64,.72) 0%, rgba(61,30,109,.62) 100%);
}
.ag-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--ag-s6);
  text-align: center; max-width: 840px; margin-inline: auto;
  padding-block: var(--ag-s16);
}
.ag-hero__inner h1 { max-width: 100%; }
/* Sotto i 640px l'a capo forzato del titolo va ignorato: lo spazio
   non basta e produrrebbe righe sbilanciate. */
@media (max-width: 639px) { .ag-hero h1 br { display: none; } }
.ag-hero__eyebrow {
  display: inline-flex; align-items: center;
  padding: var(--ag-s2) var(--ag-s4);
  border-radius: var(--ag-radius-pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--ag-white);
  font-size: var(--ag-fs-label); font-weight: var(--ag-fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
}
.ag-hero h1 { color: var(--ag-white); font-size: var(--ag-fs-display); }

/* Sul fondo scuro della testata il pulsante secondario deve essere bianco:
   il viola su velatura scura non raggiunge il contrasto richiesto. */
.ag-hero .ag-btn--ghost {
  color: var(--ag-white);
  border-color: rgba(255, 255, 255, .55);
}
.ag-hero .ag-btn--ghost:hover {
  background: var(--ag-white);
  color: var(--ag-primary);
  border-color: var(--ag-white);
}

/* Stessa ragione dentro le fasce colorate. */
.ag-cta .ag-btn--ghost {
  color: var(--ag-white);
  border-color: rgba(255, 255, 255, .55);
}
.ag-cta .ag-btn--ghost:hover { background: var(--ag-white); color: var(--ag-primary); }
.ag-hero p { color: rgba(255,255,255,.9); font-size: var(--ag-fs-lead); max-width: 38rem; }

/* Senza fotografia la testata non deve restare un blocco viola piatto. */
.ag-hero:not(:has(.ag-hero__media)) {
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(236,105,20,.55) 0%, rgba(236,105,20,0) 55%),
    radial-gradient(90% 130% at 85% 100%, rgba(238,8,111,.45) 0%, rgba(238,8,111,0) 60%),
    linear-gradient(160deg, #4A2183 0%, var(--ag-deep) 55%, #2A1150 100%);
}
.ag-hero:not(:has(.ag-hero__media))::after { display: none; }

@media (max-width: 1023px) { .ag-hero { min-height: 520px; } }
@media (max-width: 639px)  { .ag-hero { min-height: 460px; } }

/* --- Griglie di card ------------------------------------------------ */
.ag-grid {
  display: grid; gap: var(--ag-s6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ag-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .ag-grid, .ag-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .ag-grid, .ag-grid--2, .ag-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Card servizio -------------------------------------------------- */
.ag-card {
  display: flex; flex-direction: column; gap: var(--ag-s3);
  background: var(--ag-surface);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  padding: var(--ag-s6);
  box-shadow: var(--ag-shadow-sm);
  transition: transform var(--ag-dur) var(--ag-ease),
              box-shadow var(--ag-dur) var(--ag-ease),
              border-color var(--ag-dur) var(--ag-ease);
}
.ag-card:hover { transform: translateY(-2px); box-shadow: var(--ag-shadow); border-color: var(--ag-border-strong); }

.ag-card__media { margin: calc(var(--ag-s6) * -1) calc(var(--ag-s6) * -1) 0; position: relative; }
.ag-card__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--ag-radius) var(--ag-radius) 0 0;
}
.ag-card__media .ag-badge { position: absolute; top: var(--ag-s4); left: var(--ag-s4); }

.ag-card__icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--ag-radius-sm);
  background: var(--ag-cool); color: var(--ag-primary);
}
.ag-card__icon svg { width: 21px; height: 21px; }
.ag-card--cantieri .ag-card__icon { background: var(--ag-warm); color: var(--ag-orange); }

.ag-card h3 { font-size: var(--ag-fs-h3); }
.ag-card p  { font-size: var(--ag-fs-small); color: var(--ag-text-soft); max-width: none; }
.ag-card__foot { margin-top: auto; padding-top: var(--ag-s3); }

/* Card cliccabile per intero, mantenendo un solo link nel DOM. */
.ag-card--link { position: relative; }
.ag-card--link .ag-card__link::after { content: ""; position: absolute; inset: 0; }

/* --- Blocco testo + immagine ---------------------------------------- */
.ag-split {
  display: grid; gap: var(--ag-s12);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}
.ag-split--reverse .ag-split__media { order: 2; }
.ag-split__body { display: flex; flex-direction: column; gap: var(--ag-s4); align-items: flex-start; }
.ag-split__body p { color: var(--ag-text-soft); }
/* L'illustrazione e' un disegno quadrato con trasparenza, non una foto:
   non va ritagliata ne' stirata, e non le serve l'angolo arrotondato. */
.ag-split__media img {
  width: 100%; height: auto;
  max-height: 420px; object-fit: contain;
  margin-inline: auto;
}
.ag-split__media--foto img {
  border-radius: var(--ag-radius-lg);
  max-height: none; object-fit: cover;
}

/* L'icona sopra il titolo del blocco: riquadro chiaro, segno magenta,
   come nel Figma. */
.ag-split__icon {
  width: 64px; height: 64px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--ag-radius);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(238, 8, 111, .12);
  color: var(--ag-magenta);
}
.ag-split__icon svg { width: 30px; height: 30px; }
@media (max-width: 1023px) {
  .ag-split { grid-template-columns: minmax(0, 1fr); gap: var(--ag-s8); }
  .ag-split--reverse .ag-split__media { order: 0; }
}

/* --- Metodo: elenco numerato a fasi --------------------------------- */
.ag-steps { display: grid; gap: var(--ag-s6); grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: ag-step; }
.ag-step { display: grid; grid-template-columns: auto 1fr; gap: var(--ag-s4); align-items: start; }
.ag-step__num {
  counter-increment: ag-step;
  font-family: var(--ag-font-display);
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--ag-radius);
  background: var(--ag-cool); color: var(--ag-primary);
  font-weight: var(--ag-fw-bold); font-size: var(--ag-fs-body);
  font-variant-numeric: tabular-nums;
}
.ag-step__num::before { content: counter(ag-step, decimal-leading-zero); }
.ag-step h3 { font-size: 1.125rem; margin-bottom: var(--ag-s1); }
.ag-step p  { font-size: var(--ag-fs-small); color: var(--ag-text-soft); max-width: none; }
@media (max-width: 767px) { .ag-steps { grid-template-columns: minmax(0, 1fr); } }

/* --- Galleria Vision ------------------------------------------------ */
.ag-gallery {
  display: grid; gap: var(--ag-s3);
  grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--ag-s3);
  scrollbar-width: thin;
}
.ag-gallery img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--ag-radius); scroll-snap-align: start;
}
.ag-gallery--full { padding-inline: var(--ag-gutter); }

/* --- Vision ----------------------------------------------------------
   Fascia scura a tutta larghezza: e' l'unico punto della pagina che
   cambia registro, quindi la dichiarazione si stacca invece di essere
   l'ennesimo blocco chiaro fra blocchi chiari. */
.ag-vision {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center;
  padding-block: calc(var(--ag-section-y) * .7);
  background:
    radial-gradient(72% 115% at 14% 0%, rgba(236,105,20,.20) 0%, rgba(236,105,20,0) 58%),
    radial-gradient(78% 120% at 88% 100%, rgba(238,8,111,.18) 0%, rgba(238,8,111,0) 62%),
    linear-gradient(150deg, #4E2589 0%, #3D1C74 55%, #35156A 100%);
}

/* Anelli concentrici del marchio, appena percettibili. */
.ag-vision__mark {
  position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; translate: -50% -50%;
  width: min(62vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 30%, rgba(255,255,255,.07) 30% 33%, transparent 33%),
    radial-gradient(circle, transparent 0 44%, rgba(255,255,255,.05) 44% 47%, transparent 47%),
    radial-gradient(circle, transparent 0 58%, rgba(255,255,255,.04) 58% 61%, transparent 61%);
  mask-image: radial-gradient(circle, #000 45%, transparent 72%);
}

.ag-vision__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--ag-s4);
  max-width: 68rem;
}
.ag-vision .ag-eyebrow { color: var(--ag-orange); }
.ag-vision__claim {
  font-family: var(--ag-font-display);
  font-weight: var(--ag-fw-display);
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  line-height: 1.35; letter-spacing: -.01em;
  color: var(--ag-white);
  max-width: 42ch; text-wrap: balance;
}
.ag-vision__firma {
  font-size: var(--ag-fs-small);
  color: rgba(255, 255, 255, .62);
  letter-spacing: .06em; text-transform: uppercase;
}

/* --- Settori: colonne impaginate ---------------------------------------
   Le voci scorrono lungo colonne di uguale larghezza e si incastrano per
   altezza. Le colonne CSS fanno esattamente questo: riempiono la prima,
   poi la seconda, tenendo insieme ogni voce. Nessun calcolo, nessuno
   script, e si riflowa da sola a qualunque larghezza.
   ------------------------------------------------------------------- */
.ag-settori {
  position: relative;
  background:
    radial-gradient(60% 100% at 50% 6%, rgba(236, 105, 20, .11) 0%, rgba(236, 105, 20, 0) 62%),
    radial-gradient(68% 110% at 50% 100%, rgba(129, 53, 230, .08) 0%, rgba(129, 53, 230, 0) 66%),
    linear-gradient(180deg, #FFFFFF 0%, #FDF6F0 44%, #FAF4FD 100%);
}

.ag-settori__griglia {
  display: grid; gap: var(--ag-s3);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1040px; margin-inline: auto;
}
@media (max-width: 1023px) { .ag-settori__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Su schermo stretto restano due colonne: in colonna singola tredici
   voci diventano una scrollata infinita. Le card si accorciano invece
   di ridursi di numero. */
@media (max-width: 767px) {
  .ag-settori__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ag-s2); }
  .ag-settore { min-height: 0; padding: var(--ag-s3); gap: var(--ag-s2); align-items: flex-start; }
  .ag-settore__punto { margin-top: 6px; }
  .ag-settore__nome { font-size: 0.8125rem; line-height: 1.25; }
}

.ag-settore {
  display: flex; align-items: center; gap: var(--ag-s3);
  min-height: 76px;
  padding: var(--ag-s4) var(--ag-s5, 1.25rem);
  border-radius: var(--ag-radius);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--ag-border);
  box-shadow: 0 2px 10px -7px rgba(57, 24, 109, .22);
  transition: transform var(--ag-dur) var(--ag-ease),
              box-shadow var(--ag-dur) var(--ag-ease),
              border-color var(--ag-dur) var(--ag-ease);
}

.ag-settore:hover {
  transform: translateY(-2px);
  border-color: var(--ag-border-strong);
  box-shadow: 0 10px 26px -14px rgba(57, 24, 109, .38);
}

.ag-settore__punto {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ag-primary);
}
.ag-settore:nth-child(3n+2) .ag-settore__punto { background: var(--ag-magenta); }
.ag-settore:nth-child(3n+3) .ag-settore__punto { background: var(--ag-orange); }

.ag-settore__nome {
  font-family: var(--ag-font-display);
  font-weight: var(--ag-fw-display);
  font-size: 0.9375rem; line-height: 1.3; letter-spacing: -.005em;
  color: var(--ag-deep);
  text-wrap: balance;
}

/* --- Perche' sceglierci / Valori ------------------------------------
   Due forme, come nel Figma: in home tre riquadri bassi con l'icona a
   sinistra, in pagina Azienda tre blocchi centrati con l'icona sopra. */
.ag-feature { display: flex; flex-direction: column; gap: var(--ag-s2); align-items: flex-start; }
/* L'icona vuole piu' respiro del testo che la segue. */
.ag-feature__icon { margin-bottom: var(--ag-s4); }
.ag-feature--center { align-items: center; text-align: center; }
.ag-feature__icon {
  width: 64px; height: 64px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--ag-radius); background: var(--ag-warm); color: var(--ag-orange);
}
.ag-feature__icon svg { width: 30px; height: 30px; }
.ag-feature h3 { font-size: 1.375rem; }
.ag-feature p {
  font-size: var(--ag-fs-body); line-height: 1.55;
  color: var(--ag-text-soft); max-width: 34ch;
}
.ag-feature--center p { margin-inline: auto; }
.ag-feature--center .ag-feature__icon { width: 72px; height: 72px; }
.ag-feature--center .ag-feature__icon svg { width: 34px; height: 34px; }

/* Variante in riga: icona a sinistra, due righe di testo a destra,
   dentro un riquadro bianco su fondo trasparente. */
.ag-feature--row {
  flex-direction: row; align-items: center; gap: var(--ag-s3);
  background: var(--ag-white);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  padding: var(--ag-s4);
  box-shadow: var(--ag-shadow-sm);
}
.ag-feature--row .ag-feature__text { min-width: 0; }
.ag-feature--row h3 { font-size: 1rem; margin-bottom: 2px; }
.ag-feature--row p { font-size: 0.8125rem; line-height: 1.45; }

/* Il titolo di questa sezione nel Figma e' piu' piccolo degli altri. */
.ag-section-head--compatta { margin-bottom: var(--ag-s8); }
.ag-section-head--compatta h2 { font-size: 1.75rem; }
@media (max-width: 639px) { .ag-section-head--compatta h2 { font-size: 1.375rem; } }

/* --- Clienti -------------------------------------------------------- */
.ag-clients {
  display: flex; flex-wrap: wrap;
  gap: var(--ag-s8) var(--ag-s16);
  justify-content: center; align-items: center;
}
/* Una fascia di marchi, non una griglia di riquadri: senza cornici i nomi
   e i loghi stanno sulla stessa linea e la sezione resta leggera. */
.ag-client {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 0;
  background: none; border: 0; border-radius: 0;
  flex: 0 0 auto;
}
.ag-client img {
  /* L'altezza la decide il template in base alle proporzioni del file,
     cosi' ogni marchio occupa la stessa area ottica. */
  height: var(--ag-logo-h, 44px);
  width: auto; max-width: 280px; object-fit: contain;
  filter: grayscale(1) brightness(.42) sepia(1) hue-rotate(228deg) saturate(3);
  opacity: .78;
  transition: filter var(--ag-dur) var(--ag-ease), opacity var(--ag-dur) var(--ag-ease);
}
/* Il bianco di fondo si toglie solo ai JPEG, che non hanno trasparenza.
   Sui PNG gia' scontornati la fusione rovinerebbe i bordi. */
.ag-client--jpeg img { mix-blend-mode: multiply; }
.ag-client:hover img { filter: none; opacity: 1; }

/* Su schermo stretto una fila sola diventa una colonna lunghissima:
   meglio una griglia a due colonne. */
@media (max-width: 767px) {
  .ag-clients {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ag-s6) var(--ag-s4);
    justify-items: center;
  }
  /* La cella e' stretta: il marchio deve rientrarci, quindi comanda la
     larghezza e l'altezza si adegua. Senza, i loghi lunghi sbordano. */
  .ag-client { min-height: 64px; width: 100%; min-width: 0; }
  .ag-client img {
    width: auto; height: auto;
    max-width: 100%; max-height: var(--ag-logo-h, 56px);
  }
}


/* --- Banner di richiamo --------------------------------------------- */
.ag-cta {
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(236, 105, 20, .22) 0%, rgba(236, 105, 20, 0) 58%),
    radial-gradient(75% 125% at 90% 100%, rgba(238, 8, 111, .18) 0%, rgba(238, 8, 111, 0) 62%),
    linear-gradient(150deg, #46207E 0%, var(--ag-deep) 55%, #2E1259 100%);
  border-radius: var(--ag-radius-lg);
  padding: var(--ag-s16) var(--ag-s12);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--ag-s4);
}
.ag-cta--full { border-radius: 0; }
.ag-cta h2 { color: var(--ag-white); }
.ag-cta p  { color: rgba(255,255,255,.9); font-size: var(--ag-fs-lead); max-width: 40rem; }
@media (max-width: 639px) { .ag-cta { padding: var(--ag-s12) var(--ag-s6); } }

/* --- FAQ -------------------------------------------------------------
   Due colonne: a sinistra il titolo che resta fermo mentre si scorre,
   a destra le domande come voci separate. Il riquadro unico di prima
   sembrava una tabella. Apertura e chiusura con details/summary nativi:
   funziona senza JavaScript ed e' corretto da tastiera. */
.ag-faq-wrap {
  display: grid; gap: var(--ag-s12);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}
@media (max-width: 1023px) {
  .ag-faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--ag-s8); }
}
.ag-faq-aside { position: sticky; top: calc(var(--ag-header-h) + var(--ag-s6)); }
@media (max-width: 1023px) { .ag-faq-aside { position: static; } }
.ag-faq-aside h2 { margin-bottom: var(--ag-s4); }
.ag-faq-aside p { color: var(--ag-text-soft); font-size: var(--ag-fs-body); }

.ag-faq { display: flex; flex-direction: column; gap: var(--ag-s2); }

.ag-faq__item {
  background: var(--ag-white);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius);
  transition: border-color var(--ag-dur) var(--ag-ease),
              box-shadow var(--ag-dur) var(--ag-ease);
}
.ag-faq__item[open] {
  border-color: color-mix(in srgb, var(--ag-primary) 35%, transparent);
  box-shadow: 0 10px 30px -22px rgba(57, 24, 109, .55);
}
.ag-faq__item summary::-webkit-details-marker { display: none; }

.ag-faq__q {
  list-style: none; cursor: pointer;
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--ag-s4); min-height: var(--ag-tap);
  padding: var(--ag-s4) var(--ag-s6); text-align: left;
  font-family: var(--ag-font-display);
  font-weight: var(--ag-fw-display);
  font-size: 1.0625rem; line-height: 1.35;
  color: var(--ag-deep);
}
.ag-faq__q:hover { color: var(--ag-primary); }

/* Segno piu' che diventa meno: due tratti, uno ruota. */
.ag-faq__segno {
  position: relative; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--ag-primary) 10%, #FFFFFF);
  transition: background-color var(--ag-dur) var(--ag-ease);
}
.ag-faq__segno::before,
.ag-faq__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; border-radius: 2px;
  background: var(--ag-primary);
  translate: -50% -50%;
  transition: rotate var(--ag-dur) var(--ag-ease), opacity var(--ag-dur) var(--ag-ease);
}
.ag-faq__segno::after { rotate: 90deg; }
.ag-faq__item[open] .ag-faq__segno { background: var(--ag-primary); }
.ag-faq__item[open] .ag-faq__segno::before,
.ag-faq__item[open] .ag-faq__segno::after { background: var(--ag-white); }
.ag-faq__item[open] .ag-faq__segno::after { rotate: 0deg; opacity: 0; }

.ag-faq__a {
  padding: 0 var(--ag-s6) var(--ag-s6);
  color: var(--ag-text-soft); font-size: var(--ag-fs-small); line-height: 1.6;
}
.ag-faq__a p { max-width: 62ch; }

/* --- Contatti e form ------------------------------------------------ */
/* I due riquadri hanno la stessa altezza: uno piu' corto dell'altro
   fa sembrare la pagina sbilanciata. */
.ag-contact { display: grid; gap: var(--ag-s6); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1023px) { .ag-contact { grid-template-columns: minmax(0, 1fr); } }

/* Due aloni tenui invece di una sfumatura piena, uno per riquadro e di
   colore diverso, cosi' le due colonne si distinguono senza gridare. */
.ag-panel {
  background:
    radial-gradient(80% 90% at 12% 8%, rgba(236, 105, 20, .12) 0%, rgba(236, 105, 20, 0) 62%),
    #FFFFFF;
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  padding: var(--ag-s12);
  box-shadow: 0 2px 12px -8px rgba(57, 24, 109, .18);
}
.ag-contact > .ag-panel:nth-child(2) {
  background:
    radial-gradient(80% 90% at 88% 8%, rgba(129, 53, 230, .12) 0%, rgba(129, 53, 230, 0) 62%),
    #FFFFFF;
}
@media (max-width: 639px) { .ag-panel { padding: var(--ag-s8) var(--ag-s6); } }

.ag-detail { display: flex; flex-direction: column; gap: var(--ag-s1); margin-bottom: var(--ag-s6); }
.ag-detail__label {
  font-size: var(--ag-fs-label); font-weight: var(--ag-fw-bold);
  letter-spacing: .09em; text-transform: uppercase; color: var(--ag-text-muted);
}
.ag-detail__value { font-size: 1.125rem; font-weight: var(--ag-fw-bold); color: var(--ag-deep); }
.ag-detail__value a { color: inherit; text-decoration: none; }
.ag-detail__value a:hover { color: var(--ag-primary); }

.ag-social { display: flex; gap: var(--ag-s3); }
.ag-social a {
  width: var(--ag-tap); height: var(--ag-tap);
  display: grid; place-items: center;
  border-radius: var(--ag-radius-pill);
  color: var(--ag-deep); background: rgba(255, 255, 255, .7);
  border: 1px solid var(--ag-border);
  transition: color var(--ag-dur) var(--ag-ease),
              background-color var(--ag-dur) var(--ag-ease),
              transform var(--ag-dur) var(--ag-ease);
}
.ag-social a:hover {
  color: var(--ag-white); background: var(--ag-primary);
  border-color: var(--ag-primary); transform: translateY(-1px);
}
.ag-social svg { width: 22px; height: 22px; }

/* Segno presente ma non ancora collegato a un indirizzo. */
.ag-social__vuoto {
  width: var(--ag-tap); height: var(--ag-tap);
  display: grid; place-items: center;
  border-radius: var(--ag-radius-pill);
  background: rgba(255, 255, 255, .7);
  border: 1px dashed var(--ag-border-strong);
  color: color-mix(in srgb, var(--ag-deep) 45%, transparent);
}

.ag-form { display: flex; flex-direction: column; gap: var(--ag-s4); }
.ag-field { display: flex; flex-direction: column; gap: var(--ag-s2); }
.ag-field label {
  font-size: var(--ag-fs-label); font-weight: var(--ag-fw-bold);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ag-deep);
}
.ag-field .req { color: var(--ag-magenta); }
.ag-field input, .ag-field textarea {
  min-height: var(--ag-tap);
  padding: var(--ag-s3) var(--ag-s4);
  background: var(--ag-white);
  border: 1px solid var(--ag-border-strong);
  border-radius: var(--ag-radius-sm);
  font-size: var(--ag-fs-body); color: var(--ag-text);
  transition: border-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}
.ag-field textarea { min-height: 110px; resize: vertical; }
.ag-field input::placeholder, .ag-field textarea::placeholder { color: var(--ag-text-muted); }
.ag-field input:focus, .ag-field textarea:focus {
  outline: none; border-color: var(--ag-primary);
  box-shadow: 0 0 0 3px rgba(129, 53, 230, .20);
}
.ag-field--error input, .ag-field--error textarea { border-color: var(--ag-error); }
.ag-field__error { font-size: var(--ag-fs-small); color: var(--ag-error); }

.ag-consent { display: grid; grid-template-columns: auto 1fr; gap: var(--ag-s3); align-items: start; }
.ag-consent input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--ag-primary); }
.ag-consent label { font-size: var(--ag-fs-small); font-weight: var(--ag-fw-regular);
  text-transform: none; letter-spacing: 0; color: var(--ag-text-soft); }

.ag-form__submit { width: 100%; min-height: 56px; }
.ag-form__msg { padding: var(--ag-s4); border-radius: var(--ag-radius-sm); font-size: var(--ag-fs-small); }
.ag-form__msg--ok  { background: var(--ag-success-bg); color: var(--ag-success); }
.ag-form__msg--err { background: var(--ag-error-bg);   color: var(--ag-error); }

/* Campo esca antispam: nascosto ai lettori di schermo e alla vista. */
.ag-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; }

/* --- Diagramma servizi (pagina Azienda) ----------------------------- */
.ag-diagram { display: grid; gap: var(--ag-s8); justify-items: center; text-align: center; }
.ag-diagram__branches { display: flex; flex-wrap: wrap; gap: var(--ag-s4); justify-content: center; }
.ag-diagram__branch {
  display: inline-flex; align-items: center; gap: var(--ag-s2);
  min-height: var(--ag-tap); padding: var(--ag-s3) var(--ag-s6);
  border-radius: var(--ag-radius); color: var(--ag-white);
  font-weight: var(--ag-fw-bold); text-decoration: none;
}
.ag-diagram__branch--aziende  { background: var(--ag-primary); }
.ag-diagram__branch--cantieri { background: var(--ag-orange); }
.ag-diagram__branch:hover { color: var(--ag-white); transform: translateY(-1px); }

/* --- Contenuto testuale libero -------------------------------------- */
.ag-prose { max-width: var(--ag-measure); }
.ag-prose > * + * { margin-top: var(--ag-s4); }
.ag-prose h2, .ag-prose h3 { margin-top: var(--ag-s8); }
.ag-prose ul, .ag-prose ol { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--ag-s2); }
.ag-prose ul { list-style: disc; }
.ag-prose ol { list-style: decimal; }
.ag-prose li { color: var(--ag-text-soft); }

/* Codice incorporato nelle pagine legali: informative e avvisi cookie
   generati da servizi esterni. Larghezza uguale al testo, e tabelle o
   iframe troppo larghi scorrono qui dentro invece di allargare la
   pagina e far comparire la barra orizzontale. */
.ag-embed { max-width: var(--ag-measure); margin-top: var(--ag-s6); overflow-x: auto; }
.ag-prose + .ag-embed { margin-top: var(--ag-s8); }
.ag-embed iframe { max-width: 100%; border: 0; }

/* --- Pagina del servizio ---------------------------------------------
   Il corpo era una colonna sola di testo lungo. Qui l'introduzione sta
   a sinistra e l'elenco delle attivita' diventa un riquadro a destra:
   chi legge distingue subito il racconto dall'elenco puntuale, e la
   pagina smette di essere un muro. */
/* Il corpo del servizio resta bianco: la pagina e' gia' un testo lungo,
   una sfumatura sotto lo rende solo piu' faticoso da leggere. */
.ag-servizio__corpo { background: var(--ag-white); }
.ag-servizio__griglia {
  display: grid; gap: var(--ag-s12);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
}
@media (max-width: 1023px) {
  .ag-servizio__griglia { grid-template-columns: minmax(0, 1fr); gap: var(--ag-s8); }
}
.ag-servizio__testo { display: flex; flex-direction: column; gap: var(--ag-s6); }
.ag-servizio__intro p { font-size: 1.125rem; line-height: 1.6; color: var(--ag-text-soft); }
.ag-servizio__intro p:first-child {
  font-size: 1.25rem; color: var(--ag-deep);
  font-family: var(--ag-font-display); font-weight: var(--ag-fw-display);
  line-height: 1.35;
}
.ag-servizio__chiusura {
  padding-left: var(--ag-s6);
  border-left: 2px solid color-mix(in srgb, var(--ag-magenta) 45%, transparent);
}
.ag-servizio__chiusura p { font-size: var(--ag-fs-body); color: var(--ag-text-soft); }

.ag-servizio__elenco {
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--ag-border);
  border-radius: var(--ag-radius-lg);
  padding: var(--ag-s8);
  box-shadow: 0 2px 16px -10px rgba(57, 24, 109, .22);
}
@media (max-width: 639px) { .ag-servizio__elenco { padding: var(--ag-s6); } }

/* Dentro il riquadro l'elenco sta su una colonna sola. */
.ag-checklist--unica { grid-template-columns: minmax(0, 1fr); }

/* Il titolo dell'elenco e' un passaggio interno,
   non una nuova sezione, quindi pesa meno dei titoli di sezione. */
.ag-servizio__titolo-elenco {
  font-size: 1.25rem;
  margin-bottom: var(--ag-s6);
  padding-bottom: var(--ag-s3);
  border-bottom: 1px solid var(--ag-border);
}

/* Elenco attivita' del servizio: due colonne quando c'e' spazio. */
.ag-checklist { display: grid; gap: var(--ag-s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-checklist li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--ag-s3);
  align-items: start; color: var(--ag-text-soft);
  font-size: var(--ag-fs-body); line-height: 1.5;
  padding: var(--ag-s2) 0;
}
.ag-checklist svg {
  width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto;
  color: var(--ag-primary);
  background: color-mix(in srgb, var(--ag-primary) 10%, #FFFFFF);
  border-radius: 50%; padding: 3px;
}
@media (max-width: 767px) { .ag-checklist { grid-template-columns: minmax(0, 1fr); } }

/* --- Briciole di pane ----------------------------------------------- */
.ag-crumbs { display: flex; flex-wrap: wrap; gap: var(--ag-s2); font-size: var(--ag-fs-small); color: var(--ag-text-muted); }
.ag-crumbs a { color: var(--ag-text-muted); text-decoration: none; }
.ag-crumbs a:hover { color: var(--ag-primary); }

/* --- Footer --------------------------------------------------------- */
.ag-footer {
  padding-block: var(--ag-s12) var(--ag-s4);
  background: var(--ag-gradient-footer);
}
.ag-footer__grid {
  display: grid; gap: var(--ag-s6) var(--ag-s8);
  grid-template-columns: 1.5fr 1fr 1.2fr .9fr;
  align-items: start;
}
@media (max-width: 1023px) { .ag-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .ag-footer__grid { grid-template-columns: minmax(0, 1fr); } }

.ag-footer h4 {
  font-size: 0.75rem; font-weight: var(--ag-fw-bold);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ag-deep);
  margin-bottom: var(--ag-s3);
}
.ag-footer ul { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
/* Il menu legale non ha una classe, quindi il azzeramento generale non
   lo raggiungeva e mostrava i punti elenco. */
.ag-footer__legal ul { display: flex; list-style: none; padding: 0; margin: 0; }
.ag-footer a { color: var(--ag-text-soft); text-decoration: none; font-size: var(--ag-fs-small); }
.ag-footer a:hover { color: var(--ag-primary); }
.ag-footer__intro { font-size: var(--ag-fs-small); color: var(--ag-text-soft); }
.ag-footer__logo img { width: 176px; height: auto; margin-bottom: var(--ag-s3); }

.ag-footer__legal {
  margin-top: var(--ag-s8); padding-top: var(--ag-s3);
  border-top: 1px solid rgba(57, 24, 109, .14);
  display: flex; flex-wrap: wrap; gap: var(--ag-s2) var(--ag-s6);
  justify-content: space-between; align-items: center;
  font-size: 0.75rem; line-height: 1.5;
  color: color-mix(in srgb, var(--ag-deep) 58%, transparent);
}
.ag-footer__legal p { max-width: none; }

/* Una misura sola per tutta la riga finale: copyright, credito e link
   legali. Il selettore ripete la classe del footer perche' la regola
   generale `.ag-footer a` vale per tutti i link del footer e altrimenti
   riportava i link a 15 px accanto a un testo da 12. */
.ag-footer .ag-footer__legal,
.ag-footer .ag-footer__legal p,
.ag-footer .ag-footer__legal li,
.ag-footer .ag-footer__legal a { font-size: 0.75rem; line-height: 1.5; }

.ag-footer__legal a { color: inherit; }

/* iubenda porta con se' un foglio di stile che impagina i suoi link come
   badge: 11 px, larghezza e altezza fisse. Accanto al copyright stonava.
   E' l'unico punto del tema con !important, e serve: il loro foglio
   arriva da un dominio esterno e viene aggiunto dopo il nostro, quindi a
   pari specificita' vince sempre. Il selettore e' volutamente lungo per
   stare sopra al loro, che e' `.iubenda-embed.iubenda-noiframe`. */
.ag-footer .ag-footer__legal a.iubenda-embed {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  width: auto !important;
  height: auto !important;
  vertical-align: baseline !important;
}
.ag-footer__credit a {
  font-weight: var(--ag-fw-medium);
  color: color-mix(in srgb, var(--ag-deep) 72%, transparent);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.ag-footer__credit a:hover { color: var(--ag-primary); border-bottom-color: currentColor; }
.ag-footer__legal a:hover { color: var(--ag-primary); }

/* Nel footer il testo sotto il logo e' piccolo e chiaro, i titoli di
   colonna sono etichette maiuscole: il Figma distingue nettamente i due. */
/* Nel footer ci sono due soli livelli: i titoli di colonna in viola
   pieno, tutto il resto in viola schiarito e alla stessa misura. */
.ag-footer__intro,
.ag-footer li,
.ag-footer a {
  font-size: var(--ag-fs-small); line-height: 1.6;
  font-weight: var(--ag-fw-regular);
  color: color-mix(in srgb, var(--ag-deep) 68%, transparent);
}
.ag-footer__intro { max-width: 32ch; }
.ag-footer a:hover { color: var(--ag-primary); }
.ag-footer h4 { color: var(--ag-deep); }
.ag-footer .ag-social a { color: var(--ag-deep); }

/* --- Torna su --------------------------------------------------------
   Compare solo dopo che si e' scorso abbastanza da rendere utile il
   ritorno: prima sarebbe un pulsante che non serve a nulla. */
.ag-su {
  position: fixed; z-index: 90;
  right: var(--ag-s6); bottom: var(--ag-s6);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--ag-radius-pill);
  background: var(--ag-gradient-btn); color: var(--ag-white);
  box-shadow: 0 8px 24px -10px rgba(57, 24, 109, .55);
  opacity: 0; translate: 0 10px;
  transition: opacity var(--ag-dur) var(--ag-ease),
              translate var(--ag-dur) var(--ag-ease),
              background-color var(--ag-dur) var(--ag-ease);
}
.ag-su[hidden] { display: none; }
.ag-su.is-visibile { opacity: 1; translate: 0 0; }
.ag-su:hover { background: var(--ag-gradient-btn-h); }
.ag-su svg { width: 22px; height: 22px; }
@media (max-width: 639px) {
  .ag-su { right: var(--ag-s4); bottom: var(--ag-s4); width: 44px; height: 44px; }
}

/* --- Rivelazione allo scorrimento ----------------------------------- */
.ag-reveal { opacity: 0; transform: translateY(14px); }
.ag-reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ag-ease), transform .5s var(--ag-ease);
}
@media (prefers-reduced-motion: reduce) {
  .ag-reveal { opacity: 1; transform: none; }
}

/* --- Utility -------------------------------------------------------- */
.ag-center { text-align: center; }
.ag-stack  { display: flex; flex-direction: column; gap: var(--ag-s4); }
.ag-mt-lg  { margin-top: var(--ag-s12); }