h1,h2,h3,h4,h5{
	font-family: "Oswald", sans-serif;
}
p, a, button{
	font-family: "Roboto", sans-serif;
	text-align:justify;
}
.top-bar {
    background-color: #ffd700; 
}
.owl-prev.disabled,
.owl-next.disabled {
  pointer-events: none;
  opacity: 0.5;
}
#servs .image-container img{ height:360px; }
.desc p{ text-align:justify !important; font-size:1.3rem; font-weight:normal;}
.container.container-menu{max-width:1215px !important;}
.dropdown-menu{
	min-width:100px;
	width:330px;
	border-radius:0;
}
#rentasDropdown ~ .dropdown-menu,
#rentasDropdown ~ * .dropdown-menu{ width:150px !important; }
#EFICIENCIA-AHORRO{ height:360px; }
.dropdown-item, .dropdown-toggle{white-space: normal;}

.breadcrumb a, .breadcrumb{ color:black; }
.navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 90%;
    background-color: #343a40;
    border: none;
    z-index: 1000; /* Asegura que se superponga correctamente */
}
.navbar-nav .dropdown-menu a{ color:white; text-transform: uppercase; font-size: .85rem;}
.dropdown-item:focus, .dropdown-item:hover{
	background: #ffd700;
	color: black;
}
.dropdown-toggle{ color:white; text-transform:uppercase; }
/* Mostrar menú al hacer hover */
.navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
}

/* Estilo para submenús anidados */
.dropdown-menu .dropdown {
    position: relative;
}

.dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
    transform: translateX(0); /* Por defecto, aparece a la derecha */
}

/* Ajustar posición si el submenú se sale de la pantalla */
.dropdown-menu .dropdown-menu.show-left {
    left: auto;
    right: 100%; /* Cambia el menú al lado izquierdo */
    transform: translateX(0);
}

/* Estilo para el sidebar */
.sidebar-categorias {
    font-family: Arial, sans-serif;
    width: 250px;
}

/* Estilo básico de las categorías */
.categoria-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.categoria-item a {
    text-decoration: none;
	text-transform: uppercase;
    color: #333;
    display: block;
}

/* Mostrar subcategorías solo cuando se pasa el mouse */
.categoria-item.tiene-hijos > a:after {
    content: ' ▼'; /* Flecha hacia abajo */
}

/* Submenú */
.categoria-item.tiene-hijos .sidebar-categorias {
    display: none; /* Ocultar los submenús por defecto */
    margin-left: 20px; /* Indentación */
}

/* Mostrar subcategorías cuando el mouse está sobre la categoría */
.categoria-item.tiene-hijos:hover .sidebar-categorias {
    display: block;
}

.categoria-item.tiene-hijos:hover > a:after {
    content: ' ▲'; /* Flecha hacia arriba */
}




section#contacto img { width: 60px; height: fit-content;}
.bullet{ min-height:110px; }
input::placeholder {
    font: .9rem sans-serif;
}
form input, form textarea, form select{ border-radius: 0 !important; padding-top: 0 !important; font-size: .7rem; }
.top-bar a {
    text-decoration: none;
    font-weight: bold;
	color: black;
	font-size:.9rem;
	letter-spacing: 1px;
}
#catalogo{ position: relative; top: -10rem; }
#servicios1 { margin:0; }
#servicios1 li{
	padding: 12px 0;
	font-weight: bold;
	font-size: 1.2rem;
}
#contacto-home input, #contacto-home select{ margin-bottom: 10px; } 
form select{ padding: 0;}
.bg-serv1{ background: url('../img/home-img-servmto-web.webp'); background-size: cover; }
.bg-serv2{ background: url('../img/home-img-serving-web.webp'); background-size: cover; }
#servicios li i.bi-check-circle{ color: #FFD400; font-weight:bold; }
#llama-ahora{ height:320px; background: url('../img/home-banner-llamanos.webp'); background-size: contain; }
#catalogo p{ min-height: 64px; font-size:1.2rem; }
#productos{ height: 250px; }
.btn-yellow{ background: #FFD400; color: black; font-size: .9rem; padding: 8px 20px; border-radius: 10px; font-weight: bold; } 
.btn-warning, .btn{ border-radius:10px !important; }
#nosotros p{ font-size:1.2rem; }
#descripcion, #ServiciosM, #ServiciosI p{ font-size:1.2rem; }
.txt-white{ color:white; }
.yellow-bg{	background: #ffd400; }
.gray-bg{ background:#f2f2f2; }
.black-bg{ background:#373C41; }
.float-btns{ position: fixed; right: 2rem; bottom: 3rem; z-index:999; }
.float-btns img{ width:60px; }
.text-yellow{ color: #ffd400;}
footer .text-yellow{ font-size:2.2rem; }
footer .dir{ font-size:.8rem; }
.subfooter a{ font-size: .7rem; letter-spacing: 1px; margin-right:5px; }
.bg-dark{color:#373c41}
.bg-Lgray{background-color: #F2F2F2}
.bg-cyan{background-color: #5D8994;}
#descripcion, #ServiciosM, #ServiciosI p{ font-size:1.2rem; }
#modelo #recuadroB {border: 3px solid white; border-radius:10px; padding: 20px; height: 185px;}
#modelo { 
    span{color: #ffd400; margin: 5px; }
    h1 {color: #ffd400;}
}
#historias-exito{background-color: #5D8994; }
#citas #recuadroN {border: 3px solid black; border-radius: 10px; padding: 20px; margin: 15px; flex: 1;height: auto;}
.top-bar a:hover {
    color: white;
}

.top-bar a:hover {
    color: white;
}

.top-bar img{ height:30px; }

.top-bar .fas, .top-bar .fab {
    margin-right: 15px; 
}

.top-bar span {
    margin-right: 15px;
	font-size:.9rem;
	letter-spacing: 1px;
	margin-top:4px;
}

#banner{
    height: 400px;
    position: relative;
    top: -100px; 
    transform: translateX(-50%);
    width: auto;
    left: 50%;
}

#Serviciosbanner {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden; 
}

#Serviciosbanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; 
}

#codigo-politica{ height:auto; }
.black-container{
    display: flex;
}

.black-container .col-12{
	border-radius:30px;
    background: #000000ab;
	height: 350px;
}

.black-container .col-12 p{ font-size:1.3rem; }
.margin-5{ margin-top: -2rem; }
#carrusel-prod{height:350px;}
#carrusel-prod .owl-nav{ display:flex;
    position: absolute;
    width: 110%;
	left: -20px;
    top: 10rem; 
	}
#carrusel-prod .owl-next{ margin-left:auto; }
#carrusel-prod .owl-nav button{     width: 40px;
    border: 1px solid gold;
    color: gold;
	outline:none;
    border-radius: 40px;
    font-size: 2rem; }
#carrusel-prod .owl-nav button span{ display:block; margin-top: -8px; text-align:center;  }

@media (max-width: 768px) {
	.bullet .col-10 h5{ text-align:left; }
	.dropdown-item{ padding:5px 0 0; }
	.sidebar{ height:auto !important; }
	#servs .image-container img{ height:auto; }
	.margin-5{ margin-top: auto; }
    .navbar-nav {
        width: 100%; 
    }
    
    .nav-link {
        margin-right: 20px;
    }
    
    .navbar-brand {
        margin-right: 30px;
    }

    .top-bar i, .top-bar a {
        margin-right: 10px;
        color: black;
    }

    .top-bar .social-media a {
        margin-left: 10px;
    }

    .top-bar .social-media {
        justify-content: center; 
    }
	
	.image-container {
        height: 250px;
    }
    
    .overlay-text h2 {
        font-size: 1.5rem; 
    }

    .overlay-text .btn-yellow {
        padding: 8px 15px; 
        font-size: 0.9rem;
    }
	
    #banner{
        top: 0; 
        width: 100%; 
        height: auto; 
        left: 0; 
    }
    #Serviciosbanner {
        height: 150px;
    }
	.row{ text-align:center !important; }
	
}

@media (max-width: 480px) {
	#valores ul{ display:block !important; } 
	#carrusel-prod{ height:auto; }
	#carrusel-prod .owl-nav {
		width: 100%;
		left: 0px;
	}
	#cat-info{ min-height:1200px; }
	#logoheader{ width: 150px !important; }
	#modelo #recuadroB {height: auto;}
	#EFICIENCIA-AHORRO{ height:730px; }
	.sidebar {
		width: 100% !important;
	}
    .image-container {
        height: auto; 
    }
	
	#recuadroB span{ font-size: .7rem; }
	#codigo-etica img{ width: 100%; height:auto !important; }
	#EFICIENCIA-AHORRO #banner {
        left: 162px;
    }
	#texto-modal h1{ font-size:1.2rem; }
}
	
	#productos {
		height: 290px;
	}


hr {
    border: none;       
    height: 1px;    
    background-color: white; 
    margin: 10px 0;  
}



#servicios {
    border-left: 2px solid black; 
    border-right: 2px solid black; 
    border-bottom: 2px solid black; 
    padding: 20px; 
    display: flex;
    flex-direction: column;     
    min-height:500px;
    height: auto; 
    margin-bottom: 20px; 
}

#icono {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	position: relative;
    border-left: 2px solid black; 
    border-right: 2px solid black; 
}

#icono .overlay-image {
    height: auto;
    width: 85px;  
    z-index: 2; 
	transform: translateY(-30px);
	margin-bottom: -30px;
}


#servicios .float-btns {
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
}


#servicios .row{
    display: flex;
    flex-wrap: wrap;
}


#ServiciosM .main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}


#ServiciosI .main-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}


.overlay-text {
    /*position: absolute;
    bottom: 11%;
    left: 7%;*/
	margin-top:15px;
    color: black;
    text-align: left; 
    max-width: 100%;
}
#productos .image-container {
    position: relative;
}
#productos .img {
    width: 100%;
    height: auto;
}

#productos-descripcion .btn-yellow{
	background: #FFD400;
	color: black;
	font-weight: bold;	
	border-radius: 0px; 
	text-decoration: underline;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 17px;
	padding-bottom: 17px;
	font-size: .7rem;
	} 

/*CAMBIOS 3 DE OCTUBRE*/

/*#poleas {
    border: 2px solid black; 
    padding: 20px; 
    flex-direction: column;     
    height: auto; 
    margin-bottom: 20px; 
}*/

.breadcrumb-item a {
    font-size: .9rem; 
    font-weight: bold;
}
.breadcrumb-item {
    font-size: .9rem;
    font-weight: bold;
}

#productos-muestra .prod-container {
    transition: all 0.3s ease;
    border: 1px solid black;
	padding: 20px; 
    flex-direction: column;     
    height: auto; 
    margin-bottom: 20px; 
}

#productos-muestra .prod-container:hover {
    border: 1px solid #FFD400; 
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

#productos-muestra p {
    font-size: 0.875rem;
    color: gray; 
}
#productos-muestra a {
    font-size: 0.875rem;
	font-weight: bold;	
}
#fichaTecnica .btn-yellow{
	background: #FFD400;
	color: black;
	font-weight: bold;	
	border-radius: 0px; 
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: .7rem;
} 

#fichaTecnica p{
	color: black;
	font-size: 1rem;
} 


#info-beneficios .p{ min-height: 64px; font-size:.2rem; }

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin: 0;
    list-style: none;
}

.breadcrumb-item a {
    color: #000;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}


.tabs {
    list-style: none;
    padding: 0;
	margin: 0;
    display: flex;
    align-items: center;
}

.tab-item {
    margin-right: 20px;
    font-size: 1.1rem;
    font-weight: normal;
    color: gray;
    cursor: pointer;
    position: relative;
	padding-bottom: 20px;
}

.tab-item.active {
    font-weight: bold;
    color: black;
}


.tab-item.active::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #FFD400; 
	z-index: 1;
}


.divider {
    border: 0;
    height: 1px;
    background-color: #000; 
    margin: 0;
	position: relative;
	z-index: 0;
}

.form-group {
    position: relative;
}

.custom-placeholder {
    position: absolute;
    top: 0px; 
    left: 0;  
    font-size: 12px;
    color: #bbb; 
    padding: 0 5px;
    pointer-events: none;
}

.form-control {
    padding-top: 20px; 
	border-bottom: 1px solid black; 
}

.form-control:focus + .custom-placeholder,
.form-control:not(:placeholder-shown) + .custom-placeholder {
    opacity: 0;
    visibility: hidden;
}

textarea.form-control:focus + .custom-placeholder,
textarea.form-control:not(:placeholder-shown) + .custom-placeholder {
    opacity: 0;
    visibility: hidden;
}

#cotizacion a {
    font-size: 1rem;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-weight: bold;	
	display: inline-block;
}

.col-6.d-flex {
    display: flex;
    flex-direction: column;
}

.form-group.flex-grow-1 {
    flex-grow: 1; 
}

textarea.flex-grow-1 {
    flex-grow: 1;
    min-height: 115px; 
}




/* INICIO CAMBIOS 9 DE OCTUBRE*/

#aplicaciones {
    padding: 20px; 
    display: flex;
    flex-direction: column;     
    min-height:290px;
    height: auto; 
    margin-bottom: 20px; 
}

#aplicaciones .float-btns {
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
}


#aplicaciones .row{
    display: flex;
    flex-wrap: wrap;
}

#aplicaciones .overlay-image-container {
    position: absolute;
	top:0px;
	left: 50%;
	transform: translate(-50%, -50%); 
	z-index: 2;
	width: 20%;

}

#aplicaciones .overlay-image {
    width: 100%;
    height: auto;
}

#aplicaciones p {
    margin: 10px;
}
#consigue-servicio{ background: url('../img/banner-llamada.webp'); background-size: cover; }
#consigue-servicio button{
	float: right;
}

#texto-modal{
    padding-left: 40px;
	padding-right: 40px;

}

@media (max-width: 992px) {
    .navbar-nav .dropdown-menu {
        position: static; /* Posición normal para evitar conflictos */
    }
    .dropdown-menu .dropdown-menu {
        position: static; /* Igual para submenús */
        transform: none;
    }
}