/* ============================================================
   NomotecnIA · pages.css  (Agente B · páginas comerciali)
   Solo componenti NUOVI per: ai-governance · servizi · team · contatti.
   Riusa tokens.css / base.css / styles.css. Nessun colore fuori token.
   Anima SOLO transform/opacity. Contrasto AA verificato.
   ============================================================ */

/* ---- Hero delle pagine interne (riusa .hero.section--scuro, respiro più corto) ---- */
.page-hero { padding-block: clamp(3rem, 2rem + 6vw, 5.5rem); }
.page-hero .hero__title { max-width: 20ch; }
.page-hero .hero__lede { max-width: 60ch; }

/* Breadcrumb già stilato in styles.css (.breadcrumb) — qui solo margine hero */
.page-hero .breadcrumb { margin-bottom: var(--sp-3); }

/* ============================================================
   AI GOVERNANCE — evidenza per pilastro + link a Normativa
   ============================================================ */

/* Ogni pilastro dichiara la PROVA che produce (rinforza "verificabile").
   Card in colonna: la prova resta ancorata in basso, allineata tra le card. */
.pilastro { display: flex; flex-direction: column; height: 100%; }
.pilastro h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; }
.pilastro > p { color: var(--grigio-testo); font-size: var(--fs-small); }
.pilastro .fonte { margin-top: var(--sp-2); }
.pilastro__prova {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px dashed color-mix(in srgb, var(--smeraldo) 30%, var(--linea));
  display: flex; flex-direction: column; gap: .3rem;
}
.pilastro__prova .mono-label { color: var(--smeraldo-scuro); }
.pilastro__prova strong { font-size: var(--fs-small); font-weight: 600; color: var(--inchiostro); }

/* Griglia di collegamenti alle schede di Normativa (riusa .card + .scheda-card).
   Qui solo il contenitore, se serve una griglia dedicata a 4 colonne. */
.norme-link { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }

/* Regola d'oro "produce una prova": banda sobria a fondo scuro (1 gesto oro) */
.prova-banner {
  margin-top: var(--sp-8); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 120% at 50% 0%, color-mix(in srgb, var(--smeraldo-bright) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--superficie-scura), var(--nero-giuridico));
  border: 1px solid var(--linea-scura);
  text-align: center;
}
.prova-banner .filo-oro { margin: 0 auto var(--sp-4); }
.prova-banner p { color: var(--su-scuro-testo); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); max-width: 40ch; margin-inline: auto; text-wrap: balance; }
.prova-banner p b { color: var(--smeraldo-bright); font-weight: 700; }

/* ============================================================
   SERVIZI — percorsi dettagliati
   ============================================================ */
.percorsi-full { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }

.percorso-full { display: grid; grid-template-columns: 1.5fr .95fr; gap: var(--sp-6) var(--sp-8); align-items: start; padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
.percorso-full__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; border-bottom: 1px solid var(--linea); padding-bottom: var(--sp-4); }
.percorso-full__step { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--smeraldo) 45%, var(--linea)); font-family: var(--font-mono); font-weight: 700; color: var(--smeraldo-scuro); flex: none; }
.percorso-full__title h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); }
.percorso-full__claim { color: var(--grigio-testo); font-size: var(--fs-small); margin-top: .35rem; }
.percorso-full__body { display: flex; flex-direction: column; gap: var(--sp-5); }
.percorso-full__block > .mono-label { display: block; margin-bottom: var(--sp-2); }
.percorso-full__block p { color: var(--grigio-testo); font-size: var(--fs-small); }

/* deliverable (cosa include) */
.deliverables { list-style: none; padding: 0; display: grid; gap: .55rem; }
.deliverables li { position: relative; padding-left: 1.7rem; font-size: var(--fs-small); color: var(--grigio-testo); }
.deliverables li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--smeraldo-scuro); font-weight: 700; }
.deliverables li b { color: var(--inchiostro); font-weight: 600; }

/* fasi (come funziona) — passi numerati */
.fasi { list-style: none; counter-reset: fase-n; padding: 0; display: grid; gap: var(--sp-4); }
.fasi li { position: relative; padding-left: 2.6rem; counter-increment: fase-n; font-size: var(--fs-small); color: var(--grigio-testo); }
.fasi li::before { content: counter(fase-n); position: absolute; left: 0; top: -.1rem; width: 28px; height: 28px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--linea); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--smeraldo-scuro); font-size: var(--fs-mono); }
.fasi li b { color: var(--inchiostro); font-weight: 600; display: block; }

/* aside prezzo — tarjeta canonica ISOLE VERDE BOSCO (identica alla home §.percorso--verde).
   NON sticky: scorre col contenuto, una sola tarjeta di prezzo canonica in tutto il sito. */
.percorso-full__aside { align-self: start; }
/* longhand blindato (colore solido) come .percorso--verde: color-mix fuori range → card trasparente su carta = fatale */
.prezzo-card {
  background-color: var(--superficie-scura);                 /* #1C2A24 · fondo bosco solido */
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--superficie-scura) 82%, #ffffff 8%), var(--superficie-scura));
  border: 1px solid var(--linea-scura);
  color: var(--su-scuro-testo);
  border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: 0 1px 2px rgba(14,28,22,.06), 0 18px 44px -18px rgba(14,28,22,.5);
}
.prezzo-card__label { color: var(--smeraldo-bright); }       /* coerente con home (oro resta cerimoniale/scarso) */
.prezzo-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.prezzo-row { padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea-scura); }
.prezzo-row:last-child { border-bottom: 0; }
.prezzo-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.prezzo-row__nome { color: var(--su-scuro-testo); font-size: var(--fs-small); font-weight: 600; }
.prezzo-row__val { font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; color: var(--smeraldo-bright); white-space: nowrap; }
.prezzo-row__nota { display: block; margin-top: .3rem; font-size: var(--fs-mono); letter-spacing: .04em; color: var(--su-scuro-tenue); font-style: italic; }
.prezzo-card__foot { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-3); }
.prezzo-card__foot .btn { justify-content: center; }
.prezzo-card__iva { font-size: var(--fs-mono); letter-spacing: .04em; color: var(--su-scuro-tenue); text-align: center; }

/* badge lancio (riusa concetto .percorsi__badge di styles.css) — nessun nuovo colore */
.servizi-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }

/* FAQ del percorso — riusa .faq; qui solo margine interno più compatto */
.percorso-full__faq { grid-column: 1 / -1; margin-top: var(--sp-2); border-top: 1px solid var(--linea); padding-top: var(--sp-5); }
.percorso-full__faq > .mono-label { display: block; margin-bottom: var(--sp-2); }
.percorso-full__faq .faq { margin-top: var(--sp-3); }

/* ============================================================
   TEAM — ritratti tipografici (riusa .team__* di styles.css) + bio
   ============================================================ */
.team__card { text-align: left; }
.team__bio { color: var(--grigio-testo); font-size: var(--fs-small); line-height: var(--lh-body); margin-top: var(--sp-3); }
.team__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-3); list-style: none; padding: 0; }
.team__tags li { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .06em; color: var(--grigio-testo); background: var(--sfondo-base); border: 1px solid var(--linea); border-radius: var(--r-pill); padding: .3em .7em; }

/* ============================================================
   CONTATTI — form + slot Calendly + dati legali
   ============================================================ */
/* select coerente con .field input/textarea di styles.css */
.field select {
  font: inherit; width: 100%; min-width: 0; max-width: 100%;
  padding: .7em .9em; border-radius: var(--r-sm);
  border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro);
  cursor: pointer;
}
.field select:focus-visible { border-color: var(--smeraldo); outline-offset: 1px; }
.field .field__hint { font-size: var(--fs-mono); letter-spacing: .03em; color: var(--su-scuro-tenue); }
.contatti__form .field__hint { color: var(--grigio-testo); }

/* slot Calendly (placeholder in attesa dell'embed reale) */
.calendly-slot {
  border: 1px dashed color-mix(in srgb, var(--smeraldo-bright) 40%, var(--linea-scura));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--smeraldo-bright) 5%, var(--superficie-scura));
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start;
  min-height: 220px;
}
.calendly-slot .mono-label { color: var(--smeraldo-bright); }
.calendly-slot h3 { color: var(--su-scuro-testo); }
.calendly-slot p { color: var(--su-scuro-tenue); font-size: var(--fs-small); }

/* dati legali di contatto */
.contatti-legal { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--linea-scura); display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.contatti-legal__item { min-width: 0; }
.contatti-legal__item .mono-label { display: block; margin-bottom: .35rem; color: var(--smeraldo-bright); }
.contatti-legal__item a, .contatti-legal__item p { overflow-wrap: anywhere; }   /* email/URL lunghe non spingono il layout */
.contatti-legal__item a, .contatti-legal__item p { color: var(--su-scuro-testo); font-size: var(--fs-small); }
.contatti-legal__item a:hover { color: var(--smeraldo-bright); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .percorso-full { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (max-width: 640px) {
  .percorso-full__head { flex-direction: row; align-items: center; }
}

/* ============================================================
   PROFILO AUTORE (pagina /autori/ — ritratto tipografico)
   ============================================================ */
.profilo-autore {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.profilo-autore .team__portrait { margin-bottom: 0; }
.profilo-autore__body { display: grid; gap: var(--sp-3); }
.profilo-autore__body h2 { margin: 0; }
.profilo-autore__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-2); }
@media (max-width: 640px) {
  .profilo-autore { grid-template-columns: 1fr; gap: var(--sp-5); }
  .profilo-autore .team__portrait { max-width: 220px; }
}