.imgPrincipal { 
	width: 90%; max-width: 1800px; 
	margin: auto; 
	position: relative; 
	display: grid; 
	place-items: center;
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.3); 
	border-radius: 15px;
}
.imgPrincipal figure { width: 100%; height: 450px; overflow: hidden; display: flex; justify-content: center; align-items: center ;}
.imgPrincipal img {width: 100%; height: 100%; border-radius: 15px; }
.imgPrincipal figcaption { 
	bottom: 30px;
	right: 30px;
	width: 35%;
	position: absolute;
	border-radius: 10px;
	font-size: 1.5em;
	font-weight: 100;
	text-align: center;
	color: white;
	padding: 20px 30px;
	box-sizing: border-box;
	background-color: #9e7344;
	border: 1px solid white;
}


.intCon { 
	width: 90%;
	max-width: 1800px; 
	height: 300px;
	margin: 50px auto; 
	display: grid; 
	grid-template-columns: 2fr 1fr; 
	gap: 20px; 
	place-items: center; 
	text-align: right;
	overflow: hidden;
}

.intCon figure { height: 100%; height: 300px; border-radius: 15px; overflow: hidden; border: 1px solid lightgray;  }
.intCon img { width: auto; height: 100%; object-fit: cover; }
.intCon h1 { font-size: 2.5em; font-weight: 100; color: gray;}
.intCon p { font-size: 1.2em; padding: 30px 0; box-sizing: border-box; }
.intCon div { width: 100%; padding: 15px 0; box-sizing: border-box; }
.intCon a { 
	padding: 15px 25px;
	box-sizing: border-box;	
	text-decoration: none; 
	color: white;
	background-color: #8a0e09;
	border-radius: 10px;
	transition: 0.5s;
}
.intCon a:hover { background-color: #c84411;}


@media (max-width:1919px) {
	.intCon { width: 90%;}
	.intCon h1 { font-size: 2em;}
}
@media (max-width:1368px) {
	.intCon h1 { font-weight: bold;}
}
@media (max-width:1180px) {
	.imgPrincipal figcaption { width: 50%;}
	.intCon { height: 250px; width: 90%;}
	.intCon figure { height: 250px;}
	.intCon img { width: 100%;}
	.intCon p { padding: 15px 0; font-size: 1em;}
	.intCon h1 { font-size: 1.8em;}
}
@media (max-width:860px) {
	.imgPrincipal figcaption { width: 60%;}
	.intCon { grid-template-columns: 1fr; height: auto; width: 90%;}
	.intCon figure { height: 300px; display: grid; place-items: stretch;}
	.intCon img { display: grid; place-items: stretch;}
	.intCon h1 { font-size: 1.5em;}
}
@media (max-width:431px) {
	.imgPrincipal figure { height: 300px;}
	.imgPrincipal figcaption { width: 90%; margin: auto; right: auto; font-size: 1.2em;}
	.titSec h1 { font-size: 1.9em;}
}

.titSec { width: 100%;}
.titSec h1 {
	width: 90%;
	max-width: 1800px;
    margin: auto;
    text-align: center;
    font-size: 2.2em;
    font-weight: normal;
    padding: 25px;
    box-sizing: border-box;
    color: white;
	border-radius: 20px;
}


/* bajar-subir */
.bajar {
	margin: auto 8% auto auto;
	width: 180px;
	height: 30px;
	background-color: #704E2C;
	color: white;
	text-align: center;
	padding: 6px;
	box-sizing: border-box;
	cursor: pointer;
	border-radius:  10px 10px 0 0;
}
.bajar:hover {
	background-color: rgba(0,0,0,0.5);
}
.subir {
	position: fixed;
	right: 0px;
	bottom: 400px;
	width: 80px;
	height: 40px;
	background-color: #704E2C;
	color: white;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	cursor: pointer;	
	border-radius:  10px 0 0 10px;	
	z-index: 999999;
}

@media (min-width:1920px) {
	.bajar { margin: auto 16% auto auto;}
}
@media (max-width:1180px) {
	.bajar { margin: 90px 10% auto auto;}
}
/* bajar-subir */

/* productos */
.proFach article { 
	position: relative;
	border: 1px solid lightgray;
	border-radius: 10px;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
	
}

.proFach .proFachLink { display: grid; grid-template-columns: 2fr 1fr; padding: 10px; box-sizing: border-box;  }

.proFach figure img { 
	width: 100%; height: 100%; 
	border-radius: 10px 10px 0 0; 
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2); 
	box-sizing: border-box;
}
.proFach h2 { font-weight: 100; padding: 10px; box-sizing: border-box; line-height: 20px; } 
.proFach span { font-size: 0.7em;}
.proFach i { font-size: 0.7em; color: red;}
.proFach p { height: 150px; padding: 10px 0; box-sizing: border-box; border-top: 3px solid #133E5B; text-align: justify;}
.proFach a { 
	width: 100%; 
	border-radius: 10px; 
	display: grid; 
	transition: 0.5s; 
	padding: 10px; 
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
}
.proFach a:hover { background-color: #c84411;}
.proFach div { 
	width: 100px; 
	height: 100px; 
	overflow: hidden; 
	border-radius: 50%; 
	background-color: white; 
	position: absolute; 
	bottom: -20px; 
	right: 10px;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
}
.proFach__hover:has( :hover ){ --scala: scale(1.3); }
.proFach__img { width: 100%; height: 100%; object-fit: contain; transition: 0.5s; transform: var(--scala, 1.0);}

@media (max-width:431px) {
	.proFach h2 {font-size: 18px;}
	.proFach div {width: 60px; height: 60px; bottom: 1px;}
	.proFach .ph { height: 100px;}

	.proFach span h2 { font-size: 18px;}
}