@charset "utf-8";
/* lucreziaferri.it — impianto Apple (design-md/apple) sui colori della
   dottoressa: verde #12715B e crema #f5eee9.

   Le regole per mobile stanno IN FONDO al file. Una @media messa in mezzo
   viene ricoperta da qualunque regola desktop scritta dopo, e si passa
   mezz'ora a cercare un bug che non c'e'. */

/* ---------------------------------------------------------------- token */
:root {
  /* marchio */
  --verde: #12715b;
  --verde-scuro: #0f604d;
  --verde-chiaro: #4fb79a;
  /* Il verde del tema scuro e' chiaro (#4fb79a): sopra ci vuole testo scuro,
     non bianco, se no il pulsante scende a 2,45:1. E dove il fondo e' fisso
     (pulsanti bianchi, footer) serve un verde che NON segua il tema. */
  --su-verde: #ffffff;
  --verde-fisso: #12715b;
  --verde-fisso-scuro: #0f604d;
  --rosso: #b3261e;
  --crema: #f5eee9;
  --crema-forte: #ede2da;

  /* superfici (apple: canvas / parchment / pearl / near-black) */
  --tela: #ffffff;
  --perla: #f5f5f7;
  --scuro-1: #16332c;
  --scuro-2: #1a3a32;
  --nero: #0d1f1a;

  /* testo */
  --inchiostro: #1d1d1f;
  --inchiostro-80: #333336;
  --inchiostro-48: #63635f;
  --su-scuro: #ffffff;
  --su-scuro-tenue: #c9d6d1;

  /* fili */
  --filo: #e0e0e2;
  --filo-tenue: #f0f0f0;
  /* WCAG 1.4.11 chiede 3:1 per il contorno di un elemento d'interfaccia.
     --filo su bianco fa 1,32:1: va bene per una linea decorativa, non per
     il bordo di un campo, che senza questo e' un riquadro invisibile. */
  --filo-campo: #8d8d91;   /* 3,2:1 su bianco, misurato */

  /* forme */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* ritmo */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 17px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sezione: clamp(64px, 8vw, 104px);
  --larghezza: 1120px;
  --stretta: 720px;

  /* l'unica ombra del sistema: solo sotto una fotografia */
  --ombra-foto: rgba(0, 0, 0, .22) 3px 5px 30px 0;

  color-scheme: light;
}

html[data-tema="scuro"] {
  --tela: #12211d;
  --perla: #162823;
  --crema: #17302a;
  --crema-forte: #1b3830;
  --inchiostro: #f2f5f4;
  --inchiostro-80: #d3ded9;
  --inchiostro-48: #94a49e;
  --filo: #24443b;
  --filo-tenue: #1d372f;
  --filo-campo: #6d8c81;
  --verde: #4fb79a;
  --verde-scuro: #6ecab1;
  --su-verde: #06231c;
  --rosso: #ff9a92;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--tela);
  color: var(--inchiostro);
  /* Nunito: senza grazie, terminali arrotondati, altezza della x piu' bassa
     di Inter. A parita' di px il testo sembra piu' piccolo, quindi il corpo
     sale da 17 a 17.5, l'interlinea da 1.47 a 1.55 e la spaziatura negativa
     si allenta (Nunito e' gia' stretto di suo). */
  font-family: Nunito, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17.5px;
  line-height: 1.55;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sui titoli Nunito vuole un filo di peso in piu' e meno stretta di Inter:
   a -.022em le lettere tonde si toccano. */
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; letter-spacing: -.014em; line-height: 1.14; }
h1 { font-size: clamp(37px, 5.2vw, 58px); line-height: 1.1; }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; }
h4 { font-size: 19px; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
/* sul verde scuro il contorno verde non si vede: li' passa al chiaro */
.fascia--scura :focus-visible, .fascia--scura-2 :focus-visible, .pie :focus-visible,
.barra-mobile :focus-visible { outline-color: #ffffff; }

/* L'intestazione e' appiccicata in alto e alta 63px: senza questo, cliccando
   un link tipo /#percorsi il titolo della sezione finisce esattamente sotto la
   testata e sembra che l'ancora punti al posto sbagliato. */
[id] { scroll-margin-top: 80px; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--verde); color: var(--su-verde); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.salta:focus { left: 0; }

/* ------------------------------------------------------------ impianto */
.contenitore { width: 100%; max-width: var(--larghezza); margin-inline: auto; padding-inline: 24px; }
.stretta { max-width: var(--stretta); }

.fascia { padding-block: var(--sezione); }
.fascia--tela { background: var(--tela); }
.fascia--perla { background: var(--perla); }
.fascia--crema { background: var(--crema); }
.fascia--scura { background: var(--scuro-1); color: var(--su-scuro); }
.fascia--scura-2 { background: var(--scuro-2); color: var(--su-scuro); }

/* Su fondo scuro tutto il testo va chiarito: un h2 che eredita
   --inchiostro resta grigio su grigio e sparisce. */
.fascia--scura h1, .fascia--scura h2, .fascia--scura h3, .fascia--scura h4,
.fascia--scura-2 h1, .fascia--scura-2 h2, .fascia--scura-2 h3, .fascia--scura-2 h4 { color: var(--su-scuro); }
.fascia--scura p, .fascia--scura li, .fascia--scura-2 p, .fascia--scura-2 li { color: var(--su-scuro-tenue); }
.fascia--scura a:not(.btn), .fascia--scura-2 a:not(.btn) { color: var(--verde-chiaro); }

.occhiello {
  display: inline-block; margin: 0 0 var(--sp-md);
  font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--verde);
}
.fascia--scura .occhiello, .fascia--scura-2 .occhiello { color: var(--verde-chiaro); }

.sommario { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--inchiostro-80); max-width: 62ch; }
.fascia--scura .sommario, .fascia--scura-2 .sommario { color: var(--su-scuro-tenue); }

.testa-sezione { max-width: 44rem; margin-bottom: var(--sp-2xl); }
.testa-sezione--centro { margin-inline: auto; text-align: center; }

/* ------------------------------------------------------------- bottoni */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 16.5px; font-weight: 600; line-height: 1; letter-spacing: -.004em;
  cursor: pointer; text-decoration: none !important;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn:active { transform: scale(.975); }
.btn--primario { background: var(--verde); color: var(--su-verde); }
.btn--primario:hover { background: var(--verde-scuro); color: var(--su-verde); }
.btn--fantasma { background: transparent; color: var(--verde); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }
.btn--fantasma:hover { background: color-mix(in srgb, var(--verde) 8%, transparent); }
.btn--chiaro { background: #fff; color: var(--verde-fisso); }
.btn--chiaro:hover { background: #f1e9e3; color: var(--verde-fisso-scuro); }
.btn--su-scuro { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--su-scuro:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--grande { padding: 16px 34px; font-size: 18px; }
.btn--piccolo { padding: 9px 18px; font-size: 15px; }

.gruppo-btn { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.gruppo-btn--centro { justify-content: center; }

.link-freccia { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.link-freccia::after { content: "›"; font-size: 1.25em; line-height: 1; transition: transform .2s ease; }
.link-freccia:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------- intestazione */
.testata {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--tela) 88%, transparent);
  border-bottom: 1px solid var(--filo-tenue);
}
@supports (backdrop-filter: blur(18px)) {
  .testata { backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
}
.testata__riga { display: flex; align-items: center; gap: var(--sp-lg); min-height: 62px; }
.marchio { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.marchio img { width: 38px; height: 38px; border-radius: 50%; }
/* Il logo e' a tratto: quello nero sparisce sul fondo scuro e quello bianco
   sparisce sul chiaro. Si tengono in pagina tutti e due e si mostra quello
   che serve — anche quando l'utente passa al tema scuro. */
.marchio .logo-bianco, html[data-tema="scuro"] .marchio .logo-nero { display: none; }
html[data-tema="scuro"] .marchio .logo-bianco { display: block; }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.1; }
.marchio__nome { font-size: 15px; font-weight: 700; color: var(--inchiostro); letter-spacing: -.012em; }
.marchio__ruolo { font-size: 11.5px; color: var(--inchiostro-48); letter-spacing: .04em; text-transform: uppercase; }
.marchio:hover { text-decoration: none; }

.menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.menu a { padding: 8px 12px; font-size: 14.5px; color: var(--inchiostro-80); border-radius: var(--r-sm); }
.menu a:hover { color: var(--verde); background: color-mix(in srgb, var(--verde) 7%, transparent); text-decoration: none; }
.testata__azioni { display: flex; align-items: center; gap: 8px; }

.tema-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 1px solid var(--filo); border-radius: 50%;
  background: transparent; color: var(--inchiostro-80); cursor: pointer; padding: 0;
}
.tema-btn:hover { color: var(--verde); border-color: var(--verde); }
.tema-btn svg { width: 17px; height: 17px; }
html[data-tema="scuro"] .tema-btn .icona-luna, html:not([data-tema="scuro"]) .tema-btn .icona-sole { display: none; }

.apri-menu { display: none; }
.menu-mobile { display: none; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(52px, 7vw, 92px) clamp(48px, 6vw, 84px); background: var(--crema); overflow: hidden; }
.hero__griglia { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: var(--sp-lg); }
.hero h1 em { font-style: normal; color: var(--verde); }
.hero__testo { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--inchiostro-80); max-width: 46ch; }
.hero__azioni { margin-top: var(--sp-xl); }
.hero__rassicura { margin-top: var(--sp-lg); font-size: 14px; color: var(--inchiostro-48); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero__rassicura span { display: inline-flex; align-items: center; gap: 6px; }
.hero__rassicura span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--verde); }

.hero__foto { position: relative; }
.hero__foto img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--ombra-foto); }
.hero__badge {
  position: absolute; left: -18px; bottom: 26px;
  background: var(--tela); border-radius: var(--r-md); padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10); max-width: 232px;
}
.hero__badge strong { display: block; font-size: 15px; }
.hero__badge span { font-size: 13px; color: var(--inchiostro-48); }

/* ------------------------------------------------------------- numeri */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.numero__cifra { font-size: clamp(34px, 4.4vw, 52px); font-weight: 600; letter-spacing: -.03em; color: var(--verde); line-height: 1; }
.numero__voce { margin-top: 8px; font-size: 15px; color: var(--inchiostro-48); }
.fascia--scura .numero__cifra { color: var(--verde-chiaro); }
.fascia--scura .numero__voce { color: var(--su-scuro-tenue); }

/* ------------------------------------------------------------ percorsi */
.percorso { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 68px); align-items: center; padding-block: clamp(36px, 5vw, 56px); }
.percorso + .percorso { border-top: 1px solid var(--filo-tenue); }
.percorso:nth-child(even) .percorso__figura { order: 2; }
/* Le cinque illustrazioni hanno il fondo bianco dentro il JPEG: su una
   scheda che nel tema scuro diventa verde restavano rettangoli bianchi
   incollati. La cornice resta chiara in tutti e due i temi, cosi' il
   bianco dell'immagine e' voluto e non un errore. */
.percorso__figura { background: #f5f5f7; border-radius: var(--r-lg); padding: clamp(18px, 3vw, 34px); }
.percorso__figura img { border-radius: var(--r-md); }
.percorso__corpo p { color: var(--inchiostro-80); }
.percorso__corpo p:last-of-type { margin-bottom: var(--sp-lg); }
.percorso__corpo p.percorso__sommario { font-size: 19px; color: var(--inchiostro); font-weight: 600; }
.etichetta {
  display: inline-block; margin-bottom: 12px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--verde); color: var(--su-verde); font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}

/* --------------------------------------------------------------- aree */
.griglia-aree { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.area {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tela); border: 1px solid var(--filo); border-radius: var(--r-lg);
  transition: border-color .22s ease, transform .22s ease;
}
.area:hover { border-color: color-mix(in srgb, var(--verde) 45%, transparent); transform: translateY(-2px); }
.area img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.area__corpo { padding: var(--sp-lg); display: flex; flex-direction: column; flex: 1; }
.area__corpo h3 { font-size: 19px; }
.area__corpo p { font-size: 15px; line-height: 1.5; color: var(--inchiostro-48); }
.area__corpo .link-freccia { margin-top: auto; font-size: 14.5px; padding-top: 8px; }

/* --------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--filo); }
.faq__voce { border-bottom: 1px solid var(--filo); }
.faq__voce summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-lg);
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; letter-spacing: -.02em;
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::after { content: "+"; flex: 0 0 auto; font-size: 26px; font-weight: 300; line-height: 1; color: var(--verde); transition: transform .2s ease; }
.faq__voce[open] summary::after { transform: rotate(45deg); }
.faq__risposta { padding-bottom: 24px; color: var(--inchiostro-80); max-width: 68ch; }
.faq__risposta p:last-child, .faq__risposta ul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- modulo */
.modulo-blocco { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.modulo {
  background: var(--tela); border: 1px solid var(--filo); border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
}
.modulo__righe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--pieno { grid-column: 1 / -1; }
.campo label { font-size: 13.5px; font-weight: 600; color: var(--inchiostro-80); }
.campo label .obbl { color: var(--rosso); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--inchiostro);
  background: var(--tela); border: 1px solid var(--filo-campo); border-radius: var(--r-md);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 18%, transparent);
}
.campo input:user-invalid, .campo select:user-invalid, .campo textarea:user-invalid { border-color: var(--rosso); }
.campo__aiuto { font-size: 12.5px; color: var(--inchiostro-48); }
.campo__errore { font-size: 12.5px; color: var(--rosso); min-height: 1em; }
.campo label.consenso, .consenso { display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; font-weight: 400; color: var(--inchiostro-48); }
.consenso input { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--verde); }
.modulo__invia { margin-top: var(--sp-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md); }
.modulo__esito { font-size: 15px; margin-top: var(--sp-md); }
.modulo__esito--ok { color: var(--verde); }
.modulo__esito--ko { color: var(--rosso); }
.trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.contatto-diretto { display: grid; gap: var(--sp-md); margin-top: var(--sp-xl); }
.contatto-diretto a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--filo); border-radius: var(--r-md); color: var(--inchiostro);
}
.contatto-diretto a:hover { border-color: var(--verde); color: var(--verde); text-decoration: none; }
.contatto-diretto b { display: block; font-size: 15px; color: var(--inchiostro); }
/* solo lo span piu' interno, non quello che avvolge anche il <b>: se no il
   numero di telefono eredita il grigio della riga di spiegazione */
.contatto-diretto span span { font-size: 13px; color: var(--inchiostro-48); }
.contatto-diretto svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--verde); }

/* --------------------------------------------------------------- blog */
.griglia-articoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
.articolo-scheda {
  display: flex; flex-direction: column; padding: var(--sp-lg);
  background: var(--tela); border: 1px solid var(--filo); border-radius: var(--r-lg);
  transition: border-color .22s ease, transform .22s ease;
}
.articolo-scheda:hover { border-color: color-mix(in srgb, var(--verde) 45%, transparent); transform: translateY(-2px); }
/* h2 sull'indice del blog, h3 dove le schede stanno sotto un titolo di
   sezione: la resa dev'essere la stessa in tutti e due i casi. */
.articolo-scheda h2, .articolo-scheda h3 { font-size: 21px; line-height: 1.2; margin-bottom: 10px; }
.articolo-scheda h2 a, .articolo-scheda h3 a { color: inherit; }
.articolo-scheda p { font-size: 15px; color: var(--inchiostro-48); }
.articolo-meta { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--verde); margin-bottom: 12px; }
.articolo-scheda .link-freccia { margin-top: auto; font-size: 15px; }

.prosa { max-width: 68ch; font-size: 18px; line-height: 1.65; }
.prosa h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 1.9em; }
.prosa h3 { font-size: 21px; margin-top: 1.6em; }
.prosa p { color: var(--inchiostro-80); }
.prosa > :first-child { margin-top: 0; }

.briciole { font-size: 13.5px; color: var(--inchiostro-48); margin-bottom: var(--sp-lg); }
.briciole a { color: var(--inchiostro-48); }
.briciole a:hover { color: var(--verde); }

.nav-articoli { display: flex; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap;
  border-top: 1px solid var(--filo); margin-top: var(--sp-2xl); padding-top: var(--sp-lg); font-size: 15px; }

/* --------------------------------------------------------- richiamo cta */
.richiamo { text-align: center; }
.richiamo h2 { max-width: 20ch; margin-inline: auto; }
.richiamo .sommario { margin-inline: auto; text-align: center; }
.richiamo .gruppo-btn { margin-top: var(--sp-xl); }

/* ------------------------------------------------------------- footer */
.pie { background: var(--scuro-1); color: var(--su-scuro-tenue); padding-block: clamp(52px, 6vw, 76px) 28px; font-size: 15px; }
/* `:not(.btn)` non e' un vezzo: `.pie a` vale 0-0-1-1 e batteva `.btn--chiaro`
   (0-0-1-0). Il pulsante del footer si ritrovava il testo grigio chiaro su
   fondo bianco, e bianco su bianco al passaggio del mouse: invisibile. */
.pie a:not(.btn) { color: var(--su-scuro-tenue); }
.pie a:not(.btn):hover { color: #fff; }
.pie .btn--chiaro { background: #fff; color: var(--verde-fisso); }
.pie .btn--chiaro:hover { background: #f1e9e3; color: var(--verde-fisso-scuro); }
.pie__alto { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.pie__marchio { display: flex; align-items: center; gap: 13px; margin-bottom: var(--sp-md); }
/* niente lazy e niente cerchio: il marchio e' un disegno a tratto, ritagliarlo
   in tondo gli mangia le orecchie e il caricamento pigro lo lasciava fuori
   dalla prima resa (e dagli screenshot a pagina intera). */
.pie__marchio img { width: 52px; height: 52px; flex: 0 0 auto; }
/* L'uppercase stava sul contenitore e scendeva anche sul nome, che diventava
   maiuscolo, spaziato e a capo su due righe. Ora tocca solo la riga sotto. */
.pie__nome { display: block; }
.pie__nome b { display: block; color: #fff; font-size: 17px; font-weight: 700;
  letter-spacing: -.012em; text-transform: none; }
.pie__nome > span { display: block; margin-top: 2px; font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--verde-chiaro); }
.pie__frase { max-width: 34ch; color: var(--su-scuro-tenue); }
.pie h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-md); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie__contatti li { display: flex; gap: 9px; align-items: flex-start; }
.pie__contatti svg { width: 16px; height: 16px; margin-top: 3px; color: var(--verde-chiaro); flex: 0 0 auto; }
.pie__cta { margin-top: var(--sp-lg); }
.pie__basso {
  display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg); justify-content: space-between; align-items: center;
  margin-top: clamp(36px, 5vw, 56px); padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255,255,255,.13); font-size: 13px; color: #8ea69e;
}
/* piu' specifica di `.pie a:not(.btn)`, se no i link legali restano piu'
   chiari della riga in cui stanno */
.pie .pie__basso a:not(.btn) { color: #8ea69e; }
.pie .pie__basso a:not(.btn):hover { color: #fff; }
.pie__legale { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* la nota sta sotto una griglia con colonne di altezze diverse: senza un
   respiro suo si incolla al pulsante della prima colonna */
.pie__nota { max-width: 74ch; margin-top: clamp(30px, 4vw, 48px);
  font-size: 12.5px; line-height: 1.6; color: #8fa79f; }

/* --------------------------------------------------------- barra mobile */
.barra-mobile { display: none; }

/* --------------------------------------------------------------- varie */
.nascosto { display: none !important; }
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pillole { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-lg); }
.pillola {
  padding: 8px 15px; border-radius: var(--r-pill); background: var(--perla);
  border: 1px solid var(--filo); font-size: 14px; color: var(--inchiostro-80);
}
.pillola:hover { border-color: var(--verde); color: var(--verde); text-decoration: none; }

.citazione {
  border-left: 3px solid var(--verde); padding-left: var(--sp-lg);
  font-size: clamp(19px, 2.2vw, 25px); line-height: 1.45; font-weight: 400; letter-spacing: -.02em;
}
.citazione footer { margin-top: var(--sp-md); font-size: 15px; color: var(--inchiostro-48); letter-spacing: 0; }

.ritratto-tondo { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; box-shadow: var(--ombra-foto); }

/* Sulla pagina contatti il modulo e' il protagonista: prende la colonna
   larga, e i canali alternativi stanno di fianco. */
.modulo-blocco--modulo-primo { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.colonna-fianco .citazione { margin: 0 0 var(--sp-xl); }
.titolo-fianco { font-size: 19px; margin-bottom: var(--sp-md); }
.colonna-fianco .contatto-diretto { margin-top: 0; }

/* ------------------------------------------------------------- popup */
/* <dialog> nativo: focus trap, ESC e sfondo li fa il browser, senza libreria.
   Il pulsante resta un link vero verso /contact/: senza JavaScript, o se il
   browser non conosce showModal(), la pagina si apre e basta. */
.popup {
  width: min(680px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  background: var(--tela);
  color: var(--inchiostro);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.popup::backdrop { background: rgba(13, 31, 26, .55); }
@supports (backdrop-filter: blur(4px)) {
  .popup::backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}
.popup__corpo { max-height: min(88vh, 900px); overflow-y: auto; padding: clamp(22px, 3vw, 34px); }
.popup__testa { display: flex; align-items: flex-start; gap: var(--sp-lg); margin-bottom: var(--sp-lg); }
.popup__testa h2 { font-size: clamp(23px, 2.6vw, 30px); margin: 0 0 6px; }
.popup__testa p { margin: 0; font-size: 15px; color: var(--inchiostro-48); }
.popup__chiudi {
  flex: 0 0 auto; width: 38px; height: 38px; margin-left: auto; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--filo); border-radius: 50%;
  background: transparent; color: var(--inchiostro-80); cursor: pointer;
}
.popup__chiudi:hover { color: var(--verde); border-color: var(--verde); }
.popup__chiudi svg { width: 16px; height: 16px; }
/* dentro il popup il modulo non ha bisogno di una seconda cornice */
.popup .modulo { border: none; padding: 0; background: transparent; }
.popup__alternative {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  margin-top: var(--sp-lg); padding-top: var(--sp-md);
  border-top: 1px solid var(--filo); font-size: 14.5px; color: var(--inchiostro-48);
}
.popup__alternative a { font-weight: 500; }
body[data-popup="1"] { overflow: hidden; }

/* ================================================================ MOBILE
   Da qui in giu' solo regole per schermi stretti: tenendole in fondo
   vincono sempre sulle regole desktop scritte sopra. */

@media (max-width: 1080px) {
  .griglia-aree { grid-template-columns: repeat(2, 1fr); }
  .pie__alto { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .menu { display: none; }
  .apri-menu {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: auto;
    border: 1px solid var(--filo); border-radius: 50%; background: transparent;
    color: var(--inchiostro); cursor: pointer; padding: 0;
  }
  .apri-menu svg { width: 18px; height: 18px; }
  .testata__azioni .btn { display: none; }

  .menu-mobile {
    position: fixed; inset: 62px 0 0; z-index: 55; display: none;
    background: var(--tela); padding: var(--sp-lg) 24px 40px; overflow-y: auto;
  }
  .menu-mobile[data-aperto="1"] { display: block; }
    /* :not(.btn) come nel footer: `.menu-mobile a` vale 0-0-1-1 e batteva
     `.btn--primario`, quindi la CTA del menu telefono si ritrovava testo
     scuro sul verde, un bordo sotto e il padding delle voci di menu. */
  .menu-mobile a:not(.btn) { display: block; padding: 15px 0; font-size: 21px; font-weight: 500; color: var(--inchiostro); border-bottom: 1px solid var(--filo-tenue); }
  .menu-mobile .btn { display: flex; margin-top: var(--sp-lg); width: 100%; }
  .menu-mobile .btn + .btn { margin-top: var(--sp-sm); }
  body[data-blocco="1"] { overflow: hidden; }

  .hero__griglia { grid-template-columns: 1fr; gap: 36px; }
  .hero__foto { max-width: 460px; margin-inline: auto; }
  .hero__badge { left: auto; right: 12px; bottom: -14px; }
  .hero__testo { max-width: none; }

  .percorso, .modulo-blocco, .modulo-blocco--modulo-primo { grid-template-columns: 1fr; gap: 28px; }
  .percorso:nth-child(even) .percorso__figura { order: 0; }
  .percorso__figura { max-width: 420px; }

  .griglia-articoli { grid-template-columns: 1fr; }
  .numeri { gap: var(--sp-md); }

  /* la barra fissa in basso: il telefono e' il primo canale di questo sito */
  .barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--tela) 92%, transparent);
    border-top: 1px solid var(--filo);
  }
  @supports (backdrop-filter: blur(14px)) {
    .barra-mobile { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  }
  .barra-mobile .btn { width: 100%; padding: 12px 14px; font-size: 15px; }
  .pie { padding-bottom: calc(28px + 74px); }
  main:last-of-type { padding-bottom: 0; }
}

@media (max-width: 760px) {
  /* Su telefono il popup diventa un foglio dal basso: a schermo pieno il
     modulo si compila senza inseguire i campi. */
  .popup {
    width: 100vw; max-width: none; max-height: 92vh;
    margin: auto auto 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .popup__corpo { max-height: 92vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
  /* A 320px (iPhone SE) il nome per esteso spingeva i due pulsanti fuori
     dallo schermo: la pagina traboccava di 18px in orizzontale. Il marchio
     puo' restringersi, la riga del ruolo sparisce e il nome si tronca. */
  .marchio { min-width: 0; }
  .marchio__testo { min-width: 0; }
  .marchio__nome { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .marchio__ruolo { display: none; }
  .testata__riga { gap: var(--sp-sm); }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .griglia-aree { grid-template-columns: 1fr; gap: var(--sp-md); }
  .area { flex-direction: row; align-items: stretch; }
  /* il figlio flex della scheda e' il <picture>, non l'<img>: mettendo il
     flex sull'immagine il contenitore restava senza vincolo e si stirava */
  .area picture { flex: 0 0 116px; width: 116px; display: block; }
  .area img { width: 116px; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .area__corpo { padding: var(--sp-md); }
  .area__corpo h3 { font-size: 17px; }
  .modulo__righe { grid-template-columns: 1fr; }
  .numeri { grid-template-columns: 1fr; text-align: left; }
  .numero { display: flex; align-items: baseline; gap: 12px; }
  .numero__cifra { font-size: 34px; }
  .numero__voce { margin-top: 0; }
  .pie__alto { grid-template-columns: 1fr; gap: 30px; }
  .hero__badge { position: static; margin-top: var(--sp-md); max-width: none; box-shadow: none; border: 1px solid var(--filo); }
  .gruppo-btn .btn { width: 100%; }
  .prosa { font-size: 17px; }
  .contenitore { padding-inline: 20px; }
}