header,
nav,
body,
p{
  margin: 0;
}
*{
  box-sizing: border-box;
}
.page {
  display: flex;
  height: auto;
  width: auto;
  min-width: 1000px;
  padding-bottom: 60px;
  row-gap: 60px;
  flex-direction: column;
  align-items: center;
  background: #1d1d1d;
}
.menu-card{
  display: flex;
width:auto;
min-width: 1000px;
height: 60px;
padding: 20px 40px;
justify-content: space-between;
position:relative;
background: #1D1D1D;
}
.menu-wrapper{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 100px;
  list-style: none;
}
.menu-text{
  color: #FFF;
  text-align: center;
  font-family: Avenir;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.boton{
  display: flex;
  justify-content: center;
  width: 150px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 10px;
  background: url(img/oil.jpg) no-repeat;
  background-size: cover;
  background-position: 0px -100px;
}
.boton-text{
  display: flex;
width: 119px;
justify-content: center;
align-items: center;
gap: 21px;
color: #1D1D1D;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 900;
line-height: normal;
}

.header {
  display: flex;
  min-height: 450px;
  padding: 30px 0px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.background-header{
  min-width: 1000px;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.background-header video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video behaves like a background */
  z-index: 0;
  filter: saturate(0%) opacity(0.5);
}

.card-header{
  display: flex;
  padding: 60px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  z-index: 2;
}

.title {
  align-self: stretch;
  color: #fff;
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  font-family: Avenir;
  font-size: 60px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
}
.subtitle {
  align-self: stretch;
  color: #fff;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Avenir;
  font-size: 20px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.eslogan {
  display: flex;
  height: 130px;
  padding: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: url(img/eslogan.png) lightgray 50% / cover no-repeat;
}
.eslogan-subtext{
  width: 596px;
  color: #F5F5F5;
text-align: center;
font-family: Avenir;
font-size: 32px;
font-style: normal;
font-weight: 350;
line-height: normal;
}
.eslogan-text {
  width: 596px;
  color: #FFF;
  text-align: center;
  text-shadow: 0px 0px 10px #FAAD14;
  font-family: Avenir;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}
.card-nosotros {
  display: flex;
  height: 590px;
  padding-left: 80px;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}
.nosotros {
  display: flex;
  width: 417px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
}
.texto-nosotros {
align-self: stretch;
color: #EDEDED;
text-align: justify;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.foto-nosotros1{
  flex: 1 0 0;
  align-self: stretch;
  opacity: 0.8;
background: url(img/ImagenNosotros.jpeg) lightgray 50% / cover no-repeat;
mix-blend-mode: luminosity;
}
.foto-nosotros2{
  flex: 1 0 0;
  align-self: stretch;
  opacity: 0.8;
background: url(img/descargaaceite.jpeg) lightgray 50% / cover no-repeat;
mix-blend-mode: luminosity;
}
.foto-nosotros3{
  flex: 1 0 0;
  align-self: stretch;
  opacity: 0.8;
background: url(img/totes.jpeg) lightgray 50% / cover no-repeat;
mix-blend-mode: luminosity;
}
.productos {
  display: flex;
  height: 160px;
  max-height: 160px;
  padding: 63px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  z-index: 2;
  overflow: hidden; /* Important to contain the absolute video */
  position: relative;
}
.productos video{
  width: 100%;
  height:100%;
  object-fit: cover; /* Ensures the video behaves like a background */
  z-index: 0;
  position:absolute;
}
.productos-text{
  width: 840px;
  color: #FFF;
  text-align: center;
  text-shadow: 0px 0px 20px #FAAD14;
  font-family: Avenir;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
z-index: 1;
}
.disclaimer1{
  align-self: stretch;
  color: #FFF;
  text-align: center;
  font-family: Avenir;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.laboratorio{
  display: flex;
  height: 762px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}
.foto-lab {
  display: flex;
  height: 451px;
  width:auto;
  padding: 0px 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
}
.foto-lab::before {
  content: "";
  width: 100%;
  height: 451px; 
  position: absolute;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
              url(img/foto-lab-principal.jpeg) lightgray 50% / cover no-repeat;
  filter: saturate(0);
  z-index: 0;
}
.textolab{
  display: flex;
  height: 451px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 200px;
  flex-shrink: 0;
  align-self: stretch;
  z-index: 1;
}
.texto1lab{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  align-self: stretch;
}
.titulo-lab{
  color: #FC0;
text-align: right;
/* light suave */
text-shadow: 0px 0px 6px rgba(229, 200, 142, 0.40);
font-family: Avenir;
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.sub-lab{
  align-self: stretch; 
  color: #FFF;
text-align: right;
font-family: Avenir;
font-size: 15px;
font-style: normal;
font-weight: 350;
line-height: normal;
}
.texto2lab{
display: flex;
flex-direction: column;
align-items:flex-start;
gap:14px;
align-self: stretch;
}
.sub-lab2{
  align-self: stretch; 
  color: #FFF;
text-align: left;
font-family: Avenir;
font-size: 15px;
font-style: normal;
font-weight: 350;
line-height: normal;
}
.frame3{
  display: flex;
align-items: flex-start;
align-content: flex-start;
gap: 20px;
align-self: stretch;
flex-wrap: wrap;
color: #FAAD14;
text-align: right;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 800;
line-height: 0%;
}
.gridlab {
  display: flex;
  height: 271px;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  align-self: stretch;
}
.f1 {
  flex: 1 0 0;
  align-self: stretch;
  background: url(img/f1.jpeg) lightgray 50% / cover no-repeat;
  filter: saturate(0); 
}
.f2 {
  flex: 1 0 0;
  align-self: stretch;
  background: url(img/f2.jpeg) lightgray 50% / cover no-repeat;
  filter: saturate(0);
}
.f3 {
  flex: 1 0 0;
  align-self: stretch;
  background: url(img/f3.jpeg) lightgray 50% / cover no-repeat;
  filter: saturate(0);
}
.card-desengrasante{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  z-index: index 2;;
}
.desengrasante{
  width:auto;
  height: 212px;
  align-self: stretch;
  z-index: 2;
  overflow: hidden; /* Important to contain the absolute video */
  position: relative;
}
.foto-des{
  width: 483px;
height: 149.528px;
aspect-ratio: 483.00/149.53;
position: absolute;
right: 518px;
top: 17px;
  background: url(img/ECOGRASS.png) lightgray 50% / cover no-repeat;
}
.desengrasante video{
  width: 100%;
  height:100%;
  object-fit: cover; /* Ensures the video behaves like a background */
  z-index: 0;
  position:absolute;
}
.texto-desengrasante{
  display: flex;
  height: 212px;
  padding: 0px 250px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  z-index:1;
}
.titulo-des{
  align-self: stretch;
  color: #FC0;

/* light suave */
text-shadow: 0px 0px 6px rgba(229, 200, 142, 0.40);
font-family: Avenir;
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: normal;
}
.subtitulo-desengrasante{
  align-self: stretch;
  color: #EDEDED;
font-family: Avenir;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.p-desengrasante{
  align-self: stretch;
  color: #F5F5F5;
  text-align: right;
  font-family: Avenir;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: normal; 
}
.footer{
  display: flex;
  height: 191.25px;
  min-width: 1000px;
  justify-content: space-around;
  align-items: center;
  align-self: stretch;
background: url(img/textureasphalt.png) 50%/cover no-repeat;
}
.footer-card{
  display: flex;
width: 846px;
justify-content: space-between;
align-items: center;
}
.logofooter{
width: 292px;
height: 70px;
flex-shrink: 0;
aspect-ratio: 146/35;
mix-blend-mode: exclusion;
}
.text-frame-footer{
  display: flex;
  width: 404px;
  justify-content: center;
  align-items: center;
  gap: 80px;
  flex-shrink: 0;  
  background: rgba(29, 29, 29, 0.60);
}
.text-footer{
  color: #F5F5F5;
  text-align: center;
  font-family: Avenir;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}