/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://tomusborne.com
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.5.1.1730333818
Updated: 2024-10-31 00:16:58

*/
:root {
    --azul-50: #f0f9ff;
    --azul-100:#e1f3fd;
    --azul-200:#bbe7fc;
    --azul-300:#72d0f9;
    --azul-400:#3cc0f4;
    --azul-500:#12a7e5;
    --azul-600:#0687c3;
    --azul-700:#066b9e;
    --azul-800:#095a83;
    --azul-900:#0e4c6c;
    --azul-950:#093048;
}
    
html{scroll-behavior: smooth;}
body::-webkit-scrollbar {width: 16px;background: gray;}
body::-webkit-scrollbar-thumb {
	border: 4px solid gray;
    border-radius: 7px;
    background: #ccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}
body{
	background-size: 300px;
    background-position: center;
    background-image: linear-gradient(to left, transparent 150px, rgba(0 0 0 / 10%) 150px, transparent 151px);
    color: black;
}
a{
	color: black;
}
a:hover{
	color: grey;
}
h1{font-size:5rem;font-weight:bold;}
h2{font-size:3.5rem;font-weight:bold;}
h3{font-size:2.5rem;font-weight:bold;}
h4{font-size:1.5rem;font-weight:bold;}
.site-logo {margin-left: 10px;}
.titleHome{
	color:#fdfcfc;text-shadow: -1px -1px 1px #333, 1px -1px 1px #333, -1px 1px 1px #333, 1px 1px 1px #333;
}
.portada{
    /*background: linear-gradient(#fffffffc 20%, #a2a0a0e3 80%), url(https://whitline.eu/wp-content/uploads/personas-trabajando-en-oficina-de-agencia-de-desar.png);
    background-position-y: top, 100px;*/
}
.espacio50{
	width: 100%;
	height: 50px;
}
.espacio100{
	width: 100%;
	height: 100px;
}
.flecha{
	font-size: 3rem;
    color: black;
    transform: rotate(-90deg);
    position: relative;
    top: -50px;
    z-index: 2;
	width: 100px;
    margin: auto;
}
.mapamundi{
	font-size: 3rem;
    color: black;
    position: relative;
    z-index: 2;
}
.grillKeyVisual{
	max-width: 680px;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    top: -150px;
}
.elemVisual{display: flex;justify-content: center;margin: auto;position: relative;}
.keyVisual img {
    aspect-ratio: 2 / 1.98;
    width: 100%;
}
.grillRankingSEO{
	position: absolute;
    top: 250px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: rgb(0 0 0 / 8%);
    backdrop-filter: blur(4px);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.rankingSEO{
	position: absolute;
    bottom: 20px;
    left: 0px;
	font-size:12px;
}
.check{position:absolute;top:-20px;left: -25px;width:50px;height:50px;background:rgb(0 0 0 / 8%);backdrop-filter: blur(4px);border-radius:1rem;display: flex;justify-content: center;align-items: center;z-index:1;}
.lupa span{
	filter: grayscale(1);
    font-size: 1.3rem;
    position: absolute;
    top: 40px;
    left: 50px;
    z-index: 1;
}
.lupa img{position:absolute;top:30px;left:40px;width:60px;height:60px;z-index:2;}
.icokey{width:40px;height:40px;}

.grillGrafic{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 250px;
    right: -50px;
    background: rgb(0 0 0 / 8%);
    border-radius: 1rem;
    backdrop-filter: blur(4px);
    width: 180px;
    height: 180px;
	    z-index: 1;

}
.spncircle {
    outline: 10px solid black;
    outline-offset: 5px;
    border-bottom-width: 2px;
    border-bottom-color: white;
    border-bottom-style: solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    margin: auto;
    width: 50px;
    height: 50px;
    background: conic-gradient(#000000 60%, #555555 10%, #f7f7f7 70%);
}
.spncirclelinea1 {
    border-bottom: 2px dotted white;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 15px;
    left: 90px;
    transform: rotateZ(314deg);
}
.porcent {
    position: absolute;
    top: 15px;
    left: 127px;
}
.conversion{
	position: absolute;
    bottom: 10px;
    left: 10px;
	font-size:12px;
}
.fpLineas{
	display: flex;
	justify-content: center;
	margin: auto;
	width:200px;
	height:200px;
	position: absolute;
	top: 200px;
	transform: rotateZ(45deg);
	/*overflow: hidden;*/
}
.fpLineas span:nth-child(1) {position:absolute;top:0;left:0;width:100%;height:.5px;background:linear-gradient(to right, transparent, gray);animation:bordertop 3s linear infinite;}
@keyframes bordertop {0% {transform: translateX(-100%);transition:.5s;}100% {transform: translateX(100%);}}
.fpLineas span:nth-child(2) {position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, transparent, gray);animation:borderright 2s linear infinite;animation-delay: .5s;transition:.5s;}
@keyframes borderright {0% {transform: translateY(-100%);transition:.5s;}100% {transform: translateY(100%);}}
.fpLineas span:nth-child(3) {position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to left, transparent, gray);animation:borderbottom 3s linear infinite;}
@keyframes borderbottom {0% {transform:translateX(100%);}100% {transform: translateX(-100%);}}
.fpLineas span:nth-child(4) {position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(to top, transparent, gray);animation:borderleft 4s linear infinite;animation-delay:.5s;}
@keyframes borderleft {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}
.fpLineasIn1{
	width:100px;
	height:100px;
	position: absolute;
	top: 0;
	left: 0;
	transition:.5s;
	overflow: hidden;
	/*transform: rotateZ(45deg);*/
}
.fpLineasIn1 span:nth-child(1) {position:absolute;top:0;left:0;width:100%;height:.5px;background:linear-gradient(to right, transparent, gray);animation:bordertop 4s linear infinite;}
@keyframes bordertop {0% {transform: translateX(-100%);}100% {transform: translateX(100%);}}
.fpLineasIn1 span:nth-child(2) {position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, transparent, gray);animation:borderright 3s linear infinite;animation-delay: .5s;}
@keyframes borderright {0% {transform: translateY(-100%);}100% {transform: translateY(100%);}}
.fpLineasIn1 span:nth-child(3) {position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to left, transparent, gray);animation:borderbottom 2s linear infinite;}
@keyframes borderbottom {0% {transform:translateX(100%);}100% {transform: translateX(-100%);}}
.fpLineasIn1 span:nth-child(4) {position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(to top, transparent, gray);animation:borderleft 1s linear infinite;animation-delay:.5s;}
@keyframes borderleft {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}
.fpLineasIn2{
	width:100px;
	height:100px;
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	/*transform: rotateZ(45deg);*/
}
.fpLineasIn2 span:nth-child(1) {position:absolute;top:0;left:0;width:100%;height:.5px;background:linear-gradient(to right, transparent, gray);animation:bordertop 1s linear infinite;}
@keyframes bordertop {0% {transform: translateX(-100%);}100% {transform: translateX(100%);}}
.fpLineasIn2 span:nth-child(2) {position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, transparent, gray);animation:borderright 2s linear infinite;animation-delay: .5s;}
@keyframes borderright {0% {transform: translateY(-100%);}100% {transform: translateY(100%);}}
.fpLineasIn2 span:nth-child(3) {position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to left, transparent, gray);animation:borderbottom 3s linear infinite;}
@keyframes borderbottom {0% {transform:translateX(100%);}100% {transform: translateX(-100%);}}
.fpLineasIn2 span:nth-child(4) {position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(to top, transparent, gray);animation:borderleft 4s linear infinite;animation-delay:.5s;}
@keyframes borderleft {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}
.fpLineasIn3{
	width:100px;
	height:100px;
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	/*transform: rotateZ(45deg);*/
}
.fpLineasIn3 span:nth-child(1) {position:absolute;top:0;left:0;width:100%;height:.5px;background:linear-gradient(to right, transparent, gray);animation:bordertop 4s linear infinite;}
@keyframes bordertop {0% {transform: translateX(-100%);}100% {transform: translateX(100%);}}
.fpLineasIn3 span:nth-child(2) {position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, transparent, gray);animation:borderright 3s linear infinite;animation-delay: .5s;}
@keyframes borderright {0% {transform: translateY(-100%);}100% {transform: translateY(100%);}}
.fpLineasIn3 span:nth-child(3) {position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to left, transparent, gray);animation:borderbottom 2s linear infinite;}
@keyframes borderbottom {0% {transform:translateX(100%);}100% {transform: translateX(-100%);}}
.fpLineasIn3 span:nth-child(4) {position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(to top, transparent, gray);animation:borderleft 1s linear infinite;animation-delay:.5s;}
@keyframes borderleft {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}
.fpLineasIn4{
	width:100px;
	height:100px;
	position: absolute;
	bottom: 0;
	right: 0;
	overflow: hidden;
	/*transform: rotateZ(45deg);*/
}
.fpLineasIn4 span:nth-child(1) {position:absolute;top:0;left:0;width:100%;height:.5px;background:linear-gradient(to right, transparent, gray);animation:bordertop 1s linear infinite;}
@keyframes bordertop {0% {transform: translateX(-100%);}100% {transform: translateX(100%);}}
.fpLineasIn4 span:nth-child(2) {position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(to bottom, transparent, gray);animation:borderright 2s linear infinite;animation-delay: .5s;}
@keyframes borderright {0% {transform: translateY(-100%);}100% {transform: translateY(100%);}}
.fpLineasIn4 span:nth-child(3) {position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(to left, transparent, gray);animation:borderbottom 3s linear infinite;}
@keyframes borderbottom {0% {transform:translateX(100%);}100% {transform: translateX(-100%);}}
.fpLineasIn4 span:nth-child(4) {position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(to top, transparent, gray);animation:borderleft 4s linear infinite;animation-delay:.5s;}
@keyframes borderleft {0% {transform: translateY(100%);}100% {transform: translateY(-100%);}
}
/*boton CTA*/
.box {
  height: auto;
  float: left;
  transition: .5s linear;
  position: relative;
  display: block;
  /*overflow: hidden;*/
  padding: 15px;
  text-align: center;
  margin: 0 5px;
  background: transparent;
  text-transform: uppercase;
  font-weight: 900;
}

.box:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  transform: translateX(100%);
}

.box:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  box-sizing: border-box;
  transform: translateX(-100%);
}

.box:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.box:hover:before {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .3s;
}

.box:hover:after {
  border-color: #262626;
  height: 100%;
  transform: translateX(0);
  transition: .3s transform linear, .3s height linear .5s;
}

.btn {
  color: white;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  background: black;
  z-index:1;
}
.btn:hover{
	background: transparent;
}
/*infografía*/
.infografiaWeb{}
/*Metodo*/
.metodo {position:relative;}
.inWel{
	height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 30%) 50%, rgb(255 255 255 / 20%) 100%), rgb(8 8 8 / 10%);
}
.metodo .inWel:nth-child(1){transform:rotate(10deg);}
.metodo .inWel:nth-child(3){transform:rotate(-10deg);}
.inWelBackCuadro{
	width: 160px;
    height: 30px;
    border: 1px solid rgb(0 0 0 / 8%);
    position: relative;
    top: -16px;
    margin: auto;
    background: white;
}
.inWelBackCuadro img{
	aspect-ratio: 2 / .91;
    width: 60px;
    position: relative;
    top: 0px;
    left: 45px;
}
/*Quienes somos*/
/*.quienessomos{background: rgb(0 0 0 / 10%);color: black;}*/
/*Servicios*/
/*.servicios{background: rgb(0 0 0 / 10%);color: black;}*/
/*Newsletter*/
/*.newsletter{background: rgb(0 0 0 / 60%);color: black;}*/
/*FAQ*/
.wrapperFAQ{padding:2rem 0;}
.faqTitle{
	font-size: 3rem;
    font-weight: 700;
    color: #250a61;
    text-align: center;
}
.faq{
	width: 100%;
	margin:0 auto;
}
.q_faq{
    width: 100%;
    background: rgb(0 0 0 / 5%);
    border-bottom: 0.3px solid rgb(0 0 0 / 10%);
    color: black;
    margin: 0;
    padding: 1rem;
    position: relative;
    box-sizing: border-box;
    backdrop-filter: blur(3px);
}
.q_faq span {
	color: black;
	cursor: pointer;
	font-size: 2rem;
	position: absolute;
	top:0.4rem;
	right: 1rem;
}
.q_faq h3{
	color:black;
	cursor: pointer;
	font-size: 1.35rem;
    font-weight: 500;
    margin: 0;
	padding-right: 2rem;
}
.none {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    transition: all .8s;
}
.rta_faq {
    width: 100%;
    color: black;
    margin: 1rem 0;
    padding: 25px;
    box-sizing: border-box;
	opacity:1;
	transition: all 2s;
}
/*footer*/
.piePag{
    background-color: rgb(0 0 0 / 5%);
    color: #000;
    position: relative;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    backdrop-filter: blur(3px);
}
.grid_logo_rrss{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 60%;
    margin: auto;
}
.logoPiePag{
	margin: 0 auto;
}
.logoPiePag img{
	width: 90px;
}
.grid_rrss{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ico_rrss{
    color: black;
    width: 2rem;
    padding: 0.2rem;
    box-sizing: border-box;
}
.ico_rrss a:hover{
    background-color:black;
    border:none;
	color:red;
}
.grid_links_piePag{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
    margin: 20px auto;
    place-content: center;
    max-width: 1200px;
    padding-top: 20px;
}
.links_piePag{
    display:flex;
    flex-direction: column;
    text-align: left;
}
.links_piePag a{
	color: black;
	text-decoration: none;
}
.vigneta_links{
position:relative;
bottom:3px;
}
.site-info {
    background-color: black;
    color: white;
    font-size: 12px;
}
@media only screen and (max-width: 768px){
	body {
    background-image: linear-gradient(to left, transparent 150px, rgba(0 0 0 / 4%) 150px, transparent 151px);
    }
	.grillGrafic {
		top: 180px;
		right: -10px;
    }
	.grillRankingSEO {
		left:-10px;
	}
	.check {
    	top: -25px;
		left: 50px;
	}
	.fpLineas {
		top: 120px;
	}
	.grid_logo_rrss{
        display:flex;
		flex-direction: column;
    }
    .grid_rrss{
        width:100%;
    }
    .grid_links_piePag{
		display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	.links_piePag {
    margin-bottom: 2rem;
    }
    .logoPiePag {
		margin-bottom: 2rem;
		border: none;
		padding: 0px;
    }
}