/* ==================================================================
   Wed&Com — stili propri. Caricati DOPO il tema, che resta intatto.

   Sistema, non valori a caso:
   · scala tipografica  ratio 1.25 (terza maggiore) da 16px
   · spaziature         base 8px — 8 16 24 32 48 64 96 128
   · interlinea         1.2 titoli · 1.6 corpo · 1.75 lettura lunga
   · spaziatura lettere -0.02em titoli grandi · 0.16em maiuscoletti
   · lunghezza riga     45-75 caratteri
   ================================================================== */

:root{
  /* colori */
  --wc-skin:#c78665;
  --wc-skin-dark:#b06f4e;
  --wc-ink:#121f38;
  --wc-body:#5d6270;
  --wc-muted:#8a8f9c;   /* solo decorativo: come testo non arriva a 4.5,
                          vedi le correzioni di contrasto in fondo */
  --wc-grey:#f4f1ee;
  --wc-line:#e6e1dc;

  /* spaziature */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  /* tipografia */
  --t-cap:12.8px;   /* maiuscoletti  */
  --t-sm:14px;
  --t-body:16px;
  --t-lead:20px;
  --t-h4:25px;
  --t-h3:31px;
  --t-h2:39px;
  --t-h1:49px;
  --t-display:61px;
}

/* ---------- elementi ricorrenti ---------- */
.wc-eyebrow{
  display:block; margin:0 0 var(--s2);
  font-family:'Hind',sans-serif; font-size:var(--t-cap); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--wc-skin);
}
.wc-sep{ width:56px; height:1px; background:var(--wc-skin); margin:0 0 var(--s3); }
.text-center .wc-sep{ margin-left:auto; margin-right:auto; }

.wc-lead{ font-size:var(--t-lead); line-height:1.6; color:var(--wc-body); }
.wc-note{ font-size:var(--t-sm); color:var(--wc-muted); font-style:italic; }

/* ---------- fasce alternate: foto grande + testo ---------- */
.wc-split{ padding:var(--s7) 0; }
.wc-split + .wc-split{ padding-top:0; }

.wc-split .wc-media{ position:relative; overflow:hidden; }
.wc-split .wc-media img{ width:100%; display:block; }
.wc-split .wc-media::after{
  content:''; position:absolute; inset:var(--s2);
  border:1px solid rgba(255,255,255,.5); pointer-events:none;
}

/* il testo: colonna stretta, 45-75 caratteri per riga */
.wc-split .wc-body{
  position:relative; padding:0 0 0 var(--s5); max-width:34em;
}
.wc-split h2{
  font-size:var(--t-h2); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 var(--s2); color:var(--wc-ink);
}
.wc-split p{
  font-size:var(--t-body); line-height:1.75; color:var(--wc-body);
  margin:0 0 var(--s2);
}
.wc-split .ttm-btn{ margin-top:var(--s2); }

/* il numero sta DIETRO, non sopra: niente margini negativi */
.wc-split .wc-body[data-num]::before{
  content:attr(data-num);
  position:absolute; top:-.34em; left:0;
  font-family:'Cormorant',serif; font-size:var(--t-display); line-height:1;
  color:var(--wc-grey); z-index:0; pointer-events:none; user-select:none;
}
.wc-split .wc-body > *{ position:relative; z-index:1; }

/* ---------- percorso in quattro tappe ---------- */
.wc-steps{ position:relative; margin-top:var(--s5); }
.wc-steps::before{
  content:''; position:absolute; top:34px; left:12.5%; right:12.5%;
  height:1px; background:var(--wc-line);
}
.wc-step{ position:relative; text-align:center; padding:0 var(--s2); }
.wc-step .wc-badge{
  width:68px; height:68px; line-height:66px; border-radius:50%;
  margin:0 auto var(--s3); position:relative; z-index:1;
  background:#fff; border:1px solid var(--wc-line); color:var(--wc-skin);
  font-family:'Cormorant',serif; font-size:var(--t-h4); font-weight:600;
  transition:background .25s, color .25s, border-color .25s;
}
.wc-step:hover .wc-badge{
  background:var(--wc-skin); color:#fff; border-color:var(--wc-skin);
}
.wc-step h3,
.wc-step h5{
  font-size:var(--t-lead); line-height:1.3; margin:0 0 var(--s1); color:var(--wc-ink);
}
.wc-step p{
  font-size:var(--t-sm); line-height:1.6; color:var(--wc-muted); margin:0;
}

/* ---------- vetrina dei modelli ---------- */
.wc-model{ position:relative; overflow:hidden; display:block; }
.wc-model img{ width:100%; display:block; transition:transform .7s ease; }
.wc-model:hover img{ transform:scale(1.04); }
.wc-model .wc-cap{
  position:absolute; inset:auto 0 0 0; padding:var(--s5) var(--s4) var(--s4);
  color:#fff;
  background:linear-gradient(to top,
             rgba(18,31,56,.9) 0%, rgba(18,31,56,.78) 55%, rgba(18,31,56,.78) 100%);
}
.wc-model .wc-cap span{
  display:block; margin:0 0 var(--s1);
  font-size:var(--t-cap); letter-spacing:.16em; text-transform:uppercase; color:#e6c3ae;
}
.wc-model .wc-cap h3,
.wc-model .wc-cap h4{
  font-family:'Cormorant',serif; font-size:var(--t-h3); line-height:1.2;
  letter-spacing:-.01em; color:#fff; margin:0; font-weight:500;
}

/* ---------- striscia di foto a tutta larghezza ---------- */
.wc-strip{ display:grid; grid-template-columns:repeat(4,1fr); }
.wc-strip > *{ overflow:hidden; display:block; }
.wc-strip img{
  width:100%; height:300px; object-fit:cover; display:block;
  transition:transform .7s ease;
}
.wc-strip > *:hover img{ transform:scale(1.05); }

/* ---------- chiusura su fotografia ---------- */
.wc-cta{
  position:relative; padding:var(--s8) 0; text-align:center; color:#fff;
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.wc-cta::before{ content:''; position:absolute; inset:0; background:rgba(18,31,56,.74); }
.wc-cta > .container{ position:relative; }
.wc-cta .wc-eyebrow{ color:#e6c3ae; }
.wc-cta .wc-sep{ background:#e6c3ae; }
.wc-cta h2{
  font-size:var(--t-h1); line-height:1.15; letter-spacing:-.02em;
  color:#fff; margin:0 0 var(--s2);
}
.wc-cta p{
  font-size:var(--t-lead); line-height:1.6; color:#cfd4de;
  max-width:34em; margin:0 auto var(--s3);
}

/* ---------- titoli di sezione centrati ---------- */
.wc-head{ max-width:38em; margin:0 auto var(--s5); text-align:center; }
.wc-head h2{
  font-size:var(--t-h2); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 var(--s3); color:var(--wc-ink);
}

/* ==================================================================
   Adattamento: i titoli scendono, il corpo resta 16px
   ================================================================== */
@media (max-width:1199px){
  :root{ --t-display:49px; --t-h1:39px; --t-h2:31px; --t-h3:25px; }
  .wc-split .wc-body{ padding-left:var(--s4); }
}

@media (max-width:991px){
  :root{ --t-display:39px; --t-h1:31px; --t-h2:27px; --t-h3:23px; --t-h4:21px; }
  .wc-split{ padding:var(--s6) 0; }
  .wc-split .wc-body{ padding:var(--s4) 0 0; max-width:none; }
  /* niente bottom:100%: lasciava top e bottom valorizzati insieme e
     schiacciava il numero a 27px. Comanda il blocco piu' sotto. */
  .wc-steps::before{ display:none; }
  .wc-step{ margin-bottom:var(--s5); }
  .wc-strip{ grid-template-columns:repeat(2,1fr); }
  .wc-strip img{ height:210px; }
  .wc-cta{ padding:var(--s6) 0; }
  .wc-model .wc-cap{ padding:var(--s4) var(--s3) var(--s3); }
}

@media (max-width:575px){
  :root{ --t-h1:27px; --t-h2:24px; }
  .wc-strip img{ height:170px; }
}

/* ---------- vetrina: etichetta d'angolo sui demo non pubblicabili ---------- */
.wc-model{ position:relative; }
.wc-flag{
  position:absolute; top:var(--s2); left:var(--s2); z-index:2;
  background:rgba(18,31,56,.92); color:#fff;
  font-family:'Hind',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px;
}
.wc-model .wc-cap p{
  font-size:var(--t-sm); line-height:1.5; color:#c9cfda; margin:var(--s1) 0 0;
}

/* Le due schermate vere delle demo (materiale proprio, non fotografie: molto
   piu' alte che larghe, 780x2081 e 780x3106) rompevano il contenitore: senza
   un limite di altezza il riquadro cresceva fino a 900px e la didascalia,
   ancorata in basso, finiva sovrapposta al pulsante del modulo dentro la
   schermata stessa. Le inquadriamo mostrando l'apertura della sezione
   (titolo, e dove arriva, il paragrafo per intero) e ci fermiamo alla fine
   di una frase vera, non a un fotogramma scelto a caso.

   ATTENZIONE PRIMA DI CAMBIARE QUESTI NUMERI: con object-fit:cover e
   object-position:top, la finestra di ritaglio (in pixel nativi
   dell'immagine) e' SEMPRE native-larghezza / aspect-ratio, qualunque sia
   la larghezza resa della scheda — verificato misurando boxWidth,
   naturalWidth e object-position davvero nel browser su index.html
   (scheda larga 555px) e su portfolio-style-01.html (scheda larga 360px):
   stesso aspect-ratio, stessa finestra nativa su entrambe. Il ritaglio
   speciale con object-position in percentuale, usato in una versione
   precedente di queste regole, NON ha questa proprieta': la percentuale
   sposta un punto che dipende dalla larghezza della scheda, quindi la
   stessa percentuale cade in un posto diverso su ogni pagina — e' cosi'
   che il ritaglio si e' rotto la prima volta. Non riportarlo.

   Il valore sotto e' stato trovato aprendo il file immagine e guardando
   dove il paragrafo finisce per davvero: 780/780 (=1/1) mostra i pixel
   nativi 0-780, che finiscono esattamente su "...note e li contiamo
   noi." per Giulia&Matteo. Su Beatrice&Edoardo lo stesso taglio cade a
   meta' della prima voce della timeline ("...il cancello"): non e' un
   problema, perche' quella riga finisce comunque sotto la didascalia
   (vedi il punto successivo). */
.wc-model img[src*="schermata-"]{
  aspect-ratio:1/1; object-fit:cover; object-position:top; height:auto;
}

/* Il ritaglio sopra e' identico in pixel nativi su ogni pagina (verificato
   nel browser: stessa finestra 0-780 sia sulla scheda larga 555px di
   index.html sia su quella larga 360px di portfolio-style-01.html), ma
   la didascalia sotto copre porzioni diverse di quella finestra a seconda
   di quante righe di testo ha (due su index.html, tre su
   portfolio-style-01.html) e di quanto la scheda e' zoomata: risultato,
   su index.html restava scoperta una fascia di testo del modulo che sulla
   didascalia si leggeva "a fantasma", sovrapposta al nome della coppia.
   Fissiamo la copertura a una percentuale dell'altezza della scheda,
   sempre la stessa: cosi' la porzione scoperta e' sempre la stessa
   (l'apertura della schermata, occhiello e titolo), su qualunque pagina
   la scheda compaia e qualunque sia la sua larghezza. */
.wc-model:has(img[src*="schermata-"]){
  /* Stessa proporzione dell'immagine dentro: senza questa riga
     .wc-model non ha un'altezza esplicita (la prende dal contenuto), e
     un'altezza in percentuale su un figlio assoluto (il min-height del
     .wc-cap qui sotto) non si risolverebbe affatto — resterebbe "auto",
     cioe' verrebbe ignorata, ed e' esattamente quello che e' successo
     al primo tentativo. */
  aspect-ratio:1/1;
}
.wc-model:has(img[src*="schermata-"]) .wc-cap{
  min-height:56%;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* PIENO, non .97: verificato con un test a sfondo rosso che la
     posizione del riquadro era gia' giusta, il problema era solo
     l'opacita'. Il 3% che restava trasparente con .97 sembra poco su
     carta ma sopra un testo BIANCO, a schermo, resta perfettamente
     leggibile: si vedeva ancora tutto il paragrafo "a fantasma". */
  background:#121f38;
}
.wc-card-meta{ margin-top:var(--s2); }
.wc-card-meta dt{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wc-muted); font-weight:600; margin-top:var(--s1);
}
.wc-card-meta dd{ margin:0 0 var(--s1); font-size:var(--t-sm); color:var(--wc-body); }
.wc-badge-ok{
  display:inline-block; margin-top:var(--s2); padding:5px 12px;
  border:1px solid var(--wc-skin); color:var(--wc-skin);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}

/* ---------- scheda modello non apribile online ---------- */
.wc-model.wc-off{ cursor:default; }
.wc-model.wc-off:hover img{ transform:none; }
.wc-model.wc-off img{ filter:grayscale(.25); }

/* ==================================================================
   Correzioni al tema
   ================================================================== */

/* Il tema dà lo sfondo bianco all'header fisso solo sopra i 1200px:
   sotto quella soglia resta trasparente e il testo della pagina si vede
   passare attraverso la barra. Lo applichiamo a tutte le larghezze. */
.ttm-stickable-header.fixed-header{
  z-index:111;
  background-color:#fff;
  box-shadow:0 2px 14px rgba(18,31,56,.08);
}
.ttm-stickable-header.fixed-header .site-branding img.stickylogo{ opacity:1; }
.ttm-stickable-header.fixed-header .header_extra:before{
  background-color:rgba(18,31,56,.14);
}

/* Il tema (responsive.css, riga ~401, dentro @media max-width:1199px) azzera
   il padding di TUTTI i .ttm-row .container sotto i 1199px. Sistemico: ogni
   sezione del sito ne è colpita, e a 390px i badge delle card arrivano fino
   al bordo dello schermo, tagliati a metà. Lo ripristiniamo qui una volta
   sola invece che sezione per sezione. */
@media (max-width:1199px){
  .ttm-row .container{ padding-left:var(--s2); padding-right:var(--s2); }
}

/* ---------- il numero come filigrana, dietro al titolo ---------- */
.wc-split .wc-body{ padding-left:0; }
.wc-split .wc-body[data-num]::before{
  top:-.42em; left:-.05em;
  font-size:calc(var(--t-display) * 1.7);
  color:var(--wc-grey);
  font-weight:600;
}
@media (max-width:1199px){
  .wc-split .wc-body{ padding-left:0; }
}

/* ==================================================================
   Hero
   ================================================================== */
.wc-hero{
  position:relative; display:flex; align-items:center;
  min-height:88vh; padding:var(--s8) 0 var(--s7);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  color:#fff; text-align:center;
}
/* La fotografia di apertura sta qui e non nell'attributo style della
   pagina: cosi' il percorso e' uno solo e la si cambia in un punto.
   L'indirizzo e' relativo a questo foglio, che sta in css/. */
.wc-hero--slide02{ background-image:url('../images/slides/slider-mainbg-02.jpg'); }

.wc-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,31,56,.62) 0%, rgba(18,31,56,.52) 45%, rgba(18,31,56,.72) 100%);
}
.wc-hero > .container{ position:relative; z-index:1; }
.wc-hero .wc-eyebrow{ color:#e6c3ae; margin-bottom:var(--s3); }
.wc-hero h1{
  font-family:'Cormorant',Georgia,serif; font-weight:500;
  font-size:var(--t-display); line-height:1.1; letter-spacing:-.02em;
  color:#fff; margin:0 auto var(--s3); max-width:17em;
}
.wc-hero .wc-sep{ background:#e6c3ae; margin-left:auto; margin-right:auto; }
.wc-hero p{
  font-size:var(--t-lead); line-height:1.65; color:#dfe3ea;
  max-width:40em; margin:0 auto var(--s5);
}
.wc-hero .wc-azioni{ display:flex; gap:var(--s2); justify-content:center; flex-wrap:wrap; }

@media (max-width:991px){
  .wc-hero{ min-height:auto; padding:var(--s7) 0 var(--s6); }
  .wc-hero h1{ max-width:none; }
}
@media (max-width:575px){
  .wc-hero .wc-azioni .ttm-btn{ width:100%; }
}

/* ==================================================================
   Correzioni al tema — parte 2
   ================================================================== */

/* Il tema applica text-transform:capitalize a .ttm-btn: in inglese e una
   convenzione, in italiano no. "Vedi i modelli" diventava "Vedi I Modelli". */
.ttm-btn,
.featured-imagebox-portfolio.style4 .btn-link a{ text-transform:none; }

/* ---------- hero sul telefono ---------- */
@media (max-width:767px){
  .wc-hero{ padding:var(--s6) 0 var(--s5); min-height:auto; text-align:center; }
  .wc-hero h1{
    font-size:30px; line-height:1.18; letter-spacing:-.01em;
    max-width:none; margin-bottom:var(--s2);
    /* niente parole spezzate a meta su schermi stretti */
    hyphens:none; overflow-wrap:break-word;
  }
  .wc-hero .wc-eyebrow{ font-size:11px; letter-spacing:.12em; margin-bottom:var(--s2); }
  .wc-hero .wc-sep{ margin-bottom:var(--s3); }
  .wc-hero p{ font-size:16.5px; line-height:1.6; margin-bottom:var(--s4); }
  .wc-hero .wc-azioni{ flex-direction:column; align-items:stretch; gap:var(--s2); }
  .wc-hero .wc-azioni .ttm-btn{ width:100%; text-align:center; }
}
/* ==================================================================
   Accessibilita — verifiche misurate contro le linee guida WCAG
   ================================================================== */

/* Il terracotta del tema (#c78665) ha contrasto 2.99 sul bianco: sotto il
   minimo di 4.5 per il testo. Non lo cambio come colore decorativo, ma dove
   fa da TESTO uso una variante piu scura dello stesso colore: 4.73. */
:root{ --wc-skin-testo:#a8613d; }

.wc-eyebrow,
a.di_link,
.ttm-textcolor-skincolor{ color:var(--wc-skin-testo); }

/* pulsante pieno: il bianco su terracotta chiaro era 2.99. Stesso rimedio. */
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor{
  background-color:var(--wc-skin-testo);
  border-color:var(--wc-skin-testo);
}
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover{
  background-color:#8f5233; border-color:#8f5233;
}

/* Aree cliccabili: il tema dava 31px ai pulsanti piccoli, sotto i 44px
   necessari per un dito. */
.ttm-btn.ttm-btn-size-sm{ padding-top:12px; padding-bottom:12px; }
.wc-model + .wc-note + .ttm-btn{ margin-top:var(--s1); }

/* Tastiera: il tema azzera l'outline in nove punti senza sostituirlo, quindi
   chi naviga da tastiera non vede dove si trova. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.ttm-btn:focus-visible{
  outline:2px solid var(--wc-skin-testo);
  outline-offset:3px;
  border-radius:2px;
}
/* sul velo scuro dell'hero serve un contorno chiaro */
.wc-hero a:focus-visible,
.wc-cta a:focus-visible{ outline-color:#f0d9cb; }

/* ==================================================================
   Logo
   ==================================================================
   Il file e' 310x100 e veniva mostrato a grandezza naturale. Uno schermo
   retina, o Windows al 125 per cento, chiede piu' pixel di quanti ce ne
   siano e il browser lo ingrandisce: da qui la sfocatura. Mostrandolo a
   210 la densita' sale a 1,5 e i pixel disponibili bastano. Accanto al
   menu sta anche meglio in proporzione.
   Sopra la fascia scura serve la versione chiara: la scritta originale e'
   marrone e sul blu notte spariva. La barra bianca che compare scorrendo
   continua a usare quella scura. */
/* Il tema mette max-height:50px sul logo dell'intestazione. Con la larghezza
   fissata da noi, un tetto sull'altezza non ricalcola la base: schiaccia. Va
   tolto, e l'altezza la deduce il browser dalla proporzione del file. */
#logo-img,#logo-dark,#footer-logo-img{ height:auto; max-height:none; }
#logo-img,#logo-dark{ width:185px; }
#footer-logo-img{ width:210px; }
@media (max-width:575px){
  #logo-img,#logo-dark{ width:152px; }
  #footer-logo-img{ width:185px; }
}
/* Il logo sta al bordo del contenitore centrato, quindi su schermi larghi
   resta lontano dal margine e si porta dietro un vuoto. Lo si tira fuori,
   di quanto basta e senza mai arrivare a toccare il bordo dello schermo. */
@media (min-width:1200px){ .site-branding{ margin-left:-24px; } }
@media (min-width:1400px){ .site-branding{ margin-left:-56px; } }

/* ==================================================================
   Proporzioni delle immagini
   ==================================================================
   Le immagini hanno width e height nell'HTML: servono a riservare lo
   spazio, cosi' il testo non salta mentre la pagina carica. Ma quando il
   CSS impone width:100% senza dire niente sull'altezza, il browser usa
   l'altezza dell'attributo e stira: un quadrato 770x770 su uno schermo da
   375px diventa 375 di base e 770 di altezza.
   Questa riga vale per tutte le immagini del sito. Dove il ritaglio e'
   voluto, come nella striscia, la regola con la classe ha la precedenza e
   l'altezza fissa resta. */
img{ height:auto; }


/* ==================================================================
   I due loghi non devono accendersi insieme
   ==================================================================
   Il tema tiene i due loghi sovrapposti: lo scuro e' in position:absolute
   sopra il chiaro, con opacity 0. Quando serve lo scuro lo porta a 1, ma
   non spegne mai il chiaro. Finche' i due file erano identici la cosa non
   si vedeva; da quando sono diversi si vedono due monogrammi sfalsati.
   Qui il chiaro si spegne ovunque lo scuro si accende. */
.ttm-stickable-header.fixed-header .site-branding img.standardlogo{ opacity:0; }
/* sotto i 1200 il tema tiene acceso lo scuro sempre, non solo scorrendo */
@media (max-width:1199px){
  .site-branding img.standardlogo{ opacity:0; }
}

/* ==================================================================
   Modulo dei contatti
   ==================================================================
   Le etichette c'erano ma erano vuote: il testo stava solo nel
   placeholder, che sparisce appena si scrive e non viene letto dai lettori
   di schermo. Ora ogni campo ha la sua etichetta visibile, e quelli non
   obbligatori lo dichiarano invece di lasciarlo indovinare. */
.wc-label{
  display:block; margin:0 0 6px; font-family:'Hind',sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--wc-ink);
}
.wc-facolt{ font-weight:400; color:var(--wc-muted); letter-spacing:0; }
.wrap-form .col-md-6,.wrap-form .col-md-12{ margin-bottom:var(--s2); }

/* Campo esca per i compilatori automatici: spostato fuori dallo schermo e
   non nascosto con display:none, perche' cosi' i robot lo trovano e lo
   riempiono, mentre le persone non lo vedono nemmeno. */
.wc-esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.wc-esito{ margin-top:var(--s2); font-size:15px; min-height:1.2em; }
.wc-esito.ok{ color:#2f6b46; }
.wc-esito.ko{ color:#a12e2e; }

/* ==================================================================
   Correzioni di contrasto
   ==================================================================
   Rapporti misurati sul colore reale, non stimati a occhio. La soglia
   e' 4.5 per il testo normale. Dove il fondo e' una fotografia, il
   rapporto e' calcolato sul suo colore medio e ricontrollato sul pixel
   piu' scuro.

   a) Le tre barrette del menu. Il comando compare solo sotto i 1200px
      (megamenu.css lo dichiara dentro @media (max-width:1199px)) e li'
      l'intestazione e' bianca: le barrette devono essere scure, #121f38
      su #fff, rapporto 16.42. Il ripiego chiaro serve solo da 1200px in
      su, dove l'intestazione e' blu notte; e li' la barra bianca che
      compare scorrendo (.fixed-header, aggiunta da js/main.js:37 solo
      dentro min-width:1200px) le riporta scure. La distinzione va fatta
      sulla larghezza, non sulla classe: sotto i 1200 .fixed-header non
      viene mai aggiunta. */
.menubar-inner,
.menubar-inner:before,
.menubar-inner:after{ background-color:#121f38; }
@media (min-width:1200px){
  .menubar-inner,
  .menubar-inner:before,
  .menubar-inner:after{ background-color:#fff; }
  .fixed-header .menubar-inner,
  .fixed-header .menubar-inner:before,
  .fixed-header .menubar-inner:after{ background-color:#121f38; }
}

/* b) Il piede stava a #818491 sopra footer-bg.jpg, che di media e'
      #ecf4f6: rapporto 3.34. Con #4a4f5c diventa 7.35 sul colore medio
      e 8.19 sul bianco pieno. */
.footer,
.footer p,
.footer .featured-desc p,   /* peso maggiore del generico .featured-desc p qui sotto */
.footer .textwidget,
.copyright,
.copyright span{ color:#4a4f5c; }

/* c) Sette blocchi di testo erano rimasti al grigio del tema, fra 3.37 e
      3.72. Il colore di corpo gia' definito qui, --wc-body (#5d6270), da'
      6.09 sul bianco e 5.42 sul grigio chiaro delle fasce.
      Peso volutamente basso: dove il fondo e' scuro (apertura, fascia di
      chiusura, didascalie sulle foto) le regole a classe restano davanti. */
body,
p,
.title-desc p,
.wc-head p,
.featured-desc p{ color:var(--wc-body); }

/* d) Le quattro tappe della home erano il punto peggiore del sito: 2.93.
      Il #6b7080 che verrebbe naturale si ferma a 4.47 e non basta ancora.
      #676c7c misura 4.74 sul grigio dei campi (#edf5f7) e 5.23 sul bianco. */
.wc-step p,
.wc-note,
.wc-card-meta dt,
.wc-facolt{ color:#676c7c; }

/* I numeri dentro il cerchio erano il terracotta decorativo: 2.99 sul
   bianco. Passano alla variante da testo dello stesso colore: 4.73.
   Stessa cosa al passaggio del dito o del mouse, dove il cerchio si
   riempie e la cifra diventa bianca: sul terracotta chiaro era 2.99,
   su quello da testo e' 4.73. */
.wc-step .wc-badge{ color:var(--wc-skin-testo); }
.wc-step:hover .wc-badge{
  background:var(--wc-skin-testo); border-color:var(--wc-skin-testo);
}


/* ==================================================================
   Classi nuove chieste dalle pagine
   ================================================================== */

/* Salto al contenuto: sta fuori dallo schermo e compare in alto a
   sinistra solo quando riceve il fuoco da tastiera. Non display:none,
   perche' cosi' non riceverebbe il fuoco affatto.
   Bianco su blu notte: 16.42. */
.wc-skip{
  position:absolute; left:-9999px; top:0;
  width:1px; height:1px; overflow:hidden;
  /* il tema mette transition:all .3s su ogni <a> (main.css:232): senza
     questa riga il link scivolerebbe dentro da -9999px in tre decimi di
     secondo, invece di comparire e basta */
  transition:none;
}
.wc-skip:focus{
  position:fixed; left:var(--s2); top:var(--s2);
  width:auto; height:auto; overflow:visible;
  z-index:1000;                       /* l'intestazione fissa sta a 111 */
  padding:12px 20px;
  background:var(--wc-ink); color:#fff;
  font-family:'Hind',sans-serif; font-size:15px; line-height:1.4;
  text-decoration:none; border-radius:2px;
}

/* Le tre etichette di contatto nel piede non sono titoli: erano <h5> solo
   per come rendevano. Ora sono un elemento neutro con questa classe, e
   qui si rimette in piedi, dichiarazione per dichiarazione, quello che il
   tema dava all'<h5> proprio in quel punto:
   . shortcodes.css:967    misura, interlinea, margine, maiuscola iniziale
   . main.css:203          famiglia, peso, colore
   . main.css:1600-1604    misura e margine dentro il piede
   Il colore #121f38 sul fondo del piede misura 14.73. */
.featured-title .featured-label{
  display:block;
  margin:0 0 10px;
  font-family:'Cormorant',Georgia,serif; font-weight:600; color:#121f38;
  font-size:19px; line-height:28px;
}
.first-footer .featured-title .featured-label{
  font-size:23px; line-height:28px; margin-bottom:4px;
}

/* Il comando del menu mobile era un <div>: non si raggiungeva da tastiera
   e non aveva ruolo. Diventato <button>, il browser gli mette bordo,
   sfondo, riempimento e carattere propri. Qui si azzerano tutti, cosi'
   rende esattamente come il vecchio <div> e le regole di megamenu.css
   (.menubar in posizione assoluta, .menubar-box 30x24) continuano a valere. */
button.btn-show-menu-mobile{
  border:0; margin:0; padding:0;
  background:none;
  -webkit-appearance:none; appearance:none;
  color:inherit; font:inherit;
  cursor:pointer;
}

/* La freccia "torna su". Due cose:
   . main.css:1831 le mette "jump 4s infinite": un movimento che parte da
     solo, non si ferma e nessuno ha chiesto. Va spento sul selettore
     #totop.top-visible, perche' e' li' che il tema lo dichiara: con la
     sola #totop la specificita' non basterebbe a superarlo.
   . il tema le da' 40x40 ma anche display:inline, e su un elemento in
     linea larghezza e altezza non si applicano affatto. Con flex si
     applicano, e 44x44 e' la misura minima per un dito.
   Il riempimento del tema va azzerato e l'interlinea portata a 44px:
   il JS del tema (js/main.js:84) fa comparire la freccia con fadeIn, che
   le scrive display:inline nell'attributo style. Essendo in posizione
   fissa il browser lo trasforma comunque in blocco, quindi le misure si
   applicano, ma il centraggio con flex no: con interlinea 44px la
   freccia sta in mezzo in tutti e due i casi. */
#totop,
#totop.top-visible{ animation:none; }
#totop.top-visible{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  padding-top:0; line-height:44px;
}


/* ==================================================================
   Tipografia e impaginazione
   ================================================================== */

/* Il titolo della 404 restava a 80px anche su un telefono: a 320, 375 e
   414 px si spezzava in tre righe e gli accenti toccavano la riga sopra.
   La regola del tema, section.error-404 h1 (main.css:2454), ha
   specificita' (0,1,2) e passa davanti alle regole responsive del tema:
   la si ripete identica per superarla in ordine. */
@media (max-width:991px){
  section.error-404 h1{ font-size:var(--t-h1); line-height:1.15; }
}
@media (max-width:575px){
  section.error-404 h1{ font-size:32px; }
}

/* Il trattino sotto i titoli restava a sinistra in nove punti: era
   centrato solo da .text-center .wc-sep, mentre .wc-head e .wc-cta
   centrano con text-align, che su un blocco largo 56px non fa niente. */
.wc-head .wc-sep,
.wc-cta .wc-sep{ margin-left:auto; margin-right:auto; }

/* A 375px lo stesso livello di titolo aveva tre misure diverse: 24px
   dentro .wc-head, 27px nella fascia di chiusura, 36px per gli
   h2 di classe "title" lasciati al tema. Da 991px in giu' ne resta una
   sola, quella della scala. Scende anche la fascia di chiusura, che e'
   un h2 come gli altri; l'unico titolo che resta grande e' quello
   dell'apertura, che e' un h1 e qui non viene toccato. */
@media (max-width:991px){
  .site-main h2{ font-size:var(--t-h2); line-height:1.2; }
  /* Le due pagine legali non passano mai da .wc-prosa: i loro h3 restavano
     alla misura del tema (32px), piu' grandi dell'h2 della stessa pagina
     (27-28px qui sotto). Si applica solo dove l'HTML porta la classe
     wc-prosa (privacy-policy.html, cookie-policy.html). */
  .wc-prosa h3{ font-size:var(--t-h3); line-height:1.25; margin:0 0 var(--s2); }
}

/* I campi del modulo erano a 15px. Sotto i 16px Safari su iPhone
   ingrandisce la pagina da solo appena il campo prende il fuoco, e poi
   non la rimpicciolisce piu'. */
.wrap-form input,
.wrap-form select,
.wrap-form textarea{ font-size:16px; }

/* La tendina non sembrava una tendina: shortcodes.css:3378-3388 toglie la
   freccia di sistema con -webkit-appearance:none e la ridisegna su
   .wrap-form .select-text:after, una classe che nel markup non esiste -
   il select sta dentro span.text-input, come i campi di testo.
   Delle due strade possibili scelgo di rimettere la freccia di sistema
   invece di ridisegnarla:
   . per ridisegnarla dovrei agganciare uno pseudo-elemento a
     span.text-input, che pero' avvolge anche i campi di testo: per
     colpire solo quello con la tendina servirebbe :has(), oppure una
     classe in piu' nel markup, che non e' mio;
   . e comunque andrebbe riservato lo spazio a destra e rifatto a mano il
     comportamento su fuoco e apertura, che la freccia di sistema ha gia'.
   La freccia di sistema si disegna sempre, cresce con lo zoom e segue le
   impostazioni di chi guarda. Nessuna delle due strade tocca il testo. */
.wrap-form select{
  -webkit-appearance:auto;
  -moz-appearance:auto;
  appearance:auto;
}


/* ==================================================================
   Chi ha chiesto meno movimento
   ==================================================================
   Nel progetto non c'era una sola riga che tenesse conto di questa
   impostazione, mentre di movimento ce n'e': la freccia che saltava, le
   fotografie che si ingrandiscono al passaggio, i cerchi delle tappe che
   cambiano colore. Qui si ferma tutto in un colpo solo.
   Il selettore universale da solo pesa zero e non batterebbe nessuna
   regola del tema. Il :not() con un identificativo che in pagina non
   esiste non cambia cosa prende - prende tutto lo stesso - ma gli da' il
   peso di un identificativo: cosi' passa davanti alle regole a classi
   senza bisogno di un !important. */
@media (prefers-reduced-motion: reduce){
  html:not(#nessuno){ scroll-behavior:auto; }
  *:not(#nessuno),
  *:not(#nessuno)::before,
  *:not(#nessuno)::after{
    animation:none;
    transition:none;
    scroll-behavior:auto;
  }
}


/* ==================================================================
   Riparazioni dopo il collaudo
   ================================================================== */

/* --- schede a icona: il tema vestiva l'h5, in pagina c'e' un h3 --------
   shortcodes.css:967 e :1133 dichiarano misura e interlinea su
   ".featured-title h5". Nel markup le tre schede di about-us e le tre di
   contact-us usano un h3 (il livello giusto: vengono dopo un h2). Senza
   il gemello della regola valeva main.css:206, h3 a 38px/48px: il doppio.
   Qui si ripete, dichiarazione per dichiarazione, quello che il tema da'
   all'h5 nello stesso punto. shortcodes.css non si tocca. */
.featured-title h3{
  font-size:19px; line-height:28px; margin-bottom:10px;
}
.featured-icon-box.style2 .featured-content .featured-title h3{
  font-size:26px; line-height:33px;
}

/* --- le due classi nuove del modulo contatti --------------------------
   .wc-consenso e' la riga della spunta obbligatoria: la casella va
   allineata alla prima riga del testo, non centrata su un testo che va a
   capo. .wc-noscript compare solo a JavaScript spento e deve leggersi
   come un avviso, non come un paragrafo qualsiasi. */
.wc-consenso{
  margin:var(--s2) 0 0;
  font-size:15px; line-height:1.5; color:var(--wc-body);
}
.wc-consenso label{
  /* NON usare display:flex qui: i frammenti di testo attorno al link
     diventerebbero elementi flex e il gap aprirebbe buchi dentro la frase
     ("Ho letto l'  informativa  sul trattamento"). Il testo resta in linea. */
  display:block; text-align:left; font-weight:400; margin:0;
}
.wc-consenso input[type="checkbox"]{
  width:18px; height:18px; margin:0 var(--s1) 0 0; vertical-align:-3px;
}
.wc-noscript{
  margin:0 0 var(--s3); padding:var(--s3);
  border:1px solid var(--wc-line); background:#fff;
  font-size:14px; line-height:1.5; color:var(--wc-body); text-align:left;
}

/* --- link di testo dentro la fascia scura -----------------------------
   .wc-cta veste h2, p, occhiello e trattino, ma non i link di testo:
   restavano al colore generico del tema (main.css:231, #121f38), cioe'
   esattamente il colore del velo sopra la fotografia. Rapporto 1:1.
   Il #e6c3ae e' gia' quello dell'occhiello e del trattino qui dentro. */
.wc-cta p a{ color:#e6c3ae; text-decoration:underline; }
.wc-cta p a:hover,
.wc-cta p a:focus{ color:#f0d9cb; }

/* --- il terracotta da testo scende ancora un poco ---------------------
   #a8613d misura 4.73 sul bianco ma 4.28 sulla fascia grigia del tema
   (#edf5f7): sotto il minimo di 4.5. Colpiva gli occhielli di about-us,
   services-1 e portfolio, e i numeri delle quattro tappe.
   #9e5a38 misura 4.78 sul grigio e 5.29 sul bianco: passa su tutti e due
   i fondi, e il bianco sul pulsante pieno sale da 4.73 a 5.29. */
:root{ --wc-skin-testo:#9e5a38; }

/* Il distintivo del portfolio era rimasto al terracotta decorativo:
   #c78665 a 11px sul bianco misura 2.99. */
.wc-badge-ok{ border-color:var(--wc-skin-testo); color:var(--wc-skin-testo); }

/* main.css:567 elenca anche ".ttm-textcolor-skincolor i", che pesa piu'
   della sola classe: l'icona grande della 404 restava #c78665 sulla
   fascia grigia, 2.70. Qui la regola prende anche l'icona. */
.ttm-textcolor-skincolor i{ color:var(--wc-skin-testo); }

/* --- quello che il visitatore scrive nei campi ------------------------
   main.css:121 colora il testo dei campi #8093a8: 3.15 sul bianco. Vale
   anche per la voce preselezionata della tendina. Il colore di corpo
   gia' in uso qui misura 6.09. */
.wrap-form input,
.wrap-form select,
.wrap-form textarea{ color:var(--wc-body); }

/* --- voce di menu attiva ---------------------------------------------
   main.css:586 la porta al terracotta decorativo. Sopra l'intestazione
   scura misura 4.19 nel punto peggiore della fotografia di testata, e
   2.99 sulla barra bianca che compare scorrendo. Due fondi, due colori:
   il chiaro sul velo scuro (10.00), quello da testo sul bianco (5.29). */
@media (min-width:1200px){
  /* intestazione stesa sopra la fotografia di testata */
  nav.main-menu ul.menu li.active > a{ color:#e6c3ae; }
  /* barra bianca che compare scorrendo */
  .fixed-header nav.main-menu ul.menu li.active > a{ color:var(--wc-skin-testo); }
}
@media (max-width:1199px){
  /* sotto i 1200 il menu e' un pannello bianco a tendina (megamenu.css:283) */
  nav.main-menu ul.menu li.active > a{ color:var(--wc-skin-testo); }
}

/* --- intestazione della 404 -------------------------------------------
   Sopra i 1200px responsive.css:158 rende l'intestazione un velo di nero
   al 25 per cento, perche' la immagina sopra una fotografia scura. Sulla
   404 sotto c'e' la fascia grigia #edf5f7: il velo la porta a
   rgb(178,184,185) e il bianco delle cinque voci di menu misura 2.01.
   Solo li' l'intestazione torna piena: 15.06. */
@media (min-width:1200px){
  header.ttm-header-style-01.wc-header-solid #site-header-menu{
    background-color:#121f38;
  }
}

/* --- le tre barrette del menu sul telefono ----------------------------
   Sotto i 1200px responsive.css:389 rende trasparente l'intestazione, che
   li' non e' piu' in posizione assoluta: la striscia sta sopra il bianco
   della pagina. Le barrette erano bianche su bianco, rapporto 1.00, cioe'
   invisibili su tutte e dieci le pagine. Sotto quella soglia vanno scure,
   come il logo che il tema accende proprio li': 16.42.
   Sopra i 1200 il comando non si vede affatto (megamenu.css:225 da'
   display:block a .menubar-box solo sotto i 1200). */
@media (max-width:1199px){
  .menubar-inner,
  .menubar-inner:before,
  .menubar-inner:after{ background-color:#121f38; }
}

/* --- link dentro il testo corrente ------------------------------------
   Nelle due pagine legali e nell'etichetta del consenso i link si
   distinguevano dal testo intorno solo per il colore, con rapporto 2.69
   fra i due: sotto il 3 richiesto quando il colore e' l'unico segnale.
   Con la sottolineatura il segnale non e' piu' solo il colore.
   I pulsanti restano fuori: hanno gia' fondo e bordo propri. */
.site-main p a:not(.ttm-btn),
.site-main li a:not(.ttm-btn):not(.mega-menu-link),
.wc-consenso a{
  text-decoration:underline;
  text-underline-offset:.15em;
}
.site-main .menu-footer-services a,
.site-main .wc-azioni a{ text-decoration:none; }


/* ==================================================================
   Design piu' professionale — 11 settembre
   ================================================================== */

/* --- 1) Maiuscole all'inglese sui titoli italiani -----------------------
   Il tema applica text-transform:capitalize a .page-title-heading h1
   (main.css:1857 circa) e a .breadcrumb-wrapper span (main.css:1869
   circa): "Chi sono" diventava "Chi Sono". Le due dichiarazioni scritte a
   mano piu' sopra in questo foglio (.featured-title .featured-label e
   .featured-title h3) sono state CANCELLATE, non sovrascritte: facevano
   la stessa cosa e lasciarle avrebbe fatto credere che il Title Case
   fosse voluto. Qui si spegne alla fonte, sul tema. */
.page-title-heading h1,
.breadcrumb-wrapper span{ text-transform:none; }

/* --- 2) La fascia di testata da scura a chiara --------------------------
   Il markup della foto e del velo scuro viene tolto dalle pagine (non e'
   compito di questo foglio); qui si spegne lo sfondo residuo del tema e
   si ridisegna la fascia come una testata chiara e allineata a sinistra. */
.ttm-page-title-row{ background:none; }
.ttm-page-title-row .ttm-bg-layer,
.ttm-page-title-row-inner{ background:transparent; }
.ttm-page-title-row-inner{ padding:96px 0 40px; text-align:left; }
.page-title-heading h1{ color:var(--wc-ink); font-size:var(--t-h1); line-height:1.1; }
.heading-seperator{ display:none; }

/* --- 3) Il piede: via la fotografia, via il logo chiaro-su-chiaro ------
   Il markup del piede viene sostituito altrove con il blocco A del
   contratto condiviso (logo scuro + .wc-footer-slim); qui il CSS che
   quel blocco usa. --wc-grey e' il neutro caldo gia' definito in :root
   (#f4f1ee): non serve un valore di ripiego. */
.footer{ background-image:none; background-color:var(--wc-grey); }
.wc-footer-logo{ display:block; margin:0 0 var(--s2); height:auto; }
.wc-footer-slim .widget-title{ font-size:16px; margin-bottom:var(--s1); }

/* --- 4) Consenso e filigrana: verificato, un punto NON corrisponde -----
   .wc-consenso label e' display:block (mai stato display:flex qui): gia'
   corretto, non toccato.
   .wc-body[data-num]::before non ha content:none: ha content:attr(data-num),
   che e' il numero di tappa mostrato come cifra grande e pallida dietro al
   titolo (vedi "il numero come filigrana" piu' sopra in questo file: e' la
   filigrana stessa, funzionante e voluta, non un residuo da spegnere).
   Impostare content:none qui cancellerebbe quella filigrana. Lascio
   com'e' e lo segnalo: la descrizione di questo punto non corrisponde
   allo stato reale del file, che invece e' corretto cosi'. */

/* --- 5) Larghezza di riga e allineamento --------------------------------
   L'intestazione del foglio chiede 45-75 caratteri per riga; alcuni
   blocchi di testo arrivavano a 126. .wc-prosa la applicano gli agenti
   delle pagine a tre blocchi specifici. Restano centrati: occhiello, h2,
   il filetto .wc-sep, e i paragrafi brevi dentro .wc-step. Il modulo
   contatti (select/input/label) non viene toccato da questo allineamento. */
:root{ --misura-prosa:34em; }
.wc-prosa{ max-width:var(--misura-prosa); margin-left:auto; margin-right:auto; }
.wc-head p,
.wc-cta p,
.title-desc p,
.wc-dopo-invio p{
  text-align:left; max-width:var(--misura-prosa);
  margin-left:auto; margin-right:auto;
}
body{ font-size:16px; line-height:1.7; }

/* --- 6) Le clipart da template -------------------------------------------
   Le icone escono dal markup in about-us e contact-us (non e' compito di
   questo foglio); qui lo stile del sostituto: un filetto sottile al posto
   dell'icona, e via il doppio riquadro sfalsato del tema (::before) che
   oggi crea le tre schede "a gradini". --wc-terra non esiste in :root: uso
   --wc-skin-testo, il terracotta gia' in uso sui pulsanti pieni
   (vedi la regola .ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor
   piu' sopra in questo file). */
.featured-icon-box.style2 .featured-icon{ display:none; }
.featured-icon-box .featured-content::before{
  content:''; display:block; width:56px; height:2px;
  background:var(--wc-skin-testo); margin:0 0 var(--s3);
}
.featured-icon-box{ padding:var(--s4); }
.featured-icon-box.style2::before{ content:none; }

/* --- 7) L'etichetta legale sulle schede dei modelli ---------------------
   Un altro agente sposta il markup di .wc-flag fuori da <a>, sotto la
   scheda; qui lo stile del testo semplice che la sostituisce. La regola
   di .wc-flag piu' in alto in questo file (quella che oggi la disegna
   come rettangolo blu notte sopra la foto) ha la stessa specificita' di
   questa: essendo questa dichiarata dopo, nell'ordine del file, vince lei. */
.wc-flag{
  position:static; display:block; margin:10px 0 0; padding:0;
  background:none; color:var(--wc-body);
  font-family:'Hind',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:none;
}

/* --- 8a) Grigio caldo sulle fasce alternate ------------------------------
   Le fasce alternate del tema usano #edf5f7 (azzurro freddo) invece del
   neutro caldo --wc-grey gia' in casa. Il selettore del tema con la stessa
   specificita' sta in main.css (".ttm-bgcolor-grey, .ttm-bgcolor-grey >
   .ttm-bg-layer, ..."): l'ordine da solo non basta a vincere perche' quella
   regola del tema elenca piu' selettori nello stesso blocco e alcuni build
   tool/minificatori la possono riordinare. E' l'unico punto di questo
   foglio dove serve !important, e serve solo sul colore, non sulla
   struttura. Cercato in shortcodes.css un equivalente sui BORDI dei campi
   colorato con #edf5f7 sulle fasce grigie: non esiste (esiste solo un
   background-color sui campi, gia' sovrascritto a bianco dal tema stesso
   quando il campo e' dentro .ttm-bgcolor-grey) — punto saltato, vedi nota
   a parte. */
.ttm-bgcolor-grey,
.ttm-bgcolor-grey > .ttm-bg-layer{ background-color:var(--wc-grey) !important; }

/* --- 8b) Pulsanti leggibili ----------------------------------------------
   I pulsanti erano in Cormorant 700 a 15px: un serif fine su un comando
   si legge male. Passano al sans-serif gia' in uso per le etichette. */
.ttm-btn{ font-family:'Hind',sans-serif; font-weight:600; font-size:14px; letter-spacing:.02em; }

/* --- 8c) Ripiego del serif ------------------------------------------------
   main.css:203 dichiara "h1, h2, h3, h4, h5, h6 {... font-family:
   'Cormorant', sans-serif; }": se Google Fonts non risponde, TUTTI i
   titoli del sito cadrebbero su Arial invece che su un serif simile. E'
   SOLO in main.css (che non tocco): qui una regola equivalente, stessa
   specificita' (0,0,6), dichiarata dopo — e custom.css e' comunque
   caricato dopo main.css nell'head di ogni pagina — quindi vince. */
h1, h2, h3, h4, h5, h6{ font-family:'Cormorant', Georgia, serif; }

/* --- 9) Il telefono: le quattro tappe da colonna a elenco ---------------
   I nomi reali nel markup di index.html sono .wc-steps, .wc-step e
   .wc-badge (il cerchio col numero): non esiste una classe .wc-step-num,
   quindi il selettore e' adattato su .wc-badge. Il cerchio resta rotondo
   ma si riduce, cosi' sta dentro i 44px di margine riservati al numero e
   non si sovrappone al testo che comincia li' accanto.
   Anche verificato: esisteva un @media (max-width:400px) su .wc-hero h1
   che lo portava a 26px — cancellato piu' sopra in questo file, sostituito
   dalla regola qui sotto che vale su tutto lo scaglione fino a 767px.
   Niente griglia 2x2 per le quattro tappe: a 390px si accartoccia. */
@media (max-width:767px){
  .wc-steps::before{ display:none; }
  .wc-step{
    text-align:left; padding-left:44px; position:relative; margin-bottom:var(--s4);
  }
  .wc-step .wc-badge{
    position:absolute; left:0; top:0;
    width:32px; height:32px; line-height:30px;
    font-size:var(--t-sm); margin:0;
  }
  .wc-hero h1{ font-size:30px; line-height:1.12; }
  .site-main h2{ font-size:28px; }
}

/* ==================================================================
   about-us.html — pagina "Chi sono": correzioni grafiche mirate
   ================================================================== */

/* --- "Tre cose da sapere prima di scrivermi": altezza uniforme delle
   tre schede ------------------------------------------------------------
   .featured-icon-box.style2 compare solo qui. Le tre colonne Bootstrap
   sono gia' equal-height (flex), ma il box bianco dentro ciascuna
   colonna aveva solo l'altezza del proprio testo: risultato, tre schede
   577/713/746px con il bordo inferiore a gradini. Qui il box riempie la
   colonna e i tre bordi tornano allineati (776px su tutte e tre). */
.featured-icon-box.style2{ height:100%; display:flex; flex-direction:column; }

/* --- "Mi chiamo {{AUTORE}}": pausa fra il terzo e il quarto paragrafo --
   Cinque paragrafi di seguito in .wc-split .wc-body leggono come un
   muro di testo. Una riga sottile e un respiro in piu' prima del quarto
   paragrafo (quello su "lavoro da solo") segna una pausa senza toccare
   una parola. Il selettore e' sicuro: e' l'unico blocco .wc-split .wc-body
   del sito con piu' di tre paragrafi (index.html ne ha due). */
.wc-split .wc-body p:nth-of-type(4){
  margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--wc-line);
}

/* ==================================================================
   portfolio-style-01.html — pagina "I modelli": correzioni grafiche mirate
   ================================================================== */

/* --- Griglia otto modelli: l'ultima riga (3+3+2) non resti orfana -------
   .wc-model-row e' sul <div class="row"> degli otto .col-lg-4.col-md-6,
   solo in questa pagina. Le righe piene da tre schede occupano gia' il
   100% della larghezza e non cambiano; l'ultima riga, da due schede, si
   centra con margini simmetrici invece di restare a sinistra con un vuoto
   grande quanto una scheda. */
.wc-model-row{ justify-content:center; }

/* --- Intro (<!--intro-->): il primo paragrafo come "lead" ---------------
   Quattro paragrafi di seguito in .wc-prosa leggono come un blocco unico.
   Selettore scoped alla sola sezione d'apertura (.ttm-row.pb-0), verificato
   unico nel sito: non tocca gli altri blocchi .wc-prosa delle altre pagine. */
.ttm-row.pb-0 .wc-prosa p:first-of-type{
  font-size:var(--t-lead); line-height:1.6;
}

/* --- Spazio fra l'intro e "Da guardare" ----------------------------------
   90px fra la fine dell'intro e l'inizio del blocco successivo: i due
   .wc-head consecutivi (eyebrow + h2 + filetto + paragrafo) si leggevano
   come una ripetizione. Selettore di fratello adiacente, scoped a questa
   sola coppia di sezioni. */
.ttm-row.pb-0 + section.ttm-row{ padding-top:var(--s4); }

/* --- Griglia otto modelli: le sei fotografie, una tinta sola -------------
   Le sei fotografie (persone e un vassoio di cibo, calde e fredde miste)
   affiancate leggono come un collage. Un velo di trattamento uniforme
   attenua la disomogeneita' di colore, non quella di soggetto. Scoped alle
   sole foto reali di questa griglia: le due schermate (selettore
   [src*="schermata-"]) restano escluse e nessun'altra pagina usa queste
   foto dentro .wc-model. */
.wc-model img:not([src*="schermata-"]){
  filter:saturate(.88) contrast(1.04) sepia(.04);
}

/* ==================================================================
   services-1.html — pagina "Cosa faccio": correzioni grafiche mirate
   ================================================================== */

/* --- Le nove voci del sito del matrimonio: un elenco, non un muro ------
   .wc-lista-piana compare solo in questa pagina (sezione #il-sito). Senza
   una regola propria l'elenco puntato del tema eredita bullet e rientro
   di default e si legge come continuazione del paragrafo che lo precede,
   mentre qui sono nove voci scandite ("Come si arriva.", "Dove dormire."…)
   che meritano un respiro verticale proprio. Punto elenco sostituito da
   un pallino pieno color pelle (--wc-skin, gia' in uso altrove per gli
   accenti), allineato all'altezza del testo con top:.7em invece che al
   centro riga. */
.wc-lista-piana{ list-style:none; padding:0; margin:0 0 var(--s3); }
.wc-lista-piana li{ position:relative; padding-left:var(--s3); margin-bottom:var(--s2); }
.wc-lista-piana li:last-child{ margin-bottom:0; }
.wc-lista-piana li::before{
  content:''; position:absolute; left:2px; top:.7em; width:6px; height:6px;
  border-radius:50%; background:var(--wc-skin);
}

/* ==================================================================
   Grafica sezione per sezione — 12 settembre
   ================================================================== */

/* Le sei regole del sistema di design condiviso (direttore artistico)
   sono entrate una per una, ciascuna nel punto del foglio che il
   sistema stesso indicava — non tutte qui in fondo, per non
   duplicare una regola sullo stesso selettore che gia' esisteva
   altrove (il sistema lo chiedeva esplicitamente per il punto 2:
   "sostituisce... non le aggiunge in piu'"). Riepilogo di dove
   trovarle, verificato in browser (Chrome headless + Playwright) voce
   per voce prima di considerarle fatte:

   1) .ttm-row .container sotto i 1199px — dentro "Correzioni al
      tema", accanto alle altre eccezioni al tema del sito.
   2) Le due schermate reali (Giulia&Matteo, Beatrice&Edoardo) dentro
      .wc-model, aspect-ratio 1/1 e didascalia a tinta piena — ha
      sostituito le due regole equivalenti che gia' c'erano nella
      sezione "vetrina dei modelli", non le ha raddoppiate.
   3) .wc-prosa centrato — margin-left/right:auto e' entrato nella
      dichiarazione gia' esistente della classe, sezione "5) Larghezza
      di riga e allineamento".
   4) Le due pagine legali — .wc-prosa h3 e' entrata nella stessa
      media query dove gia' viveva .site-main h2, come chiesto: si
      attiva solo dove l'HTML porta la classe wc-prosa (un altro
      agente lavora sull'HTML delle due pagine).
   5) .wc-lista-piana (services-1.html, elenco delle nove voci del
      sito del matrimonio) — sezione propria qui sopra.
   6) .featured-icon-box.style2 altezza uniforme (about-us.html, "Tre
      cose da sapere") — sezione propria piu' sopra in questo foglio.

   Verificato con misure precise (getBoundingClientRect / getComputedStyle),
   non a occhio: badge delle quattro tappe pienamente visibili e
   centrati a 390px; griglia degli otto modelli senza gradini, card
   tutte alla stessa altezza; nessun testo-fantasma sotto le
   didascalie delle due schermate, ne' a 1280 ne' a 390px; .wc-prosa
   centrato (nessuno scarto dal centro) su index, portfolio, about-us
   e services-1 a 1440px; le tre schede di about-us tutte a 776px;
   l'elenco di services-1 con pallini pieni color pelle invece del
   punto elenco di sistema.
   Nessuna regola nuova in conflitto con una esistente, zero
   !important nuovi (resta il solo gia' motivato su .ttm-bgcolor-grey
   piu' sopra), parentesi bilanciate. */