@charset "utf-8";

/* ======================================================================
   Variabili e base
====================================================================== */
:root{
    --brand:#C11B17;
    --text:#6f6f6f;
    --bg:#fff;
    --muted:#f3f3f3;
    --sidebar-w:400px;
    --radius:10px;
}
@media (max-width:1600px){
    :root{ --sidebar-w:360px; }
}

/* Home: elimina lo spazio bianco sotto l’ultima sezione (WordPress/Elementor) */
body.home .elementor-section-wrap > .elementor-section:last-child{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Contenitore principale senza padding/margine in fondo */
body.home #content,
body.home #primary,
body.home #main{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
body{
    margin:0;
    font-family:"Roboto",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:16px;
    line-height:1.8;
    letter-spacing:.2px;
    color:var(--text);
    background:#fff;
}
img{ max-width:100%; height:auto; display:block; }
svg{ width:15px; height:15px; fill:currentColor; }
a{ color:inherit; text-underline-offset:2px; }
a:hover{ color:var(--brand); }
:focus-visible{ outline:3px solid rgba(193,27,23,.35); outline-offset:2px; }
::placeholder{ color:#6f6f6f; opacity:1; }

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }

/* accessibilità */
.sr-only{
    position:absolute !important;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[hidden]{ display:none !important; }

/* ======================================================================
   Wrapper / Sezioni
====================================================================== */
.arlo_tm_all_wrap{ width:100%; min-height:100vh; overflow-x:hidden; }
.arlo_tm_section{ width:100%; }

.arlo_tm_preloader{ display:none; } /* tolto loader per snellire */

/* Titoli sezioni */
.arlo_title_holder{ margin:0 0 18px; }
.arlo_title_holder .eyebrow,
.arlo_title_holder>span{
    display:inline-block;
    font-size:16px;
    text-transform:uppercase;
    color:var(--brand);
    letter-spacing:.12em;
    font-weight:700;
}
.arlo_title_holder h2,
.arlo_title_holder h3{
    margin:.25rem 0 0;
    font-size:32px;
    line-height:1.2;
    text-transform:uppercase;
    font-weight:700;
    color:#000;
}
@media (max-width:768px){
    .arlo_title_holder h2,
    .arlo_title_holder h3{ font-size:26px; }
}

/* ======================================================================
   Sidebar sinistra
====================================================================== */
.arlo_tm_leftpart{
    position:fixed;
    inset:auto auto 0 0;
    top:0;
    width:var(--sidebar-w);
    background:#fff;
    z-index:15;
    box-shadow:0 0 30px rgba(0,0,0,.09);
    transition:transform .3s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.arlo_tm_leftpart .inner{
    height:100%;
    padding:30px 50px;
    position:relative;
}
.arlo_tm_leftpart .logo img{
    max-width:200px;
    height:auto;
    margin-bottom:40px;
}

/* menu */
.arlo_tm_leftpart .menu ul {
    list-style:none;
    margin:40px 0 0;   /* margine sopra di 40px */
    padding:0;
    min-height:calc(100% - 180px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.arlo_tm_leftpart .menu a{
    display:block;
    padding:12px 0;
    text-decoration:none;
    color:#000;
    border-bottom:1px solid rgba(0,0,0,.12);
    transition:color .2s ease, border-color .2s ease;
}

/* Hover: testo rosso + riga grigio chiaro */
.arlo_tm_leftpart .menu a:hover,
.arlo_tm_leftpart .menu a:focus-visible{
    color:var(--brand);
    border-bottom-color:#cfcfcf;
}

.arlo_tm_leftpart .menu li:last-child a{
    border-bottom:0;
}

/* social in basso */
.arlo_tm_leftpart .bottom{ position:absolute; right:30px; bottom:50px; }

/* base social (verrà rifinito in fondo per icone più grandi) */
.arlo_tm_leftpart .bottom .social ul{
    display:flex;
    gap:14px;
    margin:0;
    padding:0;
    list-style:none;
}
.arlo_tm_leftpart .bottom .social a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    color:#000;
    transition: color .2s ease;
}

/* hover: icone social rosse */
.arlo_tm_leftpart .bottom .social a:hover,
.arlo_tm_leftpart .bottom .social a:focus-visible{
    color: var(--brand);
}
/* Icone social più grandi nella sidebar (base) */
.arlo_tm_leftpart .bottom .social svg,
.arlo_tm_leftpart .bottom .social img.svg{
    width:26px;
    height:26px;
}

/* maniglia/resize */
.arlo_tm_leftpart .resize{
    position:absolute;
    right:0;
    bottom:20%;
    width:40px;
    height:40px;
    background:var(--brand);
    z-index:30;
    border-radius:10px 0 0 10px; /* sx smussato, dx dritto */
}
.arlo_tm_leftpart .resize .sidebar-toggle{
    position:absolute;
    inset:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

/* FRECCIA DEFAULT: punta a SINISTRA (sidebar aperta) */
.arlo_tm_leftpart .resize .sidebar-toggle .arrow{
    position:absolute;
    top:50%;
    left:14px;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:12px solid #fff;
}

/* STATI SIDEBAR */
.sidebar-collapsed .arlo_tm_leftpart{
    transform: translate3d(calc(-100% - 1px), 0, 0);
    box-shadow: none;
    border: none;
}
.sidebar-collapsed .arlo_tm_all_wrap{
    overflow-x:hidden;
}
.sidebar-collapsed .arlo_tm_leftpart .resize{
    right:-40px;
    border-radius:0 10px 10px 0;
}

/* quando la sidebar è collassata la freccia ruota e punta a DESTRA */
.sidebar-collapsed .arlo_tm_leftpart .resize .sidebar-toggle .arrow{
    transform:translateY(-50%) rotate(180deg);
}

@media (max-width:1040px){
    .arlo_tm_leftpart{ display:none; }
}

/* ======================================================================
   Topbar (mobile)
====================================================================== */
.arlo_tm_topbar{
    position:fixed; top:0; left:0; right:0; z-index:10;
    display:none; background:#fff; border-bottom:1px solid rgba(0,0,0,.12);
}
.arlo_tm_topbar .topbar_inner{ padding:14px 0; }
.arlo_tm_topbar .topbar_in{ display:flex; align-items:center; justify-content:space-between; }
.arlo_tm_topbar .menu-toggle{ border:0; background:transparent; font:inherit; cursor:pointer; }

#primary-nav-mobile[hidden]{ display:none; }
#primary-nav-mobile{
    background:#111;
    color:#fff;
    position:fixed;
    top:60px;
    right:0;
    left:0;
    padding:15px 25px;
    z-index:9999;
}
#primary-nav-mobile ul{
    list-style:none;
    margin:0;
    padding:0;
}
#primary-nav-mobile li{
    margin:8px 0;
}
#primary-nav-mobile a{
    color:#fff;
    text-decoration:none;
    font-size:16px;
}

@media (max-width:1040px){
    .arlo_tm_topbar{ display:block; }
}

/* ======================================================================
   Right part (contenuti)
====================================================================== */
.arlo_tm_rightpart{
    padding-left:var(--sidebar-w);
    transition:padding .3s ease;
}
.sidebar-collapsed .arlo_tm_rightpart{ padding-left:0; }
.arlo_tm_rightpart .rightpart_inner{ min-height:100vh; }
@media (max-width:1040px){
    .arlo_tm_rightpart{ padding-left:0; }
}

/* colori base sezioni (verranno poi sovrascritti dove serve) */
#services{ background:#f9f9f9; }
#contact{ background:#f9f9f9; }

/* ======================================================================
   HERO
====================================================================== */
.arlo_tm_hero_header{
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:#000 url("/img/slider/home.jpg?v=20260624") center center / cover no-repeat;
}
.arlo_tm_hero_header .hero_picture{
    position:absolute; inset:0; z-index:0; pointer-events:none; display:block;
}
#hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.arlo_tm_hero_header .hero_image{
    position:absolute;
    inset:0;
    background-image:url("/img/slider/home.jpg?v=20260624");
    background-size:cover;
    background-position:center;
    z-index:0;
}
.arlo_tm_hero_header .overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:1;
}
.hero_picture + .overlay{
    background: rgba(0,0,0,0.45); /* testo più leggibile sull'immagine */
}
#particles-js{ position:absolute; inset:0; z-index:2; }

.arlo_tm_hero_header .hero_content{
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
    text-align: center;
    z-index: 5;
    padding: 0 32px;
}
.arlo_tm_hero_header .name_holder h1,
.arlo_tm_hero_header .name_holder h2 {
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.08;
    letter-spacing:.02em;
    font-size:clamp(30px, 3.6vw, 46px);
}
.arlo_tm_hero_header .name_holder h2 span {
    color: var(--brand);
}

/* Riga con typing */
.hero-subtitle{
    font-size: clamp(16px, 1.6vw, 19px);
    font-weight: 600;
    color: #fff;
    margin-top: 8px;
    white-space: nowrap;
}
.typing-static-dot{
    display:inline-block;
    padding:0 4px;
}
.typing-target{
    display:inline-block;
    padding-right: 4px;
    white-space: nowrap;
    min-height: 1.2em;
    border-right: 2px solid #fff;
    animation: typing-caret 1s steps(1) infinite;
}
@keyframes typing-caret{
    0%, 50%{
        border-right-color: transparent;
    }
    51%, 100%{
        border-right-color: #fff;
    }
}
@media (max-width: 768px){
    .hero-subtitle{
        font-size: 22px;
        white-space: normal;
    }
}

/* freccia */
.arlo_tm_arrow_wrap{
    position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
    z-index:6; animation:bounce 2s infinite;
}
.arlo_tm_arrow_wrap a{
    display:flex; align-items:center; justify-content:center;
    width:60px; height:60px; background:var(--brand);
    border-radius:10px;
    color:#fff; font-size:28px; text-decoration:none;
}
@keyframes bounce{
    0%,20%,50%,80%,100%{ transform:translate(-50%,0); }
    40%{ transform:translate(-50%,-18px); }
    60%{ transform:translate(-50%,-8px); }
}
@media (prefers-reduced-motion:reduce){
    .arlo_tm_arrow_wrap{ animation:none; }
}

/* fix hero quando sidebar collassata/mobile */
.sidebar-collapsed #home .arlo_tm_hero_header{
    margin-left: 0;
    width: 100%;
}
@media (max-width:1040px){
    #home .arlo_tm_hero_header{
        margin-left: 0;
        width: 100%;
    }
}

/* ======================================================================
   ABOUT
====================================================================== */
#chi-sono{
    padding:140px 0 60px;
    color:#111;
}
#chi-sono p{
    color:#111;
    font-weight:400;
    line-height:1.7;
}
#chi-sono a{
    color:var(--brand);
    font-weight:600;
    text-decoration:underline;
}
.arlo_tm_about_wrap_all{ padding-top:0; }
.arlo_tm_about{ margin:0 0 40px; }
.text-justify{ text-align:justify; }

/* CHI SONO – stile tipo mock */
#chi-sono .about_inner{
    max-width: 980px;
    margin-inline: auto;
    padding-inline: 32px;
}
@media (min-width: 1440px){
    #chi-sono .about_inner{ max-width: 1100px; }
}
@media (max-width: 768px){
    #chi-sono .about_inner{ padding-inline: 20px; }
}
#chi-sono .about_inner p{
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    line-height: 1.85;
}

/* BIO + COMPETENZE */
#bio-competenze .bio-intro,
#bio-competenze .bio-tech{
    color:#222;
    font-size:clamp(17px,2vw,19px);
    line-height:1.85;
    margin:8px 0 16px;
}
#bio-competenze .sub-title{
    margin:10px 0 6px;
    font-size:clamp(18px,2vw,20px);
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#111;
}
#bio-competenze .skills-title{
    margin:18px 0 12px;
    padding-bottom:8px;
    border-bottom:2px solid rgba(0,0,0,.35);
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#000;
    font-size:clamp(20px,2.4vw,24px);
}
.skills-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:22px;
}
@media (min-width: 900px){
    .skills-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
}
.skills-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    padding:16px 18px;
    box-shadow:0 0 14px rgba(0,0,0,.04);
}
.skills-card h4{
    margin:0 0 10px;
    color:#111;
    font-size:clamp(16px,1.8vw,18px);
}
.skills-card ul{
    margin:0;
    padding-left:1.2em;
    list-style:square;
    color:#222;
}
.skills-card li{
    margin:6px 0;
    line-height:1.7;
}

/* ======================================================================
   SERVICES
====================================================================== */
#services{
    padding:140px 0 100px;
}
.services-list{
    list-style:none; margin:28px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
/* Card servizi */
.services-list .inner{
    background:#fff;
    border-radius:var(--radius);
    padding:32px;
    box-shadow:0 0 18px rgba(0,0,0,.08);
    transition:transform .15s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.services-list .inner:hover{ transform:translateY(-3px); }
.services-list h3{
    margin:0;
    font-size:18px;
    color:#000;
    text-align:center;
}
.services-list .inner .service-icon{
    width:72px;
    height:72px;
    object-fit:contain;
    margin:0 0 10px;
    display:block;
}

/* Progress / skill */
.arlo_tm_progress_wrap{ padding:60px 0 20px; }
.arlo_tm_progress_wrap .progress_wrap_inner{
    display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;
}
.arlo_tm_progress_wrap .main_title h3{ margin:.3rem 0 0; font-size:20px; }

.arlo_progress .progress_inner{ margin:0 0 16px; }
.progress_inner>span{
    display:flex;
    justify-content:space-between;
    margin:0 0 6px;
}

.progress_inner .background{
    width:100%;
    height:10px;
    background:#d9dce3;
    border:1px solid rgba(17,17,17,.12);
    border-radius:99px;
    overflow:hidden;
}

.progress_inner .background .bar{
    width:100%;
    height:100%;
}

.progress_inner .background .bar_in{
    width:var(--progress-value, 0);
    height:100%;
    background:#c11b17; /* il tuo rosso */
    transition: width 1.6s cubic-bezier(.165,.84,.44,1);
}

/* la classe .open serve solo a far partire la transizione sulla width */
.progress_inner .background .bar_in.open{
    /* niente width 100% qui, ci pensa il JS a mettere la percentuale giusta */
}

/* la classe .open serve solo a far partire la transizione sulla width */
.progress_inner .background .bar_in.open{
    /* niente width 100% qui, ci pensa il JS a mettere la percentuale giusta */
}

/* Barre competenze rosse */
.progress_inner[data-start] .background .bar_in,
.progress_inner[data-color] .background .bar_in{
    background: var(--brand);
}
@keyframes progress-fill{ from{width:0} to{width:100%} }

/* responsive services/progress */
@media (max-width:1200px){
    .services-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
    .services-list{ grid-template-columns:1fr; }
    .arlo_tm_progress_wrap .progress_wrap_inner{ grid-template-columns:1fr; }
}

/* testi vari */
.text{
    color:#000;
    font-weight:400;
}
.votazione{
    font-style:italic;
    font-weight:400;
}
.azienda{
    font-style: italic;
    font-weight: 400;
}

/* ======================================================================
   PORTFOLIO
====================================================================== */
#portfolio{ padding:140px 0 80px; }

.arlo_tm_portfolio .portfolio_filter{ margin:20px 0; }
.arlo_tm_portfolio .portfolio_filter ul{
    list-style:none; margin:0; padding:0; display:flex; gap:16px; flex-wrap:wrap;
}
.arlo_tm_portfolio .portfolio_filter button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 10px;
    font: inherit;
    color: #000;
    transition: color .2s ease;
}
/* rosso quando il filtro è attivo */
.arlo_tm_portfolio .portfolio_filter button.current {
    color: var(--brand);
}
/* hover/focus */
.arlo_tm_portfolio .portfolio_filter button:hover,
.arlo_tm_portfolio .portfolio_filter button:focus-visible {
    color: var(--brand);
}

.arlo_tm_portfolio .portfolio_list ul{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
}
.arlo_tm_portfolio .portfolio_list .inner{ position:relative; }
.arlo_tm_portfolio .portfolio_list .inner .main_image{
    position:absolute; inset:0; background-size:cover; background-position:center;
}

#portfolio-lavori .portfolio_list.portfolio_projects ul#work-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:30px;
    margin:0;
    padding:0;
}
#portfolio-lavori .portfolio_list.portfolio_projects ul#work-grid > li{
    width:auto;
    min-width:0;
    padding:0;
}

/* portfolio responsive */
@media (max-width:1200px){
    .arlo_tm_portfolio .portfolio_list ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
    .arlo_tm_portfolio .portfolio_list ul{ grid-template-columns:1fr; }
}
@media (max-width:992px){
    #portfolio-lavori .portfolio_list.portfolio_projects ul#work-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}
@media (max-width:600px){
    #portfolio-lavori .portfolio_list.portfolio_projects ul#work-grid{
        grid-template-columns:1fr;
    }
}

/* ======================================================================
   TESTIMONIALS
====================================================================== */
#testimonianze{
    margin:0 0 140px;
}
.arlo_tm_testimonial .testimonial_inner{ position:relative; }
.arlo_tm_testimonial .testimonial_bg{ position:absolute; inset:0; z-index:1; }
.arlo_tm_testimonial .testimonial_bg .image{
    position:absolute; inset:0; background-size:cover; background-position:center;
}
.arlo_tm_testimonial .testimonial_bg .overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.85);
}
.arlo_tm_testimonial .testimonial_content{
    position:relative; z-index:2; padding:140px 0;
}
.arlo_tm_testimonial .content_inner{
    border:10px solid rgba(238,238,238,.2);
    padding:48px 48px 52px 120px;
    position:relative; border-radius:var(--radius);
}
.arlo_tm_testimonial .icon{
    position:absolute; left:36px; top:44px; line-height:0;
}
.arlo_tm_testimonial .icon .svg{
    width:70px; height:70px; color:#FF5E5F;
}
.arlo_tm_testimonial .texts p{
    margin:0 0 18px; color:#eee; font-size:18px; font-weight:300;
}
.arlo_tm_testimonial .author .job{ padding-left:18px; color:#eee; }
.arlo_tm_testimonial cite{ font-style:normal; color:#fff; }

@media (max-width:768px){
    .arlo_tm_testimonial .content_inner{ padding:40px; border-width:0; }
    .arlo_tm_testimonial .icon{ position:relative; left:0; top:0; margin:0 0 14px; }
}

/* ======================================================================
   TIMELINE (esperienza / education)
====================================================================== */
#experience{ padding:120px 0 100px; }
.arlo_tm_timeline .timeline_inner{
    display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-top:40px;
}
.arlo_tm_timeline ul{
    list-style:none; margin:0; padding:0 0 0 40px; position:relative;
}
.arlo_tm_timeline ul::before{
    content:""; position:absolute; left:0; top:11px; bottom:5px; width:1px; background:rgba(0,0,0,.2);
}
.arlo_tm_timeline li{ margin:0 0 30px; }
.arlo_tm_timeline .svg{
    width:30px; height:30px; color:var(--brand); position:absolute; left:-55px; top:-3px;
}
.arlo_tm_timeline .year{ margin:0 0 8px; color:var(--brand); font-weight:600; }
.arlo_tm_timeline .title{
    margin:0 0 6px;
    font-size:18px;
    color:#000;
    font-weight:700;
}
@media (max-width:768px){
    .arlo_tm_timeline .timeline_inner{ grid-template-columns:1fr; }
}

/* fix icona/linea esperienza quando sidebar aperta */
@media (min-width:1041px){
    #experience .arlo_tm_timeline ul{
        padding-left:90px;
    }
    #experience .arlo_tm_timeline ul::before{
        left:55px;
    }
    #experience .arlo_tm_timeline .svg{
        left:0;
    }
}

/* ======================================================================
   NEWS / BLOG (Per le aziende)
====================================================================== */
#azienda{ padding:120px 0 80px; }
.arlo_tm_news .news_inner ul{
    list-style:none; margin:26px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
/* Overlay cliccabile sulle card "Per le aziende" */
#azienda .news_inner .image{
    position: relative;
}
#azienda .news_inner .image .azienda-link{
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
}

.azienda-form .checkbox{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:.9rem;
    white-space:nowrap;
}
.azienda-form button{
    margin-top:8px;
}

/* Bottone con i colori del sito */
.azienda-form button.arlo_tm_button{
    background:#C11B17;
    border:1px solid #C11B17;
    color:#fff;
    padding:10px 24px;
    border-radius:4px;
    cursor:pointer;
}
.azienda-form button.arlo_tm_button span{
    color:inherit;
}
.azienda-form button.arlo_tm_button:hover{
    background:#a01612;
    border-color:#a01612;
}
/* Pulsante invia con colori del sito (duplicato per sicurezza) */
.azienda-form .arlo_tm_button{
    background-color:#C11B17;
    border-color:#C11B17;
    color:#fff;
}
.azienda-form .arlo_tm_button span{
    color:inherit;
}
.azienda-form .arlo_tm_button:hover{
    background-color:#9e1513;
    border-color:#9e1513;
}

/* Popup generale un po' più ampio */
.arlo_tm_popup_news .container{
    max-width: 1200px;
}

/* Versione popup dedicata a Calendly (vecchia variante) */
.azienda-popup--calendly{
    max-width: 1100px;
    margin: 0 auto;
}
.azienda-popup--calendly .calendly-inline-widget{
    min-width: 100%;
    height: 850px;
    border: 0;
}

/* card base news */
.arlo_tm_news .inner{
    background:#fff; border-radius:var(--radius); overflow:hidden;
    box-shadow:0 0 18px rgba(0,0,0,.08);
}
.arlo_tm_news .image{ position:relative; }
.arlo_tm_news .image .main{
    position:absolute; inset:0; background-size:cover; background-position:center;
}
.arlo_tm_news .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.18); }
.arlo_tm_news .category{
    position:absolute; top:0; left:0; background:var(--brand); color:#fff;
    padding:4px 12px; font-size:12px;
}
.arlo_tm_news .details{ padding:20px 20px 26px; background:#f9f9f9; }
.arlo_tm_news .title{ margin:0; font-size:18px; }
.arlo_tm_news .title a{ color:#000; text-decoration:none; }

@media (max-width:1200px){
    .arlo_tm_news .news_inner ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
    .arlo_tm_news .news_inner ul{ grid-template-columns:1fr; }
}

/* ======================================================================
   CONTACT
====================================================================== */
#contact{
    padding:140px 0 150px;
}
.arlo_tm_contact .short_list ul{
    list-style:none; margin:28px 0; padding:0;
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.arlo_tm_contact .short_list .svg{
    width:25px; height:25px; color:var(--brand); margin:0 0 8px;
}
.arlo_tm_contact .short_list h3{
    margin:0 0 6px; font-size:20px; color:#000;
}

.contacts-link{
    display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
    padding:10px 16px; border-radius:6px; font-weight:700;
}

/* form (se usato) */
.arlo_tm_contact .fields ul{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.arlo_tm_contact .fields li.full{ grid-column:1/-1; }
.arlo_tm_contact input,
.arlo_tm_contact textarea{
    width:100%; border:1px solid rgba(0,0,0,.2); background:#fff; color:#000;
    padding:12px 14px; font:inherit; border-radius:6px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.arlo_tm_contact textarea{ min-height:120px; resize:vertical; }
.arlo_tm_contact input:focus,
.arlo_tm_contact textarea:focus{
    outline:none; border-color:rgba(0,0,0,.55);
    box-shadow:0 0 0 3px rgba(193,27,23,.15);
}

/* messaggi form */
.arlo_tm_contact .empty_notice,
.arlo_tm_contact .contact_error,
.arlo_tm_contact .returnmessage{
    font-weight:600; margin:8px 0 0;
}
.arlo_tm_contact .empty_notice,
.arlo_tm_contact .contact_error{ color:#F52225; }
.arlo_tm_contact .returnmessage{ color:#3A00FF; }

/* responsive contact */
@media (max-width:1200px){
    .arlo_tm_contact .short_list ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
    .arlo_tm_contact .short_list ul{ grid-template-columns:1fr; }
    .arlo_tm_contact .fields ul{ grid-template-columns:1fr; }
}

/* ======================================================================
   FOOTER
====================================================================== */
.arlo_tm_footer{
    background:#000; color:#fff; padding:42px 0;
}
.arlo_tm_footer .footer_inner{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.arlo_tm_footer a{
    color:#fff; text-decoration:none; border-bottom:1px solid transparent;
}
.arlo_tm_footer a:hover{
    border-bottom-color:#fff;
}
.footer-legal{
    list-style:none; margin:6px 0 0; padding:0; display:flex; gap:14px; flex-wrap:wrap;
}

/* toTop */
.arlo_tm_footer .top{ line-height:1; }
.arlo_tm_totop{
    position:relative; display:inline-block; padding:22px; border-radius:4px; background:var(--brand);
}
.arlo_tm_totop::after{
    content:""; position:absolute; top:14px; left:17px;
    border:5px solid transparent; border-bottom-color:#fff;
}

/* ======================================================================
   POPUP NEWS + Bottoni
====================================================================== */
.arlo_tm_popup_news{
    position:fixed; inset:0; background:rgba(0,0,0,.75); display:none; z-index:100;
}
.arlo_tm_popup_news.opened{ display:block; }
.arlo_tm_popup_news .news_inner{
    max-width:980px; margin:40px auto; background:#fff; padding:28px;
    border-radius:12px; overflow:auto; max-height:calc(100vh - 80px);
}
.arlo_tm_popup_news .closer{
    position:absolute; top:24px; right:24px; color:#fff; text-decoration:none; font-weight:700;
}
.arlo_tm_popup_news .image{ position:relative; margin-bottom:18px; }
.arlo_tm_popup_news .image .main{
    position:absolute; inset:0; background-size:cover; background-position:center;
}
.arlo_tm_popup_news .title{ margin:0 0 14px; }
.arlo_tm_popup_news .date{ margin:0 0 10px; }
.arlo_tm_popup_news .date a{
    color:var(--brand); text-decoration:none; border-bottom:1px solid transparent;
}
.arlo_tm_popup_news .date a:hover{ border-bottom-color:var(--brand); }

/* bottone generico */
.arlo_tm_button a{
    display:inline-block; padding:10px 34px; background:var(--brand);
    color:#fff; text-decoration:none; border-radius:6px;
    transition:box-shadow .2s ease, transform .1s ease;
}
.arlo_tm_button a:hover{ box-shadow:0 0 12px var(--brand); }
.arlo_tm_button a:active{ transform:translateY(1px); }

/* ======================================================================
   Font-Icone
====================================================================== */
@font-face{
    font-family:'xcon';
    src:url('font/xcon.eot');
    src:url('font/xcon.eot?#iefix') format('embedded-opentype'),
    url('font/xcon.woff2') format('woff2'),
    url('font/xcon.woff') format('woff'),
    url('font/xcon.ttf') format('truetype'),
    url('font/xcon.svg#xcon') format('svg');
    font-weight:normal; font-style:normal; font-display:block;
}
[class^="xcon-"], [class*=" xcon-"]{
    font-family:'xcon' !important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ======================================================================
   RTL
====================================================================== */
body.rtl{ direction:rtl; }
body.rtl .arlo_tm_leftpart{ left:auto; right:0; }
body.rtl .arlo_tm_rightpart{ padding-left:0; padding-right:var(--sidebar-w); }
@media (max-width:1040px){
    body.rtl .arlo_tm_rightpart{ padding-right:0; }
}
body.rtl .arlo_tm_timeline ul{ padding-left:0; padding-right:40px; }
body.rtl .arlo_tm_timeline ul::before{ left:auto; right:0; }
body.rtl .arlo_tm_timeline .svg{ left:auto; right:-55px; }

/* ======================================================================
   Tema scuro
====================================================================== */
body.dark{ background:#101010; color:#ddd; }
body.dark h1, body.dark h2, body.dark h3{ color:#fff; }

body.dark .arlo_tm_leftpart{
    background:#191919; box-shadow:0 0 30px rgba(255,255,255,.03);
}
body.dark .arlo_tm_leftpart .menu a{
    color:#fff; border-color:rgba(255,255,255,.08);
}
body.dark .arlo_tm_leftpart .bottom .social a{ color:#fff; }

body.dark #services,
body.dark #contact{ background:#191919; }

body.dark .services-list .inner{ background:#101010; box-shadow:none; }
body.dark .arlo_tm_portfolio .portfolio_filter button{ color:#fff; }
body.dark .arlo_tm_portfolio .portfolio_filter .current{ color:var(--brand); }

body.dark .arlo_tm_news .details{ background:#191919; }
body.dark .arlo_tm_news .title a{ color:#fff; }

body.dark .arlo_tm_footer{ background:#101010; }

/* ======================================================================
   Micro-ottimizzazioni
====================================================================== */
img[loading=lazy]{ content-visibility:auto; }

/* ======================================================================
   WhatsApp e tooltip certificazioni
====================================================================== */
.whatsapp-link{
    color:#000000;
    transition: color .2s ease;
}
.whatsapp-link:hover{
    color:#C11B17;
}

/* se mai usi icone SVG per WhatsApp */
.social ul li a.whatsapp-link svg{
    fill:#000000;
    transition: fill .2s ease;
}
.social ul li a.whatsapp-link:hover svg{
    fill:#C11B17;
}

/* titolo portafoglio (disattivato e sostituito da tooltip) */
.arlo_tm_portfolio_titles{
    display:none !important;
    margin-top:10px;
    min-height:26px;
    font-size:20px;
    color:#777;
    opacity:0;
    transition:opacity .2s ease;
}

/* tooltip certificazioni */
#cert-tooltip{
    position: fixed;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--brand);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -130%);
    transition: opacity .12s ease;
    z-index: 9999;
}
#cert-tooltip.is-visible{
    opacity: 1;
}

/* ======================================================================
   Stili spostati da index.html (inline <style>)
====================================================================== */

/* Contatti: testo NERO al passaggio del mouse */
#contact .contacts-link:hover,
#contact .contacts-link:focus{
    color:#000 !important;
}

/* Footer centrato + freccia "torna su" a destra */
.arlo_tm_footer{
    text-align:center;
}
.arlo_tm_footer .footer_inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
}
.arlo_tm_footer .copy{
    width:100%;
    text-align:center;
}
.arlo_tm_footer .footer-legal{
    display:inline-flex;
    gap:18px;
    margin:8px 0 0;
    padding:0;
}
.arlo_tm_footer .footer-legal li{
    list-style:none;
}
.arlo_tm_footer .top{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}

/* Icone social nella sidebar: più grandi e visibili */
.arlo_tm_leftpart .social ul{
    display:flex;
    justify-content:center;
    gap:18px;
}
.arlo_tm_leftpart .social ul li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
}
.arlo_tm_leftpart .social ul li img.svg{
    width:28px;
    height:28px;
}

/* Icona + titolo contatti sulla stessa riga */
#contact .contact-heading{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    margin:0 0 12px;
}
#contact .contact-heading .contact-icon{
    width:28px;
    height:28px;
    display:inline-block;
}

/* Allinea i pulsanti sotto la scritta (non sotto l'icona) */
#contact .short_list li{
    text-align:left;
}
#contact .short_list .contacts-link{
    display:inline-block;
    margin-top:12px;
    margin-left:38px; /* 28px icona + 10px gap */
}

/* Motto nero + sezioni contigue senza striscia chiara */
#testimonianze{
    background:#000000;
    margin:0;
    padding:60px 0 40px;
}
#testimonianze .arlo_tm_testimonial,
#testimonianze .testimonial_inner,
#testimonianze .testimonial_content{
    margin:0;
}

/* "Le mie competenze" + "Per le aziende": grigio chiaro e contigue */
#services,
#azienda{
    background:#f5f5f5;
    margin:0;
    padding:40px 0 60px;
}
#azienda .arlo_tm_news{
    margin:0;
}

/* Effetto rilievo card sezione "Per le aziende" */
#azienda .news_inner ul li .inner{
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
    overflow:hidden;
    transition:
            transform .25s ease,
            box-shadow .25s ease;
}
#azienda .news_inner ul li .inner:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 40px rgba(0,0,0,.16);
}
/* arrotondo solo la parte alta dell'immagine */
#azienda .news_inner ul li .image img,
#azienda .news_inner ul li .image .main{
    border-radius:18px 18px 0 0;
}

/* Effetto rilievo card certificazioni */
#portfolio #cert-grid li .inner{
    background:#fff;
    border-radius:18px;
    box-shadow:0 4px 18px rgba(0,0,0,.06);
    overflow:hidden;
    transition:
            transform .25s ease,
            box-shadow .25s ease;
}
#portfolio #cert-grid li .inner:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 40px rgba(0,0,0,.18);
}

/* Popup "Per le aziende" (CV, lavori, Calendly) */
.azienda-popup{
    display:flex;
    flex-direction:column;
    gap:24px;
}
.azienda-popup__image img{
    width:100%;
    height:auto;
    display:block;
    border-radius:4px;
}
.azienda-popup__body h2{
    font-size:1.6rem;
    margin:0 0 10px;
}
.azienda-popup__body p{
    margin:0 0 20px;
    line-height:1.5;
}
.azienda-form .form-row{
    margin-bottom:12px;
}
.azienda-form label{
    display:block;
    font-size:.95rem;
    margin-bottom:4px;
}
.azienda-form input,
.azienda-form textarea{
    width:100%;
    padding:8px 10px;
    border:1px solid #ddd;
    border-radius:4px;
    font-size:.95rem;
}
.azienda-form .checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.9rem;
}
.azienda-form button{
    margin-top:8px;
}

/* Variante full-screen Calendly nel popup */
.azienda-popup--calendly-full{
    padding:0;
    gap:0;
}
.azienda-popup--calendly-full .azienda-calendly{
    margin:0;
    width:100%;
    height:calc(100vh - 140px);
}
.azienda-popup--calendly-full iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}

/* Forza eventuali icone font Instagram a seguire il colore del link */
.arlo_tm_leftpart .bottom .social .xcon-instagram{
    color: currentColor;
}
/* Griglia certificazioni responsive */
#portfolio .portfolio_list ul#cert-grid{
    display:flex;
    flex-wrap:wrap;
    margin:0 -15px;           /* spazio laterale compensato */
    gap:0;
}

#portfolio .portfolio_list ul#cert-grid > li{
    box-sizing:border-box;
    padding:15px;
    flex:0 0 25%;
    max-width:25%;
    width:25%;                /* 4 colonne desktop */
}

#portfolio #cert-grid a.zoom{
    cursor:zoom-in;
    display:block;
    position:relative;
    overflow:hidden;
}

#portfolio #cert-grid a.zoom:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:rgba(0,0,0,.16);
    opacity:0;
    transition:opacity .2s ease;
}

#portfolio #cert-grid a.zoom:after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:3;
    width:58px;
    height:58px;
    border-radius:50%;
    background:
            #fff
            url("../img/svg/zoom-in.svg")
            center / 27px 27px
            no-repeat;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
    opacity:0;
    transform:translate(-50%, -50%) scale(.86);
    transition:
            opacity .2s ease,
            transform .2s ease;
}

#portfolio #cert-grid a.zoom:hover:before,
#portfolio #cert-grid a.zoom:focus-visible:before,
#portfolio #cert-grid a.zoom:hover:after,
#portfolio #cert-grid a.zoom:focus-visible:after{
    opacity:1;
}

#portfolio #cert-grid a.zoom:hover:after,
#portfolio #cert-grid a.zoom:focus-visible:after{
    transform:translate(-50%, -50%) scale(1);
}

.mfp-certificates .mfp-container{
    padding:24px;
}

.mfp-certificates .mfp-bg{
    opacity:.88;
}

.mfp-certificates .mfp-content{
    max-width:calc(100vw - 48px);
}

.mfp-certificates img.mfp-img{
    max-height:calc(100vh - 96px) !important;
    padding:24px 0;
}

.mfp-certificates .mfp-figure:after{
    top:24px;
    bottom:24px;
}

.mfp-certificates .mfp-bottom-bar{
    margin-top:-18px;
}

.mfp-certificates .mfp-close{
    position:fixed;
    top:18px;
    right:22px;
    width:48px;
    height:48px;
    line-height:48px;
    padding:0;
    color:#fff;
    font-size:42px;
    opacity:1;
    text-align:center;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
}

.mfp-certificates .mfp-close:hover,
.mfp-certificates .mfp-close:focus{
    color:#fff;
    opacity:.78;
}

/* 3 colonne su schermi medio-grandi */
@media (max-width: 1200px){
    #portfolio .portfolio_list ul#cert-grid > li{
        flex-basis:33.3333%;
        max-width:33.3333%;
        width:33.3333%;
    }
}

/* 2 colonne su tablet */
@media (max-width: 992px){
    #portfolio .portfolio_list ul#cert-grid > li{
        flex-basis:50%;
        max-width:50%;
        width:50%;
    }
}

/* 1 colonna su mobile */
@media (max-width: 600px){
    #portfolio .portfolio_list ul#cert-grid > li{
        flex-basis:100%;
        max-width:100%;
        width: 100%;
    }

    .mfp-certificates .mfp-container{
        padding:10px;
    }

    .mfp-certificates .mfp-content{
        max-width:calc(100vw - 20px);
    }

    .mfp-certificates img.mfp-img{
        max-height:calc(100vh - 70px) !important;
        padding:10px 0;
    }

    .mfp-certificates .mfp-figure:after{
        top:10px;
        bottom:10px;
    }

    .mfp-certificates .mfp-close{
        top:8px;
        right:10px;
        width:42px;
        height:42px;
        line-height:42px;
        font-size:34px;
    }
}