@import url('base.css');

:root{
    --fuente: 'Baloo Tamma 2', cursive;
    --color3:#0A8C2D;
    --blanco: #FFF;
    --fondo:#242A2A;
    --boton: #0B98F4;
    --borde: #696B6D;
}

/*-------------------------------------------------Página Principal---------------------------------*/
.seccion3{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.servicios{
    text-align: center;
    width: 80%;
}
.titulo_seccion{
    font-size: 1.7rem;
    color: var(--blanco);
}
.tipo_servicios{
    width: 90%;
    margin: 1rem;
    background-color: var(--fondo);
    padding: 1rem 2rem;
}
.iconos{
    width: 80%;
    height: 50%;
}
.nombre{
    background-color: #FFF;
    height: 5%;
    border-radius: .7rem;
    background-color: transparent;
    color: var(--blanco);
    font-size: 1.2rem;
    text-decoration: none;
    cursor: pointer;
    margin: .5rem 0 0 0;
}

/*Campo Contacto*/
.contactenos{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 0;
}
.formulario{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    background-image: url('../img/formularioN.jpg');
    background-repeat: no-repeat;
    background-size: 200%;
    padding: 1rem 0;
}
.texto-contactenos{
    color: white;
    font-size: 1.8rem;
}
.campos{
    padding: .5rem;
    border-radius: 1rem;
    margin: 1rem;
    font-size: 1rem;
    width: 80%;
}
.mensaje{
    padding: 1rem;
    margin: 1rem;
    border-radius: 1rem;
    font-size: 1rem;
    width: 75%;
}
.sombra{
    -webkit-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
    -moz-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
    box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
    border-radius: 1rem;
}
.boton-enviar{
    width: 90%;
    text-align: center;
}
.guardar{
    width: 10rem;
    height: 2.5rem;
    font-size: 1.3rem;
    border-radius: 10rem;
    font-style: italic;
    transform: background-color .3s ease;
    transform: color .3s ease;
    text-align: center;
    cursor: pointer;
}
.guardar:hover{
    background-color: rgba(87, 227, 31, 0.5);
    color: white;
}

@media(min-width:768px){
    .seccion3{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .servicios{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
        width: 90%;
     }
}

@media(min-width:768px){    
    /*Página Principal*/
    .seccion3{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .servicios{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
        gap:1rem;
        width: 90%;
     }
     .titulo_seccion{
        font-size: 1.7rem;
        grid-column: 1/3;
        color: black;
    }
    .tipo_servicios{
        margin: 1rem;
        width: 95%;
        height: 100%;
    }
    .iconos{
        width: 100%;
        height: 80%;
        padding: .5rem;
    }
    .nombre{
        background-color: #FFF;
        border-radius: 1rem;
        background-color: transparent;
        color: var(--blanco);
        font-size: 1.2rem;
        text-decoration: none;
        cursor: pointer;
        margin: .5rem 0 0 0;
    }
    /*Contactos resolución*/
    .contactenos{
        margin: 2rem 0;
        display: flex;
        justify-content: center;
    }
    .formulario{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 80%;
        padding: 1rem;
        background-image: url('../img/formularioN.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 1rem;
        text-align: center;
    }
    .texto-contactenos{
        grid-column: 1/3;
        color: white;
        font-size: 1.8rem;
        margin: 1rem;
    }
    .campos{
        padding: 1rem;
        border-radius: 1rem;
        margin: 1rem;
        font-size: 1.2rem;
        width: auto;
    }
    .mensaje{
        grid-column: 1/3;
        padding: 1rem;
        margin: 1rem;
        border-radius: 1rem;
        font-size: 1.2rem;
        width: auto;
    }
    .sombra{
        -webkit-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        -moz-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        border-radius: 1rem;
    }
    .boton-enviar{
        grid-column: 1/3;
        width: 95%;
        margin: 0 1rem;
        text-align: center;
    }
    .guardar{
        width: 10rem;
        height: 2.5rem;
        font-size: 1.3rem;
        border-radius: 10rem;
        font-style: italic;
        transform: background-color .3s ease;
        transform: color .3s ease;
        cursor: pointer;
    }
    .guardar:hover{
        background-color: rgba(87, 227, 31, 0.5);
        color: white;
    }
}

@media (min-width:980px){    
    /*Página Principal*/
    .seccion3{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .servicios{
        display: grid;
        grid-template-columns: repeat(4, .5fr);
        text-align: center;
        width: 90%;
     }
     .titulo_seccion{
        font-size: 1.7rem;
        grid-column: 1/5;
        color: black;
    }
    .tipo_servicios{
        width: 95%;
        height: 100%;
    }
    .iconos{
        width: 100%;
        height: 75%;
    }
    .nombre{
        background-color: #FFF;
        border-radius: 1rem;
        background-color: transparent;
        color: var(--blanco);
        font-size: 1.2rem;
        text-decoration: none;
        cursor: pointer;
        width: 100%;
        height: 20%;
    }
    /*Contactos resolución*/
    .contactenos{
        margin: 2rem 0;
        display: flex;
        justify-content: center;
    }
    .formulario{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 75%;
        padding: 1rem;
        background-image: url('../img/formularioN.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
        border-radius: 1rem;
        text-align: center;
    }
    .texto-contactenos{
        grid-column: 1/3;
        color: white;
        font-size: 1.8rem;
        margin: 1rem;
    }
    .campos{
        padding: 1rem;
        border-radius: 1rem;
        margin: 1rem;
        font-size: 1.2rem;
        width: auto;
    }
    .mensaje{
        grid-column: 1/3;
        padding: 1rem;
        margin: 1rem;
        border-radius: 1rem;
        font-size: 1.2rem;
        width: auto;
    }
    .sombra{
        -webkit-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        -moz-box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        box-shadow: 11px 7px 18px 1px rgba(71,69,71,0.63);
        border-radius: 1rem;
    }
    .boton-enviar{
        grid-column: 1/3;
        width: 95%;
        margin: 0 1rem;
        text-align: center;
    }
    .guardar{
        width: 10rem;
        height: 2.5rem;
        font-size: 1.3rem;
        border-radius: 10rem;
        font-style: italic;
        transform: background-color .3s ease;
        transform: color .3s ease;
        cursor: pointer;
    }
    .guardar:hover{
        background-color: rgba(87, 227, 31, 0.5);
        color: white;
    }
}
/*------------------------------------------------Fin Página Principal---------------------------------*/


/*------------------------------------------------Fin Páginas Secundarias---------------------------------*/
/*Pagina Developer*/

.sombra2{
-webkit-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
-moz-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
}
.serviciosD{
    display: flex;
    padding: 2rem 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
}
.producto{
    display: block;
    color: var(--blanco);
    width: 90%;
    margin: 1rem 0;
    background-color: var(--fondo);
}
.nombre_producto{
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
    font-size: 1.7rem;
}
.cara1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.cara1 p{
    font-size: 1.2rem;
}
.cara2{
    margin: 1rem 0;
    width: 80%;
    background-repeat: no-repeat;
    border-radius: 10%;
}
.imagen_lenguaje{
    width: 40%;
}
.boton-cotizar{
    padding: 1rem 2rem;
    background-color: transparent;
    border: 3px solid var(--blanco);
    border-radius: 2rem;
}
.boton-cotizar a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.2rem;
    transform: font-size .3s ease;
}
.boton-cotizar a:hover{
    font-size: 1.5rem;
}


@media (min-width:768px){
.seccion{
    display: flex;
    justify-content: center;
}
.serviciosD{
    display: flex;
    flex-direction: column;
    padding: 2rem 0;
    width: 100%;
    align-items: center;
    gap:2rem;
}
.producto{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    color: var(--blanco);
    text-align: center;
    width: 90%;
    align-items: center;
    gap: .5rem;
    margin: 2rem 0;
}
.nombre_producto{
    grid-column: 1/3;
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
}
.cara1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.cara1 p{
    font-size: 1.2rem;
}
.cara2{
    width: 80%;
    background-repeat: no-repeat;
    border-radius: 10%;
}
.imagen_lenguaje{
    width: 40%;
}
.boton-cotizar{
    padding: 1rem 2rem;
    background-color: transparent;
    border: 3px solid var(--blanco);
    border-radius: 2rem;
}
.boton-cotizar a{
    text-decoration: none;
    color: var(--blanco);
    font-size: 1.2rem;
    transform: font-size .3s ease;
}
.boton-cotizar a:hover{
    font-size: 1.5rem;
}
.sombra2{
-webkit-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
-moz-box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
box-shadow: -1px 13px 5px -6px rgba(227,4,16,1);
}
}



/*---------------------------------Formulario Cotización-----------------------------*/
.bodyC{
    background-color: #FFF;
}
.seccionC{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: center;
    height: 100%;
    width: 100%;
}
.seccionFormulario{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.imagenS{
    background-image: url(../img/DesarrolloCo.jpeg);
    background-color: rgba(0, 0, 0, 0.7);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(100vh - .5rem);
}
.formularioC{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    padding: 1rem;
} 
.Enlace{
    grid-column: 1 / 3;
}
.logo_cotizacion{
    width: 10rem;
    height: 10rem;
}
.encabezado{
    grid-column: 1 / 3;
    color: black;
    font-size: 1.5rem;
    margin: 1rem 0 2rem 0;
}
.caja{
    color: black;
    font-size: 1rem;
    border-radius: 1rem;
    padding: .5rem;
    margin: .5rem;
    width: 90%;
}
.descripcion{
    grid-column: 1 / 3;
    width: 95%;
    height: 8rem;
    font-size: 1rem;
    border-radius: 1rem;
    padding: .5rem;
    margin: .5rem;
}
.Guardar{
    width: 10rem;
    cursor: pointer;
    margin: 1.5rem 1rem;
    padding: .5rem;
    font-size: 1.2rem;
    grid-column: 1 / 3;
    background-color: var(--boton);
    color: white;
    border: 3px solid var(--borde);
}

@media(max-width: 750px){
    .seccionC{
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
        margin: 0;
    }
    .seccionFormulario{
        width: 90%;
        opacity: transparent;
        position: absolute;
        bottom: 0rem;
        padding: 0;
        margin: 0;
    }
    .logo_cotizacion{
        visibility: hidden;
    }
    .formularioC{
        position: absolute;
        top: -24.5rem;
        display: flex;
        flex-direction: column;
        width: 95%;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.4);
        padding: 0 1rem;
    }
    .encabezado{
        color: var(--blanco);
    }
}




/*---------------------------------Página Devtech----------------------------*/
.empresa{
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    padding: 1rem 0 ;
}
.contenidos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 80%;
    padding: 1rem;
}
.titulo_somos{
    grid-column: 1/3;
    color: var(--blanco);
    width: 80%;
    padding: 1rem 0;
}
.devtech{
    grid-column: 1/3;
    color: var(--blanco);
}
.objetivo{
    color: var(--blanco);
}
.titulo_dato{
    padding: 1.5rem;
    font-size: 1.5rem;
}
.iconos_devtech{
    width: 5rem;
    height: 5rem;
}

@media(max-width: 768px){
 /*---------------------------------Página  menor a 78px Devtech----------------------------*/
.empresa{
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem;
    padding: 1rem 0 ;
}
.contenidos{
    display: block;
    width: 90%;
    padding: 1rem;
}
.titulo_somos{
    color: var(--blanco);
    width: 90%;
    padding: 1rem 0;
}
.devtech{
    color: var(--blanco);
}
.objetivo{
    color: var(--blanco);
}
.titulo_dato{
    padding: 1.2rem;
    font-size: 1.2rem;
}
.iconos_devtech{
    width: 4rem;
    height: 4rem;
}   
}

/*---------------------------------------Página Encuesta-----------------------------*/
.principal{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.seccion_formulario{
    width: 70%;
}
.nombres{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.nombre_encuesta{
    font-weight: bold;
    margin: 1rem 0;
}
.datos_contacto{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.formulario_datos_contacto{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
}
.campos_datos{
    width: 90%;
    padding: .5rem;
    margin: .7rem 0;
    border-radius: 1rem;
}
.formulario_encuesta{
    margin: 1rem 0 2rem 0;
}
.datos_servicio{
    display: flex;
    flex-direction: column;
}
.dato_servicio{
    text-align: center;
    margin: 1rem 0;
}
.pregunta{
    display: flex;
    flex-direction: column;
    margin: .7rem 0;
}
.question{
    font-weight: bold;
    margin: .5rem 0;
}
.lista_calificacion{
    margin: .7rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.radio{
    margin: 0 .5rem;
}
.boton_accion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.boton_envio{
    border: 3px solid black;
    padding: .7rem 2rem;
    border-radius: 1rem;
    background-color: var(--color3);
    color: white;
    font-size: 1.2rem;
    font-family: var(--fuente);
}
.barra_divisoria{
    margin: 1rem 0;
}

@media (max-width: 860px){
    .principal{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        /*text-align: center;*/
        margin: 1rem 0;
    }
    .seccion_formulario{
        width: 90%;
        padding: 1rem 0;
    }
    .nombre_encuesta{
        font-weight: bold;
    }
    .formulario_datos_contacto{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .nombres{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .datos_contacto{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .datos_servicio{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .campos_datos{
        width: 90%;
        padding: .5rem;
        margin: 1rem;
        border-radius: 1rem;
    }
    .pregunta{
        display: flex;
        flex-direction: column;
        margin: 1rem 0;
    }
    .question{
        font-weight: bold;
        padding: .5rem 0;
    }
    .lista_calificacion{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: .5rem 0;
    }
    .radio{
        margin: 0 1rem;
    }
}