/*
Theme Name: alfapi2026
Author: AlfaPi - Serena
Description: tema per AlfaPi srl
Version:1.0
Text Domain: alfapi2026
*/


:root {
    --font-1: 'Outfit';
    --font-2: 'Patrick Hand';
    --font-awesome: 'Font Awesome 7 Free';
    --colore-1: #FF4E0D;
    --colore-2: #787878;
    --colore-3: #1B1B1B;
    --colore-4: #707070;
    --colore-5: #FF760D;
    --colore-6: #FFA642;
    --colore-7: #5C5C5C;
    --colore-8: #F2F2F1;
    --text-color: var(--colore-3);
    --menu-color: var(--colore-3);
    --menu-hover: var(--colore-1);
    --border-radius-box: 16px;
    --border-radius-img: 9px;
}

body {
    padding: 0;
    margin: 0;
    color: var(--text-color);
    overflow-x: hidden;
    font-family: var(--font-1);
    font-weight: 400;
    font-size: 1.25rem;
}

body,
html {
    height: 100%;
    width: 100%;
    position: relative;
    touch-action: pan-y;
}

@media (max-width: 1199.98px) {
    body {
        font-size: 1.25rem;
    }
}

.container-fluid {
    max-width: 1920px;
}


.container-fluid.boxed {
    width: 90%;
    max-width: 1600px;
    padding-block: 80px;
}

.container-fluid.boxed-big {
    width: 90%;
    max-width: 1800px;
    padding-block: 80px;
}


 

.fiocco-animato {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1050px; /* regola tu */
    background-image: url(images/Fiocco_Animato.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;

    z-index: -1; /* QUI la magia */
    pointer-events: none; /* non interferisce */
}





a {
    color: var(--colore-1);
}

a,
a:hover {
    text-decoration: none;
}

strong {
    font-weight: 700;
}

.box-sfumatura {
    box-shadow: 3px 11px 34px #00000029;
    background-color: transparent;
}

a.cta {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    border: 2px solid var(--colore-1);
    border-radius: 12px;
    text-align: center;
    padding: 10px 50px;
}

a.cta.colorato {
    color: var(--colore-1);
    font-size: 1.25rem;
}

a.cta.dark {
color: var(--text-color);
 
}

 

.more a {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
}

a:hover {
    text-decoration-color: var(--colore-1);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

a.cta:hover {
    background: transparent linear-gradient(270deg, var(--colore-5) 0%, var(--colore-1) 100%);
    color: #fff;
}


/* HEADING */
h1 {
    color: var(--colore-1);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    margin-bottom: 40px;
}

h2 {
    font-size: clamp(1.675rem, 4vw, 2.25rem);
}


/* MAIN MENU */
/* --------------------------------------------------
   BACKGROUND MENU
-------------------------------------------------- */
.bg-main-menu {
    background: linear-gradient(180deg, #fff 0%, #F0F0F0 82%, #D5D5D5 100%);
}

.bg-menu-colorato {
    background: linear-gradient(270deg, var(--colore-1) 0%, var(--colore-5) 100%);
    border-radius: 0 0 0 12px;
    padding-block: 7px;
}

/* --------------------------------------------------
   NAVBAR BASE
-------------------------------------------------- */
.navbar {
    z-index: 1000;
}

.navbar-nav {
    position: static;
}

.nav-item {
    margin: 0 10px;
}

.nav-item:last-of-type {
    margin-right: 20px;
}

.navbar-nav .nav-link {
    font-size: 1.25rem;
    color: var(--menu-color);
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: var(--menu-hover);
}

/* Menu colorato */
.bg-menu-colorato .navbar-nav .nav-link,
.bg-menu-colorato .navbar-nav .nav-link:hover,
.bg-menu-colorato .dropdown-toggle:after {
    color: #fff !important;
}

/* --------------------------------------------------
   DROPDOWN BASE
-------------------------------------------------- */
.dropdown {
    position: relative;
}

/* Mostra dropdown */
.dropdown:hover>.dropdown-menu {
    display: block;
    background: linear-gradient(180deg, #fff 0%, #F0F0F0 82%, #D5D5D5 100%);
}

/* Dropdown centrato */
.dropdown .dropdown-menu {
    left: 50%;
    transform: translate(-50%, 8px);
}

/* Ponte invisibile */
.dropdown:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 20px;
    top: 100%;
    background: transparent;
    z-index: 1;
}

/* Dropdown menu */
.navbar-nav .dropdown-menu {
    border-radius: 0 0 16px 16px;
    padding: 0;
    background-color: #fff;
    border: none;
    transition: 0.3s;
}

/* Dropdown item */
.dropdown-item {
    color: var(--text-color);
    font-size: 1.25rem;
    padding: 15px 25px 0 25px;
}

.dropdown-item:hover {
    background: transparent;
    color: var(--menu-hover);
}

.dropdown-menu li:last-of-type {
    padding-bottom: 25px !important;
}

/* Freccia FontAwesome */
.dropdown-toggle:after {
    content: "\f078";
    font-family: var(--font-awesome);
    margin-left: 5px;
    font-weight: 900;
    font-size: .8rem;
    position: relative;
    top: 2px;
    color: var(--colore-1);
    border: none;
}

.dropdown-toggle:hover:after {
    content: "\f077";
}

/* Stato attivo */
.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu li.active a {
    background-color: transparent;
    color: var(--menu-hover) !important;
}

/* --------------------------------------------------
   MEGAMENU
-------------------------------------------------- */
.megamenu {
    position: static;
}

/* --------------------------------------------------
   MEGAMENU (centrato come il dropdown)
-------------------------------------------------- */
.megamenu .dropdown-menu {
    max-width: 1320px;
    width: 100%;
    column-count: 2;
    column-gap: 40px;
    padding: 20px 30px;
}


/* Evita spezzamento colonne */
.megamenu .dropdown-menu li {
    break-inside: avoid;
}

@media (max-width:1199px) {
    #mobile-menu.menu-open {
        position: fixed;
        top: 53px;
        left: 0;
        width: 100vw;
        height: 100dvh;
        z-index: 9999;
        overflow-y: auto;
        padding: .5rem;
        display: block !important;
        padding-bottom: 7vh;
    }

    body.mobile-menu-open {
        overflow: hidden;
        height: 100vh;
    }

    #navbar-close {
        position: fixed !important;
        right: 25px;
        cursor: pointer;
        z-index: 10000;
        position: relative;
    }

    .navbar-toggler:focus {
        box-shadow: none
    }

    .main-menu {
        margin-block: 0;
        background: transparent linear-gradient(270deg, var(--colore-1) 0%, var(--colore-3) 100%) 0% 0% no-repeat padding-box;
    }

    .main-menu .nav-item {
        margin: 15px 15px 15px 30px;
    }

    .navbar-nav .nav-link {
        color: #fff !important;
    }

    .navbar-nav .nav-link.active,
    .dropdown-item.active {
        color: var(--colore-2) !important;
    }

    .dropdown-menu {
        display: block;
        padding: 0;

        width: calc(100% - 40px);
    }

    .dropdown-item {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        color: #fff;
        padding-inline: 0;
    }

    .dropdown-toggle:after {
        content: initial;
    }

    .nav-link {
        display: initial;
        font-weight: 500;
    }

    .dropdown:hover>.dropdown-menu {
        display: block;
        background: transparent;
        box-shadow: initial;
        padding: 0;
        border-bottom-left-radius: initial;
        border-bottom-right-radius: initial;
        margin-left: initial;
    }

    .dropdown-item:active,
    .dropdown-item:focus,
    .dropdown-item:visited {
        background-color: transparent;
    }

    .navbar-nav .dropdown-menu {
        border-radius: unset;
        padding: 0 !important;
        background: transparent;
        width: 90%;
        margin-left: 10%;
        width: 100%;
        margin-left: 0;
        position: static !important;
        transform: none !important;
    }

    .current-menu-item .dropdown-item {
        color: #fff;
        width: fit-content;
    }

    #navbar-close {
        position: fixed !important;
        cursor: pointer;
        z-index: 10000;
        position: relative;
    }

    #menu-main-menu-mobile {
        display: block !important;
        text-align: center;
    }

    #menu-main-menu-mobile>.nav-item {
        text-align: left;
    }
}


/* BREADCRUMBS */

.breadcrumbs {
    font-size: 1rem;
    color: var(--text-color);
    margin: 1rem;
}

.breadcrumbs a {
    color: var(--text-color);
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--colore-1);
    text-decoration: underline;
}

.breadcrumbs .separator {
    margin: 0 0.35rem;
    color: var(--text-color);
}

.breadcrumbs span {
    color: var(--colore-1);
    font-weight: 500;
}


/* BOX HERO */
.box-hero {
    padding: 100px 60px;
    background-color: var(--colore-8); 
    
}

.box-hero span {
    font-size: 2.75rem;
    line-height: 1;
}

.box-hero p:first-of-type {
    font-size: clamp(2.6rem, 8vw, 4.1rem);
    margin-block: 25px 50px;
    line-height: 1;
}

.box-hero p:first-of-type strong {
    color: var(--colore-1);
}

.box-hero p:last-of-type {
    font-size: clamp(1.2rem, 3vw, 2.2rem);
   
    padding-right: clamp(0px, 3vw, 3vw);
    line-height: 1.1;
    margin-bottom: 40px;
}

/* BOX BLOG HP */
.box-blog-hp a {
    font-size: clamp(2.25rem, 5vw, 4.875rem);
    color: var(--colore-2);
    font-weight: 700;
}

.box-blog-hp span {
    text-transform: capitalize;
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--colore-1);
}

.box-blog-hp .intro {
    font-size: 1.875rem;
}


/* BOX TEAM */
.box-team {
    border-radius: 12px;
}

.box-team img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: var(--colore-6);
}

.box-team h3 a {
    color: var(--colore-1);
    font-size: 1.75rem;
    text-decoration: none;
}

.box-team .ruolo {
    font-size: 1.25rem;
    line-height: 1;
    margin-bottom: 0;
}

.box-team .citazione {
    color: var(--colore-4);
    font-style: italic;
}

/* BOX LAVORI */
.tax-argomenti {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.tax-argomenti li {
    display: inline-block;
}

.tax-argomenti.box li:first-of-type {
    color: #fff;
    opacity: .3;
    font-size: 2.5rem;
    line-height: 1;
}

.tax-argomenti:not(.box) a {
    color: var(--text-color);
    text-transform: uppercase;
    font-size: 1.2rem;
    border-radius: 22px;
    border: 2px solid var(--colore-1);
    padding: 10px 25px;
    font-weight: 500;
    display: block;
}

.tax-argomenti:not(.box) a:hover {
    color: #fff;
    text-decoration: none;
    background-color: var(--colore-1);
}

.tax-argomenti:not(.box) li.active a {
    background: var(--colore-1);
    color: #fff;
}

.tax-argomenti.box a {
    color: #fff;
    font-weight: 500;
}

.tax-argomenti.box a:hover {
    text-decoration: underline;
}

.box-lavori {
    background: transparent linear-gradient(338deg, #8F0000 0%, var(--colore-1) 100%);
    padding: 50px 100px;
}

.box-lavori h2 a {
    color: #fff;
    font-size: 4rem;
    font-weight: 700;
}

.box-lavoro.archive {
    border-radius: 12px;
}

.box-lavoro img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.box-lavoro .contenuto {
    padding: 0 20px;
    align-items: flex-start;
}

.box-lavoro h2,
.box-lavoro h3 {
    font-size: 2rem !important;
}

.box-lavoro h2 a,
.box-lavoro h3 a {
    font-size: 2rem;
    color: #fff;
}

.box-lavoro div.more a {
    color: #fff;
}

.box-lavori h2 a:hover,
.box-lavoro div.more a:hover,
.box-lavoro h2 a:hover,
.box-lavoro h3 a:hover {
    text-decoration-color: #fff;
}

.box-lavoro.archive div.more a:hover,
.box-lavoro.archive h2 a:hover {
    text-decoration-color: inherit;
}

.box-lavoro.archive div.more a,
.box-lavoro.archive h2 a,
.box-lavoro.archive div.more a:hover,
.box-lavoro.archive h2 a:hover,
.box-lavoro.archive .contenuto .excerpt {
    color: inherit;
}

.box-lavoro .contenuto .excerpt {
    font-size: 1.4rem;
    color: #fff;
    line-height: 1.1em;
}

/* dettaglio lavoro */
.header-lavoro {
    position: relative;
    text-align: center;
    padding-block: 20px 40px;
    overflow: visible;
    /* IMPORTANTE: non deve tagliare ::after */
    background-image: linear-gradient(2deg, var(--colore-6) 0%, var(--colore-1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: url('images/header-lavoro-mask.svg');
    mask-image: url('images/header-lavoro-mask.svg');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
}


/* Linea tratteggiata curva sopra */
.header-lavoro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    height: 60px;
    background-image: url('images/header-lavoro-curve.svg');
    background-repeat: no-repeat;
    background-size: 100% 40px;
    background-position: bottom center;
    pointer-events: none;
}

.header-lavoro h1 {
    color: #fff;
    font-size: clamp(2.4rem, 4vw+1rem, 5.5rem);
    font-weight: 700;
    margin-bottom: 0;
}

.header-lavoro .tag {
    background: var(--colore-3);
    color: #fff;
    padding: 0 14px 2px 14px;
    font-size: 1.5rem;
    display: inline-block;
    white-space: nowrap;
}

.header-lavoro .tag-list {
    margin-block: 20px 80px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.lavoro .wrapper-img {
    position: relative;
    z-index: 5;
    /* sopra la curva */
    margin-top: -140px;
    /* sovrapposizione */
    text-align: center;
}

.lavoro .wrapper-img img {
    display: block;
    margin: 0 auto;
}

/* CONTENUTI */
.sommario {
    font-size: 1.75rem;
}

.sommario p {
    font-size: 2rem !important;
    color: var(--colore-7);
}

.contenuto h1 {
    font-size: clamp(1.7rem, 3vw + 1rem, 5.75rem);
    font-weight: 700;
}

.contenuto h2 {
    font-size: clamp(1.7rem, 3.2vw + 0.5rem, 4.75rem);
    color: var(--colore-1);
    font-weight: 700;
    border-bottom: 2px dashed var(--colore-1);
    margin-block: 80px 40px;
}



.contenuto h3 {
   font-size: 2.5rem;
    color: var(--colore-7);
    font-weight: 700;
    border-bottom: 2px dashed var(--colore-7);
    margin-block: 80px 40px;
}

.contenuto .sommario img {
    border-radius: 40px;
    margin-block: 40px;
}

.contenuto p,
ul,
li {
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 300;
    font-size: 1.5rem;
}

.contenuto ol,
.contenuto ul {
    margin: 2em 100px 2em 150px;
}

.contenuto ul li,
.contenuto ol li {
    list-style-type: none;
    position: relative;
    left: 2rem;
    margin-bottom: 1em;
    width: calc(100% - 4rem);
    margin-block: 0 40px;
    line-height: 1.2em;
}

.contenuto ol li {
    counter-increment: list;
}

.contenuto ul li:before {
    content: '\f534';
    position: absolute;
    left: -4rem;
    top: 0;
    font-family: var(--font-awesome);
    font-weight: 900;
    color: var(--colore-1);
}

.contenuto ol li:before {
    content: counter(list);
    position: absolute;
    width: 35px;
    text-align: center;
    font-weight: 300;
    color: #fff;
    border-radius: 50%;
    height: 35px;
    left: -4rem;
    top: 5px;
    background-color: var(--colore-1);
    font-size: 1.5rem;
}

.contenuto .post-card__tags {
    position: initial;
    margin: 20px 0;
}

.contenuto .post-card__tags .tag {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    font-size: 1.1rem;
    margin-right: 6px;
    border-radius: 6px;
    border: 2px solid var(--colore-7);
    color: var(--colore-7);
}

/* FOOTER */
footer {
    background-color: var(--colore-3);
    color: #fff;
    padding: 50px 0;
    font-size: 1rem;
    margin-top: 100px;
}

footer .frasette {
    border-bottom: 5px dashed rgba(255, 255, 255, .125);
    padding-bottom: 40px;
    display: flex;
    align-items: flex-end;
}

footer .frasette .frase {
    font-size: 2.5rem;
    color: #fff;
    position: relative;
    padding-left: 80px;
    font-weight: 300;
    line-height: 1;
}

footer .frasette .frase::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 58px;
    background-image: url('images/Virgolette.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   
}

footer .frasette .autore {
    color: rgb(255 255 255 / 35%);
    font-size: 1.3rem;
}

footer .ragione-sociale {
    padding-block: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

footer .ragione-sociale-testi {
    display: flex;
    flex-direction: column;
    text-align: left;
}

footer .ragione-sociale-testi span:first-of-type {
    color: #fff;
    font-size: 4.5rem;
}

footer .ragione-sociale-testi span:last-of-type {
    color: var(--colore-1);
    font-size: 1.75rem;
}

footer a {
    color: #fff;
}

footer i {
    color: var(--colore-1);
}

footer a:hover {
    color: var(--colore-1);
}

footer ul.social li a i,
footer ul.social li a {
    color: #fff;
    font-size: 2.2rem;
    color: var(--colore-1);
}

footer ul.social li a:hover,
footer ul.social li a:hover i {
    color: #fff;
}

footer ul.dati {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 20px;
}

footer ul.dati li {
    font-size: 1.1rem;
}


/* TESTIMONIANZE */
.box-testimonianza {
    border-radius: 10px;
}

/* Narratore sovrapposto */
.narratore-overlay {
    position: absolute;
    top: -25px;
    left: 25px;
    z-index: 10;
}

/* Spazio sotto il narratore */
.box-testimonianza .testimonianza-testo {
    margin-top: 90px;
    /* questo evita la sovrapposizione */
    font-size: 1.1rem;
}

/***** BLOCCHI GUTENBERG ******/

/********************* ACF BLOCK Box servizio *****************/
.box.servizio {
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/********************************************
 * COLONNA IMMAGINI
 ********************************************/
.box.servizio .immagini .img-bg {
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.box.servizio .immagini .overlay-wrapper {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    width: auto;
}

.box.servizio .immagini .mascotte {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/********************************************
 * SLOGAN — STILE BASE (fumetto laterale)
 ********************************************/
.box.servizio .slogan {
    position: relative;
    background-color: #fff;
    color: var(--colore-1);
    padding: 0.6rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.4rem);
    text-align: center;
    white-space: nowrap;
    width: fit-content;
    margin: 40px 0;
    font-family: var(--font-2);
}

/* Ombra triangolo */
.box.servizio .slogan::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -26px;
    transform: translateY(-50%);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 22px solid rgba(0, 0, 0, 0.12);
    filter: blur(4px);
    z-index: 0;
}

/* Triangolo bianco */
.box.servizio .slogan::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 18px solid #fff;
    z-index: 1;
}

/********************************************
 * SLOGAN — VERSIONE HOME (sopra mascotte)
 ********************************************/
.box.servizio:not(.dettaglio) .slogan {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(-25deg);
    margin-left: -40px;
    /* spostamento indietro */
}

/* Rimuove triangolo laterale */
.box.servizio:not(.dettaglio) .slogan::before {
    content: initial;
}

/* Punta centrata sulla mascotte */
.box.servizio:not(.dettaglio) .slogan::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #fff;
}

/********************************************
 * COLONNA CONTENUTO
 ********************************************/
.box.servizio h2 a {
    background: linear-gradient(271deg, var(--colore-5) 0%, var(--colore-1) 100%);
    border-radius: 7px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 5px 15px;
}

.box.servizio span p {
    font-size: 2.75rem;
    font-weight: 300;
    color: var(--colore-2);
    line-height: 1;
}

.box.servizio p {
    font-size: 1.25rem;
}


/********************************************
 * VERSIONE DETTAGLIO
 ********************************************/
.box.servizio.dettaglio .immagini .img-bg {
    border-radius: 0;
}

.box.servizio.dettaglio .immagini .mascotte {
    width: 420px;
}

.box.servizio.dettaglio h1 {
    background-color: var(--colore-1);
    color: #fff;
    font-size: clamp(1rem, 5vw, 1.4rem);
    font-weight: 400;
    border-radius: 9px;
    padding: 10px 30px;
    display: inline-block;
}

.box.servizio.dettaglio span p {
    font-size: 6.1rem;
    color: var(--text-color);
}

.box.servizio span p strong {
    color: var(--text-color);
}

.box.servizio.dettaglio span p strong {
    color: var(--colore-1);
    display: block;
}

.box.servizio.dettaglio p {
    font-size: 2.1rem;
}

.box.servizio p strong {
    color: var(--colore-1);
}


/********************* ACF BLOCK Box conversazione *****************/
.box-conversazione {
    background: #fff;
    padding: 25px 40px;
    border-radius: 12px;
    display: block;
    position: relative;
    transform-origin: center;
}

/* freccia */
.box-conversazione::before {
    content: "";
    position: absolute;
    filter: blur(4px);
    top: 50%;
    left: -26px;
    transform: translateY(-50%);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 26px solid rgba(0, 0, 0, 0.12);
    border-left: none;
}

.box-conversazione::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -22px;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 26px solid #fff;
    border-left: none;
    transform: translateY(-50%);
}

/* Freccia a destra SOLO quando raggruppato */
.box-conversazione.dx-raggruppato::before {
    left: auto;
    right: -26px;
}

.box-conversazione.dx-raggruppato::after {
    left: auto;
    right: -20px;
}

.box-conversazione.dx-raggruppato::after,
.box-conversazione.dx-raggruppato::before {
    transform: translateY(-50%) scaleX(-1);
}

.box-conversazione .info {
    color: var(--colore-1);
    margin-bottom: 20px;
    line-height: 1em;
}

.box-conversazione p {
    font-size: 1.5rem;
    line-height: 1.1em;
    margin-bottom: 0;
}

.conversazione-raggruppata .box-conversazione p {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: normal;
}



.box-conversazione .testo.raggruppato p {
    font-size: 1.1rem;

}

.box-conversazione .orario {
    font-size: 1rem;
    opacity: .4;
}





/********************* ACF BLOCK Box fumetto *****************/
.box-fumetto {
    background: #fff;
    padding: 25px 40px;
    border-radius: 12px;
    display: inline-block;
    position: relative;
    transform-origin: center;
}

/* Margine solo quando non è sx o dx */
.box-fumetto:not(.sx):not(.dx) {
    margin-top: 60px;
}

/********************************************
 * TRIANGOLINO — VERSO IL BASSO (DEFAULT)
 ********************************************/
.box-fumetto::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 55px;
    transform: translateX(-50%);
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 22px solid rgba(0, 0, 0, 0.12);
    filter: blur(4px);
}

.box-fumetto::after {
    content: "";
    position: absolute;
    top: -26px;
    left: 55px;
    transform: translateX(-50%);
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 26px solid #fff;
    z-index: 1;
}

/********************************************
 * TRIANGOLINO — VERSO DESTRA (classe .sx)
 ********************************************/
.box-fumetto.sx::before {
    top: 60px;
    left: -26px;
    transform: translateY(-50%);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 26px solid rgba(0, 0, 0, 0.12);
    border-left: none;
}

.box-fumetto.sx::after {
    top: 40px;
    left: -22px;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 26px solid #fff;
    border-left: none;
    transform: initial;
}

/********************************************
 * TRIANGOLINO — VERSO SINISTRA (classe .dx)
 ********************************************/
.box-fumetto.dx::before {
    top: 40px;
    left: 101%;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 26px solid rgba(0, 0, 0, 0.12);
    border-right: none;
    transform: initial;
}

.box-fumetto.dx::after {
    top: 40px;
    left: 100%;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 26px solid #fff;
    border-right: none;
    transform: initial;
}

/********************************************
 * TESTI INTERNI
 ********************************************/
.box-fumetto .titolo {
    color: var(--colore-1);
    font-size: clamp(2rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
}

.box-fumetto .sottotitolo {
    font-size: 1.5rem;
    font-weight: 700;
    padding-block: 15px 0;
}

.box-fumetto p {
    font-size: 1.5rem;
    color: var(--colore-7);
    line-height: 1.1em;
    margin-bottom: 0;
}


/********************* ACF BLOCK Box punti *****************/
.box-punto {
    padding: 0 70px;
}

.box-punto .numero {
    position: absolute;
    top: -4rem;
    left: 0;
    font-size: 12rem;
    font-weight: 700;
    line-height: 1;
    z-index: -1;
    color: rgb(232 232 232 / 47%);
}

.box-punto .titolo {
    color: var(--colore-1);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1em;
    margin-bottom: 20px;
}

.box-punto .testo {
    font-size: 1.5rem;
    color: var(--colore-7);
    font-weight: 300;
}


/********************* ACF BLOCK Box leggi post + index.php *****************/
.post-card {

    border-radius: 12px;
    background: #fff;

    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* Layout verticale (default) */
.post-card--vertical {
    flex-direction: column;
}

/* Layout orizzontale */
.post-card--horizontal {
    flex-direction: row;
    align-items: stretch;
}


.post-card__image {
    position: relative;
    width: 100%;

    overflow: hidden;
}

.post-card--horizontal .post-card__image {
    width: 40%;
    min-height: 100%;
}

.post-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: luminosity;
}

.post-card__image img:hover {

    mix-blend-mode: normal;
}


.post-card__date {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #fff;
    padding: 5px 20px;
    font-size: 1rem;
    border-radius: 6px;
    background-color: var(--colore-1);

}

.post-card__tags {
    position: absolute;
    bottom: 15px;
    left: 15px;
}



.post-card__tags .tag {
    display: inline-block;
    background: #fff;
    padding: 0 10px;
    font-size: 1rem;
    margin-right: 6px;
    margin-bottom: 6px;
    border-radius: 6px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    color: var(--text-color);
}

.post-card__content {
    padding: 24px 30px;
    flex: 1;
}

.post-card__title a {
    color: var(--colore-1);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 700;
}

p.post-card__excerpt {
    margin: 24px 0;
    font-size: 1.25rem;
}



/*Featured (primo post del box-blog)*/
.post-card--featured .post-card__image {
    border-radius: 12px 12px 0 0;
}


.post-card--featured .post-card__image img:hover {
    mix-blend-mode: normal;
}

@media (max-width: 768px) {
    .post-card--horizontal {
        flex-direction: column;
    }

    .post-card--horizontal .post-card__image {
        width: 100%;
        min-height: 250px;
    }
}

/* INVITO */
.post-invito {
    background: #fff;
    padding: 35px 40px;
    border-radius: 12px;
    display: inline-block;
    position: relative;
    transform-origin: center;

    color: var(--colore-1);
    font-size: clamp(2rem, 6vw, 2.5rem);
    font-weight: 700;
    line-height: 1;

    width: 90%;
}

/* Ombra laterale */
.post-invito::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 102%;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 22px solid rgba(0, 0, 0, 0.12);
    filter: blur(4px);
    transform: translateY(-50%);
}

/* Freccia bianca */
.post-invito::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    z-index: 1;
    border-top: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 26px solid #fff;
    transform: translateY(-50%);
}





/********************* ACF BLOCK Box team di lavoro *****************/
.box-team-lavoro {

    border-radius: 40px;
    margin-block: 60px 120px
}

.box-team-lavoro h2 {

    font-size: clamp(1.5rem, 2vw + 1rem, 3.5rem);
    font-weight: 300;
    color: var(--colore-7);
    text-align: center;
    padding-block: 20px;
    border-bottom: none;
    margin-bottom: 0;
}



/*************************** ACF Box Video ******************/
.video-wrapper {
    position: relative;
    width: 100%;
    margin-inline: auto;
    cursor: pointer;
    overflow: hidden;
    border-radius: 25px;
}

.video-wrapper.horizontal {
    aspect-ratio: 16 / 9;
    max-height: 918px;
}

.video-wrapper.vertical {
    aspect-ratio: 9 / 16;
    max-height: 560px;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background: url('images/play-solid-full.svg') no-repeat center center;
    background-size: contain;
    border: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: .7;
}

hr.video-divider {
    margin: 100px 0;
    border-top: 1px solid var(--colore-12);
}

@media (max-width:991px) {
    .video-play {
        width: 50px;
        height: 50px;
    }
}



/********************* ACF BLOCK Box immagine testo *****************/


.box-img-testo h2 {
    font-size: 3rem;
}

.box-img-testo .sottotitolo {
    font-weight: 500;
}

.box-img-testo img {
    border-radius: 12px;
}





/* BOX NARRATORE */







.narratore {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    margin-block: 24px;
}

.narratore__img img {
    border-radius: 50px;
    border: 3px solid #fff;
    background: var(--colore-6);
    transform: rotate(-30deg);
    overflow: hidden;
    box-shadow: 3px 11px 34px #00000029;
      width: 120px;
    height: 80px;
    object-fit: contain;
}

.narratore__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.narratore__nome {
    line-height: 1;
    margin-bottom: 0;
    color: var(--colore-1);
    font-size: 1.5rem;
}

.narratore__nome a {
    color: var(--colore-1);
    font-size: 1.5rem;

}

.narratore__ruolo {
    font-size: 1.25rem !important;
    line-height: 1;
    margin-bottom: 0;
    color: var(--colore-2);
    font-weight: 400 !important;
}





/* Variante conversazione (+mini per img) */
.narratore-conversazione .narratore__img img,
.narratore-mini .narratore__img img {
    width: 75px;
    height: 55px;
   
}

.narratore-conversazione .narratore__nome a {
    font-size: 1.3rem;
    line-height: 1.1;
}

.narratore-conversazione .narratore__ruolo {
    font-size: 1.1rem;
    color: var(--colore-7);
    line-height: 1;
}

.narratore-conversazione .narratore__info {
    margin-top: 0;
}





/* Layout verticale */
/* Layout verticale: override completo del layout base */
.narratore-layout-verticale {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    margin-block: 0;
}

/* Immagine in verticale */


/* Info sotto l’immagine */
.narratore-layout-verticale .narratore__info {
    margin-top: .5rem;
}






/*   PAGINAZIONE */
.pagination {
    margin: 0 auto;
    width: fit-content;
}

.pagination .page-numbers {
    padding: 10px 15px;
    color: var(--text-color);
    font-size: 2rem;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    color: var(--colore-1);
    font-weight: 500;
    text-decoration: none;
}