/*
Theme Name: RG Elettroimpianti
Theme URI: https://www.rgelettroimpianti.eu
Author: PIX Service
Description: Tema su misura per RG Elettroimpianti. Prima fase: landing di sito in costruzione con fascia fotografica e form contatti. Impostazione tecnico-documentale, griglia a vista, nessuna dipendenza esterna.
Version: 0.6.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rg-elettroimpianti
*/

/* ── Tipografia ──────────────────────────────────────────────────────
   Barlow Semi Condensed, ospitato qui e non su Google: il browser del
   visitatore non contatta server esterni prima di aver acconsentito a
   qualcosa, il che ci evita il problema quando arrivera' la cookie policy
   vera. Licenza SIL OFL, copia in assets/font/OFL.txt.

   Solo due pesi, e ogni peso in due sottoinsiemi: l'italiano sta tutto in
   "latin", quindi in pratica si scaricano 45 KB e non 74.
   ─────────────────────────────────────────────────────────────────── */

@font-face{
  font-family:'Barlow SC';
  src:url('assets/font/barlow-sc-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow SC';
  src:url('assets/font/barlow-sc-600-latin-ext.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Barlow SC';
  src:url('assets/font/barlow-sc-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow SC';
  src:url('assets/font/barlow-sc-700-latin-ext.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#0B1A3B;
  --blue:#005EF9;
  --blue-dark:#0047C4;
  --amber:#FDB913;
  --steel:#6A7382;
  --line:#DFE3E9;
  --paper:#FFFFFF;
  --titoli:'Barlow SC','Segoe UI Semibold',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}

.rule-top{height:3px;background:var(--ink)}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}

/* etichette tecniche */
.label{
  font-family:var(--titoli);
  font-weight:600;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
}

/* salto al contenuto, per tastiera e screen reader */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:0}

/* testata */
.site-head{padding:28px 0 22px;border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{display:block;width:auto;height:58px}
.head-meta{text-align:right;line-height:1.5}

/* blocco titolo */
.intro{padding:56px 0 44px;border-bottom:1px solid var(--line)}
.status{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px}
.status::before{content:"";width:9px;height:9px;background:var(--amber);flex:none}
h1,h2,h3{font-family:var(--titoli)}
h1{margin:0;font-size:clamp(32px,5.6vw,58px);line-height:1.04;letter-spacing:-.012em;font-weight:700}
.h1-sub{margin:14px 0 0;font-size:clamp(17px,2.2vw,21px);color:var(--steel);max-width:62ch;letter-spacing:-.005em}
.marker{width:64px;height:4px;background:var(--amber);margin:26px 0 0}
.lead{margin:26px 0 0;max-width:58ch;font-size:17px}

/* due colonne */
.cols{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);border-bottom:1px solid var(--line)}
.col-info{padding:44px 40px 48px 0;border-right:1px solid var(--line)}
.col-form{padding:44px 0 48px 40px}
@media (max-width:860px){
  .cols{grid-template-columns:1fr}
  .col-info{padding:36px 0 32px;border-right:0;border-bottom:1px solid var(--line)}
  .col-form{padding:36px 0 44px}
}

/* scheda contatti */
.spec{margin:22px 0 0;border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.spec-row dt{margin:0;padding-top:2px}
.spec-row dd{margin:0;font-variant-numeric:tabular-nums}
.spec a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.spec a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* form */
.field{margin:0 0 20px}
.field label{display:block;margin-bottom:7px}
.req{color:var(--blue)}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;padding:11px 13px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:2px;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,94,249,.14)}
textarea{min-height:132px;resize:vertical;line-height:1.55}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 24px}
.consent input{margin:4px 0 0;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.consent label{font-size:14px;color:var(--steel);line-height:1.55}
.consent a{color:var(--ink)}

button{
  appearance:none;padding:13px 30px;font:inherit;font-weight:600;letter-spacing:.01em;
  color:#fff;background:var(--blue);border:0;border-radius:2px;cursor:pointer;transition:background .15s;
}
button:hover{background:var(--blue-dark)}
button:focus-visible{outline:3px solid rgba(0,94,249,.35);outline-offset:2px}

/* messaggi */
.err{margin:6px 0 0;font-size:13.5px;color:#B3261E}
.box{padding:16px 18px;border-radius:2px;margin:0 0 26px;font-size:15px}
.box-err{background:#FDF2F1;border-left:3px solid #B3261E}
.box-ok{background:#F1F7F2;border-left:3px solid #1E7B34}
.box-ok h2{margin:0 0 6px;font-size:18px}
.box-ok p{margin:0;color:#33473A}

/* pagine di testo (privacy) */
.page-text h1{margin:44px 0 0;font-size:clamp(26px,4.4vw,38px)}
.page-text h2{font-size:18px;margin:36px 0 8px;letter-spacing:-.01em}
.page-text p,.page-text li{color:#232E48}
.page-text ul{padding-left:20px}
.page-text li{margin:5px 0}
.page-text table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
.page-text th,.page-text td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-text th{width:34%;font-weight:600}
.page-text a{color:var(--blue)}
.back{display:inline-block;margin:40px 0 0}

.site-foot{padding:26px 0 46px}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-doc{display:flex;gap:22px;flex-wrap:wrap}
.site-foot a{color:var(--steel)}

/* ═══════════════════════════════════════════════════════════════════
   FASCIA FOTOGRAFICA DELLA HOME
   La foto ha la parte sinistra quasi nera: il testo va lì. La velatura
   sopra serve comunque, perché il ritaglio cambia con la larghezza dello
   schermo e il contrasto non può dipendere dalla fortuna.
   ═══════════════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  background-color:#060F25;
  background-size:cover;
  background-position:72% center;
  background-repeat:no-repeat;
  border-bottom:4px solid var(--blue);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(100deg,
      rgba(6,15,37,.96)   0%,
      rgba(6,15,37,.90)  34%,
      rgba(6,15,37,.62)  62%,
      rgba(6,15,37,.34) 100%),
    linear-gradient(to bottom, rgba(6,15,37,.55) 0%, rgba(6,15,37,0) 34%);
}
.hero-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:clamp(38px,7vw,86px);
  padding-top:34px;
  padding-bottom:clamp(46px,7vw,76px);
  min-height:clamp(400px,58vh,600px);
}

.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero-logo{display:block;width:auto;height:clamp(50px,6.2vw,78px)}

.hero .status{margin-bottom:20px;color:#9AA6BC}
.hero .status::before{background:var(--amber)}
.hero h1{
  color:#fff;
  font-size:clamp(31px,5.6vw,60px);
  line-height:1.02;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.hero-sub{
  margin:18px 0 0;
  max-width:54ch;
  color:#C3CCDC;
  font-size:clamp(16px,1.9vw,19px);
}
.hero .marker{margin-top:26px}

/* L'anno di fondazione e' un dato che il cliente considera importante:
   sta sotto il titolo, in chiaro e in grande, non in una riga di servizio. */
/* Anno e telefono affiancati in fondo alla testata: l'anno da' fiducia,
   il numero da' un modo di agire subito. */
.hero-fondo{
  display:flex;align-items:flex-end;gap:clamp(26px,5vw,64px);
  flex-wrap:wrap;margin:26px 0 0;
}
.hero-tel{
  display:block;text-decoration:none;
  padding-left:clamp(26px,5vw,64px);
  border-left:1px solid rgba(255,255,255,.18);
}
.hero-tel .label{display:block;margin-bottom:3px;color:#8B97AE}
.hero-tel strong{
  display:block;font-family:var(--titoli);font-weight:700;
  font-size:clamp(22px,2.9vw,32px);color:#fff;letter-spacing:.005em;
}
.hero-tel:hover strong{color:var(--amber)}
@media (max-width:620px){
  .hero-tel{padding-left:0;border-left:0}
}

.hero-anno{
  margin:0;
  font-family:var(--titoli);
  font-size:clamp(19px,2.4vw,26px);
  font-weight:600;
  letter-spacing:.01em;
  color:#C3CCDC;
}
.hero-anno strong{color:#fff;font-weight:700}

/* sotto la fascia scura il contenuto respira di suo */
.home .cols{border-top:0;padding-top:6px}

@media (max-width:700px){
  .hero{background-position:64% center}
  .hero::before{
    background:linear-gradient(175deg, rgba(6,15,37,.94) 0%, rgba(6,15,37,.86) 55%, rgba(6,15,37,.80) 100%);
  }
}

/* chi preferisce meno effetti: nessuna immagine, fondo pieno */
@media (prefers-reduced-motion:reduce){
  .hero{background-image:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   FASCIA DEL CAMBIO MARCHIO
   Stato predefinito: marchio nuovo, fermo. I livelli del marchio storico
   sono in pagina ma invisibili finche' non arriva la classe "parte".
   ═══════════════════════════════════════════════════════════════════ */

.fascia-marchio{
  background:#F6F7F9;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(40px,5vw,58px) 0;
}
/* Marchio a sinistra e testo a destra invece che impilati al centro: prima
   il logo galleggiava in mezzo schermo di vuoto, che su monitor larghi era
   la sezione piu' debole della pagina. */
.fascia-marchio .wrap{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
}
@media (max-width:760px){
  .fascia-marchio .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
}
/* --h-nuovo e' l'unica misura assoluta: tutto il resto ne discende con calc().
   Cambiandola su schermo stretto si riduce davvero l'ingombro, cosa che un
   transform:scale() non farebbe: quello rimpicciolisce il disegno ma lascia
   la scatola grande, e la scatola esce dal contenitore. */
.marchio{
  --h-nuovo:300px;
  position:relative;
  width:calc(var(--h-nuovo) * var(--rapporto-nuovo));
  height:var(--h-nuovo);
  max-width:100%;
  margin:0 auto;
}
.marchio-nuovo{
  position:absolute; inset:0;
  width:calc(var(--h-nuovo) * var(--rapporto-nuovo));
  height:var(--h-nuovo);
}
.marchio-vecchio{
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--h-nuovo) * var(--fattore-vecchio));
  height:calc(var(--h-nuovo) * var(--fattore-vecchio));
  transform:translate(
    calc(-50% + var(--h-nuovo) * var(--dx-f)),
    calc(-50% + var(--h-nuovo) * var(--dy-f)));
  opacity:0;              /* invisibile finche' l'animazione non parte */
  pointer-events:none;
}
.marchio-vecchio .liv{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.fascia-marchio-etichetta{margin:0 0 8px}
.fascia-marchio-titolo{
  margin:0;
  font-family:var(--titoli);
  font-size:clamp(21px,2.7vw,27px);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
@media (max-width:700px){
  .marchio{--h-nuovo:190px}
  .fascia-marchio{padding-bottom:clamp(20px,4vw,32px)}
}
@media (max-width:420px){
  .marchio{--h-nuovo:150px}
}

/* ── Animazione del cambio marchio ──────────────────────────────────
   Ciclo di 7000 ms: 3 s di trasformazione, 4 s di pausa sul marchio nuovo, poi riparte. Il perno non e' piu' la dissolvenza fra le due forme:
   e' la FASE DEL COLORE, in cui le lettere storiche cambiano abito
   restando immobili. Una dissolvenza fra forme identiche e' invisibile,
   quindi legge come cambio di colore e non come sostituzione di un logo
   con un altro, che era il difetto della prima versione.

   I due monogrammi non combaciano (il nuovo e' il 36% piu' largo a
   parita' di altezza), quindi lo scambio delle forme arriva alla fine,
   breve, quando il senso e' gia' passato.

      0 →  510   fermo, con una compressione di anticipazione sul finire
    510 → 1110   la targhetta si apre e si porta via la sua scritta
   1050 → 1620   FASE DEL COLORE: nero->navy, azzurro->blu, barrette->ambra
   1620 → 2130   le barrette ambra convergono dove nasce la virgola
   2040 → 2520   scambio delle forme: il nuovo entra, il vecchio esce
   2520 → 3000   atterraggio netto, senza rimbalzo
   ─────────────────────────────────────────────────────────────────── */

.fascia-marchio.parte .marchio-vecchio{opacity:1}

.fascia-marchio.parte .liv{
  animation-duration:7000ms;
  animation-fill-mode:forwards;
  animation-iteration-count:infinite;
}
/* Chi esce accelera (ease-in), chi entra decelera (ease-out): e' la
   differenza fra "le cose spariscono" e "le cose se ne vanno". */
.fascia-marchio.parte .liv-cornice,
.fascia-marchio.parte .liv-campo,
.fascia-marchio.parte .liv-scritta,
.fascia-marchio.parte .liv-monogramma,
.fascia-marchio.parte .liv-g,
.fascia-marchio.parte .liv-barrette{animation-timing-function:cubic-bezier(.4,0,1,1)}
.fascia-marchio.parte .liv-tinta{animation-timing-function:cubic-bezier(.33,0,.2,1)}
.fascia-marchio.parte .marchio-nuovo{
  animation:m-nuovo 7000ms cubic-bezier(0,0,.2,1) infinite;
}

.fascia-marchio.parte .liv-cornice        {animation-name:m-cornice}
.fascia-marchio.parte .liv-campo          {animation-name:m-campo}
.fascia-marchio.parte .liv-scritta        {animation-name:m-scritta}
.fascia-marchio.parte .liv-monogramma     {animation-name:m-esce}
.fascia-marchio.parte .liv-g              {animation-name:m-esce}
.fascia-marchio.parte .liv-barrette       {animation-name:m-esce}
.fascia-marchio.parte .liv-tinta-monogramma{animation-name:m-tinta}
.fascia-marchio.parte .liv-tinta-g         {animation-name:m-tinta}
.fascia-marchio.parte .liv-tinta-barrette  {animation-name:m-tinta-barrette}

/* Le lettere non stanno al centro della tela: sotto c'e' la scritta. Il perno
   della scala va portato sul centro del monogramma, altrimenti scivolano. */
.fascia-marchio .liv-monogramma,
.fascia-marchio .liv-g,
.fascia-marchio .liv-barrette,
.fascia-marchio .liv-tinta{transform-origin:50% 39%}

/* I livelli a tinta: la forma e' il livello gia' scaricato, usato come
   maschera; il colore e' una tinta piatta sotto. Zero byte in piu'.
   Fuori da @supports restano invisibili e l'animazione salta la fase del
   colore: nessuno vede mai un rettangolo pieno. */
.liv-tinta{display:none}
@supports ((mask-image:url(#m)) or (-webkit-mask-image:url(#m))){
  .liv-tinta{
    display:block;
    opacity:0;
    -webkit-mask-image:var(--maschera);
            mask-image:var(--maschera);
    -webkit-mask-size:100% 100%;
            mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
            mask-repeat:no-repeat;
  }
}
.liv-tinta-monogramma{background:var(--ink)}
.liv-tinta-g{background:var(--blue)}
.liv-tinta-barrette{background:var(--amber)}

/* la cornice si comprime un istante, poi si apre verso l'esterno e sfuma */
@keyframes m-cornice{
  0%,6%   {opacity:1; transform:scale(1)}
  7.29%      {opacity:1; transform:scale(.985)}
  15.86%      {opacity:0; transform:scale(1.14)}
  100%     {opacity:0; transform:scale(1.14)}
}
@keyframes m-campo{
  0%,6%   {opacity:1; transform:scale(1)}
  7.29%      {opacity:1; transform:scale(.985)}
  15.86%      {opacity:0; transform:scale(.88)}
  100%     {opacity:0; transform:scale(.88)}
}
/* la scritta della targhetta se ne va con la targhetta */
@keyframes m-scritta{
  0%,6%   {opacity:1; transform:translateY(0)}
  15%      {opacity:0; transform:translateY(12px)}
  100%     {opacity:0; transform:translateY(12px)}
}
/* i livelli nei colori storici escono durante la fase del colore, senza
   muoversi: sotto c'e' la stessa identica forma nel colore nuovo */
@keyframes m-esce{
  0%,15%   {opacity:1}
  23.14%      {opacity:0}
  100%     {opacity:0}
}
/* i livelli nei colori nuovi: entrano fermi, restano, escono allo scambio */
@keyframes m-tinta{
  0%,15%   {opacity:0}
  23.14%      {opacity:1}
  29.14%      {opacity:1}
  36%      {opacity:0}
  100%     {opacity:0}
}
/* le barrette ambra: prima cambiano colore ferme, poi convergono */
@keyframes m-tinta-barrette{
  0%,15%   {opacity:0;  transform:translate(0,0) scale(1)}
  23.14%      {opacity:1;  transform:translate(0,0) scale(1)}
  27.43%      {opacity:.7; transform:translate(14%,-10%) scale(.72)}
  30.43%      {opacity:0;  transform:translate(21%,-14%) scale(.56)}
  100%     {opacity:0;  transform:translate(21%,-14%) scale(.56)}
}
/* il marchio nuovo entra decelerando e atterra netto: nessun rimbalzo */
@keyframes m-nuovo{
  0%,29.14%   {opacity:0; transform:scale(.96)}
  36%      {opacity:1; transform:scale(1)}
  100%     {opacity:1; transform:scale(1)}
}

/* Movimento ridotto: i due marchi affiancati con una freccia, senza moto.
   .marchio-vecchio DEVE restare position:relative anche qui: i suoi livelli
   sono position:absolute e senza un contenitore posizionato si ancorerebbero
   a .marchio, spiaccicandosi su tutta la fascia. */
@media (prefers-reduced-motion:reduce){
  .fascia-marchio .marchio{
    display:flex; align-items:center; justify-content:center;
    gap:clamp(14px,3vw,26px);
    width:auto; height:auto; max-width:100%;
  }
  .fascia-marchio .marchio-vecchio{
    position:relative; left:auto; top:auto;
    opacity:1; transform:none;
    order:1; flex:none;
    width:calc(var(--h-nuovo) * .74);
    height:calc(var(--h-nuovo) * .74);
  }
  .fascia-marchio .liv-tinta{display:none}
  .fascia-marchio .marchio::after{
    content:"→"; font-size:clamp(20px,3vw,28px); color:var(--steel);
    order:2; flex:none;
  }
  .fascia-marchio .marchio-nuovo{
    position:relative; inset:auto;
    order:3; flex:none;
    width:calc(var(--h-nuovo) * var(--rapporto-nuovo) * .74);
    height:calc(var(--h-nuovo) * .74);
  }
  .fascia-marchio.parte .marchio-vecchio,
  .fascia-marchio.parte .liv,
  .fascia-marchio.parte .marchio-nuovo{animation:none}
}

/* ── Fascia delle tre divisioni ─────────────────────────────────────
   Fondo scuro fra la fascia chiara del marchio e il bianco dei contatti:
   serve a dare ritmo alla pagina e permette di usare i marchi nella
   variante per fondo scuro, che esiste gia'. I marchi sono FERMI. */

.fascia-divisioni{
  background:var(--ink);
  color:#fff;
  padding:clamp(46px,6vw,74px) 0 clamp(48px,6.5vw,78px);
}
.fd-etichetta{color:#8B97AE;margin:0 0 12px}
.fd-titolo{
  margin:0;
  font-size:clamp(26px,3.6vw,42px);
  line-height:1.08;
  letter-spacing:-.012em;
  font-weight:700;
  color:#fff;
  text-wrap:balance;
}
.fd-lead{
  margin:14px 0 0;
  max-width:62ch;
  color:#C3CCDC;
  font-size:clamp(16px,1.8vw,18px);
}
/* La fascia delle divisioni respira piu' larga del resto della pagina.
   Non e' un vezzo: i tre marchi sono segni molto lunghi (proporzione ~6) e in
   tre colonne da 392 px non possono passare i 60 px di altezza senza essere
   schiacciati. Allargando il contenitore solo qui arrivano a 72 px sui monitor
   grandi, cioe' un quinto in piu', restando esatti.
   Il prezzo e' che il bordo sinistro di questa fascia non si allinea a quelle
   sopra e sotto: e' una scelta, non una svista. */
.fascia-divisioni .wrap{max-width:1576px}
/* Il blocco delle sedi invece NON segue: con tutta quella larghezza la mappa
   diventerebbe enorme e sbilancerebbe la fascia. Resta alla misura del resto
   della pagina, allineato a sinistra come tutto il contenuto della fascia. */
.fd-sedi-griglia{max-width:1264px}

.fd-elenco{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,44px);
  margin:clamp(38px,5vw,56px) 0 0;
  padding:0;
  list-style:none;
}
.fd-voce{
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);
}
/* I tre marchi si allineano per ALTEZZA, non per larghezza: e' il modo
   corretto di mettere in fila una famiglia di loghi, perche' hanno
   proporzioni diverse (6,44 / 5,88 / 5,99) e allinearli per larghezza li
   farebbe risultare di corpo diverso.

   L'altezza pero' non si sceglie a piacere: la detta la colonna. Il piu' largo
   dei tre, Industry, in una colonna da ~392 px non puo' passare i 60 px senza
   uscirne. Chiedergliene di piu' non lo ingrandisce, lo SCHIACCIA: max-width
   taglia la larghezza mentre height resta ferma, e il marchio si comprime.
   E' successo davvero, con height:86px: i tre venivano resi tutti 392x78,
   compressi fra il 10% e il 22%, e si vedeva.

   object-fit e' la rete di sicurezza. Se un domani le misure non tornassero
   piu', il marchio rimpicciolisce invece di deformarsi: un logo piccolo e'
   un inconveniente, un logo deformato e' un errore. */
.fd-logo{
  display:block;
  height:clamp(40px,4.6vw,72px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  margin:0 0 26px;
}
.fd-voce-etichetta{color:var(--amber);margin:0 0 7px}
.fd-voce-testo{margin:0;color:#C3CCDC;font-size:15.5px;line-height:1.6}

@media (max-width:860px){
  .fd-elenco{grid-template-columns:1fr;gap:30px}
  /* In colonna singola lo spazio abbonda: comanda di nuovo l'altezza.
     NON rimettere qui un max-width, e' quello che li schiacciava. */
  .fd-logo{height:clamp(34px,9vw,52px)}
}

/* chi ha attivo il risparmio di animazioni non perde nulla: qui non si
   muove niente per definizione */

/* ── Le sedi, dentro la fascia scura, subito dopo i tre marchi ──────
   Chi arriva deve capire dove siamo senza scorrere fino in fondo. */

.fd-sedi{margin:clamp(38px,5vw,58px) 0 0;padding-top:clamp(26px,3.4vw,34px);
  border-top:1px solid rgba(255,255,255,.18)}
.fd-sedi-etichetta{color:#8B97AE;margin:0 0 18px}

/* Sedi a sinistra, mappa a destra: si sceglie a sinistra e si guarda a
   destra. La colonna larga va alla mappa perche' una mappa interattiva
   stretta non si puo' usare. */
.fd-sedi-griglia{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);
  align-items:start;
}

.fd-sedi-elenco{
  display:grid;grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,26px);margin:0;padding:0;list-style:none;
}
.fd-sedi-elenco li{padding:0 0 clamp(18px,2.4vw,26px);
  border-bottom:1px solid rgba(255,255,255,.12)}
.fd-sedi-elenco li:last-child{border-bottom:0;padding-bottom:0}
.fd-sedi-elenco .label{color:var(--amber);margin:0 0 6px}
.fd-sede-via{margin:0;color:#fff;font-family:var(--titoli);font-weight:600;
  font-size:clamp(15px,1.7vw,18px)}
.fd-sede-citta{margin:2px 0 0;color:#C3CCDC;font-size:15px}
.spec-altre{font-size:14px;white-space:nowrap}
.fd-sede-azioni{margin:10px 0 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 16px}

/* Sposta la mappa su questa sede. E' un bottone e non un link perche' non
   porta da nessuna parte. Senza JS non potrebbe funzionare: resta nascosto,
   e il collegamento a Google Maps qui accanto fa comunque il suo lavoro. */
.fd-sede-vedi{display:none}
.rg-js .fd-sede-vedi{
  display:inline-block;
  font:600 12px/1 var(--titoli);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:0;border-radius:2px;
  padding:9px 13px;cursor:pointer;
}
.rg-js .fd-sede-vedi:hover{background:var(--amber)}
.rg-js .fd-sede-vedi[aria-pressed="true"]{
  background:var(--blue);color:#fff;cursor:default}
.fd-sede.e-attiva .fd-sede-via{color:var(--amber)}

.fd-sede-maps{
  display:inline-block;
  font-size:14px;color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(253,185,19,.4);
}
.fd-sede-maps:hover{border-bottom-color:var(--amber)}
.fd-sede-maps::after{content:" ↗";font-size:12px}

/* La mappa. L'iframe c'e' sempre, ma finche' non e' autorizzato e' vuoto:
   sopra ci sta il velo, con la mappa dell'Italia e le tre sedi insieme. */
.fd-mappa{margin:0}
/* Il riquadro NON ha una forma fissa finche' la mappa e' spenta: gliela da'
   il velo, che sta nel flusso. Il 3:2 e' la forma giusta per la mappa viva,
   non per un'immagine verticale: imporlo anche al segnaposto lasciava vuoti
   sopra e sotto la penisola. Arriva quando la mappa si accende, e a metterlo
   e' il JS insieme al resto (classe e-mappa-attiva). */
.fd-mappa-riquadro{
  position:relative;
  border:1px solid rgba(255,255,255,.18);border-radius:2px;
  background:#0A1730;overflow:hidden;
}
.fd-mappa-riquadro.e-mappa-attiva{aspect-ratio:3/2}
.fd-mappa-frame{position:absolute;inset:0;width:100%;height:100%;
  border:0;display:block}
.fd-mappa figcaption{margin:8px 0 0;color:#7C8AA3}

/* position + z-index NON sono decorativi: l'iframe e' assoluto e senza questi
   si stenderebbe sopra il velo, coprendo il pulsante "Attiva la mappa" e
   rendendolo non cliccabile. Successo davvero. */
.fd-mappa-velo{
  position:relative;z-index:1;
  display:grid;grid-template-rows:auto auto;
  background:#0A1730;
}
.fd-mappa-velo img{
  display:block;width:100%;height:auto;
  max-height:430px;object-fit:contain;
  padding:18px 18px 0;
}
.fd-mappa-invito{
  padding:14px clamp(14px,2vw,22px) clamp(14px,2vw,20px);
  background:rgba(11,26,59,.94);
  border-top:1px solid rgba(255,255,255,.14);
}
.fd-mappa-titolo{margin:0;font:700 15px/1.2 var(--titoli);color:#fff;
  letter-spacing:.02em}
.fd-mappa-testo{margin:5px 0 0;font-size:13.5px;color:#AEBACE;max-width:56ch}
.fd-mappa-attiva{display:none}
.rg-js .fd-mappa-attiva{
  display:inline-block;margin:13px 0 0;
  font:700 13px/1 var(--titoli);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--blue);border:0;border-radius:2px;
  padding:11px 18px;cursor:pointer;
}
.rg-js .fd-mappa-attiva:hover{background:#1C74FF}

/* Quando il riquadro della mappa e' largo, il segnaposto non puo' restare
   impaginato in verticale: l'immagine dell'Italia e' piu' alta che larga, e
   sotto un riquadro 3:2 lascerebbe due fasce vuote ai suoi lati. Affiancando
   il testo lo spazio si usa invece di avanzare. Sotto questa soglia il
   riquadro e' stretto e il testo torna sotto. */
@media (min-width:1000px){
  .fd-mappa-velo{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto;
    align-items:center;
  }
  .fd-mappa-velo img{padding:22px 0 22px 22px}
  .fd-mappa-invito{
    align-self:center;
    background:none;border-top:0;
    padding:0 clamp(20px,2.2vw,32px);
  }
  .fd-mappa-testo{max-width:34ch}
}

@media (max-width:860px){
  .fd-sedi-griglia{grid-template-columns:1fr;gap:26px}
  .fd-mappa-riquadro.e-mappa-attiva{aspect-ratio:4/3}
}

.fascia-marchio-lead{margin:12px 0 0;max-width:48ch;color:var(--steel);font-size:16.5px}
.fd-mappa-velo[hidden]{display:none}

/* Classe standard di WordPress per il testo destinato ai soli lettori di
   schermo. Il tema deve definirla anche se non la usa: la usano i plugin, e
   senza questa regola il loro testo "invisibile" finisce visibile in pagina.
   Successo con Complianz, che ripeteva il nome della categoria accanto
   all'interruttore del consenso. */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;padding:0;overflow:hidden;position:absolute;
  white-space:nowrap;word-wrap:normal !important;
}
/* Se pero' riceve il fuoco da tastiera deve tornare visibile: e' cosi' che
   funzionano i collegamenti "salta al contenuto". */
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;
  display:block;position:static;padding:12px 16px;
  background:var(--paper);color:var(--ink);
}