/* =====================================================================
   PHOTONICO · design system — ipotesi 2, accento C «nessun colore» (deciso da Dario il 21/09/2026)
   Si carica DOPO kom-ds.css e kom-sections.css: ridefinisce le variabili
   del design system KOM e le poche regole con l'identità KOM dentro.
   La struttura delle sezioni (griglie, ritmi, classi) resta quella del tema.
   Fonte dei valori: photonico/logo/MARCHIO.md e photonico/design-system.md.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&family=DM+Sans:wght@300;400;500;600;700&family=Libre+Franklin:ital,wght@0,300..700;1,300..700&display=swap');

/* ---------- 1. Le variabili: la pelle ---------- */
:root{
  /* colori: la pagina è neutra, il colore sta nelle foto e nel marchio */
  --ink:#0c0c0d;            /* nero fotonico: testo, fondi scuri, bottone primario */
  --read-ink:#17171a;
  --paper:#ffffff;
  --soft:#f4f3f0;           /* la banda chiara: grigio caldo, non avorio */
  --rule:#e6e5e1;
  --mute:#63625f;           /* testo secondario: più scuro del KOM per leggere sulle foto e sul bianco */
  --yellow:#ffffff;         /* accento C: NESSUN colore pieno. Dove KOM usa il giallo, qui c'è il bianco (su scuro)
                               o l'inversione nero/bianco (su chiaro). Il giallo del fotone vive solo nel marchio: --ph-giallo */
  --magenta:#6E3A8E;        /* «viola», primo stop del gradiente: SOLO etichette e numeri piccoli, il filo del marchio */
  --teal:#6E3A8E;           /* le rotazioni di colore KOM (teal/azure) collassano sul viola: niente arcobaleno */
  --azure:#6E3A8E;
  --ph-viola:#6E3A8E;
  --ph-giallo:#FBC61C;
  --ph-gradiente:linear-gradient(90deg,#6E3A8E 0%,#A31C7E 14%,#DC1A5B 30%,#EF4438 48%,#F7791F 66%,#FBA81C 84%,#F0CE3F 100%);

  /* caratteri: DM Sans per titoli, etichette e numeri (al posto di Jost, scelta di Dario del 21/09 sera);
     Libre Franklin per il testo corrente */
  --display:'DM Sans','Libre Franklin',system-ui,sans-serif;
  --sans:'DM Sans','Libre Franklin',system-ui,sans-serif;
  --mono:'DM Sans','Libre Franklin',system-ui,sans-serif;
  --read:'Libre Franklin',system-ui,sans-serif;
  --adam:'DM Sans',sans-serif;

  /* pesi: geometrica leggera. Sotto il 500 è moda, sopra è un marchio e basta */
  --fw-display:500;
  --fw-titolo:500;
  --fw-etichetta:500;
  --fw-forte:600;
  --fw-testo:400;
  --fw-sottile:300;

  /* misure: erano tarate su Jost, che rende più piccolo del Franklin a parità di corpo.
     ⚠️ DM Sans rende più LARGO: se un titolo va a capo dove non deve, si scende di un gradino qui */
  --fs-meta:12.5px;
  --fs-link:14px;
  --fs-testo:16.5px;
  --fs-lead:20px;
  --fs-titolo-s:25px;
  --fs-titolo:36px;
  --fs-titolo-l:50px;
  --fs-display:clamp(46px,6.6vw,96px);
}

/* ---------- 2. Testo e titoli ---------- */
body{ font-family:var(--read); color:var(--ink); }
h1,h2,h3,h4{ font-family:var(--display); font-weight:var(--fw-titolo); letter-spacing:-0.008em; line-height:1.08; }
.sec-title{ font-weight:500; letter-spacing:-0.012em; }
.hero-foto h1{ font-weight:500; letter-spacing:-0.018em; line-height:1.02; }
.hero-foto h1 .hl{ color:var(--yellow); }
.why p.big{ font-weight:400; letter-spacing:0; line-height:1.38; }
.split-body h2, .leadcols .lead-h, .porta h3, .effigie blockquote{ font-weight:500; letter-spacing:-0.012em; }

/* etichette: DM Sans 500 maiuscolo, aria +.12em */
.sec-intro, .kicker, .ch, .leadcols .col .ch, .leadcols .wp-block-column .ch, .moment .mn, .porta .pn,
.feat .n, .effigie .tag, .fullbleed .cap, .why .quote .a, .split-body .fase-sol .sl, .hero-foto .hf-meta,
.sec-form-hs .sec-intro{ font-family:var(--display); font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.sec-intro{ color:var(--mute); }
.sec-num{ font-family:var(--display); font-weight:500; letter-spacing:.12em; color:var(--ph-viola); }
.leadcols .col .ch, .leadcols .wp-block-column .ch{ color:var(--ph-viola); }
.feat .n{ color:var(--ph-viola); font-size:var(--fs-meta); }
.feat.is-dark .n{ color:var(--paper); }

/* i numeri grandi: DM Sans 300, viola */
.biglist .num{ font-weight:300; color:var(--ph-viola); letter-spacing:.02em; }
.moment::before, .benefit::before{ font-weight:300; color:var(--ph-viola); letter-spacing:.02em; }

/* l'evidenziatore: inversione. Nero su chiaro, bianco su scuro. Angoli precisi (l'ovale disegnato a mano è KOM) */
.hl-mark{ background:var(--ink); color:var(--paper); border-radius:3px; padding:.02em .22em; margin:0 -.04em; }
.has-dark .hl-mark, .hero-foto .hl-mark, .ph-hero .hl-mark, .sec-form-hs .hl-mark{ background:var(--paper); color:var(--ink); }
.ph-hero h1 .hl-mark{ border-radius:3px; }

/* ---------- 3. Bottoni ---------- */
.btn, .btn .wp-block-button__link{ font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.btn .wp-block-button__link{ border-radius:4px; padding:15px 22px; }
.btn-primary .wp-block-button__link{ background:var(--ink); color:var(--paper); }
.btn-primary .wp-block-button__link:hover{ background:#000; }
.btn-yellow .wp-block-button__link{ background:var(--paper); color:var(--ink); }          /* su scuro: il bottone pieno è bianco */
.btn-yellow .wp-block-button__link:hover{ background:#e9e7e1; }
.btn-ghost .wp-block-button__link{ background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.45); }
.btn-ghost .wp-block-button__link:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-outline .wp-block-button__link{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-outline .wp-block-button__link:hover{ background:var(--ink); color:var(--paper); }

/* ---------- 4. Componenti: via i colori a rotazione, nessun colore pieno ---------- */
.feat::before{ background:var(--ph-gradiente); }              /* la riga in testa alle tessere: il gradiente del marchio, continuo */
.feat:hover{ background:var(--soft); }
.benefit{ --b-accent:var(--ink); border-top-width:2px; }
.benefit:nth-child(n){ --b-accent:var(--ink); }
.benefit:hover h3{ color:var(--ph-viola); }
.porta{ --pc:var(--ink); --pc-ink:var(--ink); }
.porte > .porta:nth-child(n){ --pc:var(--ink); --pc-ink:var(--ink); }
.moment{ --mom-accent:var(--ink); }
.moment:nth-child(n){ --mom-accent:var(--ink); }
.moment p, .feat p, .benefit p, .porta > p, .biglist p, .faq .ans, .split-body p, .leadcols .col p, .leadcols .wp-block-column p{ color:var(--mute); }
.why .quote{ border-left:2px solid var(--ph-viola); }
.why .quote .q{ font-weight:300; font-style:italic; }
.faq summary{ font-family:var(--display); font-weight:500; }
.faq summary .ic, .split-body .acc summary .ic{ color:var(--ph-viola); }
.effigie .tag{ color:var(--paper); }
.effigie blockquote::before{ color:var(--paper); }
.effigie blockquote{ font-weight:400; }
.effigie .author{ font-weight:300; }

/* fondi scuri: nero fotonico, testo caldo */
.has-dark, .hero-foto, .sec-form-hs{ background:#0c0c0d; }
.has-dark, .has-dark p, .has-dark li{ color:#d9d7d2; }
.has-dark .btn-primary .wp-block-button__link{ background:var(--paper); color:var(--ink); }
.has-dark .em{ color:var(--paper); }
.sec-form-hs .sec-intro{ color:#b7b5af; }
.sec-form-hs .fhs-punti li::before{ color:var(--paper); }
.sec-form-hs h2 .it{ font-weight:300; }
.hero-foto .hf-meta b{ color:#fff; font-weight:500; }

/* la fascia chiara e le righe */
.has-soft{ background:var(--soft); }
.feat-grid, .porte{ background:var(--rule); border-color:var(--rule); }

/* ---------- 5. Immagini ---------- */
.wp-block-image img{ border-radius:0; }                          /* le foto non hanno angoli tondi né veli */
.ph-reel .kicker, .fullbleed .cap{ font-family:var(--display); font-weight:400; letter-spacing:.06em; font-size:12.5px; }

/* ---------- 6. Il marchio nella pagina (dalla scheda, valori non ridisegnati; dal 13 ott il peso è 400 ovunque e c'è il payoff: §15) ---------- */
.photonico{ display:inline-block; font-family:'Jost',sans-serif; font-weight:300; letter-spacing:.16em; line-height:1.14; margin-right:-.16em;
  background-image:var(--ph-gradiente); -webkit-background-clip:text; background-clip:text; color:transparent; }
.photonico-i{ position:relative; }
.photonico-fotone{ position:absolute; left:.116em; top:.340em; width:.125em; height:.125em; margin-left:-.0625em; border-radius:50%; background:var(--ph-giallo); }
.photonico--servizio{ font-weight:400; letter-spacing:.13em; margin-right:-.13em; }
.photonico--servizio .photonico-fotone{ left:.130em; top:.357em; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .photonico{ background-image:none; color:#fff; } }
/* la versione a un colore per i fondi scuri (scheda §4): tutto bianco, fotone compreso, stessa misura e stesso posto */
.photonico--bianco{ background-image:none; color:#fff; }
.photonico--bianco .photonico-fotone{ background:#fff; }
/* il colore che scorre (scheda §3, «Il colore può scorrere», 3 ott): i sette stop a specchio su una tela larga
   due volte la parola, un giro in 6 s; da fermo è il gradiente della scheda; il fotone resta fermo e giallo */
.photonico--scorre{
  background-image:linear-gradient(90deg,#6E3A8E 0%,#A31C7E 7%,#DC1A5B 15%,#EF4438 24%,#F7791F 33%,#FBA81C 42%,#F0CE3F 50%,#FBA81C 58%,#F7791F 67%,#EF4438 76%,#DC1A5B 85%,#A31C7E 93%,#6E3A8E 100%);
  background-size:200% 100%; background-repeat:repeat-x; background-position:0% 50%;
}
@media (prefers-reduced-motion:no-preference){ .photonico--scorre{ animation:photonico-scorre 6s linear infinite; } }
@keyframes photonico-scorre{ to{ background-position:200% 50%; } }

/* ---------- 7. La cornice: testata e piede ---------- */
/* La struttura è quella dei pattern KOM (header.site, footer.kf): qui cambia solo la pelle.
   I selettori portano anche la classe del tema (header.site.ph-head, footer.kf.ph-foot) perché
   kom-ds.css tinge la testata KOM di blu scuro con regole a specificità alta: senza, vincono loro. */
header.site.ph-head{ background:#0c0c0d; border-bottom:1px solid rgba(255,255,255,.10); }
header.site.ph-head .nav{ padding:16px 0; }
header.site.ph-head .ph-marchio{ justify-self:start; text-decoration:none; font-size:32px; line-height:1; }  /* 32 px di corpo (Dario, 3 ott: 20 → 26 → «ancora più grande») = parola alta 25 px: sopra i 22, quindi peso pieno, Jost 300 +.16em (scheda §5) */
header.site.ph-head .nav nav{ gap:20px; }
header.site.ph-head .nav nav > a{ font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#e9e7e2; }
header.site.ph-head .nav nav > a:hover{ color:#fff; }
header.site.ph-head .nav nav > a::after{ background:#fff; }
/* il bottone in testata: il tema lo nasconde (kom-ds.css riga 1391, la CTA di KOM era stata tolta
   per far posto allo scambio di lingua). Qui serve, ed è l'unica azione della pagina */
header.site.ph-head .right .btn-primary{ display:inline-block; white-space:nowrap; padding:12px 18px; font-size:12px; background:var(--paper); color:var(--ink); }
header.site.ph-head .btn-primary:hover{ background:#e9e7e1; }
header.site.ph-head .nav-toggle span{ background:#e9e7e2; }
/* 1360 e non 1180 (3 ott, marchio a 32 px): con le voci a 13 px la fila non sta fra marchio e bottoni sotto i ~1345
   (misurato: a 1321 la pagina scorreva di 23 px in orizzontale) */
@media (max-width:1360px){
  header.site.ph-head .nav nav{ gap:14px; }
  header.site.ph-head .nav nav > a{ font-size:12px; letter-spacing:.04em; }
}
/* Il cassetto (hamburger) parte a 1340 (era 1260 fino al 13 ott, vedi §13) e non a 980 come nel tema: le voci di Photonico
   sono otto contro le cinque di KOM, e dal 3 ott il marchio in testata è a 32 px (era 20):
   misurato, sotto i ~1250 px la fila entrava nel marchio e nei bottoni.
   Le regole del cassetto sono riscritte qui perché quelle del tema vivono dentro il suo
   @media 980 e sotto i 1340 non ci sarebbero. */
@media (max-width:1340px){
  header.site.ph-head .nav{ display:flex; justify-content:space-between; align-items:center; position:relative; }
  header.site.ph-head .nav-toggle{ display:inline-flex; }
  header.site.ph-head .nav nav{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 1px);
    flex-direction:column; align-items:stretch; gap:0; padding:4px 0; z-index:80;
    background:#0c0c0d; border-top:1px solid rgba(255,255,255,.10); border-bottom:2px solid var(--paper);
    box-shadow:0 26px 44px rgba(0,0,0,.45);
  }
  header.site.ph-head.nav-open .nav nav{ display:flex; }
  header.site.ph-head .nav nav > a{ width:100%; padding:15px 6px; font-size:12px; border-bottom:1px solid rgba(255,255,255,.10); }
  header.site.ph-head .nav nav > a:last-child{ border-bottom:0; }
  /* il bottone resta accanto all'hamburger finché c'è spazio (il tema lo toglie sotto i 980) */
  header.site.ph-head .nav .right .btn-primary{ display:inline-block; padding:10px 14px; font-size:11px; }
}
/* 590 e non 520 (3 ott, marchio a 32 px): a 561 px fra il marchio e Prova restavano 7 px */
@media (max-width:590px){ header.site.ph-head .nav .right .btn{ display:none; } }
/* sotto i 400 px il marchio da 32 tocca l'hamburger (a 320: 0 px): 28 px, che fa la parola alta 21,8 px,
   quindi peso di servizio (scheda §5) */
@media (max-width:400px){
  header.site.ph-head .ph-marchio{ font-size:28px; }
  header.site.ph-head .ph-marchio .photonico{ font-weight:400; letter-spacing:.13em; margin-right:-.13em; }
  header.site.ph-head .ph-marchio .photonico-fotone{ left:.130em; top:.357em; }
}

/* 3 ott 2026 (Dario): i due bottoni della testata. «Conformità» esce dal menu e diventa il bottone
   «AI Act» in rosso, a sinistra di «Prova su un tuo prodotto», che passa al viola. È un'eccezione
   voluta al principio 2 («nessun colore pieno»), e solo qui. Il rosso è lo stop al 48% del gradiente
   del marchio (#EF4438), il viola il primo. Variante A di /prove-testata/: rosso velato con un punto
   che pulsa, così si vede ma il bottone forte resta Prova. Al passaggio del mouse diventa rosso pieno. */
header.site.ph-head{ --ph-rosso:#EF4438; }
header.site.ph-head .right{ gap:10px; }
header.site.ph-head .right .btn-primary{ background:var(--ph-viola); color:#fff; }
header.site.ph-head .right .btn-primary:hover{ background:#8448A8; color:#fff; }
header.site.ph-head .right .ph-btn-aiact{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:11px 15px; font-family:var(--display); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:#FF9F95; background:rgba(239,68,56,.13); border:1px solid rgba(239,68,56,.8); border-radius:4px; }
header.site.ph-head .right .ph-btn-aiact:hover{ background:var(--ph-rosso); border-color:var(--ph-rosso); color:#fff; }
header.site.ph-head .ph-punto{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--ph-rosso); animation:ph-punto 2.4s ease-out infinite; }
header.site.ph-head .ph-btn-aiact:hover .ph-punto{ background:#fff; }
@keyframes ph-punto{ 0%{ box-shadow:0 0 0 0 rgba(239,68,56,.7); } 70%,100%{ box-shadow:0 0 0 7px rgba(239,68,56,0); } }
@media (prefers-reduced-motion:reduce){ header.site.ph-head .ph-punto{ animation:none; } }
/* la stessa pagina come voce del cassetto: sopra i 1340 px non serve, c'è il bottone */
header.site.ph-head .nav nav > a.ph-nav-aiact{ display:none; }
@media (max-width:1340px){
  header.site.ph-head .nav nav > a.ph-nav-aiact{ display:flex; align-items:center; gap:10px; color:#FF9F95; }
  header.site.ph-head .nav .right .ph-btn-aiact{ padding:9px 12px; font-size:11px; }
}
/* sotto i 680 px i due bottoni non stanno accanto al marchio (misurato: a 521 px la testata sborda):
   «AI Act» resta solo nel cassetto */
@media (max-width:680px){ header.site.ph-head .nav .right .ph-btn-aiact{ display:none; } }

/* il piede: stesse griglie del KOM, nero fotonico; il magenta diventa viola e la fascia
   colorata in testa sparisce (principio 2: nessun colore pieno) */
footer.kf.ph-foot{ --kf-bg:#0c0c0d; --kf-accent:var(--ph-viola); border-top:0; }
/* il marchio piccolo del piede è a un colore, tutto bianco (Dario, 3 ott): quello a colori è la banda sopra (§9).
   26 px di corpo come in testata, quindi peso di servizio. */
footer.kf.ph-foot .ph-marchio-foot{ display:inline-block; text-decoration:none; font-size:26px; line-height:1; }
footer.kf.ph-foot .kf-col h4{ font-family:var(--display); font-weight:500; }
footer.kf.ph-foot .kf-col a, footer.kf.ph-foot .kf-brand .desc{ font-family:var(--read); }
footer.kf.ph-foot .kf-brand .meta{ font-family:var(--display); }
footer.kf.ph-foot .kf-legal *{ font-family:var(--display); }
footer.kf.ph-foot .kf-legal .lg-r a:hover{ color:var(--paper); }
@media (max-width:768px){
  /* il tema, sotto i 768 px, mette il marchio KOM come sfondo del primo link della testata
     («logo compatto su mobile», kom-ds.css): sul marchio Photonico va tolto */
  header.site.ph-head .nav > a.ph-marchio{ width:auto; height:auto; background:none; }
}

/* ---------- 8. (tolta il 3 ott 2026) ----------
   Qui stava la PROVA del 21/09 sera, il marchio grottesco (Archivo 700, gradiente senza viola, punto
   quadro). Dario il 3 ott: «riporta tutto il sito al marchio della scheda». Il marchio è quello del §6.
   La prova resta in photonico-ds.css.bak-2026-10-03-prima-marchio-scheda. Le pagine non devono
   ripetere le regole di .photonico nel loro stile: verrebbero dopo questo file e vincerebbero. */

/* ---------- 9. La banda del marchio nel piede (3 ott 2026, pomeriggio, chiesta da Dario) ----------
   Come la banda «Marketing & AI for the Brave» di kom.online (.kf-brave in kom-ds.css, da cui
   prende fondo nero, griglia centrata e riga piccola sotto): la parola larga quanto il piede e il
   gradiente che scorre. Qui la parola è il MARCHIO DELLA SCHEDA (logo/MARCHIO.md: Jost 300, +.16em,
   sette stop, fotone giallo tondo): i valori sono riscritti per esteso, così la banda non dipende
   da nessuna regola di pagina.
   Il gradiente è quello della scheda messo a specchio (viola → giallo → viola) su una tela larga
   due volte la parola: da fermo la parola mostra esattamente il marchio della scheda; scorrendo
   di una tela intera (200%) il giro si chiude senza salto. Con «riduci le animazioni» resta fermo.
   Dal 3 ott la scheda lo prevede (§3, «Il colore può scorrere»): la stessa cosa la fa .photonico--scorre (§6),
   che usa la testata; la banda tiene le sue regole per esteso.
   ⚠️ Si muove solo background-position: nessuna transform sulla parola né sui suoi antenati
   (scheda, trappola 2). La velocità è --ph-brave-giro: un giro completo dei colori.
   Misure (Jost 300, +.16em): la casella della parola è larga 5,555 em, l'inchiostro va da
   0,084 em (il fianco della P) a 5,356 em: 5,272 em, come l'SVG della scheda (5272 × 790).
   I due margini negativi tolgono i fianchi vuoti, così l'asta della P e l'ultima o cadono a
   filo delle colonne del piede; 18.96cqw porta l'inchiostro a tutta banda e il tetto di
   221 px lo ferma a 1168 px, la larghezza del piede.
   ------------------------------------------------------------------------------------ */
footer.kf.ph-foot .ph-brave{ --ph-brave-giro:6s; padding-left:56px; padding-right:56px; }
footer.kf.ph-foot .ph-brave .ph-brave__marchio{ margin:0; line-height:1; font-size:min(18.96cqw,221px); white-space:nowrap; }
footer.kf.ph-foot .ph-brave .photonico{
  font-family:'Jost',sans-serif; font-weight:300; letter-spacing:.16em; margin-left:-.084em; margin-right:-.199em; line-height:1.14;
  background-image:linear-gradient(90deg,#6E3A8E 0%,#A31C7E 7%,#DC1A5B 15%,#EF4438 24%,#F7791F 33%,#FBA81C 42%,#F0CE3F 50%,#FBA81C 58%,#F7791F 67%,#EF4438 76%,#DC1A5B 85%,#A31C7E 93%,#6E3A8E 100%);
  background-size:200% 100%; background-repeat:repeat-x; background-position:0% 50%;
}
footer.kf.ph-foot .ph-brave .photonico-fotone{
  left:.116em; top:.340em; width:.125em; height:.125em; margin-left:-.0625em; border-radius:50%; background:var(--ph-giallo);
}
@media (prefers-reduced-motion:no-preference){
  footer.kf.ph-foot .ph-brave .photonico{ animation:phMarchioScorre var(--ph-brave-giro) linear infinite; }
}
@keyframes phMarchioScorre{ to{ background-position:200% 50%; } }
/* l'aria sotto la parola: almeno mezza altezza del marchio prima della riga piccola (scheda §7) */
footer.kf.ph-foot .ph-brave .kf-brave__sub{ margin-top:max(clamp(22px,2.6vw,36px), min(3.5cqw,41px)); }
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  footer.kf.ph-foot .ph-brave .photonico{ background-image:none; color:#fff; animation:none; }
}
@media (max-width:781px){ footer.kf.ph-foot .ph-brave{ padding-left:24px; padding-right:24px; } }

/* ------------------------------------------------------------------------------------
   §10 · LA RIGA MULTICOLORE IN TESTA ALLE CARD (8 ottobre 2026)
   Dario, guardando le sei carte di «Per esteso» nella proposta di Come funziona: «mi piace
   moltissimo quella righettina multicolor che hai fatto sulle card... portala anche nel sito,
   dove c'è possibilità». È la riga di quella proposta (photonico/proposta-come-funziona-
   2026-10-08.html, .carta:before): sette colori, dal viola del marchio al giallo del fotone,
   poi verde e blu. NON è --ph-gradiente (il marchio, che si ferma al giallo): quello resta
   al marchio. Supera, per decisione di Dario, il «niente arcobaleno» del 21 settembre.
   Dove: in testa a ogni card del design system, sempre visibile (prima .feat, .porta e
   .moment la mostravano solo al passaggio del mouse, .benefit aveva il filetto nero), e
   nelle carte dei passi (.ph-carta, photonico-pagine.css), che avevano il gradiente del
   marchio: una riga sola in tutto il sito. 3 px, come la proposta.
   Le due enfasi col filetto nero più spesso (la prima card degli argomenti in home, le prime
   due dell'AI Act: regole nella pagina e in photonico-pagine.css) tornano a 1 px: sotto la
   riga, il nero diventava una seconda riga. «body» davanti serve a vincere sugli stili
   scritti nelle pagine, che arrivano dopo questo file.
   ------------------------------------------------------------------------------------ */
:root{ --ph-riga:linear-gradient(90deg,#6E3A8E 0%,#C2318A 17%,#E8553A 33%,#F39A2B 50%,#FBC61C 67%,#3FA36B 83%,#2F7FC1 100%); }
.feat::before{ background:var(--ph-riga); transform:none; }
.feat.is-dark::before{ display:block; }
.porta::before{ background:var(--ph-riga); transform:none; height:3px; }
.moment::after{ background:var(--ph-riga); width:100%; }
.benefit{ border-top:1px solid var(--rule); }
.benefit::after{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--ph-riga); }
body .ph-argomenti .benefit:first-child,
body .ph-conforme .benefits .benefit:nth-child(-n+2){ border-top:1px solid var(--rule); }
body .ph-carta::before{ background:var(--ph-riga); }

/* ------------------------------------------------------------------------------------
   §11 · LA RIGA MULTICOLORE OLTRE LE CARD (9 ottobre 2026)
   Dario, sulla prova dell'apertura (photonico/prove-apertura-evidenza/): «molto bello il
   multicolor… pubblicare il multicolor assolutamente», poi le sue scelte: titolo a lettere
   multicolori, enfasi «riga multicolore», bottoni con la cornice, AI Act col punto
   multicolore, logo con la riga «senza fotone» («il puntino giallo non c'entra niente»).
   - Il marchio prende la riga del §10 al posto del viola → giallo. Il fotone non c'è più: la
     i torna col suo punto (lo scrivono testata, piede e lo slider della home). Quando scorre,
     la riga va A SPECCHIO su una tela doppia: con la riga semplice, a ogni giro il blu della
     fine tocca il viola dell'inizio e si vede lo stacco.
   - Le parole chiave: <strong class="ph-k">, la riga di 2 px sotto, peso 500, colore pieno.
   - L'evidenziatore dei titoli su nero: le lettere nella riga che scorre. Su chiaro resta
     l'inversione nera (il giallo sul bianco non si legge, come per il marchio).
   - I bottoni pieni su nero (Prova su un tuo prodotto, in testata e nelle pagine): neri,
     cornice di 2 px nella riga che scorre. Supera il viola della testata (eccezione del 3 ott).
   - AI Act in testata: bordo bianco e il punto nei colori della riga che gira, al posto del rosso.
   «body» e la classe ripetuta servono a vincere sugli stili scritti nelle pagine; sui bottoni
   anche «.wp-block-button», per vincere su kom-gutenberg.css (.wp-block-button.btn-yellow).
   ------------------------------------------------------------------------------------ */
:root{ --ph-riga-scorre:linear-gradient(90deg,#6E3A8E 0%,#C2318A 8.5%,#E8553A 16.5%,#F39A2B 25%,#FBC61C 33.5%,#3FA36B 41.5%,#2F7FC1 50%,#3FA36B 58.5%,#FBC61C 66.5%,#F39A2B 75%,#E8553A 83.5%,#C2318A 91.5%,#6E3A8E 100%); }
@keyframes ph-riga-scorre{ from{ background-position:0% 50%; } to{ background-position:200% 50%; } }
@keyframes ph-cornice-scorre{ from{ background-position:0 0, 0% 50%; } to{ background-position:0 0, 200% 50%; } }
@keyframes ph-punto-gira{ to{ transform:rotate(360deg); } }

/* il marchio */
.photonico{ background-image:var(--ph-riga); }
.photonico--scorre,
footer.kf.ph-foot .ph-brave .photonico{ background-image:var(--ph-riga-scorre); }
.photonico--bianco{ background-image:none; }

/* le parole chiave */
.ph-k{ font-weight:500; color:var(--ink); padding-bottom:.12em; background-image:var(--ph-riga); background-repeat:no-repeat; background-size:100% 2px; background-position:0 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
:is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .ph-k{ color:#fff; }

/* l'evidenziatore dei titoli su nero */
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) :is(h1,h2,h3) .hl-mark.hl-mark{
  background:var(--ph-riga-scorre); background-size:200% 100%; background-repeat:repeat-x; -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0; margin:0; border-radius:0; }   /* senza il riquadro, lo spazio interno diventerebbe un rientro */
@media (prefers-reduced-motion:no-preference){
  body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) :is(h1,h2,h3) .hl-mark.hl-mark{ animation:ph-riga-scorre 8s linear infinite; }
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) :is(h1,h2,h3) .hl-mark.hl-mark{ background:#fff; color:var(--ink); }
}

/* i bottoni pieni su nero (il «giallo» e il primario, che su nero è bianco): neri con la cornice che scorre */
body header.site.ph-head .right .btn-primary,
body .wp-block-button.btn-yellow .wp-block-button__link,
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.btn-primary .wp-block-button__link{ color:#fff; border:2px solid transparent;
  background:linear-gradient(#0c0c0d,#0c0c0d) padding-box, var(--ph-riga-scorre) border-box; background-size:100% 100%, 200% 100%; }
body header.site.ph-head .right .btn-primary:hover,
body .wp-block-button.btn-yellow .wp-block-button__link:hover,
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.btn-primary .wp-block-button__link:hover{ color:#fff; border-color:transparent;
  background:linear-gradient(#26262a,#26262a) padding-box, var(--ph-riga-scorre) border-box; background-size:100% 100%, 200% 100%; }
@media (prefers-reduced-motion:no-preference){
  body header.site.ph-head .right .btn-primary,
  body .wp-block-button.btn-yellow .wp-block-button__link,
  body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.btn-primary .wp-block-button__link{ animation:ph-cornice-scorre 8s linear infinite; }
}

/* AI Act in testata: bordo bianco, il punto nei colori della riga che gira */
body header.site.ph-head .right .ph-btn-aiact{ color:#f4f3f0; background:transparent; border-color:rgba(255,255,255,.4); }
body header.site.ph-head .right .ph-btn-aiact:hover{ background:#fff; color:#0c0c0d; border-color:#fff; }
body header.site.ph-head .nav nav > a.ph-nav-aiact{ color:inherit; }
body header.site.ph-head .ph-punto{ width:9px; height:9px; box-shadow:none; animation:none;
  background:conic-gradient(#6E3A8E,#C2318A,#E8553A,#F39A2B,#FBC61C,#3FA36B,#2F7FC1,#6E3A8E); }
@media (prefers-reduced-motion:no-preference){ body header.site.ph-head .ph-punto{ animation:ph-punto-gira 3s linear infinite; } }

/* 9 ottobre 2026 sera (Dario): il bottone si chiama «Cosa rischi?» ed è rosso pieno («rosso o qualcosa che si veda,
   differenziante rispetto agli altri»). Torna il rosso del 3 ottobre (--ph-rosso, #EF4438), pieno, col punto bianco che
   pulsa; supera il bordo bianco e il punto multicolore qui sopra. Nel cassetto la voce è rosa-rossa col punto rosso. */
body header.site.ph-head .right .ph-btn-aiact{ color:#fff; background:var(--ph-rosso); border-color:var(--ph-rosso); }
body header.site.ph-head .right .ph-btn-aiact:hover{ color:#fff; background:#D2301F; border-color:#D2301F; }
body header.site.ph-head .right .ph-btn-aiact .ph-punto{ width:8px; height:8px; background:#fff; animation:ph-punto-bianco 2.4s ease-out infinite; }
@keyframes ph-punto-bianco{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.75); } 70%,100%{ box-shadow:0 0 0 7px rgba(255,255,255,0); } }
body header.site.ph-head .nav nav > a.ph-nav-aiact{ color:#FF9F95; }
body header.site.ph-head .nav nav > a.ph-nav-aiact .ph-punto{ width:8px; height:8px; background:var(--ph-rosso); animation:ph-punto 2.4s ease-out infinite; }
@media (prefers-reduced-motion:reduce){ body header.site.ph-head .right .ph-btn-aiact .ph-punto, body header.site.ph-head .nav nav > a.ph-nav-aiact .ph-punto{ animation:none; } }
/* «Cosa rischi?» è 50 px più largo di «AI Act»: misurato in Chrome headless, fra 1361 e 1399 px la pagina scorreva di lato
   e a 681 px il bottone toccava il marchio. La testata compatta va fino a 1420 px (era 1360; solo sopra il cassetto, che ha
   le sue misure) e il bottone resta solo nel cassetto sotto i 730 px (era 680).
   13 ott: «AI Act: cosa rischi?» è altri 48 px: la testata compatta vale a ogni larghezza sopra il cassetto, il bottone è
   sempre a 11 px e sparisce sotto i 780 px (§13). */
@media (min-width:1341px){
  header.site.ph-head .nav nav{ gap:14px; }
  header.site.ph-head .nav nav > a{ font-size:12px; letter-spacing:.04em; }
}
body header.site.ph-head .right .ph-btn-aiact{ padding:9px 12px; font-size:11px; letter-spacing:.1em; }
@media (max-width:780px){ header.site.ph-head .nav .right .ph-btn-aiact{ display:none; } }

/* ------------------------------------------------------------------------------------
   §12 · IL «GENERA!» MAGICO (9 ottobre 2026)
   Dario: «il pulsante genera… un multicolore un po' più grosso, un po' più bottonoso, non
   dico pieno… il pulsante magico che crea le magie». I tre bottoni Genera delle animazioni
   (home .ph-gen-btn, Come funziona .ph-mk-btn, Regia .ph-rgx-btn): pillola, cornice di 3 px
   nella riga che scorre, alone nei colori della riga, e al clic dodici stelline (.ph-magia,
   scritte dal generatore dentro il bottone). Il clic è diverso nei tre: in home cade al 19,5%
   del giro (--g); in Come funziona lo script mette .scintilla; in Regia la carta «gira» (--t)
   e il bottone si accende fra il 16 e il 22%. Niente !important sulle animazioni:
   «.ph-genx.riparti *» le spegne per farle ripartire col cursore, e «riduci il movimento»
   le ferma dalle pagine.
   ------------------------------------------------------------------------------------ */
@keyframes ph-genera-cornice{ from{ background-position:0 0, 0% 50%; } to{ background-position:0 0, 200% 50%; } }
@keyframes ph-genera-premi{
  0%,18%{ transform:none; box-shadow:-14px 0 26px -6px rgba(194,49,138,.55), 14px 0 26px -6px rgba(47,127,193,.55), 0 10px 30px -8px rgba(251,198,28,.45); }
  19.5%{ transform:scale(.92); box-shadow:-24px 0 46px 0 rgba(194,49,138,.95), 24px 0 46px 0 rgba(47,127,193,.95), 0 14px 52px 4px rgba(251,198,28,.85); }
  24%{ transform:scale(1.04); box-shadow:-30px 0 60px 4px rgba(194,49,138,.7), 30px 0 60px 4px rgba(47,127,193,.7), 0 16px 64px 8px rgba(251,198,28,.6); }
  34%,100%{ transform:none; box-shadow:-14px 0 26px -6px rgba(194,49,138,.55), 14px 0 26px -6px rgba(47,127,193,.55), 0 10px 30px -8px rgba(251,198,28,.45); } }
@keyframes ph-genera-premi-rgx{
  0%,15%{ transform:none; box-shadow:-14px 0 26px -6px rgba(194,49,138,.55), 14px 0 26px -6px rgba(47,127,193,.55), 0 10px 30px -8px rgba(251,198,28,.45); }
  18%{ transform:scale(.92); box-shadow:-24px 0 46px 0 rgba(194,49,138,.95), 24px 0 46px 0 rgba(47,127,193,.95), 0 14px 52px 4px rgba(251,198,28,.85); }
  22%{ transform:scale(1.04); box-shadow:-30px 0 60px 4px rgba(194,49,138,.7), 30px 0 60px 4px rgba(47,127,193,.7), 0 16px 64px 8px rgba(251,198,28,.6); }
  32%,100%{ transform:none; box-shadow:-14px 0 26px -6px rgba(194,49,138,.55), 14px 0 26px -6px rgba(47,127,193,.55), 0 10px 30px -8px rgba(251,198,28,.45); } }
body .ph-gen-btn.ph-gen-btn, body .ph-mk-btn.ph-mk-btn, body .ph-rgx-btn.ph-rgx-btn{
  position:relative; border-radius:999px; color:#fff; font-weight:600; letter-spacing:.02em;
  border:3px solid transparent; background:linear-gradient(#161618,#0c0c0d) padding-box, var(--ph-riga-scorre) border-box; background-size:100% 100%, 200% 100%;
  box-shadow:-14px 0 26px -6px rgba(194,49,138,.55), 14px 0 26px -6px rgba(47,127,193,.55), 0 10px 30px -8px rgba(251,198,28,.45);
  animation:ph-genera-cornice 5s linear infinite; }
body .ph-gen-btn.ph-gen-btn{ padding:clamp(12px,1.2vw,16px) clamp(26px,3.2vw,44px); font-size:clamp(15px,1.4vw,19px);
  animation:ph-genera-premi var(--g,11s) ease infinite, ph-genera-cornice 5s linear infinite; }
body .ph-rgx-btn.ph-rgx-btn{ padding:12px 26px; font-size:14px; }
body .ph-rgx.gira .ph-rgx-btn.ph-rgx-btn{ animation:ph-genera-premi-rgx var(--t) ease both, ph-genera-cornice 5s linear infinite; }
body .ph-mk-btn.ph-mk-btn{ transition:transform .18s ease, box-shadow .3s; }
body .ph-mk-btn.ph-mk-btn.clic{ transform:scale(.92); box-shadow:-24px 0 46px 0 rgba(194,49,138,.95), 24px 0 46px 0 rgba(47,127,193,.95), 0 14px 52px 4px rgba(251,198,28,.85); }

/* le stelline: dodici, nei colori della riga, che volano via dal centro del bottone */
.ph-magia{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:3; }
.ph-magia i{ position:absolute; left:0; top:0; width:var(--s,14px); height:var(--s,14px); background:var(--c,#FBC61C); opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.ph-magia i:nth-child(1){ --x:-170px; --y:-60px; --s:20px; --c:#6E3A8E; }
.ph-magia i:nth-child(2){ --x:-140px; --y:52px; --s:15px; --c:#C2318A; }
.ph-magia i:nth-child(3){ --x:-205px; --y:0; --s:13px; --c:#E8553A; }
.ph-magia i:nth-child(4){ --x:-62px; --y:-88px; --s:16px; --c:#F39A2B; }
.ph-magia i:nth-child(5){ --x:48px; --y:-92px; --s:19px; --c:#FBC61C; }
.ph-magia i:nth-child(6){ --x:150px; --y:-58px; --s:15px; --c:#3FA36B; }
.ph-magia i:nth-child(7){ --x:208px; --y:6px; --s:20px; --c:#2F7FC1; }
.ph-magia i:nth-child(8){ --x:142px; --y:62px; --s:14px; --c:#C2318A; }
.ph-magia i:nth-child(9){ --x:-18px; --y:90px; --s:13px; --c:#3FA36B; }
.ph-magia i:nth-child(10){ --x:82px; --y:88px; --s:12px; --c:#E8553A; }
.ph-magia i:nth-child(11){ --x:-100px; --y:-30px; --s:10px; --c:#FBC61C; }
.ph-magia i:nth-child(12){ --x:104px; --y:-6px; --s:10px; --c:#6E3A8E; }
@keyframes ph-scintilla-giro{ 0%,19%{ opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0); }
  22%{ opacity:1; transform:translate(calc(-50% + var(--x) * .55), calc(-50% + var(--y) * .55)) scale(1.2) rotate(45deg); }
  27%{ opacity:.9; transform:translate(calc(-50% + var(--x) * .85), calc(-50% + var(--y) * .85)) scale(.9) rotate(90deg); }
  34%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3) rotate(140deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(0); } }
@keyframes ph-scintilla-rgx{ 0%,16%{ opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0); }
  19%{ opacity:1; transform:translate(calc(-50% + var(--x) * .55), calc(-50% + var(--y) * .55)) scale(1.2) rotate(45deg); }
  24%{ opacity:.9; transform:translate(calc(-50% + var(--x) * .85), calc(-50% + var(--y) * .85)) scale(.9) rotate(90deg); }
  31%,100%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3) rotate(140deg); } }
@keyframes ph-scintilla-una{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0); }
  20%{ opacity:1; transform:translate(calc(-50% + var(--x) * .55), calc(-50% + var(--y) * .55)) scale(1.2) rotate(45deg); }
  55%{ opacity:.9; transform:translate(calc(-50% + var(--x) * .85), calc(-50% + var(--y) * .85)) scale(.9) rotate(90deg); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.3) rotate(140deg); } }
.ph-gen-btn .ph-magia i{ animation:ph-scintilla-giro var(--g,11s) cubic-bezier(.2,.7,.2,1) infinite; }
.ph-rgx.gira .ph-magia i{ animation:ph-scintilla-rgx var(--t) cubic-bezier(.2,.7,.2,1) both; }
.ph-magia.scintilla i{ animation:ph-scintilla-una 1.1s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion:reduce){ .ph-magia{ display:none; } }

/* ------------------------------------------------------------------------------------
   §13 · GLI EFFETTI E I BOTTONI SCELTI DALL'EDITOR (11 ottobre 2026)
   Dario: «dovrei poter decidere io dove ci sono i vari effetti… e i bottoni». Nell'editor
   (assets/js/photonico-editor.js, agganciato da mu-plugins/photonico-staging.php):
   - «Colori che scorrono» = <span class="ph-magici">. Fino a oggi la regola stava solo nello
     stile della home (il titolo dell'apertura): qui vale ovunque. Pensata per i titoli e per
     le parole su nero: su chiaro il giallo della riga si legge poco, come nel marchio.
   - «Riga sotto» (.ph-k) e «Evidenziatore» (.hl-mark) hanno già le loro regole (§11 e in testa).
   - Il Pulsante ha due stili: «Pieno» (come i bottoni di oggi: nero su chiaro; su nero nero
     con la cornice nella riga che scorre, come «Prova su un tuo prodotto») e «Contorno» (filo
     nero su chiaro, bianco su nero). Un pulsante nuovo, senza stile e senza le classi btn di
     prima, è «Pieno». I 47 di oggi hanno le classi btn btn-…: restano come sono finché non gli
     si sceglie uno stile, e lo stile scelto vince sulle classi (classe ripetuta e «body»).
   ------------------------------------------------------------------------------------ */
.ph-magici{ background:var(--ph-riga-scorre); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (prefers-reduced-motion:no-preference){ .ph-magici{ animation:ph-riga-scorre 8s linear infinite; } }

/* la forma, uguale ai bottoni btn di oggi (§ in testa: Jost 500 13 px maiuscolo +.12em, angoli 4 px, 15 × 22 px) */
body .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link,
body .wp-block-button.is-style-ph-contorno.is-style-ph-contorno .wp-block-button__link,
body .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link{
  display:inline-block; font-family:var(--display); font-weight:500; font-size:13px; line-height:1.3; letter-spacing:.12em; text-transform:uppercase;
  border-radius:4px; padding:15px 22px; text-decoration:none; transition:background-color .2s, color .2s, border-color .2s; }

/* Pieno: nero su chiaro */
body .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link,
body .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link{ background:var(--ink); color:#fff; border:0; }
body .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link:hover,
body .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link:hover{ background:#000; color:#fff; }
/* Pieno su nero: nero con la cornice nella riga che scorre (la regola del §11 per «Prova su un tuo prodotto») */
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link,
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link{ color:#fff; border:2px solid transparent;
  background:linear-gradient(#0c0c0d,#0c0c0d) padding-box, var(--ph-riga-scorre) border-box; background-size:100% 100%, 200% 100%; }
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link:hover,
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link:hover{ color:#fff; border-color:transparent;
  background:linear-gradient(#26262a,#26262a) padding-box, var(--ph-riga-scorre) border-box; background-size:100% 100%, 200% 100%; }
@media (prefers-reduced-motion:no-preference){
  body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.is-style-ph-pieno.is-style-ph-pieno .wp-block-button__link,
  body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button:not(.btn):not([class*="is-style-"]) .wp-block-button__link{ animation:ph-cornice-scorre 8s linear infinite; }
}

/* Contorno: filo nero su chiaro, bianco su nero; il filo sta dentro la stessa misura (padding meno il filo) */
body .wp-block-button.is-style-ph-contorno.is-style-ph-contorno .wp-block-button__link{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); padding:13.5px 20.5px; animation:none; }
body .wp-block-button.is-style-ph-contorno.is-style-ph-contorno .wp-block-button__link:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.is-style-ph-contorno.is-style-ph-contorno .wp-block-button__link{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.75); animation:none; }
body :is(.has-dark,.hero-foto,.ph-hero,.ph-testa,.sec-form-hs,.ph3-intro) .wp-block-button.is-style-ph-contorno.is-style-ph-contorno .wp-block-button__link:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ------------------------------------------------------------------------------------
   §14 · I MARGINI SUL TELEFONO (11 ottobre 2026)
   Il tema KOM tiene --pad a 56 px a ogni larghezza (kom-ds.css, :root): a 375 px il testo stava in
   263 px. Sotto i 640 px il margine scende a 20 px per lato (335 px a 375, 374 a 414); sopra non cambia
   niente. --pad lo usano .wrap (pagine e testata) e le strisce che scorrono di lato (margin negativo
   in var(--pad)), quindi seguono da sole. Il piede KOM ha i 56 px scritti a mano: qui li riportiamo a --pad.
   Scelta di Dario fra 20 e 16 px (confronto in photonico/prove-margini-telefono/).
   ------------------------------------------------------------------------------------ */
@media (max-width:640px){
  :root{ --pad:20px; }
  footer.kf.ph-foot .kf-wrap,
  footer.kf.ph-foot .kf-main{ padding-left:var(--pad); padding-right:var(--pad); }
}

/* ------------------------------------------------------------------------------------
   §13 · LA TENDINA DI «COME FUNZIONA» E «AI ACT: COSA RISCHI?» (13 ottobre 2026)
   Dario: sotto «Come funziona» un menu a tendina con tre delle sue pagine (Il cast, Lo styling,
   Location shooting), e il bottone rosso dice «AI Act: cosa rischi?». La voce resta il link alla
   sua pagina; la tendina si apre al passaggio del mouse e da tastiera (:focus-within), senza
   script. Nel cassetto le tre pagine stanno sempre aperte, rientrate sotto la voce. La voce copia
   le regole di «.nav nav > a» (tema e §7), che non la prendono perché sta dentro .ph-voce.
   Le misure, prese in Chrome headless sulla home: col bottone più lungo (178 px invece di 130) e la
   freccina la fila sta fra marchio e bottoni solo sopra i ~1330 px, quindi il cassetto parte a 1340
   (era 1260) e il bottone sparisce dalla testata sotto i 780 (era 730). Sopra il cassetto la testata
   è sempre quella compatta (voci a 12 px, bottone a 11): a 13 px la fila era 38 px più larga del
   .wrap anche prima (i bottoni uscivano a destra, a 1880 px 254 px di margine contro 296 a sinistra),
   e col bottone nuovo sarebbe stata 110 px, con la pagina che scorreva di lato fra 1421 e 1500 px.
   La griglia passa da «1fr auto 1fr» a «auto 1fr auto»: le voci stanno al centro fra marchio e
   bottoni e la fila non esce più dal .wrap.
   ------------------------------------------------------------------------------------ */
@media (min-width:1341px){
  header.site.ph-head .nav{ grid-template-columns:auto 1fr auto; column-gap:20px; }
  header.site.ph-head .nav nav{ justify-content:center; }
}
header.site.ph-head .ph-voce{ position:relative; display:flex; align-items:center; }
header.site.ph-head .ph-voce > a{ display:inline-flex; align-items:center; gap:7px; position:relative; padding:8px 3px; white-space:nowrap; text-decoration:none; cursor:pointer;
  font-family:var(--display); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#e9e7e2; transition:color .18s ease; }
@media (min-width:1341px){ header.site.ph-head .ph-voce > a{ font-size:12px; letter-spacing:.04em; } }
header.site.ph-head .ph-voce > a::after{ content:""; position:absolute; left:3px; right:100%; bottom:1px; height:2px; border-radius:2px; background:#fff; transition:right .22s ease; }
header.site.ph-head .ph-voce:hover > a, header.site.ph-head .ph-voce:focus-within > a{ color:#fff; }
header.site.ph-head .ph-voce:hover > a::after, header.site.ph-head .ph-voce:focus-within > a::after{ right:3px; }
header.site.ph-head .ph-freccina{ flex:0 0 auto; width:6px; height:6px; margin-top:-4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s ease, margin-top .2s ease; }
header.site.ph-head .ph-voce:hover .ph-freccina, header.site.ph-head .ph-voce:focus-within .ph-freccina{ transform:rotate(225deg); margin-top:3px; }
/* la tendina parte dal filo sotto la testata (80 px sopra il cassetto) */
header.site.ph-head .ph-tendina{ position:absolute; top:calc(100% + 23px); left:-20px; z-index:70; min-width:230px; padding:8px;
  display:flex; flex-direction:column; background:#0c0c0d; border:1px solid rgba(255,255,255,.14); border-top:0; border-radius:0 0 4px 4px; box-shadow:0 26px 44px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
/* il ponte: il mouse scende dalla voce alla tendina senza chiuderla */
header.site.ph-head .ph-tendina::before{ content:""; position:absolute; left:0; right:0; top:-24px; height:24px; }
header.site.ph-head .ph-voce:hover .ph-tendina, header.site.ph-head .ph-voce:focus-within .ph-tendina{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
header.site.ph-head .ph-tendina a{ display:block; padding:11px 14px; border-radius:3px; text-decoration:none; white-space:nowrap;
  font-family:var(--display); font-weight:500; font-size:15px; letter-spacing:0; text-transform:none; color:#e9e7e2; transition:background .14s ease, color .14s ease; }
header.site.ph-head .ph-tendina a:hover, header.site.ph-head .ph-tendina a:focus-visible{ background:rgba(255,255,255,.08); color:#fff; }
@media (prefers-reduced-motion:reduce){ header.site.ph-head .ph-tendina, header.site.ph-head .ph-freccina{ transition:none; } }
@media (max-width:1340px){
  header.site.ph-head .ph-voce{ display:block; width:100%; border-bottom:1px solid rgba(255,255,255,.10); }
  header.site.ph-head .ph-voce > a{ display:flex; width:100%; padding:15px 6px; font-size:12px; }
  header.site.ph-head .ph-voce > a::after, header.site.ph-head .ph-freccina{ display:none; }
  header.site.ph-head .ph-tendina{ position:static; min-width:0; margin:0 0 12px 8px; padding:0; background:none; border:0; border-left:1px solid rgba(255,255,255,.18); border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none; }
  header.site.ph-head .ph-tendina::before{ display:none; }
  header.site.ph-head .ph-tendina a{ padding:9px 14px; border-radius:0; font-size:15px; }
}

/* ------------------------------------------------------------------------------------
   §15 · IL MARCHIO A 400 E IL PAYOFF «SHOOT YOUR DREAMS» (13 ottobre 2026)
   Dario, sulla prova photonico/prove-payoff/: il payoff è la B (Jost 400 maiuscolo, largo quanto la
   parola, bianco), e «fai 400 su tutto»: il marchio passa dal 300 al peso di servizio della scheda
   (400, +.13em) a ogni misura, perché da piccolo si leggeva poco. Le regole del §6, del §7 e del §9
   restano: qui si sovrascrivono peso e spaziatura.
   Il payoff ha il corpo a .30 del marchio, mai sotto i 9 px. La prima S sta sotto l'asta della P e
   l'ultima S sotto l'ultima o; fra la base di «Photonico» e la testa delle maiuscole c'è .24 del corpo
   del marchio. Spaziatura, rientro e salita sono calcolati dalle lettere vere di Jost (canvas e DOM in
   Chrome, scarto entro 0,01 px), uno per corpo: testata 32 px; testata del telefono 28 px con il payoff
   a 9 px; piede 26 px con il payoff a 9 px; banda in cqw. Il margine destro negativo toglie la
   spaziatura dopo l'ultima S, così il gruppo è largo quanto la parola.
   Nella banda il marchio a 400 ha l'inchiostro largo 5,139 em (era 5,272 a 300): 19.46cqw lo porta a
   tutta banda e il tetto di 227 px lo ferma a 1166 px, come prima; i margini tolgono i fianchi della P
   (.080 em) e dell'ultima o (.035 em più la spaziatura).
   Markup: <span class="ph-payoff">Shoot your dreams</span> dopo lo span .photonico, in parts/header.html
   e parts/footer.html (nella banda al posto di «Lo shooting dei tuoi sogni»).
   ------------------------------------------------------------------------------------ */
.photonico{ font-weight:400; letter-spacing:.13em; margin-right:-.13em; }
.ph-payoff{ display:block; font-family:'Jost',sans-serif; font-weight:400; font-style:normal; text-transform:uppercase; white-space:nowrap; line-height:1; color:#fff; font-synthesis:none; }
header.site.ph-head .ph-marchio{ display:inline-flex; flex-direction:column; align-items:flex-start; }
header.site.ph-head .ph-marchio .ph-payoff{ font-size:.30em; letter-spacing:.44em; margin:-.0072em -.485em 0 .2287em; }
@media (max-width:400px){ header.site.ph-head .ph-marchio .ph-payoff{ font-size:9px; letter-spacing:.3687em; margin:-.2096em -.4137em 0 .2109em; } }
footer.kf.ph-foot .ph-marchio-foot{ display:inline-flex; flex-direction:column; align-items:flex-start; }
footer.kf.ph-foot .ph-marchio-foot .ph-payoff{ font-size:9px; letter-spacing:.2972em; margin:-.2317em -.3422em 0 .1931em; }
footer.kf.ph-foot .ph-brave .ph-brave__marchio{ display:inline-flex; flex-direction:column; align-items:flex-start; font-size:min(19.46cqw,227px); }
footer.kf.ph-foot .ph-brave .photonico{ font-weight:400; letter-spacing:.13em; margin-left:-.08em; margin-right:-.165em; }
footer.kf.ph-foot .ph-brave .ph-payoff{ font-size:.30em; letter-spacing:.44em; margin:-.0833em -.485em 0 -.038em; }