/*
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;
}

/*----------CABECERA------------*/
.l-subheader-h {
	max-width: 95vw !important;
}

@media screen and (min-width:1024px) {
	/* Punto separador SOLO entre enlaces reales (ignora .w-nav-close) */
	.menu-cabecera .w-nav-list.level_1 > li.w-nav-item + li.w-nav-item::before {
		content: ".";
		color: #c4714c;
		display: inline-block;
		margin: 0 12px;      /* espacio alrededor del punto */
		font-weight: bold;
		font-size: 18px;
		vertical-align: middle;
	}
}


.w-nav.type_desktop .w-nav-list.level_2 {
	bottom: -11rem;
}

/* (opcional) alineación de los items */
@media screen and (min-width: 900px){
	.menu-cabecera .menu-item {
		display: flex;
	}
}


/*-----------ENCABEZADOS-------------*/
span.naranja {
	color: #c4714c;
	font-family: BlackMango;
}

span.negro {
	font-family: BlackMango;
}

span.cliente-area {
	font-family: BlackMango;
}

span.black-mango {
	font-family: BlackMango;
}

span.poppins {
	font-family: Poppins;
}

span.blanco {
	color: white;
}

/*
@media screen and (min-width:768px){
	span.izquierda {
		transform: translateX(-10rem);
		display: flex;
	}
}*/

/* ==============================
BOTONES CON DESPLIEGUE POR WIDTH
============================== */

.boton-naranja,
.boton-negro {
	--color: #c4714c;         /* por defecto: naranja */
	--radius: 20px;           /* radio fijo */
	--dur: 0.5s;              /* duración animación */
	--start: 35px;            /* ancho inicial del relleno */

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 0.6em 0.6em;
	border-radius: var(--radius);
	font: 700 1rem/1 inherit;
	color: var(--color);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	white-space: nowrap;
	transition: color var(--dur) ease;
}

/* variante negra */
.boton-negro {
	--color: #1e1d1d;
}

/* ===== RELLENO ANIMADO ===== */
.boton-naranja::before,
.boton-negro::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--start);             /* ancho inicial = píldora */
	background: var(--color);
	border-radius: 1rem;
	z-index: 0;
	transition:
		width var(--dur) ease,
		border-top-right-radius var(--dur) ease,
		border-bottom-right-radius var(--dur) ease;
}

/* ===== CONTENIDO ===== */
.boton-naranja p,
.boton-negro p {
	position: relative;
	z-index: 1;
	margin: 0;
	display: flex;
	align-items: center;
	gap: .6em;
}

.boton-naranja .cruz,
.boton-negro .cruz {
	color: #fff;
	font-weight: 900;
	font-size: 1.1em;
	line-height: 1;
}

/* ===== HOVER ===== */
.boton-naranja:hover::before,
.boton-negro:hover::before {
	width: 100%;                         /* se expande hasta el final */
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.boton-naranja:hover,
.boton-negro:hover {
	color: #fff;
}

/* ===== Responsive opcional ===== */
@media (max-width: 768px) {
	.boton-naranja,
	.boton-negro {
		font-size: .95rem;
		padding: .65em 0.7em;
	}
	.boton-naranja,
	.boton-negro {
		--radius: 10px;
		--start: 23px;
	}
	.boton-naranja::before,
	.boton-negro::before {
		border-radius: 1rem;
	}
}

/* ===== Ajuste entre 1100px y 1600px ===== */
@media (min-width: 1100px) and (max-width: 1600px) {
	.boton-naranja,
	.boton-negro {
		--radius: 12px;
		--start: 24px;
	}
	.boton-naranja::before,
	.boton-negro::before {
		border-radius: 24px;
	}
}




/* ==============================FILA COLECCIONES – CONFIGURACIÓN BASE============================== */
.fila-colecciones {
	/* separación visible entre columnas */
	--gap: 1rem;
	--gaps: 3; /* con 4 columnas hay 3 huecos */
	--space: calc(var(--gap) * var(--gaps));

	/* anchos teniendo en cuenta el gap */
	--big: 50%;
	--small: calc((100% - var(--space) - var(--big)) / 3);

	display: flex;
	align-items: stretch;
	overflow: hidden;
	gap: var(--gap);
	box-sizing: border-box;
}

.fila-colecciones .wpb_wrapper {
	height: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

/* Columnas */
.fila-colecciones > .wpb_column {
	position: relative;
	flex: 0 0 var(--small);                 /* todas pequeñas por defecto */
	min-width: 0;
	display: flex;
	transition: flex-basis .45s ease, transform .45s ease;
	overflow: hidden;
	border-radius: 20px;
}

/* Columna activa (50%) */
.fila-colecciones > .wpb_column.is-active {
	flex-basis: var(--big);
}

/* ==============================
CAPAS INTERNAS
============================== */

.fila-colecciones > .wpb_column .vc_column-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all .45s ease;
}

.fila-colecciones > .wpb_column .vc_column-inner > .wpb_wrapper {
	position: relative;
	z-index: 1; /* contenido por encima del overlay */
}

/* ==============================
OVERLAY OSCURO (SIEMPRE VISIBLE)
============================== */

.fila-colecciones > .wpb_column::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55); /* siempre visible */
	opacity: 1;
	transition: background .4s ease, opacity .4s ease;
	z-index: 0;
	pointer-events: none;
}

/* (Opcional) más intenso en la activa */
.fila-colecciones > .wpb_column.is-active::after {
	background: rgba(0,0,0,.6);
}

/* ==============================
TÍTULO – ESCALA
============================== */

.fila-colecciones > .wpb_column .vc_custom_heading {
	transform: scale(.6);
	transform-origin: left center;
	transition: transform .45s ease, opacity .45s ease;
	opacity: .95;
	will-change: transform, opacity;
}

/* Título a tamaño completo en la activa */
.fila-colecciones > .wpb_column.is-active .vc_custom_heading {
	transform: scale(1);
	opacity: 1;
}

/* ==============================
BLOQUE .INFO – SOLO EN ACTIVA
============================== */

/* saca .info del flujo para que no altere altura */
.fila-colecciones .wpb_column .info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0rem;            /* ajusta según diseño */
	z-index: 2;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .45s ease, transform .45s ease;
}

/* visible cuando la columna es activa (no en hover) */
.fila-colecciones > .wpb_column.is-active .info {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ==============================
RESPONSIVE – DESACTIVAR EN MÓVIL
============================== */

@media (max-width: 1024px) {
  .fila-principal {
    align-items: flex-start; /* o center */
  }
}

@media (max-width: 1024px) {
	.fila-colecciones {
		display: block;
		gap: 0;
	}

	.fila-colecciones > .wpb_column {
		width: 90vw !important;
		flex: none;
		transition: none;
		margin: 1rem auto!important; /* separador vertical en móvil */
	}

	.fila-colecciones > .wpb_column .vc_custom_heading {
		transform: none;
		opacity: 1;
	}

	.fila-colecciones > .wpb_column::after {
		opacity: 1;
	}

	.fila-colecciones .wpb_column .info {
		position: static;
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

    /* Resetea altura de la sección */
    .fila-principal,
    .fila-principal .l-section-h {
        height: auto !important;
        min-height: unset !important;
        padding-top: 1rem;    /* Ajusta si quieres más/menos espacio */
        padding-bottom: 1rem; /* Ajusta si quieres más/menos espacio */
    }

    /* Contenido interno alineado arriba */
    .fila-principal .wpb_wrapper {
        justify-content: flex-start !important;
    }
}


/*------------FILA IMAGEN DE FONDO-------------*/
.fila-imagen .vc_column-inner,
.fila-imagen .vc_column_container,
.fila-imagen .l-section-h{
	position: unset !important;
}

/*---------FORMULARIO-------------*/
/* ---------- Variables rápidas ---------- */
/*---------FORMULARIO CF7 ADAPTADO-------------*/

/* ---------- Variables rápidas ---------- */
:root{
    --cf7-bg: #efece8;              
    --cf7-border: #6f5a4e;          
    --cf7-text: #2b2b2b;            
    --cf7-accent: #c26f4c;          
    --cf7-accent-hover: #aa5e3f;    
    --cf7-radius: 10px;             
    --cf7-gap: 22px;                
    --cf7-padding: 16px 18px;       
}

/* ---------- Contenedor principal ---------- */
.cf7-contacto {
    box-sizing: border-box;
    padding: 0 16px; /* espacio lateral */
    max-width: 100%;
    width: 100%;
    overflow: hidden; /* previene scroll horizontal */
}

/* ---------- Layout de filas ---------- */
.cf7-contacto .fila { 
    margin-bottom: var(--cf7-gap); 
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.cf7-contacto .fila-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: var(--cf7-gap);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- Campos ---------- */
.cf7-contacto input[type="text"],
.cf7-contacto input[type="email"],
.cf7-contacto input[type="tel"],
.cf7-contacto textarea{
    width: 100%;
    max-width: 100%;
    background: var(--cf7-bg);
    border: 1.5px solid rgba(111,90,78,0.7);
    color: var(--cf7-text);
    border-radius: var(--cf7-radius);
    padding: var(--cf7-padding);
    outline: none;
    font-size: 16px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.cf7-contacto input[type="text"],
.cf7-contacto input[type="email"],
.cf7-contacto input[type="tel"]{
    height: 54px;
}

.cf7-contacto textarea{
    min-height: 130px;
    resize: vertical;
}

/* Focus */
.cf7-contacto input:focus,
.cf7-contacto textarea:focus{
    border-color: var(--cf7-accent);
    box-shadow: 0 0 0 2px rgba(194,111,76,.12);
}

/* Placeholder */
.cf7-contacto ::placeholder{ 
    color: #6b6b6b; 
    opacity: .9; 
}

/* ---------- Aceptación ---------- */
.cf7-contacto .legal label {
    display: flex;
    font-size: 14px;
    line-height: 1.5;
    color: #4a4a4a;
    align-items: center;
}

.cf7-contacto .legal a{ 
    text-decoration: underline; 
}

@media screen and (max-width:768px) {
    .cf7-contacto .legal label {
        font-size: 10px;
    }
}

/* ---------- Botón enviar ---------- */
#form-contact{
    width: 100%;
    max-width: 100%;
    background: var(--cf7-accent);
    color: #fff;
    border: none;
    border-radius: var(--cf7-radius);
    padding: 18px 24px;
    font-weight: 600;
    text-transform: uppercase; 
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s ease, transform .02s ease-in;
    box-sizing: border-box;
}
#form-contact:hover{ background: var(--cf7-accent-hover); }
#form-contact:active{ transform: scale(0.998); }

/* ---------- Estados de validación CF7 ---------- */
.wpcf7 form.invalid .wpcf7-not-valid{ border-color: #d33; }
.wpcf7 form .wpcf7-not-valid-tip{ font-size: 12px; color: #d33; margin-top: 6px; }

/* ---------- Responsive ---------- */
/* 2 columnas en tablets */
@media (max-width: 1024px){
    .cf7-contacto .fila-4{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 1 columna en móviles */
@media (max-width: 805px) {
    .cf7-contacto .fila-4 {
        grid-template-columns: 1fr !important; /* fuerza una columna */
        gap: 12px; /* reduce gap en móviles */
    }

    .cf7-contacto .fila,
    #form-contact,
    .cf7-contacto input,
    .cf7-contacto textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Ajustes adicionales para secciones y overlays */
@media screen and (max-width:768px) {
    .l-section.full_height {
        min-height: unset;
    }
}

@media screen and (min-width:1025px) {
    .hero-fila .vc_column-overlay {
        display: none;
    }
}


/*-----------ACORDEÓN-------------*/
.no-touch .w-tabs-section-header:hover, .no-touch .w-tabs-section-header:focus {
	background: transparent;
}

button.w-tabs-section-header {
	border: 1px solid #c4714c;
	border-radius: 1rem;
}
.w-tabs.accordion>div>.w-tabs-section {
	border-width: 0 !important;
}

button.w-tabs-section-header {
    margin-bottom: 0.5rem;
}


/*----------PÁGINA PORTFOLIO------------*/
.acf-circulos-colores {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.acf-circulo-color {
	display: inline-block;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 0 2px rgba(0,0,0,0.2);
}



/*----------------PÁGINA DE CONTACTO------------------*/
/*---------FORMULARIO-------------*/
/* ---------- Variables rápidas ---------- */
:root{
	--cf7-bg: #efece8;              /* fondo de inputs/textarea */
	--cf7-border: #6f5a4e;          /* color del borde */
	--cf7-text: #2b2b2b;            /* texto */
	--cf7-accent: #c26f4c;          /* color del botón */
	--cf7-accent-hover: #aa5e3f;    /* hover del botón */
	--cf7-radius: 10px;             /* radios */
	--cf7-gap: 22px;                /* separación entre campos */
	--cf7-padding: 16px 18px;       /* padding de campos */
}

/* ---------- Layout general ---------- */
.cf7-contacto .fila{
	margin-bottom: var(--cf7-gap);
}

/* Layout antiguo por si sigues usando fila-4 en otros formularios */
.cf7-contacto .fila-4{
	display: grid;
	grid-template-columns: repeat(4, minmax(180px, 1fr));
	gap: var(--cf7-gap);
}

/* ---------- Nuevo layout para este formulario (dos columnas) ---------- */
.cf7-contacto-dos .fila-2{
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: var(--cf7-gap);
}

.cf7-contacto-dos .fila-mensaje{
	/* Una columna completa para el textarea */
}

/* Centrado/botón */
.cf7-contacto-dos .enviar{
	/* si quieres, puedes alinear el botón a la derecha: */
	/* text-align: right; */
}

/* ---------- Campos (mismos estilos que el otro form) ---------- */
.cf7-contacto input[type="text"],
.cf7-contacto input[type="email"],
.cf7-contacto input[type="tel"],
.cf7-contacto textarea{
	width: 100%;
	background: var(--cf7-bg);
	border: 1.5px solid rgba(111,90,78,0.7);
	color: var(--cf7-text);
	border-radius: var(--cf7-radius);
	padding: var(--cf7-padding);
	outline: none;
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cf7-contacto input[type="text"],
.cf7-contacto input[type="email"],
.cf7-contacto input[type="tel"]{
	height: 54px;
}

.cf7-contacto textarea{
	min-height: 130px;
	resize: vertical;
}

/* Focus */
.cf7-contacto input:focus,
.cf7-contacto textarea:focus{
	border-color: var(--cf7-accent);
	box-shadow: 0 0 0 2px rgba(194,111,76,.12);
}

/* Placeholder */
.cf7-contacto ::placeholder{
	color: #6b6b6b;
	opacity: .9;
}

/* ---------- Aceptación ---------- */
.cf7-contacto .legal label {
	display: flex;
	font-size: 14px;
	line-height: 1.5;
	color: #4a4a4a;
	align-items: center;
}

.cf7-contacto .legal a{
	text-decoration: underline;
}

/* ---------- Botón enviar ---------- */
#form-contact{
	width: 100%;
	background: var(--cf7-accent);
	color: #fff;
	border: none;
	border-radius: var(--cf7-radius);
	padding: 18px 24px;
	font-weight: 600;
	text-transform: uppercase; /* hará que "Enviar" se vea como ENVIAR */
	letter-spacing: .5px;
	cursor: pointer;
	transition: background .2s ease, transform .02s ease-in;
}
#form-contact:hover{
	background: var(--cf7-accent-hover);
}
#form-contact:active{
	transform: scale(0.998);
}

/* ---------- Estados de validación CF7 ---------- */
.wpcf7 form.invalid .wpcf7-not-valid{
	border-color: #d33;
}
.wpcf7 form .wpcf7-not-valid-tip{
	font-size: 12px;
	color: #d33;
	margin-top: 6px;
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
	/* Campos legales más pequeños */
	.cf7-contacto .legal label {
		font-size: 10px;
	}

	/* Las filas de 2 columnas pasan a 1 columna */
	.cf7-contacto-dos .fila-2{
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 480px) {
	/* Por si quieres algo más de aire en móviles pequeños */
	.cf7-contacto-dos{
		padding: 0 10px;
	}
}

.zoom-img {
  overflow: hidden;
}
.zoom-img img {
  transition: transform 0.4s ease;
  cursor: zoom-in;
}
.zoom-img img:hover {
  transform: scale(1.4);
}

.area-column{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.titulo > div > h1 {
	font-size: 4rem !important;
}

.sobre-nosotros-row .l-section-h .i-cf{
	padding-top:0 !important;
}

@media (max-width: 1024px) {
	.g-cols.via_flex.type_boxes > .wpb_column.columna-imagen-sofa.stretched:last-of-type {
    margin-inline-end: 0 !important;
  }
}

@media (max-width: 600px) {
	 .columna-imagen-sofa .us_custom_a93577cc{
         margin-left: 1.5rem !important;
    }
}