/* ══════════════════════════════════════════════════════════════════════════
   Local Radar per gli Enti — il sistema visivo condiviso
   ──────────────────────────────────────────────────────────────────────────
   Pagine: /per-gli-enti/ (hub), /pa.html, /per-gli-enti/dmo/,
   /per-gli-enti/progetti-territoriali/.

   Ordine dei fogli in ognuna:
     style.css            struttura di base, header e menu mobile
     home.css             il tema chiaro del sito (token, header, pulsanti):
                          lo stesso della home, così l'header è DAVVERO lo stesso
     enti.css             questo file: lo strato «famiglia Enti»
     business-access.css  il pulsante «Area riservata aziende»

   Il riferimento è la landing /geoturismo-campi-flegrei/: fondo chiaro, scala
   tipografica ampia, sezioni respirate che si alternano (bianco, grigio
   azzurrato, azzurro, una sola fascia scura quando serve contrasto), poche
   card e solo quando hanno una funzione. Classi con prefisso `en-` per non
   collidere con i componenti di style.css e home.css.

   Icone: /assets/img/enti-icons.svg (Material, come home e app).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Si aggiungono ai token di home.css */
    --en-maxw: 1200px;
    --en-ink: #1f2a3b;
    --en-ink-2: #18212f;
    --en-on-ink: #eef1f8;
    --en-on-ink-muted: #b8c3d8;
    --en-future: #ffd27a;
    /* Un colore per ogni percorso dell'area Enti: si ritrova nell'hub e nelle pagine */
    --en-blue: #2f5d9c;      --en-blue-bg: #e4edfb;
    --en-teal: #00695c;      --en-teal-bg: #dcf1ed;
    --en-green: #2e7d32;     --en-green-bg: #e2f1e3;
    --en-violet: #5b3fa8;    --en-violet-bg: #ece6fa;
    --en-orange: #a84700;    --en-orange-bg: #fff0e3;
    --en-radius: 22px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body.enti {
    font-family: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.6;
}

.enti main {
    display: block;
}

.enti h1,
.enti h2,
.enti h3 {
    font-family: inherit;
    overflow-wrap: break-word;
    hyphens: manual;
}

.enti a:focus-visible,
.enti summary:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.en-ic {
    width: 1em;
    height: 1em;
    flex: none;
    fill: currentColor;
}

.enti .btn-primary,
.enti .btn-secondary {
    gap: 8px;
    text-align: center;
}

.enti .btn-primary .en-ic,
.enti .btn-secondary .en-ic {
    font-size: 18px;
}

/* ── Sezioni e ritmo ──────────────────────────────────────────────────── */
.en-section {
    padding-block: clamp(64px, 3.5rem + 4vw, 128px);
}

.en-section--white { background: var(--surface); }
.en-section--tint { background: var(--surface-low); }
.en-section--blue { background: var(--primary-container); }

.en-section--ink {
    background: linear-gradient(180deg, var(--en-ink), var(--en-ink-2));
    color: var(--en-on-ink);
}

.en-section--ink h2,
.en-section--ink h3 { color: #fff; }
.en-section--ink p { color: var(--en-on-ink-muted); }
.en-section--ink .eyebrow { color: var(--en-future); }

.en-head {
    max-width: 66ch;
}

.en-head h2 {
    margin-top: 14px;
    font-size: clamp(1.8rem, 1.1rem + 2.5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 800;
}

.en-head > p {
    margin-top: 18px;
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    line-height: 1.6;
}

.en-head--center {
    margin-inline: auto;
    text-align: center;
}

.en-head--center .eyebrow {
    justify-content: center;
}

.en-body {
    margin-top: clamp(36px, 4vw, 56px);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.en-hero {
    padding-block: clamp(108px, 6rem + 3vw, 160px) clamp(56px, 3rem + 3vw, 104px);
    background:
        radial-gradient(ellipse 55% 60% at 8% 0%, rgba(255, 148, 69, .10) 0%, transparent 70%),
        radial-gradient(900px 520px at 85% 20%, rgba(215, 227, 255, .75), transparent 70%),
        var(--bg-deep);
}

.en-hero__grid {
    display: grid;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

@media (min-width: 1000px) {
    .en-hero__grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    }
}

.en-hero h1 {
    margin-top: 18px;
    font-size: clamp(2.25rem, 1.25rem + 3.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.025em;
    font-weight: 800;
}

.en-lede {
    margin-top: 22px;
    max-width: 44ch;
    font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    line-height: 1.45;
}

.enti p.en-lede {
    color: var(--text-primary);
}

.en-hero__text {
    margin-top: 14px;
    max-width: 58ch;
}

.en-hero__text p + p {
    margin-top: 10px;
}

.en-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 32px;
}

.enti p.en-note {
    margin-top: 16px;
    font-size: 15px;
    color: var(--subtle);
}

.en-note strong {
    color: var(--text-primary);
}

/* Breadcrumb di style.css, riportato nel tema chiaro */
.enti .breadcrumb {
    margin: 0 0 22px;
    padding: 0;
    color: var(--subtle);
}

.enti .breadcrumb li + li::before {
    color: var(--border-strong);
}

.enti .breadcrumb a {
    color: var(--primary);
}

/* Hero solo testo (Progetti): una colonna, più larga */
.en-hero__grid--solo {
    grid-template-columns: minmax(0, 1fr);
}

.en-hero__grid--solo h1 {
    max-width: 18ch;
}

/* Testo d'apertura lungo (pa.html): stessa voce, corpo più piccolo */
.en-lede--long {
    max-width: 60ch;
    font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
    line-height: 1.55;
}

/* Fascia breve sotto l'hero: a chi si rivolge */
.en-section--band {
    padding-block: 36px 40px;
    background: var(--surface);
    border-block: 1px solid var(--border-soft);
}

.enti p.en-band {
    margin-bottom: 16px;
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
}

/* DMO: che cosa resta alla DMO, che cosa fa Local Radar */
.en-contrast {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

@media (min-width: 640px) {
    .en-contrast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.en-contrast > div {
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(184, 195, 216, .3);
}

.en-contrast > div:last-child {
    background: rgba(255, 210, 122, .1);
    border-color: rgba(255, 210, 122, .55);
}

.en-contrast strong {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--en-on-ink-muted);
}

.en-contrast > div:last-child strong {
    color: var(--en-future);
}

.en-section--ink .en-contrast p {
    margin-top: 6px;
    color: #fff;
    font-size: 1.05rem;
}

.en-section--ink .en-ticks .en-ic {
    color: var(--en-future);
}

.en-section--ink .en-ticks li {
    color: var(--en-on-ink);
}

/* ── Etichette, pillole, liste ────────────────────────────────────────── */
.en-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.en-pills li {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
}

.en-pills--center {
    justify-content: center;
}

.en-ticks {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.en-ticks li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.en-ticks .en-ic {
    font-size: 22px;
    margin-top: 1px;
    color: var(--en-green);
}

.en-real {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--en-green);
}

.en-real::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Le tessere colorate con l'icona */
.en-tile {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    flex: none;
    font-size: 26px;
    background: var(--en-blue-bg);
    color: var(--en-blue);
}

.en-tile--teal { background: var(--en-teal-bg); color: var(--en-teal); }
.en-tile--green { background: var(--en-green-bg); color: var(--en-green); }
.en-tile--violet { background: var(--en-violet-bg); color: var(--en-violet); }
.en-tile--orange { background: var(--en-orange-bg); color: var(--en-orange); }
.en-tile--sm { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }

/* ── Schermate reali ──────────────────────────────────────────────────── */
.en-shot {
    margin: 0;
}

.en-shot__frame {
    background: var(--surface);
    border-radius: 34px;
    padding: 9px;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-2);
}

.en-shot__frame img {
    width: 100%;
    border-radius: 26px;
    background: var(--surface-container);
}

.en-shot figcaption {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--text-muted);
}

.en-shot figcaption strong {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
}

.en-shot--hero {
    width: min(360px, 100%);
    justify-self: center;
}

.en-shots {
    display: grid;
    gap: clamp(20px, 3vw, 32px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.en-shots .en-shot:nth-child(2) {
    margin-top: clamp(28px, 5vw, 64px);
}

@media (max-width: 520px) {
    .en-shots {
        grid-template-columns: minmax(0, 300px);
        justify-content: center;
    }

    .en-shots .en-shot:nth-child(2) {
        margin-top: 0;
    }
}

/* ── Hub: i percorsi (casi d'uso) ─────────────────────────────────────── */
.en-cases {
    display: grid;
    gap: 18px;
    margin-top: clamp(36px, 4vw, 56px);
}

@media (min-width: 680px) {
    .en-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .en-cases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .en-case { grid-column: span 2; }
    .en-case--lg { grid-column: span 3; }
}

.enti a.en-case {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 2.4vw, 32px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-1);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.enti a.en-case:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.en-case__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.en-case__for {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--subtle);
    text-align: right;
}

.en-case h3 {
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    line-height: 1.2;
}

.en-case--lg h3 {
    font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
}

.en-case p {
    color: var(--text-muted);
}

.en-case__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--primary);
    font-weight: 700;
}

.en-case__go .en-ic {
    font-size: 18px;
    transition: transform .15s ease;
}

.enti a.en-case:hover .en-case__go .en-ic {
    transform: translateX(3px);
}

/* ── Hub: residenti e visitatori ↔ enti, territori e progetti ────────── */
.en-bridge {
    display: grid;
    gap: 20px;
    align-items: center;
    margin-top: clamp(36px, 4vw, 56px);
}

@media (min-width: 900px) {
    .en-bridge {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0;
    }
}

.en-bridge__side {
    padding: clamp(24px, 2.6vw, 36px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.en-bridge__side h3 {
    margin-top: 16px;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
}

.en-bridge__side p {
    margin-top: 8px;
}

.en-bridge__hub {
    position: relative;
    justify-self: center;
    display: grid;
    place-items: center;
    text-align: center;
    width: 184px;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 20px;
    background: var(--surface);
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 12px rgba(47, 93, 156, .08), var(--shadow-2);
    z-index: 1;
}

.en-bridge__hub img {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
}

.en-bridge__hub strong {
    display: block;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.en-bridge__hub span {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.3;
}

@media (min-width: 900px) {
    .en-bridge__hub {
        margin-inline: -12px;
    }

    .en-bridge__hub::before,
    .en-bridge__hub::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 36px;
        height: 2px;
        background: var(--primary);
    }

    .en-bridge__hub::before { right: 100%; }
    .en-bridge__hub::after { left: 100%; }
}

/* ── Passi numerati (principio, come si parte) ────────────────────────── */
.en-steps {
    list-style: none;
    margin: clamp(36px, 4vw, 56px) 0 0;
    padding: 0;
    display: grid;
    gap: 28px;
    counter-reset: en-step;
}

@media (min-width: 900px) {
    .en-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .en-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}

.en-step {
    position: relative;
    counter-increment: en-step;
    padding-left: 68px;
}

.en-step::before {
    content: counter(en-step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

/* La linea che collega i passi: verticale su mobile, orizzontale su desktop */
.en-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 56px;
    bottom: -24px;
    width: 2px;
    background: linear-gradient(var(--primary), var(--border-soft));
}

@media (min-width: 900px) {
    .en-step {
        padding-left: 0;
        padding-top: 68px;
    }

    .en-step:not(:last-child)::after {
        left: 60px;
        right: -24px;
        top: 23px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(90deg, var(--primary), var(--border-soft));
    }
}

.en-step small {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
}

.en-step h3 {
    font-size: 1.2rem;
    line-height: 1.3;
}

.en-step p {
    margin-top: 6px;
}

/* ── Lista aperta con icone (non card) ────────────────────────────────── */
.en-points {
    list-style: none;
    margin: clamp(36px, 4vw, 56px) 0 0;
    padding: 0;
    display: grid;
    gap: 28px 32px;
}

@media (min-width: 640px) {
    .en-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .en-points--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .en-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.en-point {
    padding-top: 20px;
    border-top: 2px solid var(--border-soft);
}

.en-point h3 {
    margin-top: 16px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.en-point p {
    margin-top: 6px;
}

.en-section--ink .en-point {
    border-top-color: rgba(184, 195, 216, .25);
}

.en-section--ink .en-tile {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* ── Due colonne editoriali ───────────────────────────────────────────── */
.en-split {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

@media (min-width: 960px) {
    .en-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .en-split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
    .en-split--top { align-items: start; }
}

/* ── Citazione / affermazione forte ───────────────────────────────────── */
.en-quote {
    margin: 0;
    padding-left: clamp(18px, 2vw, 28px);
    border-left: 5px solid var(--primary);
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.en-panel {
    padding: clamp(24px, 3vw, 40px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-1);
}

.en-panel--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-2);
}

.en-panel--primary p { color: #dbe6f6; }
.en-panel--primary .en-quote { border-left-color: #ffd27a; color: #fff; }

.en-panel--primary .en-quote + p {
    margin-top: 18px;
}

/* ── Callout ──────────────────────────────────────────────────────────── */
.en-callout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: 18px;
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.en-callout .en-ic {
    font-size: 24px;
    margin-top: 2px;
    color: var(--primary);
}

.enti .en-callout p {
    color: var(--on-primary-container);
}

.en-callout strong {
    color: var(--on-primary-container);
}

/* ── DMO: più Comuni → un unico livello → il visitatore ───────────────── */
.en-converge {
    display: grid;
    gap: 18px;
    align-items: center;
    margin-top: clamp(36px, 4vw, 56px);
}

@media (min-width: 960px) {
    .en-converge {
        grid-template-columns: minmax(0, 1fr) 56px minmax(0, .8fr) 56px minmax(0, 1fr);
        gap: 0;
    }
}

.en-converge__col h3 {
    font-size: 1.05rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 14px;
}

.en-comuni {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.en-comuni li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.en-comuni li strong {
    display: block;
    line-height: 1.2;
}

.en-comuni li strong + span {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
}

.en-arrow {
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 30px;
}

.en-arrow .en-ic {
    transform: rotate(90deg);
}

@media (min-width: 960px) {
    .en-arrow .en-ic { transform: none; }
}

.en-layer {
    text-align: center;
    padding: 28px 22px;
    border-radius: var(--en-radius);
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-2);
}

.en-layer img {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 14px;
}

.en-layer strong {
    display: block;
    font-size: 1.25rem;
}

.enti .en-layer p {
    margin-top: 6px;
    color: #dbe6f6;
    font-size: 15px;
}

.en-visitor {
    padding: 24px;
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 2px solid var(--en-green);
}

.en-visitor .en-ticks {
    margin-top: 0;
}

/* ── Progetti: la linea del tempo ─────────────────────────────────────── */
.en-timeline {
    list-style: none;
    margin: clamp(40px, 4vw, 64px) 0 0;
    padding: 0;
    display: grid;
    gap: 28px;
}

@media (min-width: 960px) {
    .en-timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}

.en-phase {
    position: relative;
    padding-left: 44px;
}

.en-phase::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface);
    border: 4px solid var(--primary);
    z-index: 1;
}

.en-phase:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 24px;
    bottom: -28px;
    width: 4px;
    border-radius: 2px;
    background: var(--primary);
}

@media (min-width: 960px) {
    .en-phase {
        padding-left: 0;
        padding-top: 44px;
    }

    .en-phase::before {
        left: 0;
        top: 0;
    }

    .en-phase:not(:last-child)::after {
        left: 18px;
        right: -24px;
        top: 7px;
        bottom: auto;
        width: auto;
        height: 4px;
    }
}

.en-phase__when {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary);
}

.en-phase h3 {
    margin-top: 6px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.en-phase p {
    margin-top: 6px;
}

/* «Nel tempo» non chiude la linea: su desktop continua e sfuma verso destra */
@media (min-width: 960px) {
    .en-phase:last-child::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 0;
        top: 7px;
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--en-green), rgba(46, 125, 50, 0));
    }
}

/* Le fasi «dopo»: è il punto della pagina, il colore lo dice */
.en-phase--after::before { border-color: var(--en-green); }
.en-phase--after .en-phase__when { color: var(--en-green); }
.en-phase--after:not(:last-child)::after { background: var(--en-green); }

/* Le due barre sotto la linea: il finanziamento finisce, i contenuti no */
.en-spans {
    display: grid;
    gap: 10px;
    margin-top: 32px;
}

@media (min-width: 960px) {
    .en-spans { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
    .en-span--funding { grid-column: 1 / span 2; }
    .en-span--platform { grid-column: 1 / -1; }
}

.en-span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.en-span--funding {
    background: var(--en-orange-bg);
    color: var(--en-orange);
    border: 1.5px dashed #e7a36d;
}

.en-span--platform {
    background: var(--en-green-bg);
    color: #1b5e20;
}

.en-span em {
    font-style: normal;
    font-weight: 500;
    opacity: .9;
}

/* ── pa.html: «In questa pagina» ──────────────────────────────────────── */
.en-subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 36px;
}

.en-subnav > span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-right: 4px;
}

.enti .en-subnav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.enti .en-subnav a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ── pa.html: anteprima nell'hero (cosa entra nella piattaforma) ──────── */
.en-preview {
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-2);
}

.en-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.en-preview__head strong {
    font-size: 1.05rem;
}

.en-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--en-green-bg);
    color: #1b5e20;
    font-size: 13px;
    font-weight: 700;
}

.en-live::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--en-green);
}

.en-preview ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.en-preview li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--surface-low);
    border: 1px solid var(--border-soft);
}

.en-preview li strong {
    display: block;
    line-height: 1.25;
}

.en-preview li strong + span {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
}

.enti p.en-preview__foot {
    margin-top: 14px;
    font-size: 14px;
}

/* ── pa.html: pacchetti ───────────────────────────────────────────────── */
.en-packages {
    display: grid;
    gap: 18px;
    margin-top: clamp(36px, 4vw, 56px);
    align-items: stretch;
}

@media (min-width: 700px) {
    .en-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
    .en-packages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.en-package {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-1);
}

.en-package--featured {
    border: 2px solid var(--primary);
    box-shadow: var(--shadow-2);
}

.en-package__label {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--primary-container);
    color: var(--on-primary-container);
    font-size: 13px;
    font-weight: 700;
}

.en-package h3 {
    margin-top: 16px;
    font-size: 1.35rem;
}

.en-package__desc {
    margin-top: 8px;
}

.enti p.en-package__pos {
    margin-top: 16px;
    color: var(--text-primary);
    font-weight: 700;
}

.enti p.en-package__note {
    margin-top: 4px;
    font-size: 14px;
    color: var(--subtle);
}

.en-package ul {
    list-style: none;
    margin: 18px 0 22px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border-soft);
    display: grid;
    gap: 8px;
    font-size: 15px;
}

.en-package li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-muted);
}

.en-package li .en-ic {
    font-size: 18px;
    margin-top: 3px;
    color: var(--en-green);
}

.en-package .btn-primary,
.en-package .btn-secondary {
    margin-top: auto;
}

.en-addon {
    display: grid;
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: clamp(20px, 2.4vw, 28px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
}

@media (min-width: 760px) {
    .en-addon { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.en-addon h3 {
    font-size: 1.2rem;
}

.en-addon p {
    margin-top: 4px;
}

.en-addon__meta {
    text-align: left;
}

.en-addon__meta strong {
    display: block;
    color: var(--text-primary);
}

.en-addon__meta span {
    font-size: 14px;
    color: var(--subtle);
}

@media (min-width: 760px) {
    .en-addon__meta { text-align: right; }
}

/* ── pa.html: bandi ───────────────────────────────────────────────────── */
.en-focus {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
}

.en-focus li {
    padding-left: 20px;
    border-left: 3px solid var(--primary);
}

.en-focus__tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--primary);
}

.en-focus h3 {
    margin-top: 6px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.en-focus p {
    margin-top: 6px;
}

.en-aside {
    padding: clamp(22px, 2.6vw, 34px);
    border-radius: var(--en-radius);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.en-aside h3 {
    font-size: 1.15rem;
    line-height: 1.35;
}

.en-aside ul {
    margin: 14px 0 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
}

.en-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.en-chips span {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--surface-container);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* ── pa.html: caso Procida ────────────────────────────────────────────── */
.en-case-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.en-case-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.en-case-list .en-ic {
    font-size: 20px;
    margin-top: 2px;
    color: var(--en-green);
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.en-faq {
    display: grid;
    gap: 12px;
    max-width: 900px;
    margin-top: clamp(32px, 4vw, 48px);
}

.en-faq details {
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.en-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    color: var(--text-primary);
}

.en-faq summary::-webkit-details-marker { display: none; }

.en-faq summary::after {
    content: "+";
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-container);
    color: var(--primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.en-faq details[open] summary::after {
    content: "−";
}

.en-faq details p {
    padding: 0 20px 20px;
}

/* ── Chiusura: la richiesta di contatto ───────────────────────────────── */
.en-cta {
    display: grid;
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
    padding: clamp(28px, 4vw, 56px);
    border-radius: 32px;
    background: var(--surface-low);
    border: 1px solid var(--border-soft);
}

@media (min-width: 900px) {
    .en-cta { grid-template-columns: minmax(0, 1.3fr) auto; }
}

.en-cta h2 {
    margin-top: 14px;
    font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem);
    line-height: 1.1;
    font-weight: 800;
}

.en-cta p {
    margin-top: 14px;
    max-width: 60ch;
}

.en-cta .en-actions {
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
}

/* Collegamenti fra le pagine dell'area */
.en-related {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

/* ── Piede comune ─────────────────────────────────────────────────────── */
.en-footer {
    background: var(--surface);
    border-top: 1px solid var(--border-soft);
    padding-block: 56px 40px;
    font-size: 15px;
}

.en-footer__grid {
    display: grid;
    gap: 32px;
}

@media (min-width: 760px) {
    .en-footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.en-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
}

.en-footer__brand img {
    width: 36px;
    height: 36px;
}

.enti .en-footer p {
    margin-top: 12px;
    max-width: 40ch;
    color: var(--text-muted);
}

.en-footer h2 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--subtle);
}

.en-footer ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.enti .en-footer ul a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    color: var(--text-primary);
    text-decoration: none;
}

.enti .en-footer ul a:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.enti .en-footer p.en-footer__bottom {
    max-width: none;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    color: var(--subtle);
    font-size: 14px;
}

/* ── Google Translate nel tema chiaro (come la home) ──────────────────── */
.enti #google_translate_element .goog-te-gadget .goog-te-combo {
    background: #fff;
    color: #191c20;
    border: 1px solid #c9d0dc;
    border-radius: 999px;
    padding: 6px 12px;
}

.enti #google_translate_element .goog-te-gadget .goog-te-combo option {
    background: #fff;
    color: #191c20;
}

/* ── Telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .enti .container {
        padding: 0 16px;
    }

    .en-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .en-related .btn-secondary {
        width: 100%;
    }

    .en-case__top {
        flex-wrap: wrap;
    }

    .en-case__for {
        text-align: left;
    }

    .en-shot--hero {
        width: min(300px, 100%);
    }

    .en-span {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .enti a.en-case,
    .en-case__go .en-ic {
        transition: none;
    }

    .enti a.en-case:hover {
        transform: none;
    }
}