@font-face {
		font-family: 'htds';
		src: url("./fonts/DINPro-Bold.otf");
	}
	@font-face {
		font-family: 'htds-bold';
		src: url("./fonts/DINPro-Black.otf");
	}
	@font-face {
		font-family: 'htds-regular';
		src: url("./fonts/DINPro-Regular.otf");
	}
	@font-face {
		font-family: 'htds-light';
		src: url("./fonts/DINPro-Light.otf");
	}


	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}


.hero {
		height: auto;
    min-height: 100vh;
    width: 100%;
		color: white;
    font-family: htds-light; font-size: 16px;
    overflow: hidden;
	}

  .container-hero {		
    display: flex;
    flex-direction: column;
		align-items: left;
    padding-top: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    height: auto;
    min-height: 100vh;
    width: 30%;
    min-width: 300px;
    padding-left: 30px;
    padding-right: 15px;
    gap: 0;
  }
    h1{margin: 0; line-height: 1 ;font-family: htds-bold; font-size: 70px;}
    h3{margin: 0; line-height: 1 ;font-family: htds; font-size: 28px;}
    h2{margin: 0; line-height: 1 ;font-family: htds-regular; font-size: 50px;}
    p{font-family: htds-light; font-size: 16px;}

  Content {
    font-family: htds;
  }

  .linias {
    border-top: 5px solid #ffffff;
    border-bottom: 5px solid hsl(0, 0%, 100%);
    margin: 10px 0;
  }

.gallery {
  margin: 30px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 30px;
}

.container-img {
  width: 49.5%;
  height: 70vh;
  overflow: hidden;
  border-radius: 5px;
}

/* Clase específica para videos */
.container-img.video-container {
  width: 99%;
  height: 10%;
  order: -1; /* Esto hace que los videos vayan primero */
}

.container-img * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

@media (max-width: 576px) {
  h1{font-size: 50px;}
  h3{font-size: 20px;}
  .hero {font-size: 10px;}
  .container-img {width: 100%; height: auto; margin: 0;}
  .container-img.video-container {width: 100%; height: 40vh;} /* Mantener el 100% en móvil */
  img {width: 100%; height: 100%;}
  .gallery {flex-direction: column;}

  .linias {
    border-top: 3px solid #ffffff;
    border-bottom: 3px solid hsl(0, 0%, 100%);
  }
}