/*******************************************************************/
/* CSS NUOVAIR.COM - AUTHOR MARCO SPIRONELLI - ALL RIGHTS RESERVED */
/*******************************************************************/

@charset "UTF-8";

/* IMPORT FONTS */

@font-face {
  font-family: "New Frank";
  src:
    url("../fonts/new_frank/new_frank_light.woff2") format("woff2"),
    url("../fonts/new_frank/new_frank_light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "New Frank";
  src:
    url("../fonts/new_frank/new_frank_regular.woff2") format("woff2"),
    url("../fonts/new_frank/new_frank_regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "New Frank";
  src:
    url("../fonts/new_frank/new_frank_medium.woff2") format("woff2"),
    url("../fonts/new_frank/new_frank_medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* VARIABILI */

:root {
  /* colori */
  --colore1: rgba(26, 33, 46, 1); /* Blu scuro */
  --colore2: rgba(51, 65, 92, 1); /* Blu medio */
  --colore3: rgba(51, 177, 175, 1); /* Verde acqua */
  --colore4: rgba(53, 53, 52, 1); /* Grigio scuro */
  --colore5: rgba(247, 247, 247, 1); /* Grigio chiaro */
  --colore6: rgba(255, 255, 255, 1); /* Bianco */

  /* colori opacità 0 */
  --colore100: rgba(26, 33, 46, 0); /* Blu scuro */
  --colore200: rgba(51, 65, 92, 0); /* Blu medio */
  --colore300: rgba(51, 177, 175, 0); /* Verde acqua */
  --colore400: rgba(53, 53, 52, 0); /* Grigio scuro */
  --colore500: rgba(247, 247, 247, 0); /* Grigio chiaro */
  --colore600: rgba(255, 255, 255, 0); /* Bianco */

  /* colori trasparenze */
  --colore170: rgba(26, 33, 46, 0.7); /* Blu scuro 70% */
  --colore180: rgba(26, 33, 46, 0.8); /* Blu scuro 80% */
  --colore130: rgba(26, 33, 46, 0.3); /* Blu scuro 30% */
  --colore110: rgba(26, 33, 46, 0.1); /* Blu scuro 10% */
  --colore105: rgba(26, 33, 46, 0.05); /* Blu scuro 5% */
  --colore150: rgba(26, 33, 46, 0.5); /* Blu scuro 50% */
  --colore350: rgba(51, 177, 175, 0.5); /* Verde acqua 50% */
  --colore490: rgba(53, 53, 52, 0.9); /* Grigio scuro 90% */
  --colore550: rgba(247, 247, 247, 0.5); /* Grigio chiaro 50% */
  --colore650: rgba(255, 255, 255, 0.5); /* Bianco 50% */
  --colore630: rgba(255, 255, 255, 0.3); /* Bianco 30% */
  --colore610: rgba(255, 255, 255, 0.1); /* Bianco 10% */
  --colore690: rgba(255, 255, 255, 0.9); /* Bianco 90% */
  
  /* caratteri */
  --font-new-frank: "New Frank", sans-serif;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --style-normal: normal;
  --line-height-base: 1.5;

  /* fluid resize in riferimento al layout preparato */
  /* larghezza layout in px */
  --layout-width: 1280;
  /* fattori di scala */
  --scale-min: 0.85; /* 3/4 */
  --scale-max: 1.15; /* 5/4 */
  /* clamp generale in px */
  --g-clamp: clamp(calc(1px * var(--scale-min)), calc(1 / var(--layout-width) * 100vw), calc(1px * var(--scale-max)));
  /* clamp generale in px limitato */
  --g-clamp-limited: clamp(calc(1px * var(--scale-min)), calc(1 / var(--layout-width) * 100vw), 1px);

  /* resize testi */
  /* misure di base */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-48: 48px;
  --font-size-58: 58px;

  /* formule clamp */
  --font-clamp-10: clamp(calc(var(--font-size-10) * var(--scale-min)), calc(10 / var(--layout-width) * 100vw), calc(var(--font-size-10) * var(--scale-max)));
  --font-clamp-12: clamp(calc(var(--font-size-12) * var(--scale-min)), calc(12 / var(--layout-width) * 100vw), calc(var(--font-size-12) * var(--scale-max)));
  --font-clamp-14: clamp(calc(var(--font-size-14) * var(--scale-min)), calc(14 / var(--layout-width) * 100vw), calc(var(--font-size-14) * var(--scale-max)));
  --font-clamp-16: clamp(calc(var(--font-size-16) * var(--scale-min)), calc(16 / var(--layout-width) * 100vw), calc(var(--font-size-16) * var(--scale-max)));
  --font-clamp-18: clamp(calc(var(--font-size-18) * var(--scale-min)), calc(18 / var(--layout-width) * 100vw), calc(var(--font-size-18) * var(--scale-max)));
  --font-clamp-24: clamp(calc(var(--font-size-24) * var(--scale-min)), calc(24 / var(--layout-width) * 100vw), calc(var(--font-size-24) * var(--scale-max)));
  --font-clamp-25: clamp(calc(var(--font-size-25) * var(--scale-min)), calc(25 / var(--layout-width) * 100vw), calc(var(--font-size-25) * var(--scale-max)));
  --font-clamp-32: clamp(calc(var(--font-size-32) * var(--scale-min)), calc(32 / var(--layout-width) * 100vw), calc(var(--font-size-32) * var(--scale-max)));
  --font-clamp-48: clamp(calc(var(--font-size-48) * var(--scale-min)), calc(48 / var(--layout-width) * 100vw), calc(var(--font-size-48) * var(--scale-max)));
  --font-clamp-58: clamp(calc(var(--font-size-58) * var(--scale-min)), calc(58 / var(--layout-width) * 100vw), calc(var(--font-size-58) * var(--scale-max)));

  /* resize margini e padding */
  /* misure di base */
  --spacer-size-1: 1px;
  --spacer-size-4: 4px;
  --spacer-size-8: 8px;
  --spacer-size-16: 16px;
  --spacer-size-32: 32px;
  --spacer-size-64: 64px;
  --spacer-size-96: 96px;
  --spacer-size-128: 128px;
  --spacer-size-160: 160px;
  --spacer-size-200: 200px;

  /* formule clamp */
  --spacer-clamp-1: clamp(calc(var(--spacer-size-1) * var(--scale-min)), calc(1 / var(--layout-width) * 100vw), calc(var(--spacer-size-1) * var(--scale-max)));
  --spacer-clamp-4: clamp(calc(var(--spacer-size-4) * var(--scale-min)), calc(4 / var(--layout-width) * 100vw), calc(var(--spacer-size-4) * var(--scale-max)));
  --spacer-clamp-8: clamp(calc(var(--spacer-size-8) * var(--scale-min)), calc(8 / var(--layout-width) * 100vw), calc(var(--spacer-size-8) * var(--scale-max)));
  --spacer-clamp-16: clamp(calc(var(--spacer-size-16) * var(--scale-min)), calc(16 / var(--layout-width) * 100vw), calc(var(--spacer-size-16) * var(--scale-max)));
  --spacer-clamp-32: clamp(calc(var(--spacer-size-32) * var(--scale-min)), calc(32 / var(--layout-width) * 100vw), calc(var(--spacer-size-32) * var(--scale-max)));
  --spacer-clamp-64: clamp(calc(var(--spacer-size-64) * var(--scale-min)), calc(64 / var(--layout-width) * 100vw), calc(var(--spacer-size-64) * var(--scale-max)));
  --spacer-clamp-96: clamp(calc(var(--spacer-size-96) * var(--scale-min)), calc(96 / var(--layout-width) * 100vw), calc(var(--spacer-size-96) * var(--scale-max)));
  --spacer-clamp-128: clamp(calc(var(--spacer-size-128) * var(--scale-min)), calc(128 / var(--layout-width) * 100vw), calc(var(--spacer-size-128) * var(--scale-max)));
  --spacer-clamp-160: clamp(calc(var(--spacer-size-160) * var(--scale-min)), calc(160 / var(--layout-width) * 100vw), calc(var(--spacer-size-160) * var(--scale-max)));
  --spacer-clamp-200: clamp(calc(var(--spacer-size-200) * var(--scale-min)), calc(200 / var(--layout-width) * 100vw), calc(var(--spacer-size-200) * var(--scale-max)));

  /* misura larghezza colonna se boxed largo */
  --lar-col: calc((90vw - (var(--spacer-size-32) * 7)) / 8);
  /* misura larghezza colonna se boxed stretto */
  --lar-col-st: calc((80vw - (var(--spacer-size-32) * 7)) / 8);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
} /*ok*/

/* RESET E IMPOSTAZIONI GENERALI HTML */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: var(--font-new-frank);
  font-weight: var(--weight-light);
  font-style: var(--style-normal);
  font-size: 16px;
  line-height: 1;
  width: 100%;
  background-color: var(--colore6); /* SFONDO Bianco */
  color: var(--colore1); /* TUTTI I TESTI Blu scuro */
  text-align: left; /* TUTTI I TESTI A SINISTRA */
  scroll-behavior: smooth; /* SMOOTH SCROLLING */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* PATCH PER FONT BOLDED SU FIREFOX */
  -webkit-tap-highlight-color: transparent; /* ELIMINA FLASH AL CLICK SU MOBILE */
}

body.openMob,
body.openReq,
body.openFlip {
  height: 100%;
  overflow: hidden;
  touch-action: none; /* Disabilita lo scroll tramite touch */
}

div {
  display: block;
  position: relative;
  float: left;
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

img {
  -webkit-user-drag: none;
}

button,
input,
textarea,
select {
  /* Resetta gli stili di base */
  font: inherit;
  background: none;
  border: none;
  border-radius: 0;
  /* Rimuove margini e padding predefiniti */
  margin: 0;
  padding: 0;
  /* Imposta il box model corretto */
  box-sizing: border-box;
  /* Resetta gli stili specifici dei browser */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Resetta lo stato di focus e il cursore */
  outline: none;
  cursor: pointer;
  /* Resetta la decorazione del testo (utile per i link button) */
  text-decoration: none;
}

/* Bersaglia l'autofill su tutti i campi di testo comuni */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--colore6) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--colore2) inset !important;
  box-shadow: 0 0 0px 1000px var(--colore2) inset !important;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--colore3); /* Un outline visibile */
  outline-offset: 2px; /* Dista dal bordo per maggiore chiarezza */
}

/* initSezioniRco() (main.js) sposta il focus su questi elementi (non
   nativamente interattivi) dopo un filtro nella colonna grigia, per
   segnalare il cambiamento a chi naviga da tastiera/screen reader. A
   differenza di button/a qui sopra, niente ":focus-visible" che lo
   riattiva: essendo tabindex="-1" non fanno mai parte della normale
   navigazione da Tab (ci si arriva solo via JS dopo un click), quindi non
   c'è mai un caso legittimo in cui questo bordo debba comparire. */
.titSezRco:focus,
#documenti-tutti:focus {
  outline: none;
}

button {
  color: var(--colore1); /* TESTI Blu scuro */
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
  font-weight: inherit;
}

q,
blockquote {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

i,
em {
  font-style: italic;
}

address {
  font-style: normal;
}

/* CARATTERI */

.t_newfrank_light {
  font-family: var(--font-new-frank);
  font-weight: var(--weight-light);
  font-style: var(--style-normal);
  line-height: var(--line-height-base);
}

.t_newfrank_regular {
  font-family: var(--font-new-frank);
  font-weight: var(--weight-regular);
  font-style: var(--style-normal);
  line-height: var(--line-height-base);
}

.t_newfrank_medium {
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-style: var(--style-normal);
  line-height: var(--line-height-base);
}

.t_newfrank_regular strong,
.t_newfrank_light strong {
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-style: var(--style-normal);
  line-height: var(--line-height-base);
}

.t_newfrank_light em,
.t_newfrank_regular em,
.t_newfrank_medium em,
.t_newfrank_regular em strong,
.t_newfrank_light em strong{
  font-style: italic !important;
}


/* COLORI BACKGROUND */

.c_bg_blu_scuro {
  background-color: var(--colore1);
}

.c_bg_blu_medio {
  background-color: var(--colore2);
}

.c_bg_verde_acqua {
  background-color: var(--colore3);
}

.c_bg_grigio_scuro {
  background-color: var(--colore4);
}

.c_bg_grigio_chiaro {
  background-color: var(--colore5);
}

.c_bg_bianco {
  background-color: var(--colore6);
}

.c_bg_blu_scuro_70 {
  background-color: var(--colore170);
}

.c_bg_blu_scuro_10 {
  background-color: var(--colore110);
}

.c_bg_blu_scuro_05 {
  background-color: var(--colore105);
}

.c_bg_grigio_scuro_90 {
  background-color: var(--colore490);
}

.c_bg_grigio_chiaro_50 {
  background-color: var(--colore550);
}

.c_bg_bianco_10 {
  background-color: var(--colore610);
}

.c_bg_bianco_90 {
  background-color: var(--colore690);
}

/* SFUMATURE */

.c_bg_sf_blu_scuro_v {
  background: linear-gradient(180deg, var(--colore1) 0%, var(--colore100) 100%);
}

.c_bg_sf_blu_scuro_h {
  background: linear-gradient(90deg, var(--colore1) 0%, var(--colore100) 100%);
}

.c_bg_sf_blu_scuro_blu_medio_h {
  background: linear-gradient(90deg, var(--colore1) 0%, var(--colore2) 100%);
}

.c_bg_sf_blu_scuro_blu_medio_d45 {
  background: linear-gradient(45deg, var(--colore1) 0%, var(--colore2) 100%);
}

.c_bg_sf_blu_scuro_blu_medio_d135 {
  background: linear-gradient(135deg, var(--colore1) 0%, var(--colore2) 100%);
}

.c_bg_sf_blu_scuro_80_100_d45 {
  background: linear-gradient(45deg, var(--colore180) 0%, var(--colore1) 100%);
}

.c_bg_sf_blu_scuro_80_100_d315 {
  background: linear-gradient(315deg, var(--colore180) 0%, var(--colore1) 100%);
}

.c_bg_sf_grigio_chiaro_bianco_h {
  background: linear-gradient(90deg, var(--colore5) 0%, var(--colore6) 100%);
}

.c_bg_sf_bianco_grigio_chiaro_h {
  background: linear-gradient(90deg, var(--colore6) 0%, var(--colore5) 100%);
}

.c_bg_sf_bianco_30_10_d45 {
  background: linear-gradient(45deg, var(--colore630) 0%, var(--colore610) 100%);
}

.c_bg_sf_bianco_30_10_d315 {
  background: linear-gradient(315deg, var(--colore630) 0%, var(--colore610) 100%);
}

/* COLORI TESTI */

.c_text_blu_scuro,
.c_text_blu_scuro a {
  color: var(--colore1);
}

.c_text_blu_medio,
.c_text_blu_medio a {
  color: var(--colore2);
}

.c_text_verde_acqua,
.c_text_verde_acqua a {
  color: var(--colore3);
}

.c_text_grigio_scuro,
.c_text_grigio_scuro a {
  color: var(--colore4);
}

.c_text_grigio_chiaro,
.c_text_grigio_chiaro a {
  color: var(--colore5);
}

.c_text_bianco,
.c_text_bianco a {
  color: var(--colore6);
}

.c_text_bianco_50,
.c_text_bianco_50 a {
  color: var(--colore650);
}

/* KERNING */

/*.t_ker{
	letter-spacing: .1em;
}*/

/* COLORI PLACEHOLDER FORMS */

::placeholder {
  color: var(--colore550);
  opacity: 1;
}

/* COLORI BORDI */

.c_bor_blu_scuro {
  border-color: var(--colore1) !important;
}

.c_bor_blu_medio {
  border-color: var(--colore2) !important;
}

.c_bor_verde_acqua {
  border-color: var(--colore3) !important;
}

.c_bor_grigio_scuro {
  border-color: var(--colore4) !important;
}

.c_bor_grigio_chiaro {
  border-color: var(--colore5) !important;
}

.c_bor_bianco {
  border-color: var(--colore6) !important;
}

.c_bor_blu_scuro_10 {
  border-color: var(--colore110) !important;
}

.c_bor_blu_scuro_30 {
  border-color: var(--colore130) !important;
}

.c_bor_blu_scuro_05 {
  border-color: var(--colore105) !important;
}

.c_bor_bianco_50 {
  border-color: var(--colore650) !important;
}

/* ANIMAZIONI CSS */

.animato {
  transition: all 0.2s ease-out !important;
}

.animatoMedio {
  transition: all 0.5s ease-out !important;
}

.animatoMedioLinear {
  transition: all 0.5s linear !important;
}

.animatoLento {
  transition: all 1s ease-out !important;
}

.animato_rit02 {
  transition: all 0.2s 0.2s ease-out !important;
}
.animato_rit05 {
  transition: all 0.2s 0.5s ease-out !important;
}
.animato_rit1 {
  transition: all 0.2s 1s ease-out !important;
}
.animatoMedio_rit02 {
  transition: all 0.5s 0.2s ease-out !important;
}
.animatoMedio_rit05 {
  transition: all 0.5s 0.5s ease-out !important;
}
.animatoMedio_rit1 {
  transition: all 0.5s 1s ease-out !important;
}
.animatoLento_rit02 {
  transition: all 1s 0.2s ease-out !important;
}
.animatoLento_rit05 {
  transition: all 1s 0.5s ease-out !important;
}
.animatoLento_rit1 {
  transition: all 1s 1s ease-out !important;
}

/* ANIMAZIONI PROSPETTIVA */

@keyframes float3ddx {
  0%   { transform: rotateX(20deg) rotateY(20deg) rotateZ(-5deg); }
  50%  { transform: rotateX(30deg) rotateY(10deg) rotateZ(-5deg); }
  100% { transform: rotateX(20deg) rotateY(20deg) rotateZ(-5deg); }
}

@keyframes float3dsx {
  0%   { transform: rotateX(20deg) rotateY(-20deg) rotateZ(5deg); }
  50%  { transform: rotateX(30deg) rotateY(-10deg) rotateZ(5deg); }
  100% { transform: rotateX(20deg) rotateY(-20deg) rotateZ(5deg); }
}

/* Rispetta la preferenza di sistema "riduci il movimento": disattiva
   transizioni e animazioni ovunque siano usate nel sito. Le classi .animato*
   qui sopra usano !important, quindi vanno ri-targetizzate esplicitamente
   (stessa specificità, ma dichiarate dopo: vincono in cascata) */
@media (prefers-reduced-motion: reduce) {
  .animato,
  .animatoMedio,
  .animatoMedioLinear,
  .animatoLento,
  .animato_rit02,
  .animato_rit05,
  .animato_rit1,
  .animatoMedio_rit02,
  .animatoMedio_rit05,
  .animatoMedio_rit1,
  .animatoLento_rit02,
  .animatoLento_rit05,
  .animatoLento_rit1 {
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* DISABILITARE SELEZIONE TESTO */

.disable-select {
  user-select: none;
}

/* GESTIONE PEDICI */

sub {
  font-size: 70%;
  line-height: 1;
}

/* UPPERCASE */

.tc_upp {
  text-transform: uppercase;
}

/* DIMENSIONI TESTI */

.tt10 {
  font-size: var(--font-clamp-10);
}

.tt12 {
  font-size: var(--font-clamp-12);
}

.tt14 {
  font-size: var(--font-clamp-14);
}

.tt16 {
  font-size: var(--font-clamp-16);
}

.tt18 {
  font-size: var(--font-clamp-18);
}

.tt24 {
  font-size: var(--font-clamp-24);
}

.tt32 {
  font-size: var(--font-clamp-32);
}

.tt48 {
  font-size: var(--font-clamp-48);
}

.tt58 {
  font-size: var(--font-clamp-58);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .tt12 {
    font-size: var(--font-size-12);
  }

  .tt14 {
    font-size: var(--font-size-14);
  }

  .tt16 {
    font-size: var(--font-size-16);
  }

  .tt18 {
    font-size: var(--font-size-18);
  }

  .tt24 {
    font-size: var(--font-size-24);
  }

  .tt32 {
    font-size: var(--font-size-32);
  }

  .tt48 {
    font-size: var(--font-size-32);
  }

  .tt58 {
    font-size: var(--font-size-48);
  }
}

/* GENERALI LAYOUT */

.centrato {
  min-height: var(--spacer-clamp-16);
  /*width: 100vw;*/
  margin-left: 50vw;
  transform: translateX(-50%);
  /*max-width: 1400px;*/
  /*background-color: rgba(0, 0, 0, 0.5);*/
}

.centrato img {
  width: 100%;
}

.spacer8 {
  width: 100%;
  height: var(--spacer-clamp-8);
  clear: both;
}

.spacer16 {
  width: 100%;
  height: var(--spacer-clamp-16);
  clear: both;
}

.spacer32 {
  width: 100%;
  height: var(--spacer-clamp-32);
  clear: both;
}

.spacer64 {
  width: 100%;
  height: var(--spacer-clamp-64);
  clear: both;
}

.spacer96 {
  width: 100%;
  height: var(--spacer-clamp-96);
  clear: both;
}

.spacer128 {
  width: 100%;
  height: var(--spacer-clamp-128);
  clear: both;
}

.spacer160 {
  width: 100%;
  height: var(--spacer-clamp-160);
  clear: both;
}

.spacer200 {
  width: 100%;
  height: var(--spacer-clamp-200);
  clear: both;
}

.ci,
.ci2 {
  /*overflow: hidden;*/
}

.ci img,
.ci2 img {
  width: 100%;
  height: 100%;
}

.ci img {
  object-fit: cover;
  object-position: center;
}

.ci2 img {
  object-fit: contain;
  object-position: center;
}

/* Top Left (Alto Sinistra) */
.ci.citl img {
  object-position: top left;
}

/* Top Center (Alto Centro) */
.ci.citc img {
  object-position: top center;
}

/* Top Right (Alto Destra) */
.ci.citr img {
  object-position: top right;
}

/* Middle Left (Centro Sinistra) */
.ci.ciml img {
  object-position: left center;
}

/* Middle Center (Centro Centro - Default) */
.ci.cimc img {
  object-position: center center;
}

/* Middle Right (Centro Destra) */
.ci.cimr img {
  object-position: right center;
}

/* Bottom Left (Basso Sinistra) */
.ci.cibl img {
  object-position: bottom left;
}

/* Bottom Center (Basso Centro) */
.ci.cibc img,
.ci2.cibc img {
  object-position: bottom center;
}

/* Bottom Right (Basso Destra) */
.ci.cibr img {
  object-position: bottom right;
}

.ci .ci2 img {
  object-fit: contain;
}

.exh {
  cursor: pointer;
}

/* Sezioni in evidenza */

.sfGrigioChiaro{
  padding: calc(var(--spacer-size-1) * 80) 0px;
  background-color: var(--colore5);
}

.sfBluSfumato{
  padding: calc(var(--spacer-size-1) * 80) 0px;
  background: linear-gradient(90deg, var(--colore1) 0%, var(--colore2) 100%);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .spacer8 {
    height: var(--spacer-size-8);
  }

  .spacer16 {
    height: var(--spacer-size-16);
  }

  .spacer32 {
    height: var(--spacer-size-32);
  }

  .spacer64 {
    height: var(--spacer-size-64);
  }

  .spacer96 {
    height: var(--spacer-size-96);
  }

  .spacer128 {
    height: var(--spacer-size-128);
  }

  .spacer160 {
    height: var(--spacer-size-160);
  }

  .spacer200 {
    height: var(--spacer-size-200);
  }
}

/* SCROLL CHECK */

.ckcScroll {
  display: block;
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  left: 0px;
  top: 50px;
}

/* ACCESSIBILITY */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skipLink {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 950;
  padding: var(--spacer-size-16) var(--spacer-size-32);
  transform: translateY(-100%);
}

.skipLink:focus {
  transform: translateY(0%);
}

/* WP */

#wpadminbar div{
  float: none;
}

/* BUTTONS */

.btn_16_blu_scuro {
  display: block;
  position: relative;
  float: left;
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-size: var(--font-clamp-16);
  color: var(--colore6);
  background: linear-gradient(270deg, var(--colore1) 0%, var(--colore2) 100%);
  text-transform: uppercase;
  padding: calc(var(--spacer-size-1) * 10) calc(var(--spacer-size-1) * 20);
  transition: all 0.2s ease-out !important;
}

.btn_16_blu_scuro:after{
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  background-color: var(--colore1);
  border-radius: 0px 0px 4px 0px;
  left: calc( 1px + 100% );
  top:0px;
  background-repeat: no-repeat;
  background-size: calc( 100% - (var(--spacer-size-1) * 24));
  background-position: center center;
  background-image: url("../images/na_fr_tr_bianco.svg");
  transition: background-position 0.2s ease;
}

.btn_16_blu_scuro:hover::after {
  background-position: calc(50% + 2px) calc(50% - 2px);
}

.btn_16_blu_scuro:before{
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 1px;
  top:0px;
  right: -1px;
}

.btn_16_blu_scuro.btndl:after{
  background-image: url("../images/na_fr_br_bianco.svg");
}

.btn_16_blu_scuro.btndl:hover::after {
  background-position: calc(50% + 2px) calc(50% + 2px);
}

/* Stessa identica regola di .btn_16_blu_scuro qui sopra, solo con il font
   più piccolo: usata su richiesta di Marco per i pulsanti "Scarica"/
   "Sfoglia" degli item file dell'area riservata (.itemRcoFile), che
   devono restare più compatti dei pulsanti principali usati nel resto
   delle pagine — stesso ruolo di .btn_14_bordo_blu qui sotto per i
   pulsanti a bordo. */
.btn_14_blu_scuro {
  display: block;
  position: relative;
  float: left;
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-size: var(--font-clamp-14);
  color: var(--colore6);
  background: linear-gradient(270deg, var(--colore1) 0%, var(--colore2) 100%);
  text-transform: uppercase;
  padding: calc(var(--spacer-size-1) * 6) calc(var(--spacer-size-1) * 20);
  transition: all 0.2s ease-out !important;
}

.btn_14_blu_scuro:after{
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  background-color: var(--colore1);
  border-radius: 0px 0px 4px 0px;
  left: calc( 1px + 100% );
  top:0px;
  background-repeat: no-repeat;
  background-size: calc( 100% - (var(--spacer-size-1) * 16));
  background-position: center center;
  background-image: url("../images/na_fr_tr_bianco.svg");
  transition: background-position 0.2s ease;
}

.btn_14_blu_scuro:hover::after {
  background-position: calc(50% + 2px) calc(50% - 2px);
}

.btn_14_blu_scuro:before{
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 1px;
  top:0px;
  right: -1px;
}

.btn_14_blu_scuro.btndl:after{
  background-image: url("../images/na_fr_br_bianco.svg");
}

.btn_14_blu_scuro.btndl:hover::after {
  background-position: calc(50% + 2px) calc(50% + 2px);
}

.btn_16_bordo_bianco {
  display: block;
  position: relative;
  float: left;
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-size: var(--font-clamp-16);
  color: var(--colore6);
  text-transform: uppercase;
  border: 1px solid var(--colore6);
  box-sizing: border-box;
  padding: calc(var(--spacer-size-1) * 15) calc(var(--spacer-size-1) * 20);
  border-radius: calc(var(--spacer-size-1) * 3);
  transition: all 0.2s ease-out !important;
}

.btn_16_bordo_bianco:hover {
  background-color: var(--colore6);
  color: var(--colore1);
}

.btn_16_bordo_blu {
  display: block;
  position: relative;
  float: left;
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-size: var(--font-clamp-16);
  color: var(--colore1);
  text-transform: uppercase;
  border: 1px solid var(--colore1);
  box-sizing: border-box;
  padding: calc(var(--spacer-size-1) * 15) calc(var(--spacer-size-1) * 20);
  border-radius: calc(var(--spacer-size-1) * 3);
  transition: all 0.2s ease-out !important;
}

.btn_16_bordo_blu:hover {
  background-color: var(--colore1);
  color: var(--colore6);
}

/* Stessa identica regola di .btn_16_bordo_blu, solo con il font più
   piccolo: usata per i pulsanti della colonna grigia ".colLogRco"
   (Accedi/Registrati/Il mio profilo/Logout/Torna all'area download/
   categorie documenti PRO), che devono restare più compatti dei pulsanti
   principali usati nel resto delle pagine. */
.btn_14_bordo_blu {
  display: block;
  position: relative;
  float: left;
  font-family: var(--font-new-frank);
  font-weight: var(--weight-medium);
  font-size: var(--font-clamp-14);
  color: var(--colore1);
  text-transform: uppercase;
  border: 1px solid var(--colore1);
  box-sizing: border-box;
  padding: calc(var(--spacer-size-1) * 15) calc(var(--spacer-size-1) * 20);
  border-radius: calc(var(--spacer-size-1) * 3);
  transition: all 0.2s ease-out !important;
}

.btn_14_bordo_blu:hover {
  background-color: var(--colore1);
  color: var(--colore6);
}

@media (pointer: coarse) and (any-pointer: coarse) and (any-hover: none) { /* Stili per dispositivi touch */
  .btn_16_blu_scuro:hover::after,
  .btn_16_blu_scuro.btndl:hover::after,
  .btn_14_blu_scuro:hover::after,
  .btn_14_blu_scuro.btndl:hover::after {
    background-position: 50% 50%;
  }

  .btn_16_bordo_bianco:hover {
    background-color: var(--colore1);
    color: var(--colore6);
  }

  .btn_16_bordo_blu:hover {
    background-color: var(--colore6);
    color: var(--colore1);
  }

  .btn_14_bordo_blu:hover {
    background-color: var(--colore6);
    color: var(--colore1);
  }

}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
}

/* FORM */

.rigaform {
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 50);
}

.rigaform:last-of-type {
  margin-bottom: 0px;
}

/* Form di registrazione: i campi PRO (e dentro a quelli, la matricola) sono
   avvolti in un div per poterli mostrare/nascondere solo con la spunta "voglio
   anche attivare il profilo PRO"/la categoria "Cliente". Essendo quindi
   nidificati, senza questa regola .rigaform:last-of-type li considera "ultimi"
   nel LORO contenitore e azzera il loro margine inferiore, anche se non sono
   affatto l'ultimo campo del form: qui lo ripristiniamo. */
#regCampiPro .rigaform:last-of-type {
  margin-bottom: calc(var(--spacer-size-1) * 50);
}

/* Nasconde per certo i campi PRO/matricola quando l'attributo "hidden" è
   attivo (nessuna animazione, come richiesto): non ci si affida al solo
   comportamento nativo del browser, così resta valido anche se in futuro
   qualche altra regola su .rigaform/div dovesse impostare un "display".
   #proCampoMatricola (2026-08-24): stesso campo ma nel form "Richiedi
   profilo PRO" (page-richiedi-professionista-area-riservata.php) — bug
   segnalato da Marco: senza questa riga restava sempre visibile e sempre
   obbligatorio, perché .rigaform imposta un suo "display" che vince
   sull'attributo "hidden" nativo esattamente come per gli altri due qui
   sopra. */
#regCampiPro[hidden],
#regCampoMatricola[hidden],
#proCampoMatricola[hidden] {
  display: none;
}

.rigaform.rigaformtre{
  width: calc( ( 100% - var(--spacer-size-64 ) ) / 3 );
  margin-right: var(--spacer-size-32);
}

.rigaform.rigaformtre.ultimacolonna{
  margin-right: 0px;
}

.rigaform.rigaformdue{
  width: calc( ( 100% - var(--spacer-size-32 ) ) / 2 );
  margin-right: var(--spacer-size-32);
}

.rigaform.rigaformdue.ultimacolonna{
  margin-right: 0px;
}

.rigaform label{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-size-8);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-14);
  font-family: var(--font-new-frank);
  color: var(--colore6);
  text-transform: uppercase;
}

.rigaform .required {
  color: var(--colore3);
  font-weight: var(--weight-medium);
}

.rigaform legend {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-size-8);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-14);
  font-family: var(--font-new-frank);
  color: var(--colore6);
  text-transform: uppercase;
}

.rigaform input[type="text"],
.rigaform input[type="email"],
.rigaform input[type="tel"],
.rigaform input[type="number"],
.rigaform input[type="password"] {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacer-size-16);
  font-weight: var(--weight-regular);
  color: var(--colore6);
  font-size: var(--font-size-16);
  border-bottom: 1px solid var(--colore650);
  line-height: 1.25;
  background: linear-gradient(315deg, var(--colore630) 0%, var(--colore610) 100%);
}

.rigaform select {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacer-size-16);
  padding-right: calc(var(--spacer-size-1) * 40);
  font-weight: var(--weight-regular);
  color: var(--colore6);
  font-size: var(--font-size-16);
  border-bottom: 1px solid var(--colore650);
  line-height: 1.25;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23FFFFFF' d='M4 6l4 4 4-4z'/></svg>"), linear-gradient(315deg, var(--colore630) 0%, var(--colore610) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right var(--spacer-size-16) center, 0 0;
  background-size: 12px, cover;
}

.rigaform select option {
  color: var(--colore1);
  background: var(--colore6);
}

.rigaform textarea {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: var(--spacer-size-160);
  box-sizing: border-box;
  padding: var(--spacer-size-16);
  font-size: var(--font-size-16);
  font-weight: var(--weight-regular);
  color: var(--colore6);
  border-bottom: 1px solid var(--colore650);
  line-height: 1.5;
  background: linear-gradient(315deg, var(--colore630) 0%, var(--colore610) 100%);
}

.rigaform input[type="date"]{
  display: block;
  position: relative;
  float: left;
  /*width: 100%;*/
  box-sizing: border-box;
  padding: 0px var(--spacer-size-8);
  font-weight: var(--weight-regular);
  color: var(--colore6);
  font-size: var(--font-size-16);
  border: 1px solid var(--colore650);
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
}

.rigaform input[type="date"]:after{
  content: "";
  display: block;
  position: absolute;
  background-color: var(--colore4);
  height: 100%;
  aspect-ratio: 1;
  top:0px;
  right:0px;
  background-repeat: no-repeat;
  background-size:50%;
  background-position: center center;
  pointer-events: none;
}

.rigaform input[type="date"]:nth-of-type(1):after{
  background-image: url("../images/icons/NNN_ico_data_arrivo.svg");
}

.rigaform input[type="date"]:nth-of-type(2):after{
  background-image: url("../images/icons/NNN_ico_data_partenza.svg");
}

.inputform[type="date"] {
  color: var(--colore650);
}
.inputform[type="date"]:focus,
.inputform[type="date"]:valid {
  color: var(--colore6);
}

/* Elimina l'icona del calendario' su Chrome, Safari, Edge e Opera */
.inputform::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    /* Rimuove visivamente l'icona originaria */
    -webkit-appearance: none;
    appearance: none;
    opacity: 0; 
}

/* Elimina le freccette su Chrome, Safari, Edge e Opera */
.inputform::-webkit-outer-spin-button,
.inputform::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Elimina le freccette su Firefox */
.inputform[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield; /* Proprietà standard */
}

.rigaform label.checkprivacy,
.rigaform .checkboxGroup label {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: auto;
  font-weight: var(--weight-regular);
  font-size: var(--font-size-12);
  line-height: calc(var(--spacer-size-1) * 18);
  text-align: left;
  text-transform: none;
  min-height: calc(var(--spacer-size-1) * 18);
  box-sizing: border-box;
  padding-left: calc(var(--spacer-size-1) * 22);
}

.rigaform label.checkprivacy::before,
.rigaform .checkboxGroup label::before {
  content: "";
  display: inline-block;
  width: calc(var(--spacer-size-1) * 18);
  height: calc(var(--spacer-size-1) * 18);
  border-radius: 50%;
  border: 1px solid var(--colore650);
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}

.rigaform label.checkprivacy::after,
.rigaform .checkboxGroup label::after {
  content: "";
  width: calc(var(--spacer-size-1) * 8);
  height: calc(var(--spacer-size-1) * 8);
  border-radius: 2px;
  background-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: calc(var(--spacer-size-1) * 5);
  left: calc(var(--spacer-size-1) * 5);
  cursor: pointer;
}

.rigaform input[type="checkbox"]:checked + label.checkprivacy::after,
.rigaform .checkboxGroup input[type="checkbox"]:checked + label::after {
  background-color: var(--colore6);
}

.rigaform label.checkprivacy a {
  text-decoration: underline;
}

.rigaform label.checkprivacy a:hover {
  color: var(--colore3);
}

/* Link semplice dentro un form (es. "Password dimenticata?") */

.linkSemplice:hover {
  color: var(--colore3);
}

.rigaform .checkboxGroup {
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 5 * (-1));
  margin-top: calc(var(--spacer-size-1) * 10);
}

.rigaform .checkboxGroup .contOptBoxGroup {
  width: 25%;
  margin-bottom: calc(var(--spacer-size-1) * 10);
}

.rigaform .invioform {
  float: left;
  margin-top: calc(var(--spacer-size-1) * 30);
}

.errForm {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  text-align: left;
  font-weight: var(--weight-regular);
  margin-top: calc(var(--spacer-size-1) * 10);
  color: coral;
  font-size: var(--font-size-10);
}

/*.errForm:after {
  content: "";
  display: block;
  position: absolute;
  left: calc(var(--spacer-size-1) * 7);
  top: -7px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 6px solid crimson;
}*/

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
  
  .rigaform.rigaformtre,
  .rigaform.rigaformdue{
    width: 100%;
    margin-right: 0px;
  }

  .rigaform input[type="date"]{
    text-align: left;
  }
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  .rigaform .checkboxGroup .contOptBoxGroup {
    width: 50%;
  }
  
  .rigaform input[type="date"].inputformMezzo {
      width: 100%;
  }
  
  .rigaform input[type="date"].inputformMezzo:last-of-type {
      margin-top: 20px;
  }
}

/* HEADER */

header {
  display: block;
  z-index: 900;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  width: 100%;
}

.customize-support header{
  top:32px;
}

.sfHeader {
  position: fixed;
  width: 100%;
  height: 140px;
  z-index: 100;
  opacity: 1;
}

.bodyScrolled .sfHeader {
  height: 80px;
  opacity: 0;
}

.sfHeaderDue {
  position: fixed;
  width: 100%;
  height: 140px;
  z-index: 99;
  opacity: 0;
}

.sfHeaderDue::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0px;
  bottom: -1px;
  background: var(--colore110);
}

.bodyScrolled .sfHeaderDue {
  height: 80px;
  opacity: 1;
}

.logoMain {
  position: fixed;
  left: 5%;
  top: 50px;
  z-index: 101;
}

.customize-support .logoMain{
  top:82px;
}

.bodyScrolled .logoMain {
  top: 25px;
}

.customize-support.bodyScrolled .logoMain{
  top:57px;
}

.logoMain img {
  position: relative;
  float: left;
  height: 40px;
  width: auto;
}

.bodyScrolled .logoMain img {
  height: 30px;
}

.logoMain img.logochiaro {
  opacity: 1;
}

.logoMain img.logoscuro {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
}

.bodyScrolled .logoMain img.logochiaro {
  opacity: 0;
}

.bodyScrolled .logoMain img.logoscuro {
  opacity: 1;
}

.openMenu {
  display: none;
  position: relative;
  float: right;
  width: 30px;
  height: 24px;
  margin-right: 5vw;
}

.bodyScrolled .openMenu {
  margin-top: 0px;
}

.barraOpenMenu {
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0px;
}

.bodyScrolled .barraOpenMenu {
  background-color: var(--colore1);
}

#barraOpenMenu1 {
  top: 4px;
}

#barraOpenMenu2 {
  top: 11px;
}

#barraOpenMenu3 {
  top: 18px;
}

.openMenu:hover #barraOpenMenu1 {
  top: 7px;
}

.openMenu:hover #barraOpenMenu3 {
  top: 15px;
}

.openMob #barraOpenMenu1 {
  top: 12px;
  transform: rotate(45deg);
}

.openMob #barraOpenMenu2 {
  top: 12px;
  left: 16px;
  width: 0px;
}

.openMob #barraOpenMenu3 {
  top: 12px;
  transform: rotate(-45deg);
}

.openMob .openMenu:hover #barraOpenMenu1 {
  top: 12px;
}

.openMob .openMenu:hover #barraOpenMenu3 {
  top: 12px;
}

.contNavSec{
  position: absolute;
  top:0px;
  right: 5%;
  z-index: 101;
}

.contLog,
.contLan {
  height: 28px;
  line-height: 27px;
  padding: 0px var(--spacer-size-16);
  border-radius: 0px 0px 3px 3px;
  border: 1px solid;
  border-top: none;
}

.contLog {
  margin-right: var(--spacer-size-16);
}

.contLog a:hover{
  opacity: .5;
}

/* Pagina corrente (es. pulsante Area download/riservata quando si è già lì) */
.contLog a.active{
  color: var(--colore3);
}

.bodyScrolled .contLog,
.bodyScrolled .contLan {
  border-color: var(--colore6) !important;
  background-color: var(--colore110);
}

.bodyScrolled .contLog a{
  color: var(--colore1);
}

.bodyScrolled .contLog a.active{
  color: var(--colore3);
}

.curLan {
  height: 28px;
  line-height: 27px;
  display: block;
  position: relative;
  float: left;
  padding-right: 14px;
}

.curLan:after {
  content: "";
  display: block;
  position: absolute;
  right: 0px;
  width: 7px;
  top: calc(50% - 4px);
  aspect-ratio: 62/80;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  background-image: url("../images/na_fr_b_bianco.svg");
}

.menuLanOpen .curLan:after {
  transform: rotate(180deg);
}

.bodyScrolled .curLan{
  color: var(--colore1);
}

.bodyScrolled .curLan:after {
  background-image: url("../images/na_fr_b_blu_scuro.svg");
}

.curLan:hover {
  opacity: 0.5;
}

#languageMenu {
  display: none;
  opacity: 0;
  position: absolute;
  top: 32px;
  width: auto;
  right: 0px;
}

.menuLanOpen #languageMenu {
  opacity: 1;
  display: block;
}

.pulsLan {
  display: block;
  position: relative;
  float: right;
  clear: both;
  border-radius: 3px;
  box-sizing: border-box;
  padding: var(--spacer-size-8) var(--spacer-size-32);
  margin-bottom: 4px;
  width: 100%;
  text-align: center;
  z-index: 100;
}

.bodyScrolled .pulsLan{
  background-color: rgba(233,233,232,1);
}

.pulsLan:hover {
  color: var(--colore170);
}

.contNavMain {
  display: block;
  position: relative;
  float: right;
  margin-top: 64px;
  z-index: 101;
  width: calc( 95vw - 245px );
}

.bodyScrolled .contNavMain {
  margin-top: 36px;
}

#navMain {
  display: block;
  float: right;
  margin-right: 5vw;
}

#navMain ul {
  display: block;
  position: relative;
  float: left;
}

#navMain ul li {
  display: block;
  position: relative;
  float: left;
  margin-left: 40px;
}

#navMain ul li a {
  display: block;
  position: relative;
  float: left;
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
}

#navMain ul li a:hover {
  opacity: 0.5;
}

.bodyScrolled #navMain ul li a {
  height: 32px;
  line-height: 32px;
  color: var(--colore1);
  z-index: 100;
}

#navMain ul li ul{
  display: none;
  position: absolute;
  left: calc((-1) * var(--spacer-size-32));
  padding-top:43px;
}

#navMain ul li:hover ul,
#navMain ul li:focus-within ul{
  display: block;
}

#navMain ul li ul li{
  position: relative;
  float: left;
  clear: both;
  width: 100%;
  padding: var(--spacer-size-8) var(--spacer-size-32);
  border-radius: 3px;
  margin-left: 0px;
  margin-bottom: 4px;
  border: 1px solid var(--colore650);
}

.bodyScrolled #navMain ul li ul{
  padding-top:48px;
}

.bodyScrolled #navMain ul li ul li{
  background-color: var(--colore6);
  border: 1px solid var(--colore110);
}

#navMain ul li ul#subNavProdotti{
  position: fixed;
  right: 5vw;
  top:64px;
  width: auto;
  left: auto;
  z-index: -1;
}

.customize-support #navMain ul li ul#subNavProdotti{
  top:96px;
}

.bodyScrolled #navMain ul li ul#subNavProdotti{
  top:36px;
}

.customize-support.bodyScrolled #navMain ul li ul#subNavProdotti{
  top:68px;
}

#navMain ul li ul#subNavProdotti li{
  width: 15vw;
  clear: none;
  margin-left: 4px;
  margin-bottom: 0px;
  padding: var(--spacer-size-16) 0px;
}

#navMain ul li ul#subNavProdotti li a{
  height: auto;
  width: 100%;
}

#navMain ul li ul#subNavProdotti li a span{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  text-align: center;
  line-height: 1;
}

.ciPnav{
  width: 100%;
  height: 80px;
  margin-bottom: var(--spacer-size-16);
}


#navMain ul li a.active{
  color: var(--colore3);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
  #navMain ul li {
    margin-left: 20px;
  }
}

@media (max-width: 900px){ /* Breakpoint per burger menu */
  .openMenu{
    display: block;
    z-index: 50;
  }
  
  .bodyScrolled.openMob .barraOpenMenu{
    background-color: var(--colore6);
  }
  
  #barraOpenMenu1,
  .openMenu:hover #barraOpenMenu1 {
    top: 5px;
  }
  
  #barraOpenMenu2,
  .openMenu:hover #barraOpenMenu2 {
    top: 11px;
  }
  
  #barraOpenMenu3,
  .openMenu:hover #barraOpenMenu3 {
    top: 17px;
  }
  
  .logoMain {
   z-index: 102;
  }
  
  .bodyScrolled.openMob .logoMain img.logoscuro {
      opacity: 0;
  }
  
  .bodyScrolled.openMob .logoMain img.logochiaro {
      opacity: 1;
  }
  
  .bodyScrolled.openMob .contLog a,
  .bodyScrolled.openMob .contLan button {
      color: var(--colore6);
  }

  .bodyScrolled.openMob .contLog a.active {
      color: var(--colore3) !important;
  }
  
  .bodyScrolled.openMob .curLan:after {
      background-image: url("../images/na_fr_b_bianco.svg");
  }
  
  #navMain {
      position: fixed;
      width: 100%;
      margin: 0px;
      padding: 0px;
      left: 0px;
      top: 0px;
      background: var(--colore1);
      overflow: scroll;
      scroll-behavior: smooth;
      height: 0px;
      border: none !important;
  }
  
  .openMob #navMain{
    height: 100vh;
  }

  #navMain ul {
    width: 80%;
    margin-left: 10%;
    margin-right: 0px;
    margin-top: 0px;
    padding: 0px;
    top: -30px;
    opacity: 0;
  }
  
  #navMain ul:first-child{
    padding-top: 140px;
    padding-bottom: 200px;
  }
  

  #navMain ul li {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--colore650);
  }

  .openMob #navMain ul {
    transition: all 0.3s 0.3s ease-out !important;
    top:0px;
    opacity: 1;
  }

  #navMain ul li a,
  .bodyScrolled #navMain ul li a,
  .bodyScrolled.openMob #navMain ul li a {
    height: 24px;
    line-height: 24px;
    color: var(--colore6);
  }

  /* sottosezioni: lista semplice, sempre visibile, niente flyout/mega-menu */
  #navMain ul li ul {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: 95%;
    padding-top: 20px;
    margin-left: 5%;
  }

  #navMain ul li ul li,
  .bodyScrolled #navMain ul li ul li {
    float: left;
    clear: both;
    width: 100%;
    text-align: left;
    padding: 10px 0px;
    border-radius: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    background-color: transparent;
    border: none;
  }

  .bodyScrolled #navMain ul li ul {
    padding-top: 20px;
  }

  #navMain ul li ul#subNavProdotti,
  .bodyScrolled #navMain ul li ul#subNavProdotti {
    position: relative;
    right: auto;
    top: auto;
    left: auto;
    width: 95%;
    z-index: auto;
  }

  #navMain ul li ul#subNavProdotti li {
    width: 100%;
    margin-left: 0px;
  }

  #navMain ul li ul#subNavProdotti li a {
    display: flex;
    align-items: center;
    gap: var(--spacer-size-8);
  }

  #navMain ul li ul#subNavProdotti li a span {
    width: auto;
    text-align: left;
    line-height: 1.2;
  }

  .ciPnav {
    width: 34px;
    height: 34px;
    margin-bottom: 0px;
    flex: 0 0 auto;
  }
  
  .contNavSec {
      position: fixed;
      top: auto;
      bottom: -100%;
      width: 90%;
      background-color: var(--colore5);
      border-radius: 12px 12px 0px 0px;
      padding: 20px;
      text-align: center;
      transition: all 0.5s 0.2s ease-in !important;
      font-size: 0px;
  }
  
  .openMob .contNavSec {
    bottom: 0px;
    transition: all 0.5s 0.2s ease-out !important;
  }
  
  .contLog,
  .contLan,
  .bodyScrolled .contLog,
  .bodyScrolled .contLan{
    display: inline-block !important;
    border: 1px solid var(--colore1) !important;
    border-color: var(--colore1) !important;
    border-radius: 3px !important;
    float: none !important;
    vertical-align: bottom !important;
    background-color: var(--colore100) !important;
  }
  
  .contLog a,
  .contLan button{
   color: var(--colore1) !important;
   vertical-align: middle !important;
  }

  .contLog a.active{
   color: var(--colore3) !important;
  }
  
  .curLan:after {
      background-image: url("../images/na_fr_b_blu_scuro.svg") !important;
      transform: rotate(180deg) !important;
  }
  
  .menuLanOpen .curLan:after {
      transform: rotate(0deg) !important;
  }
  
  #languageMenu {
      top: auto;
      bottom: calc(( -1 * 100% ) + 72px);
  }
  
  .pulsLan {
      background-color: var(--colore5) !important;
  }
  
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  .sfHeader {
    height: 90px;
  }

  .bodyScrolled .sfHeader {
    height: 60px;
    z-index: 20;
  }

  .sfHeaderDue {
    height: 90px;
    z-index: 19;
  }

  .bodyScrolled .sfHeaderDue {
    height: 60px;
  }

  .logoMain {
    top: 30px;
  }

  .bodyScrolled .logoMain {
    top: 20px;
  }

  .logoMain img {
    height: 30px;
  }

  .bodyScrolled .logoMain img {
    height: 24px;
  }

  .contNavMain {
    margin-top: 32px;
  }

  .bodyScrolled .contNavMain {
    margin-top: 20px;
  }

  .contLan {
    float: none;
    padding-right: 20px;
    z-index: 40;
  }

  .curLan:hover,
  #navMain ul li a:hover{
    opacity: 1;
  }

  .pulsLan:hover {
    color: var(--colore1);
  }
}

/* MAIN */

main {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: var(--spacer-size-160);
  /*min-height: 100vw;*/
  overflow-x: hidden;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
}

/* FOOTER */

footer {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding: calc(var(--spacer-size-1) * 100) 0px calc(var(--spacer-size-1) * 50) 0px;
}

.graziaFooter{
  position: absolute;
  height: 79%;
  aspect-ratio: 1;
  bottom: 0px;
  right: 0px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom right;
  background-image: url("../images/na_grazia_br_blu_scuro.svg");
}

.contLogoFoot{
  width: 100%;
  padding: 0px 10vw;
}

.logoFoot{
  display: block;
  position: relative;
  float: left;
  height: calc(var(--spacer-size-1) * 40);
  width: auto;
}

.footTop {
  padding: calc(var(--spacer-size-1) * 100) 0px;
  width: 100%;
}

.contColFootTopSx{
  float: left;
  margin-left: 10%;
}

.contColFootTopDx{
  float: right;
  margin-right: 10%;
}

.colFootTop {
  float: left;
  margin-right: calc(var(--spacer-size-1) * 80);
}

.colFootTop:last-of-type {
  margin-right: 0px;
}

.titColFootTop {
  margin-bottom: calc(var(--spacer-size-1) * 30);
  line-height: 1;
}

.footTop li {
  margin-bottom: calc(var(--spacer-size-1) * 20);
}

.footTop li:last-of-type {
  margin-bottom: 0px;
}

.footTop span:not(.sr-only) {
  display: block;
  position: relative;
  float: left;
  clear: both;
  margin-bottom: calc(var(--spacer-size-1) * 20);
  line-height: var(--line-height-base);
}

.footTop a:hover,
.footTop button:hover {
  opacity: 0.5;
}

.icoSocMenu{
  display: block;
  position: relative;
  float: left;
  border: 1px solid;
  border-radius: 3px;
  width: calc(var(--spacer-size-1) * 32) !important;
  height: calc(var(--spacer-size-1) * 32) !important;
  aspect-ratio: 1;
  margin-right: calc(var(--spacer-size-1) * 10);
  margin-bottom: calc(var(--spacer-size-1) * 10);
  padding: calc(var(--spacer-size-1) * 8);
}

.icoSocMenu:nth-of-type(2n+2){
  margin-right: 0px;
}

.icoSocMenu:nth-of-type(2n+1){
  clear: both;
}

.footBot {
  width: 90%;
  margin-left: 5%;
  padding: calc(var(--spacer-size-1) * 50) 0px 0px 0px;
  text-align: center;
  border-top: 1px solid;
  opacity: 0.5;
}

.voceFootBot {
  display: inline-block;
  height: 16px;
  line-height: 16px;
  padding: 0px calc(var(--spacer-size-1) * 20);
  border-right: 1px solid;
}

.voceFootBot:last-child {
  border-right: none;
}

a.voceFootBot:hover,
button.voceFootBot:hover {
  opacity: 0.5;
}

.acapoFootBot{
  display: none;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .acapoFootBot{
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .voceFootBot:nth-child(2) {
   border-right: none;
  }
  
  .voceFootBot:nth-child(3) {
    clear: both;
  }
}

@media (max-width: 900px) { /* Stili per breakpoint custom */
  
  .contColFootTopDx {
    width: 80%;
    margin-right: 0px;
    margin-left: 10%;
    float: left;
    margin-top: calc(var(--spacer-size-1) * 20);
  }
  
  .footTop .icoSocMenu {
    float: none;
    margin: 0px 10px 0px 0px;
    display: inline-block;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  
  .logoFoot {
      height: calc(var(--spacer-size-1) * 30);
  }
  
  .footTop {
    padding: calc(var(--spacer-size-1) * 60) 0px 0px 0px;
  }

  .contColFootTopSx {
    width: 80%;
    margin-top: 0px;
    margin-bottom: 40px;
  }
  
  .contColFootTopSx .colFootTop {
    float: left;
    margin-right: 0px;
    width: 50%;
    padding: 0px 0px;
  }

  .contColFootTopSx .colFootTop:nth-child(3){
    clear: both;
    width: 100%;
    margin-bottom: 0px;
    margin-top: 60px;
  }
  
  .contColFootTopDx {
    margin-top: 0px;
    margin-bottom: 80px;
  }
  
  .acapoFootBot{
    display: none;
  }
  
  .voceFootBot {
    width: 95%;
    height: auto;
    line-height: 1.5;
    padding: 0px;
    margin-bottom: 6px;
    border-right: 0px solid;
    font-size: var(--font-clamp-16);
  }
  
}

/***********/
/* BLOCCHI */
/***********/

/* BLOCCO SLIDE */

.b_sl {
  width: 100vw;
  height: auto;
}

.contMainBsl{
  position: relative;
  float: left;
  z-index: 1;
  width: 100%;
  padding: 260px 0px 200px 0px;
}

.ciBsl{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  z-index: 1;
}

.sfPayBsl{
  position: absolute;
  width: 70%;
  height: 100%;
  top: 0px;
  z-index: 1;
}

.b_sl .ciBsl{
  opacity: 1;
}

.b_sl .ciBsl.active{
  opacity: 1;
}

.contPayBsl{
  position: relative;
  float: left;
  z-index: 2;
  width: 80vw;
  height: auto;
}

.bslts .contPayBsl{
  width: calc( ( var(--lar-col-st) * 6 ) + ( var(--spacer-size-32) * 5 ) );
}

/* CON DECORO */

.b_sl.bslgra .sfPayBsl{
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: left bottom;
  background-image: url("../images/na_grazia_header_br_blu_scuro.svg");
  width: 100%;
}

/* FH */

.b_sl.bslfh {
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
}

.b_sl.bslfh .contPayBsl {
  position: absolute;
  float: none;
  top: calc( 50% + 70px );
  transform: translateY(-50%) translateX(-50%);
}

.b_sl.bslfh .contMainBsl{
  position: absolute;
  float: none;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0px;
}

.b_sl.bslfh .contSubBsl{
  display: none;
}

/* VIDEO */

.b_sl video {
  position: absolute;
  top:0px;
  left:0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* TESTI */

.titPayBsl{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  text-align: left;
  padding-bottom: calc(var(--spacer-size-1) * 40);
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.titPayBsl:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 45);
  height: calc(var(--spacer-size-1) * 6);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 3 );
}

.tesPayBsl,
.stitPayBsl {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  text-align: left;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contPayBsl > *:last-child {
  margin-bottom: 0;
}

/* SUB TESTI */

.contSubBsl{
  width: calc( ( var(--lar-col-st) * 6 ) + ( var(--spacer-size-32) * 5 ) );
  padding: 50px calc(var(--spacer-size-1) * 50);
  border-radius: 3px;
  z-index: 2;
  margin-top: -100px;
  margin-bottom: 10px;
  box-shadow: 0 0 8px rgba(26, 33, 46, 0.25);
}

.contSubBsl:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  top: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
}

.titSubBsl,
.tesSubBsl{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.titSubBsl li,
.tesSubBsl li{
  list-style: disc;
  margin-left: 20px;
}

.contSubBsl > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
  .b_sl {
    aspect-ratio: 4/3;
  }
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  .b_sl {
    aspect-ratio: auto;
  }
  
  .sfPayBsl{
    width: 70%;
  }
  
  .bslts .contPayBsl{
    width: 80vw;
  }
  
  .contMainBsl{
   padding: 140px 0px 100px 0px;
  }
  
  .b_sl.bslgra .sfPayBsl{
    background-image: url("../images/na_grazia_header_mob_br_blu_scuro.svg");
    width: 100%;
  }
  
  .contSubBsl{
    width: 90vw;
    padding: 10vw;
    margin-top: -50px;
  }
  
}

/* BLOCCO TESTO */

.b_t{
  width: 100vw;
  padding-left: calc((var(--lar-col-st) * 1) + (var(--spacer-size-32) * 1) + 10vw);
  padding-right: calc((var(--lar-col-st) * 1) + (var(--spacer-size-32) * 1) + 10vw);
}

.colTesBt{
  width: 100%;
  text-align: left;
}

.colImgBt{
  display: none;
}

.titBt{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: calc(var(--spacer-size-1) * 40);
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.titBt:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 45);
  height: calc(var(--spacer-size-1) * 6);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 3 );
}

.btsg .titBt{
 padding-bottom: 0px;
}

.btsg .titBt:after{
  display: none;
}

.stitBt{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBt{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.aBt{
  float: none;
  display: inline-block;
}

.colTesBt > *:last-child {
  margin-bottom: 0px;
}

.b_t li{
  list-style: disc;
  margin-left: 20px;
}

/* con immagine */

.b_t.btci {
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.b_t.btci .colTesBt{
  float:none;
  width: calc((var(--lar-col-st) * 3) + (var(--spacer-size-32) *3));
}

.b_t.btci .colImgBt{
  display: block;
  float:none;
  width: calc((var(--lar-col-st) * 4) + (var(--spacer-size-32) *3));
}

.b_t.btci .titBt{
 padding-bottom: 0px;
}

.b_t.btci .titBt:after{
  display: none;
}

/* con testi a sinistra */

.b_t.btci.bttsx {
  flex-direction: row;
}

/* con testi a destra */

.b_t.btci.bttdx {
  flex-direction: row-reverse;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .b_t{
    padding-left: 10vw;
    padding-right: 10vw;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_t.btci,
  .b_t.btci.bttdx,
  .b_t.btci.bttsx{
    flex-direction: column;
    gap: 40px;
  
  }
  
  .b_t.btci .colImgBt{
    order: 1;
    width: 100%;
  }
  
  .b_t.btci .colTesBt{
    order: 2;
    width: 100%;
  }

}

/* BLOCCO COLLEGAMENTI LINEE */

.b_cl{
  width: 100%;
}

.titBcl{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBcl{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBcl{
  width: 80%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacer-size-1) * 32);
}

.itemBcl{
  cursor: pointer;
  width: calc( ( 100% - var(--spacer-size-64) ) / 3 );
}

.ciBcl{
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.ciBcl img{
  padding: calc(var(--spacer-size-1) * 40);
  position: relative;
  z-index: 2;
}

.ciBcl:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
  z-index: 10;
}

.bgCiBcl{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
  z-index: 1;
}

.titItemBcl,
.tesItemBcl{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.b_cl > *:last-child {
  margin-bottom: 0px;
}

.itemBcl:hover .btn_16_blu_scuro::after {
  background-position: calc(50% + 2px) calc(50% - 2px);
}

.itemBcl:hover .bgCiBcl{
  opacity: .5;
}

@media (pointer: coarse) and (any-pointer: coarse) and (any-hover: none) { /* Stili per dispositivi touch */
  
  .itemBcl:hover .bgCiBcl{
    opacity: .7;
  }
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .ciBcl{
    aspect-ratio: 1;
  }
  
  .titItemBcl{
    margin-bottom: calc(var(--spacer-size-1) * 10);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .contItemBcl{
    gap: calc(var(--spacer-size-1) * 64);
    flex-wrap: wrap;
  }
  
  .itemBcl{
    width: 100%;
  }
  
  .ciBcl {
      aspect-ratio: 3/2;
  }

}

/* BLOCCO LISTA LINEE */

.b_ln{
  width: 100%;
}

.b_ln .b_ml{
  margin-bottom: var(--spacer-size-160);
}

.b_ln > .b_ml:last-child {
  margin-bottom: 0px;
}

.b_ln .ciBml img{
  padding: calc(var(--spacer-size-1) * 80);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  

}

/* BLOCCO COLLEGAMENTI SETTORI */

.b_cs{
  width: 100%;
}

.titBcs{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBcs{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBcs{
  width: 80%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacer-size-1) * 32);
}

.itemBcs{
  cursor: pointer;
  width: calc( ( 100% - var(--spacer-size-128) ) / 5 );
}

.ciBcs{
  width: 100%;
  aspect-ratio: 172/213;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.ciBcs:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
}

.titItemBcs,
.tesItemBcs{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.b_cs > *:last-child {
  margin-bottom: 0px;
}

.itemBcs:hover .ciBcs {
  opacity: .8;
}

@media (pointer: coarse) and (any-pointer: coarse) and (any-hover: none) { /* Stili per dispositivi touch */
  .itemBcs:hover .ciBcs {
    opacity: 1;
  }
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .contItemBcs {
      flex-wrap: wrap;
  }
  
  .itemBcs{
    width: calc( ( 100% - var(--spacer-size-64) ) / 3 );
  }
  
  .titItemBcs{
    margin-bottom: calc(var(--spacer-size-1) * 10);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBcs{
    width: calc( ( 100% - var(--spacer-size-32) ) / 2 );
  }

}

/* BLOCCO CALL TO ACTION */

.b_cta {
  width: 100vw;
  padding: calc(var(--spacer-size-1) * 100) 0px;
}

.colTitBcta{
  width: calc((var(--lar-col-st) * 3) + (var(--spacer-size-32) * 2));
  margin-left: calc((var(--lar-col-st) * 1) + (var(--spacer-size-32) * 1) + 10vw );
}

.colTesBcta{
  width: calc((var(--lar-col-st) * 4) + (var(--spacer-size-32) * 3));
  float: right;
  margin-right: 10vw;
}

.titBcta{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: calc(var(--spacer-size-1) * 40);
}

.titBcta:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 45);
    height: calc(var(--spacer-size-1) * 6);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 3 );
}

.tesBcta{
  width: calc((var(--lar-col-st) * 3) + (var(--spacer-size-32) * 2));
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.aBcta{
  clear: both;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .colTitBcta{
    width: calc(40vw - var(--spacer-size-16));
    margin-left: 10vw;
  }
  
  .colTesBcta{
    width: calc(40vw - var(--spacer-size-16));
  }
  
  .tesBcta{
    width: 100%;
  }
  

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .colTitBcta{
    width: 80vw;
    margin-bottom: 40px;
  }
  
  .colTesBcta{
    width: 80vw;
  }

}

/* BLOCCO MEZZA LARGHEZZA */
.b_ml{
  width: 80vw;
  display: flex;
  align-items: center;
}

.colTesBml{
  width: calc((var(--lar-col-st) * 4) + (var(--spacer-size-32) * 3.5) + 5vw );
  float: none;
  padding: calc(var(--spacer-size-1) * 60) 5vw;
}

.colImgBml{
  width: calc((var(--lar-col-st) * 4) + (var(--spacer-size-32) * 3.5) + 5vw );
  float: none;
}

.titBml{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  padding-bottom: calc(var(--spacer-size-1) * 40);
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.titBml:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 45);
  height: calc(var(--spacer-size-1) * 6);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 3 );
}

.tesBml{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.aBml{
  float: none;
  display: inline-block;
}

.colTesBml > *:last-child {
  margin-bottom: 0px;
}

.b_ml li{
  list-style: disc;
  margin-left: 20px;
}

.grBml{
  position: absolute;
  width: calc((var(--lar-col-st) * 1) + (var(--spacer-size-32) * .5));
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
}

.contImgBml{
  width: 100%;
  aspect-ratio: 5/6;
}

.bmlimgq .contImgBml{
  aspect-ratio: 1;
}

.ciBml{
  position: absolute;
  width: 100%;
  height: 100%;
}

.bmlimgp .ciBml img{
  padding: calc(var(--spacer-size-1) * 100) calc(var(--spacer-size-1) * 60);
}

.bmlimg.bmlani .ciBml img{
  padding: 10vw;
}

.bmlani .ciBml{
  perspective: 39vw;
}

/* testo sinistra */
.bmltsx.b_ml{
  flex-direction: row;
}

.bmltsx.b_ml .colTesBml{
  background: linear-gradient(90deg, var(--colore6) 0%, var(--colore5) 100%);
}

.bmltsx.b_ml .ciBml{
  background: linear-gradient(225deg, var(--colore1) 0%, var(--colore2) 100%);
}

.bmltsx.b_ml .grBml{
  bottom: 0;
  right: 0;
  background-image: url("../images/na_grazia_br_bianco.svg");
}

.bmltdx.bmlani .ciBml img{
  animation: float3ddx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* testo destra */
.bmltdx.b_ml{
  flex-direction: row-reverse;
}

.bmltdx.b_ml .colTesBml{
  background: linear-gradient(90deg, var(--colore5) 0%, var(--colore6) 100%);
}

.bmltdx.b_ml .ciBml{
  background: linear-gradient(135deg, var(--colore1) 0%, var(--colore2) 100%);
}

.bmltdx.b_ml .grBml{
  bottom: 0;
  right: 0;
  background-image: url("../images/na_grazia_br_grigio_chiaro.svg");
}

.bmltsx.bmlani .ciBml img{
  animation: float3dsx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* ciclo parole */

.bmltdx.b_ml.bmlplus .ciBml,
.bmltsx.b_ml.bmlplus .ciBml{
  background: var(--colore1);
  background: linear-gradient(0deg, var(--colore1) 25%, var(--colore2) 50%, var(--colore1) 75%);
}

.spbml{
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  transition: all 1s ease-in-out !important;
  /*text-shadow: 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0);*/
}

.spbmlactive{
  top:50%;
  opacity: 1;
  scale: 1;
  /*text-shadow: 0 0 16px rgba(255,255,255,.40), 0 0 40px rgba(255,255,255,.30), 0 0 60px rgba(255,255,255,.20);*/
}

.spbmlhidetop{
  top:12%;
  opacity: 0;
  filter: blur(5px);
  scale: .5;
}

.spbmlpost{
  top:24%;
  opacity: .5;
  filter: blur(3px);
  scale: .7;
}

.spbmlpre{
  top:76%;
  opacity: .5;
  filter: blur(3px);
  scale: .7;
}

.spbmlhidebottom{
  top:88%;
  opacity: 0;
  filter: blur(5px);
  scale: .5;
}

/* usata solo se le voci sono più di 5: resta fuori dal ciclo visibile */
.spbmlhidden{
  top:50%;
  opacity: 0;
  scale: .3;
  pointer-events: none;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */
  
  .b_ml {
      width: 90vw;
  }
  
  .titBml,
  .stitBml,
  .tesBml{
    width: 100%;
  }
  
  .bmlimgq .contImgBml{
    aspect-ratio: 5/6;
  }
  
  .bmlimgp .ciBml img{
      padding: calc(var(--spacer-size-1) * 60);
  }
  
  .bmlani .ciBml{
    perspective: 70vw;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_ml,
  .bmltdx.b_ml,
  .bmltsx.b_ml{
    float: left;
    width: 80vw;
    margin-left: 10vw;
    flex-direction: column-reverse;
    gap: 0px;
    transform: none;
  }
  
  .colImgBml{
    width: 100%;
    order: 2;
  }
  
  .colTesBml{
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    order: 1;
  }
  
  .grBml {
      width: 55%;
  }

}

/* BLOCCO CONCETTI IN EVIDENZA */

.b_ce{
  width: 100%;
  padding: calc(var(--spacer-size-1) * 100) 0px;
}

.titBce,
.contItemBce,
.tesBce{
  width: calc( ( var(--lar-col-st) * 6 ) + ( var(--spacer-size-32) * 5 ) );
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.b_ce > *:last-child {
  margin-bottom: 0;
}

.contItemBce{
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacer-size-32);
}

.itemBce{
  flex: 0 0 calc(50% - var(--spacer-size-16));
  aspect-ratio: 1;
  padding: var(--spacer-size-64) var(--spacer-size-32);
}

.itemBce:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 4);
    height: calc(var(--spacer-size-1) * 30);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 15 );
    left: calc(var(--spacer-size-1)*10);
}

.titItemBce{
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: var(--spacer-size-32);
}

.tesItemBce{
  display: block;
  position: relative;
  width: 100%;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .titBce, .contItemBce, .tesBce {
      width: 80vw;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBce{
    flex: 0 0 100%;
    aspect-ratio: auto;
    height: auto;
    padding: 10vw;
  }
  
  .titItemBce{
    font-size: var(--font-clamp-24);
  }

}

/* BLOCCO LA NOSTRA SCELTA */

.b_lns{
  width: 80%;
  padding: calc(var(--spacer-size-1)*100) calc( ( var(--lar-col-st) * 1 ) + ( var(--spacer-size-32) * 1 ) );
}

.titBlns{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBlns{
  width: 100%;
}

.itemBlns{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBlns > *:last-child {
  margin-bottom: 0;
}

.ciBlns{
  width: calc( ( var(--lar-col-st) * 2 ) + ( var(--spacer-size-32) * 1 ) );
  aspect-ratio: 1;
}

.ciBlns img{
  padding: calc(var(--spacer-size-1) * 40) calc(var(--spacer-size-1) * 60);
  position: relative;
  z-index: 2;
}

.ciBlns:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 30);
  height: calc(var(--spacer-size-1) * 4);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  right: calc(var(--spacer-size-1) * (-1) * 15 );
  top: calc(var(--spacer-size-1)*10);
  z-index: 3;
}

.bgCiBlns{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
  z-index: 1;
}

.contTesBlns{
  float: right;
  width: calc( ( var(--lar-col-st) * 4 ) + ( var(--spacer-size-32) * 3 ) );
}

.titItemBlns,
.tesItemBlns{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.aBlns{
  float: none;
  display: inline-block;
}

.contTesBlns > *:last-child {
  margin-bottom: 0px;
}

.itemBlns:hover .btn_16_blu_scuro::after {
  background-position: calc(50% + 2px) calc(50% - 2px);
}

.itemBlns:hover .bgCiBlns{
  opacity: .5;
}

@media (pointer: coarse) and (any-pointer: coarse) and (any-hover: none) { /* Stili per dispositivi touch */
  
  .itemBlns:hover .bgCiBlns{
    opacity: .7;
  }
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .ciBlns img{
    padding: calc(var(--spacer-size-1) * 20);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_lns {
      width: 90%;
      padding: 10vw;
  }
  
  .itemBlns {
      margin-bottom: 70px;
  }
  
  .contTesBlns {
      width: 100%;
      margin-top: 20px;
  }
  
  .ciBlns {
      width: 50%;
  }
  
  .ciBlns img{
      padding: 20px;
  }
  
  .ciBlns:after {
      width: calc(var(--spacer-size-1) * 4);
      height: calc(var(--spacer-size-1) * 30);
      bottom: calc(var(--spacer-size-1) * (-1) * 15 );
      left: calc(var(--spacer-size-1)*10);
      top:auto;
      right: auto;
  }

}

/* BLOCCO APPROFONDIMENTO CON IMMAGINE */

.b_ai{
  width: 100%;
  padding: calc(var(--spacer-size-1)*100) 10vw;
}

.titBai,
.tesBai,
.imgBai{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBai li{
  list-style: disc;
  margin-left: 20px;
}

.b_ai > *:last-child {
  margin-bottom: 0px;
}

.imgBaiMob{
  display: none;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  
  .imgBaiDt{
    display: none;
  }
  
  .imgBaiMob{
    display: block;
  }

}

/* BLOCCO MOTIVI */

.b_mo{
  width: 80%;
  padding: calc(var(--spacer-size-1)*100) calc( ( var(--lar-col-st) * 1 ) + ( var(--spacer-size-32) * 1 ) );
}

.titBmo,
.tesBmo{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBmo{
  width: 100%;
}

.itemBmo{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
  min-height: calc(var(--spacer-size-1) * 100);
}

.contItemBmo > *:last-child {
  margin-bottom: 0;
}

.numBmo{
  display: block;
  position: absolute;
  float: left;
  height: calc(var(--spacer-size-1) * 100);
  line-height: calc(var(--spacer-size-1) * 100);
  aspect-ratio: 1;
  text-align: center;
}

.numBmo:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 30);
  height: calc(var(--spacer-size-1) * 4);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  right: calc(var(--spacer-size-1) * (-1) * 15 );
  top: calc(var(--spacer-size-1)*10);
}

.bgCiBmo{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.contTesBmo{
  float: right;
  width: calc( 100% - ( var(--spacer-size-1) * 100 ) - ( var(--spacer-size-32) * 1 ) );
}

.titItemBmo,
.tesItemBmo{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 8);
}

.contTesBmo > *:last-child {
  margin-bottom: 0px;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_mo {
      width: 90%;
      padding: 10vw;
  }
  
  .numBmo {
      height: calc(var(--spacer-size-1) * 60);
      line-height: calc(var(--spacer-size-1) * 60);
      aspect-ratio: 2/3;
      font-size: 24px;
  }
  
  .numBmo:after {
      width: calc(var(--spacer-size-1) * 16);
      right: calc(var(--spacer-size-1) * (-1) * 8 );
  }
  
  .contTesBmo {
      width: calc( 100% - ( var(--spacer-size-1) * 60 ) - 0px );
  }

}

/* BLOCCO LISTA VANTAGGI */

.b_lv{
  width: 100%;
  padding: 0px 10vw;
}

.titBlv{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBlv{
  width: 100%;
  display: flex;
  gap: calc(var(--spacer-size-1) * 32);
  row-gap: calc(var(--spacer-size-1) * 64);
  flex-wrap: wrap;
}

.itemBlv{
  width: calc( ( 100% - (var(--spacer-size-1) * 64) ) / 3 );
}

.ciBlv{
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background: linear-gradient(135deg, var(--colore1) 0%, var(--colore2) 100%);
  perspective: 39vw;
  margin-bottom: calc(var(--spacer-size-1) * 24);
  float: none;
}

.ciBlv img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: calc(var(--spacer-size-1) * 40);
  box-sizing: border-box;
  animation: float3dsx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.ciBlv:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
}

.titItemBlv,
.tesItemBlv{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 24);
}

.itemBlv > *:last-child {
  margin-bottom: 0px;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .itemBlv {
      width: calc( ( 100% - (var(--spacer-size-1) *32) ) / 2 );
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBlv {
      width: 100%;
  }
  
  .ciBlv{
    perspective: 70vw;
  }
  
  .titItemBlv{
   margin-bottom: calc(var(--spacer-size-1) * 10);
  }

}

/* BLOCCO EPLUS */

.b_ep {
    width: 100vw;
    padding: calc(var(--spacer-size-1)*100) 10vw;
}

.b_ep::after{
  content: "";
  display: table;
  clear: both;
}

.colTesBep{
  width: calc( ( var(--lar-col-st) * 3 ) + ( var(--spacer-size-32) * 3 ));
  float: left;
}

.colImgBep{
  width: calc( ( var(--lar-col-st) * 4 ) + ( var(--spacer-size-32) * 3.5 ));
  aspect-ratio: 1;
  float: right;
}

.colImgBep:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 30);
    height: calc(var(--spacer-size-1) * 4);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    left: calc(var(--spacer-size-1) * (-1) * 15 );
    top: calc( 50% - (var(--spacer-size-1)*2));
}

.controllerBep{
  position: absolute;
  top:0px;
  left: 0px;
  z-index: 2;
}

.butBep{
  display: block;
  position: relative;
  float: left;
  width: calc(var(--spacer-size-1)*40);
  height: calc(var(--spacer-size-1)*40);
  border: 1px solid;
  border-radius: 50%;
  line-height: calc(var(--spacer-size-1)*38);
  text-align: center;
  margin-right: calc(var(--spacer-size-1)*16);
  box-sizing: border-box;
}

.butBep.active,
.butBep:hover{
  background-color: var(--colore6);
  color: var(--colore3);
}

.ciBep {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease 0s, visibility 0s linear 0.5s;
  perspective: 50vw;
}

.ciBep.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.5s ease 0.5s, visibility 0s linear 0s;
}

.ciBep img {
  padding: calc(var(--spacer-size-1)*80);
  animation: float3dsx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.itemBep{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  margin-top: calc(var(--spacer-size-1)*80);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease 0s, visibility 0s linear 0.5s;
}

.itemBep.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  transition: opacity 0.5s ease 0.5s, visibility 0s linear 0s;
}

.titItemBep,
.stitItemBep,
.tesItemBep{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 24);
}

.itemBep > *:last-child {
  margin-bottom: 0px;
}

@media (prefers-reduced-motion: reduce) {
  .itemBep,
  .ciBep {
    transition: none;
  }
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .b_ep {
      padding: calc(var(--spacer-size-1)*100) 5vw;
  }
  
  .colTesBep {
      width: 50%;
  }
  
  .ciBep {
   perspective: 70vw;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_ep {
      padding: calc(var(--spacer-size-1)*100) 10vw;
  }
  
  .colTesBep {
      width: 100%;
  }
  
  .colImgBep {
      width: 100%;
      float: left;
      margin-bottom: 10vw;
      aspect-ratio: 3/2;
  }
  
  .ciBep img{
      padding: 10vw;
  }

}

/*******************/
/* BLOCCO MAPPA */

.b_m{
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
}

.contMapBm{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.contMapBm div{ 
  position: static;
}

.gm-style img:not(.pinBm) {
  filter: grayscale(100%) brightness(1.05);
}

.wrapperTileBm img {
  display: block;
  filter: grayscale(100%) brightness(1.1);
  z-index: 2;
}

.wrapperTileBm:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: var(--colore2);
    opacity: .15;
    z-index: 3;
    background-blend-mode: color;
}

.infoMapBm{
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 80%;
  text-align: center;
}

.infoMapBm button{
  color: var(--colore5);
  text-decoration: underline;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .b_m {
      height: auto;
      aspect-ratio: 1;
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_m {
      display: none !important;
  }

}

/* BLOCCO CARD SEDI */

.b_sd {
    width: 100%;
    padding: 0px 10vw;
}

.titBsd {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBsd {
    width: 100%;
    display: flex;
    gap: calc(var(--spacer-size-1) * 32);
    row-gap: calc(var(--spacer-size-1) * 64);
    flex-wrap: wrap;
}

.itemBsd {
    position: relative;
    width: calc( ( 100% - (var(--spacer-size-1) * 64) ) / 3 );
    padding: calc(var(--spacer-size-1) * 32) calc(var(--spacer-size-1) * 24);
}

.itemBsd:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 4);
    height: calc(var(--spacer-size-1) * 30);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 15 );
    left: calc(var(--spacer-size-1)*10);
}

.titItemBsd, .tesItemBsd {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: calc(var(--spacer-size-1) * 24);
}

.itemBsd > *:last-child {
    margin-bottom: 0px;
}

.itemBsd a{
  transition: all 0.2s ease-out !important;
}

.itemBsd a:hover{
  opacity: .5;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .itemBsd {
      width: calc( ( 100% - (var(--spacer-size-1) * 32) ) / 2 );
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBsd {
      width: 100%;
      padding: 10vw;
  }

}

/* BLOCCO FORM GENERICO */

.b_fo {
  width: 100%;
  padding: calc(var(--spacer-size-1) * 100) 10vw;
}

.titBfo,
.tesBfo {
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.contForm {
  width: 100%;
  padding: calc(var(--spacer-size-1) * 60) ;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */
}

@media (max-width: 1024px) { /* Stili per tablet verticali */
  
  .b_fo {
      padding: 60px 10vw;
  }
  
}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  
  .b_fo {
      padding: 60px 5vw;
  }
  
  .contForm {
      padding: 15vw 5vw;
  }
  
}

/*******************/
/* SINGLE LINEA    */
/*******************/

/* BLOCCO TESTO INTRO */

.b_t.btci .titBt.titBtSl {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    padding-bottom: calc(var(--spacer-size-1) * 40);
    margin-bottom: calc(var(--spacer-size-1) * 40);
}

.b_t.btci .titBt.titBtSl:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 45);
    height: calc(var(--spacer-size-1) * 6);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 3 );
}

.ciBtSl{
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(225deg, var(--colore1) 0%, var(--colore2) 100%);
}

.ciBtSl img{
  padding: calc(var(--spacer-size-1) * 60) calc(var(--spacer-size-1) * 100);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .ciBtSl img{
    padding: calc(var(--spacer-size-1) * 60);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  

}

/* BLOCCO LISTA PRODOTTI */

.b_lp{
  width: 100%;
}

.titBlp{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBlp{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.noteBlp{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBlp{
  width: 80%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacer-size-1) * 32);
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.itemBlp{
  cursor: pointer;
  width: calc( ( 100% - ( var(--spacer-size-32) * 5 ) ) / 6 );
}

.contItemBlp.contItemBlpQc .itemBlp{
  width: calc( ( 100% - ( var(--spacer-size-32) * 3 ) ) / 4 );
}

.ciBlp{
  position: relative;
  width: 100%;
  aspect-ratio: 172/213;
  margin-bottom: calc(var(--spacer-size-1) * 30);
  z-index: 7;
  /* NB: niente padding qui apposta. Con box-sizing:border-box globale e border:0 il "padding
     box" (base di calcolo per i figli position:absolute) coincide esattamente col border-box:
     un padding messo qui è invisibile per .imgBlp, sia per l'altezza percentuale che per
     bottom:0 (che si ancorano al bordo vero, ignorando il padding). Il respiro va calcolato
     dentro l'altezza stessa di .imgBlp, vedi sotto. */
}

.bgCiBlp{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
  z-index: 5;
}

.imgBlp{
  z-index: 10;
  position: absolute;
  left: 0;
  /* bottom fisso (non 0): stesso valore del "respiro" sottratto nell'altezza qui sotto, così
     l'immagine resta sempre staccata di 32px dal bordo inferiore reale di .ciBlp, qualunque sia
     la percentuale. L'altezza (style inline da PHP, altezza_percentuale_thumbnail) è già
     calcolata come "percentuale DELLO SPAZIO DISPONIBILE tra i due margini di 32px", non
     dell'intera .ciBlp - vedi commento nel PHP (single-linea.php) per i dettagli del calc(). */
  bottom: calc(var(--spacer-size-1) * 32);
}

.itemBlp:hover .bgCiBlp{
  opacity: .5;
}

.ciBlp:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
  z-index: 15;
}

.titItemBlp,
.tesItemBlp{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.b_lp > *:last-child {
  margin-bottom: 0px;
}

@media (pointer: coarse) and (any-pointer: coarse) and (any-hover: none) { /* Stili per dispositivi touch */
  .itemBlp:hover .bgCiBlp {
    opacity: 1;
  }
  
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .contItemBlp {
      flex-wrap: wrap;
  }
  
  .itemBlp{
    width: calc( ( 100% - var(--spacer-size-96) ) / 4 );
  }
  
  .contItemBlp.contItemBlpQc .itemBlp{
    width: calc( ( 100% - var(--spacer-size-96) ) / 4 );
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBlp,
  .contItemBlp.contItemBlpQc .itemBlp{
    width: calc( ( 100% - var(--spacer-size-32) ) / 2 );
  }
  
  .titItemBlp{
    margin-bottom: calc(var(--spacer-size-1) * 10);
  }

}

/* BLOCCO PANORAMICA TECNOLOGIA */

.b_pt{
  width: 100%;
}

.titBpt{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.tesBpt{
  display: block;
  position: relative;
  float: left;
  width: 80%;
  margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBpt{
  width: 80%;
  display: flex;
  flex-direction: row;
  gap: calc(var(--spacer-size-1) * 32);
  flex-wrap: wrap;
}

.itemBpt{
  cursor: pointer;
  width: calc( ( 100% - ( var(--spacer-size-32) * 4 ) ) / 5 );
}

.bptQc .itemBpt{
  width: calc( ( 100% - ( var(--spacer-size-32) * 3 ) ) / 4 );
}

.ciBpt {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--colore1) 0%, var(--colore2) 100%);
    perspective: 100vw;
    margin-bottom: calc(var(--spacer-size-1) * 32);
    float: none;
}

.ciBpt img {
    padding: calc(var(--spacer-size-1) * 24);
    animation: float3dsx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.bptQc .ciBpt img {
    padding: calc(var(--spacer-size-1) * 48);
}

.ciBpt:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(var(--spacer-size-1) * 4);
  height: calc(var(--spacer-size-1) * 30);
  background-color: var(--colore3);
  border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
  bottom: calc(var(--spacer-size-1) * (-1) * 15 );
  left: calc(var(--spacer-size-1)*10);
  z-index: 15;
}

.titItemBpt,
.tesItemBpt{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 30);
}

.b_pt > *:last-child {
  margin-bottom: 0px;
}

.aBbl{
  float: right;
  margin-right: calc(10vw + (var(--spacer-size-1) * 40));
  margin-top: var(--spacer-size-32);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .itemBpt,
  .bptQc .itemBpt {
      cursor: pointer;
      width: calc( ( 100% - ( var(--spacer-size-32) * 2 ) ) / 3 );
  }
  
  .ciBpt img,
  .bptQc .ciBpt img {
      padding: calc(var(--spacer-size-1) * 32);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBpt,
  .bptQc .itemBpt {
      cursor: pointer;
      width: calc( ( 100% - ( var(--spacer-size-32) * 1 ) ) / 2 );
  }
  
  .ciBpt img,
  .bptQc .ciBpt img {
      padding: calc(var(--spacer-size-1) * 32);
  }

}

/*******************/
/* SINGLE PRODOTTO */
/*******************/

/* tabella dati */
.tabDatiBtSl{
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1)*40);
  border-bottom: 1px solid;
}

.titDatiBtSl{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-clamp-8);
}

.tabDatiBtSl table{
  width: 100%;
  border-collapse: collapse;
}

/* tbody/tr/th/td passano a flex: ogni riga calcola la propria larghezza
   in base al SOLO contenuto di quella riga (dato + valore), non condivide
   più la larghezza di colonna con le altre righe della tabella - è questo
   che causava gli "a capo" indesiderati quando dato/valore erano lunghi
   in righe diverse (vedi richiesta utente 2026-08-15). I ruoli ARIA sotto
   (in single-prodotto.php) ripristinano la semantica tabellare che display:flex
   toglie implicitamente. */
.tabDatiBtSl tbody{
  display: block;
  width: 100%;
}

.rowDatiBtsl{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacer-size-16);
}

.rowDatiBtsl:nth-child(even){
  background-color: var(--colore5);
}

.datoBtsl,
.valBtsl{
  display: block;
  padding: var(--spacer-size-8) var(--spacer-size-16);
}

.datoBtsl{
  flex-shrink: 0;
}

.valBtsl{
  text-align: right;
}

.notaDatiBtsl{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  font-style: italic;
}

/* PAG PRODOTTO */

.b_t.btci.btsp .colTesBt {
    width: calc((var(--lar-col-st) * 4) + (var(--spacer-size-32) *5));
}

.b_t.btci.btsp .colImgBt {
    width: calc((var(--lar-col-st) * 3) + (var(--spacer-size-32) *2));
}

.b_t.btci.btsp .ciBtSl{
  position: sticky;
  top:120px;
}

.b_t.btci.btsp .ciBtSl img {
    padding: calc(var(--spacer-size-1) * 60);
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .b_t.btci.btsp .ciBtSl img {
    padding: calc(var(--spacer-size-1) * 30);
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .b_t.btci.btsp .colTesBt {
      width: 100%;
  }
  
  .b_t.btci.btsp .colImgBt {
      width: 100%;
      margin-bottom: 60px;
  }
  
  .b_t.btci.btsp .ciBtSl img {
      padding: calc(var(--spacer-size-1) * 60);
  }

}

/* BLOCCO CARATTERISTICHE */

.b_car{
  width: 100%;
}

.titBcar {
    display: block;
    position: relative;
    float: left;
    width: 80%;
    margin-bottom: calc(var(--spacer-size-1) * 40);
}

.contItemBcarPri {
    width: 80%;
    display: flex;
    flex-direction: row;
    gap: calc(var(--spacer-size-1) * 32);
    flex-wrap: wrap;
    margin-bottom: var(--spacer-size-64);
}

.itemBcarPri {
    width: calc( ( 100% - ( var(--spacer-size-32) * 3 ) ) / 4 );
}

.contItemBcarPriCc .itemBcarPri {
    width: calc( ( 100% - ( var(--spacer-size-32) * 4 ) ) / 5 );
}

.ciBcarPri {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, var(--colore1) 0%, var(--colore2) 100%);
    perspective: 100vw;
    margin-bottom: calc(var(--spacer-size-1) * 32);
    float: none;
    aspect-ratio: 1;
}

.ciBcarPri:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 4);
    height: calc(var(--spacer-size-1) * 30);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 15 );
    left: calc(var(--spacer-size-1)*10);
    z-index: 15;
}

.ciBcarPri img {
    padding: calc(var(--spacer-size-1) * 60);
    padding: calc(var(--spacer-size-1) * 32);
    animation: float3dsx 10s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.titItemBcarPri, .tesItemBcarPri {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: calc(var(--spacer-size-1) * 30);
}

.contItemBcarSec {
    width: 80%;
    /* Fix 2026-08-24 v4 (bug solo Safari, segnalato da Marco): tre tentativi basati su CSS
       multi-colonna (break-inside + prefissi WebKit; column-fill:auto; separazione dal
       transform di centratura in un wrapper dedicato) non hanno risolto il problema — Safari
       continuava a frammentare un item tra le due colonne (testo di qua, bordo di là) — e
       l'ultimo tentativo ha anche rotto la resa su Chrome. Sostituito columns:2 con CSS Grid:
       ogni item diventa un'unica cella/box atomica che NON può essere spezzata tra le colonne
       in nessun browser, perché Grid non usa il modello di frammentazione dei multicolonna
       (a differenza di columns, che per definizione spezza il contenuto quando necessario). */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(var(--spacer-size-1) * 32);
}

.itemBcarSec {
    width: 100%;
    padding-bottom: calc(var(--spacer-size-1) * 24);
    margin-bottom: calc(var(--spacer-size-1) * 32); /* Sostituisce il gap verticale */
    border-bottom: 1px solid;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .itemBcarPri,
  .contItemBcarPriCc .itemBcarPri {
      width: calc( ( 100% - ( var(--spacer-size-32) * 1 ) ) / 2 );
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */

  .itemBcarPri,
  .contItemBcarPriCc .itemBcarPri {
      width: 100%;
  }
  
  .ciBcarPri{
    aspect-ratio: 3/2;
  }
  
  .ciBcarPri img{
    padding: calc(var(--spacer-size-1) * 30);
  }
  
  .contItemBcarSec {
      grid-template-columns: 1fr;
  }

}














/***************************************/
/* AREA DOWNLOAD E RISORSE COLLEGATE   */
/***************************************/

/* BLOCCO RISORSE COLLEGATE */

.b_rco{
  width: 80vw;
}

.colLogRco{
  width: 25vw;
  padding: var(--spacer-size-32);
  position: sticky;
  top: 120px;
}

.colFileRco{
  width: calc( 55vw - var(--spacer-size-32) );
  float: right;
  margin-bottom: calc( ( -1 ) * var(--spacer-size-64) );
}

/* Su segnalazione di Marco: anche il link "Tutti i documenti" (che punta
   qui, in cima alla colonna) deve tenere conto dell'header fisso in alto,
   altrimenti lo scroll porta il contenuto proprio sotto al menu. Stesso
   valore di scroll-margin-top usato per ".sezItemRcoPro" più sotto. */
#documenti-tutti{
  scroll-margin-top: calc(var(--spacer-size-1)*120);
}

.sezItemRco{
  width: 100%;
  margin-bottom: var(--spacer-size-128);
}

/* Sezioni nascoste da initSezioniRco() (main.js) quando si clicca una
   scorciatoia della colonna grigia: stesso pattern "hidden" + regola
   esplicita già usato per .flipbookModal/.nvrDbgPopup più sotto in questo
   file, per non dipendere dallo stile di default del browser. */
.sezItemRco[hidden]{
  display: none;
}

.titSezRco{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-size-64);
}

.colFileRco > *:last-child {
  margin-bottom: 0;
}

.titLogRco,
.tesLogRco,
.contPulsRco{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-size-32);
}

.tesLogRco button,
.tesLogRco a{
  display: block;
  position: relative;
  float: left;
  clear: both;
  text-align: left;
}

.tesLogRco button:hover,
.tesLogRco a:hover{
  font-weight: var(--weight-medium);
}

.tesLogRco button.active,
.tesLogRco a.active{
  font-weight: var(--weight-medium);
}

.aBrco{
  display: block;
  position: relative;
  float: left;
  margin-bottom: var(--spacer-size-8);
  margin-right: var(--spacer-size-8);
}

.colLogRco > *:last-child {
  margin-bottom: 0;
}

.gridFilesRco{
  width: 100%;
}

.itemRco{
  width: 100%;
  margin-bottom: var(--spacer-size-64);
}

.itemRcoMezzo{
  width: calc( 50% - var(--spacer-size-16) );
}

.itemRcoMezzo:nth-of-type(2n+2){
  float: right;
}

.itemRcoMezzo:nth-of-type(2n+1){
  clear: both;
}

.titItemRco,
.tesItemRco,
.itemRco .ci{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: var(--spacer-size-32);
}

.itemRco > *:last-child {
  margin-bottom: 0;
}

.itemRco .ci:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--spacer-size-1) * 4);
    height: calc(var(--spacer-size-1) * 30);
    background-color: var(--colore3);
    border-radius: 0px calc(var(--spacer-size-1) * 6) 0px calc(var(--spacer-size-1) * 6);
    bottom: calc(var(--spacer-size-1) * (-1) * 15 );
    left: calc(var(--spacer-size-1)*10);
    z-index: 15;
}

.itemRcoVideo .ci{
  aspect-ratio: 16/9;
}

.itemRcoCaseHistory .ci{
  aspect-ratio: 3/2;
}

.itemRcoFile{
  border-bottom: 1px solid var(--colore130);
  margin-bottom: calc(var(--spacer-size-1)*24);
  min-height: 40px;
}

/* Anteprima quadrata per riga file (26/08, richiesta di Marco — "Mostra anteprime file" su
   categoria_file, vedi inc/area-riservata-template-parts.php). Dimensioni indicative date da
   Marco (quadrata var(--spacer-size-64), margin-bottom var(--spacer-size-8)) — il CSS
   definitivo si rifinisce dopo aver visto il risultato dal vivo, come detto da Marco stesso. */
.ciAnteprimaFile{
  width: var(--spacer-size-64);
  height: var(--spacer-size-64);
  margin-bottom: var(--spacer-size-8);
  padding: var(--spacer-size-4);
  background-color: var(--colore105);
}

.ciAnteprimaFileVuota{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colore6);
}

.ciVideoVuota{
  background-color: var(--colore105);
}

.itemRcoFile .titItemRco{
  width: 100%;
  float: left;
  margin-bottom: var(--spacer-size-8);
}

.itemRcoFile .aItemRco{
  float: left;
  margin-bottom: var(--spacer-size-16);
}

/* Su richiesta di Marco (26/08): pallino rosso di avviso accanto al nome di un file la cui
   convenzione di naming non è rispettata su Drive (area riservata) o è stata riconosciuta
   solo tollerando spazi indesiderati (single-prodotto.php) — SOLO per gli admin, mai per i
   clienti (vedi nuovair_ar_avviso_nome_file_html() in inc/helpers.php). Nessuna correzione
   automatica: serve solo a Marco per notare a colpo d'occhio quali file rinominare su Drive.
   role="img" + aria-label sullo span (niente testo visibile) rende il pallino accessibile
   agli screen reader, il ::after disegna il cerchio rosso vero e proprio. */
.avvisoNomeFile{
  display: inline-block;
  vertical-align: middle;
}

.avvisoNomeFile::after{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--spacer-size-8);
  border-radius: 50%;
  background-color: crimson;
  vertical-align: middle;
}

.sezItemRcoPro {
    margin-bottom: calc(var(--spacer-size-1)*32);
    /* margin-top: calc(var(--spacer-size-1)*32); */
    scroll-margin-top: calc(var(--spacer-size-1)*120);
}

.sezItemRcoPro{
  margin-bottom: calc(var(--spacer-size-1)*32);
  padding: var(--spacer-clamp-32);
  background-color: var(--colore5);
  /* Su richiesta di Marco: i pulsanti di scorciatoia alle categorie nella
     colonna grigia (".colLogRco") saltano con un'ancora HTML a questa
     sezione — senza scroll-margin-top lo scroll si fermerebbe esattamente
     al bordo della sezione, "mangiandosi" visivamente questo margin-top. */
  scroll-margin-top: calc(var(--spacer-size-1)*120);
}

.single-prodotto .sezItemRcoPro{
  margin-bottom: calc(var(--spacer-size-1)*32);
  padding: 0px;
  background-color: transparent;
}

.sezItemRcoPro:nth-of-type(1){
  margin-top: 0px;
  /* Lo scroll-margin-top qui non compensa il margin-top della sezione (che
     per la prima è 0): serve comunque a tenere il contenuto sotto al menu
     fisso in alto quando si salta qui con un'ancora, esattamente come le
     altre sezioni. */
  scroll-margin-top: calc(var(--spacer-size-1)*120);
}

/* initSezioniRco() (main.js) aggiunge questa classe alla sola sezione
   rimasta visibile quando si filtra dalla colonna grigia: si comporta come
   se fosse la prima (vedi regola sopra), niente spazio vuoto in cima.
   Stessa specificità di ".sezItemRcoPro:nth-of-type(1)": deve stare dopo
   nel foglio di stile per vincere anche sulla sezione che non è
   effettivamente la prima nel DOM. */
.sezItemRcoPro.active{
  margin-top: 0px;
}

.headSezItemRcoPro{
  width: 100%;
  padding: var(--spacer-size-16) var(--spacer-size-32);
  margin-bottom: calc(var(--spacer-size-1) * 64);
}

.titHeadSezItemRcoPro{
  display: block;
  position: relative;
  float: left;
  width: 100%;
  margin-bottom: calc(var(--spacer-size-1) * 16);
}

.headSezItemRcoPro > *:last-child {
  margin-bottom: 0;
}

.contFormMac{
  width: 100%;
  padding: calc(var(--spacer-size-1) * 32) calc(var(--spacer-size-1) * 32);
}

.tabProfiloRco,
.tabMacchineRco{
  width: 100%;
  margin-bottom: var(--spacer-size-32);
}

.tabProfiloRco th,
.tabProfiloRco td,
.tabMacchineRco th,
.tabMacchineRco td{
  padding: var(--spacer-size-8) var(--spacer-size-8) var(--spacer-size-8) 0px;
}

.tabProfiloRco th,
.tabMacchineRco th{
  width: 25%;
  font-weight: var(--weight-medium);
}

.tabProfiloRco td,
.tabMacchineRco td{
  width: 75%;
}

@media (max-width: 1366px) { /* Stili per tablet orizzontali */

  

}

@media (max-width: 1024px) { /* Stili per tablet verticali */

  .b_rco {
      width: 90vw;
  }
  
  .colLogRco{
    width: 30vw;
  }
  
  .colFileRco{
    width: calc( 60vw - var(--spacer-size-32) );
  }

}

@media (max-width: 767px) { /* Stili per dispositivi mobili */
  
  .colLogRco{
    width: 100%;
    padding: var(--spacer-size-32);
    position: relative;
    top: auto;
    margin-bottom: var(--spacer-size-32);
  }
  
  .colFileRco{
    width: 100%;
    float: right;
    margin-bottom: calc( ( -1 ) * var(--spacer-size-64) );
  }
  
  .itemRcoMezzo{
    width:100%;
  }
  
  .itemRcoFile .titItemRco{
    width: 100%;
    float: left;
  }
  
  .itemRcoFile .aItemRco{
    float: left;
  }
  
  .tabProfiloRco th,
  .tabMacchineRco th{
    display: block;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: var(--spacer-size-8);
  }

  .tabProfiloRco td,
  .tabMacchineRco td{
    display: block;
    position: relative;
    float: left;
    width: 100%;
  }

}
















/*******************/
/* GENERALI        */
/*******************/

/* GALLERY GLIGHTBOX */

/* Il reset globale mette float:left su tutti i div; GLightbox costruisce
   il proprio markup assumendo il comportamento normale del browser */
.glightbox-container div {
  float: none;
}

/* FLIPBOOK (DFLIP) */

.flipbookModal {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999998;
  width: 100%;
  height: 100%;
}

.flipbookModal[hidden] {
  display: none;
}

.flipbookOverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--colore180);
}

.flipbookDialog {
  position: relative;
  float: none;
  width: 90vw;
  height: 90vh;
  margin: 5vh auto;
}

.flipbookClose {
  display: block;
  position: absolute;
  top: calc((-1) * var(--spacer-size-1) * 44);
  right: 0px;
  z-index: 2;
  width: calc(var(--spacer-size-1) * 36);
  height: calc(var(--spacer-size-1) * 36);
  color: var(--colore6);
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

.flipbookClose:hover {
  opacity: 0.7;
}

.dflipViewer {
  width: 100%;
  height: 100%;
}

/* Il reset globale mette float:left su tutti i div; dFlip costruisce
   il proprio markup assumendo il comportamento normale del browser */
.flipbookModal div {
  float: none;
}

@media (max-width: 767px) {

  .flipbookDialog {
    width: 100vw;
    height: 100vh;
    margin: 0px;
  }

  .flipbookClose {
    top: var(--spacer-size-16);
    right: var(--spacer-size-16);
  }

}

/* COOKIE CONSENT */
/* css generale */

.termsfeed-com---pc-dialog .cc-cp-foot-byline {
  opacity: 0 !important;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.termsfeed-com---pc-dialog .cc-cp-foot-byline a {
  display: none !important;
}

/* css specifico per sito */

.termsfeed-com---palette-light.termsfeed-com---nb {
  background-color: var(--colore2) !important;
  color: var(--colore4) !important;
}

.termsfeed-com---nb-headline {
  position: fixed;
}

.termsfeed-com---nb-simple {
  max-width: 100% !important;
  width: 100% !important;
}

.termsfeed-com---nb .cc-nb-main-container {
  padding: 30px 5% !important;
}

.cc-nb-title {
  font-family: var(--font-new-frank) !important;
  font-weight: var(--weight-medium) !important;
  font-style: var(--style-normal) !important;
  line-height: var(--line-height-base) !important;
  font-size: var(--font-size-16) !important;
  color: var(--colore5) !important;
}

.cc-nb-text-container {
  width: 100%;
}

.cc-nb-text {
  font-family: var(--font-new-frank) !important;
  font-weight: var(--weight-light) !important;
  font-style: var(--style-normal) !important;
  line-height: var(--line-height-base) !important;
  font-size: var(--font-size-16) !important;
  color: var(--colore5) !important;
  width: 100%;
  clear: both;
}

.cc-nb-reject,
.cc-nb-okagree,
.cc-cp-foot-save {
  background: var(--colore2) !important;
  border-radius: 5px !important;
  color: var(--colore5) !important;
  border: 1px solid var(--colore5) !important;
}

.cc-nb-changep {
  background: var(--colore100) !important;
  border-radius: 3px !important;
  color: var(--colore5) !important;
}

.cc-nb-reject:hover,
.cc-nb-okagree:hover,
.cc-cp-foot-save:hover,
.cc-nb-changep:hover {
  opacity: 0.5;
}

.cc-pc-head-lang-select {
  border: 2px solid lightgray !important;
}

.cc-pc-head-close:focus,
.cc-pc-head-lang-select:focus {
  box-shadow: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}

.cc-pc-head-close:focus-visible,
.cc-pc-head-lang-select:focus-visible {
  box-shadow: var(--colore2) !important;
  border-top-color: var(--colore2) !important;
  border-bottom-color: var(--colore2) !important;
  border-right-color: var(--colore2) !important;
  border-left-color: var(--colore2) !important;
}

/*******************************************************/
/* NOTE DI DEBUG (SOLO SVILUPPO) - visibili anche se sloggati */
/*******************************************************/

/* Necessario perché il pallino di debug è position:absolute rispetto al blocco */
.b_t, .b_ai, .b_cta, .b_sd, .b_cl, .b_cs, .b_ce, .b_ep, .b_fo, .b_html, .b_lns, .b_ln,
.b_lv, .b_m, .b_ml, .b_mo, .b_sl,
.spacer8, .spacer16, .spacer32, .spacer64, .spacer96, .spacer128, .spacer160, .spacer200 {
  position: relative;
}

.nvrDbg {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999990;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.b_sl .nvrDbg {
  top: calc(50% - 20px);
}

body.nvrDbgHidden .nvrDbg {
  display: none;
}

/* Evidenzia temporaneamente il blocco a cui appartiene la nota aperta */
.nvrDbgHighlight:after {
  content: "";
  position: absolute;
  top: -2px;
  left: 1px;
  height: calc(100% + 4px);
  width: calc(100% - 2px);
  box-sizing: border-box;
  border: 1px solid #ff6a00;
  border-radius: 3px;
  pointer-events: none;
}

.nvrDbgBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff6a00;
  border: 1px solid #fff;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
  padding: 0;
}

.nvrDbgBtn:hover,
.nvrDbgBtn:focus-visible {
  transform: scale(1.08);
}

.nvrDbgPopup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 300px;
  max-width: calc(100vw - 24px);
  background-color: #fff;
  color: #222;
  border: 1px solid #ff6a00;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
}

.nvrDbgPopup[hidden] {
  display: none;
}

.nvrDbgHead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background-color: #ff6a00;
  color: #fff;
}

.nvrDbgRif {
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.nvrDbgActions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.nvrDbgActions button {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-color: transparent;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.nvrDbgActions button:hover,
.nvrDbgActions button:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
}

.nvrDbgBody {
  padding: 10px;
  line-height: 1.5;
  max-height: 260px;
  overflow-y: auto;
  white-space: normal;
  word-break: break-word;
}

.nvrDbgPopup.nvrDbgCollapsed .nvrDbgBody {
  display: none;
}

#nvrDbgToggleAll {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999998;
  background-color: #222;
  color: #fff;
  border: 1px solid #ff6a00;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.nvrDbgHidden #nvrDbgToggleAll {
  opacity: 0.5;
}