/* =========================================================
   CANOPUS V8 — ENTREGA 2: HERO IZQUIERDO
   Cargar después de style.css y header-v8.css
   ========================================================= */

.cp-container{
    width:min(1420px,calc(100% - 70px));
    margin:0 auto;
}

.cp-hero{
    position:relative;
    min-height:1080px;
    padding:185px 0 110px;
    overflow:hidden;

    background:
        radial-gradient(circle at 77% 36%,rgba(72,157,255,.20),transparent 31%),
        radial-gradient(circle at 24% 12%,rgba(205,228,255,.26),transparent 30%),
        linear-gradient(180deg,#fbfdff 0%,#f7faff 67%,#fff 100%);
}

.cp-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;

    background-image:radial-gradient(rgba(44,126,239,.13) 1px,transparent 1px);
    background-size:26px 26px;
    opacity:.32;

    -webkit-mask-image:linear-gradient(to bottom,transparent 5%,#000 34%,transparent 84%);
    mask-image:linear-gradient(to bottom,transparent 5%,#000 34%,transparent 84%);
}

.cp-hero__glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.cp-hero__glow--one{
    width:760px;
    height:760px;
    top:145px;
    right:-10px;

    background:radial-gradient(circle,
        rgba(100,173,255,.24) 0%,
        rgba(100,173,255,.11) 38%,
        rgba(100,173,255,0) 72%);
}

.cp-hero__glow--two{
    width:420px;
    height:420px;
    top:220px;
    left:-160px;

    background:radial-gradient(circle,
        rgba(177,215,255,.18),
        rgba(177,215,255,0) 72%);
}

.cp-hero__dots{
    position:absolute;
    top:145px;
    right:30px;
    width:150px;
    height:122px;

    background-image:radial-gradient(#2f82ef 1.15px,transparent 1.15px);
    background-size:13px 13px;
    opacity:.46;
}

.cp-hero__grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:44% 56%;
    align-items:start;
    gap:8px;
}

.cp-hero__content{
    max-width:590px;
    padding:55px 8px 0 10px;
}

.cp-eyebrow{
    width:max-content;
    display:flex;
    align-items:center;
    gap:10px;

    padding:9px 14px;
    border:1px solid #d9e8fa;
    border-radius:14px;

    background:rgba(255,255,255,.78);
    box-shadow:0 8px 20px rgba(44,109,191,.07);

    color:#0a63dc;
    font-size:12px;
    font-weight:800;
    letter-spacing:.15px;
}

.cp-eyebrow__dot{
    width:10px;
    height:10px;
    border-radius:50%;

    background:#0872f8;
    box-shadow:0 0 0 6px rgba(8,114,248,.09);
}

.cp-hero h1{
    margin:30px 0 23px;

    font-family:Manrope,Inter,Arial,sans-serif;
    font-size:clamp(60px,5vw,82px);
    font-weight:800;
    line-height:.985;
    letter-spacing:-4.1px;

    color:#07163d;
}

.cp-hero h1 span{
    color:#1268e8;
}

.cp-hero__lead{
    max-width:555px;
    margin:0;

    color:#5d6d89;
    font-size:17px;
    line-height:1.65;
}

.cp-hero__actions{
    display:flex;
    align-items:center;
    gap:18px;

    margin:34px 0 47px;
}

.cp-btn--primary,
.cp-btn--secondary{
    min-height:54px;
    padding:0 22px;
}

.cp-btn--primary{
    min-width:203px;

    color:#fff;
    background:linear-gradient(135deg,#0952cf,#0875fb);
    box-shadow:0 14px 28px rgba(7,94,223,.22);
}

.cp-btn--secondary{
    min-width:208px;

    color:#142341;
    background:#fff;
    border:1px solid #dce6f3;
    box-shadow:0 11px 24px rgba(32,70,120,.09);
}

.cp-play{
    width:21px;
    height:21px;
    display:grid;
    place-items:center;

    border:2px solid #0864e9;
    border-radius:50%;

    color:#0864e9;
    font-size:8px;
    line-height:1;
    padding-left:1px;
}

.cp-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.cp-benefit{
    display:flex;
    align-items:flex-start;
    gap:11px;
}

.cp-benefit__icon{
    position:relative;
    width:28px;
    height:28px;
    flex:0 0 28px;
    color:#0b6df0;
}

/* Cloud */
.cp-benefit__icon--cloud::before{
    content:"";
    position:absolute;
    left:4px;
    top:10px;
    width:18px;
    height:10px;

    border:2px solid currentColor;
    border-radius:9px;
}

.cp-benefit__icon--cloud::after{
    content:"";
    position:absolute;
    left:9px;
    top:5px;
    width:10px;
    height:10px;

    border:2px solid currentColor;
    border-bottom-color:transparent;
    border-radius:50%;
    background:#fff;
}

/* Shield */
.cp-benefit__icon--shield::before{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:17px;
    height:21px;

    border:2px solid currentColor;
    border-radius:8px 8px 11px 11px;
    clip-path:polygon(50% 0,100% 19%,92% 70%,50% 100%,8% 70%,0 19%);
}

.cp-benefit__icon--shield::after{
    content:"✓";
    position:absolute;
    left:10px;
    top:5px;

    font-size:11px;
    font-weight:900;
}

/* Growth */
.cp-benefit__icon--growth::before{
    content:"";
    position:absolute;
    left:4px;
    bottom:4px;
    width:3px;
    height:8px;

    background:currentColor;
    box-shadow:6px -4px 0 currentColor,12px -9px 0 currentColor,18px -15px 0 currentColor;
    border-radius:2px;
}

.cp-benefit__icon--growth::after{
    content:"";
    position:absolute;
    right:2px;
    top:2px;
    width:8px;
    height:8px;

    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
}

.cp-benefit strong{
    display:block;
    margin-bottom:5px;

    color:#17366c;
    font-size:12px;
}

.cp-benefit small{
    display:block;

    color:#6c7890;
    font-size:10px;
    line-height:1.58;
}

@media (max-width:1150px){
    .cp-hero__grid{
        grid-template-columns:42% 58%;
    }

    .cp-hero h1{
        font-size:65px;
    }

    .cp-benefits{
        gap:14px;
    }
}

@media (max-width:1050px){
    .cp-hero{
        min-height:auto;
        padding-top:125px;
    }

    .cp-hero__grid{
        grid-template-columns:1fr;
    }

    .cp-hero__content{
        max-width:690px;
        padding-left:0;
    }
}

@media (max-width:700px){
    .cp-container{
        width:min(100% - 28px,620px);
    }

    .cp-hero{
        padding:112px 0 65px;
    }

    .cp-hero h1{
        font-size:52px;
        letter-spacing:-2.7px;
    }

    .cp-hero__actions{
        flex-direction:column;
        align-items:stretch;
    }

    .cp-btn--primary,
    .cp-btn--secondary{
        width:100%;
    }

    .cp-benefits{
        grid-template-columns:1fr;
    }
}