﻿:root {
    --tamañoFuenteTitulo: 32px;
    --tamañoFuenteParrafos: 16px;
    --tamañoFuenteSubtitulos: 16px;
}



body {
    font-family: 'Open Sans', sans-serif;
    /*background-color:#DBDBDB;*/
}



html {
    scroll-behavior: smooth;
}



a:link {
    text-decoration: none
}



a:visited {
    color: white;
    font-family: arial;
    text-decoration: none;
}



* {
    outline: none !important;
}



    *:focus {
        outline: none !important;
    }



textarea:focus, input:focus {
    outline: none !important;
}



a {
    text-decoration: none !important;
    outline: none !important;
}



.Header {
    position: absolute;
    background-color: rgba(0,0,0, 0.7);
}
.nav_inicioSesion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media(max-width:1024px) {
    .nav_inicioSesion {
        flex-direction: column;
        align-items: start;
    }
}
.bton__hover {
    background-color: #073D3B;
    transition: background-color 0.5s;
}
    .bton__hover:hover {
        background-color: #053432;
    }

.bton__hover-nav {
    background-color: white;
    transition: background-color 0.5s;
}

    .bton__hover-nav:hover {
        background-color: #DBDBDB;
    }


.nav__inicioSesion {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.bton__enlace {
    display: inline-block;
    color: white;
    padding: 1rem 1rem;
    text-decoration: none;
    border: 1px solid white;
    text-transform: none;
    border-radius: .2rem
}

.bton__enlaceInfo {
    display: inline-block;
    color: white;
    padding: 1rem 1rem;
    text-decoration: none;
    text-transform: none;
    border-radius: .2rem;
    background-color: #073D3B;
}



.header__images {
    /*opacidad de la imagen header solo modificar el .80*/
    background: linear-gradient(to right, rgb(0 0 0/.80) 0%, rgb(0 0 0/.80) 50%, rgb(0 0 0/.80) 100%), url(../Content/images/header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}



.header__contenido {
    padding: 3rem 0;
    max-width: 1300px;
    margin: 0 auto
}



.servicios__images {
    background: linear-gradient(to right, rgb(219 219 219/.90) 0%, rgb(219 219 219/.90) 80%, rgb(219 219 219/.80) 100%), url(../Content/images/servicios.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    /*background-position: bottom;*/
}



.nosotros__images {
    background: linear-gradient(to right, rgb(219 219 219/.90) 0%, rgb(219 219 219/.90) 80%, rgb(219 219 219/.80) 100%), url(../Content/images/nosotros.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}


.bton__padding{
    padding: 1.5rem 2.5rem;
    font-size:15px;
}
.title_header {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
}
.paragraph__nav {
    font-size: 15px;
    margin-left: 1.5rem;
}
.title__price {
    font-size: 40px;
}

.title2 {
    font-size: var(--tamañoFuenteTitulo);
    color: #fff;
    font-weight: bold;
}



.title__green {
    font-size: var(--tamañoFuenteTitulo);
    color: #073D3B;
    font-weight: bold;
}



.text__footer {
    font-size: 16px;
    color: #FFF;
}



.paragraph_header {
    font-size: 20px;
}



.paragraph {
    font-size: var(--tamañoFuenteParrafos);
}
.paragraph__icon {
    font-size: 19px;
}

.servicios_icons {
    padding-left: 5rem;
}

.servicios__tools {
    margin-left: 8rem;
}



.subtitle__contacto {
    font-size: 20px;
    color: #073D3B;
    font-weight: bold;
}



.paragraph__contacto, .tittle__mesaje {
    font-size: 16px;
    color: #000;
    font-weight: bold
}



.paragraph__captcha {
    font-size: 16px;
    font-weight: bold;
    color: #073D3B;
}



canvas {
    max-width: 100%;
}



.formulario {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 2rem
}



.formulario__item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: .5rem 0;
    width: 20rem;
}



.formulario__input {
    border: none;
    background: none;
    border-bottom: 2px solid #000;
    font-size:16px
}



    .formulario__input::placeholder {
        font-weight: bold;
        color: #000
    }



.formulario__text {
    width: 25rem;
    height: 11.2rem;
    border: none;
    resize: none;
    background: #fff
}



.aCaptcha {
    text-decoration-line;
}



.boton {
    background: #073D3B;
    margin-top: 2rem;
    display: inline-block;
    padding: .5rem 2rem;
    font-weight: bold;
    border-radius: .1rem;
    font-size: 17px;
    color: #fff;
}



.items__images {
    display: flex;
}



.items__servicios {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.icons {
    width: 8rem;
}

@media(max-width:968px) {
    .nav__inicioSesion {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    .icons{ 
        width:6rem;
    }
    .bton__hover-nav {
        background-color: white;
        transition: background-color 0.5s;
        width: 100%;
        height: 100%;
    }

        .bton__hover-nav:hover {
            background-color: #DBDBDB;
        }
    .bton__padding {
        padding: 1rem 2rem;
        font-size: 16px;
    }
    .title_header {
        font-size: 24px;
        /*padding-left: 2rem;*/
    }

    .title__price {
        font-size: 32px;
    }

    .paragraph_header {
        font-size: 16px;
    }
    .paragraph__icon {
        font-size: 16px;
    }
    .paragraph__nav {
        font-size: 16px;
        margin-left: 1.5rem;
    }
    .title2 {
        font-size: 24px;
    }



    .title__green {
        font-size: 24px;
    }



    .subtitle__contacto {
        font-size: 18px;
    }
    .paragraph__contacto {
        font-size: 16px;
    }


    .text__footer {
        font-size: 14px;
    }



    .items__images {
        display: flex;
        align-items: center;
        flex-direction: column;
    }



    .items__text {
        text-align: center !important;
        width: 100% !important;
    }

    .servicios_icons {
        padding: 2rem;
    }

    .servicios__tools {
        margin: 0;
    }



    .mq__servicios {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(1,1fr);
    }



    .paragraph {
        font-size: 16px;
    }



    .formulario__input {
        width: 100%;
    }



    .formulario {
        grid-template-columns: repeat(1,1fr);
        width: 100%;
    }



    .formulario__item {
        width: 100%;
        padding: 1rem;
    }
    .formulario__input {
        font-size: 16px
    }


    .formulario__text {
        width: 100%;
    }



    .items__servicios {
        grid-template-columns: repeat(1,1fr);
    }
}



.inputCap {
    padding: 1rem;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 25rem;
    box-sizing: border-box;
    margin-top: -1.5rem
}





canvas {
    /*prevent interaction with the canvas*/
    pointer-events: none;
    width: 10rem;
    height: 6rem;
}



@media(max-width:968px) {
    .inputCap {
        width: 28.5rem;
    }
}

/*.header__sticki {
    position: sticky !important;
    top: 0px !important;
    animation: adjust-header linear both !important;
    animation-timeline: scroll() !important;
    animation-range: 0 200px !important;
}

@keyframes adjust-header {
    to {
        background-color: #073D3B;
    }
}*/

@media(min-width:968px) {
    .herramientas ocultas {
        padding-left: 10rem;
    }
}