*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
	font-family: pier, sans-serif;
}

.head {
	width: 100%;
	z-index: 98;
}

.barra{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 11dvh;
	margin-right: auto;
    background: rgba(217, 0, 0, 0.938);
	z-index: 98;
}

.logo img{
	width: 100px;
	height: 45px;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	margin-top: -11dvh;
	filter: brightness(100%);
	filter: drop-shadow(10px 10px 10px #4c0c0e);
	z-index: 98;
}

:root {
--bar-width: 30px;
--bar-height: 3px;
--hamburger-gap: 6px;
--foreground: #ffd500;
--background: white;
--hamburger-margin: 5px;
}

.hamburger-menu{
	margin-top: 9px;
	display: flex;
	flex-direction: column;
	gap: var(--hamburger-gap);
	width: max-content;
	position: fixed;
	top: var(--hamburger-margin);
	left: var(--hamburger-margin);
	z-index: 99;
	cursor: pointer;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input{
	content: "";
	width: var(--bar-width);
	height: var(--bar-height);
	background-color: var(--foreground);
	border-radius: 9999px;
}

.hamburger-menu input{
	appearance: none;
	padding: 0;
	margin: 0;
	outline: none;
	pointer-events: none;
}	

.hamburger-menu input:hover{
	background-color: var(--foreground);
}


.sidebar
{
    position: fixed;
    height: 120dvh;
    width: 0px;
    background: #272727c7;
    overflow: hidden;
    transition: 0.5s;
    z-index: 2;
	margin-top: -12.5dvh;
	opacity: 0.9;
}	

.sidebar:hover{
    width: 160px;
}

.sidebar ul{
    position: relative;
    height: 100dvh;
	margin-top: 15dvh;
}

.sidebar ul li{
    list-style: none;
}

.sidebar ul li:hover{
    background: rgba(252, 2, 2, 0.5);
}

.sidebar ul li a{
    position: relative;
    display: flex;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar ul li a .icon img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 40px;
    transition: 0.5s;
	margin-top: 1dvh;
}

.sidebar ul li a .text{
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 1em;
    color: rgb(251, 222, 3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.img-slider {
	position: relative;
	border: none;
	background: #01000b;
	width: 100%;
	height: auto;
}

.img-slider .slide{
	position: absolute;
	z-index: 1;
	width: 100%;
	clip-path: circle(0% at 0 50%);
	border: none;
	background: white;
}

.img-slider .slide.active{
	clip-path: circle(150% at 0 50%);
	transition: 2s;
	border: none;
}

.img-slider .slide img{
	z-index: 1;
	width: 100%;
	height: auto;
	object-fit: fill;
	border: none;
}

.img-slider .slide .info{
	position: absolute;
	top: 0;
	padding: 15px 30px;
	right: 60dvw;
}

.img-slider .slide .info .botn {
	position: absolute;
	top: 70dvh;
	left: 66dvw;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: #ffd500;
	color: #610000c7;
	padding: 16px 30px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
  }

  @media only screen and (max-width: 820px) {
	.img-slider .slide .info .botn {
		top: 100%;
		text-align: left;
		padding: 2px 10px;
		font-size: small;
	}
  }

  .img-slider .slide .info .botn:hover {
	background-color: black;
	color: white;
  }

  .img-slider .slide .info p{
	opacity: 1;
	color: rgb(43, 43, 40);
	padding: 10px 1px;
	left: 50dvw;
	top: 26dvh;
	position: relative;
	font-weight: bold;
	text-align: justify;
  }

  @media only screen and (max-width: 820px) {
	.img-slider .slide .info p {
		top: 0dvh;
		padding: 1px 0px;
		left: 42dvw;
		width: 120%;
	}
  }


  .img-slider .navigation{
	z-index: 2;
	position: absolute;
	display: flex;
	margin-top: 80dvh;
	left: 50%;
	transform: translateX(-50%);
  }

  @media only screen and (max-width: 820px) {
	.img-slider .navigation {
		margin-top: 35%;
	}
  }

  .img-slider .navigation .btn{
	background: #272727c7;
	width: 12px;
	height: 12px;
	margin: 10px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 2px  rgba(255, 255, 255, 0.7);
  }

  .img-slider .navigation .btn.active{
	background-color: #ffd500;
  }

  .logos {
	overflow: hidden;
	padding: 60px 0;
	background: white;
	white-space: nowrap;
	position: relative;
	margin-top: 100dvh;
  }

  @media only screen and (max-width: 820px) {
	.logos {
		margin-top: 35%;
	}
  }
  
  .logos:before,
  .logos:after {
	position: absolute;
	top: 200px;
	width: 250px;
	height: 100%;
	content: "";
	z-index: 2;
  }
  
  @keyframes slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }

  .logos:before {
	left: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
	right: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos:hover .logos-slide2 {
	animation-play-state: active;
  }
  
  
  .logos-slide2 {
	display: inline-block;
	animation: 35s slide infinite linear;
  }
  
  .logos-slide2 img {
	height: 50px;
	margin: 0 40px;
  }


.containercards{
    max-width: 1200px;
    margin: auto;
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	
}

@media only screen and (max-width: 820px) {
	.containercards {
		display: none;
	}
  }

.card{
    width: 250px;
    margin: 40px;
    transition: all 300ms;
		
}

.card:hover{
    width: 350px;
    height: 400px;
	background: #272727c7;
}

.containercard .cover{
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
	background: #272727c7;
}

.cover{
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
	
}

.cover img{
    width: 170px;
    display: block;
    margin: auto;
    position: relative;
    top: 40px;
    z-index: 1;
    filter: drop-shadow(5px 5px 4px #4c0c0e);
}

.card:hover .cover img{
    top: 0px;
}

.card .imgback{
    width: 100%;
    height: 300px;
    position: absolute;
    bottom: -80px;
    left: 0;   
    background-size: cover;
    border-radius: 20px;
	object-fit: cover;
}

.card:nth-of-type(1) .imgback{
    background-image: url(images/fondo2.jpg);
}

.card:nth-of-type(2) .imgback{
    background-image: url(images/fondo\ slider.jpg);
}

.card:nth-of-type(3) .imgback{
    background-image: url(images/fondo2.jpg);
}

.card .description{
    background: white;
    margin-top: -10px;
    padding: 20px;
    border-radius: 0px 0px 20px 20px;
}

.card .description h2{
    font-size: 20px;
    font-weight: 600;
    color: #ec3237;
    margin-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
}

.card .description input{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #272727c7;
    border-radius: 5px;
    background: #272727c7;
    color: #ffd500;
    cursor: pointer;
    transition: all 300ms;
}

.card .description input:hover{
    background: #020202;
    color: #ffd500;
}

/*--Footer*/

footer{
	width: 100%;
	position: relative;
	left: 0;
	background: #d70808d4;
  }

  @media only screen and (max-width: 540px) {
	footer {
	font-size: 10px;
	}
  }

  footer .content{
	max-width: 100%;
	margin: auto;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
  }
  footer .content p,a{
	color: #ffd500;
	font-weight: bold;
  }

  @media only screen and (max-width: 540px) {
	footer .content p,a{
	font-size: 10px;
	}
  }

  footer .content .box{
	width: 33%;
	transition: all 0.4s ease;
  }

  footer .content .topic{
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 16px;
  }

  footer .content p{
	text-align: justify;
  }
  footer .content .lower .topic{
	margin: 24px 0 5px 0;
  }
  footer .content .lower .phone p:hover{
	color: #ffffff;
	font-size: 20px;
  }

  footer .content .lower .email p:hover{
	color: #ffffff;
	font-size: 20px;
  }

  footer .content .lower i{
	padding-right: 16px;
  }
  footer .content .middle{
	padding-left: 80px;
  }
  footer .content .middle a{
	line-height: 32px;
	text-decoration: none;
  }


  footer .content .middle a:hover{
	color: #dad5d5;
	font-size: 18px;
	text-decoration: none;
  }

  @media only screen and (min-width: 900px) {
	footer .content .middle a{
		line-height: -2dvh;
	  
	}
  }

  @media only screen and (min-width: 900px) {
	footer .content .middle a:hover{
	display: none;
	text-decoration: none;
	padding-top: -10dvh;
	}
  }



  footer .content .media-icons a{
	font-size: 16px;
	height: 45px;
	width: 45px;
	display: inline-block;
	text-align: center;
	line-height: 43px;
	border-radius: 5px;
	border: 2px solid #222222;
	margin: 30px 5px 0 0;
	transition: all 0.3s ease;
  }
  .content .media-icons a:hover{
	border-color: #eb2f06;
  }
  footer .bottom{
	width: 30%;
	text-align: right;
	color: #d9d9d9;
	padding: 0 40px 5px 0;
	bottom: 0%;
  }
  footer .bottom a{
	color: #eb2f06;
  }
  footer a{
	transition: all 0.3s ease;
  }
  footer a:hover{
	color: #eb2f06;
  }
  
  .map{
	width: 55dvw;
	transform: scale(0.38);
	margin-top: -75dvh;
	margin-left: 20dvw;
	position: absolute;
  }
  
  @media only screen and (max-width: 900px) {
	.map {
	display: none;
	}
  }


  .container-boton{
    position: fixed;
    z-index: 999;
    border-radius: 20%;
    bottom: 20px;
    right: 0px;
    padding: 20px;
    transition: ease 0.3s;
    animation: efecto 1.2s infinite;
	transform: scale(0.4);
}

@media only screen and (max-width: 820px) {
	.container-boton {
		position: fixed;
		margin-bottom: 100dvh;
    	right: 5dvw;
		transition: ease 0.3s;
    	animation: none;
	}
  }

.container-boton:hover{
    transform: scale(0.6);
    transition: 0.3s;
}

.boton{
    width: 80px;
	height: 60px;
    transition: ease 1s;
}

@keyframes efecto{
    0%{
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85);
    }
    100%{
        box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
    }
}
 /*--Equipos*/
  .ventas{
	width: 100%;
	position: relative;
  }
  
  .ventas img{
	width: 100dvw;
	height: auto;
	margin-top: 1dvh;
	display: flex;
	z-index: 1;
  }

  .ventas .ventas2{
	position: absolute;
	top: 0;
	margin-left: -7dvw;
	width: 40dvw;
	z-index: 1;
}

  .ventas .ventas2 h3{
	opacity: 0.9;
	color: rgb(255, 236, 31);
	padding: 18px 40px;
	left: 35dvw;
	top: 4dvh;
	font-size: 1.2rem;
	border-radius: 4px;
	position: relative;
	z-index: 1;
	text-align: center;
  }

  @media only screen and (max-width: 900px) {
	.ventas .ventas2 h3 {
		color: #ffd500;
		font-size: 0.8rem;
		opacity: 1;
		padding: 0px 10px;
	}
  }

  @media only screen and (max-width: 540px) {
	.ventas .ventas2 h3 {
		font-size: 0.5rem;
		margin-top: -4dvh;
	}
  }

  .wrapper {
	width: 95%;
	margin-top: 2dvh;
	margin-left: 2.5%;
	z-index: 3;
  }
  @media only screen and (max-width: 540px) {
	.wrapper {
		font-size: 0.5rem;
		margin-top: 0dvh;
	}
  }

  #search-container {
	margin: 1em 0;
	border-radius: 3px;
  }
  #search-container input {
	background-color: transparent;
	width: 40%;
	border-bottom: 2px solid #000000;
	padding: 1em 0.3em;
	border-radius: 3px;
  }
  #search-container input:focus {
	border-bottom-color: #0f0f0f;
  }

  #search-container button {
	padding: 1em 2em;
	margin-left: 1em;
	background-color: #ff0000;
	color: #ffd500;
	border-radius: 5px;
	margin-top: 0.5em;
  }

  #search-container button:hover{
	background: black;
	cursor: pointer;
	box-shadow: 0 0 25px var(--clr);
  }

  #search-container button:before{
	content: '';
	position: absolute;
  }

  .button-value {
	border: 2px solid #e30404c7;
	padding: 1em 2.2em;
	border-radius: 3em;
	background-color: transparent;
	color: #000000;
	cursor: pointer;
  }
  .active {
	background-color: #000000;
	color: #ffd500;
	
  }
  #products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(25dvw, 55dvh));
	grid-column-gap: 1.5em;
	grid-row-gap: -10dvh;
	align-items: center;
  	justify-content: center;
	padding: 2em 0;
  }

  @media only screen and (max-width: 540px) {
	#products {
		grid-template-columns: repeat(auto-fill, minmax(15dvw, 30dvh));
	}
  }

  @media only screen and (max-width: 450px) {
	#products {
		grid-template-columns: repeat(auto-fill, minmax(10dvw, 30dvh));
		margin-left: -15dvw;
	}
  }

  /*catalogo*/
  .card {
	background-color: rgba(210, 210, 210, 0.6);
	max-width: 18em;
	margin-top: 0.1em;
	padding: 1em;
	border-radius:15px;
	box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08);
	height: auto;
	z-index: 3;
  }


  .card:hover{
	border: 2px solid #cfb825;
	height: auto;
	background-color: #fffdfd;
  }

  
  .image-container {
	text-align: center;
  }
  img {
	max-width: 100%;
	object-fit: contain;
	height: 15em;
  }
  .container {
	padding-top: 1em;
	color: #000000;
  }
  .container h5 {
	font-weight: 600;
	width: 120%;
	margin-top: -1.5dvh;
	color: rgb(105, 2, 2);
  }

  .container h6 {
	z-index: 0;
	opacity: 0.7;
	margin-top: 2dvh;
  }

  .container h6:hover {
	z-index: 1;
	opacity: 1;
	color: #342100;
	margin-top: 0dvh;
  }
  
  .hide {
	display: none;
  }

  @media screen and (max-width: 900px) {
	img {
	  max-width: 100%;
	  object-fit: contain;
	  height: 10em;
	}
	.card {
	  max-width: 10em;
	  margin-top: 3em;
	  height: auto;
	}
	#products {
	  grid-column-gap: 1em;
	}
  }
  

/*comentarios*/
 
  .card__container{
	display: grid;
	gap: 1.5rem;
	text-align: justify;
  }

.bd-container{
	max-width: 968px;
	width: calc(100% - 3rem);
	margin-left: 1rem;
	margin-right: 1rem;
  }

 /*========== CARD GLASS ==========*/
 .card2{
	margin-top: 14dvh;
	position: relative;
	overflow: hidden;
	padding: 3rem 0;
	background: url(/images/normatividad.jpg);
	height: 100dvh;
  }

  @media only screen and (max-width: 820px) {
	.card2 {
		margin-top: 5%;
		z-index: 99;
		width: 100%;
		height: auto;
		background: rgba(210, 210, 210, 0.6);
	}
  }

  .card2 h1{
	font-size: 2.5rem;
	margin-top: 0dvh;
	margin-left: 24dvw;
	position: absolute;
	color: #810408;
  }
  @media only screen and (max-width: 820px) {
	.card2 h1 {
		margin-top: 2dvh;
		z-index: 99;
		text-align: center;
		object-position: center;
		font-size: 22px;
	}
  }

  @media only screen and (max-width: 500px) {
	.card2 h1 {
		margin-top: -2dvh;
		z-index: 99;
		margin-left: 10%;
		font-size: 18px;
	}
  }
  
  .card__container{
	display: grid;
	gap: 1.5rem;
  }

  @media only screen and (max-width: 990px) {
	.card__container {
		margin-top: 15dvh;
	}
  }

  @media only screen and (max-width: 820px) {
	.card__container {
		margin-top: 10dvh;
	}
  }

  @media only screen and (max-width: 200px) {
	.card__container {
		margin-top: 10%;
		z-index: 99;
		text-align: center;
		margin-left: 10%;
		font-size: small;
	}
  }

.card__glass{
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 2.5rem;
	background: linear-gradient(130deg,
				rgba(210, 210, 210, 0.6),
				rgba(251,251,254,.2));
	box-shadow: inset 2px 2px 1px rgba(251,251,254,.3)
				inset -2px -2px 1px rgba(251,251,254,.2);
	border-radius: 1.5rem;
	backdrop-filter: blur(10px);
  }

.card__img{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid #F4F4FB;
	margin-bottom: 1rem;
  }
  
  .card__data{
	margin-bottom: 1.5rem;
  }
  
  .card__title{
	font-size: 24px;
	color: var(--title-color);
	font-weight: 600;
	margin-bottom: .25rem;
  }

  @media only screen and (max-width: 820px) {
	.card__title {
		font-size: medium;
	}
  }
  
  .card__profession{
	font-size: medium;
	color: #020202;
	font-weight: 550;
	text-align: right;
  }

  @media only screen and (max-width: 820px) {
	.card__profession {
		margin-top: 10%;
		z-index: 99;
		text-align: center;
		margin-left: 10%;
		font-size: small;
	}
  }

.card__button{
	display: inline-block;
	background: linear-gradient(130deg,
				rgba(251,251,254,.9),
				rgba(251,251,254,.2));
	padding: .75rem 1.5rem;
	border-radius: .5rem;
	color: var(--title-color);
	font-weight: 600;
	transition: .4s;
	cursor: auto;
	text-decoration: none;
  }
  
  .card__button:hover{
	background: linear-gradient(130deg,
				rgba(251,251,254,1),
				rgba(251,251,254,.4));
  }
  
.card__circle{
	position: absolute;
	width: 250px;
	height: 250px;
	background: linear-gradient(130deg,
				rgba(119, 119, 119, 0.8),
				rgba(255,255,255,.2));
	border-radius: 50%;
  }
  
  .card__circle1{
	top: 20%;
	left: -20%;
  }
  
  .card__circle2{
	bottom: -5%;
	right: -25%;
	background: linear-gradient(130deg,
				rgba(186, 186, 186, 0.8),
				rgba(184, 184, 184, 0.2));
  }

 /*========== MEDIA QUERIES ==========*/
 @media screen and (min-width: 568px){
	.card__container{
	  grid-template-columns: repeat(2, 1fr);
	}
  }
  
  @media screen and (min-width: 768px){
	.bd-container{
	  margin-left: auto;
	  margin-right: auto;
	}
  
	.card2{
	  padding: 0;
	}
  
	.card__container{
	  height: 100vh;
	  grid-template-columns: repeat(3, 1fr);
	  align-content: center;
	}
  
	.card__circle1{
	  left: 5%;
	  top: 12%;
	}
  
	.card__circle2{
	  right: 8%;
	  bottom: 15%;
	}
  }

  


  /*--Normatividad*/
  .normafondo{
	width: 100%;
	height: 93dvh;
	background: url(/images/normatividad2.png);
	background-color: #d1caca93;
	margin-top: 2.4dvh;
  }

  .normafondo img{
	width: 40dvw;
	height: 25dvh;
	margin-top: 1dvh;
  }

  .normafondo p{
	width: 40dvw;
	height: 20dvh;
	margin-left: 2dvw;
	color: #424137;
	justify-content: center;
	padding: 2px 0px;
	font-weight: bold;
	text-align: justify;
	font-size: 18px;
  }

  @media only screen and (max-width: 740px) {
	.normafondo p {
		font-size: 10px;
		text-align: left;
	}
  }

  .normafondo p:hover{
	color: #bd0202;
  }

  .normafondo .normaema img{
	width: 40dvw;
	height: 25dvh;
	margin-top: -45dvh;
	float: right;
  }

  .normafondo .normaema p{
	margin-left: 2dvw;
	color: #424137;
	justify-content: center;
	padding: 2px 0px;
	font-weight: bold;
	float: right;
	margin-top: -20dvh;
  }

  .normafondo .normaema p:hover{
	color: #bd0202;
  }