/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

.grecaptcha-badge {
    visibility: hidden !important;
}

/*Add your own styles here:*/

.cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row-reverse;
}

/*------------------ENCABEZADOS-------------------*/
h2 span{
	color: #94886e;
}

h1 span{
	color: #94886e;
}

/*--------------------LÍNEAS LATERALES BLOQUE PRINCIPAL--------------------*/

/* Pseudo-elementos para las líneas punteadas */
.bloque-principal::before,
.bloque-principal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dotted #cccccc;
  z-index: 1;
}

/* Línea izquierda */
.bloque-principal::before {
  left: 2rem; /* Separación desde el borde izquierdo de la pantalla */
}

/* Línea derecha */
.bloque-principal::after {
  right: 2rem; /* Separación desde el borde derecho de la pantalla */
}

/* Móvil y tablet (hasta 768px) */
@media (max-width: 768px) {
  .bloque-principal::before {
    left: 1rem;
  }
  .bloque-principal::after {
    right: 1rem;
  }
}

/*---------------------MARQUESINA---------------------*/
/* Contenedor principal del marquee */
.marquee-left {
  position: relative;
  width: 125%;
  height: 80px;
  overflow-x: hidden;
  padding: 1rem;
}

/* Pista de animación */
.track-left {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-left 22s linear infinite;
}

/* Animación hacia la izquierda */
@keyframes marquee-left {
  0% {
    transform: translateX(0%);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}

/* Estilo de los elementos deslizables */
.imgSlide-left {
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
  width: 85px;
  margin-top: 12px;
}

.imgSlide-left img {
  width: 100%;
  height: 50% !important;
  object-fit: contain !important;
}

.imgSlide-left .w-image-h-left {
  border-radius: 0px;
  height: auto;
}

.marquee-left-2 {
  position: relative;
  width: 125%;
  height: 290px;
  overflow-x: hidden;
  padding: 1rem;
}

@media (max-width: 600px) {
	.marquee-left-2 {
	   width: 140%;
	   height: 200px;
	}
}


@media (max-width: 768px) {
	.marquee-left-2 {
	   width: 140%;
	   height: 285px;
	}
}

/*---------------BOTÓNES---------------*/
.w-btn.icon_atright span[class*="fa-"] {
    margin-left: 1.5em;
    font-size: 30px;
}

/*BOTON TRANSPARENTE-MARRON*/
.us-btn-style_2 {
  position: relative;   /* Para manejar bien los pseudo-elementos */
  overflow: hidden;     /* Esconde los pseudo-elementos salientes */
  transition: color 0.4s ease;  /* Suaviza el cambio de color del texto */
  z-index: 1;           /* Asegura que el texto quede sobre las cortinas */
  border: 2px solid #2A3133;
  font-weight: 500;
}

.us-btn-style_2::before,
.us-btn-style_2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;  
  background-color: #94886e;
  transition: transform 0.4s ease;
  z-index: -1;  /* Para que la “cortina” vaya por detrás del texto */
}

/* Cortina izquierda */
.us-btn-style_2::before {
  left: 0;
  transform: translateX(-100%); 
  /* Se esconde completamente fuera del botón (a la izquierda) */
}

/* Cortina derecha */
.us-btn-style_2::after {
  right: 0;
  transform: translateX(100%);
  /* Se esconde completamente fuera del botón (a la derecha) */
}

/* Efecto hover */
.us-btn-style_2:hover {
  color: #fff !important;
  border-color: #94886e!important /* El texto se pone blanco */
}

.us-btn-style_2:hover::before {
  transform: translateX(0); 
  /* La cortina izquierda se mueve a su posición original */
}

.us-btn-style_2:hover::after {
  transform: translateX(0); 
  /* La cortina derecha se mueve a su posición original */
}

/*---------------ACORDEÓN---------------*/
/* Estado inicial (sin hover) */
.w-tabs-sections.icon_plus > div > .w-tabs-section-header .w-tabs-section-control::before,
.w-tabs-sections.icon_plus > div > .w-tabs-section-header .w-tabs-section-control::after {
  background: #94886e;         /* Color inicial */
  transition: background 1s ease; /* Transición suave */
}

/* Al hacer hover */
.w-tabs-sections.icon_plus > div > .w-tabs-section-header:hover .w-tabs-section-control::before,
.w-tabs-sections.icon_plus > div > .w-tabs-section-header:hover .w-tabs-section-control::after {
  background: #fff;            /* Color al hover (blanco en este ejemplo) */
}


.accordion .w-tabs-section-header{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.no-touch .w-tabs-section-header:hover, .no-touch .w-tabs-section-header:focus{
	background: transparent !important;
}

.accordion .w-tabs-section-header {
  position: relative;       /* Para que el pseudo-elemento se posicione dentro */
  overflow: hidden;         /* Oculta la cortina cuando esté fuera del ancho */
  transition: color 0.4s ease; /* Transición de color del texto */
}

/* Pseudo-elemento para la cortina gris */
.accordion .w-tabs-section-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;                     /* Inicia sin ancho (oculta) */
  background-color: #94886e;
  transition: width 0.6s ease;  /* Transición del ancho */
  z-index: 0;                   /* Detrás del texto */
}

/* Efecto en hover */
.accordion .w-tabs-section-header:hover {
  color: #fff;             /* El texto se pondrá blanco */
}


.accordion .w-tabs-section-header:hover::before {
  width: 100%;             /* La cortina se extiende de izq. a der. */
}

.accordion .w-tabs-section-title,
.accordion .w-tabs-section-control {
	z-index: 1;
}

.w-tabs-section.active:not(.has_text_color) > .w-tabs-section-header:hover {
  color: #fff;
}

.accordion .w-tabs-section-title{
	font-size: 50px;
}

.w-tabs-section-control {
    font-size: 40px;
}

@media (max-width: 768px) {
	.accordion .w-tabs-section-title{
		font-size: 16px!important;
	}
	.w-tabs-section-control {
		font-size: 16px!important;
	}
}

/*----------------ENVOLTURA NEWS-----------------*/
.envoltura-news {
  position: relative; /* Necesario para ubicar flecha de forma absoluta si así lo deseas */
  overflow: hidden;   /* Opcional, para que no se vea parte de la flecha cuando esté fuera */
  transition: background-color 0.3s ease;
}

/* Al hacer hover, cambia el fondo. Si quieres mantener #fff, puedes quitar esto. */
.envoltura-news:hover {
  background-color: #94886e;
}

/* Texto principal (entra con opacidad 1 y sin desplazamiento) */
.texto-news {
  display: inline-block;
  transition: transform 0.4s ease, opacity 0.4s ease;
  /* Ajusta según tu diseño */
}

/* Flecha oculta al inicio (desplazada por la izquierda y con opacidad 0) */
.flecha-ver-news {
  display: inline-block;
  opacity: 0; 
  transform: translateX(-100%);
  transition: transform 1s ease, opacity 1s ease;
  /* Ajusta estilos para la flecha */
}

/* Efecto al hacer hover*/
.envoltura-news:hover .texto-news {
  transform: translateX(100%);
  opacity: 0;
}

.envoltura-news:hover .flecha-ver-news {
  transform: translateX(0);
  opacity: 1;
}

.texto-news .fa-arrow-right:before {
  color: #94886e;
  margin-left: .6em;
}

.w-text.icon_atleft span[class*="fa-"] {
  margin: 0;
}

/*-------------CONTACTO FOOTER----------------*/

/************* CONTENEDOR PRINCIPAL *************/
.contact-footer {
  padding: 20px;
  max-width: 800px; /* ancho máximo para el formulario */
  color: #ffffff;   /* texto blanco */
  font-family: sans-serif; /* tipografía de ejemplo */
}

/************* FILAS Y COLUMNAS *************/
.contact-footer .row {
  display: flex;
  flex-wrap: wrap;     /* para que se adapten en pantallas pequeñas */
  gap: 20px;           /* separación entre columnas */
  margin-bottom: 20px; /* separación inferior */
}

.contact-footer .col {
  flex: 1;            /* cada columna ocupa la mitad del espacio disponible */
  min-width: 0;       /* ayuda a prevenir problemas de flex en columnas */
}

/* En pantallas pequeñas, se muestran las columnas una debajo de otra */
@media (max-width: 768px) {
  .contact-footer .row {
    display: block; /* Las filas se vuelven bloques */
  }
  .contact-footer .col {
    width: 100%;    /* Ocupan todo el ancho */
    margin-bottom: 20px; /* Espacio extra entre columnas */
  }
  .contact-footer .privacy-row label {
    font-size: 10px !important;
  }
  button[type=submit]:not(.w-btn), input[type=submit]:not(.w-btn), .us-nav-style_1>*, .navstyle_1>.owl-nav button, .us-btn-style_1 {
	font-size: 10px !important;
  }
  .contact-footer .submit-row {
    text-align: left !important;
  }
}

/************* CAMPOS DE TEXTO *************/
.contact-footer input[type="text"],
.contact-footer input[type="email"],
.contact-footer input[type="url"],
.contact-footer input[type="tel"],
.contact-footer input[type="number"],
.contact-footer textarea {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #666666; /* línea inferior gris */
  padding: 8px 0;
  color: #ffffff;
  font-size: 14px;
  transition: border-color 0.3s ease;
  outline: none; /* quita el borde por defecto en algunos navegadores */
}

.contact-footer input::placeholder,
.contact-footer textarea::placeholder {
  color: #f0f0f1; /* placeholder más claro */
}

/* Efecto hover/enfoque */
.contact-footer input[type="text"]:focus,
.contact-footer input[type="email"]:focus,
.contact-footer textarea:focus {
  border-bottom-color: #ffffff; /* destaca la línea al enfocar */
}

/************* CHECKBOX DE PRIVACIDAD *************/
.contact-footer .privacy-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
}

.contact-footer .privacy-row label {
  cursor: pointer;      /* facilita que se entienda que puede pulsarse */
  font-size: 14px;
}

/* Ajusta el estilo del checkbox nativo si lo deseas */
.contact-footer .privacy-row input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(0.4);
  border: 1px solid white;
}

/************* BOTÓN DE ENVÍO *************/
.contact-footer .submit-row {
  text-align: right; /* alinea el botón a la derecha */
}

.us-submit-style_2 {
  position: relative;
  display: inline-block;   /* Para que se vea como botón */
  padding: 10px 20px;
  background: transparent !important;
  border: 2px solid white !important;
  border-radius: 0 !important;
  font-weight: 500!important; 
  color: white !important;
  font-size: 14px;
  overflow: hidden;        /* Para ocultar pseudo-elementos salientes */
  transition: color 0.4s ease;
  z-index: 1;             /* Para que el texto quede sobre las “cortinas” */
  text-decoration: none;  /* Por si se aplicaba algún estilo de enlace */
}

.us-submit-style_2::before,
.us-submit-style_2::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background-color: #94886e;
  transition: transform 0.4s ease;
  z-index: -1; /* Para que la “cortina” vaya por detrás del texto */
}

/* Cortina izquierda */
.us-submit-style_2::before {
  left: 0;
  transform: translateX(-100%); 
}

/* Cortina derecha */
.us-submit-style_2::after {
  right: 0;
  transform: translateX(100%);
}

/* Efecto hover */
.us-submit-style_2:hover {
  color: #fff;  /* El texto se pone blanco */
  border-color: #94886e !important;
}

.us-submit-style_2:hover::before {
  transform: translateX(0); /* Cortina izquierda entra */
}

.us-submit-style_2:hover::after {
  transform: translateX(0); /* Cortina derecha entra */
}

.fa-angle-right {
	font-family: "fontawesome";
}

.us-submit-style_2 .fa-angle-right {
	margin-left: 20px !important;
}

.fa-angle-right:before {
  content: "\f105"; /* Este es tu FontAwesome icon */
}

/* Espacio entre el texto y la flecha */
.us-submit-style_2 i.fa-angle-right {
  margin-left: 8px; 
}

/* Ocultar el spinner de wpcf7 si se usa */
.contact-footer .wpcf7-spinner {
  display: none;
}


/*------------FORMULARIO DE CONTACTO------------*/
.form-general {
  width: 100%;
  margin: 0 auto;
  font-family: inherit;
}

/* Filas del formulario */
.form-general .row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

/* Columnas dentro de cada fila */
.form-general .col {
  flex: 1 1 45%;
  margin-right: 5%;
  min-width: 200px;
}

/* Última columna que no reciba margen extra a la derecha (opcional) */
.form-general .col:last-child {
  margin-right: 0;
}

/* Estilos del campo de texto y label (opcional) */
.form-general label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.form-general input[type="text"],
.form-general input[type="email"],
.form-general input[type="tel"],
.form-general textarea {
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  font-size: 1rem;
  border-bottom: 1px solid black;
}

.form-general input[type="text"]::placeholder,
.form-general input[type="email"]::placeholder,
.form-general input[type="tel"]::placeholder,
.form-general textarea::placeholder {
  color: #000; /* Color negro para el placeholder */
}

.form-general input[type="text"]:-ms-input-placeholder,
.form-general input[type="email"]:-ms-input-placeholder,
.form-general input[type="tel"]:-ms-input-placeholder,
.form-general textarea:-ms-input-placeholder {
  color: #000; /* Soporte para IE10+ */
}

.form-general input[type="text"]::-ms-input-placeholder,
.form-general input[type="email"]::-ms-input-placeholder,
.form-general input[type="tel"]::-ms-input-placeholder,
.form-general textarea::-ms-input-placeholder {
  color: #000; /* Soporte para Edge */
}


/* Fila para aceptación y botón de envío */
.form-general .footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Columna izquierda para el checkbox */
.form-general .footer-row .col-left {
  flex: 0 1 auto;
}

/* Columna derecha para el botón */
.form-general .footer-row .col-right {
  flex: 0 1 auto;
  text-align: right;
}

span.wpcf7-form-control-wrap {
	width: 100%
}

.wpcf7-spinner {
	display: none;
}

.form-general .col-left {
    display: flex;
}

.form-general input[type="checkbox"] {
    border: 2px solid #d6d6d6;
	font-size: 15px;
}

.form-general .wpcf7-form-control-wrap[data-name="acceptance"] {
	width: fit-content !important;
	margin-top: 0 !important;
}

/*BOTÓN ENVÍO*/
.us-submit-style_1 {
  position: relative;
  display: inline-block;   /* Para que se vea como botón */
  padding: 10px 20px;
  background: transparent !important;
  border: 2px solid black !important;
  border-radius: 0 !important;
  font-weight: 500!important; 
  color: black !important;
  font-size: 14px;
  overflow: hidden;        /* Para ocultar pseudo-elementos salientes */
  transition: color 0.4s ease;
  z-index: 1;             /* Para que el texto quede sobre las “cortinas” */
  text-decoration: none;  /* Por si se aplicaba algún estilo de enlace */
}

/* Initial state: Text color is black */
.us-submit-style_1 #text {
    color: black;
    transition: color 0.3s ease; /* Optional: Smooth transition */
}

/* Hover state: Text color changes to white */
.us-submit-style_1:hover #text {
    color: white;
}

.form-general .no-touch button[type=submit]:not(.w-btn):hover, .no-touch input[type=submit]:not(.w-btn):hover, .us-nav-style_1>span.current, .no-touch .us-nav-style_1>a:hover, .no-touch .navstyle_1>.owl-nav button:hover, .no-touch .us-btn-style_1:hover {
	color: black !important;
}

.us-submit-style_1::before,
.us-submit-style_1::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background-color: #94886e;
  transition: transform 0.4s ease;
  z-index: -1; /* Para que la “cortina” vaya por detrás del texto */
}

/* Cortina izquierda */
.us-submit-style_1::before {
  left: 0;
  transform: translateX(-100%); 
}

/* Cortina derecha */
.us-submit-style_1::after {
  right: 0;
  transform: translateX(100%);
}

/* Efecto hover */
.us-submit-style_1:hover {
  color: #fff;  /* El texto se pone blanco */
  border-color: #94886e !important;
}

.us-submit-style_1:hover::before {
  transform: translateX(0); /* Cortina izquierda entra */
}

.us-submit-style_1:hover::after {
  transform: translateX(0); /* Cortina derecha entra */
}

.fa-angle-right {
	font-family: "fontawesome";
}

.us-submit-style_1 .fa-angle-right {
	margin-left: 20px !important;
}

.fa-angle-right:before {
  content: "\f105"; /* Este es tu FontAwesome icon */
}

/* Espacio entre el texto y la flecha */
.us-submit-style_1 i.fa-angle-right {
  margin-left: 8px; 
}

.bloques-contacto span.fal.fa-envelope{
	margin-right: 0.5rem;
}

.bloques-contacto span.fal.fa-phone{
	margin-right: 0.5rem;
}

.bloques-contacto span.fal.fa-network-wired{
	margin-right: 0.5rem;
}