/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Definición de la variable de color de marca */
:root {
  --color-marca: rgb(141, 103, 71);
  /* Puedes definir variantes para modos oscuro si es necesario, pero este es el color principal. */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-marca);
}
.text-justify {
  text-align: justify;
}

.texto-link {
  /* word-spacing: -0.4ch; */
  /* font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; */
  font-size: 1.4rem;
  text-transform: uppercase;
}

.contenedor-texto {
  padding: 10px !important;
  backdrop-filter: blur(10px);
  background: rgba(175, 175, 175, 0.5);
}

.container h2 {
  color: var(--color-marca);
}
.container h4 p {
  color: var(--color-marca) !important;
}

/* Caja de fondo decorativa (El cuadrado/rectángulo marrón) */
.cascading-image-bg > div {
  background-color: var(--color-marca) !important;
}

/*  Botón 'Sobre Nosotros' */
.button-border.button-primary {
  border-color: var(--color-marca);
  color: var(--color-marca) !important;
}

.button-border.button-primary:hover {
  background-color: var(--color-marca);
  border-color: var(--color-marca);
  color: #ffffff !important;
}

/* 2. Títulos (h3) y Subtítulos (.subtitle) de los Feature Boxes */
/* Apuntamos a la clase para mayor seguridad */
.feature-box h3,
.feature-box .subtitle {
  color: var(--color-marca) !important;
}
/* Usamos !important solo para garantizar que sobrescribe cualquier CSS de la plantilla */

.owl-carousel .owl-item img {
  width: auto !important;
  height: 300px !important;
  object-fit: cover !important;
  object-position: center !important;
}

.owl-carousel .caption {
  text-align: center;
}

.text-white .cnvs-hamburger-inner,
.text-white .cnvs-hamburger-inner::before,
.text-white .cnvs-hamburger-inner::after {
  background-color: #ffffff !important;
}

/* 1. Establecer el color para el texto que hereda (H1, SPAN, P, DIVs) */
.page-title-content {
  color: #ffffff;
}

/* 2. Forzar el color a los elementos que NO heredan: BOTONES y ENLACES */
.page-title-content .button,
.page-title-content .button i,
.page-title-content a {
  /* Usamos !important solo si la especificidad de las clases .button 
       es demasiado alta para ser sobrescrita, lo cual es común en plantillas. */
  color: #ffffff !important;
}

/* 3. Corregir el Breadcrumb (ya que está fuera del .page-title-content) */
.breadcrumb-item a,
.breadcrumb-item.active {
  color: #ffffff !important;
}

/* 
.primary-menu .menu-container li a {
  color: #000000 !important;
} 
  */

.sub-menu-container li a {
  color: #ffffff !important;
}

.sub-menu-container li a {
  background-color: #ffffff !important;
}

.texto-contorno {
  color: #333333;
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.texto-contorno2 {
  color: #000000;
  text-shadow: -0.5px -0.5px 0 #ffffff, /* Borde superior izquierdo blanco */ 0.5px -0.5px 0 #ffffff,
    /* Borde superior derecho blanco */ -0.5px 0.5px 0 #ffffff, /* Borde inferior izquierdo blanco */ 0.5px 0.5px 0 #ffffff; /* Borde inferior derecho blanco */
}
.texto-contorno3 {
  color: #ffffff;
  text-shadow: -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000;
}
.texto-contorno4 {
  color: #ffffff;
  text-shadow: -2px -2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, 2px 2px 0 #000000;
}

/* bootstrap slider */
/* Hace que el carrusel de Bootstrap ocupe el 100% del alto y ancho del slider */
#mainCarousel,
.carousel-inner,
.carousel-item,
.carousel-bg {
  width: 100%;
  height: 100%;
  position: absolute; /* Importante para que ocupe todo el espacio de la sección padre */
  top: 0;
  left: 0;
}

/* Estilo para que la imagen de fondo cubra el área sin repetirse */
.carousel-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Asegura que el contenido (caption) se muestre correctamente */
.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10; /* Asegura que esté por encima de la imagen de fondo */
}
.ficha-tecnica-div {
  background-color: var(--color-marca);
  color: #ffffff;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}
.ficha-tecnica-p {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0;
}
/* Estilo para el submenú */
.sub-menu-container li a {
  background-color: var(--color-marca) !important;
}

:root {
  --color-marca: rgb(141, 103, 71); /* Marrón corporativo */
}

.primary-menu .menu-container li a div {
  /*  color: #000000 !important; */
  text-shadow: none !important;
  padding: 5px 0;
  transition: all 0.3s ease;
  font-weight: 500;
}

/* 2. ESTILO DEL HEADER STICKY (Cuando se vuelve Marrón) */

#header.sticky-header .primary-menu .menu-container li a div {
  color: #ffffff !important;
}

.primary-menu .menu-container li a div.current {
  color: white !important;
  font-weight: bold;
  border-bottom: 3px solid #ffffff;
  padding-bottom: 2px;
}

/* Página Actual en estado STICKY  */
#header.sticky-header .primary-menu .menu-container li a div.current {
  color: #ffffff !important;
  border-bottom: 3px solid #ffffff;
}

#header {
  top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  /*  margin-bottom: 100px !important; */
}

#wrapper {
  padding-top: 0 !important;
}

/* .imagen-uniforme {
    aspect-ratio: 4 / 3; 
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
} */

/* Galleria de video */
/* FORZAR VIDEO A LLENAR TODO */
.videoplay-on-hover .video-wrap {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.videoplay-on-hover .video-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fw-light {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* IMAGENES DE PRODUCTO */
.mfp-bottom-bar {
  margin-top: 40px;
  color: white !important;
}

.mfp-counter {
  position: static !important;
  width: 100%;
  text-align: center;
}

.mfp-figure img.mfp-img {
  display: block;
  max-width: auto;
  height: 90%;
}