/* ===================================================== 
PÁGINA DE CURSO DIGITAL ARECH Compatible con Bootstrap 3 
===================================================== */

.curso-pagina{
    width:100%; 
    background:#f5f8fc; 
    color:#102c52; 
    padding-top:90px; 
    margin-top:0; 
    font-family:"Segoe UI", Arial, Helvetica, sans-serif; } 
    
/*  ===================================================== 
CARACTERÍSTICAS SUPERIORES 
===================================================== */ 
    
.curso-caracteristicas{ 
    overflow:hidden; 
    background:#ffffff; 
    padding:22px 8%; 
    border-bottom:1px solid #d6e0ec; 
    text-align:center; } 
    
.curso-caracteristica{ 
    width:32%; 
    display:inline-block; 
    vertical-align:middle; 
    text-align:center; } 
    
.curso-caracteristica .fa{ 
    font-size:36px; 
    color:#002f5f; 
    margin-right:12px; 
    vertical-align:middle; } 

.curso-caracteristica strong, 

.curso-caracteristica small{ 
    display:inline-block; 
    vertical-align:middle; 
    color:#102c52; 
    font-size:16px; } 
    
.curso-caracteristica small{ margin-left:4px; } 

/* ===================================================== 
SECCIONES GENERALES 
===================================================== */ 

.curso-seccion{ 
    width:100%; 
    padding:35px 5%; 
    box-sizing:border-box; } 
    
.curso-titulo-seccion{ 
    text-align:center; 
    margin-bottom:28px; } 

.curso-titulo-seccion h2{ 
    margin:0; 
    color:#102c52; 
    font-size:25px; 
    font-weight:bold; } 
    
.curso-titulo-seccion span{ 
    display:block; width:100px; 
    height:3px; 
    margin:10px auto 0; 
    background:#d7a321; } 
    
/*  ===================================================== 
QUÉ APRENDERÁS 
===================================================== */ 
    
.curso-aprender{ 
    background:#ffffff; } 

.curso-aprender-grid{ text-align:center; } 

.curso-aprender-item{ 
    width:16%; 
    display:inline-block; 
    vertical-align:top; 
    box-sizing:border-box; 
    padding:10px; 
    border-right:1px 
    solid #d7e0eb; 
    min-height:150px; } 
    
.curso-aprender-item:last-child{ border-right:none; } 

.curso-aprender-item .fa{ 
    width:65px; 
    height:65px; 
    line-height:65px; 
    border:2px solid #cbd7e5; 
    border-radius:50%; 
    font-size:31px; 
    color:#002f5f; } 
    
.curso-aprender-item p{ 
    margin:13px 0 0; 
    font-size:16px; 
    font-weight:600; 
    line-height:1.45; 
    color:#102c52; } 
    
/* ===================================================== 
PROGRAMA E INSTRUCTOR 
===================================================== */ 

.curso-contenido-principal{ 
    width:100%; 
    overflow:hidden; 
    padding:35px 4%; 
    box-sizing:border-box; } 
    
.curso-programa{ 
    width:61%; 
    float:left; 
    background:#ffffff; 
    padding:15px; 
    border:1px solid #d4deeb; 
    border-radius:7px; 
    box-sizing:border-box; } 
    
.curso-lateral{ 
    width:36%; 
    float:right; } 
    
.curso-panel{ 
    background:#ffffff; 
    border:1px solid #d4deeb; 
    border-radius:7px; 
    margin-bottom:20px; 
    overflow:hidden; } 
    
.curso-panel-titulo{ 
    padding:13px 18px; 
    background:#002f5f; 
    color:#ffffff; 
    text-align:center; 
    font-size:18px; 
    font-weight:bold; } 
    
/* ===================================================== 
ACORDEÓN DEL PROGRAMA 
===================================================== */ 

.curso-modulo{ 
    border:1px solid #d5dfeb; 
    border-bottom:none; 
    background:#ffffff; } 
    
.curso-modulo:last-child{ 
    border-bottom:1px solid #d5dfeb; } 
    
.curso-modulo summary{ 
    position:relative; 
    display:block; 
    padding:14px 45px 14px 58px; 
    cursor:pointer; 
    font-size:15px; 
    font-weight:bold; 
    color:#102c52; 
    list-style:none; } 
    
.curso-modulo summary::-webkit-details-marker{ 
    display:none; } 
    
.curso-modulo summary:after{ 
    content:"+"; 
    position:absolute; 
    top:12px; 
    right:18px; 
    font-size:23px; 
    font-weight:normal; 
    color:#002f5f; } 
    
.curso-modulo[open] summary:after{ content:"−"; } 

.curso-modulo-numero{ 
    position:absolute; 
    left:12px; top:9px; 
    width:34px; 
    height:34px; 
    line-height:34px; 
    border-radius:50%; 
    text-align:center; 
    background:#002f5f; 
    color:#ffffff; 
    font-size:14px; } 
    
.curso-modulo-contenido{ 
    padding:10px 25px 18px 62px; 
    background:#f5f8fc; 
    border-top:1px solid #d5dfeb; } 
    
.curso-modulo-contenido ul{ 
    margin:5px 0; 
    padding-left:20px; } 
    
.curso-modulo-contenido li{ 
    margin-bottom:7px; 
    line-height:1.4; 
    color:#333333; } 
    
/* ===================================================== 
INSTRUCTOR 
===================================================== */ 

.curso-instructor-contenido{ 
    padding:22px; 
    overflow:hidden; } 
    
.curso-foto-instructor{
    width:150px;
    height:190px;
    float:left;
    object-fit:cover;
    border-radius:10px;
    border:4px solid #d7a321;
    margin-right:22px; } 
    
.curso-instructor-datos{ overflow:hidden; } 

.curso-instructor-datos h3{ 
    margin:5px 0 10px; 
    font-size:22px; 
    color:#102c52; 
    font-weight:bold; } 
    
.curso-instructor-datos p{ margin-bottom:5px; } 

.curso-instructor-datos ul{ 
    padding-left:20px; 
    margin-top:5px; } 
    
.curso-instructor-datos li{ 
    margin-bottom:4px; } 
    
.curso-experiencia{ 
    margin:0; padding:0 22px 22px; 
    line-height:1.55; 
    color:#444444; } 
    
/* ===================================================== 
INVERSIÓN 
===================================================== */ 

.curso-precios{ 
    overflow:hidden; 
    padding:25px 10px; } 
    
.curso-precios > div{ 
    width:50%; 
    float:left; 
    text-align:center; 
    min-height:95px; 
    box-sizing:border-box; 
    padding:5px 10px; } 
    
.curso-precios > div:first-child{ 
    border-right:1px solid #d0dae6; } 
    
.curso-precios small, 
.curso-precios strong, 
.curso-precios span{ 
    display:block; } 

.curso-precios small{ 
    font-size:15px; } 

.curso-precios strong{ 
    margin:6px 0; 
    font-size:28px; 
    color:#102c52; } 
    
.curso-btn-comprar{ 
    display:block; 
    margin:0 22px 22px; 
    text-align:center; } 
    
/* ===================================================== 
QUÉ INCLUYE 
===================================================== */ 

.curso-incluye{ 
    background:#ffffff; 
    border-top:1px solid #d4deeb; 
    border-bottom:1px solid #d4deeb; } 
    
.curso-incluye-grid{ 
    text-align:center; } 
    
.curso-incluye-grid > div{ 
    width:19%; 
    display:inline-block; 
    vertical-align:middle; 
    padding:12px; 
    box-sizing:border-box; } 
    
.curso-incluye-grid .fa{ 
    display:block; font-size:39px; 
    color:#002f5f; 
    margin-bottom:10px; } 
    
.curso-incluye-grid p{ 
    margin:0; 
    font-size:14px; 
    font-weight:bold; } 
    
/* ===================================================== 
FORMAS DE PAGO Y OBTENCIÓN 
===================================================== */ 

.curso-pago-obtencion{ 
    width:100%; 
    overflow:hidden; 
    padding:35px 4%; 
    box-sizing:border-box; } 
    
.curso-formas-pago, 

.curso-obtencion{ 
    width:49%; 
    min-height:430px; 
    float:left; 
    background:#ffffff; 
    border:1px solid #d4deeb; 
    border-radius:7px; 
    padding:25px; 
    box-sizing:border-box; } 
    
.curso-obtencion{ float:right; } 

.curso-pagos-grid{ overflow:hidden; } 

.curso-pagos-grid > div{ 
    width:33.333%; 
    float:left; 
    padding:10px; 
    box-sizing:border-box; 
    text-align:center; } 
    
.curso-pagos-grid .fa{ 
    font-size:38px; 
    color:#002f5f; } 
    
.curso-pagos-grid h3{ 
    min-height:40px; 
    font-size:15px; 
    font-weight:bold; } 
    
.curso-pagos-grid p{ 
    font-size:13px; 
    line-height:1.4; } 
    
.curso-datos-pago{ 
    margin-top:20px; 
    border:1px solid #d7a321; 
    border-radius:5px; } 
    
.curso-datos-pago summary{ 
    padding:13px 18px; 
    cursor:pointer; 
    color:#102c52; 
    font-weight:bold; } 
    
.curso-datos-pago-contenido{ 
    padding:10px 20px 20px; 
    background:#f8fafc; 
    border-top:1px solid #d7a321; }
    
.curso-datos-pago-contenido h3{ 
    color:#002f5f; 
    font-size:17px; 
    font-weight:bold; } 
    
.curso-datos-pago-contenido p{ 
    line-height:1.55; } 
    
/* ===================================================== 
PASOS 
===================================================== */ 

.curso-pasos{ 
    overflow:hidden; } 
    
.curso-paso{ 
    width:33.333%; 
    float:left; 
    text-align:center; 
    padding:10px; 
    box-sizing:border-box; } 
    
.curso-paso > span{ 
    display:inline-block; 
    width:55px; 
    height:55px; 
    line-height:55px; 
    border-radius:50%; 
    background:#d19a16; 
    color:#ffffff; 
    font-size:24px; 
    font-weight:bold; } 
    
.curso-paso h3{ 
    min-height:40px; 
    font-size:15px; 
    font-weight:bold; 
    text-transform:uppercase; } 
    
.curso-paso p{ 
    font-size:13px; 
    line-height:1.5; } 
    
.curso-btn-final{ 
    display:block; 
    max-width:350px; 
    margin:25px auto 0; 
    text-align:center; } 
    
/* ===================================================== 
TABLET 
===================================================== */ 

@media(max-width:991px){ 
    
.curso-hero-texto, 

.curso-hero-imagen{ width:50%; } 

.curso-hero-texto h1{ font-size:34px; } 

.curso-aprender-item{ 
    width:32%; 
    border-right:none; } 
    
.curso-programa, 

.curso-lateral{ 
    width:100%; 
    float:none; } 
    
.curso-lateral{ 
    margin-top:25px; } 
    
.curso-formas-pago, 

.curso-obtencion{ 
    width:100%; 
    float:none; 
    min-height:0; } 
    
.curso-obtencion{ 
    margin-top:25px; } } 
    
/* ===================================================== 
CELULAR 
===================================================== */ 

@media(max-width:767px){ 
    
.curso-pagina{ padding-top:75px; } 

.curso-hero-texto, 

.curso-hero-imagen{ 
    width:100%; 
    float:none; } 
    
.curso-hero-texto{ 
    min-height:0; 
    padding:35px 25px; } 
    
.curso-hero-imagen{ 
    min-height:0; } 
    
.curso-hero-imagen img{ 
    min-height:0; height:auto; } 
    
.curso-hero-texto h1{ font-size:31px; } 

.curso-hero-texto h2{ font-size:20px; } 

.curso-caracteristica{ 
    width:100%; 
    display:block; 
    margin-bottom:18px; } 
    
.curso-aprender-item{ 
    width:48%; 
    min-height:170px; } 
    
.curso-programa{ padding:8px; } 

.curso-modulo summary{ 
    padding-right:38px; 
    font-size:14px; } 
    
.curso-foto-instructor{ 
    float:none; 
    display:block; 
    margin:0 auto 18px; } 
    
.curso-instructor-datos{ text-align:center; } 

.curso-instructor-datos ul{ 
    display:inline-block; 
    text-align:left; } 
    
.curso-incluye-grid > div{ width:48%; } 

.curso-pagos-grid > div, 

.curso-paso{ 
    width:100%; 
    float:none; 
    margin-bottom:20px; } } 
    
/* ===================================================== 
CELULAR PEQUEÑO 
===================================================== */ 

@media(max-width:480px){ 
    
.curso-aprender-item, 

.curso-incluye-grid > div{ 
    width:100%; } 
    
.curso-precios > div{ 
    width:100%; 
    float:none; 
    border-right:none !important; } 
    
.curso-precios > div:first-child{ 
    border-bottom:1px solid #d0dae6; 
    padding-bottom:20px; 
    margin-bottom:15px; } }

/* último estilo existente */
.curso-pasos{

}

/* =====================================================
   BANNER PRINCIPAL
===================================================== */

.curso-hero{
    display:flex;
    width:100%;
    height:570px;
    background:#002b52;
    overflow:hidden;
}

.curso-hero-texto{
    width:38%;
    padding:45px 45px 55px 6%;
    color:#ffffff;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
}

.curso-etiqueta{
    color:#d7a321;
    font-size:17px;
    font-weight:bold;
}

.curso-etiqueta .fa{
    margin-right:8px;
}

.curso-hero-texto h1{
    margin:18px 0;
    font-size:43px;
    line-height:1.1;
    font-weight:bold;
    color:#ffffff;
}

.curso-hero-texto h2{
    margin:0 0 18px;
    font-size:23px;
    font-weight:bold;
    color:#d7a321;
}

.curso-hero-texto p{
    margin:0;
    font-size:16px;
    line-height:1.6;
    color:#ffffff;
    max-width:520px;
}

.curso-btn-dorado{

    display:inline-block;

    margin-top:28px;

    padding:16px 38px;

    background:#d19a16;
    color:#ffffff;

    text-decoration:none;

    font-size:17px;
    font-weight:bold;

    border-radius:4px;

    align-self:flex-start;
}

.curso-btn-dorado:hover{

    background:#b8840f;
    color:#ffffff;
}

.curso-terminos{

    margin-top:22px;

    font-size:13px;
    line-height:1.5;

    color:rgba(255,255,255,.80);

}

.curso-terminos a{

    color:#d7a321;
    font-weight:bold;
    text-decoration:none;
}

.curso-terminos a:hover{

    text-decoration:underline;
}

.curso-hero-imagen{

    width:62%;
    overflow:hidden;
}

.curso-hero-imagen img{

    width:100%;
    height:570px;

    object-fit:cover;

    display:block;
}

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

@media(max-width:991px){

    .curso-hero{

        height:430px;
    }

    .curso-hero-imagen img{

        height:430px;
    }

    .curso-hero-texto{

        padding:35px 30px;
    }

    .curso-hero-texto h1{

        font-size:34px;
    }

    .curso-hero-texto h2{

        font-size:19px;
    }

}

/* =====================================================
   CELULAR
===================================================== */

@media(max-width:767px){

    .curso-hero{

        display:block;
        height:auto;
    }

    .curso-hero-texto,
    .curso-hero-imagen{

        width:100%;
    }

    .curso-hero-imagen img{

        height:auto;
    }

    .curso-hero-texto{

        padding:35px 25px;
    }

}

/* ==========================================
   TÉRMINOS Y CONDICIONES
========================================== */

.curso-terminos{
    margin-top:14px;
    margin-bottom:20px;
    font-size:13px;
    line-height:1.45;
    color:rgba(255,255,255,0.80);
}

.curso-terminos a{
    color:#d7a321;
    text-decoration:none;
    font-weight:bold;
}

.curso-terminos a:hover{
    text-decoration:underline;
}