/* ==========================================================================
   Maria Nano — Design System
   --------------------------------------------------------------------------
   Principi:
   1. UN solo fondo dominante (carta calda). Le varianti sono tinte tenui,
      non fasce sature che competono tra loro.
   2. UN solo momento scuro per pagina (+ il footer): l'antracite è un
      accento raro, non uno dei tanti colori di sfondo.
   3. UN solo colore d'azione (bordeaux): se è bordeaux, si clicca.
   4. Angoli squadrati (raggio minimo) su bottoni, schede e riquadri.
   5. Palette e tipografia allineate al marchio "Intreccio":
      bordeaux #7B1F32, antracite #26262B, avorio; EB Garamond + Inter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Fondi */
  --paper:        #FAF6F0;   /* fondo principale, carta calda */
  --paper-tint:   #F2EBE1;   /* variante tenue per alternare le sezioni */
  --surface:      #FFFFFF;   /* schede */
  --deep:         #26262B;   /* antracite — il momento scuro, usato con parsimonia */

  /* Testo */
  --ink:          #26262B;   /* testo principale (antracite del marchio) */
  --ink-muted:    #5C574F;   /* testo secondario */
  --brand:        #26262B;   /* titoli — antracite, per lasciare il bordeaux alle azioni */
  --brand-link:   #7B1F32;   /* link — bordeaux */
  --on-deep:      #F4F1EC;   /* testo su fondo scuro */
  --on-deep-muted: #B7B1A8;  /* testo secondario su fondo scuro */

  /* Azione */
  --accent:       #7B1F32;   /* bordeaux del marchio — solo per le azioni */
  --accent-hover: #611624;
  --accent-ink:   #7B1F32;   /* bordeaux per testo/eyebrow su chiaro */
  --accent-on-deep: #C98793; /* bordeaux schiarito, leggibile su antracite */

  /* Dettaglio */
  --line:         #E4D9C9;   /* filetti su chiaro */
  --line-soft:    #EFE7DA;
  --line-deep:    rgba(244, 241, 236, 0.16);

  /* Tipografia */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Spaziatura — scala 4pt */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* Struttura */
  --width:      1120px;
  --width-text: 68ch;
  --gutter:     1.5rem;
  --radius:     3px;         /* angoli squadrati (o quasi) */
  --radius-sm:  2px;
  --radius-pill: 3px;        /* i bottoni non sono più a pillola */

  /* Ombre — leggere: preferiamo il filetto all'ombra pesante */
  --shadow-sm: 0 1px 2px rgba(38, 38, 43, 0.05);
  --shadow-md: 0 1px 2px rgba(38, 38, 43, 0.05), 0 10px 28px rgba(38, 38, 43, 0.08);

  --ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. Reset e basi
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.006em;
}
h2 {
  font-size: clamp(1.85rem, 1.35rem + 2vw, 2.7rem);
  line-height: 1.16;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 600;
}
h4 {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
}

p { margin: 0; }

.lede {
  font-size: clamp(1.09rem, 1rem + 0.4vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.quote {
  margin: 0;
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.42;
  color: var(--brand);
}
.quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}


/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* La spaziatura verticale delle sezioni: generosa ma non uniforme.
   Fra due sezioni sullo stesso fondo l'aria deve bastare a separare, non
   a far galleggiare: il cambio di tinta fa già gran parte del lavoro. */
.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--roomy { padding-block: var(--s-9); }

.section--tint { background: var(--paper-tint); }
.section--deep {
  background: var(--deep);
  color: var(--on-deep);
}
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--on-deep); }
.section--deep .lede { color: var(--on-deep-muted); }
.section--deep .eyebrow { color: var(--on-deep-muted); }

@media (max-width: 760px) {
  .section, .section--roomy { padding-block: var(--s-7); }
  .section--tight { padding-block: var(--s-6); }
}

/* Ritmo interno: gli elementi di un gruppo stanno vicini. */
.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-5); }

.measure { max-width: var(--width-text); }

.section-head {
  max-width: 60ch;
  margin-bottom: var(--s-7);
}
.section-head > * + * { margin-top: var(--s-3); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. Bottoni — un solo colore d'azione
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: #FFFFFF;
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  border-color: var(--line);
  color: var(--brand);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--brand);
  background: transparent;
}

/* Varianti su fondo scuro */
.btn--on-deep {
  background: var(--on-deep);
  color: var(--deep);
}
.btn--on-deep:hover { background: #FFFFFF; }

.btn--ghost-deep {
  border-color: var(--line-deep);
  color: var(--on-deep);
}
.btn--ghost-deep:hover { border-color: var(--on-deep); }

.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }
/* display:inline-flex qui sopra vince sull'attributo [hidden]: va ripristinato */
.btn[hidden] { display: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Icone — un solo linguaggio grafico
   -------------------------------------------------------------------------- */
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.section--deep .stars { color: var(--accent-on-deep); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 240, 0.94);
  border-bottom: 1px solid var(--line-soft);
}
@supports (backdrop-filter: blur(10px)) {
  .site-header { backdrop-filter: blur(10px); }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 72px;
}

/* Marchio "Intreccio": simbolo SVG inline + nome come testo vero (non immagine).
   Il simbolo eredita la dimensione da qui; il nome usa il font dei titoli. */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand-mark { flex: none; display: block; }
.brand-mark svg { display: block; width: 38px; height: 38px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
  line-height: 1.1;
  white-space: nowrap;
}
.brand--footer .brand-name { color: var(--on-deep); }
@media (max-width: 640px) {
  .brand-mark svg { width: 32px; height: 32px; }
}

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav-list { display: flex; align-items: center; gap: var(--s-5); }

.nav-link {
  position: relative;
  display: block;
  padding-block: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--ease);
}
.nav-link:hover { color: var(--accent-ink); }
.nav-link[aria-current="page"] { color: var(--accent-ink); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-side { display: flex; align-items: center; gap: var(--s-4); }

.lang { display: flex; align-items: center; gap: 2px; }
.lang a {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background var(--ease), color var(--ease);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--brand); color: #FFFFFF; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;      /* riallinea il bordo ottico al contenitore */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.8px;
  background: var(--brand);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* Fascia stretta del desktop: la barra ha 6 voci + lingua + CTA, va compattata
   perché non vada a capo prima di passare al menu mobile a 1040px. */
@media (min-width: 1041px) and (max-width: 1300px) {
  .header-inner { gap: var(--s-3); }
  .nav { gap: var(--s-4); }
  .nav-list { gap: var(--s-4); }
  .nav-side { gap: var(--s-3); }
  .nav-link { font-size: 0.875rem; }
  .brand-name { font-size: 1.0625rem; }
}

@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .nav {
    /* Nota: .site-header usa backdrop-filter, che crea un containing block per
       i discendenti position:fixed. Due conseguenze da cui dipende questo
       blocco: (1) l'altezza va calcolata con 100vh e --header-h invece che con
       top/bottom; (2) il pannello contribuisce all'overflow della pagina, per
       cui da chiuso NON viene spinto fuori schermo con una transform (creava
       scroll orizzontale su mobile) ma semplicemente nascosto.
       Il pannello copre TUTTA la larghezza: niente contenuto visibile a fianco. */
    display: none;
    position: fixed;
    top: var(--header-h, 72px);
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: calc(100vh - var(--header-h, 72px));
    height: calc(100dvh - var(--header-h, 72px));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    padding: var(--s-5) var(--gutter) var(--s-7);
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
  }
  .nav[data-open="true"] {
    display: flex;
    animation: nav-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes nav-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .nav-list > li { border-bottom: 1px solid var(--line-soft); }
  .nav-link { padding-block: var(--s-3); font-size: 1rem; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-link[aria-current="page"] { font-weight: 600; }
  .nav-side { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: var(--s-3); }
  .nav-side .btn { padding-block: 0.85rem; }
  .lang { align-self: flex-start; gap: var(--s-2); }
  .lang a { padding: 0.6rem 0.9rem; }
  /* Blocca lo scroll della pagina mentre il menu è aperto */
  body.nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-text > * + * { margin-top: var(--s-4); }
.hero-text .btn-row { margin-top: var(--s-6); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.stat-value {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.2;
}
.stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .hero { padding-block: var(--s-6) var(--s-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-figure { order: -1; }
  .hero-stats { gap: var(--s-4) var(--s-5); }
}

/* Intestazione delle pagine interne */
.page-head {
  padding-block: var(--s-7) var(--s-7);
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line-soft);
}
.page-head-inner { max-width: 62ch; }
.page-head-inner > * + * { margin-top: var(--s-4); }
.page-head--center .page-head-inner { margin-inline: auto; text-align: center; }
.page-head .btn-row { margin-top: var(--s-6); }

.breadcrumb {
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.breadcrumb a { color: var(--brand-link); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { padding-inline: 0.4rem; opacity: 0.5; }

/* --------------------------------------------------------------------------
   9. Figure e gallerie
   -------------------------------------------------------------------------- */
.figure {
  /* Usata anche su <span> e <a>, che sono inline: senza display:block
     l'aspect-ratio non si applica e resta uno spazio di baseline. */
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--landscape { aspect-ratio: 3 / 2; }
.figure--square { aspect-ratio: 1 / 1; }

/* L'immagine dell'hero non deve diventare una voragine su schermi alti */
.hero-figure { max-height: 78vh; }


/* --------------------------------------------------------------------------
   10. Blocchi narrativi a due colonne
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-text > * + * { margin-top: var(--s-4); }
.split-text .btn-row { margin-top: var(--s-6); }
.split--reverse .split-figure { order: 2; }

@media (max-width: 860px) {
  .split, .split--reverse { grid-template-columns: 1fr; gap: var(--s-6); }
  .split--reverse .split-figure { order: -1; }
  .split-figure { order: -1; }
}

/* --------------------------------------------------------------------------
   11. Schede esperienza
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 920px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.card:hover {
  border-color: #D8C3A8;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card .figure { border: 0; border-radius: 0; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-5);
}
.card-text { color: var(--ink-muted); font-size: 0.9375rem; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.meta-item { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.meta-item .icon { color: var(--ink-muted); }
.meta-item--rating { color: var(--ink); font-weight: 600; }
.meta-item--rating .icon { color: var(--accent); fill: var(--accent); stroke: none; }

.card-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.card-foot .btn { width: 100%; }

/* --------------------------------------------------------------------------
   12. Valori (senza riquadri: solo icona, titolo, testo)
   -------------------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
/* 4 elementi: griglia 2×2, più equilibrata di 3 + 1 */
.values--2col { grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin-inline: auto; }
@media (max-width: 760px) { .values, .values--2col { grid-template-columns: 1fr; gap: var(--s-5); } }
@media (min-width: 761px) and (max-width: 940px) { .values { grid-template-columns: repeat(2, 1fr); } }

.value { text-align: center; }
.value > * + * { margin-top: var(--s-3); }
.value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--brand);
}
.value-icon .icon { width: 21px; height: 21px; }
.value p { color: var(--ink-muted); font-size: 0.9375rem; text-wrap: pretty; }


/* --------------------------------------------------------------------------
   13. Recensioni
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 920px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .quotes { grid-template-columns: 1fr; } }

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote-text { font-size: 0.9375rem; line-height: 1.6; }
.quote-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: var(--s-2);
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;             /* evita che l'interlinea ereditata sposti l'iniziale */
  text-align: center;
  color: var(--brand);
}
.quote-who { display: block; min-width: 0; }
.quote-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.quote-place {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* Sul fondo scuro le schede diventano traslucide, non blocchi bianchi */
.section--deep .quote-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-deep);
  color: var(--on-deep);
}
.section--deep .avatar {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--line-deep);
  color: var(--on-deep);
}
.section--deep .quote-name { color: var(--on-deep); }
.section--deep .quote-place { color: var(--on-deep-muted); }

/* Riepilogo valutazione */
.score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.score-figure { flex: none; }
.score-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--brand);
}
.score-figure .stars { margin-block: var(--s-2) var(--s-1); }
.score-figure .stars svg { width: 18px; height: 18px; }
.score-count { display: block; font-size: 0.8125rem; color: var(--ink-muted); }
.score-note { flex: 1 1 22rem; margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   14. Elenco spuntato (pagina strutture)
   -------------------------------------------------------------------------- */
.checklist > li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9688rem;
}
.checklist > li + li { margin-top: var(--s-3); }
.checklist .icon {
  width: 18px;
  height: 18px;
  margin-top: 0.28rem;
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   15. Nota e richiamo finale (sostituiscono le vecchie fasce colorate)
   -------------------------------------------------------------------------- */
.note {
  max-width: 62ch;
  margin-inline: auto;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  text-align: left;
}
.note > * + * { margin-top: var(--s-3); }
.note p { color: var(--ink-muted); }
.note a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }

.cta {
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.cta p { color: var(--ink-muted); }
.section--deep .cta p { color: var(--on-deep-muted); }

/* --------------------------------------------------------------------------
   16. Pagine legali
   -------------------------------------------------------------------------- */
.legal {
  max-width: 72ch;
  margin-inline: auto;
}
.legal > * + * { margin-top: var(--s-4); }
.legal h2 {
  margin-top: var(--s-7);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
}
.legal h3 {
  margin-top: var(--s-5);
  color: var(--ink);
}
.legal ul {
  list-style: disc;
  padding-left: 1.35rem;
  color: var(--ink-muted);
}
.legal li + li { margin-top: var(--s-2); }
.legal p { color: var(--ink-muted); }
.legal a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); }
.legal code {
  padding: 0.1rem 0.35rem;
  background: var(--paper-tint);
  border-radius: 4px;
  font-size: 0.875em;
}

.legal-note {
  padding: var(--s-5);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--s-8) var(--s-5);
  background: var(--deep);
  color: var(--on-deep-muted);
  font-size: 0.9375rem;
}
.site-footer .brand-name { color: var(--on-deep); }
.site-footer h4 {
  margin-bottom: var(--s-4);
  color: var(--on-deep);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-footer a { transition: color var(--ease); }
.site-footer a:hover { color: var(--on-deep); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-7);
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-about > * + * { margin-top: var(--s-4); }
.footer-about p { max-width: 34ch; }

.footer-links > li + li { margin-top: var(--s-3); }

/* Social: solo icona Instagram, senza etichetta — pulsante quadrato a tocco pieno. */
.social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-deep);
  border-radius: var(--radius-pill);
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.social a:hover {
  border-color: var(--on-deep);
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-deep);
}
.social .icon { width: 18px; height: 18px; opacity: 0.8; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-deep);
  font-size: 0.8125rem;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
}
.footer-legal a { color: var(--on-deep-muted); }
.footer-legal a:hover { color: var(--on-deep); }

/* --------------------------------------------------------------------------
   18. Banner cookie
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed;
  inset-inline: var(--s-4);
  bottom: var(--s-4);
  z-index: 200;
  max-width: 30rem;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(38, 38, 43, 0.18);
  font-size: 0.9rem;
}
.cookie[hidden] { display: none; }
.cookie > * + * { margin-top: var(--s-4); }
.cookie p { color: var(--ink-muted); }
.cookie strong { color: var(--ink); }
.cookie a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }

.cookie-prefs > * + * { margin-top: var(--s-3); }
.cookie-prefs[hidden] { display: none; }
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.875rem;
}
.switch-row input { margin-top: 0.32rem; accent-color: var(--brand); }
.switch-row span { color: var(--ink-muted); }

/* Azioni: due scelte affiancate di pari peso (Accetta / Solo necessari),
   il terzo tasto — Personalizza o Salva preferenze — a tutta larghezza sotto.
   Su schermi molto stretti collassa in colonna singola. */
.cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.cookie-actions .btn {
  width: 100%;
  white-space: nowrap;
}
.cookie-actions .btn--wide { grid-column: 1 / -1; }

@media (max-width: 24rem) {
  .cookie-actions { grid-template-columns: 1fr; }
}

@media (min-width: 520px) {
  .cookie { inset-inline: auto var(--s-5); bottom: var(--s-5); }
}

/* --------------------------------------------------------------------------
   19. Utility
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.center-block { margin-inline: auto; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Rivelazione allo scroll — lo stato nascosto è applicato da JS, così
   senza JS il contenuto resta comunque visibile. */
.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }

/* --------------------------------------------------------------------------
   20. Testo lungo (profilo), "I numeri", elenchi
   -------------------------------------------------------------------------- */
.prose {
  max-width: 62ch;
  margin-inline: auto;
}
.prose > * + * { margin-top: var(--s-4); }
.prose p { color: var(--ink-muted); text-wrap: pretty; }
.prose strong { color: var(--ink); }
.prose .btn-row { margin-top: var(--s-6); justify-content: center; }
.prose--lead p {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* Foto che spezza il testo lungo del profilo (ritratto b/n).
   Riquadro verticale 4:5: con una foto verticale non taglia il viso.
   Da ricontrollare con la foto definitiva ad alta risoluzione. */
.prose-figure {
  max-width: 24rem;
  margin: var(--s-8) auto;
}
.prose-figure .figure {
  display: block;
  aspect-ratio: 4 / 5;
}
.prose-figure .figure img { object-position: center top; }
@media (max-width: 760px) { .prose-figure { margin-block: var(--s-7); max-width: 20rem; } }

/* Riga durata/formato sotto il nome dell'esperienza (pagina Esperienze) */
.exp-meta {
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.split-text > .exp-meta { margin-top: var(--s-2); }

/* Frase di chiusura sotto la griglia "Il metodo" */
.method-note {
  max-width: 52ch;
  margin: var(--s-6) auto 0;
  text-align: center;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* Barra "I numeri" su fondo scuro — l'unico momento scuro della pagina */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-6);
}
@media (max-width: 820px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .figures { grid-template-columns: 1fr; } }
.figures > li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9375rem;
  color: var(--on-deep);
}
.figure-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-deep);
  color: var(--accent-on-deep);
}
.figure-num .icon { width: 17px; height: 17px; }

/* Elenco "spuntato" centrato (pagina strutture) */
.checklist--center {
  max-width: 46ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   21. Pagina contatti
   -------------------------------------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--s-7); } }

.contact-main > h2 { margin-bottom: var(--s-2); }
.contact-hint { margin-bottom: var(--s-5); color: var(--ink-muted); font-size: 0.9rem; }

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--s-4);
}
.contact-form label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-size: 1rem;                 /* ≥16px: evita lo zoom automatico su iOS */
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand-link);
  box-shadow: 0 0 0 3px rgba(123, 31, 50, 0.15);
}
.contact-form button[type="submit"] { margin-top: var(--s-2); }

/* Lingua preferita + tipo di richiesta affiancati sopra ~560px */
.field-row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot anti-spam: fuori schermo, non deve essere visibile né tabulabile */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-privacy { margin-top: var(--s-4); font-size: 0.8125rem; color: var(--ink-muted); }
.contact-privacy a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }

.form-ok,
.form-error {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}
/* L'errore usa il bordo bordeaux: "serve la tua attenzione", non una nuova tinta */
.form-error { border-left-color: var(--accent); }
.form-ok[hidden],
.form-error[hidden] { display: none; }
.form-ok strong,
.form-error strong { color: var(--brand); font-family: var(--font-display); font-size: 1.05rem; }
.form-error strong { color: var(--accent-ink); }
.form-ok p,
.form-error p { margin-top: var(--s-1); color: var(--ink-muted); font-size: 0.9375rem; }
.form-error a { color: var(--brand-link); text-decoration: underline; text-underline-offset: 2px; }

.contact-aside > h2 { margin-bottom: var(--s-4); font-size: 1.2rem; }
.contact-list > li { display: flex; gap: 0.85rem; }
.contact-list > li + li {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.contact-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--brand);
}
.contact-ico .icon { width: 19px; height: 19px; }
.contact-list li > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.contact-list strong { color: var(--ink); font-size: 0.95rem; }
.contact-list li span span { color: var(--ink-muted); font-size: 0.9rem; }
.contact-list .btn { align-self: flex-start; margin-top: 0.35rem; }
.contact-link {
  align-self: flex-start;
  color: var(--brand-link);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

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