/* 
Theme Name: Templus
Theme URI: https://templus.es/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://workanda.es
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later..tabs-group
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

header #logoHeader img,
header #logoHeaderMovil img,
footer #logoHeaderFooter img{width: 175px; height: auto;}

/*GTranslate*/
/* Contenedor del switcher */
.gt_float_switcher .gt_options{
	position:absolute!important;
	background:#fff;
	width:100%;
}
.gt_float_switcher .gt_options a{
	color: #000!important;
	font-size:17px!important;
}
.gt_float_switcher .gt_options a:hover{
	background: var( --e-global-color-primary )!important;
	color:#fff!important;
}
.gt_float_switcher img{
	display:none!important;
}
.gt_float_switcher, .gt_float_switcher .gt-selected{
	background:unset!important;
	box-shadow:unset!important;
}
.gt_float_switcher .gt-selected .gt-current-lang{
	color: var( --e-global-color-primary )!important;
	font-size:15px!important;
	padding:0px!important;
}

/* Entrada de blog */

.single-post h2{margin-top: 40px;}
.single-post h3{margin-top: 20px;}
.single-post ul{padding-left: 40px; margin-bottom: 10px;}
.single-post ul li{padding-bottom: 10px;}


#btnPanelCookies{background: none; border: none; color: #000; font-size: 14px!important; font-weight: 400!important; cursor: pointer; padding: 0; text-transform: unset; font-family: inherit;}
#btnPanelCookies:hover{color: unset;}

.txtVerde{color: #00C287;}

#pagLegal h2{margin-top: 40px; margin-bottom: 15px; color: var( --e-global-color-primary ); font-size: 38px;}
#pagLegal ol, #pagLegal ul{margin-top: 10px;}
#pagLegal ul{margin: 10px 0;}
#pagLegal li{padding-bottom: 8px; line-height: 1.3em;}
#pagLegal a{text-decoration: underline;}


/*Contador home*/
.elementor-counter-number-suffix{
	font-size:30px;
}
.elementor-counter-number-prefix{
	font-size:50px;
}
.elementor-counter-title{
	text-align:center!important;
}
.elementor-counter-number-wrapper {
    display: inline-flex;
    align-items: flex-end;
}
.elementor-counter-number,
.elementor-counter-number-suffix {
    line-height: 1;
}
.elementor-counter-number-suffix {
    margin-left: 5px;
	margin-bottom:5px;
}


/* MAPA DATACENTERS - Contenido */
/* Contenedor del modal */
.tabs-group{position: relative;}
.btnCerrar{text-align: right; margin-bottom: 10px;}
.cerrar-modal{position: initial; padding: 0!important; font-size: 20px!important; font-weight: bold!important; background: none!important; border: none!important; z-index: 9999;}
.cerrar-modal:hover{color: #00C287!important;}
/* Contenedor de las pestañas */
.tabs-group .tabs {display: flex; margin-bottom: 20px;}
/* Cada pestaña */
.tabs-group .tab {padding: 12px 20px; cursor: pointer; font-weight: bold; border-bottom: 3px solid transparent; transition: 0.3s;}
/* Pestaña activa */
.tabs-group .tabs .active {border-bottom: 3px solid #00C287; color: #00C287;}
/* Contenido */
.tabs-group .content{display: none;}
.tabs-group .content.active{display: block;}
.tabs-group .content ul{padding-left: 0!important;}
.tabs-group .content ul li{list-style: none; padding: 15px 0 15px 40px; position: relative; border-bottom: 1px solid #00C287;}
.tabs-group .content ul li::before{content: ""; position: absolute; left: 0; margin-top: 10px; width: 22px; height: 9px; background-image: url("/imgs/li-linea.svg"); background-size: contain; background-repeat: no-repeat;}
.tabs-group .content ul li strong{padding-left: 10px;}
.tabs-group a{font-weight: 600; margin-top: 20px; display: block; color: #00C287;}
.tabs-group a:hover{font-weight: 600; margin-top: 20px; display: block; color:#000;}

/*******************************/

/* Contacto */
#formContacto .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{width: 25%; margin: 10px 0;}
#formContacto .elementor-field-group-servicio .elementor-field-label,
#formContacto .elementor-field-group-localizaciones .elementor-field-label,
#formContacto .elementor-field-group-mensaje .elementor-field-label{color: #00C287; font-weight: 600;}
#formContacto .elementor-field-group-chkLopd div label{font-size: 16px;}
/*************/


/* CONTENEDOR EFECTO IMAGEN */
.img-ondas {
    position: relative;
    display: inline-block;
}

/* IMAGEN */
.img-ondas img {
    display: block;
    width: auto;
    height: auto;
}

/* CAPA ANIMADA */
.img-ondas::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--img-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(3000%) hue-rotate(240deg);
    mask-image: radial-gradient(circle, transparent 40%, black 45%, transparent 55%);
    mask-size: 0% 0%;
    -webkit-mask-size: 0% 0%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    animation: ondaCircular 2s ease-out infinite;
    pointer-events: none;
}

@keyframes ondaCircular {
    0% {
        mask-size: 0% 0%;
        -webkit-mask-size: 0% 0%;
        opacity: 0.8;
    }
    70% {
        mask-size: 150% 150%;
        -webkit-mask-size: 150% 150%;
        opacity: 0.4;
    }
    100% {
        mask-size: 200% 200%;
        -webkit-mask-size: 200% 200%;
        opacity: 0;
    }
}

/*margen izquierdo listado de iconos*/
.elementor-icon-list-icon{
    margin-left:5%;
}

/*Efecto vidrio*/
.vidrio{
        box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.15),
        0 8px 20px rgba(0,0,0,0.25);
            backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Placeholder en blanco */
.elementor-field::placeholder {
    color: #ffffff !important;
    opacity: 1!important;
}

/*BOTONES*/
.btn-ondas, .btn2-ondas {
    position: relative;
    overflow: visible;
}
.btn-ondas .elementor-button-icon, .btn2-ondas .elementor-button-icon {
    position: relative;
    z-index: 2;
    fill: #00c287;
}
/*Ondas*/
.btn-ondas .elementor-button-icon::before,
.btn-ondas .elementor-button-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #00c287;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}
/* hover en ondas */
.btn-ondas:hover .elementor-button-icon::before,
.btn-ondas:hover .elementor-button-icon::after {
    background: #fff !important;
}
/*BOTON TRANSPARENTE*/
.btn2-ondas .elementor-button-icon::before,
.btn2-ondas .elementor-button-icon::after{
    background:#fff;
	content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
}
/*hover en ondas*/
.btn2-ondas:hover .elementor-button-icon::before,
.btn2-ondas:hover .elementor-button-icon::after {
    background:#00c287!important;
}
.btn2-ondas .elementor-button-icon {
    fill:#fff!important;
}
/* ACTIVAR animación */
.btn-ondas .elementor-button-icon::before,
.btn2-ondas .elementor-button-icon::before {
    animation: ondas 2s infinite;
    will-change: transform, opacity;
}

/* Animación optimizada */
@keyframes ondas {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
}


/*==========================================*/
@media only screen and ( max-width: 1300px ) {
	/*Contador home*/
	.elementor-counter-number-suffix{font-size:20px;}
	.elementor-counter-number-prefix{font-size:30px;}
}

@media only screen and ( max-width: 1425px ) {
	#listaDatacenters{padding-left: 20px; padding-right: 20px;}
}

@media only screen and ( max-width: 950px ){
	#formContacto .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{width: 20%;}
}

@media (max-width: 767px) {
    .img-ondas::after {
        filter: brightness(0) saturate(100%) invert(40%) sepia(70%) saturate(2500%) hue-rotate(235deg);
    }
	.elementor-button-content-wrapper{
		gap:15px!important;
	}
	#formContacto .elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{width: 50%; padding-right: 30px;}
}