@import url("https://use.typekit.net/lgk3cva.css");

/* =============================================
   MBcRETICA — stylesheet
   Palette:
     --navy:   #0a1628   (sfondo scuro)
     --blue:   #1a3a6b   (blu primario)
     --accent: #f97316   (arancione accento)
     --light:  #f8fafc   (sfondo chiaro)
     --text:   #1e293b
     --muted:  #64748b
   ============================================= */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; font-size: 16px; }
body {
    font-family: 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
}
:root {
    --navy:     #005866;   /* dark teal primary  */
    --blue:     #005866;   /* dark teal primary  */
    --accent:   #009FB8;   /* light teal accent  */
    --mymatrix-second-color: #22c55e; /* verde MyMatrix */
    --light:    #f8fafc;
    --text:     #1e293b;
    --muted:    #566376;
    /* Badge "in evidenza"/"in primo piano" dell'editoriale: sfondo molto
       chiaro e testo saturo della stessa tinta — così restano leggeri e il
       testo è pienamente leggibile (contrasto ≈ 8:1). */
    --evidenza-bg:  #f3f0ff;
    --evidenza-ink: #5b21b6;
    --pp-bg:        #eaf0ff;
    --pp-ink:       #3730a3;
    /* Tag dell'articolo: lilla, per distinguerli a colpo d'occhio dal badge
       neutro della categoria che sta sulla stessa riga. */
    --tag-bg:       #f5f0fd;
    --tag-ink:      #7c3aed;
    /* Lilla dell'Editoriale: il pulsante che lo apre è lo stesso nell'header e
       nel footer, quindi il colore sta qui una volta sola. --lilla-scuro serve
       al passaggio del mouse (i pulsanti teal virano sul navy, questo sulla
       propria tinta più scura). */
    --lilla:        #9999ff;
    --lilla-scuro:  #6f6fe0;
    --radius:   10px;
    --radius-lg:18px;
    --shadow:   0 4px 24px rgba(0,88,102,.10);
    --shadow-lg:0 8px 48px rgba(0,88,102,.18);
    --header-h: 72px;
    --max-w:    1400px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.1em;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; line-height: 1.2; color: var(--navy); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { color: var(--muted); }

/* ---- Header ---- */
.main-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,88,102,.08);
    transition: background .3s, box-shadow .3s;
}
.main-header.is-scrolled {
    background: rgba(255,255,255,.99);
    box-shadow: var(--shadow);
}
.header-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.header-logo { display: flex; align-items: center; }
.logo-img { height: 36px; width: auto; transition: transform .2s ease; }
.header-logo:hover .logo-img { transform: scale(1.08); }
.logo-text-fallback {
    font-family: 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--navy);
    letter-spacing: -.02em;
}

.main-nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-list li { position: relative; }
.nav-link {
    display: block;
    color: #475569;
    font: 600 .87rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .02em;
    padding: .5rem 1rem;
    border-radius: 999px;
    transition: color .2s, background .2s;
}
.nav-link:hover { color: #fff; background: #2a8fa3; }
.nav-link.is-active { color: #fff; background: var(--navy); }

.btn-header-cta {
    background: var(--accent);
    color: #fff;
    font: 700 .87rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .03em;
    padding: .6rem 1.3rem;
    border-radius: 999px;
    display: flex; align-items: center; gap: .4rem;
    transition: background .2s, transform .15s;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,159,184,.25);
}
.btn-header-cta:hover { background: var(--navy); transform: translateY(-1px); }

/* Le due pillole dell'header stanno più vicine tra loro (.6rem) di quanto
   .main-nav distanzi il menu dai pulsanti (1.5rem): sono un gruppo solo. */
.header-cta-group { display: flex; align-items: center; gap: .6rem; }
/* Variante Editoriale: cambia solo la tinta, la forma resta quella di
   .btn-header-cta. L'icona open_in_new dice che il link apre una nuova scheda;
   per chi non vede l'icona la stessa cosa è scritta in .u-sr-only nel markup. */
.btn-header-cta--editoriale {
    background: var(--lilla);
    box-shadow: 0 4px 12px rgba(153,153,255,.35);
}
.btn-header-cta--editoriale:hover { background: var(--lilla-scuro); }

.mobile-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--navy); font-size: 1.6rem; line-height: 1;
    margin-left: auto;
}

/* ---- Buttons ---- */
.btn-hero {
    --btn-hover-bg: #2a8fa3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    font: 700 13px/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    padding: 12px 28px;
    border: 2px solid var(--navy);
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn-hero:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
    box-shadow: 0 6px 18px rgba(0,88,102,.2);
    color: #fff;
}
.btn-hero--outline {
    --btn-hover-bg: #2a8fa3;
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}
.btn-hero--outline:hover { color: #fff; }
.btn-hero--ghost {
    --btn-hover-bg: #2a8fa3;
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.btn-hero--ghost:hover { color: #fff; }
.btn-hero.is-loading { opacity: .6; pointer-events: none; }

/* ---- Hero ---- */
.hero {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background: #fff;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    max-width: var(--max-w);
    margin: 0 auto;
    overflow: hidden; position: relative;
    width: 100%;
}
/* full-bleed wrapper needed so background spans full viewport */
.hero-wrap {
    background: #fff;
    padding-top: var(--header-h);
}
.hero--inner { min-height: 56svh; }
.hero--slim  { min-height: 42svh; }
.hero .hero__content, .hero .hero__media {
    padding: 2rem 1.5rem;
}
.hero--inner, .hero--slim { grid-template-columns: 1fr; }
.hero__content { display: flex; flex-direction: column; gap: 1.5rem; padding: 0; }
.hero__label {
    font: 700 .72rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .12em;
    color: var(--navy);
    text-transform: uppercase;
    display: flex; align-items: center; gap: .4rem;
    background: #e0f2f1;
    padding: .35rem .85rem;
    border-radius: 999px;
    width: fit-content;
}
.hero__title {
    color: var(--text);
    font-size: clamp(1.9rem, 7vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
}
.hero__title span, .hero__title-accent { color: var(--accent); }
.hero__sub    { color: var(--muted); font-size: 1.05rem; max-width: 560px; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__media { display: flex; align-items: center; justify-content: center; }
.hero__media img {
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    width: 88%;
    max-width: 440px;
    aspect-ratio: 1;
    object-fit: cover;
}

/* ---- Hero: Home, Brand, Retica, MyMatrix, Servizi, Partner24, Cluster SCP,
   Contatti (usano tutte .hero--home). Escluso .hero--editorial, che riusa le
   stesse classi base per il layout dell'editoriale.
   - Più spazio sotto il menu fisso (che altrimenti copre parte della hero).
   - Pillola, descrizione e pulsanti allineati allo stile del riferimento.
   - Pattern di puntini agganciato ai bordi reali della foto tramite
     .hero__media-frame, invece che al contenitore con padding (altrimenti
     i puntini restano scollegati dalla foto).
   - Comparsa dinamica di testo e immagine (equivalente delle classi
     animate__fadeInLeft/fadeInRight del sito di riferimento, qui in CSS
     nativo senza libreria esterna). ---- */
@keyframes heroFadeInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroFadeInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
.hero--home:not(.hero--editorial) .hero__content {
    animation: heroFadeInLeft .7s ease-out both;
}
.hero--home:not(.hero--editorial) .hero__media {
    animation: heroFadeInRight .7s ease-out .15s both;
}
@media (prefers-reduced-motion: reduce) {
    .hero--home:not(.hero--editorial) .hero__content,
    .hero--home:not(.hero--editorial) .hero__media {
        animation: none;
    }
}
.hero--home:not(.hero--editorial) {
    grid-template-columns: 1.3fr .9fr;
    padding-top: calc(var(--header-h) + 2.5rem);
}
.hero--home:not(.hero--editorial) .hero__label {
    font-size: .8rem;
    padding: 6px 14px;
    letter-spacing: .5px;
}
.hero--home:not(.hero--editorial) .hero__sub {
    max-width: 95%;
}
.hero--home:not(.hero--editorial) .btn-hero {
    padding: 10px 20px;
    border-width: 1px;
    font: 600 .9rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: normal;
}
.hero--home:not(.hero--editorial) .btn-hero--outline {
    background: #f4f8fa;
    color: var(--navy);
    border-color: #e2e8f0;
}
.hero--home:not(.hero--editorial) .btn-hero--outline:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
.hero--home:not(.hero--editorial) .hero__media-frame {
    position: relative;
    display: inline-block;
    width: 88%;
    max-width: 440px;
}
.hero--home:not(.hero--editorial) .hero__media-frame img {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.hero--home:not(.hero--editorial) .hero__dots {
    top: -20px;
    right: -20px;
}
@media (max-width: 992px) {
    .hero--home:not(.hero--editorial) {
        grid-template-columns: 1fr;
        padding-top: calc(var(--header-h) + 1.5rem);
    }
    .hero--home:not(.hero--editorial) .hero__dots {
        right: auto;
        left: -10px;
        top: -10px;
        opacity: .15;
    }
}

/* ---- Sections ---- */
.section { padding: 2rem 0; }
.section--gruppo .section__inner { text-align: center; }
.section--gruppo .section__sub { margin-left: auto; margin-right: auto; }
.section--gruppo .section__cta { justify-content: center; }
.section--dark { background: var(--navy); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.75); }
.section--dark .section__label { color: var(--accent); }
.section--dark .section__sub { color: rgba(255,255,255,.7); }
.section--dark .section__title { color: #fff; }
.section__inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.section__inner--split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
}
.section__inner--split--tight { gap: 0; align-items: stretch; }
.eco-duo-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; align-items: stretch; }
.section__inner--narrow { max-width: 760px; }
.section__inner--wide { max-width: 1400px; }
.section__inner--center { text-align: center; }
.section__label {
    display: inline-flex; align-items: center; gap: .4rem;
    font: 700 .72rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .12em; color: var(--navy);
    text-transform: uppercase; margin-bottom: .25rem;
    background: #e0f2f1;
    padding: .3rem .8rem;
    border-radius: 999px;
    width: fit-content;
}
.section__title { margin-bottom: .25rem; margin-top: 0; }
.section__sub   { color: var(--muted); font-size: 1.05rem; margin-bottom: 2.5rem; max-width: 680px; }
#servizi-main .section__sub { max-width: none; }
.section__sub--accent { color: var(--accent); font-weight: 600; }
.section__text  { color: var(--muted); margin-bottom: 0; }
.section__subtitle { font-size: 1.1rem; margin: 3rem 0 1.5rem; }
.section__cta   { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.section__label--right { display: block; text-align: right; }

/* ---- Cards ---- */
.cards { display: grid; gap: 1.5rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card {
    background: var(--light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    border: 1px solid rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ============================================================
   SISTEMA PANEL — struttura condivisa per tutte le card
   Struttura + spaziatura: .panel
   Sub-element: .panel__icon  .panel__header  .panel__title  .panel__text  .panel__btn
   Colore (solo colore): .panel--light  .panel--navy  .panel--accent
   Bordo superiore:      .panel--top-accent  .panel--top-navy
   Hover:                .panel--hoverable
   ============================================================ */
.panel {
    display: flex; flex-direction: column; gap: .75rem;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
}
.panel__icon {
    width: 52px; height: 52px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.panel__icon ion-icon { font-size: 1.6rem; }
.panel__header { display: flex; align-items: center; justify-content: space-between; }
.panel__header > ion-icon { font-size: 2.2rem; }
.panel__title { font-size: 1.5rem; font-weight: 700; margin: 0; line-height: 1.2; }
.panel__text  { font-size: .95rem; line-height: 1.5; margin: 0; }
.panel__btn   { align-self: flex-start; }

/* Hover */
.panel--hoverable { transition: transform .2s, box-shadow .2s, border-color .25s; }
.panel--hoverable:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.panel--hoverable.panel--top-accent:hover { border-color: var(--accent); }
.panel--hoverable.panel--top-navy:hover   { border-color: var(--navy); }

/* Light */
.panel--light { background: #fff; border: 1px solid rgba(0,88,102,.12); }
.panel--light .panel__icon                { background: rgba(0,88,102,.06); }
.panel--light .panel__icon ion-icon,
.panel--light .panel__header > ion-icon   { color: var(--navy); }
.panel--light .panel__title               { color: var(--navy); }
.panel--light .panel__text                { color: var(--muted); }

/* Navy */
.panel--navy { background: var(--navy); }
.panel--navy .panel__icon                 { background: rgba(255,255,255,.1); }
.panel--navy .panel__icon ion-icon        { color: #fff; }
.panel--navy .panel__title                { color: #fff; }
.panel--navy .panel__text                 { color: rgba(255,255,255,.75); }

/* Accent / Teal */
.panel--accent { background: var(--accent); }
.panel--accent .panel__icon               { background: rgba(255,255,255,.15); }
.panel--accent .panel__icon ion-icon      { color: #fff; }
.panel--accent .panel__title              { color: #fff; }
.panel--accent .panel__text               { color: rgba(255,255,255,.85); }
.panel--accent .section__label            { color: rgba(255,255,255,.75); background: rgba(255,255,255,.15); }
.panel--accent .btn-hero                  { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.panel--accent .btn-hero:hover            { background: #fff; color: var(--accent); border-color: #fff; }

/* Bordo superiore colorato */
.panel--top-accent { border-top: 3px solid var(--accent); }
.panel--top-navy   { border-top: 3px solid var(--navy); }

.card--gruppo {
    background: #fff;
    border: 1px solid rgba(0,88,102,.12);
    border-top: 3px solid var(--accent);
    transition: transform .2s, box-shadow .2s, border-color .25s;
}
.card--gruppo:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.card--highlight {
    background: #fff;
    border: 1px solid rgba(0,88,102,.12);
    border-top: 3px solid var(--navy);
    transition: transform .2s, box-shadow .2s, border-color .25s;
}
.card--highlight:hover {
    border-color: var(--navy);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.card--highlight h3, .card--highlight p { color: inherit; }
.card--eco ion-icon { font-size: 2rem; color: var(--accent); margin-bottom: 1rem; }
.card--gruppo .card__icon-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card--gruppo .card__icon-row ion-icon { font-size: 2.2rem; color: var(--navy); }
.card__tag { font: 600 .7rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; letter-spacing: .1em; color: var(--muted); }
.card--highlight .card__tag { color: rgba(255,255,255,.6); }
.card__title { margin-bottom: .5rem; font-size: 1.5rem; color: var(--navy); }
.card__text  { font-size: .9rem; }

.card--valore { text-align: center; }
.card--valore img { width: 60px; height: 60px; object-fit: contain; margin: 0 auto 1rem; }
.card--valore h4 { margin-bottom: .5rem; }
.valore-num { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 1.1rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; margin: 0 auto 1rem; }

/* ---- Servizi quote ---- */
.servizi-quote {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 3rem;
}
.servizi-quote__mark {
    display: block;
    font-size: 5rem;
    line-height: .6;
    color: rgba(0,88,102,.15);
    font-family: Georgia, serif;
    margin-bottom: 1rem;
    letter-spacing: -.1em;
}
.servizi-quote__text {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--text);
    font-weight: 500;
}
.servizi-quote__text strong, .servizi-quote__text em {
    color: var(--accent);
    font-style: italic;
    font-weight: 700;
}
/* ---- Servizi list (home) ---- */
.servizi-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.servizio-item {
    padding: 2rem;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0,88,102,.12);
    border-top: 3px solid var(--accent);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0;
    align-items: start;
    transition: transform .2s, box-shadow .2s, border-color .25s;
}
.servizio-item:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.servizio-num {
    font: 800 2.5rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: rgba(10,22,40,.08);
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    align-self: center;
}
.servizio-icon {
    font-size: 1.8rem;
    color: var(--accent);
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
}
.servizio-item h3 { grid-column: 1 / -1; margin-top: .8rem; margin-bottom: .5rem; }
.servizio-item p  { grid-column: 1 / -1; }
.servizio-item .link-more { grid-column: 1 / -1; }
.link-more { display: inline-flex; align-items: center; gap: .3rem; font: 600 .85rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; color: var(--navy); margin-top: 1rem; }
.link-more:hover { color: var(--accent); text-decoration: underline; }

/* ---- Servizi cards ---- */
.servizi-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.servizio-card {
    background: var(--light); border-radius: var(--radius-lg);
    padding: 2rem; border: 1px solid rgba(0,0,0,.06);
    position: relative; overflow: hidden;
}
.servizio-card__num {
    font: 800 3.5rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: rgba(10,22,40,.05);
    position: absolute; top: 1rem; right: 1.5rem;
}
.servizio-card ion-icon { font-size: 2rem; color: var(--accent); margin-bottom: 1rem; }
.servizio-card h3 { margin-bottom: .5rem; }
.servizio-card p  { font-size: .9rem; margin-bottom: 1rem; }
.check-list { display: flex; flex-direction: column; gap: .4rem; }
.check-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text); }
.check-list li ion-icon { color: #22c55e; flex-shrink: 0; }
.check-list--inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem 0; }
.check-list--inline li { color: rgba(255,255,255,.85); }

/* ---- Twin Mix flow ---- */
.twinmix-flow {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin: 2rem 0;
}
.twinmix-flow__item, .twinmix-flow__plus, .twinmix-flow__result {
    display: flex; align-items: center; gap: .5rem;
    font: 700 .85rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; letter-spacing: .08em;
}
.twinmix-flow__item   { color: rgba(255,255,255,.8); }
.twinmix-flow__plus   { color: var(--accent); }
.twinmix-flow__arrow  { color: rgba(255,255,255,.4); font-size: 1.5rem; }
.twinmix-flow__result { color: #22c55e; font-size: 1.2rem; }

.twinmix-flow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(255,255,255,.1);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.twinmix-flow-box__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font: 700 .68rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .1em;
    color: rgba(255,255,255,.8);
}
.twinmix-flow-box__icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: rgba(255,255,255,.85);
}
.twinmix-flow-box__sep {
    color: var(--accent);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}
.twinmix-flow-box__sep--arrow {
    color: rgba(255,255,255,.35);
}
.twinmix-flow-box__item--result { color: #fff; }
.twinmix-flow-box__item--result span { color: #fff; font-weight: 800; }
.twinmix-flow-box__icon--filled {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 50%;
    color: #fff;
}

.twinmix__content {
    background: #fff;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border: 1px solid rgba(0,88,102,.12);
    border-right: none;
}
.twinmix__card {
    background: var(--navy);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    position: relative;
    overflow: hidden;
}
.twinmix__card-bg-icon {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    font-size: 14rem;
    color: rgba(255,255,255,.07);
    pointer-events: none;
    line-height: 1;
}
.section--twinmix .section__inner--split { gap: 0; align-items: stretch; }
.twinmix__content .btn-hero {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    align-self: flex-start;
}
.twinmix__checklist  { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.twinmix__checklist li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); font-size: .95rem; }
.twinmix__checklist li ion-icon { color: #fff; font-size: 1.1rem; flex-shrink: 0; }

/* ---- Timeline interattiva ---- */
.timeline-split { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem; align-items: start; }

.timeline-split__nav { position: relative; display: flex; flex-direction: column; }
.timeline-split__nav::before { content: ''; position: absolute; left: .55rem; top: .6rem; bottom: .6rem; width: 2px; background: rgba(0,88,102,.15); }

.timeline-split__item { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; cursor: pointer; position: relative; }
.timeline-split__dot { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid rgba(0,88,102,.3); background: #fff; flex-shrink: 0; margin-top: .15rem; transition: background .2s, border-color .2s; }
.timeline-split__item.is-active .timeline-split__dot { background: var(--navy); border-color: var(--navy); }
.timeline-split__meta { display: flex; flex-direction: column; gap: .15rem; }
.timeline-split__year { font: 800 1.1rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; color: var(--muted); transition: color .2s; }
.timeline-split__tag { font: 700 .65rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; transition: color .2s; }
.timeline-split__item.is-active .timeline-split__year { color: var(--navy); }
.timeline-split__item.is-active .timeline-split__tag  { color: var(--accent); }
.timeline-split__item:not(.is-active):hover .timeline-split__year { color: var(--navy); opacity: .6; }

.timeline-split__content { min-height: 200px; }
@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes panelFadeOut {
    from { opacity: 1; transform: translateY(0)     scale(1);   }
    to   { opacity: 0; transform: translateY(-14px) scale(.98); }
}

.timeline-split__panel { display: none; background: #fff; border: 1px solid rgba(0,88,102,.1); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow); }
.timeline-split__panel.is-active  { display: block; animation: panelFadeIn  .45s cubic-bezier(.22,1,.36,1) both; }
.timeline-split__panel.is-leaving  { display: block; animation: panelFadeOut .22s cubic-bezier(.55,0,.1,1)  both; pointer-events: none; }
.timeline-split__panel h3 { font-size: 1.3rem; color: var(--navy); margin-bottom: 1rem; }
.timeline-split__panel p { color: var(--muted); line-height: 1.7; }

/* ---- Timeline (legacy - mantenuta per compatibilità) ---- */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 2.5rem; }
.timeline::before { content: ''; position: absolute; left: .75rem; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: .3; }
.timeline__item { position: relative; padding: 0 0 2.5rem 1.5rem; }
.timeline__year {
    font: 800 .8rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; color: var(--accent);
    background: var(--light); border: 2px solid var(--accent);
    padding: .2rem .6rem; border-radius: 999px;
    position: absolute; left: -2.5rem; top: .2rem;
}
.timeline__item h3 { margin-bottom: .4rem; }

/* ---- Horizontal process steps (servizi metodo) ---- */
.process-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: 2.5rem;
}
.process-step {
    background: #fff;
    border: 1px solid rgba(0,88,102,.1);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    position: relative;
    text-align: center;
}
.process-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font: 700 .65rem/1 'Century Gothic','CenturyGothic',AppleGothic,'Trebuchet MS',sans-serif;
    letter-spacing: .08em;
    margin: 0 auto .85rem;
}
.process-step--navy .process-step__num { background: var(--navy); }
.process-step__phase {
    font: 700 .62rem/1 'Century Gothic','CenturyGothic',AppleGothic,'Trebuchet MS',sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); display: block; margin-bottom: .5rem;
}
.process-step--navy .process-step__phase { color: var(--navy); }
.process-step ion-icon { font-size: 1.8rem; color: var(--accent); margin-bottom: .75rem; display: block; margin-left: auto; margin-right: auto; }
.process-step--navy ion-icon { color: var(--navy); }
.process-step h3 { font-size: 1rem; margin-bottom: .5rem; }
.process-step p  { font-size: .85rem; color: var(--text-muted, #64748b); line-height: 1.5; margin: 0; }
.process-step__connector {
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 1.4rem;
    opacity: .5;
    padding: 0 .5rem;
}
@media (max-width: 700px) {
    .process-steps { grid-template-columns: 1fr; }
    .process-step__connector { transform: rotate(90deg); padding: .25rem 0; }
}

/* ---- Brand quote ---- */
.section--quote { padding: 1rem 0 3rem; }
.brand-quote { position: relative; text-align: center; padding: 1.5rem 0 0; }
.brand-quote::before { content: '\201C\201C'; display: block; font-size: 5rem; line-height: 1; color: var(--accent); opacity: .18; margin-bottom: -1rem; font-family: Georgia, serif; }
.brand-quote p { font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-style: italic; color: var(--text); line-height: 1.55; }
.brand-quote strong { font-style: normal; font-weight: 800; color: var(--navy); }

/* ---- Mission / Vision ---- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.mv-block { background: var(--light); border-radius: var(--radius-lg); padding: 2rem; }
.mv-block ion-icon { font-size: 2rem; color: var(--accent); margin-bottom: 1rem; }
.mv-block h3 { margin-bottom: .5rem; }

/* ---- Fasi metodo ---- */
.fasi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; }
.fase {
    background: var(--light); border-radius: var(--radius-lg);
    padding: 2rem; position: relative; overflow: hidden;
}
.fase__phase {
    font: 700 .7rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; letter-spacing: .12em;
    color: var(--accent); display: block; margin-bottom: .5rem;
}
.fase__num {
    font: 800 3rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: rgba(10,22,40,.07);
    position: absolute; top: 1rem; right: 1.5rem;
}
.fase h3 { margin-bottom: .5rem; }
.fase__arrow { position: absolute; right: -1rem; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.5rem; z-index: 1; }

/* ---- Brand tags (chip labels inside panels) ---- */
.brand-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
.brand-tag {
    font: 600 .68rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    background: #fff; color: var(--navy);
    padding: .5rem .75rem;
    border-radius: 4px;
    border-left: 3px solid var(--accent);
    border-top: 1px solid rgba(0,88,102,.15);
    border-right: 1px solid rgba(0,88,102,.15);
    border-bottom: 1px solid rgba(0,88,102,.15);
    transition: border-color .18s, box-shadow .18s;
}
.brand-tag:hover {
    border-top-color: rgba(0,88,102,.35);
    border-right-color: rgba(0,88,102,.35);
    border-bottom-color: rgba(0,88,102,.35);
    box-shadow: 0 2px 6px rgba(0,88,102,.08);
}
.brand-tag--dark {
    background: rgba(255,255,255,.15); color: rgba(255,255,255,.85);
    border-left-color: rgba(255,255,255,.5);
}
.brand-tag--navy-dark {
    background: rgba(0,88,102,.1); color: var(--navy);
    border-left-color: var(--navy);
    border-top-color: rgba(0,88,102,.3);
    border-right-color: rgba(0,88,102,.3);
    border-bottom-color: rgba(0,88,102,.3);
    font-weight: 700;
}
.brand-tag--navy-dark:hover {
    border-top-color: rgba(0,88,102,.55);
    border-right-color: rgba(0,88,102,.55);
    border-bottom-color: rgba(0,88,102,.55);
    box-shadow: 0 2px 8px rgba(0,88,102,.15);
}

/* ---- Scroll marquee mini ---- */
.scroll-marquee-mini {
    overflow: hidden;
    min-width: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    margin: .25rem 0;
}
.scroll-marquee-mini__track {
    display: flex;
    gap: .75rem;
    width: max-content;
    animation: marquee-mini 14s linear infinite;
}
.scroll-marquee-mini__track:hover { animation-play-state: paused; }
.marquee-link-mini {
    white-space: nowrap;
    font: 600 .68rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent); text-decoration: none;
    padding: .28rem .7rem; border-radius: 999px;
    background: rgba(0,159,184,.08);
    transition: background .2s, color .2s;
}
.marquee-link-mini:hover { background: var(--accent); color: #fff; }
@keyframes marquee-mini {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---- Brand section ---- */
.section--brand .section__inner--split { gap: 1.5rem; align-items: stretch; }
/* brand__explore: struttura da .panel panel--light panel--hoverable; solo override colori specifici */
.brand__explore .panel__icon              { background: transparent; }
.brand__explore .panel__icon ion-icon     { color: var(--mymatrix-second-color); font-size: 2rem; }
.brand__explore .section__label           { color: var(--mymatrix-second-color); }
.brand__explore .section__label ion-icon  { color: var(--mymatrix-second-color); }

/* ---- Garanzie ---- */
.garanzie-label { font: 600 .75rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; margin-bottom: .75rem; }
.garanzie-list  { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0; }
.garanzie-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--text); }
.garanzie-list li ion-icon { color: var(--accent); }
.garanzie-grid--large { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.garanzie-grid--large li { background: var(--light); padding: .75rem 1rem; border-radius: var(--radius); display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }

/* ---- Contact form ---- */
.contatti-section { padding: 5rem 0; }
.contatti-inner {
    max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start;
}
/* Cella sinistra della griglia: contiene solo il box .lpw-card-box, che si
   prende tutta la larghezza disponibile. */
.contatti-info { min-width: 0; width: 100%; }

/* ---- Box "I nostri riferimenti" ----
   Trasposizione fedele del box .lpw-card-box della versione precedente del
   sito (assets/css/style.css dello stato 14/04/26, righe 3874-4040). Le
   variabili colore dell'originale coincidono con quelle attuali
   (--mymatrix-color = --navy #005866, --mymatrix-second-color = --accent
   #009FB8), quindi qui sono solo rinominate. Misure lasciate in px come
   nell'originale, per non introdurre scarti di arrotondamento. */
.lpw-card-box {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    width: 100%;
    box-sizing: border-box;
    display: block;
}
/* Nell'originale era un h3 .lp-whistle-h2 con font-size e margine forzati
   inline: qui la somma dei due è una classe sola. Nero pieno come l'originale
   (non var(--text), che è un quasi-nero). */
.lpw-card-box__title { font-size: 1.4rem; font-weight: 700; color: #000; margin-bottom: 25px; }

/* Lista dei riferimenti */
.lpw-clean-list { display: flex; flex-direction: column; gap: 25px; }
.lpw-clean-item { display: flex; align-items: flex-start; gap: 15px; }
.lpw-clean-icon {
    width: 45px; height: 45px;
    background-color: #f4f8fa;
    color: var(--navy);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.lpw-clean-text { display: flex; flex-direction: column; padding-top: 2px; }
/* Colore del sito (--muted) invece del #94a3b8 dell'originale: unico scarto
   voluto rispetto al riferimento. */
.lpw-label {
    display: block;
    font-size: .75rem; text-transform: uppercase;
    color: var(--muted); font-weight: 700; letter-spacing: .5px;
    margin-bottom: 3px;
}
.lpw-clean-text p,
.lpw-clean-text a {
    margin: 0;
    font-size: 1.05rem; color: #1e293b; font-weight: 600; line-height: 1.4;
    text-decoration: none;
}
.lpw-link-reset { transition: color .2s; }
.lpw-link-reset:hover { color: var(--accent); }

/* Pulsante WhatsApp: bianco con bordo verde, si riempie al passaggio del
   mouse (l'originale era così; il vecchio .btn-whatsapp era invece verde
   pieno e largo quanto il testo). */
.lpw-whatsapp-custom-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 20px;
    background-color: #fff;
    color: #25D366;
    border: 1px solid #25D366;
    border-radius: 50px;
    font-weight: 600; font-size: .9rem;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
    width: 100%;
    box-sizing: border-box;
}
.lpw-whatsapp-custom-btn:hover {
    background-color: #25D366; color: #fff;
    box-shadow: 0 4px 12px rgba(37,211,102,.2);
}
.lpw-whatsapp-custom-btn svg { font-size: 1.3rem; flex-shrink: 0; }

/* Separatore prima del pulsante WhatsApp e prima dell'accordion legale */
.lpw-legal-separator-box { border-top: 1px solid #eef2f6; padding-top: 20px; }
.lpw-legal-separator-box--whatsapp { margin: 20px 0; }

/* Accordion "Dati Societari e Legali": <details> nativo, nessun JS */
.lpw-legal-accordion-final summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 0;
    transition: opacity .2s;
}
.lpw-legal-accordion-final summary:hover { opacity: .8; }
.lpw-legal-accordion-final summary::-webkit-details-marker { display: none; }
.lpw-legal-summary {
    display: flex; align-items: center; gap: 10px;
    font-weight: 600; color: var(--navy); font-size: .9rem;
}
.lpw-legal-accordion-final .arrow { transition: transform .3s; color: var(--navy); }
.lpw-legal-accordion-final[open] summary .arrow { transform: rotate(180deg); }

.lpw-legal-content-final {
    margin-top: 15px;
    font-size: .85rem; color: #555;
    background: #f8fafc;
    border-radius: 10px;
    padding: 15px;
}
.legal-block-final { margin-bottom: 5px; }
.legal-block-final strong { display: block; color: #333; margin-bottom: 5px; font-size: .9rem; }
.legal-row {
    display: flex; justify-content: space-between;
    margin-bottom: 3px;
    border-bottom: 1px dotted #e2e8f0;
    padding-bottom: 2px;
}
.legal-row span { color: #64748b; font-weight: 500; }
.legal-divider-final { height: 1px; background: #e2e8f0; margin: 15px 0; }
.legal-note { font-style: italic; color: #94a3b8; font-size: .75rem; text-align: right; margin-top: 5px; }
/* Il titolo del form e quello del box "I nostri riferimenti" sono la stessa
   cosa e devono restare identici: una regola sola per entrambi, così non
   possono più divergere. */
.lpw-card-box__title,
.contatti-form-heading { font-size: 1.4rem; font-weight: 700; color: #000; margin: 0 0 25px; }
/* Il box a fianco ha padding 40px e bordo 1px: il titolo del form deve
   scendere della somma dei due, altrimenti resta più in alto di "I nostri
   riferimenti". Su mobile le colonne sono impilate e il padding viene
   azzerato (style-mobile.css). */
.contatti-form-heading { padding-top: calc(40px + 1px); }

/* .form-stack è l'alias neutro della stessa pila di campi: la usa il form
   della newsletter, che non sta nella pagina contatti e con il nome
   .contatti-form risulterebbe fuorviante per chi lo cerca. Nessuna regola
   duplicata: sono lo stesso selettore. */
.contatti-form, .form-stack { display: flex; flex-direction: column; gap: 1.25rem; }
/* Necessario: "display:flex" qui sopra batte il display:none che il browser
   applica all'attributo hidden, quindi senza questa riga il form non si
   nasconde a invio riuscito e la conferma gli comparirebbe sotto. */
.contatti-form[hidden], .form-stack[hidden] { display: none; }
.contatti-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ---- Campi con etichetta sopra ----
   Prima l'etichetta stava dentro al campo e saliva al focus (.field-float):
   con il box dei riferimenti a fianco, che ha le sue etichette sopra il
   valore, l'etichetta sopra è più coerente e si legge sempre. */
.field-stacked { display: flex; flex-direction: column; gap: .4rem; }
.field-stacked__label { font-size: .9rem; font-weight: 600; color: var(--muted); }
.field-stacked input, .field-stacked textarea, .field-stacked select {
    width: 100%; box-sizing: border-box;
    padding: .7rem .9rem;
    border: 1px solid #d1d5db; border-radius: var(--radius);
    font: .9rem/1.5 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; color: var(--text);
    background: #fff; outline: none;
    transition: border-color .2s;
}
.field-stacked input:focus, .field-stacked textarea:focus, .field-stacked select:focus { border-color: var(--blue); }
/* Messaggio più basso di prima (era min-height 120px con rows=5). */
.field-stacked textarea { min-height: 80px; resize: vertical; }
/* appearance:none serve a togliere lo stile nativo, ma da sola lasciava il
   menu senza nessuna freccia, indistinguibile da un campo di testo. Stessa
   freccia disegnata dei filtri dell'editoriale. */
.field-stacked select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.9rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005866' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.05rem, #fff;
    cursor: pointer;
}
.form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-privacy { display: flex; align-items: flex-start; gap: .75rem; font-size: .78rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.form-privacy input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent); }
.form-privacy a { color: var(--accent); }
/* ── Validazione form: campo non valido ──
   La classe .field-error la mette js/main.js direttamente su input/textarea/
   select (e su .form-privacy per la checkbox), quindi qui cambia solo il
   contenitore. */
.field-stacked input.field-error,
.field-stacked textarea.field-error,
.field-stacked select.field-error { border-color: #c20330 !important; background: rgba(194,3,48,.06) !important; }
/* :has() e non "~": l'etichetta adesso PRECEDE il campo nel markup, e non
   esiste un combinatore per il fratello precedente. Il sito usa già :has()
   per il menu mobile in questo stesso foglio. */
.field-stacked:has(.field-error) .field-stacked__label { color: #c20330; }
.form-privacy.field-error { color: #c20330; }
.form-privacy.field-error input[type="checkbox"] { outline: 2px solid #c20330; outline-offset: 2px; }

/* ── Conferma di invio del form ──
   Sostituisce il form a invio riuscito, al posto del toast in basso a destra
   (che resta come ripiego se questo blocco non c'è nella pagina). */
.form-success {
    /* Ritardo del ricaricamento automatico, dichiarato qui una volta sola:
       lo usa l'animazione della barra qui sotto e lo rilegge js/main.js con
       getComputedStyle. Una variabile e non la durata dell'animazione perché
       prefers-reduced-motion azzera l'animazione ma non deve toccare il
       ricaricamento. */
    --form-success-delay: 6s;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}
.form-success[hidden] { display: none; }
.form-success__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(37,211,102,.12); color: #1a9e4b;
    margin-bottom: 1.25rem;
}
.form-success__icon .material-symbols-outlined { font-size: 2.1rem; }
.form-success__title { font-size: 1.4rem; font-weight: 700; color: #000; margin: 0 0 .6rem; }
.form-success__text { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.5rem; max-width: 42ch; }
.form-success__note { font-size: .8rem; color: var(--muted); margin: 0 0 .75rem; }
/* La barra si riempie esattamente nel tempo che manca al ricaricamento. */
.form-success__bar { width: 100%; max-width: 220px; height: 4px; background: #eef2f6; border-radius: 999px; overflow: hidden; }
.form-success__bar span {
    display: block; height: 100%; width: 0; background: var(--accent);
    animation: formSuccessBar var(--form-success-delay) linear forwards;
}
@keyframes formSuccessBar { from { width: 0; } to { width: 100%; } }
/* Chi ha chiesto meno animazioni vede la barra già piena; il ricaricamento
   avviene comunque, perché il ritardo sta nella variabile e non qui. */
@media (prefers-reduced-motion: reduce) {
    .form-success__bar span { animation: none; width: 100%; }
}
/* Dentro la modale la conferma è già in una scatola bianca (il box del
   dialog): senza questa variante sarebbe una scatola nella scatola. */
.form-success--piatta { background: none; border: 0; box-shadow: none; padding: 0; }
/* Pagine di esito (conferma e disiscrizione newsletter): sono la prima cosa
   della pagina, quindi senza questo margine finirebbero sotto l'header fisso. */
.section--esito { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 5rem; }

/* Errore di caricamento della lista articoli. Sostituisce un riquadro che era
   scritto in stile inline e che stampava a video il messaggio dell'eccezione. */
.editorial-errore {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 3rem 1.5rem;
    background: var(--light); border-radius: var(--radius-lg);
    color: var(--muted);
}
.editorial-errore .material-symbols-outlined { font-size: 2.25rem; color: #c20330; }
.editorial-errore strong { font-size: 1.05rem; color: var(--text); }
.editorial-errore p { margin: 0; font-size: .9rem; }

/* ── Modale (dialog nativo) ──
   showModal() mette l'elemento nel "top layer" del browser, disegnato sopra
   qualunque stacking context: nessun z-index da dichiarare qui, e vince
   comunque su header fisso (100), toast (9999) e banner cookie.
   display:flex per centrare la scatola; serve l'override su [open] perché la
   regola dell'user agent dà display:block al dialog aperto. */
.mbc-dialog {
    padding: 0; border: 0; background: none;
    max-width: 100%; max-height: 100%;
    width: 100%; height: 100%;
}
.mbc-dialog[open] { display: flex; align-items: center; justify-content: center; }
.mbc-dialog::backdrop { background: rgba(0, 30, 35, .55); backdrop-filter: blur(2px); }
.mbc-dialog__box {
    position: relative;
    width: min(46rem, 100%);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
/* Stessa forma dei pulsanti tondi dello slider, riusata senza ridichiararla. */
.mbc-dialog__close {
    position: absolute; top: 1rem; right: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    border: 1px solid rgba(0,88,102,.18); background: #fff; color: var(--navy);
    cursor: pointer; transition: background .15s, color .15s;
}
.mbc-dialog__close:hover { background: var(--navy); color: #fff; }
.mbc-dialog__head { margin-bottom: 2rem; padding-right: 2.5rem; }
.mbc-dialog__title { font-size: 1.4rem; font-weight: 700; color: #000; margin: 0 0 .6rem; }
.mbc-dialog__sub { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0; }
/* Il fondo non deve scorrere dietro al backdrop: showModal() rende inerte il
   documento sotto ma non gli impedisce di scorrere.
   La regola reagisce direttamente all'attributo open del dialog, senza
   nessuna classe messa e togliata da JS: lo stato vive in un posto solo — il
   dialog stesso — e non può andare fuori sincrono lasciando la pagina
   bloccata se un evento di chiusura non arriva.
   Sta su <html> e non su <body> perché nella maggior parte dei casi è <html>
   l'elemento che scorre: con overflow:hidden solo su body la rotellina
   continuerebbe a muovere la pagina. */
html:has(dialog.mbc-dialog[open]) { overflow: hidden; }

.btn-submit { width: 100%; justify-content: center; font-size: .95rem; padding: .85rem 1.5rem; }
.btn-pill { border-radius: 999px; }

/* ---- Footer ---- */
.main-footer {
    background: #f8fafc;
    border-top: 1px solid #eef2f6;
    padding: 80px 0 30px;
    margin-top: 60px;
}
.footer-inner {
    max-width: 1400px; margin: 0 auto; padding: 0 1.5rem 50px;
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px;
}

/* 1. Brand e garanzie */
.footer-logo-link { display: inline-block; margin-bottom: 20px; }
.footer-logo { height: 45px; display: block; transition: transform .2s ease; }
.footer-logo-link:hover .footer-logo { transform: scale(1.08); }
.footer-tagline { font-size: 1rem; color: #475569; line-height: 1.6; margin-bottom: 25px; max-width: 90%; }

.footer-garanzie-card {
    background: #fff; border: 1px solid #eef2f6;
    padding: 20px; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.02);
}
.footer-garanzie-card__title {
    display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 12px; letter-spacing: .5px;
}
.footer-garanzie-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-garanzie-card__list li { display: flex; align-items: center; gap: 10px; color: #334155; font-size: .85rem; font-weight: 700; }
.footer-garanzie-card__list .material-symbols-outlined { color: var(--accent); font-size: 1.3rem; flex-shrink: 0; }

/* 2 & 3. Navigazione */
.footer-nav__title {
    font-size: 1rem; font-weight: 800; color: #1e293b; margin-bottom: 20px;
    text-transform: uppercase; letter-spacing: .5px;
}
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 12px; }
.footer-nav a {
    color: #64748b; font-size: .95rem; font-weight: 500; text-decoration: none;
    transition: color .2s, transform .2s; display: inline-block;
}
.footer-nav a:hover { color: var(--navy); transform: translateX(4px); }
.footer-mob-chev { display: none; }

/* 4. Resta in contatto */
.footer-contact__head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.footer-contact__icon {
    width: 40px; height: 40px; flex-shrink: 0; font-size: 1.4rem;
    background: #f0fdfa; color: var(--accent); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.footer-contact__head .footer-nav__title { margin-bottom: 0; color: #1e293b; }
.footer-contact p { font-size: .95rem; line-height: 1.5; color: #64748b; margin-bottom: 20px; }

/* Bottoni social: pillole impilate a tutta larghezza */
.footer-social { display: flex; flex-direction: column; gap: 12px; }
.footer-social__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box; padding: 10px 24px;
    border-radius: 50px; font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: all .3s ease;
}
.footer-social__btn .material-symbols-outlined { font-size: 1.3rem; }
.footer-social__btn--linkedin { background: #fff; color: #0077b5; border: 1px solid #cbd5e1; }
.footer-social__btn--linkedin:hover { background: #f0f7fb; border-color: #0077b5; transform: translateY(-2px); }
.footer-social__btn--telegram { background: #24A1DE; color: #fff; border: 1px solid #24A1DE; }
.footer-social__btn--telegram:hover { filter: brightness(.95); transform: translateY(-2px); }
/* Stesso lilla del pulsante nell'header: è lo stesso link, deve riconoscersi. */
.footer-social__btn--editoriale { background: var(--lilla); color: #fff; border: 1px solid var(--lilla); }
.footer-social__btn--editoriale:hover { filter: brightness(.95); transform: translateY(-2px); }

/* Barra legale uniforme (nessuna stanghetta, tutto identico) */
.footer-bottom {
    max-width: 1250px; margin: 0 auto; padding: 30px 1.5rem 0;
    border-top: 1px solid #eef2f6;
}
.footer-legal-flex {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px 20px;
    font-size: .85rem; font-weight: 400; color: #64748b;
}
.footer-legal-flex a { color: #64748b; text-decoration: underline; }
.footer-legal-flex a:hover { color: var(--navy); }

/* ---- Toast ---- */
.mbc-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: .75rem; }
.mbc-toast {
    background: #1e293b; color: #fff; border-radius: var(--radius);
    padding: 1rem 1.25rem; box-shadow: var(--shadow-lg);
    display: flex; gap: .75rem; align-items: flex-start;
    max-width: 360px; min-width: 240px;
    opacity: 0; transform: translateX(12px);
    transition: opacity .3s, transform .3s;
}
.mbc-toast.is-visible { opacity: 1; transform: none; }
.mbc-toast--success { border-left: 4px solid #22c55e; }
.mbc-toast--error   { border-left: 4px solid #ef4444; }
.mbc-toast--info    { border-left: 4px solid var(--accent); }
.mbc-toast__close { background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; font-size: 1.1rem; flex-shrink: 0; line-height: 1; }
.mbc-toast__msg   { font-size: .9rem; }

/* ---- Section CTA ---- */
.section--cta { background: var(--light); }

/* ---- CTA Card (brand page) ---- */
.section--cta-card { padding-bottom: 4rem; }
.cta-card { background: var(--navy); border-radius: var(--radius-lg); padding: 4rem 3rem; text-align: center; }
.cta-card__title { font-size: clamp(1.4rem, 3vw, 2rem); color: #fff; margin-bottom: 1rem; }
.cta-card__sub { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 560px; margin: 0 auto 2rem; }
.cta-card__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 2rem; border-radius: 999px; border: 2px solid rgba(255,255,255,.5); color: #fff; font: 700 .95rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif; transition: background .2s, border-color .2s; }
.cta-card__btn:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ===== RETICA PAGE ===== */

/* Logo strip */
.retica-logo-strip {
    overflow: hidden;
    border-top: 1px solid rgba(0,88,102,.08);
    border-bottom: 1px solid rgba(0,88,102,.08);
    padding: 1.1rem 0;
    background: #fff;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.retica-logo-strip__track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: marquee-mini 22s linear infinite;
}
.retica-logo-item {
    font: 600 .85rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .06em;
    color: rgba(0,88,102,.35);
    white-space: nowrap;
    text-transform: uppercase;
}
.retica-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(.55);
    transition: filter .25s;
    flex-shrink: 0;
}
.retica-logo-img:hover { filter: grayscale(0) opacity(1); }

/* Retica badge chip */
.retica-badge {
    display: inline-block;
    font: 700 .62rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .1em; text-transform: uppercase;
    background: rgba(0,159,184,.1); color: var(--accent);
    padding: .28rem .7rem; border-radius: 999px;
    margin-top: auto;
}
.retica-badge--navy  { background: rgba(0,88,102,.1); color: var(--navy); }
.retica-badge--white { background: rgba(255,255,255,.2); color: #fff; }
.retica-badge--sm    { font-size: .58rem; }

/* Pulse dot (live/active indicator) */
.pulse-dot {
    display: inline-block;
    width: 8px; height: 8px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}
.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(34,197,94,.45);
    animation: pulse-ring 1.6s ease-out infinite;
}
@keyframes pulse-ring {
    0%   { transform: scale(.5); opacity: .9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* CoG layout */
.cog-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    align-items: stretch;
}
.cog-capofila-panel {
    height: 100%;
}
.cog-aderenti {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 768px) {
    .cog-wrapper { grid-template-columns: 1fr; }
    .cog-aderenti { grid-template-columns: repeat(2, 1fr); }
}

/* Retica list label */
.retica-list-label {
    font: 700 .7rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--navy); opacity: .6;
    margin: 0 0 .4rem;
}

/* Network rows (Comitati & Partner section) */
.retica-network-row {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 2rem;
    align-items: start;
    padding: 2rem;
    background: #fff;
    border: 1px solid rgba(0,88,102,.1);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}
.retica-network-row:last-child { margin-bottom: 0; }
.retica-network-row__info { display: flex; flex-direction: column; gap: .25rem; }
.retica-network-row__tags { display: flex; flex-direction: column; gap: .5rem; padding-top: .25rem; }
@media (max-width: 700px) {
    .retica-network-row { grid-template-columns: 1fr; }
}

/* Member tag list */
.retica-member-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.retica-member-list span {
    font: 500 .75rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.15);
}

/* ---- Dot pattern decorative ---- */
.hero__dots {
    position: absolute; top: 4rem; right: 2rem;
    width: 120px; height: 120px;
    background-image: radial-gradient(var(--accent) 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    opacity: .25;
    pointer-events: none;
}

/* ---- Pill label variants ---- */
.label--teal { background: #e0f2f1; color: var(--navy); }
.label--accent { background: rgba(0,159,184,.12); color: var(--accent); }

/* ---- Trasparenza page ---- */
.section--trasparenza-intro { padding-top: calc(var(--header-h) + 3rem); padding-bottom: 1.5rem; }
.trasparenza-title {
    font: 800 clamp(2rem, 4vw, 3rem)/1.15 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--navy);
    margin: .5rem 0 1.25rem;
}
.trasparenza-title strong { font-weight: 900; }
.trasparenza-sub {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}
.gov-card {
    background: #fff;
    border: 1px solid rgba(0,88,102,.15);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.gov-card--featured { border-color: var(--accent); border-width: 1.5px; }
.gov-card__header { display: flex; align-items: center; gap: .85rem; }
.gov-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: rgba(0,159,184,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--accent);
    flex-shrink: 0;
}
.gov-card--featured .gov-card__icon { background: var(--accent); color: #fff; }
.gov-card__title {
    font: 700 1rem/1.2 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--navy);
    margin: 0;
}
.gov-card__text { color: var(--muted); font-size: .94rem; line-height: 1.65; margin: 0; flex: 1; }
.gov-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-radius: var(--radius);
    border: 1.5px solid rgba(0,88,102,.2);
    background: transparent;
    color: var(--navy);
    font: 600 .8rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
    cursor: pointer;
    margin-top: auto;
}
.gov-card__btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.gov-card__btn--primary {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    border-radius: 999px;
}
.gov-card__btn--primary:hover { background: #004a58; border-color: #004a58; }
.trasparenza-cta-banner {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border: 1px solid rgba(0,88,102,.15);
    border-radius: var(--radius-lg);
    padding: 2rem 2.5rem;
    background: #fff;
}
.trasparenza-cta-banner__icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(0,159,184,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--accent);
    flex-shrink: 0;
}
.trasparenza-cta-banner__content h3 {
    font: 700 1.2rem/1.2 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--navy);
    margin: 0 0 .5rem;
}
.trasparenza-cta-banner__content p { color: var(--text); margin: 0; line-height: 1.65; }
.trasparenza-cta-banner__content a { color: var(--navy); font-weight: 700; }

.privacy-note {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: rgba(0,159,184,.07);
    border: 1px solid rgba(0,159,184,.35);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 0;
}
/* ---- Whistleblowing page ---- */
.wb-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.wb-banner {
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    border-top: 4px solid;
}
.wb-banner--positive {
    background: rgba(0,88,102,.06);
    border-top-color: var(--navy);
}
.wb-banner--negative {
    background: rgba(245,158,11,.07);
    border-top-color: #d97706;
}
.wb-banner__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
    font-size: 1rem;
}
.wb-banner--positive .wb-banner__header { color: var(--navy); }
.wb-banner--positive .wb-banner__header ion-icon { color: var(--accent); font-size: 1.3rem; }
.wb-banner--negative .wb-banner__header { color: #92400e; }
.wb-banner--negative .wb-banner__header ion-icon { color: #d97706; font-size: 1.3rem; }
.wb-banner--positive p { color: var(--navy); margin: 0; font-size: .95rem; line-height: 1.65; }
.wb-banner--negative p { color: #78350f; margin: 0; font-size: .95rem; line-height: 1.65; }

.wb-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 2.5rem;
}
.wb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px;
    padding: 0 1.5rem;
}
.wb-step__num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 1.1rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.wb-step strong { display: block; font-size: .9rem; color: var(--navy); margin-bottom: .35rem; font-weight: 700; }
.wb-step p { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.5; }
.wb-step__line {
    flex: 1;
    height: 1.5px;
    background: rgba(0,88,102,.2);
    margin-top: 23px;
    min-width: 60px;
    max-width: 120px;
}

.wb-platform-card {
    border: 1px solid rgba(0,88,102,.15);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
}
.wb-platform-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(0,88,102,.1);
    gap: 1.5rem;
    flex-wrap: wrap;
}
.wb-platform-card__header h3 {
    font: 700 1.15rem/1.2 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--navy);
    margin: 0 0 .25rem;
}
.wb-platform-card__header p { color: var(--muted); margin: 0; font-size: .95rem; }
.wb-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(0,88,102,.1);
}
.wb-mode { padding: 1.5rem 2rem; }
.wb-mode:first-child { border-right: 1px solid rgba(0,88,102,.1); }
.wb-mode__header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.wb-mode__header ion-icon { font-size: 1.25rem; color: var(--accent); flex-shrink: 0; }
.wb-mode__header strong { font-size: .95rem; color: var(--navy); }
.wb-mode p { color: var(--muted); font-size: .93rem; line-height: 1.65; margin: 0; }
.wb-warning {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: rgba(245,158,11,.08);
    padding: 1rem 2rem;
}
.wb-warning ion-icon { font-size: 1.25rem; color: #d97706; flex-shrink: 0; margin-top: .1rem; }
.wb-warning p { margin: 0; font-size: .93rem; color: #78350f; line-height: 1.6; }
.wb-warning strong { color: #92400e; }

.privacy-note ion-icon {
    font-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: .1rem;
}
.privacy-note p { margin: 0; font-size: .95rem; color: var(--text); line-height: 1.6; }
.privacy-note a { color: var(--navy); font-weight: 700; text-decoration: underline; }

/* ===== EDITORIALE ===== */

/* ---- Hero chiara con statistiche + news in evidenza ---- */
/* Sfondo chiaro a piena larghezza; .hero--editorial dentro resta alla stessa
   larghezza massima e col medesimo padding orizzontale di .section__inner--wide
   (max-width 1400px, 1.5rem), così hero e contenuto sotto sono sempre allineati. */
.editorial-hero-bleed { background: var(--light); }

.hero--editorial {
    background: transparent;
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 2.5rem;
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto;
    /* padding-top include l'altezza dell'header fisso: senza, il menu (position:fixed)
       si sovrappone alla prima riga della hero e taglia la card in evidenza.
       padding-bottom maggiorato per staccare la hero dalla card "in primo piano" sotto. */
    padding: calc(var(--header-h) + 3rem) 1.5rem 4rem;
}
.hero--editorial .hero__content,
.hero--editorial .hero__media { padding: 0; }
.hero--editorial .hero__content,
.hero--editorial .editorial-hero__media { max-width: none; }
.hero--editorial .editorial-hero__media { align-self: center; }

.editorial-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }

.editorial-featured {
    background: #fff;
    border: 1px solid rgba(0,88,102,.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    width: 100%;
}
.editorial-featured__img { height: 170px; }
/* Specificità maggiore di ".hero__media img" (la foto circolare dell'hero
   standard): senza questo reset esplicito, border-radius/aspect-ratio/max-width
   di quella regola "vincono" comunque e deformano l'immagine in un ovale. */
.editorial-hero__media .editorial-featured__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: 0; aspect-ratio: auto; max-width: none; box-shadow: none;
}
.editorial-featured__body { padding: 1.35rem 1.5rem; }
.editorial-featured__tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
.editorial-featured__title { color: var(--text); font-size: 1.15rem; margin-bottom: .6rem; line-height: 1.3; }
.editorial-featured__sub {
    color: var(--muted); font-size: .88rem; line-height: 1.5; margin-bottom: 1rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.editorial-featured__meta { display: flex; align-items: center; gap: 1.25rem; font-size: .8rem; color: var(--muted); margin-bottom: 1.1rem; }
.editorial-featured__meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* ---- Toolbar: ricerca + filtri a pillola ---- */
.editorial-toolbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.editorial-toolbar__title { margin: 0; font-size: 1.3rem; color: var(--text); }
.editorial-toolbar__count { font-size: .85rem; color: var(--muted); }
/* Riga a 3 colonne (+ reset quando c'è almeno un filtro attivo): ricerca
   libera (più ampia) + tendina categoria + tendina tag. Le tre ricerche sono
   indipendenti (ognuna può bastare da sola) ma stando nello stesso <form> si
   combinano quando sono compilate insieme.
   --filter-h tiene tutti i campi esattamente della stessa altezza: prima
   ognuno la ricavava dal proprio padding + contenuto, e i <select> nativi
   risultavano più bassi della barra di ricerca. */
.editorial-toolbar__filters {
    --filter-h: 46px;
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-bottom: 2rem;
}
.editorial-toolbar__filters--reset { grid-template-columns: 2fr 1fr 1fr auto; }
.editorial-search {
    display: flex; align-items: center; gap: .5rem;
    height: var(--filter-h); box-sizing: border-box;
    border: 1px solid rgba(0,88,102,.15); border-radius: var(--radius);
    padding: 0 .35rem 0 1rem; background: #fff;
}
.editorial-search > .material-symbols-outlined { color: var(--muted); font-size: 1.15rem; flex-shrink: 0; }
/* height:100% non è cosmetico: il pseudo-elemento della "x" (qui sotto) è
   confinato nella content-box dell'input, che senza questo è alta quanto una
   riga di testo (~18px). Un tondo più grande di così veniva ritagliato sopra
   e sotto e sembrava un cerchio tagliato. */
.editorial-search input {
    border: none; outline: none; flex: 1; min-width: 0; height: 100%;
    font-size: .9rem; font-family: inherit; color: var(--text); background: transparent;
}
/* Nessuna "x" di svuotamento: quella nativa del browser è una crocetta grigia
   minuscola e stonata, e un pulsante per svuotare non serve — si cancella da
   tastiera. appearance:none la rimuove del tutto (senza, WebKit la disegna
   comunque appena il campo contiene testo). */
.editorial-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    display: none;
}
/* Pulsante circolare pieno invece della sola icona a grandezza testo:
   altrimenti è troppo piccola per leggersi come un bottone cliccabile. */
.editorial-search button {
    background: var(--accent); border: none; flex-shrink: 0;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #fff; transition: background .15s;
}
.editorial-search button .material-symbols-outlined { font-size: .95rem; }
.editorial-search button:hover { background: var(--navy); }
/* appearance:none + freccia disegnata a mano: quella nativa è sottile,
   incollata al bordo destro e cambia forma da un browser all'altro (su mobile
   era vistosamente diversa da desktop). Questa è spessa 3px, navy, e staccata
   1rem dal bordo. Il background-image va prima dello sfondo bianco: sono due
   layer della stessa proprietà, non due dichiarazioni in conflitto. */
.editorial-select {
    width: 100%;
    height: var(--filter-h); box-sizing: border-box;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    border: 1px solid rgba(0,88,102,.15); border-radius: var(--radius);
    padding: 0 2.9rem 0 1.1rem;
    font: 600 .88rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    color: var(--text);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005866' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.05rem, #fff;
    cursor: pointer; outline: none; transition: border-color .15s;
}
.editorial-select:hover, .editorial-select:focus { border-color: var(--accent); }

/* ---- Menu a tendina con elenco stilabile (combobox) ----
   L'elenco voci di un <select> nativo lo disegna il sistema operativo e non è
   raggiungibile dal CSS. Qui il select resta nel form come unica fonte di
   verità (solo nascosto da JS) e accanto viene costruito questo pannello, che
   usa gli stessi bordi, raggi e colori dei campi. Senza JavaScript non viene
   nascosto niente e la tendina nativa resta perfettamente usabile.
   Il trigger riusa .editorial-select per non ridichiararne l'aspetto: cambia
   solo ciò che un <button> non può ereditare da un <select>. */
.editorial-combo { position: relative; min-width: 0; }
.editorial-combo__trigger {
    display: flex; align-items: center;
    text-align: left;
    cursor: pointer;
}
/* Il valore selezionato non deve mai allargare il campo: se è più lungo dello
   spazio viene troncato, non mandato a capo (il campo ha altezza fissa). */
.editorial-combo__valore { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editorial-combo.is-open .editorial-combo__trigger { border-color: var(--accent); }

/* Dentro un form a campi impilati (la modale newsletter) il trigger si allinea
   ai campi che ha accanto, non ai filtri dell'editoriale: --filter-h è
   dichiarata su .editorial-toolbar__filters e fuori da lì non esiste, quindi
   "height: var(--filter-h)" è invalida e il pulsante si accartocciava
   sull'altezza del testo. Qui l'altezza la fa il padding, identico a quello di
   .field-stacked input: stesso padding, stesso font e stesso bordo danno la
   stessa altezza senza fissarla in pixel né qui né lì. */
.field-stacked .editorial-combo__trigger {
    height: auto;
    padding: .7rem 2.9rem .7rem .9rem;
    border-color: #d1d5db;
    font: .9rem/1.5 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
}
/* Stesso colore del focus degli altri campi del form, invece dell'accent dei
   filtri: in una pila di campi identici uno che si illumina di un altro colore
   sembra un errore. */
.field-stacked .editorial-combo__trigger:hover,
.field-stacked .editorial-combo__trigger:focus,
.field-stacked .editorial-combo.is-open .editorial-combo__trigger { border-color: var(--blue); }

.editorial-combo__panel {
    position: absolute; top: calc(100% + .35rem); left: 0; right: 0;
    /* Sopra i campi vicini e le card, sotto header (100) e toast (9999). */
    z-index: 30;
    margin: 0; padding: .35rem; list-style: none;
    max-height: 17rem; overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,88,102,.15); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.editorial-combo__panel[hidden] { display: none; }
.editorial-combo__option {
    padding: .5rem .75rem; border-radius: var(--radius);
    font-size: .88rem; color: var(--text);
    cursor: pointer;
}
/* Una sola resa per il passaggio del mouse e per la voce raggiunta da tastiera
   (aria-activedescendant): sono lo stesso stato per chi guarda. */
.editorial-combo__option:hover,
.editorial-combo__option.is-active { background: var(--light); }
.editorial-combo__option[aria-selected="true"] { color: var(--navy); font-weight: 700; }
.editorial-combo__option[aria-selected="true"]::after {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    float: right; font-size: 1.05rem; font-weight: 400;
}

/* Testo destinato ai soli lettori di schermo. Unica classe di questo tipo nel
   progetto: se ne serve un'altra, riusare questa. */
.u-sr-only {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Azzera tutti e tre i campi in un colpo solo. Compare solo quando c'è almeno
   un filtro attivo (vedi results.php): un reset sempre visibile ma inerte
   sarebbe solo rumore. */
.editorial-filters__reset {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: var(--filter-h); box-sizing: border-box;
    padding: 0 1.1rem;
    border: 1px solid #d64545; border-radius: var(--radius);
    background: #d64545; color: #fff;
    font: 700 .85rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    cursor: pointer; white-space: nowrap;
    transition: color .15s, background .15s;
}
/* Icona in grassetto con un contorno sul glifo, non con l'asse variabile
   "wght": header.php chiede i Material Symbols a peso fisso 400, quindi
   Google Fonts serve un font statico su cui font-weight e
   font-variation-settings non hanno alcun effetto. Chiedere il range
   400..700 lo renderebbe variabile ma il file passerebbe da 328 KB a
   759 KB su tutte le pagine del sito, per una sola icona. currentColor fa
   seguire allo contorno il cambio di colore sull'hover. */
.editorial-filters__reset .material-symbols-outlined {
    font-size: 1.15rem;
    -webkit-text-stroke: .5px currentColor;
}
/* All'inverso al passaggio del mouse: fondo bianco, testo e icona rossi. Il
   bordo resta rosso in entrambi gli stati, così la larghezza non balla. */
.editorial-filters__reset:hover { background: #fff; color: #d64545; }

/* ---- Badge di stato (In evidenza / In primo piano) e badge categoria ----
   Stessa dimensione/padding per tutti, così affiancati risultano armoniosi.
   Icona senza sfondo proprio: il badge stesso è già una pillola colorata. */
.editorial-status-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font: 700 .72rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    padding: .35rem .7rem; border-radius: 999px;
}
.editorial-status-badge__icon { display: inline-flex; align-items: center; }
.editorial-status-badge__icon .material-symbols-outlined { font-size: 1rem; }
.editorial-status-badge--evidenza { background: var(--evidenza-bg); color: var(--evidenza-ink); }
.editorial-status-badge--primo-piano { background: var(--pp-bg); color: var(--pp-ink); }

/* Badge categoria neutro: nessun colore per categoria, così l'attenzione
   resta sul titolo dell'articolo e la griglia non diventa un arcobaleno. */
.editorial-category-badge {
    display: inline-flex; align-items: center;
    font: 600 .72rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    padding: .35rem .7rem; border-radius: 999px;
    color: var(--navy);
    background: var(--light);
    border: 1px solid rgba(0,88,102,.12);
}

/* ---- Layout: griglia articoli ---- */
/* .editorial-layout resta per editoriale/articolo.php (contenuto + sidebar);
   la pagina indice non la usa più: griglia articoli a piena larghezza, 3 per riga. */
.editorial-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; align-items: start; }
/* Griglia ad altezza uniforme: ogni riga stira le card alla stessa altezza
   (align-items:stretch, default di grid); il testo che eccede è troncato da
   -webkit-line-clamp su .editorial-card__excerpt, mai la card si deforma. */
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.editorial-grid > article { height: 100%; }

@keyframes editorialCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.editorial-grid > article.editorial-card--in {
    animation: editorialCardIn .45s ease both;
}
/* .panel ha di suo padding:2.5rem 2rem (pensato per i panel "a testo"): senza
   questo reset l'immagine erediterebbe quel padding invece di riempire la
   card fino ai bordi. .editorial-card__body ha già il proprio padding per il
   testo, quindi qui l'intera card resta a padding 0. */
.editorial-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.editorial-card__img { position: relative; height: 190px; overflow: hidden; flex-shrink: 0; }
.editorial-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.editorial-card__noimg { height: 8px; background: var(--accent); flex-shrink: 0; }
.editorial-card__body { padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; flex: 1; }
/* Titolo nero (non #000 puro: var(--text) è un quasi-nero più morbido),
   con specificità (0,3,0) per vincere in modo affidabile su
   ".panel--light .panel__title" (0,2,0) indipendentemente dall'ordine nel foglio.
   Stesso font-size del titolo della card in evidenza, per uniformità in tutta la pagina. */
.editorial-card .editorial-card__body .panel__title {
    color: var(--text);
    font-size: 1.15rem;
    margin-bottom: .6rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 3rem;
}
.editorial-card__tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
/* Testo della categoria più leggibile sulle card (non sulla card in evidenza
   in hero, che resta più compatta con lo stesso badge). */
.editorial-card__tags .editorial-category-badge { font-size: .8rem; }
.editorial-card__badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font: 700 .72rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    padding: .35rem .7rem; border-radius: 999px;
}
/* Icona leggermente più piccola del testo: a parità di padding, un'icona
   troppo grande fa percepire il badge come più "gonfio" degli altri. */
.editorial-card__badge .material-symbols-outlined { font-size: .9rem; }
.editorial-card__badge--novita { background: rgba(0,159,184,.12); color: #0b6b7c; }
.editorial-card__badge--evidenza { background: var(--evidenza-bg); color: var(--evidenza-ink); }
.editorial-card__badge--primo-piano { background: var(--pp-bg); color: var(--pp-ink); }
.editorial-card__excerpt { font-size: .92rem; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
/* Solo data (sinistra) e tempo di lettura (destra), niente più freccia. */
.editorial-card__footer { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(0,88,102,.1); padding-top: .75rem; }
.editorial-card__footer span { font-size: .72rem; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
/* Data più evidente del tempo di lettura: è il 1° <span> nel markup
   (calendar_month, poi schedule — vedi renderEditorialCard in news-helpers.php). */
.editorial-card__footer span:first-of-type { font-size: .8rem; color: var(--text); }
/* Intera card cliccabile: senza più contenuto visibile (icona/testo rimossi),
   il link stesso diventa l'overlay invece del suo ::after — un elemento in
   meno. position:absolute lo estrae dal flex del footer, quindi non lascia
   un varco nello space-between tra i due <span>. */
.editorial-card { cursor: pointer; }
.editorial-card__footer .link-more { position: absolute; inset: 0; margin: 0; }

/* (L'ancoraggio del badge "valida fino al" sull'immagine è nel blocco
   .article-validity-badge, insieme a quello della copertina del dettaglio:
   erano due regole identiche in due punti del foglio.) */

/* ---- Slider "in primo piano": fino a 4 notizie, 2 visibili per volta ----
   Scorrimento con scroll-snap nativo invece di transform: lo swipe da mobile
   funziona senza codice aggiuntivo e la larghezza delle card la decide il CSS,
   non il JS (che deve solo contare le pagine). */
.editorial-pp-slider { margin-bottom: 2.5rem; }
.editorial-pp-slider__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.1rem;
}
.editorial-pp-slider__nav { display: flex; gap: .5rem; }
.editorial-pp-slider__arrow {
    width: 2.4rem; height: 2.4rem; border-radius: 50%; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0,88,102,.18); background: #fff; color: var(--navy);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.editorial-pp-slider__arrow:hover:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.editorial-pp-slider__arrow:disabled { opacity: .3; cursor: default; }
.editorial-pp-slider__viewport {
    display: flex; gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Barra di scorrimento nascosta: la navigazione avviene con frecce,
       puntini o swipe. */
    scrollbar-width: none; -ms-overflow-style: none;
}
.editorial-pp-slider__viewport::-webkit-scrollbar { display: none; }
/* Tre card per schermata: 3 larghezze + 2 gap = 100% del viewport, così lo
   snap coincide esattamente con una "pagina" di tre notizie. Stessa card
   della griglia (.editorial-card, da renderEditorialCard()): qui serve solo
   la larghezza per lo slider, l'aspetto della card non cambia. */
.editorial-pp-slider__viewport > .editorial-card {
    flex: 0 0 calc((100% - 1.5rem * 2) / 3);
    scroll-snap-align: start;
}
.editorial-pp-slider__dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.25rem; }
.editorial-pp-slider__dot {
    width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
    background: rgba(0,88,102,.22); cursor: pointer;
    transition: background .15s, width .15s;
}
.editorial-pp-slider__dot.is-active { background: var(--navy); width: 22px; border-radius: 999px; }

/* ---- Box "Newsletter" + "Parla con un esperto" ----
   Stessa grafica ovunque compaiano: affiancati sotto la griglia articoli in
   editoriale/index.php (.editorial-ctas__grid, 2 colonne) e impilati nella
   sidebar di editoriale/articolo.php (.editorial-sidebar) — il markup è lo
   stesso, prodotto da renderEditorialCtas() in news-helpers.php, quindi qui
   basta che .editorial-cta si adatti a un contenitore stretto o largo. */
.editorial-ctas { padding-top: 4rem; padding-bottom: 4rem; }
.editorial-ctas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
.editorial-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(0,88,102,.12);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
}
/* Icona in chip, stessa impostazione di .panel__icon (var(--radius),
   flex-centrata) usata per le icone-in-box nel resto del sito, un filo più
   grande per avere più presenza sopra etichetta+titolo. */
.editorial-cta__icon {
    width: 56px; height: 56px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,159,184,.12); color: var(--accent);
    margin-bottom: 1.25rem;
}
.editorial-cta__icon .material-symbols-outlined { font-size: 1.7rem; }
.editorial-cta__title { font-size: 1.4rem; font-weight: 800; line-height: 1.25; color: var(--text); margin-bottom: .75rem; }
.editorial-cta__text { font-size: .95rem; line-height: 1.6; color: var(--muted); margin-bottom: 1.5rem; }
/* margin-top:auto ancora l'azione in fondo: i due box restano allineati
   in basso anche con quantità di testo diverse. */
/* Il pulsante (o il link) resta incollato in basso, così i due box affiancati
   hanno il pulsante alla stessa altezza anche con testi di lunghezza diversa.
   Copre anche il pulsante che apre la modale della newsletter, che è un
   <button> figlio diretto del box. */
.editorial-cta > .btn-hero { margin-top: auto; }
/* (Le regole di .editorial-cta__form sono state rimosse insieme al campo email
   inline del box newsletter, sostituito dal pulsante che apre la modale.) */

/* Variante del box Newsletter: sfondo chiaro (non più navy, "un pugno
   nell'occhio" su un box così grande) per creare una coppia con quello della
   Consulenza invece di due box bianchi identici — l'icona resta nella tinta
   navy per distinguerla da quella (accent) della Consulenza. */
.editorial-cta--newsletter { background: #EDF1F5; border-color: transparent; }
.editorial-cta--newsletter .editorial-cta__icon { background: rgba(0,88,102,.1); color: var(--navy); }

.editorial-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* ===== EDITORIALE — pagina dettaglio articolo ===== */
/* È il primo elemento della pagina (nessun .hero prima): senza questo margine
   resta sotto l'header fisso, che lo copre insieme alla prima riga del navy. */
.article-breadcrumb { padding: calc(var(--header-h) + 1rem) 0 1rem; font-size: .85rem; color: var(--muted); }
.article-breadcrumb a { color: var(--muted); }
.article-breadcrumb a:hover { color: var(--navy); }
.article-breadcrumb ion-icon { font-size: .9em; vertical-align: -1px; margin: 0 .3rem; }

/* Sfondo bianco (non più il gradiente navy): testo scuro, come le altre
   pagine editoriali. */
.article-hero { background: #fff; padding-top: 1rem; padding-bottom: 2rem; }
/* Due righe sotto il breadcrumb, entrambe allineate a sinistra: prima data e
   tempo di lettura, poi tutti i badge (stato + validità). Il margine della
   prima riga vale sia come stacco dai badge sia, quando non ce n'è nessuno,
   come stacco dal titolo. */
.article-hero__meta-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: .85rem; }
.article-hero__tags { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.article-hero__readtime {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .85rem; font-weight: 600; color: var(--muted);
    background: transparent; border: none; padding: .35rem 0;
}

/* Misura unica per i badge del dettaglio articolo, così affiancati non sembrano
   di famiglie diverse. Solo font-size e padding: colori, forma e icone restano
   quelli di ciascuno. Qui stanno le due classi condivise con le card della
   lista e dello slider, che non devono cambiare: da qui i selettori legati al
   contesto. Validità e tag hanno gli stessi valori scritti direttamente nelle
   loro regole, perché nascono solo in questa pagina e non serve sovrascriverli. */
.article-hero__tags .editorial-card__badge,
.article-topics .editorial-category-badge {
    font-size: .85rem;
    padding: .3rem 1rem;
}
/* Il badge di validità risultava più alto degli altri pur avendo lo stesso
   font-size e lo stesso padding. Due cause, entrambe qui: è l'unico che non
   dichiara la line-height nella propria shorthand "font", quindi eredita
   quell'1.6 del body (riga da 21.76px invece di 13.6px), e la sua icona è più
   grande delle altre (1.1rem contro .9rem), il che alza ancora la riga.
   Pareggiati i due valori, i badge tornano identici in altezza.
   Regola limitata al dettaglio: sulle card il badge sta da solo sopra
   l'immagine, dove la differenza non si vede, e quelle non devono cambiare. */
.article-hero__tags .article-validity-badge { line-height: 1; }
.article-hero__tags .article-validity-badge .material-symbols-outlined { font-size: .9rem; }
.article-hero__title { color: var(--text); font-size: clamp(2rem, 4.2vw, 2.75rem); margin-bottom: .75rem; }
.article-hero__sub { color: var(--muted); font-size: 1.25rem; margin-bottom: 1.5rem; }
.article-hero__meta { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.article-hero__meta span { display: inline-flex; align-items: center; gap: .4rem; }

/* Badge "valida fino al". Posizione statica di base: nel dettaglio sta nella
   riga della data accanto ai badge di stato, e sulla card senza immagine sta
   inline nel corpo sopra i tag. */
.article-validity-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fdf3d7; color: #8a6d1d;
    font-size: .85rem; font-weight: 600;
    padding: .3rem 1rem; border-radius: 999px;
}
.article-validity-badge .material-symbols-outlined { font-size: 1.1rem; }
/* Sulle card con immagine il badge le si ancora sopra, in alto a sinistra.
   position:absolute sta qui e non nella regola di base proprio per non
   agganciarlo anche alla card senza immagine, dove finirebbe a coprire il
   titolo (.editorial-card è position:relative). */
.editorial-card__img .article-validity-badge {
    position: absolute; top: .75rem; left: .75rem; z-index: 1;
    box-shadow: var(--shadow);
}
/* Sulle card resta più piccolo: lo spazio a disposizione è molto minore. */
.article-validity-badge--card {
    margin-bottom: .75rem;
    font-size: .7rem; padding: .3rem .7rem;
}
.article-validity-badge--card .material-symbols-outlined { font-size: .95rem; }

/* .article-hero__cover-wrap > .section__inner riusa lo stesso contenitore
   (max-width + padding) di header/breadcrumb/hero, per allinearsi esattamente. */
.article-hero__cover-wrap { margin: 0; }
.article-hero__cover img {
    width: 100%; max-height: 480px; object-fit: cover; display: block;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}

.article-content-section { padding-top: 2rem; }

/* Primo blocco della colonna, sopra il corpo dell'articolo: niente etichetta
   "Condividi", le icone a colore pieno si spiegano da sole. Hairline sotto
   per staccarle dal testo che segue. */
.article-share { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0,88,102,.1); }
/* Un filo di spazio in più dopo "Condividi:" che dal gap della riga, così
   l'etichetta non sembra appartenere al primo pulsante. */
.article-share__label { font-size: .85rem; color: var(--muted); font-weight: 600; margin-right: .2rem; }
/* A riposo è un tondo pieno del colore del servizio; al passaggio del mouse
   si allarga in una pillola bianca con bordo, icona e scritta colorati.
   La scritta non è un tooltip sovrapposto ma parte del pulsante: si espande
   da max-width:0 (l'unica misura che sappia animare senza conoscere in
   anticipo la larghezza del testo — "width:auto" non è interpolabile).
   min-width == height garantisce il cerchio perfetto quando è collassata. */
.article-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 .35rem;
    border-radius: 999px;
    font-size: 1.15rem;
    color: #fff; background: var(--navy); border: 1px solid var(--navy);
    transition: background .2s, color .2s, border-color .2s, padding .25s ease;
    cursor: pointer;
}
/* Icone a misura fissa: il glifo Material e gli <svg> hanno larghezze
   naturali diverse (≈19.4px contro 18.4px) e senza questo i tondi
   risultavano l'uno di due pixel più largo dell'altro, tutti leggermente
   ovali invece che circolari. Con l'icona a 1.15rem la larghezza naturale
   del pulsante resta sotto il min-width, che così detta il cerchio esatto. */
.article-share__btn > svg,
.article-share__btn > .material-symbols-outlined {
    flex-shrink: 0;
    width: 1.15rem; height: 1.15rem;
    display: flex; align-items: center; justify-content: center;
}
/* Un po' di respiro laterale quando la pillola si apre: a riposo il padding
   è minimo, altrimenti il cerchio non sarebbe più tale. */
.article-share__btn:hover, .article-share__btn:focus-visible { padding: 0 .85rem; }
.article-share__btn__label {
    max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
    font: 700 .82rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    transition: max-width .25s ease, opacity .18s ease, margin .25s ease;
}
.article-share__btn:hover .article-share__btn__label,
.article-share__btn:focus-visible .article-share__btn__label {
    max-width: 9rem; opacity: 1; margin: 0 .35rem 0 .45rem;
}
.article-share__btn:hover { background: #fff; color: var(--navy); }
/* Colore proprio di ciascun servizio, non il navy generico del pulsante
   "Copia link": stessa palette già usata per i pulsanti social in footer. */
.article-share__btn--linkedin { background: #0077b5; border-color: #0077b5; }
.article-share__btn--linkedin:hover { background: #fff; color: #0077b5; }
.article-share__btn--telegram { background: #24A1DE; border-color: #24A1DE; }
.article-share__btn--telegram:hover { background: #fff; color: #24A1DE; }
.article-share__btn--whatsapp { background: #25d366; border-color: #25d366; }
.article-share__btn--whatsapp:hover { background: #fff; color: #25d366; }

/* Il contenuto (descrizione_completa) arriva come HTML grezzo dal CRM/AI e
   può portare stili inline propri (color, ecc.): !important dove serve per
   garantire comunque la tipografia del sito, non quella del contenuto. */
.article-body { font-size: 1rem; line-height: 1.8; color: var(--muted); }
.article-body h1, .article-body h2, .article-body h3, .article-body h4,
.article-body strong { color: var(--muted) !important; }
.article-body em { color: var(--muted); }
.article-body p { margin-bottom: 0; }
.article-body ul, .article-body ol { color: var(--muted); margin: 0 !important; }
.article-body li { margin: 0 !important; }

/* Ultimo blocco della colonna, dopo gli allegati: stesso hairline di apertura
   usato da .article-attachments, così i due blocchi in sequenza sono
   tipograficamente identici. */
.article-topics { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,88,102,.1); }
/* (La misura del badge categoria è nel blocco unico dei badge del dettaglio,
   più in alto: qui c'era un font-size:.82rem che, stando dopo, lo vinceva.) */
/* "Categoria:" e "Tag:" davanti ai rispettivi badge: senza etichette sono badge
   in fila e non si capisce dove finisce una cosa e iniziano le altre. Il margine
   sinistro extra rinforza lo stacco tra i due gruppi. */
.article-topics__label { margin-left: .6rem; font-size: .85rem; color: var(--muted); }
/* La prima etichetta apre la riga: lì il margine di stacco non serve. */
.article-topics__label:first-child { margin-left: 0; }
/* Stessa forma del badge categoria ma in lilla, così a colpo d'occhio si
   distingue subito un tag da una categoria anche senza rileggere l'etichetta.
   Misure allineate agli altri badge del dettaglio: questa classe nasce solo
   qui, quindi i valori stanno direttamente nella regola di base. */
.editorial-tag-badge {
    display: inline-flex; align-items: center;
    font: 600 .85rem/1 'century-gothic', 'Century Gothic', 'CenturyGothic', AppleGothic, 'Trebuchet MS', sans-serif;
    padding: .3rem 1rem; border-radius: 999px;
    color: var(--tag-ink);
    background: var(--tag-bg);
    border: 1px solid rgba(124,58,237,.18);
}

.article-attachments { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0,88,102,.1); }
.article-attachments__label {
    display: flex; align-items: center; gap: .35rem;
    font-size: .85rem; color: var(--muted); margin-bottom: .9rem;
}
.article-attachments__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.article-attachments__item {
    display: flex; align-items: center; gap: .75rem;
    background: var(--light); border-radius: var(--radius);
    padding: .75rem 1rem;
}
.article-attachments__icon { color: var(--navy); flex-shrink: 0; }
.article-attachments__name { flex: 1; font-size: .92rem; color: var(--text); word-break: break-word; }
.article-attachments__size { font-size: .8rem; color: var(--muted); flex-shrink: 0; }
.article-attachments__download {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--navy); color: #fff; flex-shrink: 0;
    transition: background .2s ease;
}
.article-attachments__download:hover { background: var(--accent); }

/* Solo il badge "Potrebbe interessarti" introduce la griglia: niente più
   titolo "Articoli correlati" né link "Tutti" sopra le card. */
/* Linea che separa l'articolo dagli articoli correlati sotto — stesso
   hairline usato per condividi/tag/allegati poco più in alto nella pagina. */
/* Terzo elemento di .editorial-layout, a tutta larghezza sotto contenuto e
   sidebar (prima era una <section> separata: vedi il commento in
   articolo.php per il perché è stata spostata qui dentro).
   Il distacco dal blocco sopra lo dà già il gap di 2.5rem della griglia. */
.article-related { grid-column: 1 / -1; min-width: 0; padding-top: 2rem; border-top: 1px solid rgba(0,88,102,.1); }
.article-related .section__label { margin-bottom: 1.5rem; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .cards--4 { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .editorial-grid { grid-template-columns: repeat(2, 1fr); }
    /* Con la sidebar ancora a fianco (crolla a 1 colonna solo sotto i
       768px), la colonna dei contenuti qui è già stretta: la ricerca va su
       una riga propria (grid-column: 1/-1), le due tendine si dividono la
       riga sotto. */
    .editorial-toolbar__filters,
    .editorial-toolbar__filters--reset { grid-template-columns: 1fr 1fr; }
    /* Ricerca e reset a tutta riga: le due tendine si dividono quella in
       mezzo. Senza questo il reset resterebbe da solo a metà larghezza, con
       un buco accanto. */
    .editorial-toolbar__filters .editorial-search,
    .editorial-toolbar__filters .editorial-filters__reset { grid-column: 1 / -1; }
    /* Dettaglio articolo: la sidebar scende sotto al contenuto già qui, non
       a 768px. Restando affiancata la colonna del testo si riduceva a ~377px
       (contro i 340px fissi della sidebar) e, soprattutto, i due box CTA
       partivano all'altezza dell'inizio dell'articolo: sullo schermo
       comparivano quindi PRIMA degli allegati, che finivano molto più in
       basso nella colonna di sinistra. */
    .editorial-layout { grid-template-columns: minmax(0, 1fr); }
    /* Sotto al contenuto lo "sticky" non ha più senso (si incollerebbe a fine
       pagina); i due box si affiancano invece di impilarsi, così non
       allungano la pagina più del necessario. */
    .editorial-sidebar { position: static; flex-direction: row; }
    .editorial-sidebar > * { flex: 1 1 0; min-width: 0; }
    /* In colonna unica la sequenza deve essere: articolo → articoli correlati
       → newsletter → consulenza → footer. Nel DOM la sidebar viene prima dei
       correlati (le serve per stare nella colonna destra su desktop), quindi
       qui li si scambia con "order". Funziona solo perché sono entrambi
       elementi della stessa griglia .editorial-layout. */
    .article-related   { order: 1; }
    .editorial-sidebar { order: 2; }
}
@media (max-width: 768px) {
    :root { --header-h: 60px; }
    .hero { grid-template-columns: 1fr; }
    .hero__media { display: none; }
    .hero__media.editorial-hero__media { display: flex; margin-top: 0px; }
    /* Tutto il resto del mobile dell'editoriale (griglie, toolbar, sidebar,
       slider, dettaglio articolo) sta in css/style-mobile.css. */
    .section__inner--split { grid-template-columns: 1fr; gap: 2rem; }
    .eco-duo-grid { grid-template-columns: minmax(0, 1fr); }
    .twinmix__content { border-radius: var(--radius-lg); border-right: 1px solid rgba(0,88,102,.12); }
    .twinmix__card    { border-radius: var(--radius-lg); }
    .cards--3, .servizi-list, .servizi-cards, .fasi, .mv-grid, .contatti-inner { grid-template-columns: 1fr; }
    .contatti-form__row { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .footer-legal-flex { flex-direction: column; gap: .5rem; }
    .timeline { padding-left: 2rem; }
    .timeline-split { grid-template-columns: 1fr; }
    .timeline-split__nav { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
    .timeline-split__nav::before { display: none; }
    .timeline-split__item { padding: .4rem .75rem; border: 1px solid rgba(0,88,102,.15); border-radius: var(--radius); }
    .timeline-split__item.is-active { background: var(--navy); }
    .timeline-split__item.is-active .timeline-split__year,
    .timeline-split__item.is-active .timeline-split__tag { color: #fff; }
    .timeline-split__dot { display: none; }
    .garanzie-grid--large { grid-template-columns: 1fr; }

    /* Whistleblowing page */
    .wb-banners, .wb-modes { grid-template-columns: 1fr; }
    .wb-mode:first-child { border-right: none; border-bottom: 1px solid rgba(0,88,102,.1); }
    .wb-steps { flex-direction: column; align-items: center; gap: 1.5rem; }
    .wb-step { max-width: 100%; padding: 0 1rem; }
    .wb-step__line { display: none; }

    /* Mobile nav */
    .mobile-toggle { display: block; }
    .main-nav {
        display: none;
        position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
        z-index: 99;
        background: #fff;
        flex-direction: column; align-items: flex-start;
        padding: 1.5rem 1.25rem 2rem;
        gap: .25rem;
        overflow-y: auto;
        border-top: 2px solid var(--accent);
        box-shadow: 0 8px 32px rgba(0,0,0,.12);
    }
    .main-nav.is-open { display: flex; }
    /* backdrop-filter on .main-header creates a new containing block for
       position:fixed descendants, which collapses the mobile nav's height
       to the header's own box. Drop the filter while the menu is open so
       .main-nav positions against the real viewport instead. */
    .main-header:has(.main-nav.is-open) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav-list { flex-direction: column; width: 100%; gap: 0; }
    .nav-link {
        width: 100%; font-size: 1rem; padding: .85rem 1rem;
        color: var(--text); border-radius: var(--radius);
        border-bottom: 1px solid var(--light);
    }
    .nav-link:last-child { border-bottom: none; }
    .nav-link:hover { color: #fff; background: #2a8fa3; }
    .btn-header-cta { width: 100%; justify-content: center; margin-top: 1.25rem; }
    .fase__arrow { display: none; }
}

/* ---- Widget accessibilità di Iubenda: toglie lo stacco di 50px da sinistra ----
   "html body" davanti NON è ridondante e non va tolto. Iubenda inietta da
   JavaScript un <style> con il selettore IDENTICO a questo e "left: 50px
   !important". Due dichiarazioni !important dello stesso autore con la stessa
   specificità le decide l'ordine, e il suo <style> viene inserito a pagina già
   caricata, quindi finisce sempre dopo il nostro foglio: spostare questa regola
   più in basso, o metterla in un altro file, non cambierebbe nulla. Gli unici
   due elementi in più alzano la specificità e la fanno vincere a prescindere
   dall'ordine. */
html body .floatable-wrapper.iub-floatable-wrapper-aw-2025:not(.iub-floatable-wrapper-2025)[data-tp-float="bottom-left"] {
    left: 0 !important;
}