:root {
    --clipBkg: polygon(0 8%, 100% 3%, 100% 87%, 0 93%);

    /* === Brand palette — allineata al design system @secarepay/ui (tema "pay") === */
    --color-pay-50: #f3f7fc;
    --color-pay-100: #e6eff8;
    --color-pay-200: #c7deef;
    --color-pay-300: #96c2e3;
    --color-pay-400: #5da2d2;
    --color-pay-500: #3787c0;
    --color-pay-600: #296da4;
    --color-pay-700: #225783;
    --color-pay-800: #1e4b6d;
    --color-pay-900: #1f3f5b;
    --color-pay-950: #14283c;
    --color-pay: var(--color-pay-600);
    --color-pay-bright: #45b0e4;
    --color-border: #d6d3d1;
    --radius-control: 0.75rem; /* 12px — raggio standard di input e bottoni (design system) */
    --container-7xl: 80rem; /* 1280px — larghezza massima contenuto (design system, Tailwind max-w-7xl) */

    /* === "Wallet" — verde brand allineato a @secarepay/ui (per link prodotto Wallet) === */
    --color-wallet-100: #d9eddb;
    --color-wallet-500: #2a9250;
    --color-wallet: var(--color-wallet-500);

    /* === Shadow scale — coerente con login/registerWizard, usata su card,
       dropdown, popup, header sticky. Usare sempre il token, mai un rgba literal. */
    --shadow-sm: 0 1px 2px rgba(20, 40, 60, 0.04);                          /* divider, sticky header */
    --shadow-md: 0 4px 16px rgba(20, 40, 60, 0.06);                         /* card resting */
    --shadow-lg: 0 12px 32px rgba(20, 40, 60, 0.10);                        /* card elevated / hover */
    --shadow-xl: 0 20px 40px rgba(20, 40, 60, 0.14);                        /* modal / drawer */
    --shadow-brand: 0 12px 32px rgba(41, 109, 164, 0.18);                   /* hover branded (CTA card) */

    /* Blu primario del sito: ora puntato sul nuovo "pay-600" (#296da4).
       I sotto-componenti HSL restano allineati per le varianti translucide hsla(...). */
    --mainBlue_Hue: 207;
    --mainBlue_Saturation: 60%;
    --mainBlue_Lightness: 40%;
    --mainBlue: var(--color-pay);

    /* Ex-arancio brand: ora puntato sul blu primario (#296da4) per il rebrand */
    --mainOrange: var(--mainBlue);
    --mainGrey_Hue: 214; --mainGrey_Saturation: 17%; --mainGrey_Lightness: 24%;
    --mainGrey: hsl(var(--mainGrey_Hue), var(--mainGrey_Saturation), var(--mainGrey_Lightness));
    --mainYellow_Hue: 41; --mainYellow_Saturation: 91%; --mainYellow_Lightness: 49%;
    --mainYellow: hsl(var(--mainYellow_Hue), var(--mainYellow_Saturation), var(--mainYellow_Lightness));
    --greyText_Hue: 0; --greyText_Saturation: 0%; --greyText_Lightness: 44%;
    --greyText: hsl(var(--greyText_Hue), var(--greyText_Saturation), var(--greyText_Lightness));
    --lightGrey_Hue: 0; --lightGrey_Saturation: 0%; --lightGrey_Lightness: 96%;
    --lightGrey: hsl(var(--lightGrey_Hue), var(--lightGrey_Saturation), var(--lightGrey_Lightness));
    /* Ex-arancio menu: ora puntato sul blu primario per il rebrand */
    --menuOrange: var(--mainBlue);
}

/*  HEADER  */
header.header-menu {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 2px 0 #0000000d;
}
.header-menu__container, ul.header-menu__links {
    background: white;
}
.header-menu__container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
a.logo--header, button.header-menu__hamburger span, li.header-menu__social-item a {
    display: block;
}
a.logo--header {
    margin-right: auto;
    line-height: 0;
}
svg.logo--header {
    fill: var(--mainBlue);
}
img.logo__icon.logo--header {
    display: block;
    height: auto;
}
button.header-menu__hamburger {
    border: none;
    display: flex;
    flex-direction: column;
    background: none;
}
button.header-menu__hamburger span {
    background: var(--mainBlue);
}
button.header-menu__hamburger span:nth-of-type(2) {
    margin-right: 0;
    margin-left: auto;
}
svg.header-menu__login-icon {
    stroke: var(--mainBlue);
    fill: none;
}
ul.header-menu__social-list {
    display: flex;
    flex-direction: row;
}
ul.header-menu__links, ul.header-menu__social-list {
    list-style: none;
}
li.header-menu__item {
    text-transform: none;
    font-weight: 600;
    font-size: 1rem;
}
li.header-menu__item a {
    text-decoration: none;
    color: var(--mainBlue);
}
li.header-menu__social-item svg {
    fill: #296da4;
}
/* Voce di menu selezionata: semplice sottolineato (come l'header del progetto nuovo) */
li.header-menu__item a.active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}
/* PARTNERS — "Collaboriamo con leader del settore" (stile ImageTicker "centered-title" di secarepay-ui) */
.homepage-footer__partners {
    background: #fff;
    padding-block: 4rem;
}
.homepage-footer__partners-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    max-width: var(--container-7xl);
    margin-inline: auto;
    padding-inline: 1rem;
}
h2.homepage-footer__partners-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #303030;
    text-align: center;
    text-transform: none;
}
.homepage-footer__partners-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.homepage-footer__partner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.homepage-footer__partner img {
    display: block;
    width: auto;
    height: auto;
    max-height: 1.5rem;
    max-width: 10rem;
    mix-blend-mode: multiply;
}
@media (min-width: 640px) {
    .homepage-footer__partners-list { gap: 2rem; }
}
@media (min-width: 1024px) {
    .homepage-footer__partners-inner { flex-direction: row; gap: 6rem; padding-inline: 2rem; }
}
/* FOOTER — port 1:1 del SiteFooter.vue del progetto Nuxt "secarepay":
   sfondo bianco, logo + link prodotti a sinistra, social a destra,
   divider orizzontale, riga finale con copyright + link legali. */
.site-footer {
    background: #fff;
    color: var(--color-pay-950);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.site-footer__container {
    max-width: var(--container-7xl);
    margin-inline: auto;
    padding-inline: 1rem;
}
.site-footer__inner {
    display: flex;
    flex-direction: column;
    padding-block: 5rem; /* py-20 di Tailwind */
}
.site-footer__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.site-footer__logo-link {
    display: inline-block;
    line-height: 0;
}
.site-footer__logo {
    display: block;
    width: auto;
    height: 2.25rem; /* 36px — larghezza ricalcolata sull'aspect ratio della SVG */
}
.site-footer__divider-v {
    display: none;
}
.site-footer__products {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* gap-6 */
}
.site-footer__product {
    display: block;
    font-weight: 300; /* font-light */
    text-decoration: none;
    color: var(--color-pay-950);
    transition: opacity 0.15s ease;
}
.site-footer__product:hover { opacity: 0.7; }
.site-footer__product--wallet { color: var(--color-wallet); }
.site-footer__product--pay { color: var(--color-pay); }
.site-footer__socials {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}
.site-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0.375rem; /* p-1.5 */
    background: var(--color-pay-100); /* bg-primary-200 (tema pay) */
    color: var(--color-pay);
    border-radius: 0.5rem; /* rounded-lg */
    transition: background 0.15s ease;
}
.site-footer__social:hover { background: var(--color-pay-200); }
.site-footer__social svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--color-pay);
}
.site-footer__divider-h {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-block: 2rem; /* my-8 */
}
.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    color: var(--color-pay-950);
}
.site-footer__copyright,
.site-footer__legal { margin: 0; }
.site-footer__legal-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.site-footer__legal-link:hover { opacity: 0.7; }
.site-footer__legal-sep {
    margin-inline: 0.5rem;
    color: var(--color-border);
}
@media (min-width: 640px) { /* sm: */
    .site-footer__brand {
        flex-direction: row;
        gap: 1.5rem; /* sm:gap-6 */
    }
    .site-footer__divider-v {
        display: block;
        width: 2px;
        height: 2.5rem; /* h-10 */
        background: var(--color-border);
    }
}
@media (min-width: 768px) { /* md: */
    .site-footer__top {
        flex-direction: row;
        justify-content: space-between;
        gap: 1rem; /* md:gap-4 */
    }
    .site-footer__divider-h { margin-block: 3rem; /* md:my-12 */ }
}
@media (min-width: 1024px) { /* lg: */
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* Dashboard layout: footer si attacca sotto il main, niente padding extra orizzontale */
.site-footer--dashboard { width: 100%; }

/* === Pattern decorativi negli angoli — sezioni con gradiente blu (come hero homepage) === */
.document-2-container,
.document-5-container,
.warranty-summary-container,
.offers-advanced-search-container,
.homepage-video-section__right-side {
    position: relative;
    isolation: isolate;
}
.document-2-container::before, .document-2-container::after,
.document-5-container::before, .document-5-container::after,
.warranty-summary-container::before, .warranty-summary-container::after,
.offers-advanced-search-container::before, .offers-advanced-search-container::after,
.homepage-video-section__right-side::before, .homepage-video-section__right-side::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: clamp(10rem, 14vw, 14rem);
    aspect-ratio: 407 / 406;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.document-2-container::before,
.document-5-container::before,
.warranty-summary-container::before,
.offers-advanced-search-container::before,
.homepage-video-section__right-side::before {
    top: 0.75rem;
    left: 0.75rem;
    background-image: url('/static/images/patterns/pattern-white-top-left.svg');
}
.document-2-container::after,
.document-5-container::after,
.warranty-summary-container::after,
.offers-advanced-search-container::after,
.homepage-video-section__right-side::after {
    bottom: 0.75rem;
    right: 0.75rem;
    background-image: url('/static/images/patterns/pattern-white-bottom-right.svg');
}
@media (width <= 550px){
    header.header-menu, .header-menu__container {
        height: 16vw;
    }
    .header-menu__container {
        padding-inline: 8vw;
    }
    .logo__icon.logo--header {
        width: 30vw;
    }
    svg.header-menu__login-icon {
        width: 7vw;
        height: 7vw;
    }
    button.header-menu__hamburger {
        grid-gap: 1.5vw;
    }
    button.header-menu__hamburger.open + ul {
        padding: 3vw 6vw;
    }
    button.header-menu__hamburger span {
        height: 0.7vw;
    }
    button.header-menu__hamburger span:nth-of-type(odd) {
        width: 7vw;
    }
    button.header-menu__hamburger span:nth-of-type(2) {
        width: 5vw;
    }
    li.header-menu__item {
        font-size: 1rem;
    }
    li.header-menu__item a span {
        padding: 2vw 2vw 2.5vw;
    }
    li.header-menu__item:last-of-type::after {
        width: calc(100% + 12vw);
        left: -6vw;
    }
}
@media (width >= 551px) and (width <= 766.9px){
    header.header-menu, .header-menu__container {
        height: 14vw;
    }
    .header-menu__container {
        padding-inline: 10vw;
    }
    .logo__icon.logo--header {
        width: 25vw;
    }
    button.header-menu__hamburger.open + ul {
        padding: 3vw 8vw;
    }
    li.header-menu__item {
        font-size: 1rem;
    }
    li.header-menu__item a span{
        padding: 2vw 2vw 2.5vw;
    }
    ul.header-menu__social-list {
        padding-left: 2vw;
    }
    li.header-menu__item:last-of-type::after {
        width: calc(100% + 16vw);
        left: -8vw;
    }
}
@media (width >= 551px) and (width <= 899.9px){
    svg.header-menu__login-icon {
        width: 5.5vw;
        height: 5.5vw;
    }
    button.header-menu__hamburger {
        grid-gap: 1vw;
    }
    button.header-menu__hamburger span:nth-of-type(odd) {
        width: 5vw;
    }
    button.header-menu__hamburger span:nth-of-type(2) {
        width: 3vw;
    }
}
@media (width >= 551px) and (width <= 1099.9px){
    button.header-menu__hamburger span {
        height: 0.4vw;
    }
}
@media (width <= 766.9px){
    ul.header-menu__social-list {
        grid-gap: 5.5vw;
    }
    li.header-menu__social-item a svg {
        height: 5vw;
    }
    button.header-menu__hamburger.open + ul {
        grid-gap: 5vw;
    }
    li.header-menu__item:last-of-type::after {
        top: -2.5vw;
    }
}
@media (width >= 767px) and (width <= 899.9px){
    header.header-menu, .header-menu__container {
        height: 11vw;
    }
    .logo__icon.logo--header {
        width: 22vw;
    }
    li.header-menu__item {
        font-size: 1rem;
    }
    button.header-menu__hamburger.open + ul {
        grid-gap: 3vw;
    }
    li.header-menu__item:last-of-type::after {
        top: -1.5vw;
    }
    li.header-menu__social-item a svg {
        height: 3.5vw;
    }
}
@media (width >= 767px) and (width <= 1099.9px){
    .header-menu__container {
        padding-inline: 8vw;
    }
    button.header-menu__hamburger.open + ul {
        padding: 3vw 6vw;
    }
    ul.header-menu__social-list {
        grid-gap: 3.5vw;
    }
    li.header-menu__item a span {
        padding: 1.3vw 2vw 1.5vw;
    }
    li.header-menu__item:last-of-type::after {
        width: calc(100% + 16vw);
        left: -8vw;
    }
}
@media (width >= 900px) and (width <= 1099.9px){
    header.header-menu, .header-menu__container {
        height: 10vw;
    }
    .logo__icon.logo--header {
        width: 20vw;
    }
   svg.header-menu__login-icon {
        width: 4.5vw;
        height: 4.5vw;
    }
    button.header-menu__hamburger {
        grid-gap: 0.8vw;
    }
    button.header-menu__hamburger span:nth-of-type(odd) {
        width: 4vw;
    }
    button.header-menu__hamburger span:nth-of-type(2) {
        width: 2.5vw;
    }
    button.header-menu__hamburger.open + ul {
        grid-gap: 2vw;
    }
    li.header-menu__item {
        font-size: 1rem;
    }
    li.header-menu__item:last-of-type::after {
        top: -1vw;
    }
    li.header-menu__social-item a svg {
        height: 2.5vw;
    }
}
@media (width <= 1099.9px){
    .header-menu__container, li.header-menu__item{
        position: relative;
    }
    .header-menu__container {
        grid-gap: 3vw;
    }
    a.header-menu__login{
        display: block;
        line-height: 0;
    }
    span.header-menu__login-text {
        display: none;
    }
    .header-menu__right {
        order: 2;
    }
    nav.header-menu__nav {
        order: 3;
    }
    button.header-menu__hamburger span {
        border-radius: 1vw;
    }
    button.header-menu__hamburger.open + ul {
        max-height: 79vw;
        position: absolute;
        width: 100%;
        left: 0;
        top: 99%;
        z-index: 1;
        display: flex;
        flex-direction: column;
    }
    ul.header-menu__links {
        max-height: 0;
        overflow: hidden;
        width: 0;
    }
    li.header-menu__item:not(:last-of-type) {
        width: fit-content;
    }
    li.header-menu__item:last-of-type::after {
        position: absolute;
        content: "";
        height: 1.5px;
        background: #efefef;
    }
    ul.header-menu__social-list{
        padding-left: 2vw;
    }
    li.header-menu__item--social {
        padding-block: 1.5vw 0;
    }
}
@media (width >= 1100px){
    .header-menu__container {
        grid-gap: 4vw;
    }
    ul.header-menu__links {
        display: flex;
        grid-gap: 1.5vw;
        align-items: center;
    }
    svg.header-menu__login-icon {
        display: none;
    }
    .header-menu__right a {
        text-decoration: none;
        font-weight: 600;
        text-transform: none;
        color: #ffffff;
        background: var(--mainBlue);
        padding: 0.7vw 2vw;
    }
    li.header-menu__item a span {
        padding: 0.7vw 0.5vw 0.9vw;
    }
    li.header-menu__item.header-menu__item--social {
        display: none;
    }
}
@media (width >= 1100px) and (width <= 1400px){
    header.header-menu, .header-menu__container {
        height: 8vw;
    }
    .header-menu__container {
        padding-inline: 5vw;
    }
    .logo__icon.logo--header {
        width: 12vw;
    }
    .header-menu__right a {
        border-radius: var(--radius-control);
    }
    li.header-menu__item, .header-menu__right a {
        font-size: 1rem;
    }
    li.header-menu__item {
        line-height: 1vw;
    }
}
@media (width >= 1401px){
    header.header-menu, .header-menu__container {
        height: 6vw;
    }
    .header-menu__container {
        padding-inline: 10vw;
    }
    .logo__icon.logo--header {
        width: 10vw;
    }
    .header-menu__right a {
        border-radius: var(--radius-control);
    }
    li.header-menu__item, .header-menu__right a {
        font-size: 1rem;
    }
    li.header-menu__item {
        line-height: 0.8vw;
    }
}

body { overflow-x: clip; }
html { font-family: 'Roboto', sans-serif; background-color: var(--lightGrey); scrollbar-color: red; }
.preload * { transition: none !important; }
.overflow-hidden { overflow: hidden; }
.max-w-7xl { max-width: var(--container-7xl); }

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

/* === Scala tipografica — contenuta, allineata a Tailwind ===
   Heading globali: dimensioni da titolo di sezione, non da hero.
   Un solo step responsive (mobile -> desktop). */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.25rem; }   /* 36px */
h2 { font-size: 1.875rem; }  /* 30px */
h3 { font-size: 1.5rem; }    /* 24px */
h4 { font-size: 1.25rem; }   /* 20px */
h5 { font-size: 1.125rem; }  /* 18px */
h6 { font-size: 1rem; }      /* 16px */
p  { font-size: 1rem; }      /* 16px */
@media (min-width: 1024px) {
    h1 { font-size: 3rem; }      /* 48px */
    h2 { font-size: 2.25rem; }   /* 36px */
    h3 { font-size: 1.875rem; }  /* 30px */
    h4 { font-size: 1.5rem; }    /* 24px */
}
::-webkit-scrollbar-track { background-color: #FFF; }
::-webkit-scrollbar { width: 7px; background-color: #FFF; }
::-webkit-scrollbar-thumb { background-color: var(--mainBlue); }

body.video-played { position: relative; overflow-y: hidden }
body.video-played::before { content: ''; width: 100% }

/*TITLES*/
.body-content-seller-container > h3,
.body-content-buying-container > h3,
.body-content-related-container > h3 { font-size: 1.875rem; margin-bottom: 50px }

/*LEFT SECTION BLUE BAND*/

/*RIGHT SECTION TOP CONTENT*/

.top-content-wrapper > .top-content-right-section > svg { position: absolute; top: -100px; right: 100px; height: 500px; z-index: -1; }

.login-container {
    background: #FFF;
}
/*HEADER*/
.header-menu-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 50000 }
body.scrolled .header-menu-wrapper { z-index: 60000 }
.header-menu-wrapper > .header-menu-container { display: flex; align-items: center; gap: 80px; justify-content: flex-end; padding: 20px; padding-right: 150px; padding-left: 40px; height: 70px; transition: all 0.3s; font-family: "Open Sans", sans-serif }
.header-menu-wrapper > .header-menu-container a { color: #ffffffba; font-weight: 300; text-decoration: none; }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu { display: none; }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span { transition: all 0.4s }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span:nth-child(2) { opacity: 1 }
.header-menu-wrapper > .header-menu-container > .header-menu-right-side { display: flex; align-items: center; gap: 70px }

body.scrolled .header-menu-wrapper > .header-menu-container { background-color: #FFF; box-shadow: 2px 2px 10px#00000045 }
body.scrolled .header-menu-wrapper > .header-menu-container a { color: var(--mainBlue); }
body.scrolled .header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span { background-color: var(--mainBlue) }

/*HAMBURGER MENU STYLE*/
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu.open { position: relative; display: flex; align-items: center; justify-content: center; height: 30px }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu.open > span { margin-bottom: 0 !important; }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu.open > span:nth-child(2) { opacity: 0; position: absolute; margin-left: 0; transition: 0.2s }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu.open > span:nth-child(1) { transform: rotate(45deg); position: absolute; }
.header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu.open > span:nth-child(3) { transform: rotate(-45deg) }

/*BANNER PARTNER*/
.partners-wrapper { }
.partners-wrapper > .partners-title { padding: 25px 5% 10px; font-size: 1.5rem; line-height: 1.5em; font-style: italic; }
.partners-wrapper > .partners-container { background-color: #fff; padding: 15px 10%; }
.partners-wrapper > .partners-container > div { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; }
.partners-wrapper > .partners-container > div > .partners-partner { padding: 0 2%; }
.partners-wrapper > .partners-container > div > .partners-partner > img {  }
.partners-wrapper > .partners-container > div > .partners-partner.opteven > img { padding-bottom: 10px; }
.partners-wrapper > .partners-container > div > .partners-partner.arco > img { width: 200px; }

/*FOOTER*/
.footer-wrapper { background-color: var(--lightGrey); color: #707070 }
.footer-wrapper > .footer-container { padding-top: 50px; padding-inline: 100px; }
.footer-wrapper > .footer-container > .footer-top { display: flex; justify-content: space-between; margin-bottom: 40px; align-items: flex-end }
.footer-wrapper > .footer-container > .footer-top > * { display: flex; flex-direction: column }

.footer-menu-wrapper > .footer-menu-title { color: var(--mainBlue); font-weight: 600; font-size: 1rem; margin-bottom: 5px; display: block; text-align: right }
.footer-menu-wrapper > .footer-menu { text-align: right; list-style: none; display: flex; }
.footer-menu-wrapper > .footer-menu > li { display: inline-block }
.footer-menu-wrapper > .footer-menu > li:not(:first-child)::before { content: '|'; margin-inline: 3px; padding-inline: 3px }
.footer-menu-wrapper > .footer-menu > li > a { text-decoration: none; color: var(--greyText) }

@media (pointer: fine) {
    .footer-menu-wrapper > .footer-menu > li > a:hover { text-decoration: underline }
}

@media (max-width: 1500px) { /*HEADER*/
    .header-menu-wrapper > .header-menu-container { gap: 40px; padding-right: 100px }
    .header-menu-wrapper > .header-menu-container > .header-menu-right-side { gap: 50px }
}

@media (max-width: 1300px) {
    /*HEADER*/
    .header-menu-wrapper > .header-menu-container { padding-right: 30px; gap: 10px }
    .header-menu-wrapper > .header-menu-container > .header-menu-right-side { gap: 25px }
}

@media (max-width: 1200px) {
    body.video-played { position: relative; overflow-y: auto }
    body.video-played::before { content: none }

    .header-menu-wrapper { z-index: 56000 }
    /*LEFT SECTION BLUE BAND*/
    .top-content-wrapper > .blue-band-left-section { display: none }

    /*HEADER*/
    .header-menu-wrapper > .header-menu-container { background-color: var(--mainBlue); justify-content: flex-end; z-index: 10000; position: relative; gap: 0 }
    .header-menu-wrapper > .header-menu-container .logo-container { order: 0 }
    .header-menu-wrapper > .header-menu-container > .pages-menu { order: 2 }
    .header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu { display: block; cursor: pointer }
    .header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span { display: block; width: 30px; height: 3px; border-radius: 20px; background-color: #FFF; }
    .header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span:nth-child(2) { width: 20px; margin-left: auto }
    .header-menu-wrapper > .header-menu-container > .pages-menu > .hamburger-menu > span:not(:last-child) { margin-bottom: 6px; }
    .header-menu-wrapper > .header-menu-container > .header-menu-right-side { order: 1; align-items: center; }
    .header-menu-wrapper > .header-menu-container { padding-inline: 30px }

    /*RIGHT SECTION TOP CONTENT*/
    .top-content-wrapper > .top-content-right-section > svg { right: 70px; height: 400px; }

    /*BANNER PARTNER*/
    .partners-wrapper > .partners-container > div > .partners-partner > img { width: 170px; }

    /*FOOTER*/
    .footer-wrapper > .footer-container { padding-inline: 50px }
}

@media (max-width: 1025px) {
    /*BANNER PARTNER*/
    .partners-wrapper > .partners-container > div > .partners-partner > img { width: 130px; }

    /*FOOTER*/
    .footer-wrapper > .footer-container { padding: 80px; padding-top: 100px }
    /*FOOTER*/
    .footer-wrapper > .footer-container { padding: 40px }
    .footer-wrapper > .footer-container > .footer-top { flex-direction: column; align-items: center }
    .footer-wrapper > .footer-container > .footer-top > * { align-items: center }
    .footer-wrapper > .footer-container > .footer-top > .footer-top-left { margin-bottom: 20px }
    .footer-wrapper > .footer-container > .footer-top > .footer-top-right > span { text-align: center }

    .footer-menu-wrapper > .footer-menu { text-align: center; }
    .footer-menu-wrapper > .footer-menu-title { text-align: center }
}

@media (max-width: 767px) {
    .top-content-wrapper > .top-content-right-section { padding-bottom: 0 }
    /*RIGHT SECTION TOP CONTENT*/
    .top-content-wrapper > .top-content-right-section > svg { display: none }

    /*HEADER*/
    .header-menu-wrapper > .header-menu-container { gap: 0 }

    /*BANNER PARTNER*/
    .partners-wrapper > .partners-container { margin-bottom: 25px; }
    .partners-wrapper > .partners-title { text-align: center; }
    .partners-wrapper > .partners-container > div { flex-direction: column; }
    .partners-wrapper > .partners-container > div > .partners-partner { padding: 5px 0; }
    .partners-wrapper > .partners-container > div > .partners-partner > img { width: 200px; }
 }

@media (max-width: 480px) {

    /*HEADER*/
    .header-menu-wrapper > .header-menu-container { padding: 15px; gap: 0; }
    .header-menu-wrapper > .header-menu-container > .header-menu-right-side { gap: 25px; }

    /*TITLES*/
    .body-content-related-container > h3 { text-align: center }
    .footer-wrapper > .footer-container { padding-top: 20px; padding-bottom: 0; }
}

@media (max-width: 380px) {
    /*HEADER*/
    .header-menu-wrapper > .header-menu-container > .header-menu-right-side { gap: 15px }
}

/* ==========================================================================
   SITE HEADER — porting dell'header dal progetto Nuxt nuovo.
   Blocco autonomo con classi prefissate "site-header" per non collidere
   con le vecchie regole "header-menu*" (ormai morte sul markup nuovo).
   ========================================================================== */

/* --- Barra fissa in cima --- */
.site-header {
    position: static;
    width: 100%;
    z-index: 99999;
}

/* La barra: il riquadro orizzontale visibile in cima alla pagina */
.site-header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 6rem; /* compatta ~96px (mobile + desktop scrolled) */
    padding-inline: 1rem;
    background: #fafaf9; /* stone-50 */
    box-shadow: 0 1px 2px 0 #0000000d;
    transition: height 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Header scrolla normalmente col contenuto (niente fixed, niente hide animation) */

/* --- Logo nella barra --- */
.site-header__logo {
    display: flex;
    align-items: center;
    line-height: 0;
}
.site-header__logo .logo,
.site-header__logo .logo--header {
    display: block;
    line-height: 0;
}
.site-header__logo .logo__icon.logo--header {
    display: block;
    width: 12rem; /* ~144px (Tailwind w-36) */
    height: auto;
    padding-top: 0;
}

/* --- Hamburger --- */
.site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 4; /* sopra il drawer (panel z-index 2) così la X resta visibile e cliccabile */
}
.site-header__burger span {
    display: block;
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: var(--mainBlue);
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Hamburger -> X quando il drawer e' aperto */
.site-header.is-open .site-header__burger span:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
    width: 1.75rem;
}
.site-header.is-open .site-header__burger span:nth-child(2) {
    opacity: 0;
}
.site-header.is-open .site-header__burger span:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
}

/* --- Backdrop dietro il drawer mobile --- */
.site-header__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 1;
}
.site-header.is-open .site-header__backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* --- Pannello / drawer mobile --- */
.site-header__panel {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    width: calc(100vw - 1rem);
    max-width: 24rem;
    height: calc(100vh - 1.5rem);
    padding: 2rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background: #fafaf9; /* stone-50 */
    border-radius: 1.5rem;
    box-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0.75rem);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    z-index: 2;
}
.site-header.is-open .site-header__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* Logo dentro il drawer */
.site-header__panel-logo {
    display: block;
    line-height: 0;
}
.site-header__panel-logo .logo,
.site-header__panel-logo .logo--header {
    display: block;
    line-height: 0;
}
.site-header__panel-logo .logo__icon.logo--header {
    display: block;
    width: 12rem;
    height: auto;
    padding-top: 0;
}

/* Separatore nel drawer */
.site-header__sep {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: 2rem;
}

/* Navigazione (TopMenu) */
.site-header__nav ul.header-menu__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: transparent;
    /* reset delle vecchie regole mobile di .header-menu__links (dropdown collassato a 0) */
    max-height: none;
    width: auto;
    overflow: visible;
}
.site-header__nav li.header-menu__item {
    font-weight: 600;
    font-size: 1.5rem;
}
.site-header__nav li.header-menu__item a {
    color: var(--mainBlue);
    text-decoration: none;
}
.site-header__nav li.header-menu__item a.active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

/* Desktop only: nav centrata nella barra, font-light grigio, active blu+underline.
   Tecnica: logo e actions hanno stesso flex-grow, il panel resta auto al centro. */
@media (min-width: 1024px) {
    .site-header__logo,
    .site-header__actions {
        flex: 1 1 0;
    }
    .site-header__actions {
        justify-content: flex-end;
        margin-left: 0;
    }
    .site-header__panel {
        flex: 0 0 auto;
        justify-content: center;
        margin-left: 0;
    }
    .site-header__nav {
        flex: 0 0 auto;
    }
    .site-header__nav li.header-menu__item a {
        color: var(--greyText);
        font-weight: 300;
        transition: color 0.15s ease;
    }
    .site-header__nav li.header-menu__item a:hover {
        color: var(--mainBlue);
    }
    .site-header__nav li.header-menu__item a.active {
        color: var(--mainBlue);
        font-weight: 500;
    }
}

/* Social: visibili SOLO nel drawer mobile */
.site-header__nav li.header-menu__item--social {
    margin-top: 0.5rem;
}
.site-header__nav ul.header-menu__social-list {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}
.site-header__nav li.header-menu__social-item a {
    display: block;
}
.site-header__nav li.header-menu__social-item svg {
    height: 1.5rem;
    width: auto;
    fill: var(--mainBlue);
}

/* Area account / login (sezione 4) */
/* Gruppo a destra della barra: login + hamburger */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.site-header__account {
    display: flex;
    align-items: center;
}
.site-header__account a.header-menu__login {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.site-header__account svg.header-menu__login-icon {
    width: 1.75rem;
    height: 1.75rem;
    stroke: var(--mainBlue);
}

/* --- Desktop >= 1024px: il pannello torna inline nella barra --- */
@media (min-width: 1024px) {
    /* La barra: piu' alta e trasparente quando si e' in cima alla pagina */


    /* Burger, backdrop, logo del drawer e separatore: nascosti su desktop */
    .site-header__burger,
    .site-header__sep,
    .site-header__panel-logo {
        display: none;
    }
    .site-header__backdrop {
        display: none !important;
    }

    /* Il pannello diventa una riga inline dentro la barra */
    .site-header__panel {
        position: static;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 2rem;
        width: auto;
        max-width: none;
        height: auto;
        padding: 0;
        overflow: visible;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        margin-left: 2rem;
    }

    /* Navigazione orizzontale su desktop */
    .site-header__nav ul.header-menu__links {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
    .site-header__nav li.header-menu__item {
        font-size: 1rem;
    }
    /* Social nascosti sulla barra desktop */
    .site-header__nav li.header-menu__item--social {
        display: none;
    }

    .site-header__account {
        margin-top: 0;
    }

    /* Bottone "Accedi" su desktop: bottone primary, staccato dalla navigazione */
    .site-header__actions {
        margin-left: 2.5rem;
    }
    .site-header__account .header-menu__login-text {
        display: inline;
        font-weight: 300;
    }
    .site-header__account svg.header-menu__login-icon {
        display: none;
    }
    .site-header__account a.header-menu__login {
        gap: 0.5rem;
        padding: 14px 16px;
        color: #fff;
        font-weight: 300;
        white-space: nowrap;
        background: var(--mainBlue);
        border-radius: var(--radius-control);
        transition: filter 0.15s ease;
    }
    .site-header__account a.header-menu__login:hover {
        filter: brightness(112%);
    }
}

@media (min-width: 640px) {
    .site-header__bar { padding-inline: 2rem; }
}
@media (min-width: 768px) {
    .site-header__bar { padding-inline: 3.5rem; }
}
@media (min-width: 1024px) {
    .site-header__bar { padding-inline: 5rem; }
}
@media (min-width: 1280px) {
    .site-header__bar { padding-inline: 6rem; }
}