/*:::::::General:::::::*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-family: 'Lato', sans-serif;
    background-color: #f2f0ea;
    color: #333;
}

a, a:active, a:hover, a:visited{
    text-decoration: none;
    color: inherit;
}
.flex-row{
    display: flex;
    flex-flow: row wrap;
}
.flex-column{
    display: flex;
    flex-flow: column wrap;
}

.regular{
    display: block;
}
.mobile{
    display: none;
}
.regular-flex{
    display: flex;
}
.mobile-flex{
    display: none;
}

.dark{ background: #1e282e;}
.white{ background: #ffffff;}
.orange{ background: #eba348;}

.width-40{width: 40%;}

b{
    font-weight: 900;
}

    h2, h3, h4, h5, h6, p{
        padding-left: 40px;
        padding-right: 40px;
    }

section{
    width: 100%;
    position: relative;
}
/*:::::::Navegador:::::::*/

/*
nav{
    justify-content: space-between;
    align-items: center;
    min-height: 50px;
    background: #000;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
}
    nav h1{
        flex: 2, 0, auto;
    }
    nav ul{
        flex: 1, 0, auto;
        display: flex;
        justify-content: flex-end;
        list-style: none;
    }
    nav ul li{
        margin-left: 20px;
    }nav ul li a{
        width: 20%;
        margin-right: 10px;
    }
*/
    .font-white{ color: #fff;}
    .font-orange{ color: #eba348;}
    .font-orange-d{color: #f9954b;}
    .font-lgray{ color: #f2f0ea;}
    .font-dark{ color: #1e282e;}
    .font-max-pow{font-weight: 900; font-size: 3.2rem; line-height: 3rem;}
    .font-max{font-weight: 900; font-size: 2.8rem;}
    .font-med{font-weight: 900; font-size: 2rem;}

/*:::::::Navegador Principal:::::::*/

#fixContainer{
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}

*[id] {
  scroll-margin-top: 60px; /* Adjust this value to match your header's height */
}

/*:::::::Navegador Lateral:::::::*/
#sideBtn{
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 25px 0 0 25px;
    padding: 10px 5px 10px 10px;
}
    #sideBtn a{
        color: #f9954b;
    }

    .sideWp {
        font-size: 3rem;
    }

    .sideForm{
        font-size: 2.6rem;
    }
    
/*:::::::Navegador Central:::::::*/
#midBtn{
    position: relative;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
    #midBtn a{
	    display: flex;
	    flex: row nowrap;
	    justify-content: center;
	    align-items: center;
	    background: rgba(234, 143, 31, 0.9);
		border-radius: 15px;
		padding: 10px 5px 10px 10px;
        color: #1e282e;
        font-size: 1.2rem;
        width: 48%;
        box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
    }
    	#midBtn a:hover{
	    	background: rgba(0, 0, 0, 0.7);
	    	box-shadow: 0px 0px 2px 4px rgba(0,0,0,0.8);
	    	color: #eba348;
    	}
    #midBtn a i{
	    margin-right: 10px;
	}

    .midWp{
        font-size: 2.5rem;
    }
    .midForm{
        font-size: 2rem;
    }

	#midBtn div{
		width: 2%;
		height: 100%;
		background: #1e282e;	
	}

/*:::::::Encabezado:::::::*/

#inicio{
    min-height: 400px;
}
    #inicio header{
        padding-top: 40px;
        padding-bottom: 40px;
    }
        #inicio header h1{
            text-transform: uppercase;
            margin-bottom: 5px;
            padding-left: 40px;
            padding-right: 40px;
        }

        #inicio header h2{
            color:#fff;
            text-transform: uppercase;
            font-size: 2rem;
        }
        #inicio header h3{
            margin-top: 30px;
            font-size: 1.5rem;
            font-weight: 300;
        }
    #inicio figure{
        width: 100%;
        height: 550px;
    }
         #inicio figure h2, #ventajas h2{
            background: rgba(30, 40, 46, 0.9);
            padding-top: 10px;
            padding-bottom: 20px;
            font-size: 2rem;
            font-weight: 500;
        }

/*:::::::Soluciones:::::::*/

#soluciones{
    margin-top: -60px;
}

#soluciones header{
    background: rgba(30, 40, 46, 0.9);
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}
    #soluciones header h2{
        font-size: 2rem;
        font-weight: 500;
        color: #fff;
        max-width: 80%;
        text-align: center;
    }
#soluciones article, #soluciones figure{
    padding-top: 20px;
    padding-bottom: 20px;
}
#soluciones article{
    justify-content: center;
    align-content: center;
    font-size: 1.5rem;
    flex: 1 0 50%;
    min-width: 400px;
    padding-top: 50px;
}
    #soluciones article p{
        text-align: left;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    #soluciones article h3{
        width: 100%;
    }

#soluciones figure{
    flex: 1 0 auto;
    justify-content: center;
    align-content: center;
    min-width: 400px;
}
    #soluciones figure img{
        max-height: 600px;
    }

/*:::::::Ventajas:::::::*/

#ventajas aside{
    width: 100%;
    justify-content: center;
    align-items: flex-start;
}

#ventajas article{
    flex: 1 0 33%;
    min-width: 400px;
    max-width: 600px;
    padding-bottom: 20px;
}
    #ventajas h2{
        text-align: center;
    }
    #ventajas figure{
        min-height: 300px;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }
        #ventajas figure h4{
            color: #fff;
            text-transform: capitalize;
            font-weight: 900;
            font-size: 1.4rem;
            font-stretch: condensed;
            padding: 15px 0px 15px 0px;
            width: 100%;
            background: rgba(30, 40, 46, 0.8);
            text-align: center;
        }

        #ventajas figure img{
            position: absolute;
            max-height: 200px;
            right: 10px;
            bottom: 10px;
        }

    #ventajas figcaption{
        max-width: 95%;
        background: #fff;
        padding: 10px 20px 10px 20px;
        border-radius: 0 0 25px 25px;
        margin-left: auto;
        margin-right: auto;
        min-height: 220px;
    }

    #ventajas p, #ventajas ul{        
        font-size: 1.2rem;
        line-height: 1.5rem;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        list-style: none;
        margin-bottom: 10px;
    }

/*:::::::Estrategia:::::::*/

#estrategia{
    padding: 40px 0;
}

#estrategia header{
    text-align: center;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid #555;
}
    #estrategia header h2{
        font-size: 2rem;
        max-width: 80%;
        color: #1e282e;
        margin-left: auto;
        margin-right: auto;
    }

#estrategia article{
    padding: 20px;
    flex: 1 0 50%;
    min-width: 400px;
    color: #fff;
    border: 4px solid rgba(0, 0, 0, 0.6);
}

#estrategia article h3{
    font-weight: 500;
    font-size: 1.8rem;
    margin-bottom: 10px;
    padding:0px;
    line-height: 1.3em;
    text-align: center;
}
#estrategia figure{
    position: relative;
    text-align: center;
}


.search-figure figure, .pmax-figure figure{
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.flex-one{
    flex: 1 1 40%;
    max-width: 40%;
}
.flex-two{
    flex: 2 1 60%;
    max-width: 60%;
}

.search-figure figure img, .pmax-figure figure img{
    max-width: 100%;
}

.search-figure figure figcaption, .pmax-figure figure figcaption{
    border-radius: 15px;
    background: rgba(30, 40, 46, 0.9);
    font-weight: 900;
    padding: 10px;
}

.search-article img, .pmax-article img{
    width: 60%;
    max-width: 400px;
    min-width: 300px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}



#estrategia article ul{
    list-style: disc;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 1.2em;
}

#estrategia article ul li{
    margin-bottom: 10px;
}


#search-logo, #ia-logo{
    width: 175px;
    height: 50px;
    position: absolute;
    border-radius: 25px;
}

#search-logo{
    background: #fff url("../img/all/logo-search-ads.jpg") no-repeat center;
    background-size: contain;
    bottom: 40px;
    right: 20px;
}

#ia-logo{
    background: #fff url("../img/all/logo-ia-ads-2.jpg") no-repeat center;
    background-size: contain;
    top: 40px;
    right: 20px;
}

#estrategia footer{
    text-align: center;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #555;
}
    #estrategia footer h4{
        font-size: 1.4rem;
        font-style: italic;
    }
/*:::::::Servicio:::::::*/

#servicio{
    padding: 20px 20px;
    justify-content: space-between;
    gap: 20px;
}
#servicio header{
    width: 100%;
    padding: 20px 0 10px 0;
}
    #servicio header h2{
        text-align: center;
    }
    #servicio h3{
        font-size: 1.8em;
        color: #1e282e;
        text-align: center;
        margin-bottom: 20px;
    }
#servicio p{
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 10px;

    text-shadow:
    -1px -1px 2px #fff,  /* Top-left shadow */
     1px -1px 2px #fff,  /* Top-right shadow */
    -1px  1px 2px #fff,  /* Bottom-left shadow */
     1px  1px 2px #fff; /* Bottom-right shadow */

     background: rgba(255, 255, 255, 0.3);
    
}

#servicio article{
    flex: 1 1 auto;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-width: 400px;
    min-height: 250px;
    padding: 10px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.bg-idea{
    background: rgba(255, 255, 255, 0.8) url("../img/all/icon-idea-50.jpg") no-repeat right bottom;
    background-size: 30%;
}
.bg-target{
    background: rgba(255, 255, 255, 0.8) url("../img/all/icon-target-50.jpg") no-repeat right bottom;
    background-size: 30%;
}
.bg-web{
   background: rgba(255, 255, 255, 0.8) url("../img/all/icon-web-50.jpg") no-repeat right bottom;
    background-size: 20%;
}
#servicio footer{
    width: 100%;
}

    #servicio footer h4{
        font-size: 1.4rem;
        font-style: italic;
        text-align: right;
    }

/*:::::::Contacto:::::::*/

#contacto{
    margin-top: 20px;
    padding: 40px;
}
    #contacto header{
        text-align: center;
        width: 100%;
        margin-bottom: 40px;
    }
        #contacto header h2{
            font-size: 2em;
            font-weight: 700;
            margin-bottom: 10px;
        }
        #contacto header h3{
            font-size: 1.5em;
            font-weight: 300;
        }
    #contacto aside address{
        font-style: normal;
        text-align: left;
        flex: 1 1 auto;
        color: #eba348;
        justify-content: space-around;
        align-items: flex-start;
        font-size: 1.2em;
        background-color: rgba(0, 0, 0, 0.1);
        border-right: 8px solid #000;
        padding-left: 20px;
        border-radius: 25px 0px 0px 25px;
        box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.4);
    }
        #contacto aside address i{
            font-size: 2em;
            margin-right: 10px;
            vertical-align: middle;
        }


    /*:::::: FORM :::::*/

    #contacto aside form{
    text-align: center;
    padding: 20px;
    border-radius: 0px 25px 25px 0px;
    background: rgba(247, 141, 7, 0.8);
    flex: 2 0 auto;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.4);
    }
        #contacto aside form table{
            width: 100%;
            min-height: 230px;
        }
            #contacto form input[type="text"], #contacto form input[type="email"], #contacto form input[type="tel"], #contacto form textarea{
                width: 95%;
                min-height: 40px;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 10px;
                background: rgba(255, 255, 255, 0.6);
                font-size: 1.2em;
                box-shadow: inset 0px 0px 4px 2px rgba(0, 0, 0, 0.6);
                border: none;
                color: #1e282e;
            }
            #contacto aside form ::placeholder{
                color: #1e282e;
            }
            #contacto form textarea{
                width: 97%;
                height: 100px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	            font-family: 'Lato', sans-serif;
                font-size: 1.2em;
                color: #1e282e;
            }
            #contacto aside form table td, #contacto form input[type="submit"]{
                width: 50%;
            }
            #contacto form input[type="submit"]{
                background: rgba(30, 40, 46, 0.8);
                color: #fff;
                text-transform: uppercase;
                font-weight: 500;
                border: none;
                border-radius: 10px;
                padding: 10px 20px;
                font-size: 1.2em;
                cursor: pointer;
                box-shadow: 0px 0px 3px 4px rgba(247, 141, 7, 1);
            }
            #contacto form input[type="submit"]:hover{
                background: rgba(30, 40, 46, 1);
                box-shadow: inset 0px 0px 6px 4px #000;
                font-weight: 900;
            }

/*:::::::Footer:::::::*/

#footer{
    background: #000;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 0.9rem;
    min-height: 200px;
    padding: 40px;
    padding-bottom: 100px;
}
    #footer figure{
        align-items: center;
        justify-content: space-evenly;
    }
        #footer figure img{
            max-height: 150px;
            max-width: 45%;
            margin: 10px;
        }

    #footer h2{
        font-size: 1.5em;
        line-height: 1.8em;
        font-weight: 300;
        margin-top: 40px;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    #footer div{
        border-radius: 15px;
        background: rgba(247, 141, 7, 1);
        color: #1e282e;
        font-size: 1.2em;
        text-transform: capitalize;
        font-weight: 900;
        width: 400px;
        padding: 15px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #fff;
        cursor: pointer;
    }
        #footer div:hover{
            background: #fff;
            border: 2px solid #f9954b;
        }
   

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
    }

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
        h2{
            padding: 20px;
        }
        h3{
            padding: 20px;
        }
        section{
            overflow: hidden;
        }
        .regular{
            display: none;
        }
        .mobile{
            display: block;
        }
        .regular-flex{
            display: none;
        }
        .mobile-flex{
            display: flex;
        }

        .font-max-pow {
            font-size: 2.8rem;
            line-height: 3rem;
        }
        /*::::Navegador Principal:::::::*/

        #mobileHeader{
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 10px 0px 10px 0px;
            background: #000;
        }

        *[id] {
            scroll-margin-top: 310px; /* Adjust this value to match your header's height */
        }

        /*:::::::Side Btn:::::::*/

        #sideBtn{
            padding: 5px 5px 10px 10px;
            top: 70%;
            box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.4);
        }
        .sideWp {
            font-size: 2.5rem;
        }
        .sideForm{
            font-size: 2rem;
        }

        /*:::::::mid Btn:::::::*/
        #midBtn{
            width: 90%;;
        }
        #midBtn a {
            padding: 5px;
            min-height: 70px;
        }
        /*::::Inicio:::::*/

        #mobileHeader{
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 10px 0px 10px 0px;
            background: #000;
        }

        #inicio header {
            padding-top: 30px;
            padding-bottom: 10px;
        }

        #inicio header h1{
            padding-left: 20px;
            padding-right: 20px;
        }

        #inicio header h2 {
            text-transform: uppercase;
            font-size: 1.4rem;
            font-weight: 400;
        }

        #inicio header h3 {
            margin-top: 0px;
        }
		.font-max {
            font-weight: 900;
            font-size: 2rem;
        }
        .font-med {
            font-size: 1.6rem;
        }
        #inicio header h3 {
            font-size: 1.2rem;
            line-height: 1.5em;
        }
        #inicio figure h2, #ventajas h2 {
            font-size: 1.5rem;
        }
        /*::::Soluciones:::::*/
        #soluciones header, #estrategia header{
            padding: 20px 0;
        }
        #soluciones header h2, #estrategia header h2 {
            font-size: 1.5rem;
            max-width: 90%;
            padding: 0px;
        }

        #soluciones article {
            order: 2;
            font-size: 1.2rem;
            padding-top: 10px;
        }
        #soluciones figure {
            width: 100%;
            order:1;
        }
        #soluciones figure img {
            width: 90%;
        }

         /*:::Estrategia:::*/

        #ventajas p, #ventajas ul {
            font-size: 1.1rem;
            line-height: 1.4rem;
            margin-top: 10px;
        }

        .search-figure figure figcaption, .pmax-figure figure figcaption {
            border-radius: 15px;
            font-weight: 700;
            padding: 10px 5px 10px 5px;
            font-size: 1rem;
            margin: 5px;
        }

        #estrategia article h3 {
            font-size: 1.4rem;
            line-height: 1.2em;
        }
        #search-logo, #ia-logo {
            width: 125px;
            height: 40px;
            border-radius: 15px;
        }
        #estrategia article ul {
            list-style: disc;
            padding-left:  10px;
            padding-right: 10px;
            font-size: 1.1em;
            line-height: 1.3em;
        }
        #estrategia footer h4 {
            font-size: 0.9rem;
            font-style: italic;
        }
        #estrategia-last{
            order: 4;
        }
        #estrategia footer{
            order: 5;
            border-bottom: 1px solid #555;
        }
        /*::::Servicio::::*/
        #servicio {
            padding: 20px 10px 20px 10px;
            justify-content: space-between;
            gap: 20px;
        }

        #servicio article {
            min-width: 380px;
        }

        #servicio header {
            width: 100%;
            padding: 0px;
        }
        #servicio h3 {
            font-size: 1.4em;
            margin-bottom: 10px;
        }

        #servicio p{
            font-size: 1.1rem;
            line-height: 1.3rem;
            padding: 5px;
        }

        .bg-idea{
            background: rgba(255, 255, 255, 0.8) url("../img/all/icon-idea-50.jpg") no-repeat center center;
            background-size: 50%;
        }
        .bg-target{
            background: rgba(255, 255, 255, 0.8) url("../img/all/icon-target-50.jpg") no-repeat center center;
            background-size: 50%;
        }
        .bg-web{
            background: rgba(255, 255, 255, 0.8) url("../img/all/icon-web-50.jpg") no-repeat center center;
            background-size: 60%;
        }

        #servicio p{
            background: rgba(255, 255, 255, 0.4);
        }

        /*::::Contecto::::*/
        #contacto{
            padding: 0px;
            overflow: hidden;
        }
        #contacto aside address {
            flex-flow: row wrap;
            border-right: none;
            border-top: 4px solid #000;
            border-bottom: 8px solid #000;
            padding: 10px 0;
        }
        #contacto aside form {
            width: 70%;
            border-radius: 0px;
        }

        #contacto header h2 {
            font-size: 1.5em;
            margin-bottom: 5px;
            padding: 10px;
        }
        #contacto header h3 {
            font-size: 1.3em;
        }
        /*:::Footer::::*/
        #footer h2 {
            font-size: 1.2em;
            line-height: 1.6em;
            margin-top: 20px;
        }
        #footer div {
            width: 90%;
        }
    }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
        #inicioBtn{
            display: none;
        }
    
    }

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}