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

/*Add your own styles here:*/

.cmplz-cookiebanner .cmplz-buttons {flex-direction: row-reverse;}
.grecaptcha-badge {visibility: hidden;}
html {overflow-x: hidden !important}

/* Formulario contacto home */
.form-row .column-full label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 2px;
  margin-top: 1rem;
}
.form-row .column-full input[type="text"],
.form-row .column-full input[type="email"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e6e9ef;
  background: transparent;
  padding: 7px 0 7px 0;
  font-size: 0.8rem;
  color: #111;
  box-shadow: none;
}
.form-row .column-full textarea {
  width: 100%;
  min-height: 160px;
  background-color: #f5f6f8;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 0.8rem;
  color: #111;
  resize: none;
}
.form-row .column-full ::placeholder {
  color: #9aa0a6;
  opacity: 1;
}
.form-row .column-full input:focus {
  outline: none;
  border-bottom-color: #d1d5db;
}
.form-row .column-full textarea:focus {outline: none;}
.wpcf7-form-control.wpcf7-submit {
  width: auto;
  display:block;
  margin-top:1rem;
  margin-left:auto;
  padding: 10px 28px;
  background: transparent;
  border: 1.5px solid #9D259D;  
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.wpcf7-form-control.wpcf7-submit:hover {
  background: #9D259D;
  color: white;
}

/* BOTÓN PARALELO */
.btn-slide-pro-1 {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #9D259D;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 233px;
  max-height: 52px;
}
.btn-slide-pro-2 {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #FFFF;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  font-size: 0.8rem;
  font-weight: 600;
  max-width: 233px;
  max-height: 52px;
}
.btn-ghost1, .btn-ghost2 {
  display: block;
  padding: 1.3rem 3rem;
  opacity: 0;
  pointer-events: none;
}
.btn-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  text-align: center;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.btn-text--out-2 {
  color: #FFFF;
  transform: translateY(-50%);
}
.btn-text--out-1 {
  color: #9D259D;
  transform: translateY(-50%);
}
.btn-text--in-1, .btn-text--in-2 {
  color: #ffffff;
  transform: translateY(-300%);
}
.btn-slide-pro-1:hover, .btn-slide-pro-2:hover{background-color: #9D259D;}
.btn-slide-pro-2:hover{border:0px;}
.btn-slide-pro-1:hover .btn-text--out-1, .btn-slide-pro-2:hover .btn-text--out-2 {transform: translateY(150%);}

.btn-slide-pro-1:hover .btn-text--in-1, .btn-slide-pro-2:hover .btn-text--in-2 {transform: translateY(-50%);}

/* Headers-cursiva */
.cursiva-heading {font-family: 'Playfair Display', serif;}
.cursiva-heading-morado {
    color: #9D259D;
    font-family: 'Playfair Display', serif;
}

/* Proyectos sección */
.grid-100 .w-grid,
.grid-100 .w-grid-list,
.grid-100 .w-post-elm.post_image {height: 100%;}
.grid-100 .w-post-elm.post_image img {height: 100%;}
.fila-espaciado-proyects{
    display: flex !important;
    justify-content: center !important;
    gap: 30px; 
}
#col-1, #col-2, #col-3, #col-4, #col-5 {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: none !important;
}
#col-1 { flex-basis: 704px !important; max-width: 704px !important; }
#col-2 { flex-basis: 379px !important; max-width: 379px !important; }
#col-3 { flex-basis: 629px !important; max-width: 629px !important; }
#col-4 { flex-basis: 629px !important; max-width: 629px !important; }
#col-5 { flex-basis: 1109px !important; max-width: 1109px !important; }
@media (max-width: 768px) {.fila-espaciado-proyects {gap: 0;}}

/* Contenedor de encabezado */
.menu-con-barra li {display: inline-block;}
.menu-con-barra li a .w-nav-title {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}
.menu-con-barra li a .w-nav-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}
.menu-con-barra li.current-menu-item > a .w-nav-title::after,
.menu-con-barra li.current_page_item > a .w-nav-title::after {width: 100%;}
.menu-con-barra li a:hover .w-nav-title::after {width: 100%;}
.w-nav-close {display: none !important;}
.l-subheader.at_top {background-color: #ffffff !important;}
.twentytwenty-container {height: 900px !important;}
.twentytwenty-container img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}

/* Proyectos envoltura rosa */
.columna-hover-base {
    position: relative !important;
    overflow: hidden !important;
    cursor: default !important;
}
.envoltura-capa-hover {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 5;
    opacity: 0 !important;
    transition: opacity 0.4s ease-in-out !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 40px !important; 
}

.columna-hover-base:hover .envoltura-capa-hover {
    opacity: 1 !important;
}
.envoltura-capa-hover .w-text {
    text-transform: uppercase !important;
    color: #ffffff !important;
    font-weight: bold !important;
}
.envoltura-capa-hover::before {
    content: "";
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(157, 37, 157, 0.80) !important; 
    z-index: 1;
    pointer-events: none;
}

.envoltura-capa-hover > div,
.envoltura-capa-hover .w-text {
    position: relative !important;
    z-index: 2 !important;
}

/* Página Servicios cuadrícula */
.servicios-envoltura-cuadrado {
    transition: all 0.4s ease !important;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4) !important;
	width: 515px;
	height: 515px;
}
.servicios-envoltura-cuadrado:hover {
	transform: translateY(-8px);
	box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2), 0 20px 40px rgba(0,0,0,0.4) !important;
}
@media (max-width: 1634px) {.servicios-envoltura-cuadrado {width: 400px !important;height: 400px !important;}}
@media (max-width: 1278px) {.servicios-envoltura-cuadrado {width: 318px !important;height: 318px !important;}}
@media (max-width: 1030px) {.servicios-envoltura-cuadrado {width: 400px !important;height: 400px !important;}}
@media (max-width: 448px) {.servicios-envoltura-cuadrado {width: 327px !important;height: 327px !important;}}
@media (max-width: 366px) {.servicios-envoltura-cuadrado {width: 228px !important;height: 228px !important;}}

/* Tarjetas servicios en home */
.tarjeta-reveal {
    overflow: hidden; 
    transition: padding-bottom 0.4s ease;
}
.tarjeta-reveal .wpb_wrapper {
    display: grid;
    grid-template-columns: 1fr;
}
.tarjeta-imagen {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 1;
}
.tarjeta-contenido-oculto {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 5;
    padding: 30px;
    position: relative !important;
    bottom: auto !important;
    width: 100%;    
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
}
.tarjeta-imagen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(142, 36, 170, 0.2) 0%, rgba(142, 36, 170, 0.95) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}
.tarjeta-link-inferior {
    display: block;
    max-height: 50px;
    margin-bottom: 0px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: all 0.4s ease;
}
.tarjeta-reveal:hover {padding-bottom: 28.8px !important;}
.tarjeta-reveal:hover .tarjeta-imagen::before {opacity: 1;}
.tarjeta-reveal:hover .tarjeta-contenido-oculto {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.tarjeta-reveal:hover .tarjeta-link-inferior {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

/* Encabezado con border bottom */
.l-subheader {border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;}

/* Carrusel antes y después */
.owl-carousel .owl-dot {
    /*padding: 10px 15px !important;*/
    margin: 0 5px !important;
}
.owl-carousel .owl-dot span {
    width: 33px !important;
    height: 6px !important;
    transition: all 0.3s ease !important;
}
.owl-carousel .owl-dot.active span {
    width: 47px !important;
}
@media (max-width: 1024px) {    
	.twenty20, .twentytwenty-container {
		max-width: 600px !important;
		height: 700px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
    .twentytwenty-container img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}
@media (max-width: 600px) {    
	.twenty20, .twentytwenty-container {
		max-width: 500px !important;
		height: 550px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* Diseño de entradas blogs */
.tarjetas-blog, .fecha-publicacion-entrada {transition: background-color 0.3s ease !important;}
.envoltura-tarjetas-blog:hover .tarjetas-blog,
.envoltura-tarjetas-blog:hover .fecha-publicacion-entrada {background-color: #9D259D !important;}
.envolturas-tamanio-igual {flex-grow:1 !important}
.boton-blog-oculto:hover .btn-flecha-servicios i, 
.boton-blog-oculto:hover .btn-servicios-saber-mas {
	color: #FFFFFF !important;
	border-color: #FFFFFF !important;
}
.btn-servicios-saber-mas:before {border: 0px; !important}
.fecha-publicacion-entrada {
/* top-left | top-right | bottom-right | bottom-left */
  border-radius: 15px 0px 0px 0px !important;
}
.esquina-topRight {border-radius: 15px 15px 0px 0px !important;}
.tarjetas-blog {border-radius: 0px 0px 15px 15px !important;}