@import url('../aedis-stili-base.css');

/* ==========================================================================
   Stile 10 - TECNOLOGICO (design originale Aedis, license-free)
   --------------------------------------------------------------------------
   Nato il 05/11/2026 dal restyling del sito di Computer-Pro, portato sul
   markup Porto del CMS: stessi contenuti, veste nuova. Blu notte profondo
   per intestazione, aperture, fasce scure e piede; pagine chiare e ariose
   in mezzo; una SFUMATURA di marca (il primario con due vicini di tinta)
   su titoli, bottoni e numeri; schede bianche a 18 px con ombre morbide che
   si sollevano al passaggio; rete di particelle animata nelle aperture
   (aedis-tecnologico.js, caricato da _LayoutPorto solo con questo stile).
   Caratteri: Space Grotesk per i titoli, Inter per il testo (self-hosted,
   licenza SIL OFL 1.1, in porto/fonts/tecnologico).

   COLORI: tutti DERIVATI dal primario della Cassa (sintassi colore relativa,
   con un ripiego statico sui colori di Computer-Pro):
   - il blu notte e' il primario portato a L* 3-20 (stessa tinta);
   - la sfumatura e' il primario con la tinta ruotata di -30 e +45 gradi;
   - ogni sfumatura esiste in tre versioni: PIENA (fondi con testo bianco,
     L* <= 45: il bianco regge >= 4,5:1), INCHIOSTRO (testo su chiaro,
     L* <= 42) e LUCE (testo su scuro, L* >= 74).
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../../fonts/tecnologico/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../../fonts/tecnologico/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ax-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ax-font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* superfici chiare */
  --ax-bg: #ffffff;
  --ax-surface: #ffffff;
  --ax-surface-2: #f4f7fc;
  --ax-ink: #0e1a2b;
  --ax-ink-soft: #44546a;
  --ax-ink-mute: #56657a;
  --ax-line: #e3e9f2;
  --ax-line-strong: #0e1a2b;
  --ax-radius: 18px;
  --ax-radius-sm: 12px;
  --ax-radius-lg: 22px;
  --ax-btn-radius: 999px;
  --ax-shadow: 0 1px 2px rgba(14, 26, 43, .04), 0 8px 24px rgba(14, 26, 43, .06);
  --ax-shadow-lg: 0 2px 6px rgba(14, 26, 43, .05), 0 24px 60px rgba(20, 60, 120, .14);
  --ax-ease: cubic-bezier(.2, .7, .2, 1);

  /* blu notte (ripiego: i colori del restyling) */
  --ax-night-950: #050d1c;
  --ax-night-900: #071226;
  --ax-night-800: #0b1f3f;
  --ax-night-700: #123063;
  --ax-night-ink: #e8eef7;
  --ax-night-soft: #b6c3d6;
  --ax-night-line: rgba(255, 255, 255, .10);

  /* sfumatura di marca: piena, inchiostro, luce (ripiego statico) */
  --ax-g1: #1c7fa8; --ax-g2: #0b6fc0; --ax-g3: #5b4bd6;
  --ax-g1-ink: #136a8d; --ax-g2-ink: #0b5fa6; --ax-g3-ink: #4b3cc0;
  --ax-g1-glow: #7fd3ef; --ax-g2-glow: #8cc4f5; --ax-g3-glow: #b7aeff;
  --ax-teal-glow: #2ee6c9;

  --ax-footer-link: #b6c3d6;
  --ax-footer-link-hover: #ffffff;
}
@supports (color: lch(from red l c h)) {
  :root {
    --ax-night-950: lch(from var(--primary) 3.5 min(c, 14) h);
    --ax-night-900: lch(from var(--primary) 6 min(c, 20) h);
    --ax-night-800: lch(from var(--primary) 12 min(c, 30) h);
    --ax-night-700: lch(from var(--primary) 21 min(c, 42) h);
    /* piena: L* <= 45 -> testo bianco >= 4,5:1 */
    --ax-g1: lch(from var(--primary) min(l, 45) max(c, 40) calc(h - 30));
    --ax-g2: lch(from var(--primary) min(l, 45) max(c, 40) h);
    --ax-g3: lch(from var(--primary) min(l, 45) max(c, 40) calc(h + 45));
    /* inchiostro su chiaro: L* <= 42 */
    --ax-g1-ink: lch(from var(--primary) min(l, 42) max(c, 40) calc(h - 30));
    --ax-g2-ink: lch(from var(--primary) min(l, 42) max(c, 40) h);
    --ax-g3-ink: lch(from var(--primary) min(l, 42) max(c, 40) calc(h + 45));
    /* luce su scuro: L* >= 74 */
    --ax-g1-glow: lch(from var(--primary) max(l, 78) min(c, 50) calc(h - 30));
    --ax-g2-glow: lch(from var(--primary) max(l, 76) min(c, 50) h);
    --ax-g3-glow: lch(from var(--primary) max(l, 74) min(c, 50) calc(h + 45));
    --ax-teal-glow: lch(from var(--primary) 82 55 calc(h - 70));
    --ax-surface-2: lch(from var(--primary) 97.5 min(c, 4) h);
    --ax-line: lch(from var(--primary) 92 min(c, 6) h);
  }
}
:root {
  --ax-grad: linear-gradient(100deg, var(--ax-g1), var(--ax-g2) 45%, var(--ax-g3));
  --ax-grad-ink: linear-gradient(100deg, var(--ax-g1-ink), var(--ax-g2-ink) 45%, var(--ax-g3-ink));
  --ax-grad-glow: linear-gradient(100deg, var(--ax-g1-glow), var(--ax-g2-glow) 45%, var(--ax-g3-glow));
  --ax-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--ax-g1) 14%, transparent), color-mix(in srgb, var(--ax-g3) 12%, transparent));
  --ax-link: var(--ax-g2-ink);
  --ax-focus: var(--ax-g2-ink);
}

/* testo a sfumatura: il colore pieno resta come ripiego (e per chi forza i colori) */
.ax-tec-grad-text,
html body .main :is(h1, h2) strong,
html body .main :is(h1, h2) .font-weight-extra-bold {
  background: var(--ax-text-grad, var(--ax-grad-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
/* sui fondi notturni la sfumatura e' di LUCE */
.main > .owl-carousel:first-child,
.main > section.section-angled:first-child,
html body .main section.page-header,
html body .main .home-intro,
html body .main > section.section:is(.bg-primary, .bg-color-primary),
html body section.call-to-action { --ax-text-grad: var(--ax-grad-glow); }
/* sulle fasce di un ALTRO colore di marca la sfumatura non regge il contrasto: testo pieno */
html body .main :is(.bg-secondary, .bg-color-secondary, .bg-tertiary, .bg-color-tertiary, .bg-quaternary, .bg-color-quaternary) :is(h1, h2, h3) :is(strong, .font-weight-extra-bold) {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
@media (forced-colors: active) {
  html body .main :is(h1, h2) :is(strong, .font-weight-extra-bold) { background: none; color: CanvasText !important; -webkit-text-fill-color: CanvasText; }
}

/* --------------------------------------------------------------------------
   1. TIPOGRAFIA
   -------------------------------------------------------------------------- */
body { font-size: 16.5px; line-height: 1.65; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
h5, h6 { font-weight: 600; }
p { text-wrap: pretty; }
html body .main .section h2:is(.text-6, .text-7, .text-8, .text-9) {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em;
}
html body .main .section h2 .font-weight-extra-bold,
html body .main .section h2 strong { font-weight: 700 !important; }
html body .main .section h4 { font-size: 1.2rem; letter-spacing: -.01em; }

/* l'etichetta sopra i titoli (Porto: span positive-ls / text-uppercase in text-color-primary) diventa
   "eyebrow": maiuscoletto spaziato con un trattino a sfumatura davanti */
html body .main span.positive-ls-2.text-color-primary,
html body .main span.d-block.text-color-primary.text-uppercase {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--ax-font) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: var(--ax-g2-ink) !important;
}
html body .main span.positive-ls-2.text-color-primary::before,
html body .main span.d-block.text-color-primary.text-uppercase::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ax-grad);
}

/* --------------------------------------------------------------------------
   2. INTESTAZIONE: blu notte, vetro, navigazione chiara
   -------------------------------------------------------------------------- */
#header .header-body {
  background: color-mix(in srgb, var(--ax-night-900) 92%, transparent) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 0 !important;
  border-bottom: 1px solid var(--ax-night-line) !important;
  box-shadow: none !important;
}
#header .header-nav-bar,
#header .header-nav-bar.bg-primary { background: transparent !important; border-top: 1px solid var(--ax-night-line) !important; }
#header .header-container :is(span, .text-color-dark) { color: var(--ax-night-soft) !important; }
#header .header-container :is(.text-color-primary, i.icons) { color: var(--ax-g2-glow) !important; }
html body #header .header-logo .logo-text {
  color: #fff !important;
  font-family: var(--ax-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
/* logo: le icone quadrate disegnate su fondo bianco (es. CP01, angoli arrotondati ~20% su bianco)
   sul blu notte mostravano gli angoli bianchi e un filo chiaro: ritaglio arrotondato al 21% che toglie
   anche il pixel di bordo. Sui loghi trasparenti delle altre Casse il ritaglio non tocca nulla di
   visibile. Niente alone: clip-path ritaglia anche un filter drop-shadow (provato, 05/11/2026) */
html body #header .header-logo img { clip-path: inset(1px round 21%); }

/* menu e social centrati in altezza sul logo (Porto header-nav-top-line li appoggia in alto) */
@media (min-width: 992px) {
  #header .header-column.justify-content-end > .header-row { align-items: center !important; }
  #header .header-nav.header-nav-top-line,
  #header .header-nav.header-nav-line { align-self: center !important; min-height: 0 !important; }
  #header .header-nav.header-nav-top-line nav > ul > li > a,
  #header .header-nav.header-nav-line nav > ul > li > a { margin-top: 0 !important; }
}
#header .header-social-icons a,
#header .social-icons a { color: var(--ax-night-soft) !important; }
#header .header-social-icons a:hover,
#header .social-icons a:hover { color: #fff !important; }

@media (min-width: 992px) {
  #header #mainNav > li > a,
  #header #mainNav > li > a.nav-link,
  #header #mainNav > li > a.dropdown-item {
    color: var(--ax-night-soft) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    min-height: 0 !important;
    height: auto !important;
    transition: color .2s, background-color .2s;
  }
  #header #mainNav > li { align-self: center !important; }
  #header #mainNav > li:hover > a,
  #header #mainNav > li > a:focus-visible,
  #header #mainNav > li.open > a,
  #header #mainNav > li.accessibility-open > a,
  #header #mainNav > li > a.active,
  #header #mainNav > li.active > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
  }
  #header .header-nav.header-nav-line nav > ul > li > a:before,
  #header .header-nav.header-nav-links nav > ul > li > a:before,
  #header .header-nav.header-nav-top-line nav > ul > li > a:before { display: none !important; }
  /* frecce delle voci con tendina */
  #header #mainNav > li.dropdown > a.dropdown-toggle:after { border-color: var(--ax-night-soft) !important; }

  #header #mainNav .dropdown-menu {
    background: color-mix(in srgb, var(--ax-night-800) 96%, transparent) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--ax-night-line) !important;
    border-top: 1px solid var(--ax-night-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
    padding: 8px !important;
    margin-top: 8px !important;
  }
  #header #mainNav .dropdown-menu li a,
  #header #mainNav .dropdown-menu .dropdown-item {
    color: var(--ax-night-soft) !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    font-size: 14.5px !important;
  }
  #header #mainNav .dropdown-menu li a:hover,
  #header #mainNav .dropdown-menu li a:focus-visible {
    color: #fff !important;
    background: rgba(255, 255, 255, .07) !important;
  }
}

/* bottoni nell'intestazione: pillola a sfumatura con alone */
#header .btn:is(.btn-primary, .btn-secondary) {
  background: var(--ax-grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--ax-g2) 80%, transparent);
}

@media (max-width: 991.98px) {
  #header .header-btn-collapse-nav {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border: 1px solid var(--ax-night-line) !important;
    border-radius: 12px !important;
  }
  #header .header-nav-main nav {
    background: var(--ax-night-900) !important;
    border-top: 1px solid var(--ax-night-line) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
  }
  #header .header-nav-main nav > ul li { border-bottom: 1px solid var(--ax-night-line) !important; }
  #header #mainNav li a,
  #header #mainNav li a.nav-link,
  #header #mainNav li a.dropdown-item { color: #fff !important; }
  #header #mainNav .dropdown-menu { background: var(--ax-night-800) !important; }
  #header #mainNav .dropdown-menu li a { color: var(--ax-night-soft) !important; }
  #header #mainNav li a:hover,
  #header #mainNav li a.active { color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
  #header #mainNav .dropdown-toggle .fa-chevron-down,
  #header #mainNav li.dropdown > a > i { color: var(--ax-night-soft) !important; }
}

/* --------------------------------------------------------------------------
   3. BOTTONI: pillole; il primario a sfumatura con alone
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 999px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: 44px;
  transition: transform .25s var(--ax-ease), box-shadow .25s, background-color .2s, color .2s !important;
}
.btn-primary:not(.btn-outline) {
  background: var(--ax-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--ax-g2) 85%, transparent);
}
.btn-primary:not(.btn-outline):hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--ax-g2) 90%, transparent); }
.btn-outline.btn-primary {
  background: var(--ax-primary-tint) !important;
  border-color: transparent !important;
  color: var(--ax-g2-ink) !important;
}
.btn-outline.btn-primary:hover { background: var(--ax-grad) !important; color: #fff !important; }
.btn-dark { background: var(--ax-night-900) !important; border-color: var(--ax-night-900) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   4. APERTURE SCURE: slider della home, hero, testata delle pagine interne
   La foto (style inline del CMS) resta; sopra, un velo blu notte con due
   aloni di marca. La rete di particelle la aggiunge lo script (.ax-tec-canvas).
   -------------------------------------------------------------------------- */
.main > .owl-carousel:first-child,
.main > section.section-angled:first-child,
html body .main section.page-header.page-header-modern { position: relative; isolation: isolate; }

/* slider della home: il velo Porto (overlay) diventa notte + aloni */
.main > .owl-carousel:first-child .owl-item.overlay::before {
  background:
    radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--ax-g2) 34%, transparent), transparent 70%),
    radial-gradient(40% 50% at 70% 85%, color-mix(in srgb, var(--ax-g1) 22%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ax-night-900) 82%, transparent), color-mix(in srgb, var(--ax-night-950) 92%, transparent)) !important;
  opacity: 1 !important;
}
html body .main > .owl-carousel:first-child:not(#ax-n) .owl-item h2 {
  font-family: var(--ax-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  line-height: 1.05 !important;
  font-size: clamp(2.3rem, 5vw, 4rem) !important;
  background: var(--ax-grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  padding-bottom: .08em;
}
.main > .owl-carousel:first-child .owl-item h3 {
  font-family: var(--ax-font) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  color: var(--ax-g1-glow) !important;
}
.main > .owl-carousel:first-child .owl-item h3::before,
.main > .owl-carousel:first-child .owl-item h3::after { display: none !important; }
.main > .owl-carousel:first-child .owl-item p { color: var(--ax-night-ink) !important; opacity: .92 !important; font-size: 1.15rem !important; }
.main > .owl-carousel:first-child .btn.btn-light {
  background: var(--ax-grad) !important;
  color: #fff !important;
  border: 0 !important;
  text-transform: none !important;
  font-size: 15px !important;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ax-g2) 90%, transparent);
}
.main > .owl-carousel:first-child .owl-dots .owl-dot span { background: rgba(255, 255, 255, .35) !important; }
.main > .owl-carousel:first-child .owl-dots .owl-dot.active span { background: var(--ax-g2-glow) !important; width: 26px; }

/* hero a sezione (altre Casse) */
html body .main > section.section-angled:first-child:not([style*="background-image"]) {
  background:
    radial-gradient(50% 60% at 80% 25%, color-mix(in srgb, var(--ax-g2) 30%, transparent), transparent 70%),
    radial-gradient(35% 45% at 65% 90%, color-mix(in srgb, var(--ax-g1) 20%, transparent), transparent 70%),
    var(--ax-night-900) !important;
}
html body .main > section.section-angled:first-child :is(h1, .text-color-light) { color: #fff !important; opacity: 1 !important; }
html body .main > section.section-angled:first-child p { color: var(--ax-night-soft) !important; opacity: 1 !important; }
html body .main > section.section-angled:first-child .btn.btn-light:not(.btn-outline) { background: var(--ax-grad) !important; color: #fff !important; border: 0 !important; }
html body .main > section.section-angled:first-child .btn.btn-outline.btn-light { border-color: rgba(255, 255, 255, .35) !important; color: #fff !important; background: rgba(255, 255, 255, .04) !important; }
html body .main > section.section-angled:first-child .col-lg-5 i.text-color-light { color: var(--ax-g2-glow) !important; opacity: .9 !important; }

/* testata delle pagine interne */
html body .main section.page-header.page-header-modern {
  background:
    radial-gradient(45% 90% at 85% 10%, color-mix(in srgb, var(--ax-g2) 30%, transparent), transparent 70%),
    radial-gradient(30% 70% at 10% 100%, color-mix(in srgb, var(--ax-g1) 16%, transparent), transparent 70%),
    var(--ax-night-900) !important;
  padding: 3.25rem 0 3rem !important;
  border: 0 !important;
  overflow: hidden;
}
html body .main section.page-header.page-header-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
  pointer-events: none;
}
html body .main section.page-header.page-header-modern > .container { position: relative; z-index: 2; }
html body .main section.page-header.page-header-modern h1 {
  font-family: var(--ax-font-display) !important;
  font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em;
  color: #fff !important;
}
html body .main section.page-header.page-header-modern h1 :is(strong, .font-weight-extra-bold) {
  background: var(--ax-grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
html body .main section.page-header.page-header-modern .sub-title { color: var(--ax-night-soft) !important; opacity: 1 !important; font-size: 1.1rem; }
html body .main section.page-header.page-header-modern :is(.breadcrumb li, .breadcrumb a) {
  color: var(--ax-night-soft) !important;
  opacity: 1 !important;
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 500;
}
html body .main section.page-header.page-header-modern .breadcrumb a:hover { color: #fff !important; }
html body .main section.page-header.page-header-modern .breadcrumb .active { color: var(--ax-g2-glow) !important; }

/* la rete di particelle (aggiunta dallo script) sta sotto il contenuto, sopra il fondo */
.ax-tec-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.main > .owl-carousel:first-child .ax-tec-canvas { z-index: 2; }
.main > .owl-carousel:first-child .owl-item .container { z-index: 3 !important; }

/* barra di avanzamento della lettura (aggiunta dallo script) */
.ax-tec-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  background: var(--ax-grad);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* barra d'introduzione sotto lo slider (Porto .home-intro): fascia notturna, la parola
   evidenziata (carattere calligrafico Porto) torna al carattere dei titoli, a sfumatura luce */
html body .main .home-intro {
  background:
    radial-gradient(40% 140% at 90% 50%, color-mix(in srgb, var(--ax-g2) 26%, transparent), transparent 70%),
    var(--ax-night-800) !important;
  border-top: 1px solid var(--ax-night-line);
  padding: 2rem 0 !important;
}
html body .main .home-intro:not(#ax-n) p {
  color: #fff !important;
  font-family: var(--ax-font-display) !important;
  font-size: 1.45rem !important;
  font-weight: 600 !important;
  letter-spacing: -.015em;
  line-height: 1.3 !important;
}
html body .main .home-intro:not(#ax-n) p > span:not(.highlighted-word) {
  color: var(--ax-night-soft) !important;
  font-family: var(--ax-font) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: normal;
  opacity: 1 !important;
}
html body .main .home-intro:not(#ax-n) .highlighted-word {
  font-family: var(--ax-font-display) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  background: var(--ax-grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
html body .main .home-intro .highlighted-word::after,
html body .main .home-intro .highlighted-word svg { display: none !important; }
html body .main .home-intro .btn { background: #fff !important; color: var(--ax-night-900) !important; border: 0 !important; }

/* richiamo all'informativa cookie sotto il piede: stessa notte del piede */
html body .cc-riapri-bar { background: var(--ax-night-950) !important; border-top: 1px solid var(--ax-night-line); }
html body .cc-riapri-bar .cc-riapri { color: var(--ax-night-soft) !important; }
html body .cc-riapri-bar .cc-riapri:hover { color: #fff !important; }

/* --------------------------------------------------------------------------
   5. SEZIONI CHIARE e FASCE SCURE
   -------------------------------------------------------------------------- */
html body .main section.section { background-color: var(--ax-bg) !important; border: 0 !important; }
html body .main section.section:is(.bg-color-grey, .bg-color-grey-scale-1, .bg-color-light-scale-1, .bg-grey) { background-color: var(--ax-surface-2) !important; }
.main > section.section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.main > section.section.py-5 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }

/* fascia di marca (es. contatori) -> fascia notturna con griglia sfumata */
html body .main > section.section:is(.bg-primary, .bg-color-primary):not([style*="background-image"]) {
  background:
    radial-gradient(40% 80% at 15% 0%, color-mix(in srgb, var(--ax-g1) 22%, transparent), transparent 70%),
    radial-gradient(40% 80% at 90% 100%, color-mix(in srgb, var(--ax-g3) 20%, transparent), transparent 70%),
    var(--ax-night-900) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
html body .main > section.section:is(.bg-primary, .bg-color-primary):not([style*="background-image"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  pointer-events: none;
}
/* (gli elementi che portano un PROPRIO fondo di marca, es. un'etichetta bg-color-tertiary, restano
   alla regola comune di contrasto: bianco o nero secondo quel fondo) */
html body .main > section.section:is(.bg-primary, .bg-color-primary):not(#ax-n) :is(h1, h2, h3, h4, h5, strong, label, .text-color-light, .text-color-dark):not([class*="bg-"]):not(.container [class*="bg-"] *) { color: #fff !important; }
html body .main > section.section:is(.bg-primary, .bg-color-primary):not(#ax-n) :is(p, span, label):not([class*="bg-"]):not(.container [class*="bg-"] *) { color: var(--ax-night-soft) !important; opacity: 1 !important; }
html body .main > section.section:is(.bg-primary, .bg-color-primary):not(#ax-n) :is(i, .icons):not(.container [class*="bg-"] *) { color: var(--ax-g2-glow) !important; opacity: 1 !important; }
/* hero con foto sul primario (es. UD00): il velo di marca Porto diventa notte con alone */
html body .main > section.overlay[style*="background-image"]:first-of-type::before,
html body .main > section.section-angled.overlay[style*="background-image"]::before {
  background:
    radial-gradient(55% 70% at 80% 25%, color-mix(in srgb, var(--ax-g2) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--ax-night-900) 80%, transparent), color-mix(in srgb, var(--ax-night-950) 90%, transparent)) !important;
  opacity: 1 !important;
}
html body .main > section.section-angled:first-child:not(#ax-n) :is(h1, h2, .text-color-light) { color: #fff !important; opacity: 1 !important; }
html body .main > section.section-angled:first-child:not(#ax-n) p { color: var(--ax-night-ink) !important; opacity: .92 !important; }

/* --------------------------------------------------------------------------
   6. CONTATORI: numeri grandi a sfumatura
   -------------------------------------------------------------------------- */
.main .counters .counter { text-align: left; padding: 1.4rem 1.6rem; border-radius: var(--ax-radius); }
html body .main .counters .counter strong {
  font-family: var(--ax-font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 4vw, 3.2rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  background: var(--ax-grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
html body .main .counters .counter label { color: var(--ax-ink-mute) !important; opacity: 1 !important; font-weight: 500 !important; font-size: 15px !important; }
html body .main .counters .counter :is(i, .icons) { color: var(--ax-g2-ink) !important; opacity: 1 !important; }
/* su fondo notturno: sfumatura luce, filetto tra i numeri */
html body .main > section:is(.bg-primary, .bg-color-primary):not(#ax-n) .counters .counter strong { color: transparent !important; background: var(--ax-grad-glow); -webkit-background-clip: text; background-clip: text; }
html body .main > section:is(.bg-primary, .bg-color-primary) .counters .counter label { color: var(--ax-night-soft) !important; }
html body .main > section:is(.bg-primary, .bg-color-primary) .counters .counter :is(i, .icons) { color: var(--ax-g2-glow) !important; }
@media (min-width: 992px) {
  html body .main > section:is(.bg-primary, .bg-color-primary) .counters > [class*="col"] + [class*="col"] .counter { border-left: 1px solid var(--ax-night-line); border-radius: 0; }
}

/* --------------------------------------------------------------------------
   7. SCHEDE: bianche, filetto sottile, ombra morbida, si sollevano
   -------------------------------------------------------------------------- */
html body .main .card {
  background: var(--ax-surface) !important;
  border: 1px solid var(--ax-line) !important;
  border-radius: var(--ax-radius) !important;
  box-shadow: var(--ax-shadow) !important;
  overflow: hidden;
  transition: transform .35s var(--ax-ease), box-shadow .35s, border-color .35s;
}
html body .main .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ax-shadow-lg) !important;
  border-color: color-mix(in srgb, var(--ax-g2) 30%, var(--ax-line)) !important;
}
html body .main .card .card-body { padding: 1.9rem !important; }
html body .main .card h4 { font-family: var(--ax-font-display); font-weight: 600 !important; }
html body .main .card img { border-radius: var(--ax-radius-sm); }
.main .box-shadow-1 { box-shadow: var(--ax-shadow) !important; }
.main .rounded { border-radius: var(--ax-radius) !important; }

/* featured-box (servizi) */
.main .featured-box { background: transparent !important; box-shadow: none !important; border: 0 !important; height: 100%; }
html body .main .featured-box .box-content {
  background: var(--ax-surface) !important;
  border: 1px solid var(--ax-line) !important;
  border-radius: var(--ax-radius) !important;
  box-shadow: var(--ax-shadow);
  padding: 2rem !important;
  height: 100%;
  top: 0;
  transition: transform .35s var(--ax-ease), box-shadow .35s;
}
html body .main .featured-box:hover .box-content { transform: translateY(-4px); box-shadow: var(--ax-shadow-lg); }
.main .featured-box .icon-featured {
  width: 52px !important; height: 52px !important; line-height: 52px !important;
  border-radius: 14px !important;
  background: var(--ax-grad-soft) !important;
  color: var(--ax-g2-ink) !important;
  font-size: 22px !important;
  transform: none !important;
}
.main .featured-box .icon-featured:after { display: none !important; }

/* feature-box (elenchi con icona): l'icona in un riquadro velato */
html body .main .feature-box .feature-box-icon {
  background: var(--ax-grad-soft) !important;
  border-radius: 14px !important;
  width: 52px; height: 52px; min-width: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ax-g2) 14%, transparent);
}
html body .main .feature-box .feature-box-icon i { color: var(--ax-g2-ink) !important; font-size: 22px; position: static; }
html body .main .feature-box .feature-box-info h4 { font-family: var(--ax-font-display); font-weight: 600 !important; }
html body .main .feature-box .feature-box-info a.text-color-primary { font-weight: 600 !important; }
html body .main .feature-box .feature-box-info a .fa-arrow-right { transition: transform .25s var(--ax-ease); }
html body .main .feature-box .feature-box-info a:hover .fa-arrow-right { transform: translateX(4px); }

/* icone "in riga" Porto (icon-*) nei contenuti */
html body .main section.section:not(.bg-primary):not(.bg-color-primary) i.icons.text-color-primary { color: var(--ax-g2-ink) !important; }

/* immagini dei contenuti */
html body .main section.section img.img-fluid:not([src*="logo"]):not([width]) { border-radius: var(--ax-radius); }

/* --------------------------------------------------------------------------
   8. NOTIZIE
   -------------------------------------------------------------------------- */
.main article.post.post-medium {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-radius);
  box-shadow: var(--ax-shadow);
  padding: 1.8rem !important;
  height: 100%;
}
.main article.post .post-content > h4 a { color: var(--ax-ink) !important; }

/* --------------------------------------------------------------------------
   9. CALL TO ACTION: fascia notturna con alone
   -------------------------------------------------------------------------- */
html body .main section.call-to-action:is(.call-to-action-primary, .call-to-action-strong-grey),
html body section.call-to-action.call-to-action-in-footer {
  background:
    radial-gradient(40% 120% at 85% 50%, color-mix(in srgb, var(--ax-g2) 34%, transparent), transparent 70%),
    radial-gradient(30% 100% at 5% 50%, color-mix(in srgb, var(--ax-g3) 20%, transparent), transparent 70%),
    var(--ax-night-800) !important;
  border: 0 !important;
  padding: 3.5rem 0 !important;
}
html body section.call-to-action:not(#ax-n) :is(h1, h2, h3, h4, strong) { color: #fff !important; font-family: var(--ax-font-display); letter-spacing: -.02em; }
html body section.call-to-action:not(#ax-n) :is(p, span, .text-color-dark, .text-color-grey) { color: var(--ax-night-soft) !important; opacity: 1 !important; }
html body section.call-to-action:not(#ax-n) h3 :is(strong, .font-weight-extra-bold),
html body section.call-to-action:not(#ax-n) h2 :is(strong, .font-weight-extra-bold) {
  background: var(--ax-grad-glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
html body section.call-to-action:not(#ax-n) .btn:not(.btn-outline) {
  background: #fff !important;
  color: var(--ax-night-900) !important;
  border: 0 !important;
  padding: .9rem 1.7rem !important;
}
html body section.call-to-action .btn:not(.btn-outline):hover { transform: translateY(-2px); }
html body section.call-to-action .btn.btn-outline { color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; background: rgba(255, 255, 255, .04) !important; }
.main .call-to-action.call-to-action-in-footer:before,
.call-to-action.call-to-action-in-footer:before { display: none !important; }

/* --------------------------------------------------------------------------
   10. PIEDE: notte profonda, titoli in maiuscoletto
   -------------------------------------------------------------------------- */
html body footer#footer {
  background: var(--ax-night-950) !important;
  color: var(--ax-night-soft);
  border-top: 1px solid var(--ax-night-line) !important;
  font-size: 15px;
}
html body footer#footer :is(p, li, span, i, .text-color-light) { color: var(--ax-night-soft) !important; opacity: 1 !important; }
html body footer#footer :is(h4, h5, .footer-title) {
  color: #fff !important;
  font-family: var(--ax-font) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
}
html body footer#footer a:not(.btn) { text-decoration: none; transition: color .2s; }
html body footer#footer .border-top,
html body footer#footer .border-color-light-5,
html body footer#footer .footer-copyright { border-color: var(--ax-night-line) !important; background: transparent !important; }
html body footer#footer .footer-copyright p,
html body footer#footer .row.border-top p { font-size: 13px !important; }
html body footer#footer .social-icons li a { background: rgba(255, 255, 255, .06) !important; border-radius: 10px !important; }

/* --------------------------------------------------------------------------
   11. ELENCHI DOCUMENTI, TABELLE, MODULI: base comune + angoli dello stile
   -------------------------------------------------------------------------- */
.main ul.list.list-icons li > [class*="fa-"],
.main ul.list.list-icons li > i { color: var(--ax-g2-ink) !important; }
.main .table-responsive { border-radius: var(--ax-radius-sm); border: 1px solid var(--ax-line); }
.main .table-responsive > .table { margin-bottom: 0; }
html body .main .table thead:is(.bg-primary, .bg-secondary, .bg-color-primary) th,
html body .main .table tr:is(.bg-primary, .bg-secondary, .bg-color-primary, .bg-color-secondary) > th {
  background: var(--ax-night-900) !important;
  color: #fff !important;
  border-color: var(--ax-night-800) !important;
}
.main .alert { border-radius: var(--ax-radius-sm); }
html body .main .alert-secondary:not(#ax-n) {
  --bs-alert-bg: var(--ax-surface-2);
  --bs-alert-color: var(--ax-ink);
  --bs-alert-border-color: var(--ax-line);
  background: var(--ax-surface-2) !important;
  color: var(--ax-ink) !important;
  border-color: var(--ax-line) !important;
}
html body .main .alert-secondary:not(#ax-n) :is(strong, p, span, a) { color: var(--ax-ink) !important; }
.form-control, .form-select { border-radius: var(--ax-radius-sm); }

/* --------------------------------------------------------------------------
   12. MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .main > section.section, .main > section.section.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  html body .main section.page-header.page-header-modern { padding: 2.5rem 0 2.25rem !important; }
  html body .main .card .card-body { padding: 1.5rem !important; }
}

/* --------------------------------------------------------------------------
   13. MOVIMENTO RIDOTTO: niente sollevamenti
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html body .main .card:hover,
  html body .main .featured-box:hover .box-content,
  .btn-primary:not(.btn-outline):hover,
  html body section.call-to-action .btn:hover { transform: none !important; }
}