/*INTERNAS::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
:root {
  --color-brand-primary: #F05A2A;
  --color-brand-secondary: #00A0DB;
}

@media screen {
    /*header*/
    .Interna header.General { background: var(--color-brand-secondary) url(imagenes/internas/fondo-head-interna.jpg) no-repeat 0 0; background-size: cover;}
    .Interna #PediTuPrestamo { margin-top: 0;}
    .Interna #ViasContacto { padding-bottom: 48px;}

    /*main*/
    .Interna #MainInterna {  background-color: transparent; } 
   
     #MainInterna>header {
        position: relative;
        width: 100%;
        height: 380px;
        text-align: left;
        }

        #Ancianita {
        position: absolute;
        overflow: hidden;
        height: 100%;
        bottom: 0;
        left: 50px;
        }

        #Ancianita img {
        max-height: 100%;
        display: block;
        }

        #GloboInterna {
        position: absolute;
        z-index: 100;
        bottom: -30px;
        left: 0;
        }

        #GloboInterna::before {
        content: "";
        position: absolute;
        top: -26px;
        left: 170px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #DC4D20;
        -webkit-transform: scale(1, 2.5) skewX(-60deg);
        transform: scale(1, 2.5) skewX(-60deg);
        }

        #GloboFijo {
        padding: 30px 60px;
        background: #DC4D20 url(imagenes/curva-naranja.svg) no-repeat 0 0;
        background-size: auto 100%;
        }

        #GloboInterna h1 {
        display: block;
        font-size: 2.8rem;
        color: #fff;
        }

        p.DestacadoGeneral {
        font-size: 1.4rem;
        line-height: 1.5em !important;
        color: #333;
        }   
        .Interna #ContentInterna { display: block; padding-top: 150px; padding-bottom: 80px;}
            .Interna #HeaderInterna { display: block; margin-bottom: 48px;}
                .Interna #HeaderInterna h1 { display: block; font-size: 48px; font-weight: bold; color: var(--color-brand-secondary);}
                .Interna #HeaderInterna h1 span { color: var(--color-brand-primary);}

    ul.General {
        list-style: none;
        width: 100%;
        padding-top: 35px;
        display: flex;
        flex-wrap: wrap;
    }

    ul.General li {
        flex: 1 1 33.33%;
        padding: 0 15px 15px 0;
    }

    ul.General img {
        width: auto !important;
        height: 45px;
        margin-bottom: 15px;
    }

    ul.General h3 {
        display: block;
        font-size: 0.95rem !important;
        line-height: 1.5em !important;
        color: #333 !important;
    }

    /*BENEFICIOS*/
    div.General #MainInterna>header {
        background: url(imagenes/internas/fondo-comerciante-medium-1.webp) no-repeat 0 0, url(imagenes/internas/fondo-comerciante-medium-2.webp) no-repeat 0 0, url(imagenes/internas/fondo-comerciante-medium-1.webp) no-repeat 0 0;
        background-size: cover, cover, cover;
        animation: SlideIntena 6s ease infinite;
    }

    #AccesosUsuarios {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-top: 50px;
    }

    #AccesosUsuarios div {
        flex: 1 1 280px;
        text-align: center;
        padding: 65px 15px;
    }

    #AccesoComercializador {
        background: #DC4D20 url(imagenes/curva-naranja.svg) no-repeat 0 0;
        background-size: auto 100%;
    }

    #AccesoComerciante {
        background: #0A89BE url(imagenes/curva-azul.svg) no-repeat 0 50%;
        background-size: auto 100%;
    }

    #AccesosUsuarios p {
        display: block;
        font-size: 2.3rem;
        color: #fff;
    }

    #AccesosUsuarios a {
        display: inline-block;
        margin-top: 15px;
        font: normal 0.8rem "Lato", "ArNarr-regular", Arial, Helvetica, sans-serif;
        ;
        color: #fff;
        padding: 10px 20px;
        border: 1px solid #fff;
        border-radius: 5px;
    }    
    

    /*.......*/
    /*RED COMERICAL*/
    #RedComercialComercializador #MainInterna>header {
        background: url(imagenes/internas/fondo-comercializador-medium-1.webp) no-repeat 0 0, url(imagenes/internas/fondo-comercializador-medium-2.webp) no-repeat 0 0, url(imagenes/internas/fondo-comercializador-medium-1.webp) no-repeat 0 0;
        background-size: cover, cover, cover;
        animation: SlideIntena 6s ease infinite;
    }

    #RedComercialComerciante #MainInterna>header {
        background: url(imagenes/internas/fondo-comerciante-medium-1.webp) no-repeat 0 0, url(imagenes/internas/fondo-comerciante-medium-2.webp) no-repeat 0 0, url(imagenes/internas/fondo-comerciante-medium-1.webp) no-repeat 0 0;
        background-size: cover, cover, cover;
        animation: SlideIntena 6s ease infinite;
    }

    #GloboNav {
        display: flex;
        justify-content: center;
        width: 540px;
    }

    #GloboInterna .Simple {
        padding: 40px 60px;
        background: #DC4D20 url(imagenes/curva-naranja.svg) no-repeat 0 0;
        background-size: auto 100%;
    }

    #GloboNav .Simple {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 30px;
        -webkit-transition: flex 0.3s ease-in;
        transition: flex 0.3s ease-in;
    }

    #GloboNav h1 {
        font-size: 2.2rem;
    }

    #GloboNav img {
        width: 50px;
        margin: 0 auto;
    }

    p.IconoFlecha {
        font-size: 2.2rem;
        line-height: 0 !important;
        color: #fff;
    }

    .Simple p.IconoFlecha {
        display: none;
    }

    #GloboNav .Anexo {
        flex: 0 0 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0A89BE;
        padding: 30px;
        cursor: pointer;
        -webkit-transition: flex 0.3s ease-in, background-color 0.3s ease;
        transition: flex 0.3s ease-in, background-color 0.3s ease;
    }

    #GloboNav .Anexo div {
        display: none;
    }

    #GloboNav .Anexo a {
        display: block;
        text-align: center;
        color: #fff;
    }

    #GloboNav .Anexo a p {
        display: block;
        margin: 0 auto;
        font-size: 2.2rem;
    }

    #GloboNav .Anexo a img {
        margin: 0 auto;
    }     

    /*comercialmode*/
    #GloboNav.comercialmode {}

    #GloboNav.comercialmode .Simple {
        flex: 0 0 80px;
        cursor: pointer;
    }

    #GloboNav.comercialmode .Simple div {
        display: none;
    }

    #GloboNav.comercialmode .Simple p.IconoFlecha {
        display: block;
    }

    

    #GloboNav.comercialmode .Anexo {
        flex: 1 1 auto;
    }

    #GloboNav.comercialmode .Anexo div {
        display: block;
    }

    #GloboNav.comercialmode .Anexo p.IconoFlecha {
        display: none;
    }

    /*..........*/
    #ContentInterna {
        display: block;
        flex-wrap: wrap;
        text-align: left;
        width: 100%;
        padding: 0;
    }

    #IntroRequisitos {
        flex: 1 1 450px;
        padding-right: 40px;
        padding-bottom: 30px;
    }

    #IntroRequisitos h2 {
        display: block;
        margin-bottom: 20px;
        font-size: 1rem;
        color: #333;
    }

    p.DestacadoRequisito {
        font-size: 2.1rem;
        line-height: 1.5em !important;
        color: #333;
    }

    #DetalleRequisitos { flex: 1 1 60%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 40px;
    }

    #DetalleRequisitos>div {
        flex: 1 1 300px;
        padding-right: 30px;
        margin-bottom: 25px;
    }

    img.IconoRequisito {
        width: 50px;
        margin-bottom: 15px;
    }

    #DetalleRequisitos h3 {
        display: block;
        margin-bottom: 30px;
        font-size: 1.1rem;
        color: #F0592B;
    }

    .ListaRequisitos {
        list-style: none;
    }

    .ListaRequisitos li {
        position: relative;
        display: block;
        margin: 15px 0;
        padding-left: 18px;
    }

    .ListaRequisitos li::before {
        content: "+";
        position: absolute;
        top: 11px;
        left: 0;
        font-size: 15px;
        color: #F0592B;
    }

    .ListaRequisitos li h4 {
        font-size: 1rem;
        line-height: 1.4em !important;
        color: #333;
    }

    .ListaRequisitos li p {
        font-size: 0.9rem;
        line-height: 1.4em !important;
        color: #666;
    }

    .ListaRequisitos li h5 {
        display: block;
        margin-top: 8px;
        font-size: 0.9rem;
        line-height: 1.4em !important;
        color: #333;
    }

    #DestacadoComerical {
        flex: 0 0 100%;
        padding: 0;
    }

    #DestacadoComerical .ListaRequisitos li {
        margin: 5px 0;
    }

    /*PREGUNTAS FRECUENTES*/
    #QA { flex: 1 1 100%;}
    #QA ul { list-style: none; }   

    #ListaQA>li {
        display: block;
        margin-bottom: 48px;
        padding: 0 0 0 32px;
        background-repeat: no-repeat;
        background-position: 0 5px;
        background-size: 20px auto;
    }

    #ListaQA>li:nth-child(even) { background-image: url(imagenes/arrow-orange.png);}
    #ListaQA>li:nth-child(odd) { background-image: url(imagenes/arrow-bluesky.png);}

    #ListaQA h2 {
        display: block;
        margin-bottom: 5px;
        padding: 0;
        font-size: 23px;
        font-style: normal;
        font-weight: bold;
        color: #000;
        background: none;
        background-size: 20px 100%;
    }

    #ListaQA h3 {
        display: block;
        padding-left: 0;
        font: normal 19px "Lato", "ArNarr-regular", Arial, Helvetica, sans-serif;
        font-weight: 300;    
        line-height: 1.5em !important;
        color: #333;
        -webkit-transform: none;
        transform: none;
    }

    #ListaQA h3 em { font-style: normal;}

    #ListaQA h3 span,
    #ListaQA h3 a {
        color: #F0592B;
    }

    #ListaQA>li ul {
        margin: 8px 0 0 0;
    }

    #ListaQA>li ul li {
        position: relative;
        padding-left: 15px;
        margin-bottom: 5px;
    }

    #ListaQA>li ul li h4 {
        font-size: 0.9rem;
        line-height: 1.4em !important;
        color: #333;
    }

    #ListaQA>li ul li::before {
        content: "+";
        position: absolute;
        top: 11px;
        left: 0;
        font-size: 15px;
        color: #F0592B;
    }

    #ListaQA > li ul li a { color: var(--color-brand-primary);}
    #ListaQA > li figure { width: 100%; max-width: 650px; text-align: left !important;}
    #ListaQA > li figure img { max-width: 100%; display: block; margin: 0;}

    /*.......*/
    /*CONTACTO*/    
    #Contacto #ContentInterna { width: 100%; max-width: 600px; margin: 0 auto;}
    #Contacto #HeaderInterna { margin-bottom: 16px;}

    #FormContacto input[type="text"],
    #FormContacto input[type="email"],
    #FormContacto input[type="tel"],
    #FormContacto textarea {
        width: 100%;
        font: normal 0.9rem "Lato", "ArNarr-regular", Arial, Helvetica, sans-serif;
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 5px;
        background-color: #FFF;
        margin-bottom: 10px;
    }

    #FormContacto input[type="email"] {
        width: calc(60% - 9px);
        margin-right: 9px;
        display: inline-block;
        vertical-align: top;
    }

    #FormContacto input[type="tel"] {
        width: calc(40% - 9px);
        margin-left: 9px;
        display: inline-block;
        vertical-align: top;
    }

    fieldset.captcha-group {
        width: 100%;
        display: block;
    }

    input#captcha {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 100px) !important;
        border-radius: 5px 0 0 5px !important;
    }

    fieldset.captcha-group span {
        display: inline-block;
        vertical-align: top;
        width: 100px;
    }

    #FormContacto textarea {
        height: 230px;
        overflow: auto;
        margin-bottom: 10px;
    }

    #FormContacto input[type="submit"] {
        display: inline-block;
        float: right;
        cursor: pointer;
    }

    /*focus*/
    #FormContacto input[type="text"]:focus,
    #FormContacto input[type="email"]:focus,
    #FormContacto input[type="tel"]:focus,
    #FormContacto textarea:focus {
        border-color: #F05A2B;
    }    

    /*.......*/
    /*TERMINOS Y CONDICIONES*/
    #ContentTerminos {
        padding-bottom: 40px;
        background-color: #f2f2f2;
    }

    #ContentTerminos header {
        padding: 60px 0 20px 175px;
    }

    #ContentTerminos .Flex {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }

    #ContentTerminos .Retrato {
        position: relative;
        overflow: hidden;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #EA5628;
    }

    #ContentTerminos .Retrato img {
        max-width: 100%;
        display: block;
    }

    #GloboTerminos {
        position: relative;
        text-align: left;
        padding: 30px;
        margin-left: 10px;
        background: #DC4D20 url(imagenes/curva-naranja.svg) no-repeat 0 0;
        background-size: auto 100%;
    }

    #GloboTerminos::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #F05A2B;
        -webkit-transform: scale(0.8, 2.5) skewX(-40deg) translateY(-40%);
        transform: scale(0.8, 2.5) skewX(-40deg) translateY(-40%);
    }

    #GloboTerminos h1 {
        font-size: 2rem;
        color: #fff;
    }

    #MainTerminos { padding-left: 0;}
        .txt-cc { font-weight: bold; color:var(--color-brand-primary);}
        .txt-cc i { font-style: normal; color:var(--color-brand-secondary);}

    #ListaTerminos {
        text-align: left;
    }

    #ListaTerminos dt {
        margin: 15px 0;
    }

    #ListaTerminos dd {
        margin-bottom: 30px;
    }

    #ListaTerminos h2,
    #ListaTerminos h3,
    #ListaTerminos p {
        display: block;
        text-align: left !important;
        font-size: 0.9rem;
        line-height: 1.5em !important;
        color: #333;
        margin-bottom: 10px;
    }

    #ListaTerminos h2 strong { font-family: "Lato"; font-weight: bold;}

    .ListaTerminos {
        list-style: none;
    }

    .ListaTerminos li {
        position: relative;
        display: block;
        padding-left: 15px;
        margin-bottom: 15px;
    }

    .ListaTerminos li::before {
        content: "+";
        position: absolute;
        top: 10px;
        left: 0;
        font-size: 15px;
        color: #F0592B;
    }

    /*GLOSARIO*/
    p#IntroGlosario {
        display: block;
        text-align: left;
        padding-left: 0;
        margin-bottom: 30px;
        font: normal 1.1rem "Lato", "ArNarr-regular", Arial, Helvetica, sans-serif;
        line-height: 1.5em !important;
    }

    p#IntroGlosario strong {
        font-size: 2rem;
    }

    #ListaGlosario {
        list-style: none;
        width: 100%;
        margin: 15px 0;
        text-align: left;
    }

    #ListaGlosario li {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 0;
        border-radius: 5px;
    }

    #ListaGlosario li:nth-child(even) { background-color: #fff; }
    #ListaGlosario li:nth-child(odd) { background-color: #f2f2f2; }

    #ListaGlosario h2 {flex: 0.5; padding: 0 20px; font-size: 0.9rem; line-height: 1.5em !important; color: #333;}
     #ListaGlosario h2 strong {font-family: "Lato", "ArNarr-regular", Arial, Helvetica, sans-serif;font-weight: bold;}

    #ListaGlosario p { flex: 2.5; padding: 0 20px; font-size: 0.9rem; line-height: 1.5em !important;   color: #333; text-align: left !important; }
}

/*HOVER*/
@media (hover: hover) and (pointer: fine) {	
    #AccesosUsuarios a:hover {
        opacity: 0.8;
    }

    #GloboNav .Anexo:hover {
        background-color: #0B9DD9;
    }

    #GloboNav.comercialmode .Simple:hover {
        background: none;
        background-color: #F05A2B;
    }

    #ListaQA h3 a:hover {
        color: #333;
    }

    #FormContacto input[type="text"]:hover,
    #FormContacto input[type="email"]:hover,
    #FormContacto input[type="tel"]:hover,
    #FormContacto textarea:hover {
        border-color: #F05A2B;
    }
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*ANCHOS///////////////////////////////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1470px) {    
    /*INTERNA*/
    #MainInterna>header {
        height: 280px;
    }

    #GloboInterna .Simple,
    #GloboInterna .Anexo {
        padding: 20px 30px;
    }

    #GloboInterna h1,
    #GloboNav .Anexo a p {
        font-size: 2.3rem;
    }

    /*RED COMERCIAL*/
    #Ancianita {
        left: 80px;
    }

    div[id*="RedComercial"] #GloboInterna {
        bottom: -80px;
    }

    div[id*="RedComercial"] #ContentInterna {
        padding-top: 150px;
    }

     #AsistenteVirtual {
        margin-bottom: 90px;
    }

    /*TERMINOS Y CONDICIONES*/
    #ContentTerminos header,
    #MainTerminos {
        padding-left: 0;
    }
}

@media (max-width: 1366px) {    
    /*BENEFICIOS*/
    #GloboInterna::before {
        left: 130px;
    }

    /*RED COMERCIAL*/
    #ContentInterna {
        padding-top: 100px;
    }

    #GloboInterna {
        left: 30px;
    }

    #DetalleRequisitos {
        padding-left: 0;
    }
}

@media (max-width: 1200px) {
   .Interna #ContentInterna { padding-top: 80px;}

    /*BENEFICIOS*/
    ul.General {}

    ul.General li {
        text-align: center;
        padding-right: 0;
    }

    ul.General img {
        margin-left: auto;
        margin-right: auto;
    }

    ul.General h3 {
        text-align: center;
    }

    #ViasContacto{
        padding-bottom: 0;
    }
}

@media (max-width: 1100px) {  
    /*RED COMERCIAL*/
    #IntroRequisitos {
        padding-right: 0;
    }
}  

@media (max-width: 900px) {
    /*TERMINOS Y CONDICIONES*/
    #ContentTerminos header {
        padding-top: 25px;
    }

    #ContentTerminos .Flex {
        flex-direction: column;
    }

    #GloboTerminos {
        padding: 15px;
    }

    #GloboTerminos h1 {
        font-size: 1.7rem;
    }

    #GloboTerminos::before {
        left: 50%;
        top: -20px;
        border-bottom-color: #DC4D20;
        -webkit-transform: scale(1, 2.5) skewX(-40deg) translateX(-50%);
        transform: scale(1, 2.5) skewX(-40deg) translateX(-50%);
    }
}

@media (max-width: 850px) {
    /*RED COMERCIAL*/
    #ContentInterna {
        padding-top: 60px;
    }

    /*PREGUNTAS FRECUENTES*/
    #ListaQA h3 {padding-left: 0;}    

    /*GLOSARIO*/
    #ListaGlosario h2,
    #ListaGlosario p {
        flex: 1 1 100%;
    }
}

@media (max-width: 700px) {
    /*BENEFICIOS*/
    #AccesosUsuarios {
        padding-top: 25px;
    }

    ul.General li {
        flex: 1 1 180px;
    }

    /*RED COMERCIAL*/
    #GloboNav {
        width: 420px;
    }

    #GloboNav h1,
    #GloboNav .Anexo a p {
        font-size: 1.5rem;
    }

    /*TERMINOS Y CONDICIONES*/
    #GloboTerminos {
        margin-left: 0;
    }

    #GloboTerminos h1 br {
        display: none;
    }
}

@media (max-width: 600px) {
.Interna #ContentInterna { padding-top: 110px !important; }

    /*CONTACTO*/
    p.DestacadoGeneral { font-size: 18px !important;}

    /*BENEFICIOS*/
    div.General #GloboInterna {
        bottom: -50px;
    }   

    #GloboFijo {
        padding: 18px 30px;
    }

    #GloboFijo h1.General {
        font-size: 2.2rem;
    }

    /*RED COMERCIAL*/
    /*main*/
    #DetalleRequisitos>div {
        padding-right: 0;
    }
}    

@media (max-width: 520px) {
    .Interna header.General { height: 80px;}
    
    /*PREGUNTAS FRECUENTES*/
    div.General #GloboInterna {
        width: calc(100% - 60px);
    }

    /*RED COMERCIAL*/
    #GloboNav {
        width: 100%;
    }

    #GloboNav h1,
    #GloboNav .Anexo a p {
        height: 60px;
    }

    #GloboNav span {
        display: block;
    }

    #GloboNav img {
        display: none;
    }

    div[id*="RedComercial"] #ContentInterna {
        padding-top: 120px;
        padding-bottom: 30px;
    }

    p.DestacadoRequisito {
        font-size: 1.7rem;
    }

    #DetalleRequisitos h3 {
        font-size: 0.9rem;
    }

    .ListaRequisitos li h4 {
        font-size: 0.8rem;
    }

    .ListaRequisitos li::before {
        top: 8px;
    }
}

@media (max-width: 450px) {
    #HeaderInterna { margin-bottom: 32px;}
    
    /*BENECIOS*/
    div.General #GloboInterna {
        width: calc(100% - 30px);
    }

    #AccesosUsuarios p {
        font-size: 2rem;
    }

    /*PREGUNTAS FRECUENTES*/
    #PreguntasFrecuentes h1 {
        font-size: 33px !important;
    }

    #ListaQA>li {
        margin-bottom: 32px;
    }

    #ListaQA h2 {
        font-size: 19px;
    }

    #ListaQA h3 {
        font-size: 16px;
    }

    /*RED COMERCIAL*/
    #GloboInterna {
        width: calc(100% - 30px);
        left: 15px;
    }

    #GloboInterna h1,
    #GloboNav .Anexo a p {
        font-size: 1.8rem;
    }

    #GloboNav h1 {
        max-width: 225px;
    }

    /*CONTACTO*/
    #Contacto .naranja {
        font-size: 1rem;
    }    

    #FormContacto input[type="email"],
    #FormContacto input[type="tel"] {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 400px) {
    /*RED COMERCIAL*/
    #MainInterna>header {
        height: 230px;
    }

    #Ancianita {
        left: 80px;
    }

    #GloboNav h1,
    #GloboNav .Anexo a p {
        height: 50px;
        font-size: 1.4rem;
    }
}