#wrapper {
	position: relative;
	height: 100vh;
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	#wrapper {
		margin-top: 2rem;
	}
}

.Portada {
	position: absolute;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(../imagenes/fotosempresa/ciclon.jpg) !important;
}

.Portada::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.479);
}

.Portada .owl-item div {
	width: 100%;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}

.texto-portada {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 90%;
}

#portada-subtitulo-metalurgica {
	margin: 0;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	font-size: clamp(1rem, 3.3rem, 7vw);
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	#portada-subtitulo-metalurgica {
		font-size: clamp(1rem, 3.3rem, 3.5vw);
	}
}

.texto-portada h1 {
	margin: 0;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
	color: var(--color-titulo);
	font-family: 'Oswald', sans-serif;
	font-size: clamp(1rem, 5.5rem, 10vw);
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	.texto-portada h1 {
		font-size: clamp(1rem, 5.5rem, 4vw);
	}
}


.texto-portada h1 span {
	color: var(--color-Subtitulo);
}

.texto-portada h2 {
	color: #fff;
	font-size: clamp(1rem, 2rem, 5vw);
	font-family: 'Titillium Web', sans-serif;
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	.texto-portada h2 {
		font-size: clamp(1rem, 2rem, 2vw);
	}
}

.texto-portada a {
	text-decoration: none;
	background: var(--color-principal);
	color: #fff;
	display: inline-block;
	padding: 12px 45px;
	margin: 15px;
	text-transform: uppercase;
	font-weight: 500;
	border: 2px solid #fff;
	transition: all 300ms ease-in-out;
	border-radius: 8px;
	font-family: 'Roboto', sans-serif;
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	.texto-portada a {
		font-size: clamp(0.5rem, 0.6rem, 2vw);
		padding: 8px 25px;
	}
}


@media screen and (max-width: 500px) {
	.texto-portada a {
		padding: 8px 25px;
		border-radius: 6px;
		font-size: 0.8rem;
	}
}

.texto-portada a:hover {
	color: #fff;
	transform: scale(1.04);
}

.texto-portada img {
	width: clamp(2rem, 10rem, 30vw);
	;

	margin-bottom: 1.5rem;
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	.texto-portada img {
		width: clamp(2rem, 8rem, 12vw);
		;
	}
}

@media screen and (max-width: 1980px) {

	.img-portada {
		background-image: none !important;
	}

}



#mostrarRedes {
	position: absolute;
	bottom: 10px;
	right: 15px;
	color: rgb(255, 255, 255);
	font-size: 1em;
	font-weight: 500;
	z-index: 10;
	border-radius: 5px;
	transition: all 0.3s ease;
}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	#wrapper {
		font-size: 0.6em;
	}
}

/* Botón con estilos originales */
.texto-esquina button {
	background-color: var(--color-principal);
	padding: 6px 12px;
	border-radius: 5px;
	border: none;

}

@media screen and (max-width: 1000px) and (max-height: 500px) {
	.texto-esquina button {
		padding: 4px 8px;
	}
}

.texto-esquina button:hover {
	background-color: var(--color-principal-hover);
}

/* Menú oculto */
.menu-redes {
	display: none;
	flex-direction: column;
	background-color: var(--color-principal);
	position: absolute;
	bottom: 45px;
	right: 0;
	border-radius: 6px;
	padding: 10px;
}

.menu-redes a {
	color: white;
	text-decoration: none;
	margin: 4px 0;
	font-size: 0.9em;
	font-family: 'Roboto', sans-serif;
}

.menu-redes a:hover {
	color: var(--color-principal-hover);
}


/* Centrado en móviles */
@media screen and (max-width: 600px) {
	#mostrarRedes {
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		padding: 2px 12px;
		font-size: 0.8rem;
		font-weight: 400;
		width: 70%;
	}

	.menu-redes {
		left: 50%;
		transform: translateX(-50%);
		right: auto;
	}
}