@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap');

html {
	scroll-behavior: smooth;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}

body {
	background: #795115;
	font-family: 'Roboto', sans-serif;
	
}

a {
	text-decoration: none;
}

.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: calc(100vh - 80px);
	font-family: 'Finger paint', sans-serif;
	background:  url('../imag/Portada.jpg') center/cover no-repeat;
}

.hero h1 {
	font-size: 80px;
}
.hero h2 {
	font-size: 40px;
	color:#000000;
}
.hero h3 {
		font-size: 22px;
		color:#000000	
}

.hero p {
	font-size: 30px;
	text-transform: uppercase;
	color:#e5bca2;
}

nav {
	background: #0b6720;
	height:80px;
	box-shadow: rgba(149,157,165, 0.3) 0px 8px 24px;
	display:flex;
	position: sticky;
	top: 0;
	overflow: hidden;
	z-index:1;
}

nav a{
	flex: 1;
	height: 100%;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #ebeaea;
	transition: .2s ease-in-out all;
	font-weight: 500;	
}
nav a:hover{
	background: #104304;
}

nav .indicador {
	width: 0px;
	height: 8px;
	background: #83aaf8;
	position: absolute;
	bottom: 0;
	transition: .3s ease-out all;
	z-index: 10;
	/*transform: translate(-500px);*/
}

.seccion {
	min-height: 90vh;
	max-width: 900px;
	width: 100%;
	margin: auto;
	
	padding-top: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

}

.seccion .card {
	
	background: #ffffff;
	height: 100%;
	padding: 40px;
	border-radius: 10px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	width: 100%; /* Ajusta el ancho de .card según tus necesidades */
  margin: 0 auto; /* Centra .card horizontalmente */
  box-sizing: border-box; /* Asegura que el relleno y el borde se incluyan en el ancho total */
}
.seccion .card p {
    line-height: 25px;
    margin-bottom: 20px;
    color: #494949;
    font-size: 20px;
    text-align: left; /* Alinea el texto a la izquierda */
   
	width: 100%; /* Establece el ancho al 100% para que esté en una sola columna */
}	


.seccion h1 {
	font-size: 40px;
	margin-bottom: 20px;
}

.seccion p {
	line-height: 25px;
	margin-bottom: 20px;
	color: #494949;
	font-size: 20px;
	
}

.seccion img {
	
	width:85%;
	/*vertical-align: top; La propiedad se omite por display: block*/
	margin-bottom: 20px;
	
	display: block;  /*Asegura que la imagen sea un elemento de bloque */
  	margin-left: auto; /* Establece el margen izquierdo en automático */
  	margin-right: auto; /* Establece el margen derecho en automático */
}
.seccion2 img {
    width: 15%; /* Ajusta el ancho según tus necesidades */
    margin: 30px; /* Ajusta el margen entre las imágenes según tus necesidades */
    float: left; /* Hace que las imágenes se coloquen en dos columnas */
	
}
.seccion3 img {
    width: 50%; /* Ajusta el ancho según tus necesidades */
    margin: 100px; /* Ajusta el margen entre las imágenes según tus necesidades */
    float: left; /* Hace que las imágenes se coloquen en dos columnas */
	
}

/* Limpiar el float para evitar problemas de diseño en elementos siguientes */
.seccion2::after {
    content: "";
    display: table;
    clear: both;
}


.auto-style3 {
    background: #58595B;
    height: 150px;
    margin: 10px;
    padding: 10px; /* Añadí 'px' para especificar la unidad de medida */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.auto-style6 a {
		color: #070707;
		transition: color 0.3s ease; /* Agrega una transición suave al cambio de color */
	}
	
	.auto-style6 {
		color: #FFFFFF;
		font-size: 16px;
	}
			
	.galeria {
		display: flex;
		flex-wrap: wrap;
		margin: 10px 50px;
		
	}
	.galeria img {
		width: 120px;
		margin-right: 10px;
		margin-bottom: 10px;
		padding: 5px;
		filter: grayscale(100%);
		transition: 600ms;
		
	}
	
	.galeria img:hover {
		filter: grayscale(0);
		transform: scale(1.2);
		
	}
	
@media screen and (max-width: 800px) {
	nav a{
		font-size: 15px;
		padding: 5px;	
	}
}

@media screen and (max-width: 450px) {
		nav a{
		font-size: 11px;
			
	}

}