/*==================================================
        HERO RESPONSIVE CAPINOA
        Módulo independiente
==================================================*/

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

.cap-hero{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
        180deg,
        #FDFEFF 0%,
        #F6FAFE 100%
        );

    padding:120px 0 90px;

}

.cap-hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:radial-gradient(
        rgba(12,159,171,.10),
        transparent 70%
        );

}

.cap-hero-container{

    position:relative;

    z-index:2;

}

.cap-hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/*==================================================
        CONTENIDO
==================================================*/

.cap-hero-content{

    max-width:620px;

}

.cap-hero-title{

    font-size:3.5rem;

    line-height:1.08;

    font-weight:800;

    color:var(--primary);

    margin:24px 0;

}

.cap-hero-description{

    font-size:1.1rem;

    color:var(--gray-500);

    line-height:1.9;

    margin-bottom:40px;

}

/*==================================================
        BOTONES
==================================================*/

.cap-hero-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

/*==================================================
        BENEFICIOS
==================================================*/

.cap-hero-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}


.cap-feature{

    background:#FFF;

    border:1px solid var(--gray-200);

    border-radius:20px;

    padding:7px;

    text-align:center;

    transition:.30s;

    box-shadow:0 12px 28px rgba(15,23,42,.05);

}

.cap-feature:hover{

    transform:translateY(-5px);

}

.cap-feature i{

    font-size:30px;

    color:var(--secondary);

    margin-bottom:14px;

}

.cap-feature strong{

    display:block;

    color:var(--primary);

    margin-bottom:6px;

}

.cap-feature span{

    font-size:.92rem;

    color:var(--gray-500);

}

/*==================================================
        IMAGEN
==================================================*/

.cap-hero-media{

    position:relative;

}

.cap-hero-image{

/*    border-radius:34px;*/

    overflow:hidden;

    box-shadow:0 35px 80px rgba(13,83,165,.12);

}

.cap-hero-image img{

    display:block;

    width:100%;

}

/*==================================================
        TARJETAS
==================================================*/

.cap-hero-cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:25px;

}

.cap-info-card{

    background:#FFF;

    border-radius:22px;

    padding:22px;

    border:1px solid var(--gray-200);

    box-shadow:0 15px 35px rgba(15,23,42,.06);

}

.cap-info-card h4{

    font-size:1.05rem;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:700;

}

.cap-info-card p{

    margin:0;

    font-size:.95rem;

    color:var(--gray-500);

}

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

@media(max-width:991.98px){


    .cap-hero-features-2{

        display:grid;

        grid-template-columns:repeat(1,1fr);

        gap:18px;
        
        margin-top: 20px;

    }

    .cap-hero{

        padding:90px 0 70px;

    }

    .cap-hero-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .cap-hero-content{

        max-width:100%;

        text-align:center;

        order:2;

    }

    .cap-hero-media{

        max-width:650px;

        margin:auto;

        order:1;

    }

    .cap-hero-actions{

        justify-content:center;

    }

    .cap-hero-features{

        grid-template-columns:repeat(3,1fr);

    }

}

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

@media(max-width:767.98px){

    .cap-hero{

        padding:70px 0 60px;

    }

    .cap-hero-title{

        font-size:2.2rem;

    }

    .cap-hero-description{

        font-size:1rem;

    }

    .cap-hero-actions{

        flex-direction:column;

    }

    .cap-hero-actions .cap-btn{

        width:100%;

    }

    .cap-hero-features{

        grid-template-columns:1fr;

    }

    .cap-feature{

        display:flex;

        align-items:center;

        text-align:left;

        gap:18px;

    }

    .cap-feature i{

        margin:0;

        font-size:28px;

    }

    .cap-hero-cards{

        grid-template-columns:1fr 1fr;

    }

}

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

@media(max-width:480px){

    .cap-hero{

        padding:60px 0 50px;

    }

    .cap-hero-title{

        font-size:1.85rem;

    }

    .cap-hero-cards{

        grid-template-columns:1fr;

    }

    .cap-info-card{

        padding:20px;

    }

}

/*==================================================
        MOBILE HERO FIX
==================================================*/

@media (max-width:767.98px){

    .cap-hero{

        padding:35px 0 45px;
    }

    .cap-hero-grid{

        gap:30px;
    }

    .cap-hero-content{

        text-align:center;
    }

    /*--------------------
            H1
    --------------------*/

    .cap-hero-title,
    .hero h1{

        font-size:1.55rem !important;
        line-height:1.25;
        margin:18px auto;
        max-width:330px;

    }

    .cap-hero-description,
    .hero p{

        font-size:.95rem;
        line-height:1.7;
        max-width:340px;
        margin:0 auto 30px;
    }

    /*--------------------
            IMAGEN
    --------------------*/

    .cap-hero-media,
    .hero-image{

        max-width:300px;
        margin:0 auto;
    }

    .cap-hero-image img,
    .hero-image img{

        width:100%;
        height:auto;
        border-radius:22px;
    }

    /*--------------------
        TARJETAS
    --------------------*/

    .cap-hero-cards{

        margin-top:18px;
        gap:12px;
    }

    .cap-info-card{

        padding:16px;
        border-radius:18px;
    }

    .cap-info-card h4{

        font-size:.92rem;
        margin-bottom:6px;
    }

    .cap-info-card p{

        font-size:.82rem;
        line-height:1.45;
    }

}