@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");

/* =============================================
   PALETA DE MARCA — Aserradero La Ceiba de Oro
   (según Guía de Marca y Aplicación Web v1.9)
   Negro Café (fondos oscuros):   #1A140B
   Dorado / Ámbar (acentos):      #D9A429
   Crema / Hueso (fondos claros): #F3E9DA
   Café Oscuro (texto):           #231B10
   Blanco:                        #FFFFFF
   ============================================= */

:root {
	--negro-cafe:  #1A140B;
	--dorado:      #D9A429;
	--crema:       #F3E9DA;
	--cafe-oscuro: #231B10;
	--blanco:      #FFFFFF;
}

body {
	background-color: #F3E9DA;
}

.dark-background {
    --background-color: #1A140B;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #1A140B;
    --contrast-color: #ffffff;
}

.white-bg {
	background: #ffffff
}

.gray-bg {
	background: #f5f5f5
}

.gray-bg {
	background: #f7f7fd
}

.fa-solid {
	border-radius: 20px;
}

.fa-plus {
	border-radius: 20px;
}

.white-bg {
	background: #fff
}

.black-bg {
	background: #1A140B
}

.theme-bg {
	background: #D9A429
}

.brand-bg {
	background: #f1f4fa
}

.white-color {
	color: #fff
}

.black-color {
	color: #231B10
}

.theme-color {
	color: #D9A429
}

.boxed-btn {
	background: #fff;
	color: #D9A429 !important;
	display: inline-block;
	padding: 18px 44px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 400;
	border: 0;
	border: 1px solid #D9A429;
	letter-spacing: 3px;
	text-align: center;
	color: #D9A429;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 10px;
}

.boxed-btn:hover {
	background: #D9A429;
	color: #fff !important;
	border: 1px solid #D9A429
}

.boxed-btn:focus {
	outline: none
}

.boxed-btn.large-width {
	width: 220px
}

[data-overlay] {
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}

[data-overlay]::before {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	content: ""
}

[data-opacity="1"]::before { opacity: 0.1 }
[data-opacity="2"]::before { opacity: 0.2 }
[data-opacity="3"]::before { opacity: 0.3 }
[data-opacity="4"]::before { opacity: 0.4 }
[data-opacity="5"]::before { opacity: 0.5 }
[data-opacity="6"]::before { opacity: 0.6 }
[data-opacity="7"]::before { opacity: 0.7 }
[data-opacity="8"]::before { opacity: 0.8 }
[data-opacity="9"]::before { opacity: 0.9 }

html {
	scroll-behavior: smooth;	
}

body {
	font-family: "Montserrat", sans-serif;
	font-weight: normal;
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Montserrat", sans-serif;
	color: #231B10;
	margin-top: 0px;
	font-style: normal;
	font-weight: 500;
	text-transform: normal
}

p {
	font-family: "Montserrat", sans-serif;
	color: #231B10;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 15px;
	font-weight: normal
}

.img {
	max-width: 100%;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.f-left { float: left }
.f-right { float: right }
.fix { overflow: hidden }
.clear { clear: both }

a,
.button {
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

a:focus,
.button:focus {
	text-decoration: none;
	outline: none
}

a {
	color: #231B10
}

a:hover {
	color: #D9A429
}

a:focus,
a:hover,
.portfolio-cat a:hover,
a,
button {
	color: #D9A429;
	outline: medium none
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
	outline: 0
}

.uppercase { text-transform: uppercase }

input:focus::-moz-placeholder {
	opacity: 0;
	-webkit-transition: .4s;
	-o-transition: .4s;
	transition: .4s
}

.capitalize { text-transform: capitalize }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit
}

ul {
	margin: 0px;
	padding: 0px
}

li {
	list-style: none
}

hr {
	border-bottom: 1px solid #eceff8;
	border-top: 0 none;
	margin: 30px 0;
	padding: 0
}

.theme-overlay {
	position: relative
}

.theme-overlay::before {
	background: #1A140B none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%
}

.overlay {
	position: relative;
	z-index: 0
}

.overlay::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1
}

.overlay2 {
	position: relative;
	z-index: 0
}

.overlay2::before {
	position: absolute;
	content: "";
	background-color: #1A140B;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.5
}

.section-padding {
	padding-top: 120px;
	padding-bottom: 120px
}

.separator {
	border-top: 1px solid #f2f2f2
}

.mb-90 {
	margin-bottom: 90px
}

@media (max-width: 767px) {
	.mb-90 { margin-bottom: 30px }
}

@media (min-width: 768px) and (max-width: 991px) {
	.mb-90 { margin-bottom: 45px }
}

.owl-carousel .owl-nav div {
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
	height: 40px;
	left: 20px;
	line-height: 40px;
	font-size: 22px;
	color: #231B10;
	opacity: 1;
	visibility: visible;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease 0s;
	width: 40px
}

.owl-carousel .owl-nav div.owl-next {
	left: auto;
	right: -30px
}

.owl-carousel .owl-nav div.owl-next i {
	position: relative;
	right: 0;
	top: 1px
}

.owl-carousel .owl-nav div.owl-prev i {
	position: relative;
	right: 1px;
	top: 0px
}

.owl-carousel:hover .owl-nav div {
	opacity: 1;
	visibility: visible
}

.owl-carousel:hover .owl-nav div:hover {
	color: #fff;
	background: #D9A429
}

.btn {
	background: #D9A429;
	-moz-user-select: none;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 0;
	margin-bottom: 0;
	padding: 25px 22px;
	margin: 10px;
	cursor: pointer;
	transition: color 0.4s linear;
	position: relative;
	z-index: 1;
	border: 0;
	overflow: hidden;
	margin: 0;
	border-radius: 5px
}

.btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 101%;
	height: 101%;
	background: #1A140B;
	z-index: 1;
	transition: transform 0.5s;
	transition-timing-function: ease;
	transform-origin: 0 0;
	transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
	transform: scaleX(0);
	border-radius: 0px
}

.btn:hover::before {
	transform: scaleX(1);
	color: #fff !important;
	z-index: -1
}

.btn.focus,
.btn:focus {
	outline: 0;
	box-shadow: none
}

.red-btn2 {
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
	padding: 30px 51px;
	font-size: 16px
}

.white-btn {
	background: #fff;
	-moz-user-select: none;
	text-transform: uppercase;
	color: #231B10;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 0;
	margin-bottom: 0;
	padding: 25px 22px;
	margin: 10px;
	cursor: pointer;
	transition: color 0.4s linear;
	position: relative;
	z-index: 1;
	border: 0;
	overflow: hidden;
	margin: 0;
	border-radius: 0px
}

.white-btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 101%;
	height: 101%;
	background: #D9A429;
	z-index: 1;
	transition: transform 0.5s;
	transition-timing-function: ease;
	transform-origin: 0 0;
	transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
	transform: scaleY(0);
	border-radius: 0px
}

.white-btn:hover::before {
	transform: scaleY(1);
	color: #231B10 !important;
	z-index: -1
}

.btn.hero-btn {
	position: relative;
	box-shadow: -8px 8px 0 #1A140B
}

.btn.hero-btn:hover {
	box-shadow: 8px 8px 0 #1A140B
}

.arrow-btn {
	background: #D9A429;
	padding: 19px 15px;
	display: inline-block;
	line-height: 0;
	position: absolute;
	right: 0;
	bottom: 0
}

.btn.focus,
.btn:focus {
	outline: 0;
	box-shadow: none
}

.breadcrumb>.active {
	color: #888
}

#whatsappFloat {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	background: #25D366;
	height: 60px;
	width: 60px;
	right: 35px;
	bottom: 35px;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.3);
	z-index: 999;
	text-decoration: none;
}

@media (max-width: 575px) {
	#whatsappFloat { right: 24px; bottom: 24px }
}

#whatsappFloat:hover {
	color: #fff
}

.sticky-bar {
	left: 0;
	margin: auto;
	position: fixed;
	top: 0;
	width: 100%;
	-webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
	box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
	z-index: 9999;
	-webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
	-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	background: #fff
}

/* ---- Margin/Padding utilities (sin cambios de color) ---- */
.mt-5   { margin-top: 5px }
.mt-10  { margin-top: 10px }
.mt-15  { margin-top: 15px }
.mt-20  { margin-top: 20px }
.mt-25  { margin-top: 25px }
.mt-30  { margin-top: 30px }
.mt-35  { margin-top: 35px }
.mt-40  { margin-top: 40px }
.mt-45  { margin-top: 45px }
.mt-50  { margin-top: 50px }
.mt-55  { margin-top: 55px }
.mt-60  { margin-top: 60px }
.mt-65  { margin-top: 65px }
.mt-70  { margin-top: 70px }
.mt-75  { margin-top: 75px }
.mt-80  { margin-top: 80px }
.mt-85  { margin-top: 85px }
.mt-90  { margin-top: 90px }
.mt-95  { margin-top: 95px }
.mt-100 { margin-top: 100px }
.mt-105 { margin-top: 105px }
.mt-110 { margin-top: 110px }
.mt-115 { margin-top: 115px }
.mt-120 { margin-top: 120px }
.mt-125 { margin-top: 125px }
.mt-130 { margin-top: 130px }
.mt-135 { margin-top: 135px }
.mt-140 { margin-top: 140px }
.mt-145 { margin-top: 145px }
.mt-150 { margin-top: 150px }
.mt-155 { margin-top: 155px }
.mt-160 { margin-top: 160px }
.mt-165 { margin-top: 165px }
.mt-170 { margin-top: 170px }
.mt-175 { margin-top: 175px }
.mt-180 { margin-top: 180px }
.mt-185 { margin-top: 185px }
.mt-190 { margin-top: 190px }
.mt-195 { margin-top: 195px }
.mt-200 { margin-top: 200px }

.mb-5   { margin-bottom: 5px }
.mb-10  { margin-bottom: 10px }
.mb-15  { margin-bottom: 15px }
.mb-20  { margin-bottom: 20px }
.mb-25  { margin-bottom: 25px }
.mb-30  { margin-bottom: 30px }
.mb-35  { margin-bottom: 35px }
.mb-40  { margin-bottom: 40px }
.mb-45  { margin-bottom: 45px }
.mb-50  { margin-bottom: 50px }
.mb-55  { margin-bottom: 55px }
.mb-60  { margin-bottom: 60px }
.mb-65  { margin-bottom: 65px }
.mb-70  { margin-bottom: 70px }
.mb-75  { margin-bottom: 75px }
.mb-80  { margin-bottom: 80px }
.mb-85  { margin-bottom: 85px }
.mb-90  { margin-bottom: 90px }
.mb-95  { margin-bottom: 95px }
.mb-100 { margin-bottom: 100px }
.mb-105 { margin-bottom: 105px }
.mb-110 { margin-bottom: 110px }
.mb-115 { margin-bottom: 115px }
.mb-120 { margin-bottom: 120px }
.mb-125 { margin-bottom: 125px }
.mb-130 { margin-bottom: 130px }
.mb-135 { margin-bottom: 135px }
.mb-140 { margin-bottom: 140px }
.mb-145 { margin-bottom: 145px }
.mb-150 { margin-bottom: 150px }
.mb-155 { margin-bottom: 155px }
.mb-160 { margin-bottom: 160px }
.mb-165 { margin-bottom: 165px }
.mb-170 { margin-bottom: 170px }
.mb-175 { margin-bottom: 175px }
.mb-180 { margin-bottom: 180px }
.mb-185 { margin-bottom: 185px }
.mb-190 { margin-bottom: 190px }
.mb-195 { margin-bottom: 195px }
.mb-200 { margin-bottom: 200px }

.ml-5   { margin-left: 5px }
.ml-10  { margin-left: 10px }
.ml-15  { margin-left: 15px }
.ml-20  { margin-left: 20px }
.ml-25  { margin-left: 25px }
.ml-30  { margin-left: 30px }
.ml-35  { margin-left: 35px }
.ml-40  { margin-left: 40px }
.ml-45  { margin-left: 45px }
.ml-50  { margin-left: 50px }
.ml-55  { margin-left: 55px }
.ml-60  { margin-left: 60px }
.ml-65  { margin-left: 65px }
.ml-70  { margin-left: 70px }
.ml-75  { margin-left: 75px }
.ml-80  { margin-left: 80px }
.ml-85  { margin-left: 85px }
.ml-90  { margin-left: 90px }
.ml-95  { margin-left: 95px }
.ml-100 { margin-left: 100px }
.ml-105 { margin-left: 105px }
.ml-110 { margin-left: 110px }
.ml-115 { margin-left: 115px }
.ml-120 { margin-left: 120px }
.ml-125 { margin-left: 125px }
.ml-130 { margin-left: 130px }
.ml-135 { margin-left: 135px }
.ml-140 { margin-left: 140px }
.ml-145 { margin-left: 145px }
.ml-150 { margin-left: 150px }
.ml-155 { margin-left: 155px }
.ml-160 { margin-left: 160px }
.ml-165 { margin-left: 165px }
.ml-170 { margin-left: 170px }
.ml-175 { margin-left: 175px }
.ml-180 { margin-left: 180px }
.ml-185 { margin-left: 185px }
.ml-190 { margin-left: 190px }
.ml-195 { margin-left: 195px }
.ml-200 { margin-left: 200px }

.mr-5   { margin-right: 5px }
.mr-10  { margin-right: 10px }
.mr-15  { margin-right: 15px }
.mr-20  { margin-right: 20px }
.mr-25  { margin-right: 25px }
.mr-30  { margin-right: 30px }
.mr-35  { margin-right: 35px }
.mr-40  { margin-right: 40px }
.mr-45  { margin-right: 45px }
.mr-50  { margin-right: 50px }
.mr-55  { margin-right: 55px }
.mr-60  { margin-right: 60px }
.mr-65  { margin-right: 65px }
.mr-70  { margin-right: 70px }
.mr-75  { margin-right: 75px }
.mr-80  { margin-right: 80px }
.mr-85  { margin-right: 85px }
.mr-90  { margin-right: 90px }
.mr-95  { margin-right: 95px }
.mr-100 { margin-right: 100px }
.mr-105 { margin-right: 105px }
.mr-110 { margin-right: 110px }
.mr-115 { margin-right: 115px }
.mr-120 { margin-right: 120px }
.mr-125 { margin-right: 125px }
.mr-130 { margin-right: 130px }
.mr-135 { margin-right: 135px }
.mr-140 { margin-right: 140px }
.mr-145 { margin-right: 145px }
.mr-150 { margin-right: 150px }
.mr-155 { margin-right: 155px }
.mr-160 { margin-right: 160px }
.mr-165 { margin-right: 165px }
.mr-170 { margin-right: 170px }
.mr-175 { margin-right: 175px }
.mr-180 { margin-right: 180px }
.mr-185 { margin-right: 185px }
.mr-190 { margin-right: 190px }
.mr-195 { margin-right: 195px }
.mr-200 { margin-right: 200px }

.pt-5   { padding-top: 5px }
.pt-10  { padding-top: 10px }
.pt-15  { padding-top: 15px }
.pt-20  { padding-top: 20px }
.pt-25  { padding-top: 25px }
.pt-30  { padding-top: 30px }
.pt-35  { padding-top: 35px }
.pt-40  { padding-top: 40px }
.pt-45  { padding-top: 45px }
.pt-50  { padding-top: 50px }
.pt-55  { padding-top: 55px }
.pt-60  { padding-top: 60px }
.pt-65  { padding-top: 65px }
.pt-70  { padding-top: 70px }
.pt-75  { padding-top: 75px }
.pt-80  { padding-top: 80px }
.pt-85  { padding-top: 85px }
.pt-90  { padding-top: 90px }
.pt-95  { padding-top: 95px }
.pt-100 { padding-top: 100px }
.pt-105 { padding-top: 105px }
.pt-110 { padding-top: 110px }
.pt-115 { padding-top: 115px }
.pt-120 { padding-top: 120px }
.pt-125 { padding-top: 125px }
.pt-130 { padding-top: 130px }
.pt-135 { padding-top: 135px }
.pt-140 { padding-top: 140px }
.pt-145 { padding-top: 145px }
.pt-150 { padding-top: 150px }
.pt-155 { padding-top: 155px }
.pt-160 { padding-top: 160px }
.pt-165 { padding-top: 165px }
.pt-170 { padding-top: 170px }
.pt-175 { padding-top: 175px }
.pt-180 { padding-top: 180px }
.pt-185 { padding-top: 185px }
.pt-190 { padding-top: 190px }
.pt-195 { padding-top: 195px }
.pt-200 { padding-top: 200px }
.pt-260 { padding-top: 260px }

.pb-5   { padding-bottom: 5px }
.pb-10  { padding-bottom: 10px }
.pb-15  { padding-bottom: 15px }
.pb-20  { padding-bottom: 20px }
.pb-25  { padding-bottom: 25px }
.pb-30  { padding-bottom: 30px }
.pb-35  { padding-bottom: 35px }
.pb-40  { padding-bottom: 40px }
.pb-45  { padding-bottom: 45px }
.pb-50  { padding-bottom: 50px }
.pb-55  { padding-bottom: 55px }
.pb-60  { padding-bottom: 60px }
.pb-65  { padding-bottom: 65px }
.pb-70  { padding-bottom: 70px }
.pb-75  { padding-bottom: 75px }
.pb-80  { padding-bottom: 80px }
.pb-85  { padding-bottom: 85px }
.pb-90  { padding-bottom: 90px }
.pb-95  { padding-bottom: 95px }
.pb-100 { padding-bottom: 100px }
.pb-105 { padding-bottom: 105px }
.pb-110 { padding-bottom: 110px }
.pb-115 { padding-bottom: 115px }
.pb-120 { padding-bottom: 120px }
.pb-125 { padding-bottom: 125px }
.pb-130 { padding-bottom: 130px }
.pb-135 { padding-bottom: 135px }
.pb-140 { padding-bottom: 140px }
.pb-145 { padding-bottom: 145px }
.pb-150 { padding-bottom: 150px }
.pb-155 { padding-bottom: 155px }
.pb-160 { padding-bottom: 160px }
.pb-165 { padding-bottom: 165px }
.pb-170 { padding-bottom: 170px }
.pb-175 { padding-bottom: 175px }
.pb-180 { padding-bottom: 180px }
.pb-185 { padding-bottom: 185px }
.pb-190 { padding-bottom: 190px }
.pb-195 { padding-bottom: 195px }
.pb-200 { padding-bottom: 200px }

.pl-5   { padding-left: 5px }
.pl-10  { padding-left: 10px }
.pl-15  { padding-left: 15px }
.pl-20  { padding-left: 20px }
.pl-25  { padding-left: 25px }
.pl-30  { padding-left: 30px }
.pl-35  { padding-left: 35px }
.pl-40  { padding-left: 40px }
.pl-45  { padding-left: 45px }
.pl-50  { padding-left: 50px }
.pl-55  { padding-left: 55px }
.pl-60  { padding-left: 60px }
.pl-65  { padding-left: 65px }
.pl-70  { padding-left: 70px }
.pl-75  { padding-left: 75px }
.pl-80  { padding-left: 80px }
.pl-85  { padding-left: 85px }
.pl-90  { padding-left: 90px }
.pl-95  { padding-left: 95px }
.pl-100 { padding-left: 100px }
.pl-105 { padding-left: 105px }
.pl-110 { padding-left: 110px }
.pl-115 { padding-left: 115px }
.pl-120 { padding-left: 120px }
.pl-125 { padding-left: 125px }
.pl-130 { padding-left: 130px }
.pl-135 { padding-left: 135px }
.pl-140 { padding-left: 140px }
.pl-145 { padding-left: 145px }
.pl-150 { padding-left: 150px }
.pl-155 { padding-left: 155px }
.pl-160 { padding-left: 160px }
.pl-165 { padding-left: 165px }
.pl-170 { padding-left: 170px }
.pl-175 { padding-left: 175px }
.pl-180 { padding-left: 180px }
.pl-185 { padding-left: 185px }
.pl-190 { padding-left: 190px }
.pl-195 { padding-left: 195px }
.pl-200 { padding-left: 200px }

.pr-5   { padding-right: 5px }
.pr-10  { padding-right: 10px }
.pr-15  { padding-right: 15px }
.pr-20  { padding-right: 20px }
.pr-25  { padding-right: 25px }
.pr-30  { padding-right: 30px }
.pr-35  { padding-right: 35px }
.pr-40  { padding-right: 40px }
.pr-45  { padding-right: 45px }
.pr-50  { padding-right: 50px }
.pr-55  { padding-right: 55px }
.pr-60  { padding-right: 60px }
.pr-65  { padding-right: 65px }
.pr-70  { padding-right: 70px }
.pr-75  { padding-right: 75px }
.pr-80  { padding-right: 80px }
.pr-85  { padding-right: 85px }
.pr-90  { padding-right: 90px }
.pr-95  { padding-right: 95px }
.pr-100 { padding-right: 100px }
.pr-105 { padding-right: 105px }
.pr-110 { padding-right: 110px }
.pr-115 { padding-right: 115px }
.pr-120 { padding-right: 120px }
.pr-125 { padding-right: 125px }
.pr-130 { padding-right: 130px }
.pr-135 { padding-right: 135px }
.pr-140 { padding-right: 140px }
.pr-145 { padding-right: 145px }
.pr-150 { padding-right: 150px }
.pr-155 { padding-right: 155px }
.pr-160 { padding-right: 160px }
.pr-165 { padding-right: 165px }
.pr-170 { padding-right: 170px }
.pr-175 { padding-right: 175px }
.pr-180 { padding-right: 180px }
.pr-185 { padding-right: 185px }
.pr-190 { padding-right: 190px }
.pr-195 { padding-right: 195px }
.pr-200 { padding-right: 200px }

/* ---- Animations ---- */
.bounce-animate {
	animation-name: float-bob;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	-moz-animation-name: float-bob;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: float-bob;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-o-animation-name: float-bob;
	-o-animation-duration: 2s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear
}

@-webkit-keyframes float-bob {
	0%   { -webkit-transform: translateY(-20px); transform: translateY(-20px) }
	50%  { -webkit-transform: translateY(-10px); transform: translateY(-10px) }
	100% { -webkit-transform: translateY(-20px); transform: translateY(-20px) }
}

.heartbeat {
	animation: heartbeat 1s infinite alternate
}

@-webkit-keyframes heartbeat {
	to { -webkit-transform: scale(1.03); transform: scale(1.03) }
}

.rotateme {
	-webkit-animation-name: rotateme;
	animation-name: rotateme;
	-webkit-animation-duration: 30s;
	animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear
}

@keyframes rotateme {
	from { -webkit-transform: rotate(0deg);   transform: rotate(0deg) }
	to   { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@-webkit-keyframes rotateme {
	from { -webkit-transform: rotate(0deg) }
	to   { -webkit-transform: rotate(360deg) }
}

/* ---- Preloader ---- */
.preloader {
	background-color: #f7f7f7;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s;
	margin: 0 auto
}

.preloader .preloader-circle {
	width: 100px;
	height: 100px;
	position: relative;
	border-style: solid;
	border-width: 1px;
	border-top-color: #D9A429;
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	z-index: 10;
	border-radius: 50%;
	-webkit-box-shadow: 0 1px 5px 0 rgba(217, 164, 41, 0.15);
	box-shadow: 0 1px 5px 0 rgba(217, 164, 41, 0.15);
	background-color: #ffffff;
	-webkit-animation: zoom 2000ms infinite ease;
	animation: zoom 2000ms infinite ease;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s
}

.preloader .preloader-circle2 {
	border-top-color: #D9A429
}

.preloader .preloader-img {
	position: absolute;
	top: 50%;
	z-index: 200;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: inline-block;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding-top: 6px;
	-webkit-transition: .6s;
	-o-transition: .6s;
	transition: .6s
}

.preloader .preloader-img img {
	max-width: 95px
}

.preloader .pere-text strong {
	font-weight: 800;
	color: #D9A429;
	text-transform: uppercase
}

@-webkit-keyframes zoom {
	0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   -webkit-transition: .6s; -o-transition: .6s; transition: .6s }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s }
}

@keyframes zoom {
	0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   -webkit-transition: .6s; -o-transition: .6s; transition: .6s }
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: .6s; -o-transition: .6s; transition: .6s }
}

/* ---- Section padding ---- */
.section-padding2 {
	padding-top: 200px;
	padding-bottom: 200px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.section-padding2 { padding-top: 100px; padding-bottom: 100px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-padding2 { padding-top: 100px; padding-bottom: 100px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.section-padding2 { padding-top: 100px; padding-bottom: 100px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-padding2 { padding-top: 50px; padding-bottom: 50px }
}
@media (max-width: 575px) {
	.section-padding2 { padding-top: 35px; padding-bottom: 50px }
}

.section-padding30 {
	padding-top: 130px;
	padding-bottom: 170px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.section-padding30 { padding-top: 130px; padding-bottom: 170px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-padding30 { padding-top: 120px; padding-bottom: 120px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.section-padding30 { padding-top: 100px; padding-bottom: 70px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-padding30 { padding-top: 70px; padding-bottom: 20px }
}
@media (max-width: 575px) {
	.section-padding30 { padding-top: 70px; padding-bottom: 20px }
}

/* ---- Section titles ---- */
.section-tittle {
	position: relative
}

@media (max-width: 575px) {
	.section-tittle { margin-bottom: 0px }
}

.section-tittle .front-text {
	position: relative;
	z-index: 2
}

.section-tittle .front-text h2 {
	color: #231B10;
	font-size: 52px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
	position: relative;
	display: inline-block;
	padding-bottom: 8px;
	margin-bottom: 10px;
}

#sobre .section-tittle .front-text h2,
#mision-vision .section-tittle .front-text h2,
#valores .section-tittle .front-text h2,
#servicios .section-tittle .front-text h2,
#proyectos .section-tittle .front-text h2,
#experiencia .section-tittle .front-text h2 {
	font-family: "Poppins", sans-serif;
}

.section-tittle .front-text h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 150px;
	height: 4px;
	background-color: #D9A429;
}

/* Título centrado (.section-tittle.text-center): la línea dorada se centra con el texto */
.section-tittle.text-center .front-text h2::after {
	left: 50%;
	transform: translateX(-50%);
}

/* ---- Video del taller ---- */
/* Servicios cierra con menos relleno para que la franja crema no se vea como una línea suelta */
#servicios {
	padding-bottom: 40px;
}

.video-taller {
	position: relative;
	background: linear-gradient(135deg, #231B10 0%, #2A2014 100%);
	padding: 100px 0;
	overflow: hidden;
}

/* Desktop: video a la izquierda (ocupa 2 filas), texto a la derecha */
.video-taller__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"media intro"
		"media detalle";
	column-gap: 70px;
	align-items: center;
	align-content: center;
}

.video-taller__media   { grid-area: media; }
.video-taller__intro   { grid-area: intro; align-self: end; }
.video-taller__detalle { grid-area: detalle; align-self: start; }

/* Marco del video con resplandor dorado detrás */
.video-taller__marco {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 0 auto;
	aspect-ratio: 9 / 16;
	border-radius: 18px;
	border: 1px solid rgba(217, 164, 41, 0.35);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
	background: #1A140B;
	isolation: isolate;
}

.video-taller__marco::before {
	content: "";
	position: absolute;
	inset: 8% -12%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(217, 164, 41, 0.5), rgba(217, 164, 41, 0));
	filter: blur(40px);
	pointer-events: none;
}

.video-taller__marco video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 17px;
	background: #1A140B;
}

/* Etiqueta "En vivo desde el taller" */
.video-taller__etiqueta {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(26, 20, 11, 0.65);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	pointer-events: none;
}

.video-taller__punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #D9A429;
	box-shadow: 0 0 0 3px rgba(217, 164, 41, 0.25);
}

/* Texto */
.video-taller__eyebrow {
	display: block;
	color: #D9A429;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.video-taller .section-tittle {
	margin-bottom: 24px;
}

.video-taller .section-tittle .front-text h2 {
	color: #fff;
	font-size: 46px;
}

.video-taller__parrafo {
	color: rgba(255, 255, 255, 0.78);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 28px 0;
}

.video-taller__lista {
	list-style: none;
	padding: 0;
	margin: 0 0 30px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.video-taller__lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 17px;
}

.video-taller__lista i {
	flex-shrink: 0;
	color: #D9A429;
	font-size: 19px;
}

/* Fila de 3 datos separados por líneas finas doradas */
.video-taller__datos {
	display: flex;
	margin: 0 0 34px 0;
}

.video-taller__dato {
	flex: 1;
	padding: 4px 22px;
	border-left: 1px solid rgba(217, 164, 41, 0.35);
}

.video-taller__dato:first-child {
	padding-left: 0;
	border-left: none;
}

.video-taller__dato strong {
	display: block;
	color: #D9A429;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.video-taller__dato span {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

/* Animación de entrada (solo el texto). Se activa cuando el JS agrega .js-anim a la sección,
   así que sin JS el texto se ve normal. */
.video-taller.js-anim .video-taller__anim {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease-out, transform .7s ease-out;
}

.video-taller.js-anim .video-taller__detalle {
	transition-delay: .15s;
}

.video-taller.js-anim .video-taller__anim.visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.video-taller.js-anim .video-taller__anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tablet y celular: una sola columna — título y párrafo, video, luego lista, datos y botón */
@media (max-width: 991px) {
	.video-taller {
		padding: 80px 0;
	}
	.video-taller__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"intro"
			"media"
			"detalle";
		row-gap: 40px;
	}
	.video-taller__intro,
	.video-taller__detalle {
		align-self: auto;
	}
	.video-taller__parrafo {
		margin-bottom: 0;
	}
}

@media (max-width: 767px) {
	#servicios {
		padding-bottom: 30px;
	}
	.video-taller {
		padding: 60px 0;
	}
	.video-taller__grid {
		row-gap: 32px;
	}
	.video-taller .section-tittle .front-text h2 {
		font-size: 32px;
	}
	.video-taller__parrafo,
	.video-taller__lista li {
		font-size: 16px;
	}
	.video-taller__dato {
		padding: 4px 12px;
	}
	.video-taller__dato strong {
		font-size: 16px;
	}
	.video-taller__dato span {
		font-size: 12px;
	}
}

/* Franja de invitación al catálogo (reemplaza la sección de productos en index.html) */
.catalogo-cta {
	background: #231B10;
	padding: 60px 0;
}

#catalogo {
	scroll-margin-top: 100px;
}

.catalogo-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.catalogo-cta__texto h3 {
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px 0;
}

.catalogo-cta__texto p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	margin: 0;
}

@media (max-width: 767px) {
	.catalogo-cta {
		padding: 40px 0;
	}
	.catalogo-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Banner "Conoce nuestro catálogo" de index.html: foto de madera de fondo.
   Va con #catalogo para no afectar las franjas .catalogo-cta de las páginas de servicio. */
#catalogo.catalogo-cta {
	background:
		linear-gradient(90deg, rgba(35, 27, 16, 0.95) 0%, rgba(35, 27, 16, 0.80) 60%, rgba(35, 27, 16, 0.55) 100%),
		url("../img/Productos/tabla-pino-nuevo.jpg") center 60% / cover no-repeat,
		#231B10;
	padding: 80px 0;
	border-top: 1px solid rgba(217, 164, 41, 0.3);
	border-bottom: 1px solid rgba(217, 164, 41, 0.3);
}

.catalogo-cta__eyebrow {
	display: block;
	color: #D9A429;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

#catalogo .btn-cotizar-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(217, 164, 41, 0.6);
}

@media (max-width: 767px) {
	#catalogo.catalogo-cta {
		padding: 60px 0;
	}
	#catalogo .catalogo-cta__inner {
		align-items: center;
		text-align: center;
	}
}

/* ---- Formulario "Solicita tu cotización" ---- */
.form-intro {
	color: rgba(26, 20, 11, 0.75);
	font-size: 17px;
	line-height: 1.6;
	max-width: 480px;
	text-wrap: balance;
	margin: 10px 0 25px 0;
}

.form-contact label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #231B10;
	margin-bottom: 6px;
}

.form-contact .required-asterisk {
	color: #D9A429;
	margin-left: 2px;
}

.btn-cotizar-submit {
	display: inline-block;
	background: #D9A429;
	color: #231B10;
	font-family: "Montserrat", sans-serif;
	font-size: 19px;
	font-weight: 700;
	padding: 14px 36px;
	border: none;
	border-radius: 50px;
	box-shadow: 0 4px 14px rgba(217, 164, 41, 0.5);
	cursor: pointer;
	transition: background .3s ease-out 0s, color .3s ease-out 0s, transform .3s ease-out 0s, box-shadow .3s ease-out 0s;
}

.btn-cotizar-submit:hover {
	background: #C6931F;
	color: #231B10;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(217, 164, 41, 0.7);
}

.btn-cotizar-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
	transform: none;
}

@media (max-width: 575px) {
	.btn-cotizar-submit {
		width: 100%;
	}
}

.form-feedback {
	margin-top: 12px;
	font-size: 15px;
}

.form-privacidad {
	margin-top: 14px;
	font-size: 14px;
	color: rgba(26, 20, 11, 0.65);
}

.form-privacidad i {
	color: #D9A429;
}

.form-feedback.is-error {
	color: #b02a37;
}

.form-success-message {
	background: #FAF3E6;
	border: 1px solid #D9A429;
	border-radius: 8px;
	padding: 30px;
	color: #231B10;
	font-size: 18px;
	line-height: 1.5;
	text-align: center;
}

/* ---- Valores (franja oscura de ancho completo, sin foto lateral) ---- */
#valores {
	position: relative;
	background-color: #231B10;
	background-image: url("../img/background/hero-bosque.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 90px 0;
}

@media (max-width: 767px) {
	#valores {
		padding: 60px 0;
	}
}

/* En celulares/tablets el fondo fijo falla (iOS) o va a saltos: scroll normal */
@media (max-width: 991px), (hover: none) {
	#valores {
		background-attachment: scroll;
	}
}

#valores::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(35, 27, 16, 0.88), rgba(42, 32, 20, 0.92));
}

#valores .container {
	position: relative;
	z-index: 2;
}

#valores .valores-header {
	text-align: center;
	margin-bottom: 50px;
}

#valores .section-tittle .front-text h2 {
	color: #fff;
}

#valores .section-tittle .front-text h2::after {
	left: 50%;
	transform: translateX(-50%);
}

#valores .valores-subtitulo {
	color: rgba(255, 255, 255, 0.75);
	font-size: 18px;
	max-width: 600px;
	margin: 0 auto;
}

#valores .valores-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 991px) {
	#valores .valores-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	#valores .valores-grid {
		grid-template-columns: 1fr;
	}
}

#valores .valor-card {
	background: rgba(42, 32, 20, 0.75);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(217, 164, 41, 0.25);
	border-radius: 12px;
	padding: 28px;
	transition: transform .3s ease-out 0s, border-color .3s ease-out 0s;
}

#valores .valor-card:hover {
	border-color: #D9A429;
	transform: translateY(-4px);
}

#valores .valor-card__icono {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(217, 164, 41, 0.12);
	color: #D9A429;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 18px;
}

#valores .valor-card h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px 0;
}

#valores .valor-card p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* ---- Sostenibilidad (paneles solares) ---- */
#sostenibilidad {
	background-color: var(--crema);
	padding-top: 110px;
	padding-bottom: 90px;
}

#sostenibilidad .section-tittle .front-text h2 {
	font-family: "Poppins", sans-serif;
	font-size: 40px;
	line-height: 1.15;
}

#sostenibilidad .sostenibilidad-row {
	--bs-gutter-x: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#sostenibilidad .section-tittle .front-text h2 {
		font-size: 36px;
	}
}

@media (max-width: 767px) {
	#sostenibilidad {
		padding-top: 70px;
		padding-bottom: 60px;
	}
	#sostenibilidad .section-tittle .front-text h2 {
		font-size: 28px;
	}
}

.sostenibilidad-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #D9A429;
	font-family: 'Figtree', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.sostenibilidad-eyebrow::before {
	content: "";
	width: 40px;
	height: 2px;
	flex: 0 0 auto;
	background: #D9A429;
}

@media (max-width: 767px) {
	.sostenibilidad-eyebrow { font-size: 12px; }
	.sostenibilidad-eyebrow::before { width: 30px; }
}

.sostenibilidad-texto {
	color: rgba(35, 27, 16, 0.8);
	font-size: 17px;
	line-height: 1.7;
	max-width: 520px;
	margin-bottom: 26px;
}

.sostenibilidad-puntos {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0;
	margin: 0;
}

.sostenibilidad-puntos li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.sostenibilidad-punto__icono {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(217, 164, 41, 0.15);
	color: #D9A429;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.sostenibilidad-punto__texto {
	color: #231B10;
	font-size: 15px;
	line-height: 1.5;
}

.sostenibilidad-punto__texto strong {
	display: block;
	font-size: 16px;
	margin-bottom: 2px;
}

.sostenibilidad-punto__desc {
	display: block;
	color: rgba(26, 20, 11, 0.75);
}

.sostenibilidad-cierre {
	border-top: 1px solid rgba(217, 164, 41, 0.4);
	padding-top: 20px;
	margin-top: 26px;
}

.sostenibilidad-cierre p {
	font-style: italic;
	font-size: 16px;
	color: rgba(35, 27, 16, 0.7);
	margin: 0;
}

/* Collage de fotos */
.sostenibilidad-collage {
	position: relative;
	margin-bottom: 50px;
}

.sostenibilidad-collage__marco {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sostenibilidad-collage__grande {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sostenibilidad-collage:hover .sostenibilidad-collage__grande {
	transform: scale(1.03);
}

.sostenibilidad-collage__pequena {
	position: absolute;
	right: 0;
	bottom: -30px;
	width: 42%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 6px solid #fff;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.sostenibilidad-sello {
	position: absolute;
	bottom: 20px;
	left: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #231B10;
	border: 1px solid #D9A429;
	border-radius: 8px;
	padding: 12px 18px;
}

.sostenibilidad-sello i {
	color: #D9A429;
	font-size: 14px;
}

.sostenibilidad-sello span {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 1;
}

@media (max-width: 767px) {
	.sostenibilidad-collage__pequena {
		display: none;
	}
}

@media (max-width: 575px) {
	.section-tittle .front-text h2 { font-size: 34px; line-height: 1.4 }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle .front-text h2 { font-size: 34px; line-height: 1.4 }
}

.section-tittle span.back-text {
	font-size: 110px;
	font-weight: 800;
	text-transform: uppercase;
	-webkit-text-stroke: 1px rgba(217, 164, 41, 0.55);
	-webkit-text-fill-color: transparent;
	margin: 0;
	line-height: 1;
	position: absolute;
	transform: translateY(-114%);
	right: 0;
	left: 12px
}

@media (max-width: 575px) {
	.section-tittle span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-tittle span.back-text { font-size: 127px }
}

.section-tittle.section-tittle2 .front-text h2 { font-size: 70px }
@media (max-width: 575px) {
	.section-tittle.section-tittle2 .front-text h2 { font-size: 40px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle2 .front-text h2 { font-size: 40px }
}
.section-tittle.section-tittle2 span.back-text { transform: translateY(-123%) }
@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 109px }
}
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 109px }
}
@media only screen and (min-width: 1441px) and (max-width: 1800px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 102px }
}
@media (max-width: 575px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 107px; transform: translateY(-128%) }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-tittle.section-tittle2 span.back-text { font-size: 107px; transform: translateY(-118%) }
}

.section-tittle.section-tittle3 .front-text h2 { font-size: 70px }
@media (max-width: 575px) {
	.section-tittle.section-tittle3 .front-text h2 { font-size: 40px }
}
.section-tittle.section-tittle3 span.back-text { transform: translateY(-114%) }
@media (max-width: 575px) {
	.section-tittle.section-tittle3 span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle3 span.back-text { font-size: 98px; transform: translateY(-131%) }
}

.section-tittle.section-tittle4 .front-text h2 { font-size: 52px; color: #fff }
@media (max-width: 575px) {
	.section-tittle.section-tittle4 .front-text h2 { font-size: 34px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle4 .front-text h2 { font-size: 34px }
}
.section-tittle.section-tittle4 span.back-text {
	-webkit-text-stroke: 1px rgba(255,255,255,0.2);
	transform: translateY(-113%)
}
@media (max-width: 575px) {
	.section-tittle.section-tittle4 span.back-text { font-size: 56px; transform: translateY(-129%) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle4 span.back-text { font-size: 56px; transform: translateY(-130%) }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.section-tittle.section-tittle4 span.back-text { font-size: 117px; transform: translateY(-118%) }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.section-tittle.section-tittle4 span.back-text { font-size: 117px; transform: translateY(-113%) }
}

.section-tittle.section-tittle6 .front-text h2 { font-size: 70px; color: #fff }
@media (max-width: 575px) {
	.section-tittle.section-tittle6 .front-text h2 { font-size: 40px }
}
.section-tittle.section-tittle6 span.back-text {
	-webkit-text-stroke: 1px rgba(255,255,255,0.2);
	transform: translateY(-113%)
}
@media (max-width: 575px) {
	.section-tittle.section-tittle6 span.back-text { font-size: 56px; transform: translateY(-136%) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.section-tittle.section-tittle6 span.back-text { font-size: 83px; transform: translateY(-137%) }
}

.small-section-tittle h4 {
	color: #231B10;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 20px
}

/* ---- Header ---- */
/* Franja de redes sociales más delgada (antes 13px + iconos de 40px = 66px de alto) */
.header-area .header-top {
	padding: 6px 100px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.header-area .header-top { padding: 6px 80px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.header-area .header-top { padding: 6px 15px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-area .header-top { padding: 6px 50px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.header-area .header-top { padding: 6px 20px }
}
@media (max-width: 575px) {
	.header-area .header-top { padding: 6px 20px }
}

.header-area .header-bottom {
	padding: 0px 100px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.header-area .header-bottom { padding: 0px 80px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.header-area .header-bottom { padding: 0px 15px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-area .header-bottom { padding: 10px 50px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.header-area .header-bottom { padding: 10px 20px }
}
@media (max-width: 575px) {
	.header-area .header-bottom { padding: 0px 20px }
}

.header-area {
	background: rgba(26, 20, 11, 0.85)
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header-area { box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1) }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.header-area { box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1) }
}
@media (max-width: 575px) {
	.header-area { box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1) }
}

.header-area .header-top {
	border-bottom: 1px solid rgba(217, 164, 41, 0.3)
}

.header-area .header-top .header-info-right .header-social li {
	display: inline-block
}

.header-area .header-top .header-info-right .header-social li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: #D9A429;
	font-size: 14px;
	margin-left: 8px;
}

.header-area .header-top .header-info-right .header-social li a:hover {
	color: #fff
}

.main-header {
	position: relative;
	z-index: 3
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.main-header .main-menu { margin-right: 30px }
}

.main-header .main-menu ul li {
	display: inline-block;
	position: relative;
	z-index: 1
}

.main-header .main-menu ul li a {
	color: #D9A429;
	font-weight: 600;
	padding: 39px 19px;
	display: block;
	font-size: 17px;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s;
	text-transform: capitalize
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.main-header .main-menu ul li a { padding: 39px 14px }
}

.main-header .main-menu ul li:hover>a {
	color: #fff
}

.main-header .main-menu ul li a.btn-contact-nav {
	background-color: #D9A429 !important;
	color: #231B10 !important;
	padding: 10px 24px !important;
	margin: 29px 0;
	border-radius: 50px !important;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(217, 164, 41, 0.5) !important;
	transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
	animation: btnContactPulse 2.5s ease-in-out infinite;
}

.main-header .main-menu ul li:hover>a.btn-contact-nav,
.main-header .main-menu ul li a.btn-contact-nav:hover {
	background-color: #C6931F !important;
	color: #231B10 !important;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(217, 164, 41, 0.7);
	animation-play-state: paused;
}

@keyframes btnContactPulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(217, 164, 41, 0.5); }
	50% { box-shadow: 0 4px 20px rgba(217, 164, 41, 0.85); }
}

.main-header .main-menu ul ul.submenu {
	position: absolute;
	width: 170px;
	background: #fff;
	left: 0;
	top: 90%;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
	padding: 17px 0;
	border-top: 5px solid #D9A429;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.main-header .main-menu ul ul.submenu>li {
	margin-left: 7px;
	display: block
}

.main-header .main-menu ul ul.submenu>li>a {
	padding: 6px 10px !important;
	font-size: 15px;
	color: #231B10
}

.main-header .main-menu ul ul.submenu>li>a:hover {
	color: #D9A429;
	background: none
}

.main-header .logo .small-logo { display: none }
@media (max-width: 575px) {
	.main-header .logo .small-logo { display: unset }
	.main-header .logo .big-logo   { display: none }
}

/* ---- Logo del header: mismo tamaño en todas las páginas, también con el header fijo ---- */
.main-header .logo {
	padding: 8px 0;
}

.main-header .logo a {
	display: inline-block;
}

.main-header .logo img {
	display: block;
	height: 160px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

@media (max-width: 991px) {
	.main-header .logo img {
		height: 115px;
	}
	/* Hamburguesa centrada verticalmente con el logo de 115px */
	.header-area .mobile_menu .slicknav_btn { top: -85px }
}

@media (max-width: 575px) {
	.main-header .logo {
		padding: 6px 0;
	}
	.main-header .logo img {
		height: 85px;
	}
	.header-area .mobile_menu .slicknav_btn { top: -63px }
	/* El header es más alto: el texto del hero baja para no quedar debajo del logo */
	.slider-area .single-slider .hero__caption { padding-top: 115px }
}

.main-header ul>li:hover>ul.submenu {
	visibility: visible;
	opacity: 1;
	top: 100%
}

.header-transparent {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9
}

.header-area .header-top .header-info-right .header-social a i {
	-webkit-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	-ms-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg)
}

.header-area .header-top .header-info-right .header-social a:hover i {
	transform: scale(1.2) rotate(10deg);
}

.header-sticky.sticky-bar.sticky {
	background: #1A140B
}

.header-sticky ul li a {
	padding: 10px 19px
}

.header-sticky.sticky-bar.sticky .main-menu ul>li>a {
	padding: 26px 20px
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.header-sticky.sticky-bar.sticky .main-menu ul>li>a { padding: 39px 14px }
}

.slicknav_menu .slicknav_icon-bar {
	background-color: #D9A429 !important
}

.slicknav_nav { margin-top: 0px }

.header-area .slicknav_btn { top: -45px }

.slicknav_menu .slicknav_nav a:hover {
	background: transparent;
	color: #D9A429
}

.slicknav_menu {
	background: transparent;
	margin-top: 4px !important
}

.mobile_menu {
	position: absolute;
	right: 0px;
	width: 100%;
	z-index: 99
}

/* ---- Slider / Hero ---- */
.slider-height {
	min-height: 900px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slider-height { min-height: 620px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.slider-height { min-height: 600px }
}
@media (max-width: 575px) {
	.slider-height { min-height: 400px }
}

.slider-height2 {
	min-height: 590px;
	background-repeat: no-repeat;
	background-position: center center
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slider-height2 { min-height: 500px }
}
@media (max-width: 575px) {
	.slider-height2 { min-height: 350px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.slider-height2 { min-height: 350px }
}

.btn1 { padding: 25px 0px }

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.btn1 { padding: 25px 0 }
}

.slider-area { margin-top: -1px }

.slider-area .hero__caption {
	padding-top: 150px
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slider-area .hero__caption { padding-top: 70px }
}
@media (max-width: 767px) {
	.slider-area .hero__caption { padding-top: 70px; padding-right: 20px }
}
@media (max-width: 575px) {
	.slider-area .hero__caption { padding-left: 20px }
}

/* Eyebrow: línea decorativa dorada + texto pequeño en mayúsculas */
.slider-area .hero__caption .hero-text1 {
	margin: 0 0 20px 0
}

.slider-area .hero__caption .hero-text1 span {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	position: static;
	color: #D9A429;
	font-family: 'Figtree', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	transform: none
}

.slider-area .hero__caption .hero-text1 span::before {
	content: "";
	width: 40px;
	height: 2px;
	flex: 0 0 auto;
	background: #D9A429;
}

@media (max-width: 767px) {
	.slider-area .hero__caption .hero-text1 span { font-size: 12px }
	.slider-area .hero__caption .hero-text1 span::before { width: 30px }
}

/* Titular: h1 (blanco) + stock-text h2 (dorado) forman un solo bloque de 2 líneas */
.slider-area .hero__caption h1,
.slider-area .hero__caption .stock-text h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 58px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: keep-all;
	white-space: normal;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4)
}

.slider-area .hero__caption h1 {
	color: #ffffff
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.slider-area .hero__caption h1,
	.slider-area .hero__caption .stock-text h2 { font-size: 48px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.slider-area .hero__caption h1,
	.slider-area .hero__caption .stock-text h2 { font-size: 38px }
}
@media (max-width: 767px) {
	.slider-area .hero__caption h1,
	.slider-area .hero__caption .stock-text h2 { font-size: 30px }
}

.slider-area .hero__caption .stock-text {
	margin: 0 0 20px 0
}

.slider-area .hero__caption .stock-text h2 {
	color: #D9A429
}

.slider-area .hero__caption .stock-text h2:first-child {
	display: none
}

@keyframes animate {
	0%, 100% {
		clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 69%, 100% 52%, 100% 100%, 0% 100%)
	}
	50% {
		clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%)
	}
}

.icon-title {
	margin-right: 10px;
	font-size: 0.5em;
	vertical-align: middle;
}

/* Botón "Nuestros Servicios" — fondo dorado, texto oscuro (Guía de marca, Tabla 2) */
.slider-area .hero__caption .hero-text2 span {
	display: block
}

.slider-area .hero__caption .hero-text2 a {
	position: relative;
	display: inline-block;
	background: #D9A429;
	color: #231B10;
	font-size: 19px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	padding: 11px 26px;
	border-radius: 50px;
	box-shadow: 0 4px 14px rgba(217, 164, 41, 0.5);
	box-sizing: border-box;
	max-width: 100%;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	transition: background .3s ease-out 0s, color .3s ease-out 0s, transform .3s ease-out 0s, box-shadow .3s ease-out 0s;
}

.slider-area .hero__caption .hero-text2 a:hover {
	background: #C6931F;
	color: #231B10;
	transform: scale(1.06);
	box-shadow: 0 6px 20px rgba(217, 164, 41, 0.7);
}

/* Botón secundario "Ver productos ↓": mismo alto/forma/tamaño de letra que el principal, en versión outline.
   Selector reforzado (.hero-text2 a.hero-link-secondary) para ganar en especificidad a ".hero-text2 a". */
.slider-area .hero__caption .hero-text2 a.hero-link-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #D9A429;
	font-family: "Montserrat", sans-serif;
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid #D9A429;
	border-radius: 50px;
	padding: 9px 24px;
	box-shadow: none;
	box-sizing: border-box;
	transition: background-color .3s ease-out 0s;
}

.slider-area .hero__caption .hero-text2 a.hero-link-secondary:hover {
	background-color: rgba(217, 164, 41, 0.15);
	color: #D9A429;
	transform: none;
	box-shadow: none;
}

/* Subtítulo del hero */
.slider-area .hero__caption .hero-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-family: 'Figtree', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	max-width: 520px;
	text-wrap: balance;
	margin: 0 0 36px 0;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5)
}

@media (max-width: 767px) {
	.slider-area .hero__caption .hero-subtitle {
		font-size: 16px;
		max-width: 100%
	}
}

.slider-area .hero__caption .hero-text2 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

@media (max-width: 575px) {
	.slider-area .hero__caption .hero-text2 {
		flex-direction: column;
		align-items: flex-start;
	}
}

.hero-overly {
	position: relative;
	z-index: 1
}

.hero-overly::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-image: -moz-linear-gradient(0deg, rgba(26, 20, 11, 0.80) 0%, rgba(26, 20, 11, 0.20) 100%);
	background-image: -webkit-linear-gradient(0deg, rgba(26, 20, 11, 0.80) 0%, rgba(26, 20, 11, 0.20) 100%);
	background-image: -ms-linear-gradient(0deg, rgba(26, 20, 11, 0.80) 0%, rgba(26, 20, 11, 0.20) 100%)
}

/* Overlay del hero principal (index): degradado izquierda→derecha para
   resaltar el texto y dejar la foto visible del lado derecho */
.slider-height.hero-overly::before {
	background-image: linear-gradient(to right, rgba(20, 15, 10, 0.92) 0%, rgba(20, 15, 10, 0.92) 45%, rgba(20, 15, 10, 0.45) 100%)
}

@media (max-width: 575px) {
	.slider-height.hero-overly::before {
		background-image: none;
		background-color: rgba(20, 15, 10, 0.75)
	}
}

.single-slider .container {
	position: relative;
	z-index: 2
}

/* ---- Services ---- */
/* Espacio antes de la franja "Conoce nuestro catálogo" */
.services-area1 {
	padding-top: 90px;
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	.services-area1 {
		padding-top: 60px;
		padding-bottom: 50px;
	}
}

/* Las 2 tarjetas empiezan a la misma altura y miden lo mismo */
.services-area1 .row {
	display: flex;
	flex-wrap: wrap;
}

.services-area1 .single-service-cap {
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	transition: transform .3s ease-out 0s, box-shadow .3s ease-out 0s;
}

.services-area1 .single-service-cap:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.services-area1 .single-service-cap .service-img {
	flex-shrink: 0;
	border-radius: 12px 12px 0 0;
	overflow: hidden
}

/* El bloque de texto crece para ocupar el espacio libre y empuja los botones abajo */
.services-area1 .single-service-cap .service-cap {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.services-area1 .single-service-cap .service-buttons {
	margin-top: auto;
}

.services-area1 .single-service-cap .service-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px 12px 0 0;
	transform: scale(1);
	-webkit-transition: all .5s ease-out 0s;
	-moz-transition: all .5s ease-out 0s;
	-ms-transition: all .5s ease-out 0s;
	-o-transition: all .5s ease-out 0s;
	transition: all .5s ease-out 0s
}

/* Foto vertical 3:4 (Corte a medida) — contenedor propio con esa proporción exacta,
   así "cover" no recorta nada porque la caja ya coincide con la imagen */
.services-area1 .single-service-cap .service-img img.img-contain {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.services-area1 .single-service-cap .service-cap {
	padding: 20px 30px 20px 30px;
	background: #fcfdff;
}

.services-area1 .single-service-cap .service-cap h4 {
	margin-bottom: 10px;
}

.services-area1 .single-service-cap .service-cap h4 a {
	color: #231B10;
	font-size: 20px;
}

@media (max-width: 575px) {
	.services-area1 .single-service-cap .service-cap h4 a { font-size: 20px }
}

.services-area1 .single-service-cap .service-cap h4 a:hover {
	color: #D9A429
}

/* Descripción corta debajo del título de cada servicio */
.services-area1 .single-service-cap .service-desc {
	color: rgba(26, 20, 11, 0.75);
	font-size: 16px;
	line-height: 1.5;
	margin: 0 0 20px 0;
}

/* Fila con el enlace "Ver detalles" y el botón "Cotizar este servicio" */
.services-area1 .single-service-cap .service-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
}

/* El botón "Cotizar" reutiliza .btn-cotizar-producto, pero sobre el fondo claro
   de esta tarjeta necesita un dorado más oscuro para leerse bien */
.services-area1 .single-service-cap .btn-cotizar-producto {
	background: transparent;
	color: #B8860B;
	border: 2px solid #B8860B;
	border-radius: 30px;
	padding: 8px 20px;
	font-size: 15px;
	font-weight: 600;
}

.services-area1 .single-service-cap .btn-cotizar-producto:hover {
	background: #D9A429;
	color: #231B10;
	border-color: #D9A429;
}

/* Franja inferior decorativa: antes era la imagen services_icon.png (naranja);
   ahora es una barra CSS en el dorado del sitio */
.services-area1 .single-service-cap .service-icon {
	height: 3px;
	background: #D9A429;
}

.services-area1 .single-service-cap .service-icon img {
	display: none;
}

.single-service-cap:hover .service-img img {
	transform: scale(1.05)
}

.single-service-cap:hover .more-btn i {
	color: #fff;
	background: #D9A429;
}

.more-btn {
	color: #231B10;
	font-size: 15px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	margin-bottom: 0;
}

.more-btn i {
	color: #231B10;
	background: transparent;
	width: 38px;
	height: 38px;
	display: inline-block;
	line-height: 38px;
	text-align: center;
	font-size: 15px;
	margin-left: 10px;
	-webkit-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	-ms-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s
}

.more-btn:hover { color: #231B10; text-decoration: none; }
.more-btn:hover i { color: #fff; background: #D9A429 }

/* ---- About / Support ---- */

/* "Nuestra Empresa" (#sobre) usa .container/.row/.col-lg-6 en vez del
   .support-wrapper de ancho fijo en px que hacía que la foto se saliera
   hasta el borde de la pantalla en escritorio. #mision-vision usa el mismo
   tratamiento más abajo. #valores ya no usa .support-wrapper en absoluto
   (se rediseñó como franja oscura de ancho completo, ver más abajo). */
#sobre .section-tittle {
	margin-bottom: 24px;
}

#sobre .right-content {
	position: relative;
}

#sobre .right-img img {
	width: 100%;
	border-radius: 12px;
	aspect-ratio: 1200 / 750;
	object-fit: cover;
}

/* Lista de diferenciadores */
#sobre .sobre-diferenciadores {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	margin: 0 0 30px 0;
}

#sobre .sobre-diferenciadores li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

#sobre .sobre-dif-icono {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(217, 164, 41, 0.15);
	color: #D9A429;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

#sobre .sobre-dif-texto {
	color: #231B10;
	font-size: 15px;
	line-height: 1.5;
}

#sobre .sobre-dif-texto strong {
	display: block;
	font-size: 16px;
	margin-bottom: 2px;
}

#sobre .sobre-dif-desc {
	display: block;
	color: rgba(26, 20, 11, 0.75);
}

/* Llamado a la acción */
#sobre .sobre-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
}

#sobre .sobre-link-secondary {
	color: #231B10;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .3s ease, border-color .3s ease;
}

#sobre .sobre-link-secondary:hover {
	color: #D9A429;
	border-color: #D9A429;
}

/* "Misión y Visión" (#mision-vision): mismo tratamiento que #sobre, también
   fuera de .support-wrapper para que la foto quede dentro del contenedor. */
#mision-vision {
	padding-top: 60px;
	padding-bottom: 80px;
}

@media (max-width: 767px) {
	#mision-vision {
		padding-top: 40px;
		padding-bottom: 50px;
	}
}

#mision-vision .section-tittle {
	margin-bottom: 24px;
}

#mision-vision .right-content {
	position: relative;
}

#mision-vision .right-img img {
	width: 100%;
	border-radius: 12px;
	aspect-ratio: 1200 / 750;
	object-fit: cover;
}

/* Tarjetas de Misión / Visión */
#mision-vision .mv-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	border-left: 4px solid #D9A429;
	padding: 24px;
}

#mision-vision .mv-card + .mv-card {
	margin-top: 16px;
}

#mision-vision .mv-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
}

#mision-vision .mv-card__header i {
	color: #D9A429;
	font-size: 22px;
	flex-shrink: 0;
}

#mision-vision .mv-card h4 {
	margin: 0;
	color: #231B10;
	font-size: 22px;
	font-weight: 700;
}

#mision-vision .mv-card p {
	margin: 0;
	color: rgba(26, 20, 11, 0.8);
	font-size: 17px;
	line-height: 1.6;
}

/* Sello "Equipo · Propio", mismo estilo que el de #sobre */
#mision-vision .support-img-cap {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: auto;
	top: auto;
	margin: 0;
	width: auto;
	max-width: calc(100% - 48px);
	background: #231B10;
	border: 1px solid #D9A429;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	padding: 18px 28px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#mision-vision .support-img-cap:hover {
	transform: translateY(-3px);
	border-color: #E1B654;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 12px rgba(217, 164, 41, 0.35);
}

#mision-vision .support-img-cap span {
	display: block;
	color: #D9A429;
	font-size: 36px;
	font-weight: 800;
	font-family: "Montserrat", sans-serif;
	line-height: 1.2;
	margin: 0;
}

#mision-vision .support-img-cap p {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 4px;
	margin: 0;
	line-height: 1;
}

.support-company-area .support-wrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper { display: block }
}

.support-company-area .support-wrapper .left-content {
	width: 54%;
	padding-left: 366px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.support-company-area .support-wrapper .left-content { width: 49% }
}
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
	.support-company-area .support-wrapper .left-content { padding-left: 30px; width: 49% }
}
@media only screen and (min-width: 1441px) and (max-width: 1800px) {
	.support-company-area .support-wrapper .left-content { padding-left: 200px; width: 49% }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper .left-content { width: 100%; padding-left: 120px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.support-company-area .support-wrapper .left-content { width: 100%; padding-left: 30px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.support-company-area .support-wrapper .left-content { width: 100%; padding-left: 30px }
}
@media (max-width: 575px) {
	.support-company-area .support-wrapper .left-content { width: 100%; padding-left: 30px }
}

.support-company-area .support-wrapper .left-content .support-caption {
	padding-right: 30px
}

@media (max-width: 575px) {
	.support-company-area .support-wrapper .left-content .support-caption { padding-right: 0px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.support-company-area .support-wrapper .left-content .support-caption { padding-right: 0px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper .left-content .support-caption { padding-right: 70px }
}

.support-company-area .support-wrapper .left-content .support-caption p {
	margin-bottom: 46px;
	font-size: 15px
}

.support-company-area .support-wrapper .left-content .support-caption p.pera-top {
	font-size: 17px;
	font-weight: 600;
	color: #231B10
}

.support-company-area .support-wrapper .right-content {
	width: 40%;
	position: relative
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
	.support-company-area .support-wrapper .right-content { width: 49% }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper .right-content { width: 100%; padding-top: 50px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.support-company-area .support-wrapper .right-content { width: 100%; padding-top: 50px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.support-company-area .support-wrapper .right-content { width: 100%; padding-top: 50px }
}
@media (max-width: 575px) {
	.support-company-area .support-wrapper .right-content { width: 100%; padding-top: 50px }
}

.support-company-area .support-wrapper .right-content .right-img img {
	width: 100%;
	border-radius: 10px
}

.support-company-area .support-wrapper .right-content .support-img-cap {
	position: absolute;
	bottom: 0px;
	background: #1A140B;
	padding: 41px 20px;
	border-radius: 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	border: 1px solid #D9A429;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease
}

.support-img-cap:hover {
	transform: translateY(-3px);
	border-color: #E1B654;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 12px rgba(217, 164, 41, 0.35)
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper .right-content .support-img-cap { padding: 19px 13px }
}
@media (max-width: 575px) {
	.support-company-area .support-wrapper .right-content .support-img-cap { padding: 25px 0px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.support-company-area .support-wrapper .right-content .support-img-cap { padding: 25px 13px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.support-company-area .support-wrapper .right-content .support-img-cap { padding: 25px 13px }
}

.support-company-area .support-wrapper .right-content .support-img-cap span {
	font-size: 42px;
	color: #D9A429;
	text-transform: uppercase;
	font-weight: 700;
	font-family: "Montserrat", sans-serif;
	line-height: 1.2
}

@media (max-width: 575px) {
	.support-company-area .support-wrapper .right-content .support-img-cap span { padding: 4px 28px; font-size: 27px }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.support-company-area .support-wrapper .right-content .support-img-cap span { font-size: 25px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.support-company-area .support-wrapper .right-content .support-img-cap span { font-size: 25px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.support-company-area .support-wrapper .right-content .support-img-cap span { font-size: 25px }
}

.support-company-area .support-wrapper .right-content .support-img-cap P {
	color: #fff;
	line-height: 1;
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5em
}


/* Sello "1997 · Desde" en la esquina inferior izquierda de la foto.
   Regla propia y autosuficiente: ya no depende de .support-wrapper
   (esa jerarquía se quitó de #sobre), así que se define todo aquí. */
#sobre .support-img-cap {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: auto;
	top: auto;
	margin: 0;
	width: auto;
	max-width: calc(100% - 48px);
	background: #231B10;
	border: 1px solid #D9A429;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	padding: 18px 28px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#sobre .support-img-cap:hover {
	transform: translateY(-3px);
	border-color: #E1B654;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 12px rgba(217, 164, 41, 0.35);
}

#sobre .support-img-cap span {
	display: block;
	color: #D9A429;
	font-size: 44px;
	font-weight: 800;
	font-family: "Montserrat", sans-serif;
	line-height: 1.2;
	margin: 0;
}

#sobre .support-img-cap p {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 4px;
	margin: 0;
	line-height: 1;
}

@media (max-width: 767px) {
	.support-company-area .right-content {
		position: relative !important;
		width: 100% !important;
	}
	.support-company-area .right-img {
		position: relative !important;
		overflow: hidden !important;
		width: 100% !important;
	}
	.support-company-area .right-img img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}
	.support-company-area .support-img-cap {
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		top: auto !important;
		margin: 0 !important;
		width: auto !important;
		max-width: 45% !important;
		box-sizing: border-box !important;
	}
}

/* ---- Experiencia: contadores integrados en la misma franja ---- */
.experiencia-counters {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 10px;
	padding-top: 40px;
	border-top: 1px solid rgba(217, 164, 41, 0.25);
}

.experiencia-counter {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 24px;
	border-left: 1px solid rgba(217, 164, 41, 0.4);
}

.experiencia-counter:first-child {
	border-left: none;
}

.experiencia-counter__numero {
	color: #D9A429;
	font-family: "Montserrat", sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
}

.experiencia-counter__icono {
	color: #D9A429;
	font-size: 40px;
	line-height: 1.1;
}

.experiencia-counter__etiqueta {
	color: rgba(255, 255, 255, 0.8);
	font-size: 15px;
	margin-top: 6px;
}

@media (max-width: 767px) {
	.experiencia-counters {
		flex-direction: column;
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
	.experiencia-counter {
		border-left: none;
		border-top: 1px solid rgba(217, 164, 41, 0.4);
		padding: 20px 0;
	}
	.experiencia-counter:first-child {
		border-top: none;
		padding-top: 0;
	}
}

/* ---- Projects ---- */
.project-area .project-caption .single-project,
.about-area .project-caption .single-project,
.contact-section .project-caption .single-project {
	position: relative;
	transition: transform .3s ease-out 0s, box-shadow .3s ease-out 0s;
}

.project-area .project-caption .single-project:hover,
.about-area .project-caption .single-project:hover,
.contact-section .project-caption .single-project:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.project-area .project-caption .single-project .project-img,
.about-area .project-caption .single-project .project-img,
.contact-section .project-caption .single-project .project-img {
	overflow: hidden;
	border-radius: 10px 10px 0px 0px;
}

.project-area .project-caption .single-project .project-img img,
.about-area .project-caption .single-project .project-img img,
.contact-section .project-caption .single-project .project-img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px 10px 0px 0px;
	transition: transform .3s ease-out 0s;
}

.project-area .project-caption .single-project:hover .project-img img,
.about-area .project-caption .single-project:hover .project-img img,
.contact-section .project-caption .single-project:hover .project-img img {
	transform: scale(1.05);
}

/* Imagen de producto vertical (ej. botes) que no llena bien el recorte 4:3 por cover */
.project-area .project-caption .single-project .project-img img.img-contain,
.about-area .project-caption .single-project .project-img img.img-contain,
.contact-section .project-caption .single-project .project-img img.img-contain {
	object-fit: contain;
	background: var(--crema);
}

/* Foto panorámica donde el sujeto principal no está centrado (ej. riostra a la izquierda) */
.project-area .project-caption .single-project .project-img img.img-pos-left,
.about-area .project-caption .single-project .project-img img.img-pos-left,
.contact-section .project-caption .single-project .project-img img.img-pos-left {
	object-fit: cover;
	object-position: 30% center;
}

.project-area .project-caption .single-project .project-cap,
.about-area .project-caption .single-project .project-cap,
.contact-section .project-caption .single-project .project-cap {
	padding: 20px 20px;
	background: var(--negro-cafe);
	-webkit-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	-ms-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s;
	position: relative;
	border-radius: 0px 0px 10px 10px;
}

.project-area .project-caption .single-project .project-cap h4,
.about-area .project-caption .single-project .project-cap h4,
.contact-section .project-caption .single-project .project-cap h4 {
	margin: 0;
	line-height: 1.2;
	font-size: 20px;
	font-weight: 500;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.project-area .project-caption .single-project .project-cap h4 i,
.about-area .project-caption .single-project .project-cap h4 i,
.contact-section .project-caption .single-project .project-cap h4 i {
	color: var(--crema);
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 3px;
}

.project-area .project-caption .single-project .project-cap h4 a,
.about-area .project-caption .single-project .project-cap h4 a,
.contact-section .project-caption .single-project .project-cap h4 a {
	color: var(--crema)
}

.project-area .project-caption .single-project .project-cap h4 a:hover,
.about-area .project-caption .single-project .project-cap h4 a:hover,
.contact-section .project-caption .single-project .project-cap h4 a:hover {
	color: var(--dorado)
}

/* Botón "Cotizar" de cada tarjeta de producto */
.project-area .project-caption .single-project .project-cap .btn-cotizar-producto,
.about-area .project-caption .single-project .project-cap .btn-cotizar-producto,
.contact-section .project-caption .single-project .project-cap .btn-cotizar-producto {
	display: inline-block;
	margin-top: 12px;
	background: transparent;
	color: var(--dorado);
	border: 1.5px solid var(--dorado);
	border-radius: 50px;
	padding: 6px 18px;
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .3s ease-out 0s, color .3s ease-out 0s, border-color .3s ease-out 0s;
}

/* Al pasar el mouse por la tarjeta, el botón "Cotizar" se pone dorado sólido */
.project-area .project-caption .single-project:hover .btn-cotizar-producto,
.about-area .project-caption .single-project:hover .btn-cotizar-producto,
.contact-section .project-caption .single-project:hover .btn-cotizar-producto {
	background: var(--dorado);
	color: var(--negro-cafe);
	border-color: var(--dorado);
}

.project-area .project-caption .single-project .project-cap .btn-cotizar-producto:hover,
.about-area .project-caption .single-project .project-cap .btn-cotizar-producto:hover,
.contact-section .project-caption .single-project .project-cap .btn-cotizar-producto:hover {
	background: var(--dorado);
	color: var(--negro-cafe);
	border-color: var(--dorado);
}

.project-area .project-caption .single-project .plus-btn,
.about-area .project-caption .single-project .plus-btn,
.contact-section .project-caption .single-project .plus-btn {
	position: absolute;
	right: 16px;
	top: -22px;
	display: inline-block;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	-ms-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.project-area .project-caption .single-project .plus-btn i,
.about-area .project-caption .single-project .plus-btn i,
.contact-section .project-caption .single-project .plus-btn i {
	color: #231B10;
	background: transparent;
	width: 38px;
	height: 38px;
	display: inline-block;
	line-height: 38px;
	text-align: center;
	font-size: 15px;
	margin-left: 10px;
	-webkit-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	-ms-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s
}

.project-area .project-caption .single-project:hover .plus-btn,
.about-area .project-caption .single-project:hover .plus-btn,
.contact-section .project-caption .single-project:hover .plus-btn {
	opacity: 1;
	visibility: visible
}

.project-area .project-caption .single-project:hover .plus-btn i,
.about-area .project-caption .single-project:hover .plus-btn i,
.contact-section .project-caption .single-project:hover .plus-btn i {
	color: #fff;
	background: #D9A429
}

.nav-item a { word-spacing: 90px; }

.project-area .properties__button,
.about-area .properties__button,
.contact-section .properties__button {
	float: right;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.project-area .properties__button,
	.about-area .properties__button,
	.contact-section .properties__button { float: left }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.project-area .properties__button,
	.about-area .properties__button,
	.contact-section .properties__button { float: left }
}
@media (max-width: 575px) {
	.project-area .properties__button,
	.about-area .properties__button,
	.contact-section .properties__button { float: left }
}

.project-area .nav-tabs .nav-link,
.about-area .nav-tabs .nav-link,
.contact-section .nav-tabs .nav-link {
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 50px 10px
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
	.project-area .nav-tabs .nav-link,
	.about-area .nav-tabs .nav-link,
	.contact-section .nav-tabs .nav-link { padding: 10px 10px }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.project-area .nav-tabs .nav-link,
	.about-area .nav-tabs .nav-link,
	.contact-section .nav-tabs .nav-link { padding: 10px 15px }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.project-area .nav-tabs .nav-link,
	.about-area .nav-tabs .nav-link,
	.contact-section .nav-tabs .nav-link { padding: 10px 15px }
}
@media (max-width: 575px) {
	.project-area .nav-tabs .nav-link,
	.about-area .nav-tabs .nav-link,
	.contact-section .nav-tabs .nav-link { padding: 10px 15px }
}

.project-area .nav-tabs .nav-item.show .nav-link,
.project-area .nav-tabs .nav-link.active,
.about-area .nav-tabs .nav-item.show .nav-link,
.about-area .nav-tabs .nav-link.active,
.contact-section .nav-tabs .nav-item.show .nav-link,
.contact-section .nav-tabs .nav-link.active {
	color: #D9A429;
	background: none
}

.project-area .nav-tabs .nav-item,
.about-area .nav-tabs .nav-item,
.contact-section .nav-tabs .nav-item {
	display: block;
	color: #231B10;
	font-weight: 500;
	text-transform: capitalize;
	font-size: 16px
}

.project-area .nav-tabs,
.about-area .nav-tabs,
.contact-section .nav-tabs {
	margin-bottom: 9px;
	padding-bottom: 0px;
	position: relative;
	border: 0;
	display: flex;
	justify-content: center
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.project-area .nav-tabs,
	.about-area .nav-tabs,
	.contact-section .nav-tabs { justify-content: start }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.project-area .nav-tabs,
	.about-area .nav-tabs,
	.contact-section .nav-tabs { justify-content: start }
}
@media (max-width: 575px) {
	.project-area .nav-tabs,
	.about-area .nav-tabs,
	.contact-section .nav-tabs { justify-content: start }
}

.tab-pane {
	-webkit-transition: all .6s ease-out 0s;
	-moz-transition: all .6s ease-out 0s;
	-ms-transition: all .6s ease-out 0s;
	-o-transition: all .6s ease-out 0s;
	transition: all .6s ease-out 0s
}

/* ---- Contact / Experience section ---- */
.contact-with-area {
	position: relative;
	z-index: 0;
	padding-top: 70px;
	padding-bottom: 70px;
	background-color: #231B10;
	background-image: url("../img/background/hero-bosque.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed
}

@media (max-width: 767px) {
	.contact-with-area { padding-top: 50px; padding-bottom: 50px }
}

/* En celulares/tablets el fondo fijo falla (iOS) o va a saltos: scroll normal */
@media (max-width: 991px), (hover: none) {
	.contact-with-area { background-attachment: scroll }
}

.contact-with-area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: linear-gradient(rgba(35, 27, 16, 0.88), rgba(42, 32, 20, 0.92));
}

.contact-with-area .contact-us-caption p {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 10px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45)
}

.t-bg { background: #1A140B }

.slick-initialized .slick-slide { outline: 0 }

@keyframes slide1 {
	0%, 100% { transform: translate(0, 0) }
	50% { transform: translate(5px, 0); -webkit-transform: translate(5px, 0) }
}

.hero-caption span {
	color: #fff;
	font-size: 16px;
	display: block;
	margin-bottom: 24px;
	font-weight: 600;
	padding-left: 95px;
	position: relative
}

.hero-caption span::before {
	position: absolute;
	content: "";
	width: 75px;
	height: 3px;
	background: #D9A429;
	left: 0;
	top: 52%;
	transform: translateY(-50%)
}

.hero-caption h2 {
	color: #fff;
	font-size: 50px;
	font-weight: 700
}

/* ---- Footer ---- */
.footer {
	position: relative;
	overflow-x: clip; /* el resplandor del logo no genera scroll lateral */
	/* Mismo fondo que "Nuestros Valores": foto del bosque con el overlay de marca encima */
	background-color: #231B10;
	background-image:
		linear-gradient(rgba(35, 27, 16, 0.88), rgba(42, 32, 20, 0.92)),
		url("../img/background/hero-bosque.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	border-top: 1px solid rgba(217, 164, 41, 0.35);
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.6;
}

/* En celulares/tablets el fondo fijo falla (iOS) o va a saltos: scroll normal (igual que Valores) */
@media (max-width: 991px), (hover: none) {
	.footer {
		background-attachment: scroll;
	}
}

.footer__grid {
	display: grid;
	grid-template-columns: 28fr 15fr 15fr 12fr 30fr; /* Marca 28% / Navegación 15% / Servicios 15% / Productos 12% / Contacto 30% */
	gap: 48px;
	align-items: start;
	padding: 50px 0 70px;
}

/* Títulos de columna */
.footer__titulo {
	position: relative;
	color: #D9A429;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	margin: 0 0 22px 0;
	padding-bottom: 12px;
}

.footer__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: #D9A429;
}

/* Enlaces y textos */
.footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color .25s ease;
}

.footer a:hover {
	color: #D9A429;
}

/* 1. Marca */
/* Logo del footer: arriba y alineado a la izquierda, con resplandor dorado detrás */
.footer .footer-logo {
	position: relative;
	isolation: isolate;
	display: block;
	width: fit-content;
	margin: 0 0 20px;
}

.footer .footer-logo::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 200%;
	height: 200%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 164, 41, 0.18) 0%, rgba(217, 164, 41, 0) 70%);
	pointer-events: none;
}

.footer .footer-logo img {
	display: block;
	height: 200px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	image-rendering: auto;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
}

.footer__texto {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	margin: 0 0 22px 0;
	max-width: 320px;
}

.footer__redes {
	display: flex;
	gap: 10px;
}

.footer__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(217, 164, 41, 0.35);
	color: #D9A429;
	font-size: 18px;
	transition: background .25s ease, color .25s ease;
}

.footer__redes a:hover {
	background: #D9A429;
	color: #1A140C;
}

/* 2 y 3. Listas de enlaces */
.footer__lista {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer__lista li {
	margin-bottom: 12px;
}

/* 4. Contacto */
.footer__datos {
	list-style: none;
	padding: 0;
	margin: 0 0 26px 0;
}

.footer__datos li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.footer__datos i {
	flex-shrink: 0;
	width: 18px;
	margin-top: 4px;
	color: #D9A429;
	font-size: 16px;
	text-align: center;
}

.footer__datos strong {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 600;
}

/* Cada número de teléfono baja de línea completo, nunca partido */
.footer__datos a {
	white-space: nowrap;
}

.footer__datos li span {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Teléfonos: uno debajo del otro, alineados con el texto (no con el ícono) */
.footer__telefonos a {
	display: block;
	white-space: nowrap;
}

.footer .footer__btn,
.footer .footer__btn:hover {
	color: #231B10;
	white-space: nowrap;
}

.footer__btn {
	font-size: 16px;
	padding: 12px 28px;
}

/* Barra inferior */
.footer__barra {
	border-top: 1px solid rgba(217, 164, 41, 0.25);
	padding: 20px 0;
	text-align: center;
}

.footer__barra p {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
}

/* Tablet: 2 columnas */
@media (max-width: 991px) {
	.footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		padding: 50px 0 60px;
	}
	.footer .footer-logo img {
		height: 200px;
	}
}

/* Celular: una columna centrada */
@media (max-width: 575px) {
	.footer__grid {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 50px 0 60px;
		text-align: center;
	}
	.footer .footer-logo {
		margin: 0 auto 20px;
	}
	.footer .footer-logo img {
		height: 170px;
	}
	.footer__texto {
		margin-left: auto;
		margin-right: auto;
	}
	.footer__redes {
		justify-content: center;
	}
	.footer__titulo::after {
		left: 50%;
		transform: translateX(-50%);
	}
	.footer__datos li {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align: center;
		margin-bottom: 18px;
	}
	.footer__datos i {
		margin-top: 0;
	}
}

/* ---- Contact form message ---- */
.form-message {
	padding: 12px 18px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 500;
}

.form-message.success {
	background: rgba(40, 167, 69, 0.12);
	color: #1e7e34;
	border: 1px solid rgba(40, 167, 69, 0.3);
}

.form-message.error {
	background: rgba(220, 53, 69, 0.12);
	color: #b02a37;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

/* ---- Map & Contact ---- */
#contacto {
	scroll-margin-top: 100px;
	font-family: "Poppins", sans-serif;
}

.contact-section {
	padding: 90px 0;
}

@media (max-width: 767px) {
	.contact-section {
		padding: 60px 0;
	}
}

/* Tarjeta de contacto (formulario + tarjeta, sustituye el mapa suelto de arriba) */
.contact-card {
	background: #231B10;
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.contact-card h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 20px 0;
}

.contact-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px 0;
}

.contact-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.5;
}

.contact-card__list li + li {
	margin-top: 16px;
}

.contact-card__list i {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	margin-top: 2px;
	color: #D9A429;
	font-size: 18px;
}

.contact-card__list a {
	color: #fff;
	text-decoration: none;
	transition: color .3s ease-out 0s;
}

.contact-card__list a:hover {
	color: #D9A429;
}

.contact-card__horario {
	display: block;
}

.contact-card__horario span {
	display: block;
}

.contact-card__map {
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 24px;
}

.contact-card__map iframe {
	display: block;
	width: 100%;
	height: 240px;
	border: 0;
}

.contact-card__btn {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: transparent;
	color: #D9A429;
	border: 1.5px solid #D9A429;
	border-radius: 50px;
	padding: 12px 24px;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .3s ease-out 0s, color .3s ease-out 0s;
}

.contact-card__btn:hover {
	background: #D9A429;
	color: #231B10;
}

.map-container {
	margin: 50px 0px 30px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem;
	box-sizing: border-box;
}

.map-container iframe {
	width: 100%;
	max-width: 750px;
	height: 450px;
	aspect-ratio: 4 / 3;
	border-radius: 5px;
}

.contact-info i {
	margin-top: 12px;
	font-size: 20px;
	color: #D9A429;
}

.contact-info strong {
	font-size: 17px;
	font-weight: 400;
}

.contact-info p { font-size: 15px; }

/* ---- Misc ---- */
.ftco-section {
	padding: 7em 0;
	position: relative;
}

@media (max-width: 767.98px) {
	.ftco-section { padding: 6em 0; }
}

.heading-section .subheading {
	font-size: 12px;
	display: block;
	margin-bottom: 10px;
	text-transform: uppercase;
	color: #D9A429;
	letter-spacing: 2px;
	font-weight: 600;
}

/* ==== Página de catálogo (productos.html) ==== */

/* Link activo del menú principal (solo lo usa productos.html) */
.main-header .main-menu ul li a.active {
	color: #fff;
	box-shadow: inset 0 -3px 0 0 #D9A429;
}

/* Banner superior. Foto real de madera como <img> (mejor accesibilidad/SEO
   que un fondo CSS, ya trae su alt) + degradado oscuro propio encima.
   padding-top igual al usado en .hero__caption del index para que el header
   transparente (position:absolute) no tape el título. */
.catalogo-banner {
	position: relative;
	min-height: 380px;
	padding-top: 230px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.catalogo-banner__img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catalogo-banner::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom, rgba(20, 15, 10, 0.65), rgba(20, 15, 10, 0.45));
}

.catalogo-banner .container {
	position: relative;
	z-index: 2;
}

.catalogo-banner__caption {
	text-align: center;
}

.catalogo-banner__caption h1 {
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 48px;
	margin: 0 0 12px 0;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.catalogo-banner__caption p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	max-width: 560px;
	margin: 0 auto;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.catalogo-banner {
		padding-top: 110px;
	}
}

@media (max-width: 767px) {
	.catalogo-banner {
		min-height: 260px;
		padding-top: 85px;
	}
	.catalogo-banner__caption h1 {
		font-size: 30px;
	}
	.catalogo-banner__caption p {
		font-size: 15px;
		padding: 0 10px;
	}
}

.catalogo-banner--servicio {
	min-height: 460px;
}

@media (max-width: 767px) {
	.catalogo-banner--servicio {
		min-height: 380px;
	}
}

/* Overlay de marca para los banners de servicio-cepillado.html y servicio-corte-a-medida.html */
.catalogo-banner--cepillado::before,
.catalogo-banner--corte::before {
	background-image: linear-gradient(rgba(35, 27, 16, 0.70), rgba(35, 27, 16, 0.80));
}

/* Reduce el padding-top heredado de .section-padding30 (130px) sin tocar esa
   clase compartida con otras secciones/páginas */
.catalogo-area.section-padding30 {
	padding-top: 60px;
}

@media (max-width: 767px) {
	.catalogo-area.section-padding30 {
		padding-top: 40px;
	}
}

/* Panel de filtros */
.catalogo-filtros {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.catalogo-filtros h3 {
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #231B10;
	margin: 0 0 16px 0;
}

.catalogo-buscador {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid #e2d9c8;
	border-radius: 8px;
	margin-bottom: 20px;
	font-size: 15px;
	font-family: "Montserrat", sans-serif;
	color: #231B10;
}

.catalogo-categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.chip-categoria {
	white-space: nowrap;
	background: #FAF3E6;
	border: 1px solid transparent;
	color: #231B10;
	font-size: 14px;
	font-weight: 600;
	font-family: "Montserrat", sans-serif;
	padding: 8px 16px;
	border-radius: 20px;
	cursor: pointer;
	text-align: center;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.chip-categoria:hover {
	border-color: #D9A429;
}

.chip-categoria.active {
	background: #D9A429;
	color: #231B10;
	border-color: #D9A429;
}

/* Barra superior de la cuadrícula */
.catalogo-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.catalogo-toolbar p {
	margin: 0;
	color: #231B10;
	font-size: 15px;
}

.catalogo-orden {
	padding: 8px 34px 8px 14px;
	border: 1px solid #e2d9c8;
	border-radius: 8px;
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	color: #231B10;
	background-color: #fff;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D9A429' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px 7px;
}

/* Etiqueta de categoría sobre el nombre del producto */
.badge-categoria {
	display: inline-block;
	align-self: flex-start;
	background: rgba(217, 164, 41, 0.15);
	color: #D9A429;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 8px;
}

/* Tarjetas de igual altura en la cuadrícula del catálogo */
#catalogo-grid .row > div {
	display: flex;
	flex-direction: column;
}

#catalogo-grid .single-project {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#catalogo-grid .project-cap {
	display: flex;
	flex-direction: column;
	flex: 1;
}

#catalogo-grid .project-cap h4 {
	min-height: 48px;
}

#catalogo-grid .btn-cotizar-producto {
	margin-top: 18px;
	align-self: flex-start;
}

/* ---- Placeholder de imagen provisional (producto sin foto todavía) ---- */
#catalogo-grid .producto-img-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #2A2014;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: transform 0.3s ease-out 0s;
}

#catalogo-grid .producto-img-placeholder i {
	color: #D9A429;
	font-size: 56px;
}

#catalogo-grid .producto-img-placeholder span {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

#catalogo-grid .single-project:hover .project-img .producto-img-placeholder {
	transform: scale(1.05);
}

#catalogo-grid .single-project.tiene-info-panel:hover .project-img .producto-img-placeholder {
	transform: scale(1.06);
	transition: transform 0.4s ease-out;
}

/* ---- Panel de información al pasar el mouse / tocar la foto ---- */
#catalogo-grid .single-project.tiene-info-panel .project-img {
	position: relative;
}

#catalogo-grid .single-project.tiene-info-panel:hover .project-img img {
	transform: scale(1.06);
	transition: transform 0.4s ease-out;
}

#catalogo-grid .producto-info-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: auto;
	max-height: 100%;
	background: linear-gradient(to top, rgba(35, 27, 16, 0.95), rgba(35, 27, 16, 0.75));
	border-top: 1px solid rgba(217, 164, 41, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
	pointer-events: none;
	z-index: 2;
}

#catalogo-grid .single-project.tiene-info-panel:hover .producto-info-panel,
#catalogo-grid .project-img.mostrar-info .producto-info-panel {
	transform: translateY(0);
	opacity: 1;
}

#catalogo-grid .producto-info-panel .info-linea {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.4;
}

#catalogo-grid .producto-info-panel .info-linea i {
	flex: 0 0 18px;
	margin-top: 3px;
	text-align: center;
	color: #D9A429;
}

#catalogo-grid .producto-info-panel .info-texto {
	flex: 1;
}

#catalogo-grid .producto-info-panel .info-texto strong {
	color: #D9A429;
	font-weight: 700;
	margin-right: 4px;
}

#catalogo-grid .producto-info-medida .valor {
	color: #fff;
}

#catalogo-grid .producto-info-calidad .valor {
	color: #fff;
}

#catalogo-grid .producto-info-uso .valor {
	color: rgba(255, 255, 255, 0.85);
}

#catalogo-grid .producto-info-toggle {
	display: none;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	color: #D9A429;
	font-size: 20px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (hover: none) {
	#catalogo-grid .producto-info-toggle {
		display: block;
	}
}

/* Mensaje de "sin resultados" */
.catalogo-sin-resultados {
	text-align: center;
	padding: 40px 20px;
	color: #231B10;
	font-size: 16px;
}

.catalogo-sin-resultados a {
	color: #D9A429;
	font-weight: 700;
	text-decoration: underline;
}

@media (max-width: 991px) {
	.catalogo-filtros {
		margin-bottom: 30px;
	}
}

/* ==== Páginas de detalle de servicio (servicio-*.html) ==== */

/* Ruta de migas dentro del banner */
.servicio-breadcrumb {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	margin-top: 40px;
	margin-bottom: 14px;
}

.servicio-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.servicio-breadcrumb a:hover {
	color: #D9A429;
}

.servicio-breadcrumb span {
	margin: 0 6px;
	color: rgba(255, 255, 255, 0.5);
}

.catalogo-banner__caption .btn-cotizar-submit {
	margin-top: 28px;
	margin-bottom: 60px;
}

/* "¿En qué consiste?": texto + foto, mismo criterio que #sobre en index.html */
.servicio-info {
	padding: 90px 0;
}

.servicio-img {
	width: 100%;
	border-radius: 12px;
	aspect-ratio: 1200 / 750;
	object-fit: cover;
}

.servicio-checklist {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	margin: 20px 0 28px 0;
}

.servicio-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #231B10;
	font-size: 16px;
}

.servicio-checklist i {
	flex-shrink: 0;
	color: #D9A429;
	font-size: 18px;
}

/* "Cómo funciona": pasos numerados */
.servicio-proceso {
	background: #FAF3E6;
	padding: 90px 0;
}

.servicio-pasos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 991px) {
	.servicio-pasos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.servicio-pasos {
		grid-template-columns: 1fr;
	}
}

.servicio-paso {
	background: #fff;
	border-left: 4px solid #D9A429;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	padding: 28px;
}

.servicio-paso__numero {
	display: block;
	color: #D9A429;
	font-family: "Montserrat", sans-serif;
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 12px;
}

.servicio-paso h4 {
	color: #231B10;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px 0;
}

.servicio-paso p {
	color: rgba(26, 20, 11, 0.75);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

/* "Qué trabajamos": grupos de chips reutilizando .catalogo-categorias/.chip-categoria */
.servicio-chips {
	padding: 90px 0;
}

.servicio-chips__grupo {
	margin-bottom: 30px;
}

.servicio-chips__grupo h4 {
	color: #231B10;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 14px 0;
}

.servicio-chips .chip-categoria {
	cursor: default;
}

.servicio-link-secondary {
	display: inline-block;
	margin-top: 10px;
	color: #231B10;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .3s ease, border-color .3s ease;
}

.servicio-link-secondary:hover {
	color: #D9A429;
	border-color: #D9A429;
}

/* Franja oscura de beneficios, mismo estilo que las tarjetas de "Nuestros Valores" */
.beneficios-oscuros {
	background-color: #231B10;
	padding: 90px 0 50px 0;
}

.beneficios-oscuros .section-tittle {
	margin-bottom: 50px;
}

.beneficios-oscuros .section-tittle .front-text h2 {
	color: #fff;
}

.beneficios-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 767px) {
	.beneficios-grid {
		grid-template-columns: 1fr;
	}
}

.beneficio-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(217, 164, 41, 0.25);
	border-radius: 12px;
	padding: 28px;
	transition: transform .3s ease-out 0s, border-color .3s ease-out 0s;
}

.beneficio-card:hover {
	border-color: #D9A429;
	transform: translateY(-4px);
}

.beneficio-card__icono {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(217, 164, 41, 0.12);
	color: #D9A429;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 18px;
}

.beneficio-card h4 {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 10px 0;
}

.beneficio-card p {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 767px) {
	.servicio-info,
	.servicio-proceso,
	.servicio-chips {
		padding: 60px 0;
	}
	.beneficios-oscuros {
		padding: 60px 0 30px 0;
	}
	.beneficios-oscuros .section-tittle {
		margin-bottom: 30px;
	}
}

/* Llamado final en dorado (usado en el CTA de cierre de las páginas de servicio) */
.catalogo-cta.cta-dorada {
	background: #D9A429;
}

.catalogo-cta.cta-dorada .catalogo-cta__texto h3,
.catalogo-cta.cta-dorada .catalogo-cta__texto p {
	color: #231B10;
}

.catalogo-cta.cta-dorada .btn-cotizar-submit {
	background: #231B10;
	color: #D9A429;
	box-shadow: none;
}

.catalogo-cta.cta-dorada .btn-cotizar-submit:hover {
	background: #1A140B;
	color: #fff;
}

.heading-section.heading-section-white .subheading { color: #D9A429; }