@charset "UTF-8";
/********************************************************
  01 - FONTS
********************************************************/
/* SHADES */
/* GRIGIO */
/* NEUTRAL */
/* PRIMARY */
/* SECONDARY */
/* TERTIARY */
/* ERROR */
/* WARNING */
/* SUCCESS */
:root {
  --dark-bg-rgb: 18 18 18;
}

/* GLOBAL */
/* --- TESTO LUNGO OK (High Contrast) --- */
/* DARK 900 - CONTENUTO */
/* DARK 800 - CONTENUTO SECONDARIO */
/* DARK 200 - FONDI TECNICI */
/* --- SOLO TESTO BREVE / UI --- */
/* DARK 700 - CONTENUTO BREVE */
/* DARK 600 - COMPONENTI UI */
/* DARK 500 - STATI UI */
/* --- CHROME / NO TESTO CONTENUTO --- */
/* DARK 400 - TOOLBAR / DROPDOWN */
/* DARK 300 - BARRE SECONDARIE */
/* DARK 100 - BORDI / PASSIVI */
/* DARK 50 - DIVIDER */
/* =========================================================
     GLASS MIXIN
========================================================= */
/* =========================================================
   FLUID TYPOGRAPHY HELPERS (clamp)
   ========================================================= */
/*
CLAMP FORMULA

clamp(min, fluid, max)

- min   → dimensione mobile
- max   → dimensione desktop
- fluid → crescita fluida con viewport (vw)

Regola veloce:
- testo    → 0.5vw / 0.8vw
- heading  → 1vw / 1.5vw
*/
/* -----------------------------------------
   TEXT - BASE (body / paragraph)
   -----------------------------------------
   Uso: sostituisce text-lg / text-md
   Comportamento:
   - 1.6rem mobile
   - cresce leggermente
   - 1.8rem desktop
*/
.fluid-text-base {
  font-size: clamp(1.6rem, 1.4rem + 0.6vw, 1.8rem);
}

/* -----------------------------------------
   TEXT - BOOST (footer / highlight)
   -----------------------------------------
   Uso: leggero aumento rispetto a text-xl
   Comportamento:
   - 1.8rem mobile
   - crescita fluida
   - 2.2rem desktop
*/
.fluid-text-boost {
  font-size: clamp(1.8rem, 1.6rem + 0.8vw, 2.2rem);
}

/* -----------------------------------------
   HEADING - FLUID
   -----------------------------------------
   Uso: heading principali
   Comportamento:
   - 2.4rem mobile
   - crescita evidente
   - 3.2rem desktop
*/
.fluid-heading {
  font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem);
}

/* =========================================================
   FLUID TYPOGRAPHY (parametric mixin)
   ========================================================= */
/*
USO:
@include fluid(min, max);

Esempio:
@include fluid(1.6, 2.2);

COSA FA:
- parte da min (mobile)
- cresce in modo fluido
- arriva a max (desktop)

COME FUNZIONA:
- il valore centrale usa vw → crescita fluida
- il coefficiente (0.5) controlla la velocità

REGOLE VELOCI:
- testo → differenza piccola (es: 1.6 → 1.8)
- heading → differenza più ampia (es: 2.4 → 3.2)
*/
/* DISPLAY */
/* HEADING */
/* TEXT */
/* LABEL */
/* OVERLINE */
:root {
  /* Font Weight OVERRIDE */
  --fw-300: 300;
  --fw-350: 350;
  --fw-400: 400;
  --fw-500: 400;
  --fw-600: 400;
  --fw-700: 700;
  --fw-800: 800;
  /* WEIGHT */
  --fw-regular: var(--fw-400);
  --fw-medium: var(--fw-500);
  --fw-semibold: var(--fw-600);
  --fw-bold: var(--fw-700);
  --fw-extrabold: var(--fw-800);
  /* DISPLAY */
  --display-lg-weight: var(--fw-bold);
  --display-lg-size: 14.0rem;
  --display-lg-line-height: calc(var(--display-lg-size) * 1.1);
  --display-lg-letter-spacing: -0.02em;
  --display-sm-weight: var(--fw-bold);
  --display-sm-size: 5.2rem;
  --display-sm-line-height: calc(var(--display-sm-size) * 1.1);
  --display-sm-letter-spacing: -0.02em;
  /* HEADING */
  --heading-2xl-weight: var(--fw-bold);
  --heading-2xl-size: 4rem;
  --heading-2xl-line-height: calc(var(--heading-2xl-size) * 1.1);
  --heading-2xl-letter-spacing: -0.02em;
  --heading-xl-weight: var(--fw-bold);
  --heading-xl-size: 3.2rem;
  --heading-xl-line-height: calc(var(--heading-xl-size) * 1.15);
  --heading-xl-letter-spacing: -0.015em;
  --heading-lg-weight: var(--fw-medium);
  --heading-lg-size: 2.8rem;
  --heading-lg-line-height: calc(var(--heading-lg-size) * 1.2);
  --heading-lg-letter-spacing: -0.01em;
  --heading-md-weight: var(--fw-medium);
  --heading-md-size: 2.4rem;
  --heading-md-line-height: calc(var(--heading-md-size) * 1.25);
  --heading-md-letter-spacing: -0.005em;
  --heading-sm-weight: var(--fw-medium);
  --heading-sm-size: 2rem;
  --heading-sm-line-height: calc(var(--heading-sm-size) * 1.3);
  --heading-sm-letter-spacing: 0;
  --heading-xs-weight: var(--fw-medium);
  --heading-xs-size: 1.8rem;
  --heading-xs-line-height: calc(var(--heading-xs-size) * 1.35);
  --heading-xs-letter-spacing: 0;
  /* TEXT */
  --text-lg-size: 1.8rem;
  --text-lg-line-height: calc(var(--text-lg-size) * 1.6);
  --text-md-size: 1.6rem;
  --text-md-line-height: calc(var(--text-md-size) * 1.6);
  --text-sm-size: 1.4rem;
  --text-sm-line-height: calc(var(--text-sm-size) * 1.6);
  --text-xs-size: 1.2rem;
  --text-xs-line-height: calc(var(--text-xs-size) * 1.6);
  /* LABEL */
  --label-2xl-weight: var(--fw-medium);
  --label-2xl-size: 2.2rem;
  --label-2xl-line-height: calc(var(--label-2xl-size) * 1);
  --label-2xl-letter-spacing: 0;
  --label-xl-weight: var(--fw-medium);
  --label-xl-size: 2rem;
  --label-xl-line-height: calc(var(--label-xl-size) * 1);
  --label-xl-letter-spacing: 0;
  --label-lg-weight: var(--fw-medium);
  --label-lg-size: 1.8rem;
  --label-lg-line-height: calc(var(--label-lg-size) * 1);
  --label-lg-letter-spacing: 0;
  --label-md-weight: var(--fw-medium);
  --label-md-size: 1.6rem;
  --label-md-line-height: calc(var(--label-md-size) * 1);
  --label-md-letter-spacing: 0;
  --label-sm-weight: var(--fw-medium);
  --label-sm-size: 1.4rem;
  --label-sm-line-height: calc(var(--label-sm-size) * 1);
  --label-sm-letter-spacing: 0;
  --label-xs-weight: var(--fw-medium);
  --label-xs-size: 1.2rem;
  --label-xs-line-height: calc(var(--label-xs-size) * 1);
  --label-xs-letter-spacing: 0;
  --label-2xs-weight: var(--fw-medium);
  --label-2xs-size: 1rem;
  --label-2xs-line-height: calc(var(--label-2xs-size) * 1);
  --label-2xs-letter-spacing: 0;
  /* OVERLINE */
  --overline-lg-weight: var(--fw-medium);
  --overline-lg-size: 2.1rem;
  --overline-lg-line-height: calc(var(--overline-lg-size) * 1.4);
  --overline-lg-letter-spacing: 0;
  --overline-md-weight: var(--fw-medium);
  --overline-md-size: 1.4rem;
  --overline-md-line-height: calc(var(--overline-md-size) * 1.4);
  --overline-md-letter-spacing: 0;
  --overline-sm-weight: var(--fw-medium);
  --overline-sm-size: 1.2rem;
  --overline-sm-line-height: calc(var(--overline-sm-size) * 1.4);
  --overline-sm-letter-spacing: 0;
}

@media (max-width: 48em) {
  :root {
    /* DISPLAY */
    --display-lg-size: 8.6rem;
    --display-lg-line-height: calc(var(--display-lg-size) * 1);
    --display-sm-size: 5.2rem;
    --display-sm-line-height: calc(var(--display-sm-size) * 1.1);
    /* HEADING */
    --heading-2xl-size: 3.2rem;
    --heading-2xl-line-height: calc(var(--heading-2xl-size) * 1.1);
    --heading-xl-size: 2.8rem;
    --heading-xl-line-height: calc(var(--heading-xl-size) * 1.15);
    --heading-lg-size: 2.4rem;
    --heading-lg-line-height: calc(var(--heading-lg-size) * 1.2);
    --heading-md-size: 2rem;
    --heading-md-line-height: calc(var(--heading-md-size) * 1.25);
    --heading-sm-size: 1.8rem;
    --heading-sm-line-height: calc(var(--heading-sm-size) * 1.3);
    --heading-xs-size: 1.6rem;
    --heading-xs-line-height: calc(var(--heading-xs-size) * 1.35);
    /* TEXT */
    --text-lg-size: 1.6rem;
    --text-lg-line-height: calc(var(--text-lg-size) * 1.6);
    --text-md-size: 1.4rem;
    --text-md-line-height: calc(var(--text-md-size) * 1.6);
    --text-sm-size: 1.3rem;
    --text-sm-line-height: calc(var(--text-sm-size) * 1.6);
    /* LABEL */
    --label-2xl-size: 2rem;
    --label-2xl-line-height: calc(var(--label-2xl-size) * 1.4);
    --label-2xl-letter-spacing: 0.00em;
    --label-xl-size: 1.8rem;
    --label-xl-line-height: calc(var(--label-xl-size) * 1.4);
    --label-xl-letter-spacing: 0.00em;
    --label-lg-size: 1.6rem;
    --label-lg-line-height: calc(var(--label-lg-size) * 1.4);
    --label-lg-letter-spacing: 0.00em;
    --label-md-size: 1.4rem;
    --label-md-line-height: calc(var(--label-md-size) * 1.4);
    --label-md-letter-spacing: 0.00em;
    --label-sm-line-height: calc(var(--label-sm-size) * 1.4);
    --label-sm-letter-spacing: 0.00em;
    --label-xs-line-height: calc(var(--label-xs-size) * 1.4);
    --label-xs-letter-spacing: 0.00em;
    --label-2xs-line-height: calc(var(--label-2xs-size) * 1.4);
    --label-2xs-letter-spacing: 0.00em;
    /* OVERLINE */
    --overline-lg-size: 1.9rem;
    --overline-lg-line-height: calc(var(--overline-lg-size) * 1.4);
    --overline-lg-letter-spacing: 0.00em;
    --overline-md-size: 1.3rem;
    --overline-md-line-height: calc(var(--overline-md-size) * 1.4);
    --overline-md-letter-spacing: 0.00em;
    --overline-sm-size: 1.1rem;
    --overline-sm-line-height: calc(var(--overline-sm-size) * 1.4);
    --overline-sm-letter-spacing: 0.00em;
  }
}
:root {
  color-scheme: light dark;
  /* Indica il supporto a entrambi */
  --theme-toggle-bg: #757B82;
  --theme-toggle-bg-hover: #B5B1B1;
  --theme-toggle-icon: #D4D4D4;
  --theme-toggle-icon-hover: #323337;
  --color-bg-page: #FFFFFF;
  --text-primary: #6B7280;
  --text-strong: #1F2937;
  --text-muted: #E5E7EB;
  --color-divider: #E5E7EB;
  --heading-primary: #323337;
  --heading-secondary: #323337;
  --heading-primary-hover: #9EB7CC;
  --link-primary: #3D6A92;
  --link-primary-hover: #7797B3;
  --link-primary-active: #FFFFFF;
  /* LOGIN */
  --login-logo: url("../img/logo.svg");
  --login-bg-img: url("../img/login-sfondo.webp");
  --login-bg-overlay1: none;
  --login-bg-overlay2: none;
  --login-bg-blend-mode: none;
  --login-bg: linear-gradient(#197599, #0C648E);
  --login-bg-blend-mode: hard-light;
  /* HEADER */
  --header-logo: var(--login-logo);
  --header-bg: #D9E0E4;
  --header-nav-bg: var(--header-bg);
  --header-nav-bg-hover: rgba(255 255 255 / 0.5);
  --header-link: #000000;
  --header-link-hover: #5B6168;
  --header-nav-divisore: #C8CACD;
  --header-submenu-bg: #484848;
  --header-submenu-bg-hover: #5B6168;
  --header-submenu-divisore: #757B82;
  --header-submenu-link: #F9FAFB;
  --header-submenu-link-hover: #F9FAFB;
  /* HAMBURGER MENU */
  --hamburger-menu-bg: #F5F5F5;
  --hamburger-menu-border: #D4D4D4;
  --hamburger-menu-icon: #6B7280;
  /* GO TO TOP  */
  --goto-top-bg: #7797B3;
  --goto-top-bg-hover: #9EB7CC;
  --goto-top: #FFFFFF;
  /* HERO */
  --hero-bg: url("../img/hero-bg.webp");
  --hero-bg-color: #96A5B5;
  --hero-border: #B1C3D3;
  --hero-overline: #C2CCD6;
  --hero-titolo: #C8CACD;
  --hero-titolo-blend-mode: soft-light;
  --hero-img-opacity: 1;
  --hero-img-blend-mode: overlay;
  /* MININAV */
  --mininav-link: #FAFAFA;
  --mininav-link-hover: #FAFAFA;
  --mininav-link-bg: rgba(255, 255, 255, 1);
  --mininav-link-bg-hover: #3D6A92;
  --mininav-divisore: #A3A3A3;
  --mininav-bg-0: #9EB7CC;
  --mininav-bg-50: #9EB7CC;
  --mininav-bg-100: #9EB7CC;
  --mininav-bg: linear-gradient(to right,
            var(--mininav-bg-0) 9%,
            var(--mininav-bg-50) 29%,
            var(--mininav-bg-100) 92%);
  /* ACCORDION */
  --accordion-gradient-1: #F5F5F5;
  --accordion-gradient-2: #F5F5F5;
  --accordion-bg: linear-gradient(to right,
            var(--accordion-gradient-1),
            var(--accordion-gradient-2));
  --accordion-icon: #A3A3A3;
  --accordion-titolo: #0F151C;
  --accordion-testo: #7797B3;
  /* SIDEBAR */
  --text-secondary: #A3A3A3;
  --text-secondary-hover: #737373;
  --text-tertiary: #9CA3AF;
  /* BREAKING NEWS */
  --link-indice-bg: var(--color-indice-bg);
  --link-indice: var(--color-indice);
  --link-indice-hover: var(--color-indice-hover);
  --indice-divisore: var(--color-indice-divisore);
  /* SUMMARY */
  --pdf-sfondo: #91959B;
  --pdf-testo: #fff;
  /* FOOTER */
  --footer-bg: #757B82;
  --footer-logo: url("../img/logo-novartis.svg");
  --footer-divisore: #D4D4D4;
  --footer-sponsor-label: #B5B1B1;
  --footer-sponsor-logo: #dd2826;
  --footer-meta-credits: #B5B1B1;
  --footer-meta-legal: #E5E5E5;
  --footer-link: #B5B1B1;
  --footer-link-hover: #D4D4D4;
  --footer-link-light: #C8CACD;
  --footer-link-light-hover: #F1F2F2;
  /* INTERVISTA */
  --intervista-nome: #0A375F;
  --intervista-affiliazione: #5B6168;
  --intervista-domanda: #5B6168;
  --intervista-domanda-bg: #FFFFFF;
  --intervista-domanda-bg-hover: #F3F4F6;
  --intervista-domanda-divisore: #E5E7EB;
  /* IMMAGINI */
  --img-border: #E5E7EB;
  --icona-breaking-news: #C8CACD;
  --icona-summaries: #C8CACD;
  /*--icona-summaries: image-set(url("../img/icona-summaries.webp") 1x,
            url("../img/icona-summaries-2x.webp") 2x,
            url("../img/icona-summaries-3x.webp") 3x);
            */
}

[data-theme=dark] {
  /* override */
  --theme-toggle-bg: #D4D4D4;
  --theme-toggle-bg-hover: #F5F5F5;
  --theme-toggle-icon: #404040;
  --theme-toggle-icon-hover: #A3A3A3;
  --color-bg-page: #242424;
  --text-primary: #9E9E9E;
  /*  */
  --text-strong: #E5E5E5;
  --text-muted: #383F4D;
  --color-divider: #393939;
  --heading-primary: #E0E0E0;
  --heading-primary-hover: #9E9E9E;
  --heading-secondary: #9E9E9E;
  --link-primary: #7797B3;
  --link-primary-hover: #9EB7CC;
  --link-primary-active: #D1D5DB;
  /* LOGIN */
  --login-logo: url("../img/logo-dark.svg");
  --login-bg-img: url("../img/login-sfondo-dark.webp");
  --login-bg: url("../img/login-sfondo-dark.webp");
  --login-bg-overlay1: linear-gradient(to right,
            rgba(var(--dark-bg-rgb) / 0.9) 0%,
            rgba(var(--dark-bg-rgb) / 0.9) 100%);
  --login-bg-overlay2: radial-gradient(400rem circle at bottom left,
            rgba(var(--dark-bg-rgb) / 1) 0%,
            rgba(var(--dark-bg-rgb) / 0.5) 30%,
            rgba(var(--dark-bg-rgb) / 0) 100%);
  --login-bg: linear-gradient(#052042, #051239);
  /* HEADER */
  --header-logo: var(--login-logo);
  --header-bg: #242424;
  --header-nav-bg: var(--header-bg);
  --header-nav-bg-hover: rgba(255 255 255 / 0.1);
  --header-link: #E0E0E0;
  --header-link-hover: #E0E0E0;
  --header-nav-divisore: #484848;
  --header-submenu-bg: #5B6168;
  --header-submenu-bg-hover: #757B82;
  --header-submenu-divisore: #757B82;
  --header-submenu-link: #F3F4F6;
  --header-submenu-link-hover: #F3F4F6;
  /* HAMBURGER MENU */
  --hamburger-menu-bg: #2C2C2C;
  --hamburger-menu-border: #757575;
  --hamburger-menu-icon: #9E9E9E;
  /* GO TO TOP  */
  --goto-top-bg: #7797B3;
  --goto-top-bg-hover: #B1C3D3;
  --goto-top: #FFFFFF;
  /* HERO */
  --hero-bg: url("../img/hero-bg-dark.webp");
  --hero-bg-color: #676F79;
  --hero-border: #235078;
  --hero-overline: #6488A8;
  --hero-img-opacity: 1;
  /* MININAV */
  --mininav-link: #D4D4D4;
  --mininav-link-hover: #D4D4D4;
  --mininav-link-bg: rgba(255, 255, 255, 1);
  --mininav-link-bg-hover: #235078;
  --mininav-divisore: #3D6A92;
  --mininav-bg-0: #3D6A92;
  --mininav-bg-50: #3D6A92;
  --mininav-bg-100: #3D6A92;
  --mininav-bg: linear-gradient(to right,
            var(--mininav-bg-0) 9%,
            var(--mininav-bg-50) 29%,
            var(--mininav-bg-100) 92%);
  /* ACCORDION */
  --accordion-gradient-1: #2D2D2D;
  --accordion-gradient-2: #2D2D2D;
  --accordion-bg: linear-gradient(to right,
            var(--accordion-gradient-1),
            var(--accordion-gradient-2));
  --accordion-icon: #737373;
  --accordion-titolo: var(--heading-primary);
  --accordion-testo: var(--text-primary);
  /* SIDEBAR */
  --text-secondary: #757575;
  /*  */
  --text-secondary-hover: #9E9E9E;
  /*  */
  --text-tertiary: #757575;
  /*  */
  /* FOOTER */
  --footer-bg: #2C2C2C;
  --footer-logo: url("../img/logo-novartis-dark.svg");
  --footer-divisore: #6B7280;
  --footer-sponsor-label: #737373;
  --footer-sponsor-logo: #737373;
  --footer-meta-credits: #737373;
  --footer-meta-legal: #737373;
  --footer-link: #737373;
  --footer-link-hover: #F5F5F5;
  --footer-link-light: #A3A3A3;
  --footer-link-light-hover: #E5E5E5;
  /* INTERVISTA */
  --intervista-nome: #E0E0E0;
  --intervista-affiliazione: #9E9E9E;
  --intervista-domanda: #9E9E9E;
  --intervista-domanda-bg: #242424;
  --intervista-domanda-bg-hover: #353535;
  --intervista-domanda: #9E9E9E;
  --intervista-domanda-hover: #E5E5E5;
  --intervista-domanda-divisore: #525252;
  /* IMMAGINI */
  --img-border: #393939;
  --icona-breaking-news: #525252;
  --icona-summaries: #525252;
}

[data-theme=dark] .summaries__icona-img {
  /* Questo inverte i colori rendendo il nero bianco */
}

[data-theme=dark] ::selection {
  background: #383F4D;
  color: #E5E7EB;
}

:root {
  --icon-2xl: 3.6rem;
  --icon-xl: 3.2rem;
  --icon-lg: 2.8rem;
  --icon-md: 2.4rem;
  --icon-sm: 2.0rem;
  --icon-xs: 1.6rem;
  --icon-stroke-100: 1;
  --icon-stroke-150: 1.5;
  --icon-stroke-200: 2;
  /* BTN */
  --btn-icon-size-xl: var(--icon-lg);
  --btn-icon-size-lg: var(--icon-lg);
  --btn-icon-size-md: var(--icon-md);
  --btn-icon-size-sm: var(--icon-xs);
  /* INPUT */
  --input-icon-size-lg: var(--icon-lg);
  --input-icon-size-md: var(--icon-md);
  --input-icon-size-sm: var(--icon-sm);
}

@media (max-width: 48em) {
  :root {
    --icon-2xl: 3.2rem;
    --icon-xl: 2.8rem;
    --icon-lg: 2.4rem;
    --icon-md: 2.0rem;
    --icon-sm: 1.6rem;
    --icon-xs: 1.4rem;
  }
}
@media (max-width: 23.4375em) {
  :root {
    --icon-2xl: 2.8rem;
    --icon-xl: 2.4rem;
    --icon-lg: 2.0rem;
    --icon-md: 1.8rem;
    --icon-sm: 1.6rem;
    --icon-xs: 1.4rem;
  }
}
:root {
  /* =========================================================
       INPUT / SPACING 
  ========================================================= */
  /* INPUT / SPACING - base active tokens */
  --input-gap: 1.2rem;
  --input-control-gap: 2.0rem;
  --input-control-px: 2.0rem;
  --input-control-py: 1.2rem;
  /* =========================================================
       INPUT / BORDER WIDTH
  ========================================================= */
  --input-border-width: 1px;
  --input-outline-width: 3px;
  /* =========================================================
       INPUT / BACKGROUND
  ========================================================= */
  --input-bg: #FFFFFF;
  --input-bg-hover: #F9FAFB;
  --input-bg-disabled: #F3F4F6;
  /* =========================================================
       INPUT / BORDER COLOR
  ========================================================= */
  --input-border: #D1D5DB;
  --input-border-hover: #6B7280;
  --input-border-disabled: #D1D5DB;
  --input-border-focus: #7797B3;
  --input-border-error: #EF4444;
  /* =========================================================
       INPUT / OUTLINE
  ========================================================= */
  --input-outline-focus: #C2CCD6;
  --input-outline-error: #FECACA;
  /* =========================================================
       INPUT / LABEL
  ========================================================= */
  --input-label: #6B7280;
  --input-label-hover: #4B5563;
  --input-label-disabled: #9CA3AF;
  --input-label-error: #DC2626;
  /* =========================================================
       INPUT / PLACEHOLDER
  ========================================================= */
  --input-placeholder: #9CA3AF;
  --input-placeholder-disabled: #9CA3AF;
  /* =========================================================
       INPUT / HELP TEXT
  ========================================================= */
  --input-help: #9CA3AF;
  --input-help-disabled: #D1D5DB;
  --input-help-error: #EF4444;
  /* =========================================================
       INPUT / ICON
  ========================================================= */
  --input-icon: #6B7280;
  --input-icon-disabled: #9CA3AF;
  --input-icon-error: #9CA3AF;
  /* =========================================================
       INPUT / INPUT TEXT
  ========================================================= */
  --input-text: #9CA3AF;
  --input-text-disabled: #9CA3AF;
  --input-accent: #FFFFFF;
}

[data-theme=dark] {
  /* =========================================================
       INPUT / BACKGROUND
  ========================================================= */
  --input-bg: #2C2C2C;
  --input-bg-hover: #2D2D2D;
  --input-bg-disabled: #272727;
  /* =========================================================
       INPUT / BORDER COLOR
  ========================================================= */
  --input-border: #4B5563;
  --input-border-hover: #9CA3AF;
  --input-border-disabled: #393939;
  --input-border-focus: #9EB7CC;
  --input-border-error: #F87171;
  /* =========================================================
       INPUT / OUTLINE
  ========================================================= */
  --input-outline-focus: #7797B3;
  --input-outline-error: #EF4444;
  /* =========================================================
       INPUT / LABEL
  ========================================================= */
  --input-label: #DADADA;
  --input-label-hover: #E0E0E0;
  --input-label-disabled: #787878;
  --input-label-error: #F87171;
  /* =========================================================
       INPUT / PLACEHOLDER
  ========================================================= */
  --input-placeholder: #9CA3AF;
  --input-placeholder-disabled: #6B7280;
  /* =========================================================
       INPUT / HELP TEXT
  ========================================================= */
  --input-help: #6B7280;
  --input-help-disabled: #6B7280;
  --input-help-error: #EF4444;
  /* =========================================================
       INPUT / ICON
  ========================================================= */
  --input-icon: #6B7280;
  --input-icon-disabled: #6B7280;
  --input-icon-error: #6B7280;
  /* =========================================================
       INPUT / INPUT TEXT
  ========================================================= */
  --input-text: #DADADA;
  --input-text-disabled: #B6B6B6;
}

/* SIZE MODIFIERS */
.input--lg {
  --input-gap: .8rem;
  --input-control-gap: 1.2rem;
  --input-control-px: 2rem;
  --input-control-py: 1.2rem;
}

.input--md {
  --input-gap: .6rem;
  --input-control-gap: .8rem;
  --input-control-px: 1.6rem;
  --input-control-py: 1rem;
}

.input--sm {
  --input-gap: .4rem;
  --input-control-gap: .6rem;
  --input-control-px: 1.2rem;
  --input-control-py: .8rem;
}

@media (max-width: 48em) {
  .input--lg {
    --input-gap: .6rem;
    --input-control-gap: 1rem;
    --input-control-px: 1.6rem;
    --input-control-py: 1rem;
  }
  .input--md {
    --input-gap: .4rem;
    --input-control-gap: .6rem;
    --input-control-px: 1.2rem;
    --input-control-py: .8rem;
  }
  .input--sm {
    --input-gap: .3rem;
    --input-control-gap: .4rem;
    --input-control-px: 1rem;
    --input-control-py: .6rem;
  }
}
@media (max-width: 23.4375em) {
  .input--lg {
    --input-gap: .4rem;
    --input-control-gap: .8rem;
    --input-control-px: 1.2rem;
    --input-control-py: .8rem;
  }
  .input--md {
    --input-gap: .3rem;
    --input-control-gap: .6rem;
    --input-control-px: 1rem;
    --input-control-py: .6rem;
  }
  .input--sm {
    --input-gap: .2rem;
    --input-control-gap: .4rem;
    --input-control-px: .8rem;
    --input-control-py: .5rem;
  }
}
:root {
  /* =========================================================
       CHECKBOX / SPACING 
  ========================================================= */
  --checkbox-size: 2.4rem;
  --checkbox-gap: .8rem;
}

:root {
  /* =========================================================
  BTN - SPACING 
  ========================================================= */
  --btn-xl-px: 2rem;
  --btn-xl-py: 1.2rem;
  --btn-xl-gap: 1.2rem;
  --btn-lg-px: 2rem;
  --btn-lg-py: 1.2rem;
  --btn-lg-gap: 1.2rem;
  --btn-md-px: 1.6rem;
  --btn-md-py: 1.0rem;
  --btn-md-gap: .8rem;
  --btn-sm-px: 1.2rem;
  --btn-sm-py: .8rem;
  --btn-sm-gap: .6rem;
  --btn-radius-sm: 0px;
  --btn-radius-md: .8rem;
  --btn-radius-lg: 999px;
  --outline-offset: 0;
  --outline-offset-focus: 0px;
  /* =========================================================
  BTN — MODALITÀ NORMALE
  ========================================================= */
  /* ================= PRIMARY ================= */
  /* Background */
  --btn-primary-bg: #7797B3;
  --btn-primary-bg-hover: #9EB7CC;
  --btn-primary-bg-active: #3D6A92;
  --btn-primary-bg-disabled: #D8E1E9;
  /* Border */
  --btn-primary-border: #7797B3;
  --btn-primary-border-hover: #9EB7CC;
  --btn-primary-border-active: #3D6A92;
  --btn-primary-border-disabled: #D8E1E9;
  /* Text */
  --btn-primary-text: #FFFFFF;
  --btn-primary-text-disabled: #B1C3D3;
  /* Border Width */
  --btn-primary-border-width: 1px;
  --btn-primary-border-color-focus: #6488A8;
  --btn-primary-border-width-focus: 1px;
  --btn-primary-border-width-disabled: 1px;
  /* Outline */
  --btn-primary-outline-color-focus: #C2CCD6;
  --btn-primary-outline-width-focus: 3px;
  /* ================= SECONDARY ================= */
  /* Background */
  --btn-secondary-bg: #FAFAFA;
  --btn-secondary-bg-hover: #D4D4D4;
  --btn-secondary-bg-active: #404040;
  --btn-secondary-bg-disabled: #FAFAFA;
  /* Border */
  --btn-secondary-border: #A3A3A3;
  --btn-secondary-border-active: #404040;
  --btn-secondary-border-focus: #737373;
  --btn-secondary-border-disabled: #E5E5E5;
  /* Text */
  --btn-secondary-text: #404040;
  --btn-secondary-text-hover: #FFFFFF;
  --btn-secondary-text-active: #FFFFFF;
  --btn-secondary-text-disabled: #D4D4D4;
  /* Border Width */
  --btn-secondary-border-width: 1px;
  --btn-secondary-border-color-focus: #6488A8;
  --btn-secondary-border-width-focus: 1px;
  /* Outline */
  --btn-secondary-outline-color-focus: #E5E5E5;
  --btn-secondary-outline-width-focus: 3px;
  /* ================= TERTIARY ================= */
  /* Background */
  --btn-tertiary-bg: #6B7280;
  --btn-tertiary-bg-hover: #9CA3AF;
  --btn-tertiary-bg-active: #3D6A92;
  --btn-tertiary-bg-disabled: #D8E1E9;
  /* Border */
  --btn-tertiary-border: #6B7280;
  --btn-tertiary-border-hover: #9CA3AF;
  --btn-tertiary-border-active: #3D6A92;
  --btn-tertiary-border-disabled: #D8E1E9;
  /* Text */
  --btn-tertiary-text: #ECF0F4;
  --btn-tertiary-text-disabled: #B1C3D3;
  /* Border Width */
  --btn-tertiary-border-width: 1px;
  --btn-tertiary-border-color-focus: #6488A8;
  --btn-tertiary-border-width-focus: 1px;
  --btn-tertiary-border-width-disabled: 1px;
  /* Outline */
  --btn-tertiary-outline-color-focus: #C2CCD6;
  --btn-tertiary-outline-width-focus: 3px;
  /* ================= GHOST ================= */
  /* Background */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: #ECF0F4;
  --btn-ghost-bg-active: #D8E1E9;
  --btn-ghost-bg-disabled: transparent;
  /* Border */
  --btn-ghost-border: #FFFFFF;
  --btn-ghost-border-hover: #FAFAFA;
  --btn-ghost-border-active: #D8E1E9;
  --btn-ghost-border-focus: #C2CCD6;
  --btn-ghost-border-disabled: #FAFAFA;
  /* Text */
  --btn-ghost-text: #7797B3;
  --btn-ghost-text-hover: #6488A8;
  --btn-ghost-text-active: #3D6A92;
  --btn-ghost-text-disabled: #A3A3A3;
  /* Border Width */
  --btn-ghost-border-width: 1px;
  --btn-ghost-border-color-focus: #C2CCD6;
  --btn-ghost-border-width-focus: 1px;
  /* Outline */
  --btn-ghost-outline-color-focus: #D8E1E9;
  --btn-ghost-outline-width-focus: 3px;
}

[data-theme=dark] {
  /* =========================================================
  BTN — MODALITÀ DARK
  ========================================================= */
  /* ================= PRIMARY ================= */
  /* Background */
  --btn-primary-bg: #7797B3;
  --btn-primary-bg-hover: #9EB7CC;
  --btn-primary-bg-active: #6488A8;
  --btn-primary-bg-disabled: #323232;
  /* Border */
  --btn-primary-border: #6488A8;
  --btn-primary-border-hover: #7797B3;
  --btn-primary-border-active: #235078;
  --btn-primary-border-disabled: #323232;
  /* Text */
  --btn-primary-text: #FFFFFF;
  --btn-primary-text-disabled: #737373;
  /* Border Width */
  --btn-primary-border-width: 1px;
  --btn-primary-border-color-focus: #6488A8;
  --btn-primary-border-width-focus: 3px;
  /* Outline */
  --btn-primary-outline-color-focus: #C2CCD6;
  --btn-primary-outline-width-focus: 3px;
  /* ================= SECONDARY ================= */
  /* Background */
  --btn-secondary-bg: #272727;
  --btn-secondary-bg-hover: #2D2D2D;
  --btn-secondary-bg-active: #393939;
  --btn-secondary-bg-disabled: #272727;
  /* Border */
  --btn-secondary-border: #525252;
  --btn-secondary-border-hover: #737373;
  --btn-secondary-border-active: #737373;
  --btn-secondary-border-disabled: #404040;
  --btn-secondary-border-color-focus: #171717;
  /* Text */
  --btn-secondary-text: #E5E5E5;
  --btn-secondary-text-hover: #FFFFFF;
  --btn-secondary-text-active: #FFFFFF;
  --btn-secondary-text-disabled: #525252;
  /* Border Width */
  --btn-secondary-border-width: 1px;
  --btn-secondary-border-width-focus: 1px;
  /* Outline */
  --btn-secondary-outline-color-focus: #525252;
  --btn-secondary-outline-width-focus: 3px;
  /* ================= TERTIARY ================= */
  /* Background */
  --btn-tertiary-bg: #6488A8;
  --btn-tertiary-bg-hover: #7797B3;
  --btn-tertiary-bg-active: #0A375F;
  --btn-tertiary-bg-disabled: #B1C3D3;
  /* Border */
  --btn-tertiary-border: #6488A8;
  --btn-tertiary-border-hover: #7797B3;
  --btn-tertiary-border-active: #0A375F;
  --btn-tertiary-border-disabled: #B1C3D3;
  /* Text */
  --btn-tertiary-text: #C2CCD6;
  --btn-tertiary-text-disabled: #7797B3;
  /* Border Width */
  --btn-tertiary-border-width: 1px;
  --btn-tertiary-border-color-focus: #235078;
  --btn-tertiary-border-width-focus: 1px;
  --btn-tertiary-border-width-disabled: 1px;
  /* Outline */
  --btn-tertiary-outline-color-focus: #9EB7CC;
  --btn-tertiary-outline-width-focus: 3px;
  /* ================= GHOST ================= */
  /* Background */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: #272727;
  --btn-ghost-bg-active: #2D2D2D;
  --btn-ghost-bg-disabled: transparent;
  /* Border */
  --btn-ghost-border: transparent;
  --btn-ghost-border-hover: #2C2C2C;
  --btn-ghost-border-active: #2C2C2C;
  --btn-ghost-border-disabled: #2D2D2D;
  --btn-ghost-border-color-focus: #1D1D1D;
  /* Text */
  --btn-ghost-text: #A3A3A3;
  --btn-ghost-text-hover: #A3A3A3;
  --btn-ghost-text-active: #A3A3A3;
  --btn-ghost-text-disabled: #404040;
  /* Border Width */
  --btn-ghost-border-width: 1px;
  --btn-ghost-border-width-focus: 1px;
  /* Outline */
  --btn-ghost-outline-color-focus: #525252;
  --btn-ghost-outline-width-focus: 3px;
}

@media (max-width: 48em) {
  :root {
    /* =========================================================
       BTN / SPACING
    ========================================================= */
    --btn-xl-px: 1.6rem;
    --btn-xl-py: 1.0rem;
    --btn-xl-gap: 1.0rem;
    --btn-lg-px: 1.6rem;
    --btn-lg-py: 1.0rem;
    --btn-lg-gap: 1.0rem;
    --btn-md-px: 1.2rem;
    --btn-md-py: 0.8rem;
    --btn-md-gap: 0.6rem;
    --btn-sm-px: 1.0rem;
    --btn-sm-py: 0.6rem;
    --btn-sm-gap: 0.4rem;
  }
}
@media (max-width: 23.4375em) {
  :root {
    /* =========================================================
       BTN / SPACING
    ========================================================= */
    --btn-xl-px: 1.2rem;
    --btn-xl-py: 0.8rem;
    --btn-xl-gap: 0.8rem;
    --btn-lg-px: 1.2rem;
    --btn-lg-py: 0.8rem;
    --btn-lg-gap: 0.8rem;
    --btn-md-px: 1.0rem;
    --btn-md-py: 0.6rem;
    --btn-md-gap: 0.4rem;
    --btn-sm-px: 0.8rem;
    --btn-sm-py: 0.5rem;
    --btn-sm-gap: 0.3rem;
  }
}
:root { /** DESKTOP FIRST **/
  /* CONTAINER */
  --container-wide-max: 1920px;
  --container-max: 1440px;
  --padding-inline: 4.0rem; /* 40px */
  --padding-inline-wide: 5.2rem; /* 52px */
  /* GRID */
  --layout-colonne: 12;
  --layout-gutters: 2.8rem; /* 28px */
}

@media (max-width: 120em) {
  /*  1920px */
  :root {
    /* CONTAINER */
    --container-max: 1320px;
    --padding-inline: 3.2rem; /* 32px */
    --padding-inline-wide: 5.2rem; /* 52px */
    /* GRID */
    --layout-colonne: 12;
    --layout-gutters: 2.4rem; /* 24px */
  }
}
@media (max-width: 90em) {
  /* 1440px */
  :root {
    /* CONTAINER */
    --container-max: 1200px;
    --padding-inline: 3.2rem; /* 32px */
    --padding-inline-wide: 3.2rem; /* 32px */
    /* GRID */
    --layout-colonne: 12;
    --layout-gutters: 2.4rem; /* 24px */
  }
}
@media (max-width: 64em) {
  /* 1024px */
  :root {
    /* CONTAINER */
    --container-max: 960px;
    --padding-inline: 3.2rem; /* 32px */
    --padding-inline-wide: 3.2rem; /* 32px */
    /* GRID */
    --layout-colonne: 8;
    --layout-gutters: 1.6rem; /* 16px */
  }
}
@media (max-width: 48em) {
  /* 768px */
  :root {
    /* CONTAINER */
    --padding-inline: 2.4rem; /* 24px */
    --padding-inline-wide: 2.4rem; /* 24px */
    /* GRID */
    --layout-colonne: 8;
    --layout-gutters: 1.6rem; /* 16px */
  }
}
@media (max-width: 23.4375em) {
  /* 375px */
  :root {
    /* CONTAINER */
    --padding-inline: 1.6rem; /* 16px */
    --padding-inline-wide: 1.6rem; /* 16px */
    /* GRID */
    --layout-colonne: 4;
    --layout-gutters: 0.8rem; /* 8px */
  }
}
:root {
  /* SECTIONS */
  --section-spacious: 9.6rem; /* 96px */
  --section-default: 8.0rem; /* 80px */
  --section-compact: 5.6rem; /* 56px */
  /* CONTENT */
  --space-block: 4.0rem; /* 40px */
  --space-title: 3.2rem; /* 32px */
  --space-text: 1.6rem; /* 16px */
}

/* =========================
     DESKTOP (1440)
========================= */
@media (max-width: 90em) {
  :root {
    /* SECTIONS */
    --section-spacious: 8.0rem;
    --section-default: 7.2rem;
    --section-compact: 5.6rem;
    /* CONTENT */
    --space-block: 3.2rem;
    --space-title: 2.8rem;
    --space-text: 1.6rem;
  }
}
/* =========================
     TABLET LANDSCAPE (1024)
========================= */
@media (max-width: 64em) {
  :root {
    /* SECTIONS */
    --section-spacious: 8.0rem;
    --section-default: 6.4rem;
    --section-compact: 4.8rem;
    /* CONTENT */
    --space-block: 3.2rem;
    --space-title: 2.4rem;
    --space-text: 1.6rem;
  }
}
/* =========================
     TABLET PORTRAIT (768)
========================= */
@media (max-width: 48em) {
  :root {
    /* SECTIONS */
    --section-spacious: 6.4rem;
    --section-default: 5.6rem;
    --section-compact: 4.0rem;
    /* CONTENT */
    --space-block: 2.4rem;
    --space-title: 2.4rem;
    --space-text: 1.2rem;
  }
}
/* =========================
     MOBILE (375)
========================= */
@media (max-width: 23.4375em) {
  :root {
    /* SECTIONS */
    --section-spacious: 5.6rem;
    --section-default: 4.8rem;
    --section-compact: 3.2rem;
    /* CONTENT */
    --space-block: 2.4rem;
    --space-title: 2.0rem;
    --space-text: 1.2rem;
  }
}
/* =========================================================
     GLASS TOKENS
========================================================= */
:root {
  --glass-blur: 20px;
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* DARK MODE */
@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(20, 20, 20, 0.22);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }
}
/* ===========================
   ROBOTO
   =========================== */
/* THIN (100) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/* LIGHT (300) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* REGULAR (400) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* MEDIUM (500) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* BOLD (700) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* BLACK (900) */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Text/Roboto/Roboto-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* ===========================
   ROBOTO CONDENSED
   =========================== */
/* THIN (100) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/* LIGHT (300) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* REGULAR (400) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* MEDIUM (500) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* BOLD (700) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* BLACK (900) */
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/Text/RobotoCondensed/RobotoCondensed-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* ===========================
   OPEN SANS
   =========================== */
/* LIGHT (300) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* REGULAR (400) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ITALIC (400) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* MEDIUM (500) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* SEMIBOLD (600) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* BOLD (700) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* EXTRABOLD (800) */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Text/OpenSans/OpenSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* ===========================
   NEUE HAAS DISPLAY
   =========================== */
/* XXTHIN (100) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-XXThin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-XXThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
/* XTHIN (200) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-XThin.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-XThinItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
/* THIN (300) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Thin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-ThinItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* LIGHT (350 – peso intermedio) */
@font-face {
  font-family: "Neue Haas Display Light";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display Light";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-LightItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* ROMAN (400) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-RomanItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* MEDIUM (500) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* BOLD (700) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* BLACK (900) */
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Haas Display";
  src: url("../fonts/Text/NeueHaasDisplay/NeueHaasDisplay-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/* ===========================
   MYRIAD PRO - Completo
   =========================== */
/* LIGHT */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* LIGHT ITALIC */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-LightIt.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* REGULAR */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ITALIC */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-It.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* SEMIBOLD (≈ 600) */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* SEMIBOLD ITALIC */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-SemiboldIt.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* BOLD (≈ 700) */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* BOLD ITALIC */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-BoldIt.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* BLACK (≈ 800) */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* BLACK ITALIC */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/Text/MyriadPro/MyriadPro-BlackIt.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* CONDENSED REGULAR */
@font-face {
  font-family: "Myriad Pro Condensed";
  src: url("../fonts/Text/MyriadPro/MyriadPro-Cond.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* CONDENSED ITALIC */
@font-face {
  font-family: "Myriad Pro Condensed";
  src: url("../fonts/Text/MyriadPro/MyriadPro-CondIt.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* CONDENSED BOLD */
@font-face {
  font-family: "Myriad Pro Condensed";
  src: url("../fonts/Text/MyriadPro/MyriadPro-BoldCond.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* CONDENSED BOLD ITALIC */
@font-face {
  font-family: "Myriad Pro Condensed";
  src: url("../fonts/Text/MyriadPro/MyriadPro-BoldCondIt.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
body {
  opacity: 0;
  transition: opacity 400ms ease-out;
  /*
       Disattiva transition
       opacity: 1 !important;
       transition: none !important;
  */
}

body.is-ready {
  opacity: 1;
}

html.is-leaving body {
  opacity: 0;
}

/* =========================================
   TYPOGRAPHY BASE
========================================= */
h1 {
  text-transform: uppercase;
}

h2 {
  font-weight: var(--heading-xl-weight);
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-letter-spacing);
}

h3 {
  font-weight: var(--heading-lg-weight);
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line-height);
  letter-spacing: var(--heading-lg-letter-spacing);
}

h4 {
  font-weight: var(--heading-md-weight);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
}

h5 {
  font-weight: var(--heading-sm-weight);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
}

h6 {
  font-weight: var(--heading-xs-weight);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
}

/**/
p + p {
  margin-top: var(--space-text);
}

strong,
b {
  font-weight: var(--fw-bold, 700);
}

small {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line-height);
}

input,
textarea,
select,
button {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}

::selection {
  background: #b1b1b1;
  color: #fff;
  text-shadow: none;
}

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

svg {
  display: inline-block;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

sup {
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.8em;
}

blockquote {
  border-left: 5px solid var(--color-divider);
  padding-left: 2.5rem;
  margin-block: var(--space-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /*
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    */
  }
}
@media (hover: none) {
  /* per dispositivi TOUCH: evita che su mobile rimangano attivi gli stati :hover dopo il tap (cosa fastidiosa) */
}
@media (hover: hover) {
  /* per dispositivi con MOUSE */
}
@media (any-hover: hover) {
  /* stili se qualsiasi dispositivo di input è in grado di eseguire l'hover */
}
@media (any-pointer: coarse) {
  /* stili da applicare se il puntatore collegato è grossolano */
}
@media (prefers-color-scheme: dark) {
  /* Utile per dark mode automatica. */
  body {
    background: #121212;
    color: #ddd;
  }
}
/* =========================================
   TYPOGRAPHY HELPERS / STYLEGUIDE
========================================= */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  box-sizing: border-box;
}

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

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

body {
  font-family: "Myriad Pro", "Myriad Pro";
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line-height);
  background-color: var(--color-bg-page);
  transition: opacity 400ms ease-out, background-color 200ms ease, color 200ms ease;
  color: var(--text-primary);
}
body h1,
body h2 {
  font-weight: 400 !important;
}

.force-dark {
  color-scheme: dark;
}

@page {
  size: auto; /* auto è il valore iniziale */
  margin: 0; /* QUESTO elimina fisicamente lo spazio dove il browser scrive data/titolo */
  padding-top: 1.5cm; /* Spazio in alto */
  padding-bottom: 1.5cm; /* Spazio in basso */
  padding-left: 1cm; /* Spazio a sinistra */
  padding-right: 1cm; /* Spazio a destra */
  background-color: white;
}
@media print {
  p,
  li,
  h2,
  h3 {
    orphans: 3; /* Minimo righe a fondo pagina */
    widows: 3; /* Minimo righe a inizio pagina nuova */
  }
  .section {
    padding-block: 0 !important; /* Azzera padding sopra e sotto (proprietà logica) */
    padding-top: 1cm !important; /* Fallback per motori di stampa meno recenti */
    padding-bottom: 0 !important; /* Fallback per motori di stampa meno recenti */
    margin-block: 0 !important; /* Azzera anche eventuali margini tra sezioni */
  }
  /* Se vuoi eliminare anche lo spazio tra i titoli e il contenuto */
  h2,
  h3 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* 2. Reset totale del Container */
  .container {
    padding-inline: 0 !important;
    padding-left: 0 !important; /* Per compatibilità motori vecchi */
    padding-right: 0 !important; /* Per compatibilità motori vecchi */
    margin-left: 0 !important; /* Rimuove l'auto-centramento */
    margin-right: 0 !important; /* Rimuove l'auto-centramento */
    max-width: none !important; /* Fondamentale: rimuove i vincoli di larghezza (es. 1200px) */
    width: 100% !important; /* Forza l'occupazione di tutto il foglio */
  }
  /* 3. Reset Body */
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  /*        
       // * {
       //      animation: none !important;
       //      transition: none !important;
       // }     
  */
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: currentColor;
  stroke-width: var(--stroke-width, 1.5);
  fill: none;
  flex-shrink: 0;
}

.icon--xs {
  font-size: var(--icon-xs);
}

.icon--sm {
  font-size: var(--icon-sm);
}

.icon--md {
  font-size: var(--icon-md);
}

.icon--lg {
  font-size: var(--icon-lg);
}

.icon--xl {
  font-size: var(--icon-xl);
}

.icon--2xl {
  font-size: var(--icon-2xl);
}

.icon--16 {
  font-size: 1.6rem;
}

.icon--20 {
  font-size: 2rem;
}

.icon--24 {
  font-size: 2.4rem;
}

.icon--28 {
  font-size: 2.8rem;
}

.icon--32 {
  font-size: 3.2rem;
}

.icon--thin {
  --icon-stroke: 1;
}

.icon--bold {
  --icon-stroke: 2;
}

.menu {
  display: flex;
}
.menu__list {
  display: flex;
}
.menu__item {
  display: flex;
}
.menu__item:hover .menu__sub-list {
  transform: translateY(0rem);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menu__link, .menu__link:link, .menu__link:visited {
  display: flex;
  align-items: center;
  padding-inline: 2rem;
  background-color: var(--header-nav-bg);
  color: var(--header-link);
  font-weight: var(--label-2xl-weight);
  font-size: var(--label-2xl-size);
  line-height: var(--label-2xl-line-height);
  letter-spacing: var(--label-2xl-letter-spacing);
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.menu__link:hover, .menu__link:active {
  background-color: var(--header-nav-bg-hover);
}
.menu__link--accent, .menu__link--accent:link, .menu__link--accent:visited {
  font-weight: 600;
  color: var(--link-primary);
}
.menu__link--accent:hover, .menu__link--accent:active {
  color: var(--link-primary-hover);
}
.menu__item--has-sub {
  position: relative;
}
.menu__item--has-sub .menu__link {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}
.menu__sub-list {
  position: absolute;
  top: 100%;
  visibility: hidden;
  pointer-events: none;
  transition: transform 200ms ease-out, opacity 300ms ease-out;
  left: 0;
  font-weight: var(--label-xl-weight);
  font-size: var(--label-xl-size);
  line-height: var(--label-xl-line-height);
  letter-spacing: var(--label-xl-letter-spacing);
  padding-left: 0;
  transform: translateY(1.6rem);
  opacity: 0;
  padding-block: 0.8rem;
  min-width: 22rem;
  background-color: var(--header-submenu-bg);
}
.menu__sub-item {
  margin-inline: 1.2rem;
}
.menu__sub-item:not(:last-child) {
  border-bottom: 1px solid var(--header-submenu-divisore);
}
.menu__sub-link, .menu__sub-link:link, .menu__sub-link:visited {
  display: block;
  position: relative;
  color: var(--header-submenu-link);
  padding-inline: 0.8rem;
  padding-block: 1.2rem;
  white-space: nowrap;
  transition: padding-left 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out;
}
.menu__sub-link:hover, .menu__sub-link:active {
  background-color: var(--header-submenu-bg-hover);
  color: var(--header-submenu-link-hover);
  padding-left: 1.6rem;
}
.menu__icon {
  transform: translateY(-1px) rotate(0deg);
  transition: transform 300ms ease-out;
  display: none;
}
.menu {
  /* MEDIA QUERY */
}
@media (max-width: 90em) {
  .menu__link {
    padding-inline: 1.2rem;
  }
}
@media (max-width: 64em) {
  .menu {
    flex-basis: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 1;
    transition: max-height 500ms ease, opacity 250ms ease-in-out;
  }
  .menu.is-open {
    max-height: 50rem;
    /* abbastanza grande */
    opacity: 1;
  }
  .menu__list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-top: 0.8rem;
  }
  .menu__icon {
    display: block;
  }
  .menu__item:not(:last-child) {
    border-bottom: 1px solid var(--header-nav-divisore);
  }
  .menu__link {
    padding-inline: 2rem;
    padding-block: 1.2rem;
    flex-grow: 1;
  }
  .menu .menu__item--has-sub {
    display: flex;
    flex-direction: column;
  }
  .menu__sub-list {
    position: static;
    visibility: visible;
    opacity: 1;
    top: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 500ms ease-out;
    pointer-events: auto;
    transform: translateY(0);
    padding-block: 0;
    min-width: 22rem;
  }
  .menu__item.is-open .menu__icon {
    transform: translateY(-1px) rotate(90deg);
  }
  .menu__item.is-open .menu__sub-list {
    max-height: 30rem;
  }
}

.navigation__button {
  cursor: pointer;
  position: relative;
  display: none;
  height: 3.6rem;
  width: 3.6rem;
  align-self: center;
  overflow: hidden;
  border-radius: 0;
  background-color: var(--hamburger-menu-bg);
  border: 1px solid var(--hamburger-menu-border);
}
.navigation__button:hover .navigation__icon::after {
  transform: translateY(0.6rem);
}
.navigation__button:hover .navigation__icon::before {
  transform: translateY(-0.6rem);
}
.navigation__button.is-open .navigation__icon {
  transform: translateX(-20px);
  background-color: transparent;
}
.navigation__button.is-open .navigation__icon::after {
  transform: translateX(20px) rotate(45deg);
}
.navigation__button.is-open .navigation__icon::before {
  transform: translateX(20px) rotate(-45deg);
}
@media (max-width: 64em) {
  .navigation__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.navigation__icon {
  position: relative;
}
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
  background-color: var(--hamburger-menu-icon);
  width: 2rem;
  height: 2px;
  border-radius: 50px;
  display: block;
  transition: transform 200ms ease-out, opacity 200ms ease-out, background-color 200ms ease-out;
}
.navigation__icon::before, .navigation__icon::after {
  content: "";
  position: absolute;
  inset: 0;
}
.navigation__icon::before {
  transform: translateY(-0.5rem);
}
.navigation__icon::after {
  transform: translateY(0.5rem);
}

.accordion__item {
  margin-bottom: 0.8rem;
}
.accordion__header {
  background-image: var(--accordion-bg);
  cursor: pointer;
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding-inline: 1.6rem;
  padding-block: 1.2rem;
  transition: background-image 200ms ease-out;
}
.accordion__icona {
  color: var(--accordion-icon);
  display: flex;
  align-items: center;
}
.accordion__icona .icon {
  font-size: var(--icon-lg);
  stroke-width: var(--icon-stroke-200);
}
.accordion__titolo {
  color: var(--accordion-titolo);
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}
.accordion__content {
  background-color: var(--accordion-bg-hover);
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 300ms ease-out;
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
}
.accordion__content img {
  padding-top: 2rem;
}
.accordion__body {
  min-height: 0;
  overflow: hidden;
  padding-inline: 1.6rem;
  padding-block: 0;
  transition: padding 300ms ease-out;
}
.accordion__body ul, .accordion__body ol {
  list-style: outside;
  margin-left: 2.4rem;
  padding: 0;
}
.accordion__item.is-open .accordion__content {
  grid-template-rows: 1fr;
}
.accordion__item.is-open .accordion__body {
  padding-block: var(--space-text);
}
.accordion .toggle-open {
  display: none;
}
.accordion__item.is-open .toggle-open {
  display: inline-block;
}
.accordion__item.is-open .toggle-closed {
  display: none;
}

#gotoTop {
  display: flex;
  padding: 1rem;
  background-color: var(--goto-top-bg);
  color: var(--goto-top);
  border-radius: 10rem;
  position: fixed;
  right: 3rem;
  bottom: 4.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease;
  cursor: pointer;
  z-index: 1000;
}
#gotoTop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#gotoTop:hover {
  background-color: var(--goto-top-bg-hover);
}

.btn {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-items: center;
  gap: var(--btn-xl-gap);
  padding-inline: var(--btn-xl-px);
  padding-block: var(--btn-xl-py);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  outline-width: 1px;
  outline-style: solid;
  outline-color: transparent;
  outline-offset: var(--outline-offset);
  border-radius: var(--btn-radius-sm);
  transition: background-color 200ms ease-out, border-color 200ms ease-out, outline-color 200ms ease-out, color 200ms ease-out;
}
.btn, .btn:link, .btn:visited {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  border-width: var(--btn-primary-border-width);
}
.btn--primary:hover, .btn--primary.is-hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border-hover);
}
.btn--primary:active, .btn--primary.is-active {
  background-color: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-border-active);
}
.btn--primary:focus-visible, .btn--primary.is-focus {
  border-width: var(--btn-primary-border-width-focus);
  border-color: var(--btn-primary-border-color-focus);
  outline: var(--btn-primary-outline-width-focus) solid var(--btn-primary-outline-color-focus);
  outline-offset: var(--outline-offset-focus);
}
.btn--primary:disabled, .btn--primary.is-disabled {
  border-width: 1px;
  background-color: var(--btn-primary-bg-disabled);
  border-color: var(--btn-primary-border-disabled);
  pointer-events: none;
  user-select: none;
  outline: none;
  color: var(--btn-primary-text-disabled);
}

.btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}
.btn--secondary:hover, .btn--secondary.is-hover {
  background-color: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  color: var(--btn-secondary-text-hover);
}
.btn--secondary:active, .btn--secondary.is-active {
  background-color: var(--btn-secondary-bg-active);
  border-color: var(--btn-secondary-border-active);
  color: var(--btn-secondary-text-active);
}
.btn--secondary:focus-visible, .btn--secondary.is-focus {
  border-width: var(--btn-secondary-border-width-focus);
  border-color: var(--btn-secondary-border-color-focus);
  outline: var(--btn-secondary-outline-width-focus) solid var(--btn-secondary-outline-color-focus);
  outline-offset: var(--outline-offset-focus);
}
.btn--secondary:disabled, .btn--secondary.is-disabled {
  background-color: var(--btn-secondary-bg-disabled);
  border-color: var(--btn-secondary-border-disabled);
  pointer-events: none;
  user-select: none;
  outline: none;
  color: var(--btn-secondary-text-disabled);
}

.btn--tertiary {
  background-color: var(--btn-tertiary-bg);
  color: var(--btn-tertiary-text);
  border-color: var(--btn-tertiary-border);
  border-width: var(--btn-tertiary-border-width);
}
.btn--tertiary:hover, .btn--tertiary.is-hover {
  background-color: var(--btn-tertiary-bg-hover);
  border-color: var(--btn-tertiary-border-hover);
}
.btn--tertiary:active, .btn--tertiary.is-active {
  background-color: var(--btn-tertiary-bg-active);
  border-color: var(--btn-tertiary-border-active);
}
.btn--tertiary:focus-visible, .btn--tertiary.is-focus {
  border-width: var(--btn-tertiary-border-width-focus);
  border-color: var(--btn-tertiary-border-color-focus);
  outline: var(--btn-tertiary-outline-width-focus) solid var(--btn-tertiary-outline-color-focus);
  outline-offset: var(--outline-offset-focus);
}
.btn--tertiary:disabled, .btn--tertiary.is-disabled {
  border-width: 1px;
  background-color: var(--btn-tertiary-bg-disabled);
  border-color: var(--btn-tertiary-border-disabled);
  pointer-events: none;
  user-select: none;
  outline: none;
  color: var(--btn-tertiary-text-disabled);
}

.btn--ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn--ghost:hover, .btn--ghost.is-hover {
  background-color: var(--btn-ghost-bg-hover);
  border-color: var(--btn-ghost-border-hover);
  color: var(--btn-ghost-text-hover);
}
.btn--ghost:active, .btn--ghost.is-active {
  background-color: var(--btn-ghost-bg-active);
  border-color: var(--btn-ghost-border-active);
  color: var(--btn-ghost-text-active);
}
.btn--ghost:focus-visible, .btn--ghost.is-focus {
  border-width: var(--btn-ghost-border-width-focus);
  border-color: var(--btn-ghost-border-color-focus);
  outline: var(--btn-ghost-outline-width-focus) solid var(--btn-ghost-outline-color-focus);
  outline-offset: var(--outline-offset-focus);
}
.btn--ghost:disabled, .btn--ghost.is-disabled {
  background-color: var(--btn-ghost-bg-disabled);
  border-color: var(--btn-ghost-border-disabled);
  pointer-events: none;
  user-select: none;
  outline: none;
  color: var(--btn-ghost-text-disabled);
}

.btn--xl {
  font-weight: var(--label-xl-weight);
  font-size: var(--label-xl-size);
  line-height: var(--label-xl-line-height);
  letter-spacing: var(--label-xl-letter-spacing);
  padding-inline: var(--btn-xl-px);
  padding-block: var(--btn-xl-py);
  gap: var(--btn-xl-gap);
}
.btn--xl .btn__icon {
  font-size: var(--btn-icon-size-xl);
}

.btn--lg {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  padding-inline: var(--btn-lg-px);
  padding-block: var(--btn-lg-py);
  gap: var(--btn-lg-gap);
}
.btn--lg .btn__icon {
  font-size: var(--btn-icon-size-lg);
}

.btn--md {
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
  padding-inline: var(--btn-md-px);
  padding-block: var(--btn-md-py);
  gap: var(--btn-md-gap);
}
.btn--md .btn__icon {
  font-size: var(--btn-icon-size-md);
}

.btn--sm {
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
  padding-inline: var(--btn-sm-px);
  padding-block: var(--btn-sm-py);
  gap: var(--btn-sm-gap);
}
.btn--sm .btn__icon {
  font-size: var(--btn-icon-size-sm);
}
.btn--sm .btn__icon .icon {
  stroke-width: 1.5;
}

/* Stile moderno */
* {
  scrollbar-width: auto;
  scrollbar-color: #bbb transparent;
}

::-webkit-scrollbar {
  width: 8px; /* larghezza scrollbar */
  height: 8px; /* per scroll orizzontale */
}

::-webkit-scrollbar-track {
  background: #616161; /* colore della traccia */
}

::-webkit-scrollbar-thumb {
  background-color: #b5b5b5; /* colore del cursore */
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* Firefox ONLY */
/*
1️⃣ Scrollbar globale sito
body {
  @include custom-scrollbar(
    $thumb: var(--col-accent),
    $thumb-hover: color-mix(in srgb, var(--col-accent) 80%, black)
  );
}

2️⃣ Scrollbar solo su un contenitore
.breaking-news {
  overflow-y: auto;

  @include custom-scrollbar(
    $size: 6px,
    $thumb: #c61f42
  );
}
✔️ ottimo per:
popup
sidebar
modali
liste articoli

3️⃣ Scrollbar tematizzata per patologia / area
[data-area="epatologia"] {
  @include custom-scrollbar(
    $thumb: var(--epato-color)
  );
}

[data-area="ematologia"] {
  @include custom-scrollbar(
    $thumb: var(--emato-color)
  );
}
  */
.summaries {
  /*
  VERSIONE SUBGRID
  &.grid { gap: 0; //❗ override gap verticale }

  &__item {
       display: grid;
       grid-template-columns: subgrid; // non serve ridefinire la griglia
       grid-column: 1 / -1; // prende tutta la larghezza
  }
  */
}
.summaries > * + * {
  margin-top: var(--space-title);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-title);
  transition: border-color 200ms ease-out;
}
.summaries__item {
  display: grid;
  grid-template-columns: repeat(var(--layout-colonne), 1fr);
  gap: var(--layout-gutters);
}
.summaries__icona {
  grid-column: span 2;
  align-self: center;
  justify-self: center;
}
.summaries__icona svg {
  width: 3.9rem;
  height: 4.4rem;
  color: var(--icona-summaries);
}
.summaries__icona-img {
  filter: saturate(0.3) brightness(0.9) contrast(1.1);
}
.summaries__icona:link, .summaries__icona:visited {
  transform: rotate(15deg);
  transition: transform 200ms ease-out;
  position: relative;
  display: block;
}
.summaries__icona:hover, .summaries__icona:active {
  transform: rotate(0deg);
}
.summaries__icona::after {
  content: "PDF";
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
  position: absolute;
  left: 50%;
  bottom: 0%;
  background: var(--pdf-sfondo);
  color: var(--pdf-testo);
  text-align: center;
  padding: 0.4rem 0.4rem 0rem 0.4rem;
  transform: translateX(-50%) translateY(2.2rem) scale(0.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 150ms ease-out;
}
.summaries__icona:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(1.2rem) scale(1);
  /*        
            Oppure usa questa:
            animation-name: appari_da_sotto_PDF ;
            animation-duration: 200ms;
            animation-timing-function: ease-in;
            animation-iteration-count: 1;
            animation-play-state: running;
            animation-fill-mode: forwards;
  */
}
.summaries__titolo {
  grid-column: 3/-1;
  font-weight: var(--heading-md-weight);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
  display: flex;
  align-items: center;
}
.summaries__titolo a:link, .summaries__titolo a:visited {
  color: var(--heading-primary);
  transition: color 180ms ease-out;
}
.summaries__titolo a:hover, .summaries__titolo a:active {
  color: var(--heading-primary-hover);
}
@media (max-width: 48em) {
  .summaries .summaries__item {
    gap: 1.6rem;
  }
}
@media (max-width: 23.4375em) {
  .summaries__icona {
    grid-column: 1/-1;
  }
  .summaries__titolo {
    grid-column: 1/-1;
  }
}

.summary {
  grid-column: span 9;
}
.summary__titolo {
  font-weight: var(--heading-md-weight);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
  padding-bottom: var(--space-text);
  margin-bottom: var(--space-text);
  color: var(--heading-primary);
  border-bottom: 1px solid var(--color-divider);
}
.summary__autori {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  color: var(--heading-secondary);
  font-style: italic;
  line-height: 1.4;
}
.summary__autori-nome {
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
}
.summary__autori-affiliazione {
  margin-bottom: var(--space-text);
}

.sidebar {
  grid-column: span 3;
}

@media (max-width: 64em) {
  .summary {
    grid-column: span 6;
  }
  .sidebar {
    grid-column: span 2;
  }
}
@media (max-width: 48em) {
  .summary {
    grid-column: 1/-1;
  }
  .sidebar {
    grid-column: 1/-1;
  }
}
.sidebar__heading {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  margin-bottom: var(--space-title);
  color: var(--text-secondary);
}
.sidebar__nav > * + * {
  margin-top: var(--space-text);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-text);
  transition: border-color 200ms ease-out;
}
.sidebar__categoria {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.sidebar__item-titolo {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  color: var(--text-secondary);
  line-height: 1.25;
}
.sidebar__item-titolo a {
  color: inherit;
}
.sidebar__item-titolo a:hover {
  color: var(--text-secondary-hover);
}

.bibliografia {
  padding-block: var(--space-title);
}
.bibliografia__titolo {
  margin: 0 0 1rem;
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  font-weight: 500;
  font-style: italic;
}
.bibliografia__testo ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bibliografia;
}
.bibliografia__testo li {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  margin-bottom: 0;
  line-height: 1.4;
  position: relative;
  padding-left: 2.4rem;
  counter-increment: bibliografia;
  font-style: italic;
}
.bibliografia__testo li::before {
  content: counter(bibliografia) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--text-primary);
}

.breaking-news > * + * {
  margin-top: var(--space-block);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-block);
  transition: border-color 200ms ease-out;
}
.breaking-news__item {
  display: grid;
  grid-template-columns: repeat(var(--layout-colonne), 1fr);
  gap: var(--layout-gutters);
  justify-items: center;
  align-items: flex-start;
}
.breaking-news__icona {
  grid-column: 1/3;
}
.breaking-news__icona svg {
  width: 3.6rem;
  height: 2.7rem;
  color: var(--icona-breaking-news);
  stroke-width: 0;
}
.breaking-news__content {
  grid-column: 3/-1;
}
.breaking-news__titolo {
  color: var(--heading-primary);
  margin-bottom: var(--space-title);
  font-weight: var(--heading-md-weight);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
}
.breaking-news__descrizione {
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
}
.breaking-news__descrizione ul {
  list-style: disc;
  padding-left: 2rem;
  margin: 1rem 0;
}
.breaking-news__subsection {
  margin-top: var(--space-title);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.breaking-news__media {
  outline: 1px solid var(--img-border);
  outline-offset: 1.5rem;
  outline-offset: 0rem;
}
.breaking-news__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  margin-block: var(--space-block);
}
.breaking-news__figure-title {
  margin: 0;
  font-weight: 600;
}
.breaking-news__figure-caption {
  margin: 0;
}
@media (max-width: 48em) {
  .breaking-news__icona {
    grid-column: 1/-1;
  }
  .breaking-news__content {
    grid-column: 1/-1;
  }
}
@media (max-width: 23.4375em) {
  .breaking-news__item {
    gap: 1.6rem;
  }
}

.breaking-news__indice {
  background-color: var(--link-indice-bg);
  color: var(--link-indice);
}
.breaking-news__indice-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.breaking-news__indice-item {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}
.breaking-news__indice-item:not(:first-of-type) {
  border-top: 1px solid var(--indice-divisore);
}
.breaking-news__indice-link:link, .breaking-news__indice-link:visited {
  color: var(--link-indice);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  transition: color 180ms ease-out;
}
.breaking-news__indice-link:hover, .breaking-news__indice-link:active {
  color: var(--link-indice-hover);
}

.interviste-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--layout-gutters);
  row-gap: var(--space-block);
  align-items: flex-start;
}
@media (max-width: 48em) {
  .interviste-lista {
    grid-template-columns: 1fr;
    row-gap: var(--space-block);
  }
}

.intervista {
  padding-inline: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-text);
}
.intervista__coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--display-lg-weight);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--display-lg-letter-spacing);
  color: var(--text-muted);
  font-weight: 400;
  text-transform: uppercase;
  opacity: 0.7;
  padding-block: var(--section-compact);
  text-align: center;
  transition: color 200ms ease-out;
}
.intervista__nome {
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--heading-sm-weight);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
  color: var(--intervista-nome);
  font-weight: 700;
  text-transform: uppercase;
}
.intervista__affiliazione {
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  color: var(--intervista-affiliazione);
}
.intervista__domande-elenco {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
  display: flex;
  flex-direction: column;
}
.intervista__domanda {
  background-color: var(--intervista-domanda-bg);
  border-top: 1px solid var(--intervista-domanda-divisore);
  padding-inline: 1.6rem;
  padding-top: 0.8rem;
  padding-bottom: 1.2rem;
  transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
  cursor: pointer;
  border-left: 3px solid var(--intervista-domanda-bg);
  color: var(--intervista-domanda);
}
.intervista__domanda:hover {
  background-color: var(--intervista-domanda-bg-hover);
  color: var(--intervista-domanda-hover);
}
.intervista__domanda:active {
  background-color: var(--intervista-domanda-bg-hover);
  color: var(--intervista-nome);
  border-left: 3px solid var(--intervista-nome);
}
@media (max-width: 48em) {
  .intervista__domanda {
    padding-inline: 1.2rem;
    padding-top: 0.4rem;
    padding-bottom: 0.8rem;
  }
}
@media (max-width: 48em) {
  .intervista {
    padding-inline: 0;
  }
}

.videohighlights {
  background-color: #121212;
  display: flex;
  align-items: start;
  flex: 1 1 0; /* SOLO per sticky Footer */
  overflow: hidden;
}
.videohighlights__video {
  flex-grow: 1;
  max-height: 100%;
}

.videohome {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: absolute;
  z-index: -1;
  top: 51.5%;
  transform: translateY(-50%);
  width: 100%;
  height: 85vh;
  height: 85dvh;
}
.videohome__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.videohome__text {
  font-weight: var(--heading-sm-weight);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
  color: var(--heading-primary);
  text-align: center;
  font-weight: 700;
  display: none;
  padding-inline: var(--padding-inline);
}
@media (max-width: 1270px) {
  .videohome {
    position: static;
    transform: translateY(0%);
    height: auto;
  }
  .videohome__video {
    height: auto;
    object-fit: contain;
  }
  .videohome__text {
    display: block;
  }
}

.input {
  display: flex;
  flex-direction: column;
  gap: var(--input-gap);
}
.input__field {
  display: flex;
  width: 100%;
  align-items: center;
  border: var(--input-border-width) solid var(--input-border);
  outline: var(--input-outline-width) solid transparent;
  background-color: var(--input-bg);
  transition: color 200ms ease-out, outline-color 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out;
}
.input__icon {
  color: var(--input-icon);
  display: none;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease-out;
  display: flex;
  flex: 0 0 auto;
  cursor: default;
  transition: opacity 200ms ease, transform 200ms ease;
}
.input__icon--clickable {
  cursor: pointer;
}
.input__icon.is-changing {
  opacity: 0;
  transform: scale(0.8);
}
.input__icon .icon {
  stroke-width: 1;
}
.input__label {
  color: var(--input-label);
  font-weight: 500;
  transition: color 200ms ease-out;
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}
.input__control {
  border: 0;
  outline: 0;
  cursor: text;
  background: transparent;
  min-width: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  color: var(--input-text);
}
.input__control::placeholder {
  color: var(--input-placeholder);
  opacity: 1; /* evita fade automatico browser */
}
.input__help {
  color: var(--input-help);
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
  transition: color 200ms ease-out;
  margin-top: 5px;
  opacity: 0;
  animation-name: messageInFade;
  animation-duration: 0.3s;
  animation-timing-function: ease-out forwards;
  animation-fill-mode: forwards;
}
.input:hover .input__field, .input.is-hover .input__field {
  border-color: var(--input-border-hover);
  background-color: var(--input-bg-hover);
}
.input:hover .input__label, .input.is-hover .input__label {
  color: var(--input-label-hover);
}
.input:focus-within .input__field, .input.is-focus .input__field {
  border-color: var(--input-border-focus);
  outline: var(--input-outline-width) solid var(--input-outline-focus);
  background-color: var(--input-bg);
}
.input:focus-within .input__icon, .input.is-focus .input__icon {
  color: var(--input-icon);
}
.input:focus-within .input__help, .input.is-focus .input__help {
  color: var(--input-label);
}
.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--input-text) !important; /* Colore del testo */
  caret-color: var(--input-text);
}
.input:has(.input__control:disabled), .input.is-disabled {
  pointer-events: none;
  user-select: none;
}
.input:has(.input__control:disabled) .input__field, .input.is-disabled .input__field {
  border-color: var(--input-border-disabled);
  outline: none;
  background-color: var(--input-bg-disabled);
}
.input:has(.input__control:disabled) .input__icon, .input.is-disabled .input__icon {
  color: var(--input-icon-disabled);
}
.input:has(.input__control:disabled) .input__label, .input.is-disabled .input__label {
  color: var(--input-label-disabled);
}
.input:has(.input__control:disabled) .input__help, .input.is-disabled .input__help {
  color: var(--input-help-disabled);
}
.input:has(.input__control:disabled) .input__control, .input.is-disabled .input__control {
  color: var(--input-text-disabled);
}
.input:has(.input__control:disabled) .input__control::placeholder, .input.is-disabled .input__control::placeholder {
  color: var(--input-placeholder-disabled);
}
.input.is-error .input__field, .input.is-error:focus-within .input__field {
  border-color: var(--input-border-error);
  outline: var(--input-outline-width) solid var(--input-outline-error);
}
.input.is-error .input__icon, .input.is-error:focus-within .input__icon {
  color: var(--input-icon-error);
}
.input.is-error .input__label, .input.is-error:focus-within .input__label {
  color: var(--input-label-error);
}
.input.is-error .input__control, .input.is-error:focus-within .input__control {
  color: var(--input-text-error);
}
.input.is-error .input__help, .input.is-error:focus-within .input__help {
  color: var(--input-help-error);
}

.input--lg {
  gap: var(--input-gap);
}
.input--lg .input__field {
  padding-inline: var(--input-control-px);
  padding-block: var(--input-control-py);
  gap: var(--input-control-gap);
}
.input--lg .input__icon {
  font-size: var(--input-icon-size-md);
}
.input--lg .input__label,
.input--lg .input__control {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}
.input--lg .input__help {
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
}

.input--md {
  gap: var(--input-gap);
}
.input--md .input__field {
  padding-inline: var(--input-control-px);
  padding-block: var(--input-control-py);
  gap: var(--input-control-gap);
}
.input--md .input__icon {
  font-size: var(--input-icon-size-md);
}
.input--md .input__label,
.input--md .input__control {
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
}
.input--md .input__help {
  font-weight: var(--label-xs-weight);
  font-size: var(--label-xs-size);
  line-height: var(--label-xs-line-height);
  letter-spacing: var(--label-xs-letter-spacing);
}

.input--sm {
  gap: var(--input-gap);
}
.input--sm .input__field {
  padding-inline: var(--input-control-px);
  padding-block: var(--input-control-py);
  gap: var(--input-control-gap);
}
.input--sm .input__icon {
  font-size: var(--input-icon-size-sm);
}
.input--sm .input__label,
.input--sm .input__control {
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
}
.input--sm .input__help {
  font-weight: var(--label-xs-weight);
  font-size: var(--label-xs-size);
  line-height: var(--label-xs-line-height);
  letter-spacing: var(--label-xs-letter-spacing);
}

.checkbox {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox__label {
  display: flex;
  gap: var(--checkbox-gap);
  align-items: center;
  color: var(--input-text);
  cursor: pointer;
}
.checkbox__help {
  margin-top: 5px;
  color: var(--input-help);
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
  flex-basis: 100%;
  transform: translateY(-4px);
  transition: color 200ms ease-out, opacity 200ms ease-out, transform 200ms ease-out;
  opacity: 0;
  animation-name: messageInFade;
  animation-duration: 0.3s;
  animation-timing-function: ease-out forwards;
  animation-fill-mode: forwards;
}
.checkbox__messaggio, .checkbox__countdown {
  color: var(--login-testo);
  text-align: center;
  opacity: 0;
  animation-name: messageInFade;
  animation-duration: 0.3s;
  animation-timing-function: ease-out forwards;
  animation-fill-mode: forwards;
}
.checkbox__box {
  border: var(--input-border-width) solid var(--input-border);
  outline: var(--input-outline-width) solid transparent;
  border-radius: 0rem;
  background-color: var(--input-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease-out, outline-color 200ms ease-out, border-color 200ms ease-out, background-color 200ms ease-out;
}
.checkbox__check {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  stroke-width: 3px;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.checkbox__input:checked + .checkbox__label .checkbox__check {
  transform: scale(1);
  opacity: 1;
}
.checkbox__input:checked + .checkbox__label .checkbox__box {
  background: var(--input-border-focus);
  border-color: var(--input-border-focus);
  color: var(--input-accent);
}

.checkbox:hover .checkbox__input:not(:checked) + .checkbox__label .checkbox__box,
.checkbox.is-hover .checkbox__input:not(:checked) + .checkbox__label .checkbox__box {
  background: var(--input-bg-hover);
  border-color: var(--input-border-hover);
}

.checkbox.is-focus .checkbox__input:not(:checked) + .checkbox__label .checkbox__box,
.checkbox__input:focus-visible:not(:checked) + .checkbox__label .checkbox__box {
  border-color: var(--input-border-focus);
  outline: var(--input-outline-width) solid var(--input-outline-focus);
}

.checkbox.is-disabled .checkbox__input + .checkbox__label {
  pointer-events: none;
  user-select: none;
  cursor: default;
  color: var(--input-text-disabled);
}
.checkbox.is-disabled .checkbox__input + .checkbox__label .checkbox__box {
  background: var(--input-bg-disabled);
  border-color: var(--input-border-disabled);
}

.checkbox.is-error .checkbox__label {
  color: var(--input-label-error);
}
.checkbox.is-error .checkbox__box {
  border-color: var(--input-border-error);
  outline: var(--input-outline-width) solid var(--input-outline-error);
}
.checkbox.is-error .checkbox__check {
  color: var(--input-icon-error);
}
.checkbox.is-error .checkbox__help {
  color: var(--input-help-error);
}

.checkbox--lg {
  --checkbox-size: 2.4rem;
}
.checkbox--lg .checkbox__label {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}

.checkbox--md {
  --checkbox-size: 2.0rem;
}
.checkbox--md .checkbox__label {
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
}

.checkbox--sm {
  --checkbox-size: 1.6rem;
}
.checkbox--sm .checkbox__label {
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
}

@media (max-width: 23.4375em) {
  .checkbox--lg {
    --checkbox-size: 2rem;
  }
  .checkbox--md {
    --checkbox-size: 1.8rem;
  }
  .checkbox--sm {
    --checkbox-size: 1.6rem;
  }
}
.radio {
  display: flex;
  gap: 1.2rem;
}
.radio__box {
  border-radius: 0.4rem;
  border: var(--input-border-width) solid var(--input-border);
  background-color: var(--input-bg);
  background-color: white;
  display: block;
  width: 5rem;
  height: 5rem;
}

.link {
  color: var(--link-primary);
  text-decoration: underline;
  transition: color 200ms;
}

.link--tertiary {
  color: var(--text-primary);
  text-decoration: none;
}
.link--tertiary:hover {
  color: var(--text-primary-hover);
  text-decoration: underline;
}
.link--tertiary:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.theme-toggle {
  padding: 0.4rem;
  background-color: transparent;
  background-color: var(--theme-toggle-bg);
  border: none;
  outline: none;
  border-radius: 60%;
  position: fixed;
  right: 0.4rem;
  top: 0.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
  z-index: 1000;
}
.theme-toggle:hover {
  background-color: var(--theme-toggle-bg-hover);
  opacity: 1;
}
.theme-toggle:hover .icon--moon {
  color: var(--theme-toggle-icon-hover);
}
.theme-toggle:hover .icon--sun {
  color: var(--theme-toggle-icon-hover);
}
@media (max-width: 64em) {
  .theme-toggle {
    position: relative;
    top: 0;
    right: 0;
  }
}

.theme-toggle .icon {
  width: 1.6rem;
  height: 1.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  opacity: 1;
  color: var(--theme-toggle-icon);
  transition: color 200ms ease-out, opacity 200ms ease-out;
}

.theme-toggle .icon--sun {
  display: none;
}

.theme-toggle .icon--moon {
  display: block;
}

[data-theme=dark] .theme-toggle .icon--sun {
  display: block;
}

[data-theme=dark] .theme-toggle .icon--moon {
  display: none;
}

/* =========================================
   PAGE LAYOUT
========================================= */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* =========================================
   HEADER / MAIN / FOOTER
========================================= */
.header {
  flex: 0 0 auto;
}

.main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.footer {
  flex: 0 0 auto;
}

/* =========================================
   GRID LAYOUT
========================================= */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--layout-colonne), 1fr);
  gap: var(--layout-gutters);
}

/*

body {
      display: grid;
      grid-template-rows: 100px 1fr 100px;
      min-height: 100vh;
}
.header {
      background-color: yellow;
}

.main {
      background-color: purple;
}

.footer {
      background-color: orangered;
}

*/
.section {
  padding-block: var(--section-default);
}

.section--spacious {
  padding-block: var(--section-spacious);
}

.section--compact {
  padding-block: var(--section-compact);
}

.container-full {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--padding-inline-wide);
}

.container-wide {
  width: 100%;
  max-width: var(--container-wide-max);
  margin-inline: auto;
  padding-inline: var(--padding-inline-wide);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--padding-inline);
  box-sizing: border-box;
}

.u-px-0 {
  padding-inline: 0;
}

.header {
  transition: box-shadow 200ms ease;
}
.header.is-scrolled {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
  /* solo bottom */
}
.header {
  background-color: var(--header-bg);
  background-position: center bottom;
  background-size: cover;
  transition: background-color 200ms ease-out;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header--compact .header__content {
  height: 7.2rem;
}
.header__content {
  display: flex;
  height: 11.5rem;
  transition: height 200ms ease-out;
  justify-content: space-between;
  position: relative;
}
.header__logo {
  align-self: center;
  display: flex;
  align-items: center;
  height: 80%;
  width: auto;
}
.header__logo-img {
  content: var(--header-logo);
  max-height: 100%;
  height: 9.1rem;
}
.header__actions {
  align-self: center;
  display: flex;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 64em) {
  .header {
    position: relative;
  }
  .header__content {
    flex-wrap: wrap;
    height: auto;
    padding-block: 0.8rem;
  }
}

.mininav {
  display: flex;
  gap: 1px;
  justify-content: center;
  flex-wrap: wrap;
  text-transform: uppercase;
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  background-image: var(--mininav-bg);
  color: var(--mininav-link);
  box-shadow: 0rem 0.7rem 1rem 0.5rem rgba(0, 0, 0, 0.3);
}
.mininav__link, .mininav__link:link, .mininav__link:visited {
  color: var(--mininav-link);
  padding-top: 1.5rem;
  padding-bottom: 1.2rem;
  padding-inline: 1.6rem;
  position: relative;
  transition: color 200ms ease-out, background-color 200ms ease-out;
}
.mininav__link + .mininav__link::before, .mininav__link + .mininav__link:link::before, .mininav__link + .mininav__link:visited::before, .mininav__link:link + .mininav__link::before, .mininav__link:link + .mininav__link:link::before, .mininav__link:link + .mininav__link:visited::before, .mininav__link:visited + .mininav__link::before, .mininav__link:visited + .mininav__link:link::before, .mininav__link:visited + .mininav__link:visited::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 1px;
  height: 50%;
  background-color: var(--mininav-divisore);
  pointer-events: none;
  transform: translateY(-50%);
}
.mininav__link.is-active, .mininav__link:link.is-active, .mininav__link:visited.is-active {
  background-color: var(--mininav-link-bg-hover);
}
@media (max-width: 48em) {
  .mininav__link, .mininav__link:link, .mininav__link:visited {
    padding-top: 1.2rem;
    padding-bottom: 0.8rem;
  }
}
@media (max-width: 23.4375em) {
  .mininav__link, .mininav__link:link, .mininav__link:visited {
    padding-inline: 0.8rem;
  }
}
.mininav__link:hover, .mininav__link:active {
  background-color: var(--mininav-link-bg-hover);
  color: var(--mininav-link-hover);
}

.hero {
  background-color: lightcoral;
  background-image: var(--hero-bg);
  background-position: center;
  background-repeat: repeat-x;
  height: 20.3rem;
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.hero > .container-full, .hero > .container-wide {
  /* Consente di impostare FLEX dopo*/
  height: 100%;
}
.hero__content {
  display: flex;
  height: 100%;
  container-name: Hero;
  container-type: inline-size;
}
.hero__overline {
  font-weight: var(--label-xl-weight);
  font-size: var(--label-xl-size);
  line-height: var(--label-xl-line-height);
  letter-spacing: var(--label-xl-letter-spacing);
  color: var(--hero-overline);
  transition: color 200ms ease-out;
  text-transform: uppercase;
  padding-left: 2.1rem;
  display: none;
}
.hero__titolo {
  background-color: var(--hero-bg-color);
  padding-left: 0.6rem;
  padding-right: 12rem;
  clip-path: polygon(0% 0%, 0% 100%, calc(100% - 150px) 100%, 100% 0%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  font-weight: var(--display-lg-weight);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--display-lg-letter-spacing);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  color: var(--hero-titolo);
  transition: color 200ms ease-out;
}
.hero__titolo-text {
  text-transform: uppercase;
  display: flex;
  line-height: 1.2;
  opacity: 1;
  mix-blend-mode: var(--hero-titolo-blend-mode);
  padding-inline: 2rem;
  transition: opacity 200ms ease-out;
}
@container Hero (max-width: 1280px) {
  .hero__overline, .hero__titolo {
    margin-top: 0;
  }
  .hero__titolo-text {
    font-size: 12rem;
    line-height: 1;
    padding-inline: 0.8rem;
  }
}
@media (max-width: 64em) {
  .hero__overline, .hero__titolo {
    padding-left: 0;
    margin-top: 0;
    align-items: center;
  }
  .hero__titolo-text {
    font-size: 7.8rem;
    line-height: 1;
  }
}
@container Hero (max-width: 600px) {
  .hero__overline, .hero__titolo {
    flex: 1;
    clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
    justify-content: center;
    padding-inline: 4rem;
    margin-top: 0;
    align-self: center;
  }
  .hero__titolo-text {
    font-size: 4.8rem;
    line-height: 1;
    text-align: center;
    padding-inline: 0.8rem;
  }
}

.footer {
  container-type: inline-size;
  container-name: piede;
  display: flex;
  align-items: center;
  font-family: "Neue Haas Display", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  background-color: var(--footer-bg);
  transition: background-color 200ms ease-out;
}
.footer__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__sponsor {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 8.2rem;
  text-transform: uppercase;
}
.footer__sponsor-label {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line-height);
  color: var(--footer-sponsor-label);
  font-family: "Myriad Pro", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.2px;
}
@media (max-width: 48em) {
  .footer__sponsor-label {
    text-align: center;
  }
  .footer__sponsor-label .break-line {
    display: none;
  }
}
.footer__sponsor-logo {
  color: var(--footer-sponsor-logo);
  height: 3.6rem;
}
.footer__sponsor-logo svg {
  height: 100%;
  width: auto;
}
.footer__sponsor-logo-img {
  content: var(--footer-logo);
  height: 100%;
  width: auto;
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.footer-meta__credits {
  font-weight: var(--label-xs-weight);
  font-size: var(--label-xs-size);
  line-height: var(--label-xs-line-height);
  letter-spacing: var(--label-xs-letter-spacing);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  align-items: center;
  color: var(--footer-meta-credits);
}
.footer-meta__legal {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif, -apple-system, BlinkMacSystemFont, Ubuntu, "Segoe UI", "Myriad Pro", "Open Sans", "Neue Haas Display", "Lato", "Nunito", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  color: var(--footer-meta-legal);
}
.footer-meta__legal > * + * {
  margin-left: 1.2rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--footer-divisore);
}
.footer-meta__link, .footer-meta__link:link, .footer-meta__link:visited {
  color: var(--footer-link);
  transition: color 200ms ease-out;
}
.footer-meta__link--light, .footer-meta__link--light:link, .footer-meta__link--light:visited {
  color: var(--footer-link-light);
}
.footer-meta__link:hover, .footer-meta__link:active {
  color: var(--footer-link-hover);
}
.footer-meta__link--light:hover, .footer-meta__link--light:active {
  color: var(--footer-link-light-hover);
}
@media (max-width: 64em) {
  .footer__content {
    flex-direction: column;
    padding-block: 1.2rem;
    gap: 1.2rem;
  }
}
@container piede (max-width: 470px) {
  .footer__sponsor {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .footer-meta {
    flex-direction: column;
    padding-block: 1.2rem;
    gap: 1.2rem;
    align-items: center;
  }
}

.DS {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  background-color: var(--color-bg-page);
}
.DS__aside {
  background-color: #F5F5F5;
  flex: 0 1 230px;
  padding: 1.6rem;
}
.DS__content {
  background-color: var(--color-bg-page);
  border-right: 1px solid #E5E5E5;
  flex: 0 1 auto;
  padding: 3.2rem;
  width: min(100%, 1320px);
}
.DS__container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 3rem 4rem;
  align-items: flex-end;
  justify-items: left;
  justify-content: start;
  margin-bottom: 8rem;
  width: auto;
}
.DS__container-input, .DS__container-checkbox {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3rem 7rem;
  align-items: center;
  justify-items: left;
  justify-content: start;
  margin-bottom: 8rem;
  width: auto;
}
@media (max-width: 64em) {
  .DS {
    flex-direction: column;
  }
  .DS__aside {
    background-color: #F5F5F5;
    flex: 0 1 auto;
    padding: 1.6rem;
  }
  .DS__content {
    padding: 1.6rem;
  }
  .DS__container {
    grid-template-columns: repeat(1, auto);
    gap: 3rem;
  }
  .DS__container-input, .DS__container-checkbox {
    grid-template-columns: repeat(1, auto);
  }
  .DS__titolo {
    color: var(--heading-secondary);
  }
}
.DS__titolo {
  color: var(--heading-secondary);
  font-weight: var(--heading-lg-weight);
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line-height);
  letter-spacing: var(--heading-lg-letter-spacing);
  margin-bottom: var(--space-title);
  text-decoration: underline;
}
.DS__menu {
  list-style: circle;
  padding-left: 2rem;
}
.DS__item {
  padding-left: 0;
}
.DS__link:link, .DS__link:visited {
  transition: color 200ms ease-out, transform 200ms ease-out;
  color: #7797B3;
  transform: translateX(0);
  display: inline-block;
}
.DS__link:hover, .DS__link:active {
  color: #B1C3D3;
  transform: translateX(8px);
}

.login {
  background-image: var(--login-bg-img);
  background-size: cover;
  background-position: center;
  background-blend-mode: var(--login-bg-blend-mode);
  /*
  background-repeat: no-repeat;
  filter: brightness(1);
  */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-inline: var(--padding-inline-wide);
  position: relative;
  overflow: hidden;
}
.login__logo {
  margin-bottom: var(--space-title);
}
.login__logo-img {
  content: var(--login-logo);
  height: 30.2rem;
  width: auto;
  max-width: 100%;
  display: block;
}
.login__content {
  margin-inline: 10vw;
  display: flex;
  flex-flow: column;
  gap: 1.2rem;
}
.login__actions {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: var(--space-text);
}
.login__input {
  /* Oveeride solo qui */
}
.login__input .input__icon--right .icon {
  color: var(--input-icon-disabled);
  transition: color 200ms;
}
.login__input .input__icon--right:hover .icon {
  color: var(--input-icon);
}
.login__input .input__help {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  font-weight: 700;
}
.login .checkbox__help {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
  font-weight: 700;
}
.login__messaggio {
  font-weight: var(--heading-sm-weight);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
  font-weight: 700;
  text-align: center;
}
.login__countdown {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line-height);
  text-align: center;
}
@media (max-width: 90em) {
  .login__logo-img {
    height: 30rem;
  }
}
@media (max-width: 64em) {
  .login .theme-toggle {
    position: fixed;
    right: 0.4rem;
    top: 0.4rem;
  }
}
@media (max-width: 48em) {
  .login {
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--section-default);
  }
  .login__content {
    margin-inline: 0;
  }
  .login__logo-img {
    height: auto;
  }
}

.contatti__titolo {
  padding-bottom: var(--space-block);
}
.contatti__company {
  font-weight: var(--heading-xs-weight);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
  font-weight: var(--fw-bold, 700) !important;
}
.contatti__group {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line-height);
  color: var(--text-strong);
  font-weight: var(--fw-bold, 700) !important;
}
.credits {
  display: flex;
  flex-direction: column;
  /*     > * + * {
            margin-top: var(--space-block);
            border-top: 1px solid var(--color-divider);
            padding-top: var(--space-block);
       }
  */
}
.credits > * + * {
  margin-top: var(--space-block);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-block);
  transition: border-color 200ms ease-out;
}
.credits h2 {
  font-weight: 700 !important;
}
.credits__staff, .credits__disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--space-text);
}
.credits__company {
  display: flex;
  flex-direction: column;
  gap: var(--space-title);
}
.credits__titolo {
  font-weight: var(--heading-xs-weight);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
  margin-bottom: var(--space-title);
}
.credits__company-nome {
  font-weight: 700;
}
.credits__company-gruppo {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
  color: var(--text-strong);
  font-weight: 700;
  margin-bottom: var(--space-text);
}
.credits__ruolo {
  font-weight: 700;
}

.privacy ul,
.privacy ol {
  list-style: outside;
  padding-left: 3rem;
  margin-block: var(--space-text);
}
.privacy h2 {
  font-weight: var(--heading-xs-weight);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
  font-weight: var(--fw-bold, 700) !important;
}
.privacy blockquote {
  padding-block: var(--space-text);
}

.registrazione {
  background-image: var(--login-bg);
  background-blend-mode: var(--login-bg-blend-mode);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  height: 100dvh;
  display: flex;
  padding-top: var(--section-spacious);
  position: relative;
}
.registrazione__content {
  display: flex;
  padding-inline: var(--padding-inline);
  padding-block: 5rem;
  flex-direction: column;
  flex: 1 0 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2rem;
}
.registrazione__content > * + * {
  margin-top: var(--space-title);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-title);
  transition: border-color 200ms ease-out;
}
.registrazione__content {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.registrazione__titolo {
  font-weight: var(--display-sm-weight);
  font-size: var(--display-sm-size);
  line-height: var(--display-sm-line-height);
  letter-spacing: var(--display-sm-letter-spacing);
  font-weight: var(--heading-xl-weight);
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-letter-spacing);
  text-transform: none;
  text-align: center;
}
.registrazione__testo {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line-height);
}
.registrazione__form {
  display: flex;
  flex-flow: column;
  gap: 2.8rem;
}
.registrazione__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3.2rem;
  row-gap: 2.8rem;
}
.registrazione__fields .input.email {
  grid-column: span 2;
}
.registrazione__fields .input__help {
  display: none;
}
@media (max-width: 48em) {
  .registrazione__fields {
    grid-template-columns: 1fr;
    row-gap: 1.6rem;
  }
  .registrazione__fields .input.email {
    grid-column: span 1;
  }
}
.registrazione__actions {
  display: flex;
  gap: 1.6rem;
}
@media (max-width: 48em) {
  .registrazione__actions {
    gap: 1.2rem;
  }
}
@media (max-width: 23.4375em) {
  .registrazione__actions {
    gap: 0.8rem;
    flex-direction: column;
  }
  .registrazione__actions .btn {
    justify-content: center;
  }
}

.break-line {
  display: inline;
}

.visually-hidden {
  display: none;
}

@keyframes appari_da_sopra_PDF {
  0% {
    transform: translateX(-50%) translateY(-16px) scale(0.15);
  }
  100% {
    transform: translateX(-50%) translateY(-4px) scale(1);
  }
}
@keyframes appari_da_sotto_PDF {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(2.2rem) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(1.2rem) scale(1);
  }
}
@keyframes bouncePDF {
  0% {
    transform: translateX(-50%) translateY(6px) scale(0.85);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
@keyframes MessageIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes messageInFade {
  to {
    opacity: 1;
  }
}
.tipografia .display-lg {
  font-weight: var(--display-lg-weight);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--display-lg-letter-spacing);
}
.tipografia .display-sm {
  font-weight: var(--display-sm-weight);
  font-size: var(--display-sm-size);
  line-height: var(--display-sm-line-height);
  letter-spacing: var(--display-sm-letter-spacing);
}
.tipografia .heading-2xl {
  font-weight: var(--heading-2xl-weight);
  font-size: var(--heading-2xl-size);
  line-height: var(--heading-2xl-line-height);
  letter-spacing: var(--heading-2xl-letter-spacing);
}
.tipografia .heading-xl {
  font-weight: var(--heading-xl-weight);
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-letter-spacing);
}
.tipografia .heading-lg {
  font-weight: var(--heading-lg-weight);
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-line-height);
  letter-spacing: var(--heading-lg-letter-spacing);
}
.tipografia .heading-md {
  font-weight: var(--heading-md-weight);
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-line-height);
  letter-spacing: var(--heading-md-letter-spacing);
}
.tipografia .heading-sm {
  font-weight: var(--heading-sm-weight);
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-line-height);
  letter-spacing: var(--heading-sm-letter-spacing);
}
.tipografia .heading-xs {
  font-weight: var(--heading-xs-weight);
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-line-height);
  letter-spacing: var(--heading-xs-letter-spacing);
}
.tipografia .text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line-height);
}
.tipografia .text-md {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line-height);
}
.tipografia .text-sm {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line-height);
}
.tipografia .text-xs {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line-height);
}
.tipografia .label-2xl {
  font-weight: var(--label-2xl-weight);
  font-size: var(--label-2xl-size);
  line-height: var(--label-2xl-line-height);
  letter-spacing: var(--label-2xl-letter-spacing);
}
.tipografia .label-xl {
  font-weight: var(--label-xl-weight);
  font-size: var(--label-xl-size);
  line-height: var(--label-xl-line-height);
  letter-spacing: var(--label-xl-letter-spacing);
}
.tipografia .label-lg {
  font-weight: var(--label-lg-weight);
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-line-height);
  letter-spacing: var(--label-lg-letter-spacing);
}
.tipografia .label-md {
  font-weight: var(--label-md-weight);
  font-size: var(--label-md-size);
  line-height: var(--label-md-line-height);
  letter-spacing: var(--label-md-letter-spacing);
}
.tipografia .label-sm {
  font-weight: var(--label-sm-weight);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line-height);
  letter-spacing: var(--label-sm-letter-spacing);
}
.tipografia .label-xs {
  font-weight: var(--label-xs-weight);
  font-size: var(--label-xs-size);
  line-height: var(--label-xs-line-height);
  letter-spacing: var(--label-xs-letter-spacing);
}
.tipografia .label-2xs {
  font-weight: var(--label-2xs-weight);
  font-size: var(--label-2xs-size);
  line-height: var(--label-2xs-line-height);
  letter-spacing: var(--label-2xs-letter-spacing);
}
.tipografia .overline-lg {
  font-weight: var(--overline-lg-weight);
  font-size: var(--overline-lg-size);
  line-height: var(--overline-lg-line-height);
  letter-spacing: var(--overline-lg-letter-spacing);
  text-transform: uppercase;
}
.tipografia .overline-md {
  font-weight: var(--overline-md-weight);
  font-size: var(--overline-md-size);
  line-height: var(--overline-md-line-height);
  letter-spacing: var(--overline-md-letter-spacing);
  text-transform: uppercase;
}
.tipografia .overline-sm {
  font-weight: var(--overline-sm-weight);
  font-size: var(--overline-sm-size);
  line-height: var(--overline-sm-line-height);
  letter-spacing: var(--overline-sm-letter-spacing);
  text-transform: uppercase;
}

/*# sourceMappingURL=style.css.map */