/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
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
*/

/* Add your custom styles here */



/* ANIMACIÓN DE FORMULARIOS FLOAT LABELS */
/* =========================================
   Floating Label (Elementor Form)
   Clase widget: float
   Estructura: label + input dentro de .elementor-field-group
   ========================================= */

.float .elementor-field-group{
  position: relative;
}

/* Deja espacio arriba para el label cuando "sube" */
.float .elementor-field-textual{
  padding-top: 18px !important;
}

/* LABEL como placeholder (sobre el input) */
.float .elementor-field-group > .elementor-field-label{
  position: absolute;
  left: 20px;                 /* ajusta si tu input tiene padding diferente */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  margin: 0 !important;
  opacity: .75;
  line-height: 1;
  transition: top .18s ease, transform .18s ease, opacity .18s ease, font-size .18s ease;
  z-index: 2;
}

/* Placeholder visible por defecto */
.float .elementor-field-textual::placeholder{
  opacity: 1;
  transition: opacity .15s ease;
}

/* Al enfocar o cuando hay texto: label sube */
.float .elementor-field-group.is-focus > .elementor-field-label,
.float .elementor-field-group.is-filled > .elementor-field-label{
  top: 3px;
  transform: translateY(0);
  opacity: 1;
  font-size: 14px !important;
}

/* Al enfocar o con texto: ocultar placeholder para que no choque */
.float .elementor-field-group.is-focus .elementor-field-textual::placeholder,
.float .elementor-field-group.is-filled .elementor-field-textual::placeholder{
  opacity: 0;
}



/* SUBIR LABEL DE MENSAJE */
/* SUBIR LABEL DE MENSAJE */
/* =========================================
   FIX: Campo MENSAJE (textarea) - evitar que el texto se monte en el label
   Solo afecta .elementor-field-group-mensaje y .elementor-field-group-mensaje_contacto
========================================= */

/* Label en reposo arriba */
.float .elementor-field-group-mensaje > .elementor-field-label,
.float .elementor-field-group-mensaje_contacto > .elementor-field-label{
  top: 14px !important;                 
  transform: translateY(0) !important;  
}

/* Dar MÁS espacio arriba dentro del textarea */
.float .elementor-field-group-mensaje textarea.elementor-field-textual,
.float .elementor-field-group-mensaje_contacto textarea.elementor-field-textual{
  padding-top: 27px !important;
  padding-bottom: 12px !important;
}

/* Responsive */
@media (max-width: 767px){
  .float .elementor-field-group-mensaje > .elementor-field-label,
  .float .elementor-field-group-mensaje_contacto > .elementor-field-label{
    top: 14px !important;
    transform: translateY(0) !important;
  }

  .float .elementor-field-group-mensaje textarea.elementor-field-textual,
  .float .elementor-field-group-mensaje_contacto textarea.elementor-field-textual{
    padding-top: 27px !important;
    padding-bottom: 12px !important;
  }
}



/* RESPONSIVE DE LOS LABELS FLOTANTES EN FORMULARIO DE FOOTER SUSCRIBETE */
/* =========================================
   Floating Label (RESPONSIVE fine-tune)
   Solo móvil/tablet
   ========================================= */
@media (max-width: 767px){

  /* 1) Más espacio arriba para que el cursor/texto no quede pegado al label */
  .float .elementor-field-textual{
    padding-top: 24px !important;  /* 👈 sube/baja: 22–28 */
    padding-bottom: 10px !important; /* opcional: más “aire” */
  }

  /* 2) Transición más suave (menos brusca) */
  .float .elementor-field-group > .elementor-field-label{
    transition:
      top .28s cubic-bezier(.2,.8,.2,1),
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .22s ease,
      font-size .28s cubic-bezier(.2,.8,.2,1);
  }

  /* 3) Cuando sube: que suba un poco más (más separación visual) */
  .float .elementor-field-group.is-focus > .elementor-field-label,
  .float .elementor-field-group.is-filled > .elementor-field-label{
    top: 3px;          /* 👈 más arriba (antes 7px). Prueba 2–5 */
    font-size: 14px;   /* 👈 el tamaño que ya te gustó (ajustable) */
  }

  /* 4) (Opcional) En reposo, bajar un poquito el label para que se sienta centrado */
  .float .elementor-field-group > .elementor-field-label{
    top: 54%;          /* 👈 50% era perfecto en desktop; en móvil a veces se ve mejor 52–56 */
  }
}


/* =========================================
   FLOATING LABEL - AJUSTES SOLO CAMPO TELÉFONO
   Widget: .float
   Group wrapper: .elementor-field-group-telefono
   Input: #form-field-telefono
========================================= */

/* 1) Ocultar placeholder SOLO del input teléfono */
.float .elementor-field-group-telefono input#form-field-telefono::placeholder,
.float .elementor-field-group-phone input#form-field-phone::placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::placeholder{
  opacity: 0 !important;
}
.float .elementor-field-group-telefono input#form-field-telefono::-webkit-input-placeholder,
.float .elementor-field-group-phone input#form-field-phone::-webkit-input-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::-webkit-input-placeholder{ opacity: 0 !important; }

.float .elementor-field-group-telefono input#form-field-telefono::-moz-placeholder,
.float .elementor-field-group-phone input#form-field-phone::-moz-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::-moz-placeholder{ opacity: 0 !important; }

.float .elementor-field-group-telefono input#form-field-telefono:-ms-input-placeholder,
.float .elementor-field-group-phone input#form-field-phone:-ms-input-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura:-ms-input-placeholder{ opacity: 0 !important; }

/* 2) Mover el LABEL a la derecha para que no se monte con la bandera */
.float .elementor-field-group-telefono > .elementor-field-label,
.float .elementor-field-group-phone > .elementor-field-label,
.float .elementor-field-group-telefono_factura > .elementor-field-label{
  left: 55px !important; /* ajusta 58–78 */
}

/* 3) Mantener ese left cuando sube (focus/filled) */
.float .elementor-field-group-telefono.is-focus > .elementor-field-label,
.float .elementor-field-group-telefono.is-filled > .elementor-field-label,
.float .elementor-field-group-phone.is-focus > .elementor-field-label,
.float .elementor-field-group-phone.is-filled > .elementor-field-label,
.float .elementor-field-group-telefono_factura.is-focus > .elementor-field-label,
.float .elementor-field-group-telefono_factura.is-filled > .elementor-field-label{
  left: 55px !important;
}

/* 4) Dar espacio al texto del input para no quedar debajo de la bandera */
.float .elementor-field-group-telefono input#form-field-telefono,
.float .elementor-field-group-phone input#form-field-phone,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura{
  padding-left: 51px !important; /* ajusta 70–92 */
}

/* 5) Responsive */
@media (max-width: 767px){
  .float .elementor-field-group-telefono > .elementor-field-label,
  .float .elementor-field-group-telefono.is-focus > .elementor-field-label,
  .float .elementor-field-group-telefono.is-filled > .elementor-field-label,
  .float .elementor-field-group-phone > .elementor-field-label,
  .float .elementor-field-group-phone.is-focus > .elementor-field-label,
  .float .elementor-field-group-phone.is-filled > .elementor-field-label,
  .float .elementor-field-group-telefono_factura > .elementor-field-label,
  .float .elementor-field-group-telefono_factura.is-focus > .elementor-field-label,
  .float .elementor-field-group-telefono_factura.is-filled > .elementor-field-label{
    left: 55px !important;
  }

  .float .elementor-field-group-telefono input#form-field-telefono,
  .float .elementor-field-group-phone input#form-field-telefono_contacto,
  .float .elementor-field-group-telefono_factura input#form-field-telefono_factura{
    padding-left: 51px !important;
  }
}


/* Subir el dropdown por encima de labels/campos */
.float .elementor-field-group-telefono .iti__dropdown-content,
.float .elementor-field-group-phone .iti__dropdown-content,
.float .elementor-field-group-telefono_factura .iti__dropdown-content{
  z-index: 4 !important;
}






/* =========================================
   EXCLUIR MES Y AÑO DE EXPIRACIÓN DEL FLOAT
========================================= */
.float .elementor-field-group-card_month > .elementor-field-label,
.float .elementor-field-group-card_year > .elementor-field-label{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  pointer-events: auto !important;
  z-index: auto !important;
}

/* quitar el espacio extra superior del efecto float solo en esos selects */
.float .elementor-field-group-card_month .elementor-field-textual,
.float .elementor-field-group-card_year .elementor-field-textual{
  padding-top: 10px !important;
}

/* por si alguna regla global sigue empujando raro */
.float .elementor-field-group-card_month,
.float .elementor-field-group-card_year{
  position: static !important;
}


/* Enlaces formularios */
.elementor-widget-form form label > a{
	color: #0757F3;
	&:hover{
		color: #585555;
	}
}


	.elementor-button-content-wrapper{
		    align-items: center;
	}
	
	.elementor-button-content-wrapper .elementor-button-icon svg{
		width: 2em;
	}
	
	.post-title-art h4{
		 display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
		height:100px;
	}
	
.menu-fixed.menu-scrolled {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
	
.home .menu-fixed.menu-scrolled {
  background: #000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	    padding: 8px 15px;
}
	.menu-fixed .e-con-inner{
		transition:0.3s;
	}
	.menu-fixed.menu-scrolled .e-con-inner{
		padding:0!important;
		
	}
	
	.single-srv{
		display:none;
	}
	
		.single-servicio .single-srv,  .page-id-32 .single-srv{
		display:block;
	}
	
	
	
.content-menupopup {
    display: none;
	min-width:250px;
	z-index:99;
}
	
.hamburger {
    width: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.hamburger span {
    display: block;
    height: 3px;
    background: #000;
    margin: 6px 0;
    transition: all 0.3s ease;
}
	
	.home .hamburger span{
		    background: #fff;
	}

/* Tamaños */
.hamburger span:nth-child(1) {
    width: 80%;
}

.hamburger span:nth-child(2) {
    width: 100%;
}

.hamburger span:nth-child(3) {
    width: 60%;
}

/* Estado activo (X) */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(15px, 5px);
    width: 100%;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(15px, -6px);
    width: 100%;
}
	
	
	.content-menupopup{
		position: absolute;
    top: 50px;
	}
	
	#hamburger:hover{
		transition: 0.3s;
    width: 45px;
	}
	
	@media screen and (min-width: 1024px) {
		.content-text-mt{
			display:none;
		}
		
		.active-mt .content-text-mt{
			display:block;
		}
		
		.active-mt .arrow-mt {
			transform:rotate(320deg);
		}
		
.metodologia-items .swiper-slide {
    width: 140px !important;
    min-width: 120px !important;
    transition: all 0.3s ease;
    opacity: 0.6;
}

/* activo */
.metodologia-items .swiper-slide.active-mt {
    width: 530px !important;
    min-width: 530px !important;
    opacity: 1;
    z-index: 2;
}
}
	
.float textarea.elementor-field-textual {
  resize: none;
	padding-top: 35px !important;
}
	
.elementor-field-type-textarea label{
	top: 20px!important;
}


@media screen and (max-width: 768px) {
		.hamburger {
			width: 30px!important;
	}	
	.arrow-mt{
		display:none;
	}
	
	.hamburger.active {
    margin-right: 5px;
}
}
	
	
/* Efecto rebote */
.rebote-suave {
    display: inline-block;
    animation: shake-infinite 3s cubic-bezier(.36,.07,.19,.97) infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake-infinite {
    0%, 15% {
        transform: translate3d(0, 0, 0);
    }
    1.5%, 13.5% {
        transform: translate3d(-1px, 0, 0);
    }
    3%, 12% {
        transform: translate3d(2px, 0, 0);
    }
    4.5%, 7.5%, 10.5% {
        transform: translate3d(-4px, 0, 0);
    }
    6%, 9% {
        transform: translate3d(4px, 0, 0);
    }
    15.1%, 100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Menú footer */
.menu-grow > nav > ul > li{
	transition: all .2s;
	&:hover{
		transform: scale(1.1);
	}
}

/* ---------- Animaciones ---------- */
/* Salto */
.anm-salto {
  animation: efectoSaltarin 3s ease-in-out infinite;
  will-change: transform;
  z-index: 1;
}

.anm-salto:hover {
  animation: none;
}

@keyframes efectoSaltarin {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-8px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
  40% {
    transform: translateY(0);
  }
}

.animacion-desfasada {
  animation-delay: 1.5s !important;
}

.cont-lservicio:hover .icono-servicio {
  animation: efectoSaltarin 3s ease-in-out infinite;
  will-change: transform;
  z-index: 1;
}

/* Entradas loop grid */
.loop-grid-animado .e-loop-item {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.loop-grid-animado .e-loop-item.animado-entra {
    opacity: 1;
    transform: translateY(0);
}

/* Menú móvil */
.menu-movil .elementor-nav-menu .sub-menu {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin: 10px 0 0 0 !important;
    padding-left: 20px !important;
    box-shadow: none !important;
    border: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
}