/* =========================================================
   MACRIGI 2027 — AGENTI DI VENDITA
   PAGINA COMPLETA
   V1.2 — HERO MOBILE COMPACT
   ========================================================= */

.macrigi-agenti-2027{
    --navy:#0e2f4f;
    --navy-dark:#082844;
    --blue:#62b3d3;
    --blue-dark:#4399bb;
    --soft:#f1f6f8;
    --soft-blue:#eaf6fa;
    --text:#17313d;
    --muted:#647985;
    --border:#d6e5eb;
    --gold:#caa24d;
    --white:#ffffff;

    width:100%;
    overflow:hidden;
    color:var(--text);
    font-family:inherit;
    line-height:1.55;
}

.macrigi-agenti-2027 *,
.macrigi-agenti-2027 *::before,
.macrigi-agenti-2027 *::after{
    box-sizing:border-box;
}

.macrigi-agenti-2027 img{
    display:block;
    max-width:100%;
    height:auto;
}

.macrigi-agenti-2027 a{
    text-decoration:none;
}

.macrigi-agenti-2027 h1,
.macrigi-agenti-2027 h2,
.macrigi-agenti-2027 h3,
.macrigi-agenti-2027 p{
    margin-top:0;
}

.macrigi-agenti-2027 h1,
.macrigi-agenti-2027 h2,
.macrigi-agenti-2027 h3{
    color:var(--navy);
    line-height:1.12;
    font-weight:800;
}

.macrigi-agenti-2027 .mk-wrap{
    width:min(1510px, calc(100% - 40px));
    margin:0 auto;
}

.macrigi-agenti-2027 .mk-section{
    padding:88px 0;
}

.macrigi-agenti-2027 .mk-eyebrow{
    color:var(--blue-dark);
    font-size:14px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.macrigi-agenti-2027 .mk-title{
    font-size:40px;
    margin-bottom:20px;
}

.macrigi-agenti-2027 .mk-center{
    text-align:center;
}

.macrigi-agenti-2027 .mk-divider{
    width:74px;
    height:3px;
    background:var(--blue);
    margin:22px auto 0;
}

.macrigi-agenti-2027 .mk-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:14px 30px;
    border-radius:8px;
    font-size:15px;
    line-height:1.2;
    font-weight:800;
    text-align:center;
    transition:.2s ease;
}

.macrigi-agenti-2027 .mk-btn-primary{
    background:var(--blue);
    color:#fff;
}

.macrigi-agenti-2027 .mk-btn-primary:hover{
    background:var(--blue-dark);
    color:#fff;
}

.macrigi-agenti-2027 .mk-icon{
    width:58px;
    height:58px;
    color:var(--blue);
    flex:0 0 auto;
}

.macrigi-agenti-2027 .mk-icon svg{
    display:block;
    width:100%;
    height:100%;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   HERO
   ========================================================= */

.macrigi-agenti-2027 .mk-hero{
    background:var(--navy-dark);
    color:#fff;
    min-height:610px;
    display:flex;
    align-items:center;

    background-image:
        linear-gradient(
            90deg,
            rgba(5,31,54,.94) 0%,
            rgba(5,31,54,.82) 42%,
            rgba(5,31,54,.18) 72%,
            rgba(5,31,54,.08) 100%
        ),
        url("https://www.macrigi.com/wp-content/uploads/2026/09/Immagine-01-Hero-Rete-B2B.webp");

    background-size:cover;
    background-position:center;
}

.macrigi-agenti-2027 .mk-hero-copy{
    width:53%;
    max-width:650px;
}

.macrigi-agenti-2027 .mk-hero .mk-eyebrow{
    color:#fff;
}

.macrigi-agenti-2027 .mk-hero h1{
    color:#fff;
    font-size:54px;
    margin-bottom:22px;
}

.macrigi-agenti-2027 .mk-hero p{
    color:#fff;
    font-size:21px;
    line-height:1.55;
    max-width:630px;
    margin-bottom:30px;
}

.macrigi-agenti-2027 .mk-hero-meta{
    margin-top:26px;
    color:rgba(255,255,255,.88);
    font-size:15px;
    letter-spacing:.02em;
}


/* =========================================================
   RUOLO
   ========================================================= */

.macrigi-agenti-2027 .mk-role-intro{
    max-width:850px;
    margin:0 auto 48px;
    text-align:center;
    font-size:18px;
}

.macrigi-agenti-2027 .mk-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.macrigi-agenti-2027 .mk-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:34px 30px;
    box-shadow:0 12px 28px rgba(16,55,70,.05);
}

.macrigi-agenti-2027 .mk-card h3{
    font-size:21px;
    margin:20px 0 12px;
}

.macrigi-agenti-2027 .mk-card p{
    color:var(--muted);
    margin-bottom:0;
    font-size:16px;
}

.macrigi-agenti-2027 .mk-role-card{
    text-align:center;
}


/* =========================================================
   COSA FARAI
   ========================================================= */

.macrigi-agenti-2027 .mk-do{
    background:#f3f3f3;
}

.macrigi-agenti-2027 .mk-do-intro{
    text-align:center;
    margin-bottom:40px;
    font-size:18px;
}

.macrigi-agenti-2027 .mk-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.macrigi-agenti-2027 .mk-step{
    background:#fff;
    border-radius:16px;
    padding:30px 26px;
    min-height:260px;
    text-align:center;
}

.macrigi-agenti-2027 .mk-step-num{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    margin:0 auto 18px;
}

.macrigi-agenti-2027 .mk-step h3{
    font-size:20px;
    margin-bottom:12px;
}

.macrigi-agenti-2027 .mk-step p{
    margin:0;
    font-size:15px;
    color:var(--muted);
}


/* =========================================================
   STRUMENTI
   ========================================================= */

.macrigi-agenti-2027 .mk-tools-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:62px;
}

.macrigi-agenti-2027 .mk-tools-copy > p{
    font-size:18px;
    margin-bottom:30px;
}

.macrigi-agenti-2027 .mk-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.macrigi-agenti-2027 .mk-mini{
    border:1px solid var(--border);
    border-radius:15px;
    padding:24px 18px;
    background:#fff;
}

.macrigi-agenti-2027 .mk-mini .mk-icon{
    width:40px;
    height:40px;
}

.macrigi-agenti-2027 .mk-mini h3{
    font-size:18px;
    margin:16px 0 8px;
}

.macrigi-agenti-2027 .mk-mini p{
    margin:0;
    font-size:14px;
    color:var(--muted);
}

.macrigi-agenti-2027 .mk-dashboard-img{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 18px 40px rgba(15,47,68,.08);
}

.macrigi-agenti-2027 .mk-dashboard-img img{
    width:100%;
    object-fit:cover;
}


/* =========================================================
   SUPPORTO / FORMAZIONE
   ========================================================= */

.macrigi-agenti-2027 .mk-support{
    background:var(--soft-blue);
}

.macrigi-agenti-2027 .mk-support-copy{
    max-width:800px;
    margin:0 auto 42px;
    text-align:center;
    font-size:18px;
}

.macrigi-agenti-2027 .mk-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    max-width:820px;
    margin:0 auto;
}

.macrigi-agenti-2027 .mk-support-card{
    text-align:center;
    background:#fff;
    border-radius:18px;
    padding:38px 30px;
    border:1px solid var(--border);
}

.macrigi-agenti-2027 .mk-support-card .mk-icon{
    margin:0 auto;
}

.macrigi-agenti-2027 .mk-support-card h3{
    margin:18px 0 10px;
    font-size:21px;
}

.macrigi-agenti-2027 .mk-support-card p{
    color:var(--muted);
    margin:0;
}


/* =========================================================
   COMPENSO
   ========================================================= */

.macrigi-agenti-2027 .mk-pay{
    background:#ededed;
    text-align:center;
}

.macrigi-agenti-2027 .mk-pay-box{
    max-width:900px;
    margin:0 auto;
}

.macrigi-agenti-2027 .mk-percent{
    font-size:72px;
    line-height:1;
    font-weight:800;
    color:var(--blue);
    margin-bottom:20px;
}

.macrigi-agenti-2027 .mk-pay h2{
    font-size:36px;
    margin-bottom:24px;
}

.macrigi-agenti-2027 .mk-pay p{
    font-size:20px;
    line-height:1.55;
    max-width:820px;
    margin:0 auto 18px;
}

.macrigi-agenti-2027 .mk-pay a{
    color:var(--blue-dark);
    font-weight:700;
    text-decoration:underline;
}


/* =========================================================
   PROFILO
   ========================================================= */

.macrigi-agenti-2027 .mk-profile-intro{
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}

.macrigi-agenti-2027 .mk-profile-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.macrigi-agenti-2027 .mk-profile-card{
    text-align:center;
    padding:30px 20px;
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
}

.macrigi-agenti-2027 .mk-profile-card .mk-icon{
    margin:0 auto;
}

.macrigi-agenti-2027 .mk-profile-card h3{
    font-size:19px;
    margin:18px 0 10px;
}

.macrigi-agenti-2027 .mk-profile-card p{
    margin:0;
    color:var(--muted);
}


/* =========================================================
   CTA FINALE
   ========================================================= */

.macrigi-agenti-2027 .mk-final{
    position:relative;
    padding:90px 0;
    text-align:center;
    color:#fff;

    background:
        linear-gradient(
            rgba(7,36,58,.90),
            rgba(7,36,58,.90)
        ),
        url("https://www.macrigi.com/wp-content/uploads/2026/08/sfondo-dopo-registrazione-v2-desktop.webp");

    background-size:cover;
    background-position:center;
}

.macrigi-agenti-2027 .mk-final .mk-eyebrow,
.macrigi-agenti-2027 .mk-final h2,
.macrigi-agenti-2027 .mk-final p{
    color:#fff;
}

.macrigi-agenti-2027 .mk-final h2{
    font-size:40px;
    margin-bottom:18px;
}

.macrigi-agenti-2027 .mk-final p{
    font-size:20px;
    max-width:760px;
    margin:0 auto 30px;
}

.macrigi-agenti-2027 .mk-final .mk-btn{
    background:var(--blue);
    color:#fff;
    min-width:300px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

    .macrigi-agenti-2027 .mk-wrap{
        width:min(1040px, calc(100% - 32px));
    }

    .macrigi-agenti-2027 .mk-section{
        padding:70px 0;
    }

    .macrigi-agenti-2027 .mk-hero{
        min-height:540px;
        background-position:center;
    }

    .macrigi-agenti-2027 .mk-hero-copy{
        width:58%;
    }

    .macrigi-agenti-2027 .mk-hero h1{
        font-size:44px;
    }

    .macrigi-agenti-2027 .mk-hero p{
        font-size:18px;
    }

    .macrigi-agenti-2027 .mk-steps{
        grid-template-columns:repeat(2,1fr);
    }

    .macrigi-agenti-2027 .mk-tools-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .macrigi-agenti-2027 .mk-dashboard-img{
        max-width:760px;
        margin:0 auto;
    }

    .macrigi-agenti-2027 .mk-profile-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width:767px){

    .macrigi-agenti-2027 .mk-wrap{
        width:calc(100% - 40px);
    }

    .macrigi-agenti-2027 .mk-section{
        padding:54px 0;
    }

    .macrigi-agenti-2027 .mk-title{
        font-size:30px;
    }

    .macrigi-agenti-2027 .mk-eyebrow{
        font-size:12px;
    }


    /* =====================================================
       HERO MOBILE — CORRETTA / COMPATTA
       ===================================================== */

    .macrigi-agenti-2027 .mk-hero{
        display:block;
        min-height:0;
        padding:42px 0 34px;

        background-image:
            linear-gradient(
                180deg,
                rgba(5,31,54,.96) 0%,
                rgba(5,31,54,.89) 52%,
                rgba(5,31,54,.67) 100%
            ),
            url("https://www.macrigi.com/wp-content/uploads/2026/09/Immagine-01-Hero-Rete-B2B.webp");

        background-size:cover;
        background-position:center top;
    }

    .macrigi-agenti-2027 .mk-hero-copy{
        width:100%;
        max-width:none;
    }

    .macrigi-agenti-2027 .mk-hero h1{
        font-size:38px;
        line-height:1.06;
        margin-bottom:18px;
    }

    .macrigi-agenti-2027 .mk-hero p{
        font-size:18px;
        line-height:1.5;
        margin-bottom:24px;
    }

    .macrigi-agenti-2027 .mk-btn{
        width:100%;
        min-height:58px;
        padding:15px 18px;
    }

    .macrigi-agenti-2027 .mk-hero-meta{
        margin-top:20px;
        font-size:14px;
        line-height:1.45;
    }


    /* RUOLO */

    .macrigi-agenti-2027 .mk-grid-3{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .macrigi-agenti-2027 .mk-role-card:last-child{
        grid-column:1 / -1;
    }

    .macrigi-agenti-2027 .mk-card{
        padding:25px 18px;
    }

    .macrigi-agenti-2027 .mk-card .mk-icon{
        width:45px;
        height:45px;
        margin:0 auto;
    }

    .macrigi-agenti-2027 .mk-card h3{
        font-size:18px;
    }

    .macrigi-agenti-2027 .mk-card p{
        font-size:14px;
    }


    /* COSA FARAI */

    .macrigi-agenti-2027 .mk-steps{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .macrigi-agenti-2027 .mk-step{
        min-height:0;
        padding:24px 16px;
    }

    .macrigi-agenti-2027 .mk-step h3{
        font-size:17px;
    }

    .macrigi-agenti-2027 .mk-step p{
        font-size:14px;
    }


    /* STRUMENTI */

    .macrigi-agenti-2027 .mk-tools-grid{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .macrigi-agenti-2027 .mk-tools-copy{
        display:contents;
    }

    .macrigi-agenti-2027 .mk-tools-head{
        order:1;
    }

    .macrigi-agenti-2027 .mk-dashboard-img{
        order:2;
        width:100%;
    }

    .macrigi-agenti-2027 .mk-mini-grid{
        order:3;
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .macrigi-agenti-2027 .mk-mini:last-child{
        grid-column:1 / -1;
    }

    .macrigi-agenti-2027 .mk-mini{
        padding:22px 17px;
    }

    .macrigi-agenti-2027 .mk-mini h3{
        font-size:17px;
    }


    /* SUPPORTO */

    .macrigi-agenti-2027 .mk-grid-2{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .macrigi-agenti-2027 .mk-support-card{
        padding:26px 16px;
    }

    .macrigi-agenti-2027 .mk-support-card h3{
        font-size:17px;
    }

    .macrigi-agenti-2027 .mk-support-card p{
        font-size:14px;
    }


    /* COMPENSO */

    .macrigi-agenti-2027 .mk-percent{
        font-size:60px;
    }

    .macrigi-agenti-2027 .mk-pay h2{
        font-size:29px;
    }

    .macrigi-agenti-2027 .mk-pay p{
        font-size:17px;
    }


    /* PROFILO */

    .macrigi-agenti-2027 .mk-profile-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .macrigi-agenti-2027 .mk-profile-card{
        padding:24px 16px;
        text-align:left;
    }

    .macrigi-agenti-2027 .mk-profile-card .mk-icon{
        margin:0;
        width:42px;
        height:42px;
    }

    .macrigi-agenti-2027 .mk-profile-card h3{
        font-size:17px;
    }

    .macrigi-agenti-2027 .mk-profile-card p{
        font-size:14px;
    }


    /* CTA FINALE */

    .macrigi-agenti-2027 .mk-final{
        padding:60px 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(7,36,58,.93) 0%,
                rgba(7,36,58,.87) 58%,
                rgba(7,36,58,.70) 100%
            ),
            url("https://www.macrigi.com/wp-content/uploads/2026/08/sfondo-dopo-registrazione-v2-desktop.webp");
    }

    .macrigi-agenti-2027 .mk-final h2{
        font-size:31px;
    }

    .macrigi-agenti-2027 .mk-final p{
        font-size:18px;
    }

    .macrigi-agenti-2027 .mk-final .mk-btn{
        min-width:0;
        width:100%;
    }
}


@media (max-width:390px){

    .macrigi-agenti-2027 .mk-wrap{
        width:calc(100% - 32px);
    }

    .macrigi-agenti-2027 .mk-hero{
        padding:38px 0 30px;
    }

    .macrigi-agenti-2027 .mk-hero h1{
        font-size:34px;
    }
}


/* v0.7.121 — PAGE-SPECIFIC FINAL WIDTH CONTRACT */
@media (min-width:1440px){.macrigi-agenti-2027 .mk-wrap{box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:clamp(140px,10vw,190px)!important;margin-right:clamp(140px,10vw,190px)!important;padding-left:0!important;padding-right:0!important}}
@media (min-width:1025px) and (max-width:1439px){.macrigi-agenti-2027 .mk-wrap{box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:36px!important;margin-right:36px!important;padding-left:0!important;padding-right:0!important}}
@media (min-width:768px) and (max-width:1024px){.macrigi-agenti-2027 .mk-wrap{box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:24px!important;margin-right:24px!important;padding-left:0!important;padding-right:0!important}}
@media (max-width:767px){.macrigi-agenti-2027 .mk-wrap{box-sizing:border-box!important;width:auto!important;max-width:none!important;margin-left:14px!important;margin-right:14px!important;padding-left:0!important;padding-right:0!important}}
@media (max-width:430px){.macrigi-agenti-2027 .mk-wrap{margin-left:11px!important;margin-right:11px!important}}

@media (min-width:768px){
.macrigi-agenti-2027 .mk-hero-copy{width:50%!important;max-width:720px!important}
.macrigi-agenti-2027 .mk-hero h1{max-width:680px!important}
}

/* v0.7.121 — PAGE-SPECIFIC IPHONE CARD CONTRACT */
@media (max-width:767px){
.macrigi-agenti-2027 .mk-grid-3,
.macrigi-agenti-2027 .mk-steps,
.macrigi-agenti-2027 .mk-mini-grid,
.macrigi-agenti-2027 .mk-grid-2,
.macrigi-agenti-2027 .mk-profile-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.macrigi-agenti-2027 .mk-grid-3 > *,
.macrigi-agenti-2027 .mk-steps > *,
.macrigi-agenti-2027 .mk-mini-grid > *,
.macrigi-agenti-2027 .mk-grid-2 > *,
.macrigi-agenti-2027 .mk-profile-grid > *{min-width:0!important;text-align:center!important}
.macrigi-agenti-2027 .mk-grid-3 > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-steps > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-mini-grid > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-grid-2 > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-profile-grid > *:nth-child(odd):last-child{grid-column:1/-1!important;width:calc(50% - 6px)!important;justify-self:center!important}
}
@media (max-width:430px){
.macrigi-agenti-2027 .mk-grid-3,
.macrigi-agenti-2027 .mk-steps,
.macrigi-agenti-2027 .mk-mini-grid,
.macrigi-agenti-2027 .mk-grid-2,
.macrigi-agenti-2027 .mk-profile-grid{gap:10px!important}
.macrigi-agenti-2027 .mk-grid-3 > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-steps > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-mini-grid > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-grid-2 > *:nth-child(odd):last-child,
.macrigi-agenti-2027 .mk-profile-grid > *:nth-child(odd):last-child{width:calc(50% - 5px)!important}
}

/* v0.7.122 — AGENTI DI VENDITA: desktop hero copy width correction.
   Keep the full-bleed hero image; widen only the text column that remained historically capped. */
@media (min-width:1440px){
  .macrigi-agenti-2027 .mk-hero-copy{width:720px!important;max-width:720px!important}
  .macrigi-agenti-2027 .mk-hero h1{width:100%!important;max-width:none!important}
  .macrigi-agenti-2027 .mk-hero p{width:100%!important;max-width:670px!important}
}
@media (min-width:1025px) and (max-width:1439px){
  .macrigi-agenti-2027 .mk-hero-copy{width:min(58%,650px)!important;max-width:650px!important}
  .macrigi-agenti-2027 .mk-hero h1{max-width:none!important}
}