@import '../themes/cedacri/assets/vendor/bootstrap/css/bootstrap.min.css';
@import '../themes/cedacri/assets/vendor/fontawesome-free/css/all.min.css';
@import '../themes/cedacri/assets/vendor/animate/animate.compat.css';
@import '../themes/cedacri/assets/vendor/owl.carousel/assets/owl.carousel.min.css';
@import '../themes/cedacri/assets/vendor/owl.carousel/assets/owl.theme.default.min.css';
@import '../themes/cedacri/assets/css/theme.css';
@import '../themes/cedacri/assets/css/theme-elements.css';
@import '../themes/cedacri/assets/css/skin-default.css';
@import '../themes/cedacri/assets/css/news.css';
/* ============================================================
   Cedacri — layer di interazione e animazioni allo scroll
   Si appoggia al markup esistente (Porto + partial del tema):
   non modifica layout, colori o contenuti, aggiunge solo moto.

   Tutti gli stati "nascosti" sono sotto html.cdx-ready, che viene
   aggiunto da enhance.js: se il JS non parte, la pagina resta
   esattamente come prima e nulla rimane invisibile.
   ============================================================ */

:root {
    --cdx-blu: #0693e3;
    --cdx-blu-scuro: #002147;
    --cdx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* uscita netta, come sui siti di riferimento */
    --cdx-uscita: cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- barra di avanzamento della lettura ---------------------- */

.cdx-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #002147, var(--cdx-blu) 65%, #4fc3f7);
    z-index: 1100;
    pointer-events: none;
}

/* --- comparse allo scroll ------------------------------------ */

/* La comparsa allo scroll vale per tutti i contenuti del sito:
   titoli, testi, immagini, schede, bottoni. Una sola regola, cosi'
   il ritmo e' lo stesso ovunque. */
html.cdx-ready .cdx-rise {
    opacity: 0;
    transform: translateY(26px);
}
html.cdx-ready .cdx-rise.cdx-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.62s var(--cdx-uscita) var(--cdx-delay, 0ms),
                transform 0.62s var(--cdx-uscita) var(--cdx-delay, 0ms);
}

/* immagini delle sezioni testo+immagine: si aprono a tenda */
html.cdx-ready .cdx-unveil {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--cdx-ease);
    will-change: clip-path;
}
html.cdx-ready .cdx-unveil.cdx-in {
    clip-path: inset(0 0 0 0);
}

/* --- sezioni testo + immagine -------------------------------- */

.service-info h2 {
    position: relative;
    padding-bottom: 0.6rem;
}
.service-info h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--cdx-blu);
    transition: width 1s var(--cdx-ease) 0.25s;
}
.service-info[style*="007ac5"] h2::after {
    background: #ffffff;
}
.service-info.cdx-in h2::after {
    width: 72px;
}

/* il contenitore dell'immagine tiene dentro la parallasse */
.service-info .col-lg-6.px-0 {
    overflow: hidden;
}

/* ============================================================
   Bottoni
   Pillola con la pastiglia della freccia a destra. Al passaggio
   del mouse una macchia scura si allarga dalla pastiglia fino a
   coprire il bottone, la freccia esce a destra e ne entra una
   nuova da sinistra.
   ============================================================ */

.cdx-btn {
    --cdx-macchia: var(--cdx-blu-scuro);
    --cdx-pastiglia: rgba(255, 255, 255, 0.18);
    --cdx-pastiglia-viva: rgba(255, 255, 255, 0.3);
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    padding: 13px 15px 13px 28px;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    overflow: hidden;
    isolation: isolate;
    width: auto !important;
    transition: transform 0.4s var(--cdx-ease), box-shadow 0.4s ease,
                color 0.35s ease;
}

/* la macchia parte da dove sta la pastiglia */
.cdx-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 15px;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    border-radius: 50%;
    background: var(--cdx-macchia);
    transform: scale(0);
    transition: transform 0.6s var(--cdx-uscita);
}

.cdx-btn-arrow {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--cdx-pastiglia);
    transition: background 0.4s ease;
}
.cdx-btn-arrow svg {
    position: absolute;
    display: block;
    transition: transform 0.5s var(--cdx-uscita), opacity 0.3s ease;
}
.cdx-btn-arrow svg + svg {
    transform: translateX(-150%);
    opacity: 0;
}

@media (hover: hover) {
    .cdx-btn:hover,
    .cdx-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(0, 20, 48, 0.28);
    }
    .cdx-btn:hover::before,
    .cdx-btn:focus-visible::before {
        transform: scale(20);
    }
    .cdx-btn:hover .cdx-btn-arrow,
    .cdx-btn:focus-visible .cdx-btn-arrow {
        background: var(--cdx-pastiglia-viva);
    }
    .cdx-btn:hover .cdx-btn-arrow svg:first-child,
    .cdx-btn:focus-visible .cdx-btn-arrow svg:first-child {
        transform: translateX(150%);
        opacity: 0;
    }
    .cdx-btn:hover .cdx-btn-arrow svg + svg,
    .cdx-btn:focus-visible .cdx-btn-arrow svg + svg {
        transform: none;
        opacity: 1;
    }
}

/* blu pieno: la macchia e' il navy del marchio */
.btn-primary.cdx-btn {
    background: var(--cdx-blu);
    color: #ffffff;
}
@media (hover: hover) {
    .btn-primary.cdx-btn:hover,
    .btn-primary.cdx-btn:focus-visible {
        background: var(--cdx-blu);
        color: #ffffff;
    }
}

/* bianco sulle fasce colorate: testo blu che diventa bianco */
.btn-light.cdx-btn {
    --cdx-pastiglia: rgba(6, 147, 227, 0.14);
    --cdx-pastiglia-viva: rgba(255, 255, 255, 0.24);
    background: #ffffff;
    color: var(--cdx-blu);
}
@media (hover: hover) {
    .btn-light.cdx-btn:hover,
    .btn-light.cdx-btn:focus-visible {
        background: #ffffff;
        color: #ffffff;
    }
}

/* il pulsante di annullo dei moduli: stessa forma, macchia blu */
.btn-secondary.cdx-btn {
    --cdx-macchia: var(--cdx-blu);
    --cdx-pastiglia: rgba(255, 255, 255, 0.16);
}

/* dentro le schede del binario servizi sta piu\' stretto */
.cdx-pcard .cdx-btn {
    padding: 10px 12px 10px 20px;
    font-size: 0.88rem;
}
.cdx-pcard .cdx-btn-arrow { width: 32px; height: 32px; }

@media (prefers-reduced-motion: reduce) {
    .cdx-btn,
    .cdx-btn::before,
    .cdx-btn-arrow,
    .cdx-btn-arrow svg {
        transition: none !important;
    }
}

/* --- schede prodotto / offerta ------------------------------- */

.cdx-card {
    overflow: hidden;
    position: relative;
}
/* lo sfondo vive in uno pseudo-elemento cosi puo ingrandirsi
   senza trascinare con se testo e velatura */
.cdx-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 1.1s var(--cdx-ease);
    z-index: 0;
}
.cdx-card .cdx-card-veil {
    transition: background-color 0.5s ease;
}
.cdx-card h2 {
    transition: transform 0.5s var(--cdx-ease);
}
.cdx-card p {
    transition: transform 0.5s var(--cdx-ease) 0.04s, opacity 0.4s ease;
}

@media (hover: hover) {
    .cdx-card .btn {
        opacity: 0.94;
        transform: translateY(8px);
        transition: transform 0.5s var(--cdx-ease) 0.08s, opacity 0.4s ease,
                    background-color 0.3s ease;
    }
    .cdx-card:hover::before,
    .cdx-card:focus-within::before {
        transform: scale(1.07);
    }
    .cdx-card:hover .cdx-card-veil,
    .cdx-card:focus-within .cdx-card-veil {
        background-color: rgba(0, 32, 96, 0.62) !important;
    }
    .cdx-card:hover h2,
    .cdx-card:focus-within h2 {
        transform: translateY(-6px);
    }
    .cdx-card:hover p,
    .cdx-card:focus-within p {
        transform: translateY(-4px);
    }
    .cdx-card:hover .btn,
    .cdx-card:focus-within .btn {
        opacity: 1;
        transform: none;
    }
}

/* filo luminoso sul bordo inferiore della scheda attiva */
.cdx-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--cdx-blu);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s var(--cdx-ease);
    z-index: 3;
}
.cdx-card:hover::after,
.cdx-card:focus-within::after {
    transform: scaleX(1);
}

/* --- fascia icone (le realtà che supportiamo) ---------------- */

.cdx-icon-item {
    transition: transform 0.5s var(--cdx-ease);
}
.cdx-icon-item img {
    transition: transform 0.6s var(--cdx-ease), filter 0.4s ease;
}
.cdx-icon-item span {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
.cdx-icon-item span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.85;
    transform: translateX(-50%);
    transition: width 0.45s var(--cdx-ease);
}
@media (hover: hover) {
    .cdx-icon-item:hover {
        transform: translateY(-8px);
    }
    .cdx-icon-item:hover img {
        transform: scale(1.08);
    }
    .cdx-icon-item:hover span::after {
        width: 100%;
    }
}

/* --- hero: invito a scorrere e leggera parallasse ------------ */

.cdx-scroll-cue {
    position: absolute;
    right: 42px;
    bottom: 40px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
    pointer-events: none;
}
.cdx-scroll-cue i {
    display: block;
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0));
    animation: cdx-drop 2.4s ease-in-out infinite;
}
@keyframes cdx-drop {
    0%, 100% { transform: scaleY(0.35); transform-origin: top; opacity: 0.35; }
    50%      { transform: scaleY(1);    transform-origin: top; opacity: 1; }
}

/* zoom lentissimo sulle slide immagine (non sui video) */
html.cdx-ready .carousel-item.active .cdx-kenburns {
    animation: cdx-kenburns 14s ease-out forwards;
}
@keyframes cdx-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}

/* --- menu: sottolineatura animata ---------------------------- */

@media (hover: hover) and (min-width: 992px) {
    #mainNav > li > a.dropdown-item {
        position: relative;
    }
    #mainNav > li > a.dropdown-item::after {
        content: "";
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 2px;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.4s var(--cdx-ease);
        opacity: 0.9;
    }
    #mainNav > li > a.dropdown-item:hover::after {
        transform: scaleX(1);
    }
}

/* --- torna in cima ------------------------------------------- */

.cdx-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--cdx-blu-scuro);
    color: #ffffff;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s var(--cdx-ease),
                background-color 0.3s ease;
    z-index: 1090;
    box-shadow: 0 8px 22px rgba(0, 33, 71, 0.28);
}
.cdx-top.cdx-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.cdx-top:hover {
    background: var(--cdx-blu);
}

/* --- rispetto delle preferenze di movimento ------------------ */

@media (prefers-reduced-motion: reduce) {
    html.cdx-ready .cdx-rise,
    html.cdx-ready .cdx-unveil {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .cdx-scroll-cue i,
    html.cdx-ready .carousel-item.active .cdx-kenburns {
        animation: none !important;
    }
    .cdx-card::before,
    .cdx-card h2,
    .cdx-card p,
    .cdx-card .btn {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   Hero: passaggio da un banner all'altro
   Al posto dello slittamento orizzontale di Bootstrap, la slide
   in arrivo scopre quella precedente con una tendina, mentre
   quella che esce arretra di un soffio.

   Nota: Bootstrap aspetta il transitionend dell'elemento che
   ESCE per completare il cambio, quindi anche quello deve avere
   una transizione di pari durata, altrimenti taglia corto.
   ============================================================ */

.cdx-hero-wipe .carousel-item {
    transition: none;
    backface-visibility: hidden;
}

.cdx-hero-wipe .carousel-item.active {
    z-index: 1;
}

.cdx-hero-wipe .carousel-item-next,
.cdx-hero-wipe .carousel-item-prev {
    z-index: 2;
    transform: none !important;
}

/* stato di partenza della slide in arrivo: tutta coperta */
.cdx-hero-wipe .carousel-item-next {
    clip-path: inset(0 0 0 100%);
}
.cdx-hero-wipe .carousel-item-prev {
    clip-path: inset(0 100% 0 0);
}

/* apertura della tendina */
.cdx-hero-wipe .carousel-item-next.carousel-item-start,
.cdx-hero-wipe .carousel-item-prev.carousel-item-end {
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.15s cubic-bezier(0.66, 0, 0.2, 1);
}

/* la slide che esce arretra: dà profondità e serve a Bootstrap
   come riferimento di durata */
.cdx-hero-wipe .carousel-item.active.carousel-item-start,
.cdx-hero-wipe .carousel-item.active.carousel-item-end {
    transform: scale(1.04) !important;
    transition: transform 1.15s cubic-bezier(0.66, 0, 0.2, 1);
}

/* il contenuto della slide in arrivo entra con una spinta */
.cdx-hero-wipe .carousel-item-next > div:not(.carousel-caption),
.cdx-hero-wipe .carousel-item-next > video,
.cdx-hero-wipe .carousel-item-prev > div:not(.carousel-caption),
.cdx-hero-wipe .carousel-item-prev > video {
    transform: scale(1.07);
    transition: transform 1.6s cubic-bezier(0.66, 0, 0.2, 1);
}
.cdx-hero-wipe .carousel-item-next.carousel-item-start > div:not(.carousel-caption),
.cdx-hero-wipe .carousel-item-next.carousel-item-start > video,
.cdx-hero-wipe .carousel-item-prev.carousel-item-end > div:not(.carousel-caption),
.cdx-hero-wipe .carousel-item-prev.carousel-item-end > video {
    transform: scale(1);
}

/* Testo del banner.
   Si aggancia alla classe cdx-cap-go, che enhance.js mette sulla
   slide in arrivo quando la transizione PARTE. Prima stava su
   .active, che Bootstrap assegna solo a tendina finita: il testo si
   vedeva durante il passaggio e poi ripartiva da capo, col salto.
   Una classe che resta addosso alla slide anche quando diventa
   attiva non fa riavviare l'animazione. */
.cdx-hero-wipe .carousel-item.cdx-cap-go .cdx-cap {
    animation: cdx-cap-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.25s;   /* parte a tendina gia' in corsa */
}
.cdx-hero-wipe .carousel-item.cdx-cap-go .cdx-cap:nth-child(2) { animation-delay: 0.4s; }
.cdx-hero-wipe .carousel-item.cdx-cap-go .cdx-cap:nth-child(3) { animation-delay: 0.52s; }
.cdx-hero-wipe .carousel-item.cdx-cap-go .cdx-cap:nth-child(4) { animation-delay: 0.62s; }

@keyframes cdx-cap-in {
    from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

/* indicatori: quello attivo si allunga */
.cdx-hero-wipe .carousel-indicators [data-bs-target] {
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.cdx-hero-wipe .carousel-indicators .active {
    width: 56px;
}

@media (prefers-reduced-motion: reduce) {
    .cdx-hero-wipe .carousel-item,
    .cdx-hero-wipe .carousel-item-next,
    .cdx-hero-wipe .carousel-item-prev,
    .cdx-hero-wipe .carousel-item.active.carousel-item-start,
    .cdx-hero-wipe .carousel-item.active.carousel-item-end {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }
    .cdx-hero-wipe .carousel-item.cdx-cap-go .cdx-cap {
        animation: none !important;
    }
}

/* ============================================================
   Titoli che si aprono, linea del tempo che si disegna,
   numeri che contano. Vale su tutte le pagine che usano
   questi blocchi (servizi, soluzioni, company, prodotti...).
   ============================================================ */

/* --- titoli che si aprono in profondità ---------------------- */

html.cdx-ready .cdx-flip {
    opacity: 0;
    transform: perspective(900px) rotateX(-20deg) translateY(20px);
    transform-origin: top center;
}
html.cdx-ready .cdx-flip.cdx-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.85s var(--cdx-ease) var(--cdx-delay, 0ms),
                transform 0.95s var(--cdx-ease) var(--cdx-delay, 0ms);
}

/* --- linea del tempo ----------------------------------------- */

html.cdx-ready .main-timeline {
    perspective: 1400px;
}
/* il righello verticale si disegna man mano che si scorre */
html.cdx-ready .main-timeline::after {
    bottom: auto;
    height: var(--cdx-line, 0%);
    transition: height 0.15s linear;
}
html.cdx-ready .timeline.cdx-door {
    opacity: 0;
    transform: rotateY(16deg) translateY(30px);
    transform-origin: left center;
}
html.cdx-ready .timeline.right.cdx-door {
    transform: rotateY(-16deg) translateY(30px);
    transform-origin: right center;
}
html.cdx-ready .timeline.cdx-door.cdx-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--cdx-ease), transform 1s var(--cdx-ease);
}
html.cdx-ready .timeline.cdx-door .timeline-pointer {
    transform: scale(0.2);
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
html.cdx-ready .timeline.cdx-door.cdx-in .timeline-pointer {
    transform: scale(1);
}

/* --- numeri che contano -------------------------------------- */

.cdx-count {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* --- scheda certificazioni ----------------------------------- */

@media (hover: hover) {
    .cdx-lift {
        transition: transform 0.5s var(--cdx-ease), box-shadow 0.5s ease;
    }
    .cdx-lift:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 44px rgba(0, 33, 71, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.cdx-ready .cdx-flip,
    html.cdx-ready .timeline.cdx-door,
    html.cdx-ready .timeline.cdx-door .timeline-pointer {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    html.cdx-ready .main-timeline::after { height: 100% !important; }
}

/* Regole nate dentro product-grid.htm per le vecchie tessere a tutta
   immagine: valevano per QUALSIASI carosello e mettevano i pallini
   sopra le card (position: absolute, bottom 20px) togliendo anche lo
   spazio fra un elemento e l'altro. Il partial non usa piu' il
   carosello, quindi se ne vanno: i pallini dei caroselli rimasti
   tornano sotto, al loro posto. */

.card-img-top {
    max-height: 100px;
    width: auto;
    object-fit: contain;
}

.owl-carousel .owl-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.owl-carousel .owl-item,
.owl-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.owl-carousel .card {
    height: auto;
    margin: 0 auto;
}

/* Moved out of partials/service/card-no-border.htm (same reason as above):
   make Owl carousel elements and cards real flex items so every card
   stretches to match the tallest one (works for cloned items too). */
.owl-carousel .owl-stage,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-item {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
}

.owl-carousel .item {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
}

.owl-carousel .item .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: stretch;
}

.owl-carousel .item .card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.owl-carousel .item .card .card-body .card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ============================================================
   Binario orizzontale delle soluzioni (partial product-grid)

   Desktop: la sezione e' alta quanto lo schermo piu' la parte di
   binario che sporge; il contenuto resta incollato in alto e le
   schede scorrono di lato man mano che si scende. Finite le
   schede, la pagina riprende a scorrere normalmente.
   Touch e movimento ridotto: scorrimento laterale classico.
   ============================================================ */

.cdx-rail {
    position: relative;
    background: #03102a;
}
.cdx-rail-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-block: clamp(28px, 6vh, 64px);
}
/* intestazione: la parola della sezione in filigrana dietro
   al titolo, come nei siti di riferimento */
.cdx-rail-head {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(140px, 20vh, 220px);
    padding: clamp(20px, 4vh, 44px) clamp(16px, 4vw, 56px) 0;
    margin-bottom: clamp(16px, 2.5vh, 30px);
    color: #fff;
}
.cdx-rail-ghost {
    position: absolute;
    left: clamp(10px, 3vw, 44px);
    top: 50%;
    transform: translate(var(--cdx-ghost, 0px), -50%);
    font-size: clamp(4.5rem, 13vw, 11rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.055);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.cdx-rail-title {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding-bottom: 12px;
}
.cdx-rail-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--cdx-blu);
    transition: width 1s var(--cdx-ease) 0.2s;
}
.cdx-rail.cdx-in .cdx-rail-title::after { width: 72px; }
.cdx-rail-lead {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
    max-width: 58ch;
    color: rgba(255, 255, 255, 0.78);
}

.cdx-rail-track {
    display: flex;
    gap: 18px;
    padding-inline: clamp(16px, 4vw, 56px);
    padding-block: 14px;   /* spazio perche' la scheda possa sollevarsi */
    /* senza aggancio (touch, schermi stretti, movimento ridotto)
       il binario e' lui stesso lo scorrevole: cosi' il titolo
       della sezione resta fermo al suo posto */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.cdx-rail-track::-webkit-scrollbar { display: none; }

/* con aggancio: lo decide enhance.js, che misura lo sporgere */
html.cdx-ready .cdx-rail.cdx-pinned .cdx-rail-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
}
html.cdx-ready .cdx-rail.cdx-pinned .cdx-rail-track {
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    transition: transform 0.08s linear;
}

/* --- la singola scheda --------------------------------------- */

.cdx-pcard {
    position: relative;
    flex: 0 0 clamp(268px, 24vw, 344px);
    height: clamp(380px, 58vh, 486px);
    overflow: hidden;
    display: block;
    scroll-snap-align: center;
    color: #fff;
    background: #0a1c3c;
    isolation: isolate;
    transition: transform 0.6s var(--cdx-ease);
}
.cdx-pcard-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.1s var(--cdx-ease), filter 0.5s ease;
    z-index: 0;
}
.cdx-pcard-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(4, 16, 38, 0.3) 0%, rgba(4, 16, 38, 0) 26%),
        linear-gradient(0deg, rgba(4, 16, 38, 0.88) 0%, rgba(4, 16, 38, 0.3) 40%, rgba(4, 16, 38, 0) 68%);
    transition: opacity 0.5s ease;
}
.cdx-pcard-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 22px 22px;
}

/* il blocco che si apre sotto al titolo: da fermo non occupa
   spazio, cosi' il titolo resta appoggiato in basso */
.cdx-pcard-more {
    display: grid;
    grid-template-rows: 1fr;
}
.cdx-pcard-more-in {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* lo stacco dal titolo sta dentro al blocco che si apre: se fosse
   padding del contenitore resterebbe alto anche da chiuso */
.cdx-pcard-more-in .cdx-pcard-desc { margin-top: 12px; }
.cdx-pcard-title {
    text-transform: none;   /* il tema mette in maiuscolo gli h3 */
    font-size: clamp(1.25rem, 1.75vw, 1.6rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
    /* una riga sola: se un titolo fosse lunghissimo viene troncato
       invece di spezzare la composizione */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cdx-pcard-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cdx-pcard-go {
    display: inline-flex;
    align-items: center;
    color: #fff;
    margin-top: 4px;
}
.cdx-pcard-go svg { display: block; }

/* filo blu che cresce sul bordo basso, sopra le velature */
.cdx-pcard-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--cdx-blu);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--cdx-ease);
}

@media (hover: hover) and (pointer: fine) {
    /* la scheda si solleva e si stacca dal fondo */
    .cdx-pcard {
        transition: transform 0.5s var(--cdx-ease), box-shadow 0.5s ease;
    }
    .cdx-pcard:hover,
    .cdx-pcard:focus-visible {
        transform: translateY(-10px);
        box-shadow: 0 26px 50px rgba(0, 8, 24, 0.6);
    }
    .cdx-pcard:hover .cdx-pcard-body::after,
    .cdx-pcard:focus-visible .cdx-pcard-body::after {
        transform: scaleX(1);
    }

    /* da fermo il blocco sotto al titolo e' chiuso: il titolo sta
       in fondo alla scheda. Al passaggio del mouse si apre e il
       titolo sale quel tanto che basta */
    .cdx-pcard-more {
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.55s var(--cdx-ease);
    }
    .cdx-pcard:hover .cdx-pcard-more,
    .cdx-pcard:focus-visible .cdx-pcard-more {
        grid-template-rows: 1fr;
    }

    .cdx-pcard-desc,
    .cdx-pcard-go {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.45s ease, transform 0.55s var(--cdx-ease);
    }
    .cdx-pcard-desc { transition-delay: 0.04s; }
    .cdx-pcard-go { transition-delay: 0.1s; }

    .cdx-pcard:hover .cdx-pcard-img,
    .cdx-pcard:focus-visible .cdx-pcard-img {
        transform: scale(1.1);
        filter: brightness(0.78);
    }
    .cdx-pcard:hover .cdx-pcard-veil,
    .cdx-pcard:focus-visible .cdx-pcard-veil { opacity: 1; }
    .cdx-pcard:hover .cdx-pcard-desc,
    .cdx-pcard:hover .cdx-pcard-go,
    .cdx-pcard:focus-visible .cdx-pcard-desc,
    .cdx-pcard:focus-visible .cdx-pcard-go {
        opacity: 1;
        transform: none;
    }
    .cdx-pcard:hover .cdx-pcard-go svg,
    .cdx-pcard:focus-visible .cdx-pcard-go svg {
        animation: cdx-freccia 0.6s var(--cdx-ease) 0.22s both;
    }
}
@keyframes cdx-freccia {
    from { transform: translateX(-10px); }
    to   { transform: none; }
}

/* la velatura scura che entra al passaggio del mouse */
.cdx-pcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 38, 82, 0.35), rgba(2, 12, 30, 0.75));
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .cdx-pcard:hover::after,
    .cdx-pcard:focus-visible::after { opacity: 1; }
}

/* --- avanzamento del binario --------------------------------- */

.cdx-rail-bar {
    position: absolute;
    left: clamp(16px, 4vw, 56px);
    right: clamp(16px, 4vw, 56px);
    bottom: clamp(18px, 4vh, 38px);
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
    display: none;
}
html.cdx-ready .cdx-rail.cdx-pinned .cdx-rail-bar { display: block; }
.cdx-rail-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cdx-blu);
}

@media (prefers-reduced-motion: reduce) {
    .cdx-pcard,
    .cdx-pcard-img,
    .cdx-pcard-title,
    .cdx-pcard-desc,
    .cdx-pcard-go {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
}

/* --- via il "torna su" del tema ------------------------------
   Porto inietta da solo un pulsante grigio in basso a destra
   (PluginScrollToTop, classe .scroll-to-top) che si sovrapponeva
   al nostro. Lo nascondo qui e enhance.js lo toglie dal DOM,
   cosi' non resta nemmeno nell'ordine di tabulazione. */

.scroll-to-top {
    display: none !important;
}

/* --- binario in chiaro (partial card-no-border) --------------- */

.cdx-rail-chiaro {
    background: transparent;
}
.cdx-rail-chiaro .cdx-rail-title { color: var(--cdx-blu-scuro); }
.cdx-rail-chiaro .cdx-rail-ghost { color: rgba(0, 33, 71, 0.06); }
.cdx-rail-chiaro .cdx-rail-lead { color: #46586f; }
.cdx-rail-chiaro .cdx-rail-bar { background: rgba(0, 33, 71, 0.12); }

.cdx-rail-item {
    flex: 0 0 clamp(258px, 25vw, 330px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 32px 26px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 33, 71, 0.1);
    border-radius: 10px;
    scroll-snap-align: center;
    transition: transform 0.5s var(--cdx-ease), box-shadow 0.5s ease,
                border-color 0.4s ease;
}
.cdx-item-title {
    margin: 0;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--cdx-blu-scuro);
    text-transform: none;
}
.cdx-item-desc {
    margin: 0;
    flex: 1 1 auto;
    color: #46586f;
    font-size: 0.95rem;
    line-height: 1.55;
}
.cdx-rail-item .btn { margin-top: 4px; }

@media (hover: hover) {
    .cdx-rail-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 22px 44px rgba(0, 33, 71, 0.14);
        border-color: rgba(6, 147, 227, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdx-rail-item { transition: none !important; transform: none !important; }
}

/* Poche schede: il binario le centra invece di lasciarle a sinistra.
   La classe la mette enhance.js dopo aver misurato, cosi' non si
   rischia il centraggio su un binario che invece scorre - li' le
   prime schede finirebbero fuori dallo scorrevole. */
.cdx-rail-centrato .cdx-rail-track {
    justify-content: center;
}

/* The actual timeline (the vertical ruler) */
.main-timeline {
  position: relative;
}
/* The actual timeline (the vertical ruler) */
.main-timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: #051637;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  z-index: 0;
}
/* Container around content */
.timeline {
  position: relative;
  background-color: inherit;
  width: 50%;
  z-index: 10;
}
/* The circles on the timeline */
.timeline::after,
.timeline .timeline-pointer-container {
  content: "";
  position: absolute;
  right: -18px;
  top: 10px;
  border-radius: 50%;
}
.timeline .timeline-pointer-container {
  border: 6px solid #051637;
}
.timeline .timeline-pointer-container .timeline-pointer {
  width: 25px;
  height: 25px;
  background-color: #00a5e6;
  border: 5px solid #ffffff;
  display: block;
  border-radius: 50%;
}
/* Place the container to the left */
.left {
  padding: 0px 40px 20px 0px;
  left: 0;
}
/* Place the container to the right */
.right {
  padding: 0px 0px 20px 40px;
  left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 50;
  right: 30px;
  left: auto;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 50;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after,
.right .timeline-pointer-container {
  left: -18px;
  right: auto;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline::after {
    left: 31px;
  }
  /* Full-width containers */
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  /* Make sure that all arrows are pointing leftwards */
  .timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }
  /* Make sure all circles are at the same spot */
  .left::after,
  .right::after {
    left: 18px;
  }
  .left::before {
    right: auto;
  }
  /* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }
  .right .timeline-pointer-container {
    left: 13px;
    right: auto;
  }
  .timeline .timeline-pointer-container {
    left: 13px;
  }
  .timeline::after,
  .timeline .timeline-pointer-container {
    right: auto;
  }
}
.post-date {
  float: left;
  margin-right: 10px;
  text-align: center;
}
#siteSearchInput {
  display: inline-block;
  width: 120px;
  /* initial width */
  max-width: 100%;
  box-sizing: border-box;
  -webkit-transition: width 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out;
  transition: width 0.3s ease-in-out;
  outline: none;
}
#siteSearchInput:focus {
  width: 200px;
  /* expanded width on focus */
  outline: none;
  color: black;
  /* optional: subtle focus ring */
  box-shadow: 0 0 0 3px rgba(0, 165, 230, 0.12);
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M2 2l12 12M14 2L2 14' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat center center;
}
@media (max-width: 990px) {
  input[type="search"]::-webkit-search-cancel-button {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black' stroke-width='2' stroke-linecap='round'><line x1='2' y1='2' x2='14' y2='14' /><line x1='14' y1='2' x2='2' y2='14' /></svg>") no-repeat center center;
  }
}
/* Default: small screens */
.responsive-text {
  color: black;
}
.bg-icon {
  background-color: #0693e3;
}
@media (min-width: 990px) {
  .responsive-text {
    color: white;
  }
  #siteSearchInput:focus {
    color: white;
  }
  .bg-icon {
    background-color: transparent !important;
  }
}
.icone-altezza {
  height: 90px;
  width: auto;
}
.background-blue {
  background: #001437;
}
tr {
  border-bottom: 1px solid #ddd !important;
}
tbody a {
  color: #ffffff;
  text-decoration: none;
}
#footer a,
#footer p {
  color: #B0B0B0 !important;
}
.footer-heading {
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 14px 0;
  text-transform: uppercase;
  color: var(--light);
}
.btn-primary {
  --hover: #0398F2 !important;
  background-color: #067BBC !important;
  border-color: #067BBC !important;
}
#sub-menu a {
  color: rgba(0, 0, 0, 0.65) !important;
}
.text-white p {
  color: #fff;
}
.header-title {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 1rem;
}
.header-subtitle {
  font-size: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .header-title {
    font-size: 2.7rem;
  }
  .header-subtitle {
    font-size: 1.2rem;
  }
}
@media (min-width: 992px) {
  .header-title {
    font-size: 3rem;
  }
  .header-subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }
}
/* Smooth transition for background color */
#header {
  transition: background-color 1s ease;
}
.dropdown-item.active-item {
  color: var(--bs-dropdown-link-active-color) !important;
  background-color: var(--primary) !important;
}
#header .header-nav.header-nav-stripe nav > ul > li:hover > a,
#header .header-nav.header-nav-stripe nav > ul > li.open > a,
#header .header-nav.header-nav-stripe nav > ul:not(:hover) > li > a.active {
  background-color: transparent !important;
  color: var(--primary) !important;
}
.btn-light {
  border-color: var(--light) !important;
}