/* Reset de estilo para garantizar consistencia entre navegadores */
* {
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%;
    font-family: "Montserrat", sans-serif; /* Cambiar por tu fuente preferida */
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: #000; /* Color base del texto */
   
}
body{
	min-width: 320px;
	color: #58656D;
}
.fot-vigas{
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
}
/* Encabezado */
header {
    text-align: center;  
	position:relative;
	z-index:2;	
	background-image: url(img/detalle-vigas-madera.jpg);
	background-size: cover;
}
header h1 {
    font-size: 2.7rem;             /* Tamaño de fuente del título */
}
/* container */
.contenedor{
	position: relative;
	z-index: 2;	
}
/* Pie */
footer{
	position: relative;
	z-index: 1;	
	background: #fff;
    color: #000;                   /* Texto blanco */
    text-align: center;            /* Texto centrado */
    font-size: 0.85rem;             /* Tamaño de fuente del texto */
}
footer nav{
	text-align: left;
}
footer p{
    margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
}
footer ul{
	text-align: left;
	list-style: none;
	margin: 0 0 2rem 0;
	padding: 0;
}
footer li{
	font-weight: 600;
	margin-bottom: 0.2rem !important;
}
footer a{
	font-weight: 500;
    color: #000;                   /* Enlaces en blanco */
    text-decoration: none;         /* Sin subrayado en los enlaces */
    margin: 0 1rem;                /* Espaciado horizontal para enlaces */
    transition: color 0.3s ease;   /* Transición suave en hover */
}
footer a:hover {
    color: #93ac49;                   /* Color más claro al pasar el cursor */
}
footer .tx-blanco:hover{
	color: #000;          
}
footer li a{
	margin: 0;
}
/* Estructuras */
.space-between{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: top;
}
.space-around{
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
   align-items: stretch;
}
.flex-start{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   align-items: center;
}
.flex-end{
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   align-items: center;
 }
.col{
	width: 45%; 
}
.col1-sm{
	width: 10%;
}
.col2-sm{
	width: 40%;
}
.col1{
	width: 25%;
}

.col2{
	width: 50%;
}
.col3{
	width: 75%;
}
.col4{
	width: 100%;
}
.navigation .col4{
	width: 90%;
}
.col3-bg{
	width: 80%;
}
.col30{
	width: 30%;
}
section{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}
.section-bg{
	max-width: 100%;
	padding: 0;
}
div{
	margin: 0 auto;
	padding: 0;
}
nav{
	margin: 0;
    padding: 1rem;           /* Espaciado interno */
}
/* Enlaces */
a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease;
	margin: 0 1rem; 
}
a:hover {
    color: #0056b3;
}
.ab-1 {
	padding: 0.5rem 1rem;    /* Espaciado interno del enlace */
    display: inline-block;   /* Asegura que el área clicable sea completa */
	transition: background-color 0.3s ease; /* Animación suave en el hover */
}
.ab-1:hover {
    background-color: #555;  /* Color de fondo al pasar el mouse */
    border-radius: 4px;      /* Borde redondeado en el hover */
}
/* Encabezados */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2, .tit-h2 , .intro .tit-h2{ font-size:2.2rem; line-height: 2.5rem; font-weight:600;}
h3, .tit-h3 { font-size: 1.3rem; line-height: 1.6rem; }
h4 { font-size: 1.2rem; line-height: 1.5rem;}
h5, .tit-h5 { font-size: 1.1rem; line-height: 1.4rem;}
h6, .tit-sm { font-size: 1rem; line-height: 1.3rem;}
/* Párrafos */
p {
    margin-bottom: 1.5rem;
}
.supdest{
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 2.8rem;
	text-transform: uppercase;
}
.dest{
	font-weight: 400;
	font-size: 1.8rem;
	line-height: 2.1rem;
}
/* Listas */
ul, ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}
ul li, ol li {
    margin-bottom: 0.5rem;
}
/* Tablas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
table th, table td {
    padding: 0.75rem;
    text-align: left;
    border: 1px solid #ddd;
}
table th {
    background-color: #f8f8f8;
}
/* Formularios */
form{
	width: 80%;
	max-width: 450px;
	background: #C4E0C9;
	padding: 2rem;
	margin: 0 auto;
	text-align: center;
	transition: all linear 0.2s;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
}
label{
	font-size: 1rem;
	font-weight: 500;
	color: #003837;
	text-transform: uppercase;
}
input, select, textarea, button, submit {
	color: #003837;   
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
    font-size: inherit;
    padding: 0.75rem;
	margin-top: 0.3rem;
    margin-bottom: 1rem;
    border: 1px solid #fff;
    width: 100%;
    box-sizing: border-box;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}
input:focus, select:focus, textarea:focus, button:focus, submit:focus{
    outline: none;
    border-color: #fff;
}
button, submit {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 0px;
	text-decoration: none;
	transition: all linear 0.2s;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	display: inline-block;
	color: #fff;
	background: #FDA226;
	border: 1px solid #FDA226;
	max-width: 200px;
	cursor: pointer;
}
button:hover, submit:hover {
	color: #fff;
	background: #003837;
	border: 1px solid #003837;
}
/* Botones */
.bot-1, .bot-2{
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 10px 15px;
	margin: 0px;
	text-decoration: none;
	transition: all linear 0.2s;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	display: inline-block;
}
.bot-1{
	color: #fff;
	background: #FDA226;
	border: 1px solid #FDA226;
}
.bot-1:hover{
	color: #fff;
	background: #003837;
	border: 1px solid #003837;
}
.bot-2{
	color: #003837;
	background: #fff;
	border: 1px solid #fff;
}
.bot-2:hover{
	color: #fff;
	background: #003837;
	border: 1px solid #fff;
}
/* Imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Alineación */
.text-center {
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left {
    text-align: left;
}
/* Márgenes */
.mar-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-4 { margin-top: 4rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 4rem; }
.mr-1 { margin-right: 1rem; }
.pt-1 { padding-top: 1rem; }
.pt-2 { padding-top: 2rem; }
.pt-4 { padding-top: 4rem; }
.pb-1 { padding-bottom: 1rem; }
.pb-2 { padding-bottom: 2rem; }
.pb-4 { padding-bottom: 4rem; }
/* Colores */
.bg-verde{
	background: #005747;
}
.bg-amarillo{
	background: #FDA226;
}
.bg-blanco{
	background: #fff;
}
.bg-claro{
	background: #C4E0C9;
}
.tx-verde{
	color: #003837;
}
.tx-claro{
	color: #C4E0C9;
}
.tx-blanco{
	color: #fff;
}
.tx-amarillo{
	color: #FDA226;
}
/* Fondos */
.back{
	position: absolute;
	z-index: 1;
}
.back img{
	width: 100%;
	max-width: 100%;
}
.top{
	position: relative;
	z-index: 2;
}
/* img fija */
.img-fija{
	position: fixed;
	z-index: 0;
	top: 0;
	width: 100%;
}
.img-fija img{
	width: 100%;
}
/* Cabecera y Menú */
.toolbar{
	width: 90%;
	max-width: 1400px;
	padding: 1% 5%;
	position: relative;
	z-index: 2;
	text-align: left;
}
.toolbar p{
	font-size: 0.85rem;
	color: #003837;
	margin: 0.5rem 0;
}
.toolbar a{
	color: #003837;
	margin: 0 0.5rem;
}
.toolbar .col2-sm{
	text-align: left;
	margin-left: 0;
}
.logo a{
	text-align: left;
	display: inline-block;
}
.logo img{
	max-width: 350px;
}
.navbar{
	list-style: none;
	margin: 0;
	padding: 0;
}
.navbar a{
	color: #005747;
	font-size: 1rem;
	font-weight: 700;
	padding: 5px 10px;
}
.toolbar .navbar a:hover{
	color: #003837;
}
.navigation .navbar a{
	color: #005747;
}
.navigation .navbar a:hover{
	color: #003837;
	background: #fff;
    transition: all linear 0.2s;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}
.navmov, .accmov{
	display: none;
}
/* Banner */
.portada{
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}
.banner{
	width: 90%;
	max-width: 1400px;
	position: relative;
	z-index: 2;
	text-align: left;
	padding: 4.5rem 5%;
}
.banner h1, .banner p{
	width: 50%;
	margin-bottom: 0;
}
.banner p{
	font-weight: 500;
	font-size: 1.2rem;
}
/* Cromos */
.minicrom{
	width: 30%;
	max-width: 350px;
	border: 2px solid #C4E0C9;
	background: #fff;
	color: #000;
	text-align: center;
	padding: 10px 15px;
	margin: 0px;
	text-decoration: none;
	transition: all linear 0.2s;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
}
.servicios .minicrom{
	width: 45%;
	max-width: 550px;
	min-height: 280px;
	background: #fff;
	color: #000;
	text-align: left;
	padding: 10px 15px;
	margin: 2rem 2%;
	text-decoration: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border: 0px;
}
	.minicrom div{
		padding: 3rem 2rem;
	}
	.servicios .minicrom div{
		padding: 2rem;
	}
	.minicrom h2{
		font-size: 1.40rem;
		line-height: 1.7rem;
		text-transform: uppercase;
	}
	.minicrom h3{
		color: #003837;
		text-transform: uppercase;
	}
	.minicrom p{
		color: #58656D;
	}
	.minicrom img{
		width: auto;
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	.servicios .minicrom h3, .servicios .minicrom p{
		font-size: 1rem;
		line-height: 1.3rem;
	}
.col30 h3{
	color: #003837;
	/*font-size: 1rem;
	line-height: 1.3rem;*/
}
.col30 p{
	color: #003837;
	font-size: 0.9rem;
	line-height: 1.2rem;
}
.linkados .col30{
	max-width: 350px;
	margin: 3rem auto;
}
.link, .linkados h3, .col30 h3{
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 20px 15px;
	text-decoration: none;
	display: inline-block;
}
.link:hover{
	color: #fff;
	text-decoration: underline;
}
.intro{
	background: #93ac49;
	padding: 2rem;
}
	.intro p{
		font-size: 1.2rem;
		font-weight: 500;
	}
#contactar .col2-sm form{
	display: none;
}
#contactar .col2{
	width: 90%;
}
#contactar .col2{
	width: 90%;
	display: block;
}
	#contactar .col2 ul{
		float: left;
		width: 25%;
	}
	#contactar .col2 .flex-start{
		width: 25%;
		display: inline-block;
	}
		#contactar .col2 .flex-start li{
			display: inline-block;
		}
.servicios{
	background-image: url(img/construccion-estructuras-madera.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
/* Media Queries (Ejemplo para pantallas pequeñas) */
@media (max-width: 1290px) {
	.servicios .minicrom{
		width: 40%;
	}
}
@media (max-width: 1155px) {
	.navbar a{
		font-size: 0.85rem;
	}
}
@media (max-width: 1090px) {
	header h1, h1{
	  font-size: 2rem;
	}
	h2, .tit-h2{
		font-size: 1.8rem;
		line-height: 2.1rem;
	}
	.dest, p{
		font-size: 1.2rem;
		line-height: 1.5rem;
	}
	h3, .tit-h3, .supdest{
		font-size: 1rem;
		font-size: 1.3rem;
	}
	.bot-1, .bot-2{
		font-size: 0.85rem;
	}
	a{
		margin: 0 0.5rem;
	}
	.imago{
		display: none;
	}
	.minicrom{
		width: 40%;
		max-width: 400px;
		margin: 1rem;
	}
}
@media (max-width: 960px) {
	#contactar .col2 ul, #contactar .col2 .flex-start{
		width: 50%;
	}
}
@media (max-width: 949px) {
section{
	width: 90%;
}
.navigation{
	position: relative;
}
	.navigation .navbar, .memov{
		display: none !important;
	}
	.navmov{
		display: block;
		position: absolute;
		top: 0;
		right: 7%;
		z-index: 10;
		margin: 0px;
		padding: 0px;
		text-align: right;
	}
	#menudesp{
		display: block;
		float: right;
		width: auto;
		margin: 0px;
		padding: 0px;
		text-align: right;
	}
		#menudesp ul{
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
			#menudesp li{
				display: block;
				width: auto;
				margin: 0 !important;
				text-align: center;
			}
				#menudesp a{
					width: 80px;
					display: inline-block;
					color: #93ac49;
					font-size: 0.875rem;
					text-transform: uppercase;
					font-weight: 600;
					padding: 5px 10px;
					background: #fff;
					transition: all linear 0.2s;
					-moz-border-radius: 30px;
					-webkit-border-radius: 30px;
					margin: 0 !important;
				}
	#inmenu{
		float: right;
		display: none;
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0%;
		text-align: right;
	}
		#inmenu a{
			width: 90%;
			display: inline-block;
			color: #fff;
			font-size: 0.875rem;
			text-transform: uppercase;
			font-weight: 600;
			margin: 5px 0px;
			padding: 5px 5%;
			transition: all linear 0.2s;
			background: #93ac49;
			-moz-border-radius: 30px;
			-webkit-border-radius: 30px;
		}
		#inmenu a:hover{
			color: #000;
		}
	.col2, .col2-sm{
		width: 45%;
	}
	.toolbar .col2-sm{
		width: 40%;
		margin-bottom: 0rem !important;
	}
		.toolbar .col2-sm .logo img{
			max-width: 250px;
		}
		.toolbar .col2-sm .navbar li{
			display: block;
			margin-bottom: 0rem !important;
		}
	.apartados .col2, .apartados .col2-sm{
		width: 80%;
	}
	.imgrecomendar, .caja-acupuntura{
		background-position: center;
	}
}
@media (max-width: 880px) {
	.box .col30{
		width: 45%;
		margin-bottom: 2rem;
	}
	#contactar .col2 ul{
		width: 45%;
	}
	.minicrom, .servicios .minicrom{
		width: 80%;
		max-width: 550px;
	}
	.col2, .col2-sm{
		width: 80%;
	}
	.col2-sm{
		margin-bottom: 1rem;
	}
		.col2-sm img{
			max-width: 300px;
			text-align: center;
		}
	.linkados .col30 {
		width: 40%;
		max-width: 400px;
		margin: 1rem auto;
	}
	.toolbar .col1{
		width: 40% !important;
		margin-left: 0px;
		text-align: left;
	}
		.toolbar .col1 img{
			max-width: 150px;
		}
	.toolbar .col3{
		width: 50% !important;
	}
}
@media (max-width: 710px) {
	.accdesk{
		display: none;
	}
	.navigation{
		position: absolute;
		top: 5px;
		right: 2%;
		width: 50% !important;
	}
		.navmov{
			width: 100% !important;
		}
		.memov{
			display: block !important;
		}
	.accmov{
		display: block;
		text-align: center;
	}
	.linkados .col30{
		width: 80%;
		margin: 1rem auto !important;
	}
}
@media (max-width: 663px) {
	.navbar a{
		padding: 0px 10px;
	}
	.navbar li{
	  margin-bottom: 0rem;
	}
}
@media (max-width: 650px) {
	.imgrecomendar .col2-sm, .perfil .col2-sm, .perfil .col2, footer .col2, footer .col2-sm, #contactar .col2 ul, #contactar .col2 .flex-start{
		width: 80%;
	}
	.perfil .col2-sm{
		text-align:center;
	}
		.fotavatar{
			max-width: 300px;
			margin: 0 auto 2rem auto;
		}
	footer section{
		flex-direction: column-reverse;
	}
	footer section .col2 ul:first-child{
		margin-top: 2rem;
	}
}
@media (max-width: 550px) {
	.img-fija{
		height: 350px;
	}
	.img-fija img{
		width: auto;
		max-width: auto;
		height: 100%;
	}
	.minicrom, .col30, #contactar .col2 ul{
		width: 80%;
		margin: 1rem auto !important;
	}
	.box .col30{
		width: 80%;
		margin-bottom: 2rem;
	}
	.toolbar .col2-sm{
		width: 90% !important;
		margin: 5px auto;
		text-align: center;
	}
	.toolbar .col3{
		width: 90% !important;
		margin: 0px auto;
		text-align: center;
	}
	.banner{
		padding: 2.5rem 5%;
	}
	.banner h1, .banner p{
		width: 90%;
	}
	.navbar li{
		width: 90%;
		text-align: center;
		margin: 0 auto;
		display: block;
	}
}
@media (max-width: 380px) {
	.navigation{
		position: relative;
		top: 5px;
		right: 0%;
		width: 90% !important;
	}
		#menudesp {
			float: none;
			margin: 0px auto;
			text-align: center;
		}
		.navmov{
			right: 0%;
			width: 100% !important;
			margin: 0px;
		}
		#inmenu{
			text-align: center;
		}
	.navbar li{
		width: 90%;
		text-align: center;
		margin: 0 auto;
		display: block;
	}
}
/*
@media (max-width: 850px) {
	label, button, submit, footer{
		font-size: 0.85rem;
	}
	.bot-1, .bot-2{
	  font-size: 0.75rem;
	}
	h2, .tit-h2, .dest, h3, .tit-h3{
		font-size: 1rem;
	}
}
@media (max-width: 790px) {
    header h1{
		font-size: 1.5rem;
		width: 90%;
		margin: 0 auto;
	}
	section {
        padding: 0 10px;
    }
	nav{
        flex-direction: column; 
        align-items: center;    
    }
    nav a{
        margin: 0.5rem 0;     
    }
    footer {
        font-size: 0.875rem;       
    }
}
*/
@media (max-width: 690px) {
	footer nav{
		width: 90%;
		text-align: center;
	}
}
@media (max-width: 630px) {
	footer nav a{
		display: block;
	}
}