/* ==========================================================
   CARGOTOGO
   UX/UI HOME · HEADER + HERO
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.ctg-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid rgba(18,22,28,.07);
    box-shadow:0 1px 0 rgba(0,0,0,.015);
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
}

.ctg-header__inner{
    min-height:76px;
    gap:38px;
}

/* Marca */

.ctg-brand{
    display:inline-flex;
    align-items:center;
    line-height:1;
    white-space:nowrap;
    font-size:25px;
    font-weight:950;
    letter-spacing:-.055em;
}

.ctg-brand__cargo,
.ctg-brand__go{
    color:var(--ctg-orange);
}

.ctg-brand__to{
    color:#15191e;
}

/* navegación */

.ctg-nav{
    gap:31px;
}

.ctg-nav a{
    padding:29px 0 25px;
    color:#555d67;
    font-size:12.5px;
    font-weight:750;
    letter-spacing:0;
    transition:color .18s ease;
}

.ctg-nav a::after{
    bottom:18px;
    height:2px;
}

.ctg-nav a:hover{
    color:#15191e;
}

/* botones header */

.ctg-header__actions{
    gap:8px;
}

.ctg-header__actions .ctg-btn{
    min-height:42px;
    padding:0 17px;
    border-radius:10px;
    font-size:12px;
}

.ctg-header__actions .ctg-btn--light{
    color:#1b2026;
    background:#f5f6f7;
    border-color:#eceef0;
}

.ctg-header__actions .ctg-btn--dark{
    background:#171b20;
    border-color:#171b20;
    box-shadow:0 7px 18px rgba(17,20,24,.12);
}


/* ----------------------------------------------------------
   HERO
   ---------------------------------------------------------- */

.ctg-hero{
    position:relative;
    overflow:hidden;
    padding:0;
    background:
        radial-gradient(
            circle at 91% 10%,
            rgba(255,106,0,.075),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fff 70%,
            #fafafa 100%
        );
}

.ctg-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-310px;
    top:-270px;
    border-radius:50%;
    background:rgba(255,106,0,.035);
    pointer-events:none;
}

.ctg-hero__grid{
    position:relative;
    grid-template-columns:minmax(390px,.82fr) minmax(540px,1.18fr);
    min-height:625px;
    gap:58px;
    align-items:center;
}


/* ----------------------------------------------------------
   HERO COPY
   ---------------------------------------------------------- */

.ctg-hero__content{
    padding:76px 0 108px;
}

.ctg-eyebrow{
    gap:10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.13em;
}

.ctg-eyebrow::before{
    width:27px;
}

.ctg-hero h1{
    max-width:650px;
    margin:22px 0 24px;
    font-size:clamp(52px,5.15vw,76px);
    line-height:.96;
    letter-spacing:-.064em;
}

.ctg-hero h1 span{
    margin-top:8px;
}

.ctg-hero__lead{
    max-width:545px;
    color:#626a74;
    font-size:17px;
    line-height:1.68;
}


/* ----------------------------------------------------------
   HERO CTA
   ---------------------------------------------------------- */

.ctg-hero__actions{
    gap:10px;
    margin-top:31px;
}

.ctg-btn--hero{
    min-height:52px;
    padding:0 23px;
    border-radius:11px;
    font-size:13px;
    font-weight:850;
}

.ctg-hero__actions .ctg-btn--orange{
    box-shadow:0 12px 26px rgba(255,106,0,.20);
}

.ctg-hero__actions .ctg-btn--orange:hover{
    transform:translateY(-1px);
}

.ctg-btn--whatsapp{
    background:#fff;
    border:1px solid #e3e5e8;
    box-shadow:0 5px 15px rgba(17,20,24,.035);
}


/* ----------------------------------------------------------
   MICRO DATOS
   ---------------------------------------------------------- */

.ctg-hero__micro{
    margin-top:42px;
    padding-top:23px;
    border-top:1px solid #e9ebed;
}

.ctg-hero__micro > div{
    min-width:118px;
    padding:0 19px;
}

.ctg-hero__micro > div:first-child{
    padding-left:0;
}

.ctg-hero__micro strong{
    font-size:12.5px;
    font-weight:850;
}

.ctg-hero__micro span{
    margin-top:5px;
    color:#969da6;
    font-size:10px;
}


/* ----------------------------------------------------------
   HERO IMAGE
   ---------------------------------------------------------- */

.ctg-hero__visual{
    position:relative;
    height:535px;
    overflow:hidden;
    border-radius:26px;
    background:#e9ecef;
    box-shadow:
        0 34px 80px rgba(20,24,29,.14),
        0 5px 18px rgba(20,24,29,.06);
}

.ctg-hero__visual::before{
    background:
        linear-gradient(
            90deg,
            rgba(17,20,24,.06),
            transparent 24%,
            transparent 76%,
            rgba(17,20,24,.035)
        );
}

.ctg-hero__visual::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    border:1px solid rgba(255,255,255,.35);
    border-radius:inherit;
    pointer-events:none;
}

.ctg-hero__visual img{
    transform:scale(1.015);
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.ctg-hero__visual:hover img{
    transform:scale(1.04);
}


/* ----------------------------------------------------------
   STATUS BADGE
   ---------------------------------------------------------- */

.ctg-hero__badge{
    left:20px;
    bottom:20px;
    min-width:202px;
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:12px;
    background:rgba(255,255,255,.91);
    box-shadow:0 12px 35px rgba(17,20,24,.13);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.ctg-hero__badge strong{
    font-size:11.5px;
    font-weight:850;
}

.ctg-hero__badge small{
    color:#7e8690;
}


/* ----------------------------------------------------------
   CAPACIDADES
   ---------------------------------------------------------- */

.ctg-capabilities{
    margin-top:-39px;
    border:1px solid rgba(222,225,229,.9);
    border-radius:16px;
    background:rgba(255,255,255,.96);
    box-shadow:
        0 18px 48px rgba(17,20,24,.07),
        0 2px 8px rgba(17,20,24,.03);
    backdrop-filter:blur(14px);
}

.ctg-capability{
    min-height:92px;
}

.ctg-capability__icon{
    color:var(--ctg-orange);
}


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

@media (max-width:1080px){

    .ctg-header__inner{
        min-height:72px;
    }

    .ctg-mobile-nav{
        inset:72px 0 auto;
    }

    .ctg-hero{
        padding-top:0;
    }

    .ctg-hero__grid{
        grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
        min-height:560px;
        gap:30px;
    }

    .ctg-hero__content{
        padding:60px 0 94px;
    }

    .ctg-hero h1{
        font-size:52px;
    }

    .ctg-hero__visual{
        height:465px;
        border-radius:22px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px){

    /* header */

    .ctg-header__inner{
        min-height:66px;
    }

    .ctg-brand{
        font-size:21px;
    }

    .ctg-menu-button{
        width:42px;
        height:42px;
        border-radius:10px;
    }

    .ctg-mobile-nav{
        inset:66px 0 auto;
        padding-top:10px;
        box-shadow:0 22px 45px rgba(17,20,24,.10);
    }

    /* hero */

    .ctg-hero{
        padding:0;
    }

    .ctg-hero__grid{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .ctg-hero__content{
        padding:44px 0 30px;
    }

    .ctg-eyebrow{
        font-size:9.5px;
    }

    .ctg-hero h1{
        max-width:100%;
        margin:18px 0 18px;
        font-size:clamp(41px,12vw,53px);
        line-height:.96;
        letter-spacing:-.057em;
    }

    .ctg-hero h1 span{
        margin-top:6px;
    }

    .ctg-hero__lead{
        font-size:14.5px;
        line-height:1.62;
    }

    .ctg-hero__actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:23px;
    }

    .ctg-btn--hero{
        min-height:49px;
        padding:0 13px;
        font-size:12px;
    }

    .ctg-hero__micro{
        display:none;
    }

    .ctg-hero__visual{
        order:2;
        width:100%;
        height:300px;
        margin-bottom:0;
        border-radius:18px;
        box-shadow:0 18px 45px rgba(17,20,24,.13);
    }

    .ctg-hero__visual img{
        object-position:58% center;
    }

    .ctg-hero__badge{
        left:12px;
        bottom:12px;
        min-width:0;
        padding:10px 12px;
    }

    .ctg-hero__badge-dot{
        width:8px;
        height:8px;
        flex-basis:8px;
    }

    .ctg-hero__badge strong{
        font-size:10.5px;
    }

    .ctg-hero__badge small{
        font-size:9px;
    }

    .ctg-capabilities{
        margin-top:14px;
        border-radius:14px;
        box-shadow:0 12px 30px rgba(17,20,24,.06);
    }
}


/* teléfonos muy pequeños */

@media (max-width:430px){

    .ctg-hero__content{
        padding-top:36px;
    }

    .ctg-hero h1{
        font-size:40px;
    }

    .ctg-hero__actions{
        grid-template-columns:1fr;
    }

    .ctg-hero__visual{
        height:270px;
    }
}