@import url('https://fonts.googleapis.com/css2?family=Bona+Nova:ital,wght@0,400;0,700;1,400&family=Outfit:wght@100..900&display=swap');

:root {
	--page-w: 77.5rem;

	--fon-t: "Outfit", sans-serif;
	--fon-h: "Bona Nova", serif;

	--sca-t: 1rem;
	--sca-h: 1rem;
	--sca-lh: 1.2em;
	--sca-mar: 1rem;
	--sca-pad: 2.5rem;

	--ratio: .3125;

	--fon-w1: 400;
	--fon-w5: 400;
	--fon-w7: 600;
	--fon-w9: 600;

	--col-dar: #363431;
	--col-dar-op25: #36343144;
	--col-bg: #F9F7F4;
	--col-lig: #F8E8D4;
	--col-sep: #F8E8D4;
	--col-pri: #BD8E42;
	--col-pri-op75: #BD8E42BF;
	--col-pri-bg: #BD8E42;
	--col-acc: #19815F;
	--col-acc-bg: #19815F;

	--col-red: #F03D3E;
	--col-gre: #007B40;

	--col-grad-v: linear-gradient(180deg, var(--col-dar) 0%, var(--col-pri) 100%);

	--rad-s: .5rem;
	--rad-m: .5rem;
	--rad-l: .5rem;
	--rad-bt: 10rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: inset 0 .125rem .25rem 0 var(--col-dar-op25);

	--ani-f: all 500ms cubic-bezier(.7,0,.3,1);
}

::-webkit-scrollbar-thumb {
	border-radius: 10rem;
	background: var(--col-pri);
	box-shadow: inset 0 0 0 6px var(--col-bg);
}

body {
	font-weight: 300;
}
.section {
	overflow: hidden;
}
.header ul a,
.header ul span,
.bt,
.section h6 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.section h6 {
	color: var(--col-acc);
	margin-bottom: 4rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}
.section h6:before,
.section h6:after {
	content: '';
	border-top: solid 1px currentColor;
	flex: 1;
}
.section h6:before {
	right: 100%;
	margin-right: 1rem;
}
.section h6:after {
	left: 100%;
	margin-left: 1rem;
}
.section h2 {
	font-weight: normal;
	line-height: 1em;
	color: var(--col-pri);
	font-size: 4rem;
	margin-bottom: 2rem;
}
.section h2 + p {
	font-size: 1.25rem;
} 
.section h3 {
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--col-acc);
}
.section p {
	margin-bottom: .75em;
}
.main ul.list li {
	margin-bottom: .25em;
}
.main ul.list li:before {
	top: .6em;
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: .25rem .75rem;
	border-color: transparent;
	border-left-color: var(--col-pri);
}

.bt.bt-g {
	border: none;
	background: var(--col-lig);
}
.bt.bt-g:hover {
	background: var(--col-acc);
}
.bt-text {
	display: inline-block;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: .5em;
	text-decoration: none;
	border-bottom: solid 1px currentColor;
}

.header {
	background: none;
	transition: var(--ani-f);
	box-shadow: 0 0 0 0 var(--col-lig);
}
.header.bg {
	background: var(--col-bg);
	box-shadow: 0 .25rem .5rem -.25rem #BD8E4244;
}
.header.bg .bt {
	background: var(--col-acc);
}
.header .branding {
	color: var(--col-acc);
}

.section.featured {
	margin-top: 0;
	box-sizing: border-box;
	position: relative;
	height: auto;
}
.section.featured:before {
	content: '';
	position: absolute;
	left: 70%;
	top: 0;
	right: 0;
	bottom: 0;
	background: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.section.featured:after {
	content: '';
	position: absolute;
	left: 50%;
	width: 100%;
	max-width: var(--page-w);
	border-left: solid 10vh var(--col-bg);
	transform: translateX(-50%);
	top: 20vh;
	bottom: calc(20vh - 4.5rem);
	background: var(--col-lig);
	background: linear-gradient(to right, var(--col-bg) 0%, var(--col-lig) 50%);
	box-sizing: border-box;
	border-radius: var(--rad-m);
}
.section.featured .page {
	position: relative;
	z-index: 20;
	padding-top: 4.5rem;
	height: calc(100svh - 4.5rem);
}
.section.featured picture {
	position: absolute;
	top: 1rem;
	right: 10vh;
	bottom: 0;
	aspect-ratio: 1130 / 1218;
	z-index: 10;
}
.section.featured picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.section.featured .slider-wrapper {
	height: calc(60vh + 4.5rem);
	margin-top: calc(20vh - 4.5rem);
	aspect-ratio: 1 / 1;
	text-align: left;
}
.section.featured .slider-wrapper .slide {
	background: none!important;
}
.section.featured .slider-wrapper .content {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	justify-content: center;
	margin: 0;
    top: auto;
    transform: none;
    padding-bottom: 2.5rem;
    box-sizing: border-box;
}
.section.featured .slider-wrapper h1 {
	font-weight: 400;
	color: var(--col-pri);
	text-wrap: balance;
	font-size: 5.5vw;
	line-height: .9em;
	text-transform: uppercase;
	font-style: italic;
	margin: 0;
}
.section.featured .slider-wrapper p {
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5em;
	max-width: 20em;
	text-wrap: balance;
}
.section.featured .slider-wrapper .slider-controls {
	position: absolute;
	left: 0;
	top: 1.5rem;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: nowrap;
}
.section.featured .slider-wrapper .slider-controls a {
	color: var(--col-pri);
	display: flex;
	align-items: center;
	justify-content: center;
	width: .75rem;
	height: .75rem;
	border-radius: 1rem;
	font-size: .75rem;
	box-shadow: none;
	transform: none;
	position: static;
	transition: var(--ani-f);
}
.section.featured .slider-wrapper .slider-controls a.activeSlide {
	width: 1.75rem;
}
.section.featured .slider-wrapper .slider-controls .slider-pager {
	display: flex;
	gap: .25rem;
	align-items: center;
}
.section.featured .slider-wrapper .slider-controls .slider-pager a {
	font-size: 0;
	background: var(--col-lig);
}
@media (min-width: 960px) {
	.br {
		display: block;
	}
}
.featured .page > a {
    position: absolute;
    bottom: calc(20vh - 3rem);
    left: calc(var(--sca-pad) * 2);
    transform: none;
    margin: 0;
    z-index: 60;
}

.main {
	
}
#sobre-mi {
	position: relative;
	background-image: url(../images/gold-bg.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
}
#sobre-mi picture {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 33%;
	z-index: 5;
}
#sobre-mi picture img {
	display: block;
	height: 100%;
	object-fit: cover;
}
#sobre-mi h6 {
	text-align: left;
}
#sobre-mi h6:before {
	display: none;
}
#sobre-mi h2 {
	color: var(--col-dar);
}
#sobre-mi h6,
#sobre-mi p {
	color: var(--col-bg);
}

#trabajo {
	background: var(--col-lig);
	background-image: url(../images/pattern.png);
	background-position: center center;
	background-size: 50rem auto;
}
#trabajo .row + .row {
	margin-top: calc(var(--sca-pad)*1);
}
#trabajo h2 {
	max-width: 10em;
	margin-left: auto;
	margin-right: auto;
}
#trabajo .card {
	margin-top: 5rem;
	padding-top: 0;
	border: none;
	box-shadow: 0 .25rem 1rem -.25rem var(--col-sep);
}
#trabajo img {
	margin-top: -5rem;
	display: inline-block;
	width: 10rem;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
#trabajo img ~ p {
	max-width: 20em;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

#propuestas {
	padding-top: calc(var(--sca-pad) * 4);
}
#propuestas * + .row {
	margin-top: calc(var(--sca-pad) * 4);
}
#propuestas h6 {
	text-align: center;
}
#propuestas .dec {
	position: relative;
	z-index: 2;
}
#propuestas .dec:before,
#propuestas .dec:after {
	content: '';
	position: absolute;
	right: 100%;
	margin-right: -2.5rem;
	top: 0;
	bottom: 0;
	width: 100vw;
}
#propuestas .dec:before {
	background: var(--col-pri);
	z-index: -1;
}
#propuestas .dec:after {
	background-image: url(../images/pattern.png);
	background-position: center center;
	background-size: 35rem auto;
	z-index: 999;
}
#propuestas .slider {
	margin: 0;
	border-radius: var(--rad-l);
}
#propuestas .slider-pager {
	position: absolute;
	z-index: 9999;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	gap: .375rem;
}
#propuestas .rtl .slider-pager {
	right: auto;
	left: 1rem;
}
#propuestas .slider-pager a {
	display: block;
	background: #fff;
	font-size: 0;
	width: .5rem;
	height: .5rem;
	border-radius: 1rem;
	transition: var(--ani-f);
	box-shadow: 0 1px 3px 0 #00000022;
}
#propuestas .slider-pager a.activeSlide {
	width: 1.5rem;
}
#propuestas .dec .slider picture {
	margin: 0;
}
#propuestas .dec img {
	display: block;
	width: 100%!important;
}
#propuestas .rtl .dec:after,
#propuestas .rtl .dec:before {
	left: 100%;
	right: auto;
	margin-left: -2.5rem;
}
.blockquote-wrapper {
	position: relative;
}
#propuestas .blockquote-wrapper blockquote {
	position: absolute;
	right: -2.5rem;
	bottom: 2.5rem;
	padding: 2rem 2.5rem 2.25rem;
	background: var(--col-pri);
	text-align: right;
	width: calc(100% - 2.5rem);
	box-sizing: border-box;
	border-radius: var(--rad-m);
	z-index: 9999;
}
#propuestas .rtl .blockquote-wrapper blockquote {
	right: auto;
	left: -2.5rem;
	text-align: left;
}
#propuestas .blockquote-wrapper blockquote p {
	font-size: 1.5rem;
	line-height: 1.3em;
	margin-bottom: 1rem;
	text-wrap: balance;
	font-weight: 200;
	font-style: italic;
	color: var(--col-bg);
}
#propuestas .blockquote-wrapper blockquote h5 {
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
}

#manifiesto {
	background: url(../images/fondo-arboles.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}
#manifiesto p {
	font-size: 1.25rem;
	line-height: 1.4em;
	margin: 0!important;
	padding: 1rem 0;
	text-wrap: balance;
	position: relative;
}
#manifiesto p + p:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: .5rem;
	height: .5rem;
	border-radius: 1rem;
	background: var(--col-pri);
	transform: translate(-50% , 50%);
}
#manifiesto h2 {
	position: relative;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}
#manifiesto h5 {
	font-size: 1.25rem;
	line-height: 1.4em;
	font-weight: 300;
	font-family: inherit;
	position: relative;
	margin-top: 2rem;
	padding-top: 2rem;
}
#manifiesto h2:before,
#manifiesto h5:before {
	position: absolute;
	left: 50%;
	content: '';
	background-position: center center;
	background-size: contain;
	width: 4rem;
	aspect-ratio: 141 / 61;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg width='141' height='61' viewBox='0 0 141 61' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M140.029 10.8675C136.378 11.1658 133.029 10.768 133.029 10.768C133.029 10.768 135.663 6.63414 136.879 0C136.879 0 131.497 2.51444 125.213 1.50582C119.272 0.554029 109.609 4.30438 103.339 18.1693C102.838 19.2916 101.922 20.1723 100.806 20.7122C99.8323 21.181 98.8589 21.6497 97.8855 22.1043C84.4581 28.3691 70.8159 34.3782 56.6442 38.782C59.908 36.8074 63 34.3498 65.8487 31.395C66.1779 31.054 66.636 30.8551 67.1227 30.8836C70.1575 31.0256 80.593 27.8577 85.5603 20.6411C91.1002 12.5864 86.7055 0.980205 86.7055 0.980205C86.7055 0.980205 84.3436 8.42408 76.3558 11.8477C67.2515 15.7543 66.7076 24.633 66.4356 29.3067C66.3926 30.0028 66.0491 30.6421 65.4908 31.054C44.5481 46.7941 21.8589 45.1178 0 30.7131C11.0225 41.197 25.1084 46.1549 38.593 44.8053C39.5951 44.7059 40.5828 45.0894 41.2556 45.8281C50.9755 56.6246 60.0511 55.6302 61.8691 55.3603C63.7587 55.0904 67.8241 55.6302 72.6912 61C72.9632 40.6004 52.135 42.8733 49.0859 43.5552C46.9673 44.024 41.5992 44.5922 42.4581 44.2371C44.863 43.8251 46.2945 43.3847 48.6278 42.5608C58.0184 39.4639 69.499 38.1286 75.3108 37.5603C77.3149 37.3614 79.3333 37.9155 80.8937 39.1798C84.5583 42.1062 91.7014 46.0554 102.252 39.8475C102.252 39.8475 95.5951 28.5964 81.638 35.3584C80.1636 36.0687 78.5174 36.4238 76.8855 36.2534C75.683 36.1255 74.4663 36.0403 73.2495 35.9835C83.184 32.1337 92.7035 27.0764 101.264 21.5219C102.094 20.9821 103.11 20.7832 104.084 20.9963C106.117 21.4651 108.937 22.4453 112.1 24.9881C115.335 27.5878 125.384 30.017 133 24.9881C129.851 23.1698 129.45 21.9623 129.45 21.9623C129.45 21.9623 138.883 16.1237 140 10.8817L140.029 10.8675Z' fill='%23BD8E42'/%3E%3C/svg%3E%0A");
}
#manifiesto h2:before {
	bottom: 0;
	transform: translate(-50% , 50%);
}
#manifiesto h5:before {
	top: 0;
	transform: translate(-50% , -50%) rotate(180deg);
}

#testimonios {
	padding-bottom: 0;
}
.testimonios-wrapper {
	overflow-x: scroll;
	overflow-y: hidden;
	display: flex;
	gap: 1rem;
	padding: 2.5rem;
	margin-top: 3rem;
	align-items: stretch;
}
.testimonios-wrapper::-webkit-scrollbar {
	height: .875rem;
}
.testimonios-wrapper::-webkit-scrollbar-track {
	background: var(--col-lig);
}
.testimonios-wrapper::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 0 .375rem var(--col-lig);
}
.testimonios-wrapper::-webkit-scrollbar-thumb:hover {
	background: var(--col-acc);
}
.testimonios-wrapper .card {
	flex: 16rem 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 2.5rem 2.5rem 1.5rem;
}
.testimonios-wrapper .card video {
	margin: -2.5rem -2.5rem 0;
	display: block;
	width: calc(100% + 5rem);
	aspect-ratio: 3 / 4;
	object-fit: contain;
	background: var(--col-pri);
	border-radius: var(--rad-m);
	object-fit: cover;
}
.testimonios-wrapper .card p {
	font-size: 1.125rem;
	line-height: 1.4em;
}
.testimonios-wrapper .card p:before,
.testimonios-wrapper .card p:after {
	font-size: 1.5em;
	content: '❝';
	font-weight: bold;
	color: var(--col-pri);
	position: relative;
	top: .25em;
	margin-right: .125em;
}
.testimonios-wrapper .card p:after {
	content: '❞';
	margin-left: .125em;
}
.testimonios-wrapper .card h5 {
	margin-top: auto;
	padding-left: 0;
}
.testimonios-wrapper .card h5 span {
	color: var(--col-pri);
	white-space: nowrap;
}

#cta {
	background: url(../images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}
#cta h2 {
	max-width: 15em;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
	text-shadow: 0 0 1rem #00000066;
}

#contacto {
	background: var(--col-lig);
	background-image: url(../images/pattern.png);
	background-position: center center;
	background-size: 50rem auto;
}
#contacto h5 {
	font-weight: 400;
	font-family: inherit;
}
.form h4 {
	padding-top: 1.75rem;
	font-weight: normal;
}
.form .field input,
.form .field textarea {
	background: var(--col-bg);
}
.form .bt {
	display: inline-block;
	width: auto;
}

.social li a {
	background: var(--col-acc);
}
.footer {
	color: var(--col-bg);
	background: var(--col-pri);
	background-image: url(../images/gold-bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.footer .azuite {
	color: var(--col-lig);
}

@media (max-width: 960px) {
	.page {
		padding: 0 2rem;
	}
	.bt-menu {
		background: var(--col-lig);
		color: var(--col-acc);
		border-radius: 2rem;
		display: block;
		aspect-ratio: 1 / 1;
		width: 2.5rem;
		line-height: 2.5rem;
		right: 2rem;
	}
	.header nav {
		background: var(--col-lig);
		border: none;
	}
	.section.featured .slider-wrapper {
	    height: auto;
	    margin-top: 0;
	}
	.section.featured picture {
		top: auto;
	    right: 0;
	}
	.section.featured:after {
		left: 0;
		right: 2rem;
		width: auto;
		max-width: 1000%;
		transform: none;
		top: 5rem;
		bottom: 2rem;
	}
	.featured .page > a {
		left: 2rem;
		bottom: 4rem;
	}
	.section.featured .slider-wrapper .content {
		height: auto;
		gap: .5rem;
		padding-right: 3rem;
	}
	.section.featured .slider-wrapper h1 {
		font-size: 3rem;
	}
	.section.featured .slider-wrapper p {
		font-size: 1.125rem;
		line-height: 1.2em;
	}
	.section.featured .slider-wrapper .slider-controls {
	    top: 13.5rem;
	}
	.section {
		padding: 2rem 0;
		margin: 0;
	}
	.section h2 {
		font-size: 2.5rem;
	}
	.section h6 {
		margin-bottom: 2rem;
	}
	.row + *,
	.col + .gap, 
	.col + .col {
		margin-top: 2rem;
	}
	#sobre-mi {
		background-size: cover;
	}
	#sobre-mi picture {
		position: static;
		width: auto;
		aspect-ratio: 1 / 1;
		margin-bottom: 2rem;
	}
	#sobre-mi picture img {
		width: 100%;
		object-fit: cover;
	}
	#propuestas {
		padding-top: 4rem;
	}
	#propuestas * + .row {
		margin-top: 4rem;
	}
	#propuestas .blockquote-wrapper blockquote {
		position: static;
		padding: 1.5rem;
		margin-top: 1rem;
	}
	#propuestas .blockquote-wrapper blockquote p {
		font-size: 1rem;
		line-height: 1.2em;
	}
	#propuestas .blockquote-wrapper blockquote h5 {
		font-size: .875rem;
	}
	.bt {
		line-height: 1;
		padding-top: .875em;
		padding-bottom: .875em;
	}

}