@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans:ital@0;1&display=swap');

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

	--fon-t: "Ropa Sans", sans-serif;
	--fon-h: "Ropa Sans", sans-serif;

	--sca-t: 1.125rem;
	--sca-h: 1rem;
	--sca-lh: 1em;
	--sca-mar: 1rem;
	--sca-pad: 2rem;

	--ratio: .3125;

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

	--col-dar: #615E59;
	--col-dar-op25: #55b2b4;
	--col-bg: #f0edea;
	--col-lig: #d9d1cf;
	--col-sep: #ff4515;
	--col-pri: #ff4515;
	--col-pri-op75: #ff4515BF;
	--col-pri-bg: #aa192c;
	--col-acc: #615e59;
	--col-acc-bg: #615e59;

	--rad-s: .25rem;
	--rad-m: .25rem;
	--rad-l: .25rem;
	--rad-bt: .25rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: none;

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

.header {
	padding: 1rem 0;
}
.branding {
}
.branding img {
	height: 3.5rem;
	margin: 0;
}
.header ul {
	margin-top: .5rem;
}
.header ul li a,
.header ul li a.bt {
	line-height: 2.5rem;
	border: none;
}
.section.featured {
	margin-top: 5.5rem;
	height: calc(100vh - 6.5rem);
	position: relative;
	overflow: hidden;
}
.section.featured video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section.featured:after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--col-dar);
	opacity: .5;
}
.section.featured .content {
	position: relative;
	z-index: 3;
}
.section.featured .content h1 {
	font-size: 5rem;
}
.section.featured .content p {
	font-size: 1.5rem;
	max-width: 25em;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
	margin-bottom: 2.5rem;
}

.main {
	padding-top: 0;
	border-top: solid 1rem #ff4515;
	position: relative;
}
.section.bg {
	background-attachment: fixed;
}
.main:before,
.main:after {
	content: '';
	position: absolute;
	top: -1rem;
	height: 1rem;
}
.main:before {
	left: 0;
	width: 30%;
	background: #696058;
}
.main:after {
	right: 0;
	width: 10%;
	background: #aa192c;
}
#logos {
	padding-top: calc(var(--sca-pad) * 1);
	padding-bottom: calc(var(--sca-pad) * 1);
}
.brands {
	text-wrap: balance;
	white-space: normal!important;
}
.brands a,
.brands picture {
	display: inline-block;
    vertical-align: middle;
    margin: var(--sca-pad);
    position: relative;
}
.brands a img,
.brands picture img {
	display: block;
	transition: var(--ani-f);
} 
.brands a img + img {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	opacity: 0;
}
.brands a:hover img {
	opacity: 0;
}
.brands a:hover img + img {
	opacity: 1;
}
#nosotros {
	margin-top: 0;
}
.main ul.list li:before {
	top: .125em;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg width='73' height='103' viewBox='0 0 73 103' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.0294 50.9277L21.2695 71.6877L0.619447 92.3377L3.17944 94.8977C13.1294 104.848 29.4095 104.848 39.3695 94.8977L62.6895 71.5777L42.0395 50.9277L42.0294 50.9277Z' fill='%23AA182C'/%3E%3Cpath d='M32.9973 32.8189L42.0182 50.9189L62.6682 71.5689L65.2282 69.0089C75.1782 59.0589 75.1782 42.7789 65.2282 32.8189L41.9082 9.49889L25.9973 27.0008L32.9973 32.8189Z' fill='%23FF4713'/%3E%3Cpath d='M42.0233 51.4325L0.613281 10.0225L3.17328 7.4625C13.1233 -2.4875 29.4033 -2.4875 39.3633 7.4625L42.0384 10.0225L42.0333 51.4325H42.0233Z' fill='%23FF4713'/%3E%3C/svg%3E%0A");
}

#marcas picture {
	padding: 2rem 0;
	border-top: solid .125rem var(--col-dar);
	border-bottom: solid .125rem var(--col-bg);
	margin-bottom: 2rem;
}
#marcas .row:nth-child(1) picture {
	border-top: none;
	padding-top: 0;
}
#marcas picture img {
	display: block;
	height: 5rem;
	margin-left: 0;
}

#rrhh .page > * {
	text-align: left;
}
#contacto .form .field input,
#contacto .form .field textarea {
	color: var(--col-bg);
	background: none;
	border-color: var(--col-pri);
}
#contacto .form .field input::placeholder,
#contacto .form .field textarea::placeholder {
	color: var(--col-bg);
}
#rrhh .bt,
#contacto .bt {
	color: var(--col-bg);
	background: var(--col-pri);
	border:none;
}
#rrhh .bt:hover,
#contacto .bt:hover {
	box-shadow: 0 0 0 .25rem var(--col-pri);
}
.modal {
	width: 90%;
	max-width: 90%;
	aspect-ratio: 16 / 9;
	height: auto;
	max-height: 100%;
	top: 50%;
	transform: translate(-50% , -50%);
}
.modal iframe {
	width: 100%;
	height: 100%;
	border-radius: .25rem;
}
.modal > a {
	position: absolute;
	right: 0;
	bottom: 100%;
	line-height: 2rem;
	font-size: 1rem;
}
.footer {
	border: none;
	color: var(--col-bg);
	background: var(--col-dar);
}
.agency {
	float: right;
	color: var(--col-bg);
}
@media (max-width: 960px) {
	.header nav {
		border: none;
		background: var(--col-lig);
	}
	.section.bg {
		background-attachment: initial!important;
	}
}