/* @override 
	https://happyhome.cl/2026/wp-content/themes/ws-elementra/style.css
	http://happyhome.cl/2026/wp-content/themes/ws-elementra/style.css */


/*
Theme Name: ws-elementra
Theme URI: http://www.websmart.cl
Author: Felipe Miguel de Websmart
Author URI: http://www.websmart.cl
Description: 
Version: 1.0.0
Template: elementra
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 
*/

/* COLORES  */

.color1 { background-color: #1babff }
.color2 { background-color: #717175 }
.color3 { background-color: #009ada }
.color4 { background-color: #00162D }
.color5 { background-color: # }
.color6 { background-color: # }
.color7 { background-color: # }

/* GENERAL */

.icon-bg {
	background-size: 48px;
}

/* relleno iconos svg */
.svgicon .elementor-icon svg path,
.svgicon .elementor-icon svg rect,
.svgicon .elementor-icon svg polygon {
	fill: #1cb9d3!important;
}
.ws-floating-button svg path { stroke-width: 0; }


/* FLOAT BAR */

/* CONTENEDOR */
#floatbar {
  position: fixed;
  left: 24px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* ITEM */
#floatbar .contact-item {
  position: relative;
  width: 56px;
  height: 56px;
  cursor: pointer;
  animation: ws-pulse 2s infinite;
  border-radius: 100%;
}

/* LINK: importante overflow visible */
#floatbar .contact-item a {
  position: relative;
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 999px;
  overflow: visible; /* 👈 clave */
  outline: none;
}

/* FONDO EXPANSIBLE */
#floatbar .contact-item a::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 56px;
  height: 56px;
  background: #25d366;
  border-radius: 999px;
  transition: width .35s ease;
  z-index: 0;
}

/* TEXTO CTA: ahora sale desde la izquierda del círculo */
#floatbar .contact-item a::after {
  content: attr(data-label); /* 👈 viene desde PHP */
  position: absolute;
  left: 46px;            /* 👈 parte justo después del círculo */
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  opacity: 0;
  white-space: nowrap;
  padding-left: 14px;    /* 👈 separación real del icono */
  padding-right: 18px;   /* 👈 margen derecho del pill */
  height: 56px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1;
}

/* ICONO */
#floatbar .contact-item img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  z-index: 2;
  transition: transform .35s ease;
}

/* HOVER / FOCUS: expande el fondo, muestra texto, corre el icono */
#floatbar .contact-item:hover a::before,
#floatbar .contact-item:focus-within a::before {
  width: 220px; /* ajusta si quieres más/menos */
}

#floatbar .contact-item:hover a::after,
#floatbar .contact-item:focus-within a::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0); 
}

#floatbar .contact-item:hover img,
#floatbar .contact-item:focus-within img {
  transform: translate(-50%, -50%); /* un pelín a la izquierda */
}

/* PULSO */
@keyframes ws-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
  70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}


/* POPUP BAR */
#popup-bar .contact-item img {
	width: 52px; flex-direction: row;
	background-color: #810ca8;
	border-radius: 26px;
	padding: 10px;
}	
#popup-bar .contact-item a img {
	margin: 8px;
} 

/* HEADER */


/* MAIN MENU */


/* HOME */
.mini .sc_button {
	margin-top: 20px;
	padding: 8px 30px 10px;
	text-transform: uppercase;
	border-radius: 5px;
}

/* GALLERY GRID */
.pp_description,
.jig_pp_social_btn {
	display: none!important;
}

/* SINGLE */
#client-box .trx-addons-info-box .trx-addons-info-box-title {
	font-size: 24px;
}

#client-box .trx-addons-info-box-subtitle {
	font-size: 16px;
}

#client-box .trx-addons-info-box-description p {
	font-size: 14px;
	line-height: 135%;
	
}
#client-box .trx-addons-info-box-description p br {
	margin-bottom: 10px;
}


.subtitulo h3 { text-align:center; font-size: 28px; font-weight: 400; }

/* CONTACT LIST */
#contact-list, #contact-side { display: flex; flex-direction: column; align-content: end;}
#contact-list .contact-item,
#contact-side .contact-item { 
	background-color: transparent!important;	
	padding: 3px 0; font-size: 15px;
}

#contact-side .contact-item img {
	width: 40px; float: left; 
	position: relative; top: -5px; margin-right: 10px;
}
#social-bar  {  display: flex; flex-direction: row; }
#social-bar .contact-item img {
	width: 28px; margin-right: 6px;
}
#contact-side .contact-item .etiqueta {
	float: left; font-size: 1.3em; }	
	
#contact-list .contact-item .etiqueta img {
	width: 20px; float: left; position: relative; top: 3px; margin-right: 6px;
}
#contact-list .contact-item .etiqueta {
	float: left;  color: #fff; }
#contact-list .contact-item .etiqueta:hover {
	color: #1babff; }
.credits { color: #fff; font-size: 14px; font-weight: 300; }
.credits a { color: #1babff !important; }


/* SOCIAL BAR */
#contact-list.dark .etiqueta { color: #000!important; }
#contact-list.dark .etiqueta:hover { color: #33BC82!important; }
.credits.dark { color: #000; }
#social-bar, #popup-bar {
	display: flex; flex-direction: row;
	justify-content: center;
	margin-top: 10px;
}
#social-bar .contact-item { 
	padding: 2px;
	border-radius: 100%; margin-right: 1px;
	/*border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: transparent!important;*/	}
#social-bar .contact-item img { width: 36px; float: left;  }
#social-bar .contact-item img:hover { opacity: 1; }

/* CONTACT LIST */
#contact-list, #contact-side { display: flex; flex-direction: column;
	align-content: end;}
#contact-list .contact-item,
#contact-side .contact-item { 
	background-color: transparent!important;	
	padding: 3px 0;
	font-size: 15px;
}
#contact-side .contact-item img {
	width: 40px; float: left; 
	position: relative; top: -5px; margin-right: 10px;
}
#contact-side .contact-item .etiqueta {
	float: left; font-size: 1.3em; }	
	
#contact-list .contact-item img {
	width: 20px; float: left; position: relative; top: 3px;}
#contact-list .contact-item .etiqueta {
	float: left; padding: 0 0 0 8px; color: #fff; }
#contact-list .contact-item .etiqueta:hover {
	color: #717175!important; }
.credits { color: #fff; font-size: 14px; font-weight: 300; }
.credits a { color: #717175 !important; }


/* FOOTER */
.scroll_to_top_style_default,
.trx_addons_scroll_to_top { background-color: #868689!important; }

.contact-box { text-align: center; }
.contact-box a img { width: 50px; }
.contact-box a h3 { font-size: 1.2em; }


/* MEDIA QUERIES */

@media only screen and ( min-width: 961px ) and ( max-width: 1300px ) { }
@media only screen and ( max-width: 961px )  { }
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) { }
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) { }
@media only screen and ( max-width: 479px ) { }


/* FORMS */

/* Edge Placeholders */
::-webkit-input-placeholder { color: #000!important;}
/* Internet Explorer 10-11 Placeholders */
:-ms-input-placeholder { color: #000!important;}
::placeholder { color: #000!important; }

.gfield_label { font-weight: 600!important; }
.gform_required_legend { display: none; }

.ginput_container_text,
.ginput_container_email,
.ginput_container_phone,
.ginput_container_textarea {
	border: 0px solid #dadada;
}
.ginput_container_text input,
.ginput_container_email input,
.ginput_container_phone input,
.ginput_container_textarea textarea {
	background-color: #fff!important;
	border: 1px solid #efefef !important;
}
.gform-footer.gform_footer .gform_button
{ text-align: center; margin: 0 auto; width: 100%!important; }
.gform-theme--foundation .gform_fields {
  grid-row-gap: 20px !important; /* Separación entre campos */
}



.ginput_container_textarea textarea {
	padding-top: 14px!important;
}

.gform_button.button { background-color: #1babff!important; }
.gform_button.button:hover { background-color: #205d8f; }


/* FORMICONS */
.hide_label .gfield_label,
.hide_label .gform-field-label { display: none!important; }

.nombre input, .mail input, .email input,  .fono input, .nota textarea, .nota input, .asunto input, .empresa input, .pais input
 { background-repeat: no-repeat; background-position: 10px 7px; background-size: 25px; padding-left: 40px!important; }
.nombre input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/user.png");}
.mail input, .email input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/mail.png"); }
.fono input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/phone.png"); }
.empresa input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/flag.png"); }
.web input, .pais input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/earth-alt.png"); }
.asunto input  { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/exclamation-triangle.png"); }
.nota textarea, .nota input { background-image: url("https://happyhome.cl/2026/wp-content/themes/ws-elementra/formicons/chat.png"); }


/* Chrome/Opera/Safari */
.gform_fields .gfield input::-webkit-input-placeholder,
.gform_fields .gfield textarea::-webkit-input-placeholder  {	
  color: #8d8d8d !important; font-size: 15px;
}
.gform_fields .gfield input:focus::-webkit-input-placeholder {	
  display: none!important;
}
/* Firefox 19+ */
.gform_fields .gfield input::-moz-placeholder,
.gform_fields .gfield textarea::-moz-placeholder { 
  color: red; font-size: 15px;
}
/* IE 10+ */
.gform_fields .gfield input:-ms-input-placeholder,
.gform_fields .gfield textarea:-ms-input-placeholder {
  color: #555555; font-size: 15px;
}
/* Firefox 18- */
.gform_fields .gfield input:-moz-placeholder,
.gform_fields .gfield textarea:-moz-placeholder {	
  color: #555555; font-size: 15px;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent!important;
}

/* FORMS VALIDATIONS */
.validation_error { background-color: #fff; color: red!important; border: 1px solid #fff!important; }
.gfield_error { background-color: #fff!important; border-bottom: 1px solid red!important; border-top: 0px solid red!important; padding-top: 0!important;
}
.gfield_description.validation_message { color: #fff!important; }
.gform_confirmation_message { text-align: center; }
.gfield_required_text { color: #fff!important; }