/**
 * IL PIEDE DI KREITA — impianto «C · F3», scelto il 07/08/2026.
 *
 * PERCHE' E' FATTO COSI'
 * Il piede precedente non era brutto: era **vuoto di senso**. Ripeteva parola
 * per parola la sezione contatti che gli sta sopra (la dicitura «Parliamone»,
 * l'indirizzo, la frase delle 24 ore, i due indirizzi, i social, la barra a
 * spettro), ed elencava 7 voci su 28 pagine servizio. Qui invece:
 *   1. una dichiarazione sola in cima, che la sezione sopra non dice;
 *   2. **le sei aree**, con le icone della fila in copertina — la cosa che
 *      solo il piede puo' dare su TUTTE le pagine;
 *   3. una fascia minuta: marchio, collegamenti in linea, social.
 *
 * ⚠️⚠️ SUL FONDO `#0F1622` I COLORI PIENI NON PASSANO: stanno fra 2,55 e 3,71:1.
 * Le icone e i nomi accesi usano la settima colonna di KREITA_AREE (la variante
 * «su navy»), fra 6,66 e 9,74. Se si cambia un colore d'area va rifatto il conto.
 *
 * ⚠️ Il markup lo stampa `piede.php` (tema figlio), NON i widget di Ohio:
 * i testi si cambiano da **Aspetto → Piede di pagina**, i due gruppi di
 * collegamenti da **Aspetto → Menu**.
 */

.k-piede{
  --p-ink:#FFFFFF;
  --p-soft:rgba(255,255,255,.70);   /* 8,5:1 */
  --p-fioco:rgba(255,255,255,.58);  /* 6,5:1 — a .46 faceva 4,65, poco per i 12px */
  --p-filo:rgba(255,255,255,.13);
  --p-acc:#FF8A6B;                  /* il rosso di marca sul navy da' 3,48: qui serve la chiara, 7,86 */
  --p-display:"Space Grotesk",system-ui,sans-serif;
  --p-body:"Hanken Grotesk",system-ui,sans-serif;
  --p-molla:cubic-bezier(.22,.8,.24,1);
  position:relative;
  background:#0F1622 !important;
  color:var(--p-ink);
  font-family:var(--p-body);
}
/* la firma di marca in cima: gli stessi sei colori del logo. Chiude il sito
   come lo apre. Il gradiente lo costruisce il PHP dai colori veri delle aree. */
.k-piede__spettro{content:"";position:absolute;inset:0 0 auto 0;height:4px;pointer-events:none}
.k-piede__in{max-width:var(--k-gabbia);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}

.k-piede a{color:var(--p-soft);text-decoration:none;background-image:none !important;
  transition:color .22s}
.k-piede a:hover{color:var(--p-ink)}

/* --- 1. la dichiarazione --- */
.k-piede__alto{padding:3.6rem 0 2.6rem;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  grid-template-areas:"frase parla" "claim claim";
  gap:.8rem 2.5rem;align-items:end}
/* ⚠⚠ SENZA IL CLAIM LA SECONDA RIGA RESTA, VUOTA, E SPINGE GIÙ LA MAIL
   (10/9/2026, utente: «questi non sono allineati», con la foto della frase e
   di info@kreita.com). Il claim è un campo del pannello ed è vuoto: la riga
   `claim` misura 0px, ma il `gap` fra le due righe no — 12,8px — e la colonna
   di destra, che sta `align-self:end` su tutte e due le righe, si appoggiava
   al fondo della riga vuota. Misurato: base della mail 11px sotto la base
   della frase.
   Quando il claim c'è, le due righe servono e va bene così: qui si toglie la
   riga solo quando in pagina non c'è. */
.k-piede__alto:not(:has(.k-piede__claim)){grid-template-areas:"frase parla"}
.k-piede__frase{grid-area:frase;margin:0;
  font-family:var(--p-display);font-weight:700;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(2rem,4.8vw,3.6rem);color:var(--p-ink);max-width:20ch}
/* «i colori» CAMBIANO COLORE: la frase fa quello che dice. Passano le sei
   tinte delle aree, in dodici secondi, e poi si richiude sulla prima.
   ⚠️⚠️ Sono le varianti «su navy» (la settima colonna di KREITA_AREE), non i
   colori pieni: su questo fondo i pieni stanno fra 2,55 e 3,71:1 e la frase
   diventerebbe illeggibile per un terzo del giro. Cosi' il peggiore e' 6,66.
   ⚠️ Si anima **solo il colore**, mai l'opacita': il testo resta leggibile in
   ogni istante, anche a chi non scorre e a chi legge con un motore. */
.k-piede__frase em{font-style:normal;color:var(--p-acc);
  animation:kColori 12s linear infinite}
@keyframes kColori{
  0%   {color:#FF8A6B}   /* Soluzioni per aziende  7,86 */
  16.6%{color:#F5A623}   /* Design & Branding      8,95 */
  33.3%{color:#2DD4BF}   /* Web                    9,74 */
  50%  {color:#EE7FC4}   /* Software               7,31 */
  66.6%{color:#7FA8E0}   /* Gadget e Stampa        7,41 */
  83.3%{color:#A78BFA}   /* Foto & Video           6,66 */
  100% {color:#FF8A6B}
}
@media (prefers-reduced-motion:reduce){
  .k-piede__frase em{animation:none}
}
/* ⚠️ 27/10/2026, utente: «allarga nella sezione così da diminuire altezza
   blocco». Chiusa in 46ch sotto la frase andava su TRE righe; ora corre su
   tutta la gabbia, sotto anche alla colonna della mail, e a 1440 ne fa una.
   `balance`: dove non ci sta in una, le due righe escono pari. */
.k-piede__claim{grid-area:claim;margin:0;
  font-size:15.5px;line-height:1.6;color:var(--p-soft);text-wrap:balance}
/* incolonnati e appoggiati a destra: affiancati, indirizzo e bottone si
   stringevano contro il bordo. */
.k-piede__parla{grid-area:parla;align-self:end;
  display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.k-piede__dic{font-family:var(--p-body);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p-fioco);margin:0 0 1rem}
/* ⚠️ IL FILETTO SOTTO LA MAIL GIRA COI SEI COLORI, come «i colori» della
   frase qui accanto (9/9/2026, «cambia colore»). Prima era fisso sul salmone
   `#FF8A6B`, che e' il rosso di Assistenza informatica schiarito: da solo, in
   un piede dove l'unico altro accento cambia tinta di continuo, si leggeva
   come un colore capitato li'. Stessa durata e stesso ordine della frase,
   quindi i due accenti sono sempre della stessa tinta.
   ⚠️ `--p-acc` NON si tocca: resta il ripiego prima che l'animazione parta,
   e serve ancora ai contorni di messa a fuoco. */
/* ⚠️ 21/9/2026, utente: «si può fare che si colora come riga sotto?». Al
   passaggio il testo era sempre salmone (`--p-acc`) mentre il filetto era
   magari lilla: due tinte diverse sulla stessa parola. Ora il giro dei colori
   muove anche `--p-filo`, e al passaggio il testo prende quella: stessa
   animazione, quindi stessa tinta del filetto in ogni istante.
   ⚠️ `@property` serve a far SFUMARE la variabile: senza, il browser la
   cambierebbe a scatti a meta' di ogni tratto. Il filetto continua ad animare
   il suo `border-bottom-color`, che sfuma dappertutto. */
@property --p-filo{syntax:'<color>';inherits:true;initial-value:#FF8A6B}
.k-piede__mail{display:inline-block;font-family:var(--p-display);font-weight:700;
  font-size:1.05rem;color:var(--p-ink) !important;letter-spacing:-.02em;
  border-bottom:2px solid var(--p-acc);padding-bottom:.15rem;
  animation:kColoriFilo 12s linear infinite}
@keyframes kColoriFilo{
  0%   {border-bottom-color:#FF8A6B;--p-filo:#FF8A6B}
  16.6%{border-bottom-color:#F5A623;--p-filo:#F5A623}
  33.3%{border-bottom-color:#2DD4BF;--p-filo:#2DD4BF}
  50%  {border-bottom-color:#EE7FC4;--p-filo:#EE7FC4}
  66.6%{border-bottom-color:#7FA8E0;--p-filo:#7FA8E0}
  83.3%{border-bottom-color:#A78BFA;--p-filo:#A78BFA}
  100% {border-bottom-color:#FF8A6B;--p-filo:#FF8A6B}
}
@media (prefers-reduced-motion:reduce){
  .k-piede__mail{animation:none}
}
/* ⚠️⚠️ `transition:none`: il tema da' a tutti i link una dissolvenza del colore
   di 0,22s, e verso un colore che cambia a ogni fotogramma il browser la
   calcola male. Misurato: al passaggio il testo passava per un bianco quasi
   trasparente (alfa 0,95 → 0,55 → 0,19) prima di prendere la tinta, e per
   un attimo la mail spariva. Senza dissolvenza passa subito al colore del
   filetto, che e' quello che si voleva. */
.k-piede__mail{transition:none !important}
.k-piede__mail:hover{color:var(--p-filo,var(--p-acc)) !important}

/* --- 2. le sei aree ---
   E' la stessa fila che chiude la copertina: stessa icona, stesso gesto. Il
   filetto c'e' sempre, spento; al passaggio si riempie da sinistra nel colore
   dell'area e il nome prende lo stesso colore. */
/* ⚠️⚠️ SETTE IN UNA RIGA SOLA, A COLONNE LARGHE QUANTO IL NOME (9/9/2026,
   «proviamo a mettere tutti in una riga»; prima, per mezz'ora, erano quattro e
   tre). Le voci sono sette da quando c'e' anche Prodotti.
   ⚠️⚠️ A COLONNE UGUALI NON CI STANNO, ed e' misurato: sette da 162px, mentre
   «Assistenza informatica» con la sua icona ne chiede 190. Non basta neanche
   rimpicciolire — a 12,8px ne chiede ancora 164 — quindi le colonne non sono
   piu' uguali ma larghe quanto il contenuto. In fila naturale le sette voci
   misurano 859px su 1200: avanzano 341px, che `space-between` distribuisce nei
   sei stacchi, ~57px l'uno. Il carattere resta 15,2px come nel resto del piede.
   ⚠️ Il filetto sotto ogni voce e' lungo quanto la voce, non uguale per tutte:
   e' la conseguenza delle colonne a misura. Il primo comincia sul bordo
   sinistro e l'ultimo finisce su quello destro, e i due bordi sono la cosa che
   si guarda.
   ⚠️ Sotto i 1100px la fila naturale non ci sta piu' (859px + gli stacchi
   minimi = 926) e si torna a tre colonne uguali, dove Prodotti prende la riga
   intera con `span`. */
/* ⚠️ `minmax(0,auto)` e non `auto` secco: e' la rete. Con `auto` una voce
   rinominata piu' lunga farebbe traboccare la fila fuori dallo schermo — e lo
   scorrimento laterale e' il difetto peggiore che questo sito possa avere.
   Cosi' invece, se un giorno non ci sta, il nome va a capo e basta. */
.k-piede__aree{display:grid;grid-template-columns:repeat(7,minmax(0,auto));justify-content:space-between;
  gap:.7rem;padding-top:2.2rem;border-top:1px solid var(--p-filo)}
/* icona a SINISTRA del nome, sulla stessa riga (scelta dell'8/8): il filetto
   resta sotto e attraversa tutte e due, quindi la voce si legge come una cosa
   sola invece che come icona + etichetta impilate. */
.k-piede__area{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:.55rem;padding:.2rem 0;min-width:0;
  /* ⚠️ 23/10/2026: la prima riga prende lo spazio che avanza, così il filetto
     sta sempre in fondo. Sul telefono «Stampa e gadget» va su due righe e il
     suo filetto finiva più in basso di quello di «Foto e video» accanto. */
  grid-template-rows:1fr auto}
.k-piede__area .ic{display:block;margin:0;color:var(--a);
  transition:transform .34s var(--p-molla)}
/* ⚠️ 22px e non 28: accanto a un testo da 0,95rem un'icona da 28 pesa piu' del
   nome e la colonna piu' stretta («Design & Branding») andrebbe a capo. */
.k-piede__area .ic svg{width:22px;height:22px;display:block}
.k-piede__area b{display:block;font-family:var(--p-display);font-weight:700;font-size:.95rem;
  letter-spacing:-.025em;color:var(--p-ink);transition:color .26s;min-width:0}
/* ⚠️ `display:block`: e' uno <span>, e su un elemento inline l'altezza non si
   applica — il filetto resterebbe alto zero e non comparirebbe. */
/* il filetto sta sotto a tutte e due le colonne */
.k-piede__filo{grid-column:1 / -1;display:block;position:relative;height:2px;
  background:var(--p-filo);margin-top:1rem;border-radius:2px;overflow:hidden}
.k-piede__filo::after{content:"";position:absolute;inset:0 auto 0 0;width:0;
  background:var(--a);transition:width .42s var(--p-molla)}
.k-piede__area:hover .ic{transform:translateY(-3px)}
.k-piede__area:hover b{color:var(--a)}
.k-piede__area:hover .k-piede__filo::after{width:100%}
.k-piede__area:focus-visible{outline:3px solid var(--a);outline-offset:6px;border-radius:4px}

/* --- 3. la fascia --- */
/* ⚠️ Niente filetto in cima: i sei delle aree stanno 44px sopra e se ne
   vedrebbero due, uno sotto l'altro. */
.k-piede__fascia{display:flex;align-items:center;gap:2rem 3.2rem;flex-wrap:wrap;
  padding:2.4rem 0 2.6rem}
/* ⚠️ `!important` sulla larghezza: senza, l'immagine usciva **1192px**, cioe'
   larga quanto il contenitore, e la fascia diventava alta 470px. */
.k-piede__marchio img{width:150px !important;max-width:150px;height:auto;display:block}
/* ⚠️ 27/10/2026: «Soluzioni» è diventato «I nostri prodotti», e con la
   dicitura larga fissa (5,6rem) i link della prima riga partivano 47px più a
   destra di quelli di «Azienda». Ora le due diciture stanno in una colonna
   sola, larga quanto la più lunga, e i link restano incolonnati qualunque sia il
   titolo scritto nel pannello. `display:contents` fa delle due righe due file
   della stessa griglia. */
.k-piede__link{flex:1 1 30rem;min-width:0;display:grid;
  grid-template-columns:max-content minmax(0,1fr);gap:.55rem 1.1rem;align-items:baseline}
.k-piede__riga{margin:0;display:contents;font-size:14.2px}
.k-piede__riga .k-piede__dic{margin:0}
/* ⚠️ 27/10/2026: SENZA «·» ANCHE SUI COMPUTER, non solo sul telefono (vedi la
   nota del 23/10 più sotto). Con sei prodotti la riga va a capo fra 800 e
   1180px, e la riga nuova cominciava con «· Plezuro». Il puntino è un pezzo a
   sé della fila e finisce appeso in testa o in coda a seconda di dove cade
   l'a capo: CSS non lo può sapere. Lo spazio fra i link è quello che facevano
   prima i due margini più il puntino, quindi dove la riga ci sta i link sono
   rimasti dov'erano. */
.k-piede__voci{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 1.4rem}
.k-piede__riga i{display:none}
.k-piede__social{display:flex;gap:.55rem;margin-left:auto}
.k-piede__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--p-filo);color:var(--p-soft);
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--p-molla)}
/* ⚠️⚠️ AL PASSAGGIO IL TONDO SI RIEMPIE DI BIANCO, NON DI `--p-acc`.
   Fino al 7/9 prendeva l'accento del piede, che è `#FF8A6B`, cioè il rosso di
   «Assistenza informatica» schiarito per leggersi sul navy. Su una sottolineatura
   ha un senso — è l'accento del piede — ma addosso a LinkedIn e Facebook no:
   segnalato dall'utente, «hover icone social non centrano nulla», ed è vero,
   quel colore non dice niente su quei due bottoni.
   Bianco pieno con l'icona navy: neutro, coerente col resto del piede, e il
   contrasto passa da 7,86:1 a 17:1. ⚠️ `--p-acc` NON si tocca: serve ancora
   alla frase animata, alla mail e al contorno di messa a fuoco. */
.k-piede__social a:hover{background:var(--p-ink);border-color:var(--p-ink);color:#131C2E;
  transform:translateY(-2px)}
.k-piede__social svg{width:17px;height:17px;display:block}

/* --- 4. la riga legale ---
   Gli indirizzi stanno qui e NON vanno tolti: sono l'unico punto in cui
   compaiono su TUTTE le pagine, ed e' il segnale che Google usa per le
   ricerche locali. */
.k-piede__legale{border-top:1px solid var(--p-filo);padding:1.25rem 0;
  font-size:13px;color:rgba(255,255,255,.55)}
.k-piede__legale .k-piede__in{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;
  align-items:center;justify-content:space-between}
.k-piede__legale b{color:rgba(255,255,255,.72);font-weight:600}
.k-piede__legale a{color:rgba(255,255,255,.55)}
.k-piede__legale a:hover{color:var(--p-ink)}
.k-piede__sedi{display:block;margin-bottom:.25rem}

/* --- 4-bis. la colonna delle associazioni ---
   Sta nella fascia in fondo, fra i due gruppi di link e i social.

   ⚠⚠ `align-self:flex-start` va messo ANCHE su `.k-piede__link`, non solo
   qui. La fascia allinea al centro, e due blocchi di altezza diversa centrati
   non hanno la prima riga alla stessa quota: misurato, «ASSOCIATI» stava 9px
   sopra «SOLUZIONI» e si vedeva. Portandoli tutti e due in cima le due
   diciture cadono sulla stessa riga (misurato: y 357 e 357).
   I 2px di margine sopra pareggiano lo scarto di `.k-piede__riga`, che allinea
   sulla linea di base.

   ⚠ L'altezza del logo e' 50px perche' il file di Confindustria e' 141x50:
   a 50 si vede alla sua misura vera, senza ingrandirlo. Piu' su si sgrana.
   Con un file piu' grande (o un SVG) si puo' alzare. */
.k-piede__link,.k-piede__assoc{align-self:flex-start}
/* ⚠⚠ `align-items:center` e non `flex-start`: il marchio di Confindustria e'
   un blocco CENTRATO dentro se stesso (l'aquila sta in mezzo, sopra le due
   righe di testo). Una dicitura allineata a sinistra sopra un blocco centrato
   sembra spostata anche quando i due riquadri partono dalla stessa colonna, ed
   e' esattamente cosa si vedeva. Scelta dall'utente fra cinque possibilita'. */
.k-piede__assoc{display:flex;flex-direction:column;align-items:center;
  gap:.55rem;flex:0 0 auto;margin-top:2px}
.k-piede__assoc .k-piede__dic{margin:0;text-align:center}
.k-piede__assoc-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.k-piede__assoc-a{display:block;line-height:0}
.k-piede__assoc-in img{height:50px;width:auto;display:block;opacity:.85;
  transition:opacity .2s ease}
.k-piede__assoc-a:hover img{opacity:1}
.k-piede__assoc-a:focus-visible{outline:2px solid var(--p-acc);outline-offset:4px;
  border-radius:2px}
.k-piede__assoc-n{font-size:13px;line-height:1.35;color:rgba(255,255,255,.62)}
/* ⚠ Sotto i 900px la colonna NON va a tutta larghezza: con `flex:1 1 100%`
   la coppia si centrava in mezzo allo schermo mentre «SOLUZIONI» e «AZIENDA»
   restavano a sinistra, e sul telefono si vedeva. Larga quanto il contenuto,
   va a capo da sola e si appoggia al bordo sinistro come tutto il resto,
   tenendosi dentro la scritta centrata sul logo. */
@media (max-width:600px){
  .k-piede__assoc-in img{height:44px}
}

/* --- schermi stretti ---
   ⚠️ Le griglie da sei vanno sciolte a 1100px, non a 640: piu' sotto la fascia
   dava colonne da ~120px e «info@kreita.com» andava a capo a meta' parola. */
@media (max-width:1100px){
  .k-piede__alto{grid-template-columns:1fr;grid-template-areas:"frase" "claim" "parla";
    align-items:start;gap:1.1rem}
  /* ⚠️ 23/10/2026: senza claim vinceva la regola `:not(:has(...))` qui sopra
     (pesa di più) e rimetteva «frase parla» su una riga: la griglia a una
     colonna se ne creava una seconda implicita, e mail e «Scriveteci» stavano
     sempre fra 240 e 365px — a 360 tagliati di 5px, a 320 di 45. */
  .k-piede__alto:not(:has(.k-piede__claim)){grid-template-areas:"frase" "parla"}
  .k-piede__parla{text-align:left;margin-top:.8rem;align-items:flex-start}
  .k-piede__claim{max-width:56ch}
}
@media (max-width:1100px){
  .k-piede__aree{grid-template-columns:repeat(3,1fr);justify-content:stretch;gap:1.6rem .7rem}
  /* 3+3 e Prodotti da solo sulla terza riga, largo quanto tutta la fila */
  .k-piede__area.-prodotti{grid-column:span 3}
}
@media (max-width:640px){
  .k-piede__alto{padding-top:2.8rem}
  .k-piede__aree{grid-template-columns:repeat(2,1fr)}
  /* 2+2+2 e Prodotti sulla quarta riga, a tutta larghezza */
  .k-piede__area.-prodotti{grid-column:span 2}
  .k-piede__fascia{gap:1.6rem}
  /* sul telefono la dicitura va sopra ai suoi link: niente griglia */
  .k-piede__link{display:block}
  .k-piede__riga{display:block;margin-bottom:1.3rem}
  .k-piede__riga:last-child{margin-bottom:0}
  .k-piede__riga .k-piede__dic{display:block;margin-bottom:.8rem}
  .k-piede__voci{column-gap:1.1rem;row-gap:.45rem}
  /* ⚠️ 23/10/2026: il «·» è una voce a sé della fila, e quando la fila va a
     capo restava appeso in fondo alla riga («Cloud aziendale ·»). Sul telefono
     le voci si separano con lo spazio. */
  .k-piede__riga i{display:none}
  .k-piede__social{margin-left:0}
  .k-piede__mail{font-size:1rem;max-width:100%;overflow-wrap:anywhere}
}

/* --- quello che resta di Ohio ---
   Il tema disegna ancora la freccia «torna su» e l'interruttore chiaro/scuro
   dentro `.page-container`: qui va solo tolto il filetto bianco pieno che si
   porta dietro. */
.k-piede + .page-container .holder{border-top-color:var(--p-filo) !important}