/**
 * CHI SIAMO — la sezione subito sotto allo slider.
 *
 * 27/10/2026 — IL FILO FRA MILANO E GROSSETO (prova 19, scelta dall'utente;
 * vedi la nota in cima a chisiamo.php). A sinistra barretta, titolo,
 * paragrafo e bottone; a destra il disegno: le due sedi unite da una curva
 * coi sei colori delle aree, la legenda delle aree e «20+ anni». Sul telefono
 * una colonna sola: titolo, testo, disegno, bottone.
 * Le regole di prima (due paragrafi, fila di cifre, macchie sfocate) stanno in
 * /var/www/vhosts/kreita.com/backup-chisiamo-20261027/chisiamo.css.
 *
 * ⚠️⚠️ LA BARRETTA DEI SEI COLORI (`.k-chi__aree`) E LA TESTATA DEL PORTFOLIO
 * (`#portfolio-testa`) NON SONO SOLO DEL CHI SIAMO: le usano anche la pagina
 * portfolio ([kreita_filo]) e le pagine servizio. Le loro regole sono rimaste
 * quelle di prima, parola per parola.
 */

.k-chi{--n:#131C2E;--m:#5B6475;position:relative;background:#fff;color:var(--n);
  padding:8rem 0 7rem;overflow:hidden}
.k-chi__w{max-width:var(--k-gabbia,1240px);margin:0 auto;padding:0 1.5rem;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2.5rem,6vw,6rem);
  grid-template-areas:"filo mappa" "tit mappa" "testo mappa" "vai mappa";grid-template-rows:auto auto auto 1fr;align-items:start}
.k-chi .k-chi__aree{grid-area:filo;margin:0 0 1.6rem}
.k-chi__titolo{grid-area:tit;font-family:var(--k-display,"Space Grotesk",system-ui,sans-serif);font-weight:600;
  font-size:clamp(2.3rem,4.3vw,3.8rem)!important;line-height:1.02!important;letter-spacing:-.045em;
  color:var(--n)!important;margin:0!important;text-wrap:balance}
.k-chi__testo{grid-area:testo;margin:1.6rem 0 0!important;max-width:44ch;font-size:clamp(1.05rem,1.35vw,1.18rem)!important;
  line-height:1.62!important;color:#3A4555!important;text-wrap:pretty}
.k-chi__testo b{font-weight:700;color:var(--n)}
.k-chi__vai{grid-area:vai;margin:2.2rem 0 0}

/* ── la mappa ──────────────────────────────────────────────────────────────
   Il disegno sta in un SVG da 600×440; i nomi delle città e il «20+» sono
   testo vero sopra, in percentuali dello stesso riquadro, così scalano
   insieme. `container-type` per misurare i caratteri sulla larghezza del
   riquadro (cqw) e non dello schermo. */
.k-chi__mappa{grid-area:mappa;align-self:center;position:relative;margin:0;container-type:inline-size}
.k-chi__tela{position:relative;aspect-ratio:600/440;container-type:inline-size}
.k-chi__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.k-chi__griglia{opacity:.1}
.k-chi__strada{fill:none;stroke:var(--n);stroke-opacity:.16;stroke-width:2;stroke-dasharray:0 9;stroke-linecap:round}
.k-chi__filo path{fill:none;stroke-width:6;stroke-linecap:butt;transition:opacity .2s ease-out,stroke-width .2s ease-out}
.k-chi__traccia{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
/* ⚠️ Solo l'anello esterno: il colore del cuore arriva dal PHP come attributo
   `fill` (prima e ultima area del filo), e una regola CSS su tutti e due i
   cerchi lo coprirebbe — i punti restavano vuoti. */
.k-chi__nodo circle:not(.k-chi__cuore){fill:#fff;stroke:var(--n);stroke-width:2.6}
.k-chi__nodo.-mi{transform:translate(70px,118px)}
.k-chi__nodo.-gr{transform:translate(528px,352px)}

.k-chi__citta{position:absolute;display:flex;flex-direction:column;gap:.15rem;font-style:normal;margin:0}
.k-chi__citta b{font-family:var(--k-display,"Space Grotesk",system-ui,sans-serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.05rem,3.9cqw,1.5rem);line-height:1.1;color:var(--n)}
.k-chi__citta span{font-size:clamp(.8rem,2.3cqw,.92rem);line-height:1.3;color:var(--m)}
/* Milano sopra il suo punto, Grosseto sotto il suo e allineata a destra */
.k-chi__citta.-mi{left:6.5%;top:22%;transform:translateY(-100%)}
.k-chi__citta.-gr{right:6.5%;top:86%;text-align:right;align-items:flex-end}

.k-chi__anni{position:absolute;left:6.5%;top:59%;margin:0;display:flex;flex-direction:column}
.k-chi__n{font-family:var(--k-display,"Space Grotesk",system-ui,sans-serif);font-weight:600;letter-spacing:-.055em;
  font-size:clamp(3.4rem,17cqw,7rem);line-height:.9;color:var(--n)}
/* ⚠️ Due cifre di larghezza fissa e allineate a destra: mentre conta da 0 a
   20 il «+» non deve ballare avanti e indietro. */
.k-chi__conta{display:inline-block;min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}

/* ── le aree di attività: la legenda dei colori del filo ──────────────────
   Nell'angolo che la curva lascia libero. Ogni voce porta alla sua area, e
   al passaggio accende il suo tratto e spegne gli altri: è così che si
   capisce che i sei colori sono le sei aree. */
.k-chi__legenda{position:absolute;top:4%;right:6.5%;z-index:2;list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.k-chi__legenda a{display:flex;align-items:center;gap:.65rem;margin:0 -.55rem;padding:.3rem .55rem;border-radius:8px;
  color:#3A4555;font:500 14px/1.25 var(--body,"Hanken Grotesk",system-ui,sans-serif);
  text-decoration:none!important;box-shadow:none!important;transition:color .15s,background .15s}
.k-chi__legenda i{flex:none;width:18px;height:4px;border-radius:2px;transition:width .2s cubic-bezier(.2,.8,.2,1)}
.k-chi__legenda a:hover,.k-chi__legenda a:focus-visible,.k-chi__legenda a.-evid{color:var(--n);background:#F4F6FA}
.k-chi__legenda a:hover i,.k-chi__legenda a.-evid i{width:26px}
.k-chi__legenda a:focus-visible{outline:2px solid var(--n);outline-offset:1px}
.k-chi__mappa[data-evid] .k-chi__legenda a:not(.-evid){color:#9AA3B1}
.k-chi__mappa[data-evid] .k-chi__filo path{opacity:.16}
.k-chi__mappa[data-evid="0"] .k-chi__filo path:nth-child(1),
.k-chi__mappa[data-evid="1"] .k-chi__filo path:nth-child(2),
.k-chi__mappa[data-evid="2"] .k-chi__filo path:nth-child(3),
.k-chi__mappa[data-evid="3"] .k-chi__filo path:nth-child(4),
.k-chi__mappa[data-evid="4"] .k-chi__filo path:nth-child(5),
.k-chi__mappa[data-evid="5"] .k-chi__filo path:nth-child(6){opacity:1;stroke-width:9}
/* ⚠️ Quando la mappa è stretta (colonna di un portatile piccolo, telefono)
   nell'angolo non ci sta più senza toccare la curva: va sotto, su due
   colonne. */
@container (max-width:540px){
  .k-chi__legenda{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem 1.4rem;margin:1.2rem 0 0}
}
/* sul telefono «Assistenza informatica» deve stare su una riga sola */
@container (max-width:400px){
  .k-chi__legenda{grid-template-columns:max-content max-content;gap:0 1.4rem}
  .k-chi__legenda a{gap:.45rem;font-size:13px;padding:.32rem .4rem;margin:0 -.4rem}
  .k-chi__legenda i{width:12px}
}
.k-chi__testoiu{color:#D03923;margin-left:.02em}     /* come il punto di Grosseto */
.k-chi__et{margin-top:.55rem;font-size:clamp(.85rem,2.6cqw,1rem);color:var(--m)}

/* ── il filo che si traccia ────────────────────────────────────────────────
   ⚠️ Senza script il disegno è intero: le classi le mette lo script. Si
   parte nascosti solo con `.-pronto` e si scopre con `.-in`. */
.k-chi__mappa.-pronto .k-chi__traccia{stroke-dashoffset:1}
.k-chi__mappa.-pronto .k-chi__nodo.-gr{opacity:0;transform:translate(528px,352px) scale(.3)}
.k-chi__mappa.-pronto .k-chi__citta.-gr,.k-chi__mappa.-pronto .k-chi__anni{opacity:0;translate:0 10px}
.k-chi__mappa.-in .k-chi__traccia{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.55,.05,.25,1) .15s}
.k-chi__mappa.-in .k-chi__nodo.-gr{opacity:1;transform:translate(528px,352px) scale(1);
  transition:opacity .25s ease-out 1.55s,transform .45s cubic-bezier(.2,1.4,.4,1) 1.55s}
.k-chi__mappa.-in .k-chi__citta.-gr{opacity:1;translate:0 0;transition:opacity .4s ease-out 1.7s,translate .5s cubic-bezier(.2,.8,.2,1) 1.7s}
.k-chi__mappa.-in .k-chi__anni{opacity:1;translate:0 0;transition:opacity .4s ease-out .1s,translate .6s cubic-bezier(.2,.8,.2,1) .1s}
/* ⚠️ Con «riduci il movimento» lo script non mette `.-pronto`: il disegno
   resta intero da subito. */

/* ── telefono: titolo, testo, mappa, bottone ─────────────────────────────── */
@media (max-width:900px){
  .k-chi{padding:5.5rem 0 5rem}
  .k-chi__w{grid-template-columns:1fr;grid-template-areas:"filo" "tit" "testo" "mappa" "vai";grid-template-rows:none}
  .k-chi__mappa{margin:2.6rem -.25rem 0}
  .k-chi__vai{margin-top:2rem}
}

/* LA BARRETTA DELLE SEI AREE — sta SOPRA al titolo e non e' un ornamento: ogni
   segmento porta alla sua area e, al passaggio, si apre e dice come si chiama.
   ⚠️ Il nome non si toglie e non si rimette: c'e' sempre, e' solo RITAGLIATO
   finche' il segmento e' chiuso (`max-width:0;overflow:hidden`). Cosi' il
   lettore di schermo legge sempre «Design & Branding», e non serve JavaScript. */
/* ⚠️ Il filo e' UNO, non sei pastiglie staccate: i sei collegamenti stanno
   appiccicati e i colori li dipinge il contenitore (`--k-fil`, che arriva da
   chisiamo.php: i colori devono restare quelli di KREITA_AREE). */
.k-chi__aree{--w:15rem;position:relative;display:flex;width:var(--w);height:5px;
  margin:0 auto 1.7rem;border-radius:99px;isolation:isolate}
.k-chi__aree::before{content:"";position:absolute;inset:0;border-radius:99px;z-index:1;
  background:var(--k-fil)}
.k-chi__area{position:relative;flex:1;display:block;z-index:2;
  text-decoration:none!important;box-shadow:none!important}
/* ⚠️ Con un filo da 5px il bersaglio da toccare non esiste: questo lo porta a
   31px senza spostare niente di visibile. Se no sul telefono e' intoccabile. */
.k-chi__area::after{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-13px}
.k-chi__area:focus-visible{outline:2px solid #131C2E;outline-offset:6px}
/* ⚠️⚠️ IL NOME NON COMPARE MAI ALLA VISTA — deciso il 7/8: il filo deve restare
   un segno, non una barra di navigazione che si apre sotto al titolo.
   Ma NON si toglie dal codice: resta nascosto alla vista, cosi' chi naviga col
   lettore di schermo sente «Design & Branding» invece di sei collegamenti muti.
   Sei link senza nome accessibile sono sei link inutilizzabili.
   Per rimetterlo in pagina basta togliere questa regola e rimettere la
   comparsa al passaggio: sta nella cronologia di questo file. */
.k-chi__area-n{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ⚠️⚠️ LA LUCE CHE PASSA NON E' BIANCA: e' UNA SECONDA COPIA del filo coi colori
   piu' accesi (`--k-fil-luce`), scoperta da una maschera che scorre. Cosi' il
   riflesso *illumina* i sei colori invece di sbiancarli — dove passa, quel pezzo
   di filo e' lo stesso colore ma acceso.
   ⚠️ La maschera si muove con `mask-position` in REM, non in percentuale: le
   percentuali si calcolano sullo spazio LIBERO (filo meno maschera) e con la
   banda piu' stretta del filo il verso si rovescia — il riflesso andava
   all'indietro. Stessa trappola di `background-position`. */
.k-chi__luce{position:absolute;inset:0;border-radius:99px;z-index:3;pointer-events:none;
  background:var(--k-fil-luce);
  -webkit-mask-image:linear-gradient(100deg,transparent,#000 42%,#000 58%,transparent);
          mask-image:linear-gradient(100deg,transparent,#000 42%,#000 58%,transparent);
  -webkit-mask-size:5rem 100%;mask-size:5rem 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:k-chi-riflesso 5.5s ease-in-out infinite}
@keyframes k-chi-riflesso{
  0%{-webkit-mask-position:-5.5rem 0;mask-position:-5.5rem 0}
  55%,100%{-webkit-mask-position:calc(var(--w) + .5rem) 0;mask-position:calc(var(--w) + .5rem) 0}}

@media (prefers-reduced-motion:reduce){
  .k-chi__area{transition:none!important}
  /* ⚠️ La luce non passa: qui non e' un ornamento in piu', e' l'unica cosa che
     si muove nella sezione. */
  .k-chi__luce{display:none}
}
@media (max-width:900px){
  /* sul telefono il filo si accorcia e si ingrossa di un pelo: il mouse non c'e',
     il nome non si apre mai e restano sei bersagli che portano alle aree.
     ⚠️ DOPO la regola di base di `.k-chi__aree`: prima, a parità di peso,
     vincerebbe quella. */
  .k-chi__aree{--w:11rem;height:6px;margin-bottom:1.3rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PRESENTAZIONE DEL PORTFOLIO (7/8/2026, variante «due colonne»)
   Titolo a sinistra, il testo a destra. Gli stessi due segni del «Chi siamo» —
   il filo dei sei colori e le due macchie pallide — ma a meta' intensita': qui
   sotto c'e' una griglia di lavori, non deve rubarle la scena.
   ⚠️ Il filo arriva dallo shortcode [kreita_filo], stesso markup del chi siamo:
   le regole `.k-chi__aree` valgono gia', qui si cambia solo l'allineamento.
   ⚠️⚠️ SI AGGANCIA ALL'ID, NON A UNA CLASSE. Avevo messo `_css_classes` nella
   sezione: nel JSON c'e', ma Elementor NON la stampa in pagina (verificato
   sull'HTML servito: zero occorrenze). L'`_element_id` invece esce sempre —
   qui e' `portfolio-testa`. Con la classe non funzionava e basta.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 🔴 `padding-top` era **2rem**: la barra del menu e' fissa e **non spinge giu'
   il contenuto**, finisce a 128px, quindi i primi 96px di questa apertura —
   il filo dei sei colori e la prima riga del titolo — stavano DIETRO la barra.
   Segnalato l'8/8 come tre cose insieme («va sotto l'header», «manca la
   sezione introduttiva», «non ha colore»): erano lo stesso difetto, e
   l'introduzione e il colore c'erano gia'.
   11,75rem dava ~60px d'aria e all'8/8 sono stati giudicati pochi: portato a
   **15rem = 240px**, cioe' **112px sotto la barra**.
   ⚠️ Se cambia l'altezza della testata va ritoccato anche qui. */
/* ⚠️ 3,4rem sotto contro 15rem sopra: i 15rem pero' contengono i 128px della
   barra che galleggia, quindi lo spazio VISIBILE era 112 sopra contro 54
   sotto — meta'. Il 26/8, quando questa testata e' diventata una fascia a
   colori, il difetto e' saltato all'occhio: portato anche sotto a 7rem = 112px,
   i due lati respirano uguale. */
#portfolio-testa{position:relative;overflow:hidden;isolation:isolate;
  padding-top:15rem!important;padding-bottom:7rem!important}
/* ⚠️ LE DUE MACCHIE SFOCATE SONO SPENTE dal 26/8. Servivano a dare un po' di
   colore a una testata BIANCA; da quando la testata e' una fascia con tutti e
   sei i colori si sovrappongono allo spettro e lo impastano — due aloni verde
   acqua e magenta sopra una sfumatura che quei colori li ha gia'.
   Restano scritte, spente, perche' se un giorno la fascia tornasse chiara
   basta rimettere `display:block`. */
#portfolio-testa::before,#portfolio-testa::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.34;pointer-events:none;z-index:0;display:none}
#portfolio-testa::before{width:42vw;height:42vw;left:-10vw;top:-16vw;
  background:radial-gradient(circle,#0F766E66,transparent 70%)}
#portfolio-testa::after{width:36vw;height:36vw;right:-6vw;bottom:-18vw;
  background:radial-gradient(circle,#C23A8E55,transparent 70%)}
#portfolio-testa > .elementor-container{position:relative;z-index:1;align-items:flex-end!important}
/* ⚠️ Qui il filo NON e' centrato: la colonna e' allineata a sinistra e un filo
   centrato sopra a un titolo a bandiera sembra fuori asse. */
#portfolio-testa .k-chi__aree{margin-left:0;margin-bottom:1.5rem}
#portfolio-testa .k-h2,#portfolio-testa h1{margin-top:.7rem!important}
/* i due paragrafi di destra: stessa misura, non due pesi diversi */
#portfolio-testa .elementor-widget-text-editor p{font-size:1.12rem;line-height:1.62;
  color:#2A3446;margin:0 0 1rem}
#portfolio-testa .elementor-widget-text-editor b,
#portfolio-testa .elementor-widget-text-editor strong{font-weight:700;color:#131C2E}
@media (max-width:1279px){
  /* sotto i 1280 comanda l'hamburger e la barra e' piu' bassa */
  /* ⚠️ Sotto i 1280 la barra resta alta 128: con 10,5rem restavano **40px**
     d'aria, misurati a 1024 e a 390. Scritto come somma, cosi' si legge quanto
     spazio si sta davvero lasciando. */
  #portfolio-testa{padding-top:calc(3.5rem + 128px)!important}
}
@media (max-width:900px){
  #portfolio-testa > .elementor-container{align-items:flex-start!important}
  #portfolio-testa{padding-bottom:2.2rem!important}
}