@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{margin: 0; padding: 0; list-style: none; font-family: Inter;  scroll-behavior: smooth;
}

body{width: 100vw; }
.wrapper{width: 1024px; margin: auto;}
.mobile{display: none; }
.desktop{display: block;}
.hidden{display: none;}
img{width: 100%;}
main{ display: flex;}
h1{
    width: 200px; height: 200px;
    overflow: hidden;
    background: url(images/logo.png)  center / cover  no-repeat;
    text-indent: -1000px;
}
h#1logo1{display: none;}
section{ margin: 50px auto;}
footer{background-color: #565759 ;color: white; column-gap: 15%; column-width: 50%;}
nav{width: 100%; z-index: 1; position: relative;}
nav ol{ display: flex;}
nav li{ width: 20%;}
nav li:nth-child(4){ width: 200px;}
nav a{ text-transform: uppercase; font-size: 1.3em; text-align: center; display: block; color: black; margin: 120px 0 0 0; text-decoration: none; font-weight: 200;}
header{ margin-top: -30px; z-index: 0;}
nav li:first-child a, nav li:nth-child(4) a{ border-right: black solid 1px;}
main div{width: 45%; margin: 2.5%;}
main h2{font-size: 2em; font-style: italic; margin-bottom: 1em;}
main p{ font-size: 1.25em; margin-bottom: 1em;}
main h3{font-weight: bolder; font-size: 1.5em;}

#agendaCA{background-color: #00acd0; color: white; display: block; width: 350px; height: 35px; border-radius: 20px;padding: 15px 0 5px 0; text-align: center; text-decoration: none; font-style: italic; font-weight: bolder; text-shadow: 5px 5px 5px rgba(0,0,0,.5);}
#servicios h2, #efecto h2, #respaldo h2{ font-size: 3em; font-weight: 200; text-align: center; letter-spacing: .25em; clear: both;  margin: 25px 0; }
#servicios h2 b, #efecto h2 b, #respaldo h2 b{ font-weight: 600; }
#metodo{display: flex; column-count: 2; column-width: 50%;}
#metodo img{width: 50%; height: auto;}
#metodo div{width: 40%; padding: 2.5%;}
#metodo p{ margin: 25px auto;}
h3#slogan{ width: 35vw; height: 6vw; overflow: hidden; text-indent: -10000px; background: url(images/slogan.png) center / cover no-repeat; margin: 25px auto;}
a#contactanos{ width: 250px; padding: 0 20px 0 50px; background-color: #ff0090; display: flex; height: 50px; border-radius: 20px; text-align: center; color: white; font-size: 2em; line-height: 1.5; text-decoration: none; font-family: Anton;}
a#contactanos img{ width: 50px;}
#efecto article{ display:block; width: 100vw; margin:0; padding: 50px 0; clear: both; }
img.fxto{ width: 40vw; height: auto; display: block;float: left;}
img.loguito{ width: 15vw; margin: 50px 2vw; height: auto; display: block; float: left;}
#efecto article div{ width: 30vw; float: left;}
#efecto article h3{ margin:20px auto;}
#efecto article p{ margin:20px auto;}
#respaldo p{ width: 80%; margin: auto; font-size: 1.25em; text-align: center;}
#servicios ol{display: flex; flex-wrap: wrap; column-gap: 1%;}
#servicios ol li {width: 23vw; margin: 1vw; padding-top: .7vw; font-size:1.8vw; position: relative; padding-left: 6vw; line-height: 1; height: 5vw;  align-items: center;}
#servicios ol li:nth-child(7), #servicios ol li:nth-child(8) {padding-top: 1.5vw;}
#servicios ol li img {width: 5vw; position: absolute; top: 0vw; left: 0;}
footer > div{ display: flex; }
#logoTactic{
    width: 380px; height: 30px; overflow: hidden; text-indent: -10000px; background: url(images/logotacticext.png) center / cover no-repeat; text-align: center; margin: auto;    
}
footer h3{ margin: 20px 0 5px 0;}
.center{text-align: center;}
#fot1{ width: 40%;}
#webmaster{ color: white; text-decoration: none; font-weight: 300; margin: 30px 0; display: block;}
footer a{color: white; text-decoration: none; padding: 2px 0; display: block;}
#fot2{ width: 60%;}
.icons{width: 20px; margin-right: 10px;}
#redes{ display: flex; margin: 25px auto; width: 400px;}
#redes a{ width: 50px; height: 50px; display: block; overflow: hidden; margin: 0 20px; text-indent: -1000px;}
#fb{background: url(images/iconfb.png) center / contain no-repeat; }
#in{background: url(images/iconinstagram.png) center / contain no-repeat; }
#bh{background: url(images/iconbehance.png) center / contain no-repeat; }
#lin{background: url(images/iconlinkedin.png) center / contain no-repeat; }
#wh{background: url(images/iconwhatsapp.png) center / contain no-repeat; }