/* ==========================================================================
   PAGINE SERVIZIO x COMUNE

   Due correzioni pesanti rispetto alla prima stesura, entrambe emerse dalla
   verifica sul rendering vero e non sul CSS dichiarato:

   1. IL GRAFICO NON E' PIU' UN SVG. Era un <svg viewBox="0 0 640 362">
      dentro una colonna larga 418px: le unita' utente venivano scalate per
      418/640 = 0,65, quindi i "15px" dichiarati arrivavano a schermo a 9,8px
      su desktop e a 6,9px a 901px di viewport. Cioe' PIU' PICCOLI degli 11px
      di partenza che erano stati segnalati come illeggibili. In HTML/CSS
      15px sono 15px a qualunque larghezza, il testo si seleziona, si ingrandisce
      con lo zoom del browser e i lettori di schermo lo leggono.

   2. NIENTE TAVOLOZZA PROPRIA. Questo foglio ridefiniva sei colori quasi
      identici a quelli di evo.css (#17072d contro #1A0E2E, #64129b contro
      #5B168C...): non leggeva ne' come coerenza ne' come scelta, e soprattutto
      non aveva il tema scuro, che su evo.css si accende da solo con
      prefers-color-scheme. Risultato: il 46% dell'altezza della pagina restava
      testo scuro su fondo scuro, con gli h2 a 1,04:1. Ora si usano i token.
   ========================================================================== */

.evo-terr,
.evo-terr * { box-sizing: border-box; }

.evo-terr {
  /* I --line di evo.css servono a separare blocchi, e per quello vanno bene.
     Sul perimetro di un campo o di un pulsante fanno 1,29-1,54:1, sotto il
     3:1 che le WCAG chiedono agli elementi con cui si interagisce. */
  --bordo-attivo: #8E79A8;
  color: var(--text);
  font-size: 17px;
  line-height: 1.62;
}

.evo-terr-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.evo-terr-sez  { padding: 72px 0; background: var(--page); }
.evo-terr-soft { background: var(--soft); }

.evo-terr h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 18px;
}
.evo-terr h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
}
.evo-terr h3 {
  font-size: 20px;
  line-height: 1.35;
  color: var(--ink);
  margin: 28px 0 8px;
}

/* 68ch in Switzer valeva 666px, cioe' 89 caratteri per riga: lo "0" di questo
   carattere e' largo 0,576em contro i 0,44em del carattere medio. */
.evo-terr p  { margin: 0 0 16px; max-width: 55ch; }
.evo-terr li { margin-bottom: 8px; }
.evo-terr strong { color: var(--ink); font-weight: 700; }
.evo-terr a { color: var(--violet); font-weight: 600; }

/* L'header e' sticky da 75px: senza questo le ancore atterrano sotto. */
.evo-terr h2, .evo-terr h3, .evo-terr [id] { scroll-margin-top: 96px; }

.evo-terr-kicker {
  display: inline-block;
  color: var(--magenta);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.evo-terr-lead { font-size: 20px; line-height: 1.55; color: var(--text); max-width: 46ch; }
.evo-fonte     { font-size: 14px; color: var(--muted); }
.evo-fonte a   { color: var(--muted); text-decoration: underline; }

/* --------------------------------------------------------------- briciole */
.evo-terr-briciole { font-size: 14.5px; color: var(--muted); margin-bottom: 4px; }
.evo-terr-briciole a { font-weight: 600; }

/* ------------------------------------------------------------------- hero */
.evo-terr-hero { padding: 60px 0 52px;
  background: linear-gradient(135deg, var(--page), var(--soft) 58%, var(--violet-soft)); }
.evo-terr-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.85fr);
                      gap: 42px; align-items: start; }
.evo-terr-foto { margin: 0; background: var(--card); border: 1px solid var(--line);
                 border-radius: var(--r); padding: 10px; box-shadow: var(--shadow-sm); }
.evo-terr-foto img { display: block; width: 100%; height: auto; border-radius: var(--r-sm);
                     background: var(--soft-2); }
.evo-terr-foto figcaption { font-size: 14px; color: var(--muted); margin-top: 9px; }

/* ---------------------------------------------------------------- numeri
   Le cifre sono il gancio della pagina: prima erano 27px contro una h2 da
   32px e una h1 da 46px, cioe' il terzo elemento per peso. */
.evo-numeri { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
              gap: 14px; margin: 28px 0 24px; }
.evo-numero { background: var(--card); border: 1px solid var(--line);
              border-radius: var(--r-sm); padding: 17px 19px; }
.evo-numero b    { display: block; font-family: var(--display); font-size: 36px; line-height: 1.05;
                   font-weight: 800; color: var(--violet); letter-spacing: -.02em; }
.evo-numero b.lungo { font-size: 24px; line-height: 1.2; }
.evo-numero span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--muted); }

/* --------------------------------------------------------------- pulsanti
   Stessa forma a pillola del resto del sito: prima erano rettangoli con
   border-radius 10px e chi arrivava da una pagina normale li vedeva cambiare. */
.evo-terr-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; max-width: none; }
.evo-terr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 24px;
  border: 1.5px solid var(--bordo-attivo); border-radius: var(--r-pill);
  background: var(--soft-2); color: var(--ink);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.evo-terr-btn:hover { border-color: var(--violet); color: var(--violet); }
.evo-terr-btn.forte { background: var(--violet); border-color: var(--violet); color: #fff; }
.evo-terr-btn.forte:hover { background: var(--violet-2); color: #fff; }

/* In tema scuro --violet diventa lavanda chiara: il testo sopra deve essere
   scuro, non bianco. Bianco su #C495EC fa 2,37:1; #12071F fa 8,23:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .evo-terr-btn.forte,
  :root:not([data-theme]) .evo-terr-btn.forte:hover,
  :root:not([data-theme]) .evo-terr .evo-form button,
  :root:not([data-theme]) .evo-terr .evo-form button:hover { color: #12071F; }
}
:root[data-theme="dark"] .evo-terr-btn.forte,
:root[data-theme="dark"] .evo-terr-btn.forte:hover,
:root[data-theme="dark"] .evo-terr .evo-form button,
:root[data-theme="dark"] .evo-terr .evo-form button:hover { color: #12071F; }

/* Gli otto servizi in fondo erano otto pulsanti identici ai due veri: adesso
   sono link, che e' quello che sono. */
.evo-terr-altri { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: none;
                  list-style: none; padding: 0; }
.evo-terr-altri a { font-size: 16.5px; }

/* --------------------------------------------------------------- griglie */
.evo-terr-due { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr);
                gap: 44px; align-items: start; }
.evo-terr-tre { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
                gap: 18px; margin-top: 24px; }
.evo-terr-card { background: var(--card); border: 1px solid var(--line);
                 border-radius: var(--r); padding: 24px 26px; }
.evo-terr-card h3:first-child { margin-top: 0; }
.evo-terr-card ul, .evo-terr-card ol { margin: 0 0 14px; padding-left: 20px; }
.evo-terr-card p { max-width: none; }

/* ---------------------------------------------------------------- grafico
   Barre in HTML. Niente viewBox, niente scala: i px sono px. */
.evo-graf { margin: 0 0 8px; background: var(--card); border: 1px solid var(--line);
            border-radius: var(--r); padding: 24px 26px; }
.evo-graf figcaption { font-size: 15px; line-height: 1.5; color: var(--muted); margin-bottom: 20px; }
.evo-graf figcaption a { color: var(--muted); }

.gf-riga  { margin-bottom: 18px; }
.gf-testa { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
            column-gap: 12px; }
.gf-nome  { font-size: 15.5px; line-height: 1.35; color: var(--text); }
.gf-val   { font-size: 16px; font-weight: 700; color: var(--ink);
            font-variant-numeric: tabular-nums; }
.gf-pista { position: relative; margin-top: 7px; height: 14px; border-radius: 7px;
            background: var(--soft-2); border: 1px solid var(--bordo-attivo); }
.gf-bar   { height: 12px; border-radius: 6px; background: var(--violet); }
/* Riferimento provinciale: era una barra chiara a 1,59:1 su bianco, sotto il
   3:1 che le WCAG chiedono agli elementi grafici. Ora e' un'asta a contrasto. */
.gf-att   { position: absolute; top: -4px; height: 20px; width: 3px;
            background: var(--magenta); border-radius: 2px; }
.gf-spec  { font-size: 15px; font-weight: 700; color: var(--magenta); }
.gf-legenda { font-size: 15px; color: var(--muted); margin: 18px 0 0; max-width: none; }

/* ------------------------------------------------------------------ chip */
.evo-terr-chip { display: flex; flex-wrap: wrap; gap: 8px; max-width: none;
                 list-style: none; padding: 0; }
.evo-terr-chip li { display: inline-block; padding: 7px 14px; border: 1px solid var(--line);
                    border-radius: var(--r-pill); background: var(--soft);
                    font-size: 14.5px; color: var(--text); margin: 0; }

/* ----------------------------------------------------------------- bandi */
.evo-terr-bandi { list-style: none; padding: 0; margin: 22px 0; }
.evo-terr-bandi li { background: var(--card); border: 1px solid var(--line);
                     border-radius: var(--r-sm); padding: 16px 20px; margin-bottom: 11px; }
.evo-terr-bandi strong { display: block; font-size: 17px; line-height: 1.4; margin-bottom: 5px; }
.evo-terr-bandi span   { display: inline-block; margin-right: 16px; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------------- FAQ */
.evo-terr details { border: 1px solid var(--line); border-radius: var(--r-sm);
                    padding: 17px 22px; margin: 11px 0; background: var(--card); max-width: 58ch; }
.evo-terr summary { cursor: pointer; font-weight: 700; font-size: 17.5px; color: var(--ink);
                    list-style: none; display: flex; justify-content: space-between;
                    gap: 16px; align-items: center; }
.evo-terr summary::-webkit-details-marker { display: none; }
.evo-terr summary:after { content: "+"; font-size: 24px; font-weight: 400; color: var(--muted); line-height: 1; }
.evo-terr details[open] summary:after { content: "\2013"; }
.evo-terr details p { margin: 12px 0 0; max-width: none; }

/* ------------------------------------------------------------------ form */
.evo-terr .evo-form p { max-width: none; }
.evo-terr .evo-form-riga { margin-bottom: 15px; }
.evo-terr .evo-form-riga label { display: block; font-size: 15px; font-weight: 600;
                                 color: var(--ink); margin-bottom: 6px; }
.evo-terr .evo-form input[type=text],
.evo-terr .evo-form input[type=email],
.evo-terr .evo-form input[type=tel],
.evo-terr .evo-form select,
.evo-terr .evo-form textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--soft-2);
  border: 1.5px solid var(--bordo-attivo); border-radius: var(--r-sm);
}
.evo-terr .evo-form textarea { resize: vertical; }
.evo-terr .evo-form-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.evo-terr .evo-form-consenso { display: flex; gap: 10px; align-items: flex-start;
                               font-size: 15px; color: var(--muted); }
.evo-terr .evo-form-consenso input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.evo-terr .evo-form-consenso label { margin: 0; font-weight: 400; font-size: 15px; }
.evo-terr .evo-esca { position: absolute; left: -9999px; }
.evo-terr .evo-form button { width: 100%; min-height: 52px; border: 0; border-radius: var(--r-pill);
                             background: var(--violet); color: #fff; font: inherit;
                             font-size: 17px; font-weight: 700; cursor: pointer; }
.evo-terr .evo-form button:hover { background: var(--violet-2); }

/* Solo per i lettori di schermo: la tabella dati del grafico. */
.evo-terr .solo-lettori {
  /* display:block e' obbligatorio: su un <table> il width:1px non basta,
     perche' il layout tabellare si allarga comunque sul contenuto. Cosi'
     la tabella nascosta sfondava la finestra di 136px e faceva comparire
     la barra di scorrimento orizzontale su tutte le pagine. */
  display: block;
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------------------------- telefono */
@media (max-width: 900px) {
  .evo-terr-hero-grid, .evo-terr-due { grid-template-columns: 1fr; gap: 30px; }
  .evo-terr .evo-form-due { grid-template-columns: 1fr; }
  .evo-terr-sez { padding: 52px 0; }
  .evo-terr-hero { padding: 36px 0 34px; }
  /* Quattro riquadri in colonna erano 344px di altezza e spingevano il
     pulsante sotto la piega. */
  .evo-numero b { font-size: 30px; }
  .evo-numero b.lungo { font-size: 21px; }
  /* Sul telefono il grafico si legge peggio, non meglio: le etichette salgono. */
  .gf-nome { font-size: 16px; }
  .gf-val  { font-size: 17px; }
}

/* --------------------------------------------------- certificazioni
   Erano diciotto righe di elenco puntato con titoli in inglese: un
   imprenditore non le legge, e una prova che non si legge non prova
   niente. Con la miniatura dell'attestato si vede in un colpo d'occhio
   che sono documenti veri, e il dettaglio resta nel link di verifica. */
.evo-cert-lista { list-style: none; padding: 0; margin: 16px 0 0; }
.evo-cert-lista li { display: flex; gap: 14px; align-items: flex-start;
                     padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
.evo-cert-lista li:first-child { border-top: 0; padding-top: 0; }

.evo-cert-mini { flex: 0 0 auto; width: 120px; height: auto; border-radius: 8px;
                 border: 1px solid var(--line); background: var(--soft-2); }

.evo-cert-testo { display: block; min-width: 0; }
.evo-cert-testo strong { display: block; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.evo-cert-testo em     { display: block; font-size: 14.5px; line-height: 1.4; color: var(--muted);
                         font-style: normal; margin-top: 3px; }
.evo-cert-testo a      { display: inline-block; font-size: 14.5px; margin-top: 6px; }

/* Le schede delle certificazioni sono piu' alte delle altre: la griglia a
   tre colonne le comprimerebbe. Qui bastano due. */
.evo-terr-prove { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
                  gap: 18px; margin-top: 24px; }

@media (max-width: 700px) {
  .evo-cert-mini { width: 88px; }
  .evo-terr-prove { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- foto dello studio
   Riempiono la colonna che restava bianca accanto ai blocchi di solo
   testo. Sono le fotografie vere dello studio di Corciano, non immagini
   generate: su una pagina che chiede fiducia una foto inventata sarebbe
   la cosa piu' controproducente. */
.evo-terr-scatto { margin: 0; }
.evo-terr-scatto img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--soft-2);
}
.evo-terr-scatto figcaption {
  font-size: 15px; line-height: 1.45; color: var(--muted);
  margin-top: 10px; max-width: 38ch;
}
.evo-terr-lato { min-width: 0; }

@media (max-width: 900px) {
  /* Sul telefono la foto va sopra il testo: sotto, nessuno la vede. */
  .evo-terr-due { display: flex; flex-direction: column; }
  .evo-terr-lato { order: -1; }
  .evo-terr-scatto figcaption { max-width: none; }
}

/* ==========================================================================
   TRE CORREZIONI DI IMPAGINATO

   1. LA FOTO DENTRO AL TESTO. Prima stava in una colonna a fianco: siccome il
      testo e' quasi sempre piu' lungo dell'immagine, sotto la foto restava
      mezza pagina bianca. In float il testo le gira intorno e prosegue sotto,
      e il buco sparisce. I paragrafi tengono comunque una misura leggibile,
      quindi sotto la foto non diventano righe da 130 caratteri.

   2. I PULSANTI IN RIGA. L'etichetta del principale era una frase intera
      ("Controllo gratis se il tuo sito e' esposto, e ti mando l'esito"):
      andava a capo, i due pulsanti si impilavano e a destra restava vuoto.
      Ora l'etichetta e' corta e la frase sta sotto, dove si legge meglio.

   3. LE CERTIFICAZIONI A GRIGLIA. Erano un elenco in colonna con meta'
      larghezza inutilizzata a destra. A schede stanno in due o tre colonne.
   ========================================================================== */

/* ------------------------------------------------- 1. foto dentro al testo */
/* .evo-terr-testo eredita il contenitore: non deve toccarne la larghezza,
   altrimenti la sezione sfonda i bordi dell'intestazione. */
.evo-terr-testo::after { content: ""; display: block; clear: both; }

.evo-terr-testo .evo-terr-scatto {
  float: right;
  width: 480px;
  max-width: 44%;
  margin: 6px 0 24px 40px;
}
.evo-terr-testo .evo-terr-scatto figcaption { max-width: none; }

/* I titoli non devono affiancarsi alla foto: solo il corpo del testo lo fa. */
.evo-terr-testo h2 { clear: none; max-width: 24ch; }
.evo-terr-testo p  { max-width: 66ch; }

@media (max-width: 900px) {
  .evo-terr-testo .evo-terr-scatto {
    float: none; width: 100%; max-width: none; margin: 0 0 22px;
  }
  .evo-terr-testo h2 { max-width: none; }
}

/* ------------------------------------------------------- 2. i pulsanti */
.evo-terr-azioni { align-items: stretch; }
.evo-terr-btn {
  font-size: 17px;
  padding: 14px 26px;
  min-height: 52px;
  white-space: nowrap;
}
.evo-terr-promessa {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}
@media (max-width: 520px) {
  /* Sul telefono stretto i pulsanti vanno a piena riga, non a meta'. */
  .evo-terr-azioni { display: grid; grid-template-columns: 1fr; }
  .evo-terr-btn { white-space: normal; }
}

/* --------------------------------------------- 3. certificazioni a schede */
.evo-cert-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.evo-cert-lista li {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  padding: 16px 18px;
}
.evo-cert-lista li:first-child { padding-top: 16px; }
.evo-cert-mini {
  width: 100%; height: auto; margin-bottom: 12px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--soft-2);
}
.evo-cert-testo strong { font-size: 16px; }

/* ------------------------------------------- 4. i numeri sotto, in riga
   Erano quattro riquadri impilati a due a due nella sola colonna di
   sinistra, e a destra sotto la foto restava un quadrato bianco grande
   quanto loro. Scavalcando il float e distribuendosi su tutta la
   larghezza occupano anche quello spazio, e si leggono pure meglio
   perche' stanno tutti sulla stessa riga. */
.evo-terr-testo .evo-numeri {
  clear: both;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 30px 0 22px;
}
@media (max-width: 700px) {
  .evo-terr-testo .evo-numeri { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------ 5. la scheda dei numeri
   Sta a destra del testo come la foto, in float, cosi' il testo le gira
   intorno e sotto non resta il vuoto. Contiene sei misure vere del
   comune, diverse a ogni blocco: e' insieme il riempimento di uno
   spazio e il motivo per cui la pagina di un comune non somiglia a
   quella di un altro. */
.evo-terr-scheda {
  float: right;
  /* Stessa larghezza della foto: cosi' la colonna di destra e' sempre la
     stessa, e soprattutto non resta un vuoto fra la fine della riga di testo
     (che si ferma a 66 caratteri per restare leggibile) e il bordo della
     scheda. Prima erano centoquattordici pixel di niente. */
  width: 480px;
  max-width: 44%;
  margin: 6px 0 24px 40px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.evo-terr-scheda h3 { margin: 0 0 14px; font-size: 17px; }
.evo-terr-scheda dl  { margin: 0; }
.evo-terr-scheda dl > div {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.evo-terr-scheda dl > div:first-child { border-top: 0; padding-top: 0; }
.evo-terr-scheda dt {
  font-size: 14.5px; line-height: 1.35; color: var(--muted);
}
.evo-terr-scheda dd {
  margin: 3px 0 0;
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.evo-terr-scheda dd span {
  display: block; margin-top: 2px;
  font-size: 13.5px; font-weight: 400; color: var(--muted);
}
@media (max-width: 900px) {
  .evo-terr-scheda { float: none; width: 100%; max-width: none; margin: 0 0 24px; }
}

/* --------------------------------------------- 6. le domande, su due colonne
   Erano una pila di riquadri larga meta' pagina, con l'altra meta' vuota.
   Su due colonne riempiono la riga e si scorrono in meno spazio. */
.evo-terr-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 12px 22px;
  align-items: start;
  margin-top: 22px;
}
.evo-terr-faq details { margin: 0; max-width: none; }
.evo-terr-faq-fine { align-self: stretch; }
.evo-terr-faq-fine h3 { margin-top: 0; }
.evo-terr-faq-fine p  { max-width: none; }
@media (max-width: 900px) {
  .evo-terr-faq { grid-template-columns: 1fr; }
}

/* ------------------------------------------- 7. i blocchi di testo corto
   Sotto una certa lunghezza qualunque cosa messa a fianco fa sembrare il
   testo sperduto in un angolo. Meglio a piena larghezza, con la misura
   di riga un po' piu' ampia e il titolo che non va a capo troppo presto. */
/* niente restringimenti: il contenitore resta quello dell'intestazione */
.evo-terr-corto h2 { max-width: 26ch; }
.evo-terr-corto p  { max-width: 66ch; font-size: 18px; }

/* ------------------------------------------------- 8. il ritratto in piedi
   E' verticale, quindi regge l'altezza dei blocchi con molto testo dove
   una fotografia 16:9 lascerebbe aria sotto. Sta su fondo bianco: senza
   un pannello sotto galleggerebbe nel nulla della pagina. */
/* Due classi, come .evo-terr-testo .evo-terr-scatto: senza questo la
   larghezza di quella regola vinceva e il ritratto usciva a 480 px, cioe'
   753 px di altezza. A 320 sta sui 510, in linea con la scheda dei numeri. */
.evo-terr-testo .evo-terr-ritratto {
  width: 320px;
  max-width: 34%;
}
.evo-terr-ritratto img {
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soft), var(--violet-soft));
  box-shadow: none;
  object-fit: cover;
}
@media (max-width: 900px) {
  .evo-terr-testo .evo-terr-ritratto { width: 260px; max-width: 70%; margin-inline: auto; }
}

/* --------------------------------------- 9. quattro schede vanno 2+2
   La griglia a riempimento automatico su 1180px fa tre colonne: con
   quattro schede la quarta resta sola su una riga sua, con due terzi di
   bianco accanto. Con :has() si contano gli elementi e si passa a due
   colonne, che e' l'unico modo in cui quattro riquadri stanno in pari. */
.evo-terr-tre:has(> :nth-child(4):last-child),
.evo-terr-tre:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Cinque schede: due righe da tre e da due sarebbe di nuovo sbilanciato,
   ma con auto-fit la quinta finisce comunque sola. Meglio tre colonne
   piene e la seconda riga con due schede piu' larghe. */
.evo-terr-tre:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 760px) {
  .evo-terr-tre:has(> :nth-child(4):last-child),
  .evo-terr-tre:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. ORDINE E EQUILIBRIO

   Il rimprovero era: tutto squilibrato, poco ordine. Le cause erano tre e
   sono tutte di ritmo, non di colore.

   a) Le schede avevano altezze diverse dentro la stessa riga, quindi i
      bordi non si allineavano mai e l'occhio non trovava una griglia.
   b) I marchi delle piattaforme non c'erano: ogni scheda cominciava con
      del testo, e quattro blocchi di testo affiancati si leggono come un
      muro.
   c) La spaziatura fra le sezioni era sempre la stessa, quindi non si
      capiva dove finiva un discorso e cominciava il successivo.
   ========================================================================== */

/* a) le schede si allineano in altezza e il piede resta in basso */
.evo-terr-tre { align-items: stretch; }
.evo-terr-tre > .evo-terr-card {
  display: flex;
  flex-direction: column;
}
.evo-terr-tre > .evo-terr-card > p:last-child { margin-bottom: 0; }
.evo-terr-tre > .evo-terr-card > p:nth-last-child(2):has(+ p > a) { margin-bottom: 14px; }

/* b) il marchio ufficiale accanto al nome della piattaforma */
.evo-terr-piatt h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 21px;
}
.evo-terr-marchio {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  /* I marchi di Simple Icons sono monocromatici e prendono il colore
     dal riempimento: qui vanno nel viola del sito, non in nero. */
  filter: invert(12%) sepia(69%) saturate(4230%) hue-rotate(280deg) brightness(72%) contrast(101%);
}
.evo-terr-piatt p strong { display: block; margin-bottom: 2px; font-size: 14px;
                           letter-spacing: .02em; text-transform: uppercase;
                           color: var(--magenta); font-weight: 800; }
.evo-terr-piatt p { font-size: 16px; line-height: 1.55; }

/* c) il ritmo verticale: le sezioni con lo sfondo tenue respirano di piu',
      cosi' si capisce a colpo d'occhio dove finisce un discorso */
.evo-terr-sez { padding: 76px 0; }
.evo-terr-soft { padding: 88px 0; }
.evo-terr-sez + .evo-terr-sez:not(.evo-terr-soft) { padding-top: 20px; }

/* i link dentro il testo: si devono vedere, senza urlare */
.evo-terr p a:not(.evo-terr-btn) {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--violet) 35%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.evo-terr p a:not(.evo-terr-btn):hover {
  text-decoration-color: var(--violet);
}

/* Il cartellino della scheda dati: ha il rilievo di un titoletto ma non e'
   un'intestazione, perche' nel codice precede il primo h2 e creerebbe un
   salto di livello nella struttura del documento. */
.evo-terr-scheda-tit {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  max-width: none;
}
/* La casella di consenso a 18px e' un bersaglio piccolo sul telefono: il
   testo accanto e' cliccabile grazie al "for", ma la casella stessa va
   ingrandita per chi la cerca con il dito. */
.evo-terr .evo-form-consenso input { width: 24px; height: 24px; margin-top: 1px; }

/* ---------------------------------------- 12. il blocco a due colonne
   Serve dove a destra non c'e' un elemento in float: prima titolo e testo
   stavano in una colonna da 646 px dentro un contenitore da 1180, e la
   meta' destra della pagina restava bianca.

   Allargare il testo fino al bordo non era la risposta: novanta caratteri
   per riga non si leggono. Si fa come sui giornali — occhiello e titolo a
   sinistra, testo a destra — che riempie la larghezza tenendo la riga a
   settanta caratteri. Quello che sta sotto (schede, elenchi, numeri) torna
   a tutta larghezza, perche' li' la riga corta non serve. */
.evo-terr-duecol {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.evo-terr-duecol-tit   { grid-column: 1; }
.evo-terr-duecol-testo { grid-column: 2; }
.evo-terr-duecol-sotto { grid-column: 1 / -1; margin-top: 36px; }

/* Nella colonna stretta il titolo usa tutta la colonna: il tetto di 24
   caratteri serviva solo a impedirgli di stendersi su tutta la pagina. */
.evo-terr-duecol-tit h2 { max-width: none; margin-top: 0; }
.evo-terr-duecol-tit .evo-terr-kicker { margin-top: 0; }
.evo-terr-duecol-testo > *:first-child { margin-top: 0; }
.evo-terr-duecol-testo p { max-width: none; }

@media (max-width: 1000px) {
  /* Sotto i mille pixel la colonna del titolo diventa troppo stretta e le
     parole lunghe si spezzano: si torna a una colonna sola. */
  .evo-terr-duecol { display: block; }
  .evo-terr-duecol-testo p { max-width: 66ch; }
  .evo-terr-duecol-sotto { margin-top: 26px; }
}