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


/* degradado menú */
.l-header {
  position: relative;
  z-index: 10;
}

.l-header:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -120px;       /* más largo */
  width: 100%;
  height: 120px;        /* más difuminado */
  pointer-events: none;

  background: linear-gradient(
    to bottom,
    rgba(196,152,113,0.35) 0%,   /* suave arriba */
    rgba(196,152,113,0.15) 40%,
    rgba(244,238,232,0) 100%
  );
}


/* color rosa encabezados */

h1 span {
    color: #9E0357;
	font-weight: 400;
	font-style: italic;
}

h2 span {
    color: #9E0357;
	font-weight: 400;
	font-style: italic;
}

/* fotos del hero */
.hero-img img {
    max-height: 600px; /* ajusta según necesites */
    width: auto;
}



/* video expandido home */

/* Estado inicial: dentro del contenedor (tu "casi ancho completo") */
.video-expand,
.video-expand .vc_column-inner{
  transition: all .3s ease;
}

/* Cuando se active, se vuelve full width */
.video-expand.is-full{
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Quitar paddings para que no deje bordes */
.video-expand.is-full .vc_column_container{
	
}

.video-expand .vc_column-inner{
	padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.video-expand.is-full .vc_column_container,
.video-expand.is-full .vc_column-inner,
.video-expand.is-full .wpb_wrapper{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.video-expand iframe,
.video-expand video{
  width: 100% !important;
  display: block;
}

/* cuando se activa, saca también el contenedor interno de Impreza */
.video-expand.is-full .l-section-h,
.video-expand.is-full .vc_row,
.video-expand.is-full .wpb_row {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}


/* BOTONES DE SELECTOR HOME */

/* ===== PILL SELECTOR WPBAKERY ===== */

.pillselector .vc_tta-tabs-list{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 0 !important;
}

/* Botón base (inactivo) */
/* ===== PILL SELECTOR (Impreza / US Tabs) ===== */

.w-tabs.pillselector .w-tabs-list-h{
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
}

/* Inactivo */
.w-tabs.pillselector .w-tabs-item{
  background: #fff !important;
  border: 2px solid #9E0357 !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  color: #9E0357 !important;
  box-shadow: none !important;
  transition: all .25s ease !important;
}

/* Quita estilos raros internos */
.w-tabs.pillselector .w-tabs-item:before,
.w-tabs.pillselector .w-tabs-item:after{
  display: none !important;
}

/* Hover */
.w-tabs.pillselector .w-tabs-item:hover{
  background: #9E0357 !important;
  color: #fff !important;
}

/* Activo */
.w-tabs.pillselector .w-tabs-item.active{
  background: #9E0357 !important;
  color: #fff !important;
  border-color: #9E0357 !important;
}

/* Texto (por si hereda color) */
.w-tabs.pillselector .w-tabs-item .w-tabs-item-title{
  color: inherit !important;
  font-weight: 500 !important;
}

.w-tabs.pillselector .w-tabs-item.active{
  padding: 16px 36px !important;
}

/* BANNER DIFERENTES EVENTOS */

/* boton con efecto */
/* Wrapper del botón */
.w-btn-wrapper{
  position: relative;
  overflow: visible !important;
}

/* Botón: estado normal */
a.w-btn.btn-circle-hover{
  position: relative;
  padding-left: 56px !important;        /* normal: poco espacio */
  transition: padding-left .25s ease;
  overflow: visible !important;
}

/* Círculo: lo dibujamos en el propio botón (NO usa ::before del tema) */
a.w-btn.btn-circle-hover i,
a.w-btn.btn-circle-hover .fake-ignore{}

/* Usamos ::after para flecha y un background radial para el círculo? NO.
   Mejor: círculo en ::before del botón pero anulando el del tema. */
a.w-btn.btn-circle-hover::before{
  content: "" !important;
  position: absolute !important;
  left: -46px !important;               /* inicio: más a la izquierda */
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #9e0357 !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  transition: left .25s ease, opacity .25s ease !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border: 0 !important;
}

/* Flecha */
a.w-btn.btn-circle-hover::after{
  content: "→";
  position: absolute;
  left: -46px;                          /* inicio: más a la izquierda */
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%)  rotate(-20deg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  opacity: 0;
  transition: left .25s ease, opacity .25s ease;
  z-index: 6;
  pointer-events: none;
}

/* Hover: se desliza y aparece */
a.w-btn.btn-circle-hover:hover::before{
     top: 70px !important;
	left: -30px !important;               /* final: pegado al botón */
  opacity: 1 !important;
}

a.w-btn.btn-circle-hover:hover::after{
    top: 70px !important;
	left: -30px;
  opacity: 1;
}

/* Hover: el botón deja más hueco */
a.w-btn.btn-circle-hover:hover{
  padding-left: 74px !important;
}