/* ==========================================================================
   PIXED — custom.css v2 (riscrittura consolidata, luglio 2026)
   File: /templates/yootheme/css/custom.css

   INDICE
   01 Token (dark) + variante light
   02 Base: bande, cuciture, ritmo sezioni, glow hero
   03 Tipografia: eyebrow, display, dot, lead, link
   04 Bottoni (override classi native UIkit)
   05 Superfici: glass, card, chip, divider, stats
   06 Esagoni, decori, blob, animazioni
   07 Finestre portfolio
   08 Slider corsi (scrim, frecce, dot)
   09 Navbar pill
   10 CTA finale, recensioni, footer
   11 Responsive
   ========================================================================== */


/* ==========================================================================
   01 · TOKEN
   ========================================================================== */
:root {
  color-scheme: dark;

  /* superfici */
  --pixed-bg-deep: #0A101D;
  --pixed-bg: #0D1626;
  --pixed-surface: #16233B;
  --pixed-surface-2: #1D2C49;
  --pixed-navy: #142035;
  --pixed-media-bg: #F6F7FA;

  /* testo */
  --pixed-text: #F2F5FA;
  --pixed-text-2: #A9B4C9;
  --pixed-text-3: #7C89A1;
  --pixed-on-accent: #FFFFFF;

  /* accento */
  --pixed-accent: #E8451E;
  --pixed-accent-strong: #C93A17;
  --pixed-accent-strong-hover: #B5330F;
  --pixed-accent-hover: #F25B35;
  --pixed-link-hover: #FF7A55;
  --pixed-accent-soft: rgba(232,69,30,.14);
  --pixed-hex-line-accent: rgba(232,69,30,.28);
  --pixed-accent-border-hover: rgba(232,69,30,.45);
  --pixed-blob: rgba(232,69,30,.10);

  /* bordi e superfici fantasma */
  --pixed-border: rgba(255,255,255,.08);
  --pixed-border-2: rgba(255,255,255,.11);
  --pixed-border-strong: rgba(255,255,255,.16);
  --pixed-border-hover: rgba(255,255,255,.30);
  --pixed-ghost-bg: rgba(255,255,255,.04);
  --pixed-ghost-bg-hover: rgba(255,255,255,.09);
  --pixed-hex-line: rgba(242,245,250,.09);

  /* glass */
  --pixed-glass: rgba(20,32,53,.55);
  --pixed-glass-strong: rgba(20,32,53,.68);
  --pixed-glass-blur: 16px;

  /* ombre, glow, scrim */
  --pixed-shadow-float: 0 16px 40px -12px rgba(4,8,16,.7);
  --pixed-shadow-window: 0 24px 60px -16px rgba(4,8,16,.8);
  --pixed-glow-accent: 0 8px 32px -6px rgba(232,69,30,.45);
  --pixed-scrim: linear-gradient(180deg, rgba(10,16,29,0) 35%, rgba(10,16,29,.88) 100%);

  /* raggi e motion */
  --pixed-radius-s: 10px;
  --pixed-radius-m: 16px;
  --pixed-radius-l: 24px;
  --pixed-radius-pill: 999px;
  --pixed-ease: cubic-bezier(.22,1,.36,1);
  --pixed-dur-ui: 200ms;

  /* asset e layout */
  --px-hex-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M41.3,11 Q50,6 58.7,11 L79.4,23 Q88.1,28 88.1,38 L88.1,62 Q88.1,72 79.4,77 L58.7,89 Q50,94 41.3,89 L20.6,77 Q11.9,72 11.9,62 L11.9,38 Q11.9,28 20.6,23 Z" fill="black"/></svg>');
  --px-content-max: 1200px;
}

[data-theme="light"] {
  color-scheme: light;

  --pixed-bg-deep: #ECEFF5;
  --pixed-bg: #F6F7FA;
  --pixed-surface: #FFFFFF;
  --pixed-surface-2: #ECEFF5;
  --pixed-media-bg: #ECEFF5;

  --pixed-text: #142035;
  --pixed-text-2: #4A5872;
  --pixed-text-3: #5E6B84;

  --pixed-border: rgba(20,32,53,.10);
  --pixed-border-2: rgba(20,32,53,.13);
  --pixed-border-strong: rgba(20,32,53,.18);
  --pixed-border-hover: rgba(20,32,53,.32);
  --pixed-ghost-bg: rgba(20,32,53,.04);
  --pixed-ghost-bg-hover: rgba(20,32,53,.08);
  --pixed-hex-line: rgba(20,32,53,.10);

  --pixed-glass: rgba(255,255,255,.60);
  --pixed-glass-strong: rgba(255,255,255,.78);

  --pixed-blob: rgba(232,69,30,.08);

  --pixed-shadow-float: 0 16px 40px -12px rgba(20,32,53,.18);
  --pixed-shadow-window: 0 24px 60px -16px rgba(20,32,53,.22);
}

/* transizione morbida allo switch tema */
html.pixed-theme-transition,
html.pixed-theme-transition *,
html.pixed-theme-transition *::before,
html.pixed-theme-transition *::after {
  transition: background-color var(--pixed-dur-ui) var(--pixed-ease),
              color var(--pixed-dur-ui) var(--pixed-ease),
              border-color var(--pixed-dur-ui) var(--pixed-ease) !important;
}


/* ==========================================================================
   02 · BASE — bande, cuciture, ritmo, glow hero
   Architettura stacking: ogni banda è un contesto isolato (isolation).
   Dentro la banda NESSUNA riga riceve z-index: l'ordine è quello del DOM.
   Gli sfondi/gradienti decorativi stanno a z-index negativo.
   ========================================================================== */
.px-band,
.px-band-deep {
  position: relative;
  isolation: isolate;
  color: var(--pixed-text);
}
.px-band      { background: var(--pixed-bg); }
.px-band-deep { background: var(--pixed-bg-deep); }

.px-band :is(h1,h2,h3,h4),
.px-band-deep :is(h1,h2,h3,h4) { color: var(--pixed-text); }

/* le bande con elementi che sconfinano stanno sopra la banda successiva */
.px-band:has(.px-window-overhang, .px-decor-seam, .px-cta-card),
.px-band-deep:has(.px-window-overhang, .px-decor-seam, .px-cta-card) {
  z-index: 1;
}

/* cucitura sfumata (solo dove non ci sono elementi a cavallo) */
.px-seam-fade::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 130px;
  background: linear-gradient(180deg, var(--pixed-bg) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* ritmo: comprime il "large" di YOOtheme sulle bande px */
.px-band.uk-section-large,
.px-band-deep.uk-section-large {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
}

/* glow radiale hero (sezione con id tophero) */
#tophero { overflow: hidden; }
#tophero::before {
  content: "";
  position: absolute;
  top: -10%; right: -5%;
  width: 55%; height: 70%;
  background: radial-gradient(circle at 70% 30%,
              rgba(232,69,30,.12) 0%,
              rgba(232,69,30,.05) 30%,
              transparent 65%);
  pointer-events: none;
  z-index: -1;
}


/* ==========================================================================
   03 · TIPOGRAFIA
   ========================================================================== */
.px-eyebrow {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pixed-accent);
  padding: .4rem 1rem;
  border: 1px solid var(--pixed-border-2);
  border-radius: var(--pixed-radius-pill);
  background: var(--pixed-ghost-bg);
  margin-bottom: 1rem;
}

.px-display {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(4.5rem, 12vw, 9rem);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--pixed-text);
  margin-bottom: 1.5rem;
}

.px-dot { color: var(--pixed-accent); }

.px-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--pixed-text-2);
  max-width: 46ch;
}

.px-link {
  color: var(--pixed-accent);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--pixed-dur-ui) var(--pixed-ease);
}
.px-link:hover { color: var(--pixed-link-hover); }

.px-divider {
  border: 0;
  border-top: 1px solid var(--pixed-border);
  margin: 2rem 0;
}


/* ==========================================================================
   04 · BOTTONI — override classi native UIkit (vale per tutto il sito)
   Gli alias px-btn / px-btn-ghost (usati dagli HTML del JSON) condividono
   le stesse regole dei bottoni nativi.
   ========================================================================== */
.uk-button, .px-btn, .px-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--pixed-radius-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .95rem;
  text-transform: none;
  letter-spacing: 0;
  padding: .2rem 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--pixed-dur-ui) var(--pixed-ease),
              border-color var(--pixed-dur-ui) var(--pixed-ease),
              color var(--pixed-dur-ui) var(--pixed-ease);
}

/* primario = arancio pieno */
.uk-button-primary,
.uk-button-secondary,
.px-btn {
  background: var(--pixed-accent-strong);
  color: var(--pixed-on-accent);
  border: 0;
  box-shadow: var(--pixed-glow-accent);
}
.uk-button-primary:hover, .uk-button-primary:focus,
.uk-button-secondary:hover, .uk-button-secondary:focus,
.px-btn:hover {
  background: var(--pixed-accent-strong-hover);
  color: var(--pixed-on-accent);
}

/* default = ghost trasparente col bordo */
.uk-button-default,
.px-btn-ghost {
  background: var(--pixed-ghost-bg);
  color: var(--pixed-text);
  border: 1px solid var(--pixed-border-strong);
}
.uk-button-default:hover, .uk-button-default:focus,
.px-btn-ghost:hover {
  background: var(--pixed-ghost-bg-hover);
  border-color: var(--pixed-border-hover);
  color: var(--pixed-text);
}

/* text / link */
.uk-button-text, .uk-button-link {
  color: var(--pixed-accent);
  text-transform: none;
  padding: 0;
}
.uk-button-text:hover, .uk-button-link:hover { color: var(--pixed-link-hover); }

/* icone SVG dentro i bottoni: colore del testo, non nero inline */
.uk-button .uk-icon svg [stroke],
.px-btn .uk-icon svg [stroke] { stroke: currentColor; }
.uk-button .uk-icon svg [fill]:not([fill="none"]) { fill: currentColor; }

.px-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.px-btn-row-center { justify-content: center; }


/* ==========================================================================
   05 · SUPERFICI — glass, card, chip, stats
   ========================================================================== */
.px-glass, .px-glass-strong {
  border: 1px solid var(--pixed-border-2);
  border-radius: var(--pixed-radius-l);
  -webkit-backdrop-filter: blur(var(--pixed-glass-blur));
  backdrop-filter: blur(var(--pixed-glass-blur));
}
.px-glass        { background: var(--pixed-glass); }
.px-glass-strong { background: var(--pixed-glass-strong); }

/* card native YOOtheme → stile glass Pixed (tutto il sito) */
.uk-card-default {
  background: var(--pixed-glass);
  -webkit-backdrop-filter: blur(var(--pixed-glass-blur));
  backdrop-filter: blur(var(--pixed-glass-blur));
  border: 1px solid var(--pixed-border-2);
  border-radius: var(--pixed-radius-l);
  box-shadow: none;
  color: var(--pixed-text-2);
}
.uk-card-default :is(.uk-card-title, h3, .el-title) { color: var(--pixed-text); }
.uk-card-default lottie-player { margin-bottom: .5rem; }

.px-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: var(--pixed-radius-pill);
  font-size: .8rem;
  color: var(--pixed-text-2);
  border: 1px solid var(--pixed-border-2);
}

.px-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.5rem; }
.px-stars { color: var(--pixed-accent); letter-spacing: .1em; }


/* ==========================================================================
   06 · ESAGONI, DECORI, BLOB, ANIMAZIONI
   I contenitori decorativi sono ÀNCORE A ALTEZZA ZERO: il builder li rende
   come righe normali, ma non occupano spazio e posizionano i figli assoluti.
   ========================================================================== */
.px-hex-fill, .px-hex-line, .px-hex-line-accent {
  display: inline-block;
  width: 180px; height: 200px;
  -webkit-mask: var(--px-hex-url) center / contain no-repeat;
          mask: var(--px-hex-url) center / contain no-repeat;
}
.px-hex-fill { background: var(--pixed-hex-line); }
.px-hex-sm   { width: 44px; height: 48px; }
.px-hex-fill.px-hex-sm { background: var(--pixed-accent-soft); }

/* outline = due layer sovrapposti (il mask non fa bordi) */
.px-hex-line, .px-hex-line-accent {
  background: transparent;
  position: relative;
  -webkit-mask: none; mask: none;
}
.px-hex-line::before, .px-hex-line-accent::before {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: var(--px-hex-url) center / contain no-repeat;
          mask: var(--px-hex-url) center / contain no-repeat;
}
.px-hex-line::before        { background: var(--pixed-hex-line); }
.px-hex-line-accent::before { background: var(--pixed-hex-line-accent); }
.px-hex-line::after, .px-hex-line-accent::after {
  content: ""; position: absolute; inset: 6px;
  -webkit-mask: var(--px-hex-url) center / contain no-repeat;
          mask: var(--px-hex-url) center / contain no-repeat;
  background: var(--pixed-bg);
}

/* contenitori decorativi: àncore a altezza zero */
/* àncore a altezza zero (blob, cucitura, cta) */
.px-decor-joomla, .px-decor-seam, .px-decor-cta {
  position: relative;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

/* HERO: layer che copre l'intera sezione, dietro al contenuto
   (si aggancia a .px-band che è il primo antenato posizionato) */
.px-decor-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.px-decor-hero .px-hex-fill        { position: absolute; top: 8%;  right: 22%; opacity: .6; }
.px-decor-hero .px-hex-line        { position: absolute; top: 20%; right: 3%;  width: 320px; height: 350px; }
.px-decor-hero .px-hex-line-accent { position: absolute; top: 58%; right: 26%; width: 90px;  height: 100px; }
.px-decor-joomla .px-blob          { position: absolute; top: 40px;   left: 30%; }
.px-decor-seam .px-hex-fill        { position: absolute; bottom: -220px; left: 4%; z-index: 2; }
.px-decor-cta .px-hex-line-accent  { position: absolute; top: -120px; right: 8%; }

.px-blob {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pixed-blob) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* animazioni ambientali */
@keyframes px-drift  { 0% { transform: translate(0,0); } 50% { transform: translate(28px,-22px); } 100% { transform: translate(0,0); } }
@keyframes px-drift2 { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-20px,18px) rotate(4deg); } 100% { transform: translate(0,0) rotate(0deg); } }
@keyframes px-bob    { 0% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-12px) rotate(var(--r,0deg)); } 100% { transform: translateY(0) rotate(var(--r,0deg)); } }

.px-anim-drift  { animation: px-drift 18s var(--pixed-ease) infinite; }
.px-anim-drift2 { animation: px-drift2 14s var(--pixed-ease) infinite; }
.px-anim-bob    { animation: px-bob 16s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .px-anim-drift, .px-anim-drift2, .px-anim-bob { animation: none !important; }
}


/* ==========================================================================
   07 · FINESTRE PORTFOLIO
   min-height provvisoria finché non ci sono gli screenshot reali:
   quando li carichi, puoi rimuovere le due righe segnate [PROVVISORIO].
   ========================================================================== */
.px-windows { position: relative; min-height: 560px; }
.px-window {
  position: absolute;
  width: 78%;
  border-radius: var(--pixed-radius-m);
  overflow: hidden;
  background: var(--pixed-media-bg);
  box-shadow: var(--pixed-shadow-window);
}
.px-window-bar { height: 34px; background: var(--pixed-navy); }
.px-window-bar::before {
  content: ""; display: block;
  margin: 12px 0 0 14px;
  width: 34px; height: 8px;
  border-radius: 4px;
  background: radial-gradient(circle 4px at 4px 4px,  rgba(255,255,255,.4) 40%, transparent 42%),
              radial-gradient(circle 4px at 17px 4px, rgba(255,255,255,.4) 40%, transparent 42%),
              radial-gradient(circle 4px at 30px 4px, rgba(255,255,255,.4) 40%, transparent 42%);
}
.px-window-shot {
  display: block;
  width: 100%; height: auto;
  min-height: 210px;                      /* [PROVVISORIO] */
  background: var(--pixed-surface-2);     /* [PROVVISORIO] */
  object-fit: cover;
}
.px-window-1 { top: 0;     right: 0;  z-index: 3; transform: rotate(-3deg); }
.px-window-2 { top: 160px; left: 0;   z-index: 4; transform: rotate(2deg); }
.px-window-3 { top: 300px; right: 6%; z-index: 5; width: 60%; transform: rotate(-1deg); }
.px-window-overhang { margin-bottom: -72px; }


/* ==========================================================================
   08 · SLIDER CORSI — scrim sulla singola slide, testo in basso
   La classe px-scrim sul CONTENITORE dello slider è neutralizzata:
   lo scrim vive sull'immagine di ogni slide (uk-inline-clip).
   ========================================================================== */
.px-corsi-slider.px-scrim { background: none; }

.px-corsi-slider .uk-inline-clip {
  position: relative;
  border-radius: var(--pixed-radius-m);
  overflow: hidden;
}
.px-corsi-slider .uk-inline-clip .el-image { filter: brightness(.62); }
.px-corsi-slider .uk-inline-clip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(10,16,29,.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.px-corsi-slider .uk-position-bottom-left { z-index: 2; }
.px-corsi-slider .el-title { color: var(--pixed-text); }
.px-corsi-slider .el-meta  { color: var(--pixed-text-2); letter-spacing: .08em; }
.px-corsi-slider .el-link  { color: var(--pixed-accent); }
.px-corsi-slider .el-link:hover { color: var(--pixed-link-hover); }

/* frecce e dot degli slider, leggibili sul dark */
.uk-slidenav svg [stroke] { stroke: var(--pixed-text-2); }
.uk-slidenav:hover svg [stroke] { stroke: var(--pixed-text); }
.uk-dotnav > * > a { background: var(--pixed-border-strong); }
.uk-dotnav > .uk-active > a { background: var(--pixed-accent); }


/* ==========================================================================
   09 · NAVBAR — pill glass compatta e centrata
   ========================================================================== */
.tm-header .uk-navbar-container {
  margin: 1rem auto 0;
  max-width: max-content;
  padding: .45rem 1.1rem;
  border-radius: var(--pixed-radius-pill);
  background: var(--pixed-glass) !important;
  -webkit-backdrop-filter: blur(var(--pixed-glass-blur));
  backdrop-filter: blur(var(--pixed-glass-blur));
  border: 1px solid var(--pixed-border-2);
  box-shadow: var(--pixed-shadow-float);
}
.tm-header .uk-navbar-container > .uk-container {
  width: auto;
  padding-inline: 0;
}
/* annulla i flex-grow inline del layout Justify */
.tm-header .uk-navbar-left { flex-grow: 0 !important; gap: .5rem; align-items: center; }
.tm-header .uk-navbar-nav  { flex-grow: 0 !important; }

/* sticky: sempre glass, un filo più opaca */
.tm-header .uk-navbar-sticky .uk-navbar-container,
.tm-header .uk-active .uk-navbar-container {
  background: var(--pixed-glass-strong) !important;
  margin-top: .5rem;
}

.tm-header .uk-logo img { height: 38px; width: auto; }

.tm-header .uk-navbar-nav > li > a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--pixed-text-2);
  padding: 0 .7rem;
  min-height: 44px;
  transition: color var(--pixed-dur-ui) var(--pixed-ease);
}
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a {
  color: var(--pixed-text);
}

/* CTA (classe px-nav-cta sull'<a> della voce di menu) */
.tm-header .uk-navbar-nav > li > a.px-nav-cta {
  background: var(--pixed-accent-strong);
  color: var(--pixed-on-accent);
  padding: .5rem 1.25rem;
  margin-left: .35rem;
  min-height: 0;
  border-radius: var(--pixed-radius-pill);
  box-shadow: var(--pixed-glow-accent);
}
.tm-header .uk-navbar-nav > li > a.px-nav-cta:hover {
  background: var(--pixed-accent-strong-hover);
  color: var(--pixed-on-accent);
}


/* ==========================================================================
   10 · CTA FINALE, RECENSIONI, FOOTER
   ========================================================================== */
.px-cta-card {
  max-width: 820px;
  margin-inline: auto;
  padding: 3rem;
  text-align: center;
  position: relative;
}
.px-cta-seam .px-cta-card { margin-bottom: -64px; }

.px-reviews-slot { min-height: 320px; }

.px-footer-links a {
  display: block;
  color: var(--pixed-text-2);
  text-decoration: none;
  padding: .25rem 0;
  transition: color var(--pixed-dur-ui) var(--pixed-ease);
}
.px-footer-links a:hover { color: var(--pixed-text); }

.px-footer-bottom {
  border-top: 1px solid var(--pixed-border);
  margin-top: 2rem;
  padding-top: 1.5rem;
  color: var(--pixed-text-3);
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}


/* ==========================================================================
   11 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1240px) {
  .tm-header .uk-navbar-container { margin-inline: 1rem; }
}

@media (max-width: 959px) {
  .px-windows { min-height: 0; display: grid; gap: 1rem; }
  .px-window  { position: static; width: 100%; transform: none; }
  .px-window-overhang { margin-bottom: 0; }
  .px-display { font-size: clamp(3.5rem, 18vw, 5rem); }
  .px-cta-seam .px-cta-card { margin-bottom: -40px; }
}

/* ============================================================
   GERARCHIA TESTO UNIFORME (come da mockup)
   - titoli: bianco (già gestito dalla regola di banda sugli heading)
   - testo corrente: azzurro text-2, dimensione unica
   - px-lead: SOLO per il paragrafo intro sotto i titoli (più grande)
   ============================================================ */
.px-band p,
.px-band-deep p,
.px-band .uk-panel,
.px-band-deep .uk-panel {
  color: var(--pixed-text-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* grassetti dentro il testo: bianchi, per stacco */
.px-band p :is(strong, b),
.px-band-deep p :is(strong, b) {
  color: var(--pixed-text);
}

/* etichette piccole (meta, didascalie stats) più spente */
.px-band .uk-text-meta,
.px-band-deep .uk-text-meta {
  color: var(--pixed-text-3);
}

/* ============================================================
   ADDENDUM PAGINA SERVIZI (componenti riusabili)
   ============================================================ */

/* binario sticky dei servizi: lo scrollspy di UIkit mette uk-active */
.px-rail { list-style: none; padding: 0; margin: 0; }
.px-rail li { margin-bottom: 1rem; }
.px-rail a {
  display: flex; align-items: baseline; gap: .6rem;
  color: var(--pixed-text-2); text-decoration: none;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.05rem;
  transition: color var(--pixed-dur-ui) var(--pixed-ease);
}
.px-rail a::before {
  content: attr(data-num);
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: .75rem; color: var(--pixed-text-3);
}
.px-rail a:hover { color: var(--pixed-text); }
.px-rail .uk-active a { color: var(--pixed-accent); }
.px-rail .uk-active a::before { color: var(--pixed-accent); }

/* domanda in corsivo sopra i titoli di servizio */
.px-q { font-style: italic; color: var(--pixed-text-3); margin-bottom: .25rem; }

/* numero in esagono (passi processo, icone numerate):
   mask sul ::before, numero sopra — così il numero NON viene ritagliato */
/* numero in esagono — versione grande */
.px-num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 80px;                 /* era 44×48 */
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 1.6rem;                          /* nuovo: numero grande */
  color: var(--pixed-accent);
}
.px-num::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-mask: var(--px-hex-url) center / contain no-repeat;
          mask: var(--px-hex-url) center / contain no-repeat;
  background: var(--pixed-accent-soft);
}

/* ==========================================================================
   07 · FINESTRE BROWSER — universale, tre modalità
   a) finestra singola: statica, larghezza piena (nessuna classe extra)
   b) composizione flottante (home): automatica quando il contenitore
      .px-windows contiene una .px-window-3
   c) confronto prima/dopo: aggiungere px-compare al contenitore .px-windows
   ========================================================================== */
.px-window {
  position: relative;
  width: 100%;
  border-radius: var(--pixed-radius-m);
  overflow: hidden;
  background: var(--pixed-media-bg);
  box-shadow: var(--pixed-shadow-window);
}
.px-window-bar { height: 34px; background: var(--pixed-navy); }
.px-window-bar::before {
  content: ""; display: block;
  margin: 12px 0 0 14px; width: 34px; height: 8px; border-radius: 4px;
  background: radial-gradient(circle 4px at 4px 4px,  rgba(255,255,255,.4) 40%, transparent 42%),
              radial-gradient(circle 4px at 17px 4px, rgba(255,255,255,.4) 40%, transparent 42%),
              radial-gradient(circle 4px at 30px 4px, rgba(255,255,255,.4) 40%, transparent 42%);
}
.px-window-shot { display: block; width: 100%; height: auto; object-fit: cover; }

.px-windows { position: relative; }

/* (b) COMPOSIZIONE FLOTTANTE — si attiva da sola solo dove ci sono 3 finestre */
.px-windows:has(.px-window-3) { min-height: 560px; }
.px-windows:has(.px-window-3) .px-window { position: absolute; width: 78%; }
.px-windows:has(.px-window-3) .px-window-1 { top: 0;     right: 0;  z-index: 3; transform: rotate(-3deg); }
.px-windows:has(.px-window-3) .px-window-2 { top: 160px; left: 0;   z-index: 4; transform: rotate(2deg); }
.px-windows:has(.px-window-3) .px-window-3 { top: 300px; right: 6%; z-index: 5; width: 60%; transform: rotate(-1deg); }
.px-windows:has(.px-window-3) .px-window-overhang { margin-bottom: -72px; }

/* (c) CONFRONTO PRIMA → DOPO — classe px-compare sul contenitore */
.px-compare .px-window:first-of-type {           /* il "prima": arretrato e spento */
  width: 62%;
  opacity: .55;
  filter: grayscale(.35) brightness(.85);
  transform: rotate(-1.5deg);
}
.px-compare .px-window:last-of-type {            /* il "dopo": in primo piano */
  width: 72%;
  margin: -60px 0 0 auto;
  transform: rotate(1.5deg);
  z-index: 2;
}
.px-compare .px-chip {                            /* il badge "3.x → J6" a cavallo */
  position: absolute;
  top: 42%; left: 46%;
  z-index: 3;
  background: var(--pixed-surface-2);
  color: var(--pixed-accent);
  font-family: 'Inter', sans-serif; font-weight: 600;
}

/* le ancore non finiscono sotto la navbar sticky (vale per tutte le pagine) */
[id] { scroll-margin-top: 120px; }

/* più aria tra i blocchi separati da divider (pagine a blocchi tipo Servizi) */
.px-divider { margin: 3.5rem 0; }

/* più aria sotto i titoli di sezione, evita che tocchino il testo */
.px-band h2, .px-band-deep h2 { margin-bottom: 1rem; }
/* stacco extra sopra i media dei blocchi servizio */
.uk-width-2-3\@m > .uk-panel + div > svg,
.uk-width-2-3\@m .px-windows,
.uk-width-2-3\@m .px-window { margin-top: 1.5rem; }

/* diagramma SVG: centrato, a larghezza piena */
.px-diagram { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; }

/* fluttuazione morbida del diagramma */
@keyframes px-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.px-diagram-float {
  animation: px-float 6s ease-in-out infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .px-diagram-float { animation: none; }
}

/* px-hex-sm dentro le card: versione inline con dimensione propria */
.uk-card .px-hex-sm {
  position: static;
  display: inline-block;
  width: 26px;
  height: 30px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--pixed-accent-soft); /* usa il token accent-soft già definito */
  vertical-align: middle;
}

/* Card categorie EAA: esagono a lato del testo */
.px-cat-grid .el-item.uk-card {
  display: flex;
  align-items: center;
  gap: 16px;
}
.px-cat-grid .el-item.uk-card .el-meta,
.px-cat-grid .el-item.uk-card .el-title {
  margin: 0;
}

.px-cat-grid .el-item.uk-card .el-meta {
  line-height: 0;   /* elimina lo spazio di baseline attorno allo span */
}
.px-cat-grid .el-item.uk-card .px-hex-sm {
  display: block;   /* niente più comportamento inline */
}

.px-cat-grid .el-item.uk-card .el-title {
  line-height: 1.2;
}

/* Composizione finestre sovrapposte (pagina Accessibilità) */
.px-windows-stack {
  position: relative;
  aspect-ratio: 5 / 4;      /* altezza totale del blocco: regola qui */
  max-width: 560px;
  margin-inline: auto;
}
.px-windows-stack .px-window {
  position: absolute;
  width: 72%;
  margin: 0;
}
.px-windows-stack .px-window-shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;    /* taglia le foto alte: niente più colonna gigante */
  object-fit: cover;
}
.px-windows-stack .px-win-back  { top: 0; right: 0; }
.px-windows-stack .px-win-front { bottom: 0; left: 0; z-index: 2; }

/* Mobile: le due finestre tornano in flusso, una sotto l'altra ma compatte */
@media (max-width: 639px) {
  .px-windows-stack { aspect-ratio: auto; }
  .px-windows-stack .px-window { position: static; width: 100%; }
  .px-windows-stack .px-window + .px-window { margin-top: 16px; }
}