/*
|--------------------------------------------------------------------------
| ARCO - Variables globales
|--------------------------------------------------------------------------
*/

:root {
	--arco-green: #8cb431;
	--arco-blue: #0084c9;
	--arco-teal: #429a82;
	--arco-dark-green: #175938;
	--arco-light-green: #6fa952;

	--arco-white: #ffffff;
	--arco-text: #18342b;
	--arco-background: #f7faf8;

	--arco-header-height: 108px;
	--arco-container-width: 1440px;
}


/*
|--------------------------------------------------------------------------
| Ajustes generales
|--------------------------------------------------------------------------
*/

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

[id] {
	scroll-margin-top: calc(var(--arco-header-height) + 20px);
}

.arco-header *,
.arco-hero *,
.arco-about * {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.arco-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;

	background:
		linear-gradient(
			to bottom,
			rgba(10, 52, 43, 0.62) 0%,
			rgba(10, 52, 43, 0.20) 70%,
			rgba(10, 52, 43, 0) 100%
		);

	transition:
		background 0.35s ease,
		box-shadow 0.35s ease,
		backdrop-filter 0.35s ease,
		-webkit-backdrop-filter 0.35s ease;
}


/*
|--------------------------------------------------------------------------
| WordPress Admin Bar
|--------------------------------------------------------------------------
*/

body.admin-bar .arco-header {
	top: 32px;
}


/*
|--------------------------------------------------------------------------
| Contenedor Header
|--------------------------------------------------------------------------
*/

.arco-header__container {
	position: relative;

	width: min(
		var(--arco-container-width),
		calc(100% - 80px)
	);

	min-height: var(--arco-header-height);

	margin: 0 auto;
	padding: 18px 0;

	display: grid;

	grid-template-columns:
		minmax(210px, 270px)
		minmax(0, 1fr)
		minmax(100px, 150px);

	align-items: center;
	gap: 32px;
}


/*
|--------------------------------------------------------------------------
| Logos Header
|--------------------------------------------------------------------------
*/

.arco-header img {
	display: block;
	width: auto;
	height: auto;

	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.arco-header__institution,
.arco-header__brand {
	display: flex;
	align-items: center;
}

.arco-header__brand {
	justify-content: flex-end;
}

.arco-header__institution-link,
.arco-header__brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.arco-header__mcd-logo {
	max-width: 235px;
	max-height: 60px;
	object-fit: contain;
}

.arco-header__arco-logo {
	max-width: 112px;
	max-height: 76px;
	object-fit: contain;
}

.arco-header__institution-link:hover img,
.arco-header__brand-link:hover img {
	transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Navegación Header
|--------------------------------------------------------------------------
*/

.arco-header__navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.arco-menu {
	list-style: none;

	display: flex;
	align-items: center;
	justify-content: center;

	gap: clamp(18px, 2vw, 34px);

	min-height: 44px;

	margin: 0;
	padding: 0;
}

.arco-menu > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.arco-menu > li > a {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 14px 0;

	color: var(--arco-white);

	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none;
	white-space: nowrap;

	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

.arco-menu > li > a:not(.arco-menu__cta)::after {
	content: '';

	position: absolute;
	left: 0;
	bottom: 5px;

	width: 0;
	height: 2px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			var(--arco-blue),
			var(--arco-green)
		);

	transition: width 0.25s ease;
}

.arco-menu > li > a:hover::after,
.arco-menu > li.current-menu-item > a::after,
.arco-menu > li.current_page_item > a::after {
	width: 100%;
}


/*
|--------------------------------------------------------------------------
| CTA Header
|--------------------------------------------------------------------------
*/

.arco-menu > li > a.arco-menu__cta {
	min-height: 44px;
	padding: 0 22px;

	border-radius: 999px;

	background: var(--arco-green);
	color: var(--arco-white);

	box-shadow:
		0 10px 28px rgba(140, 180, 49, 0.25);
}

.arco-menu > li > a.arco-menu__cta:hover {
	background: var(--arco-light-green);
	color: var(--arco-white);
	transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Header Scrolled
|--------------------------------------------------------------------------
*/

.arco-header.is-scrolled {
	background: rgba(255, 255, 255, 0.94);

	box-shadow:
		0 8px 34px rgba(23, 89, 56, 0.10);

	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
}

.arco-header.is-scrolled .arco-menu > li > a {
	color: var(--arco-dark-green);
}

.arco-header.is-scrolled .arco-menu > li > a:hover {
	color: var(--arco-blue);
}

.arco-header.is-scrolled .arco-menu > li > a.arco-menu__cta {
	color: var(--arco-white);
}


/*
|--------------------------------------------------------------------------
| Línea Header
|--------------------------------------------------------------------------
*/

.arco-header__accent {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;

	height: 2px;

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			var(--arco-blue),
			var(--arco-green)
		);

	transition: opacity 0.35s ease;
}

.arco-header.is-scrolled .arco-header__accent {
	opacity: 0.7;
}


/*
|--------------------------------------------------------------------------
| Botón Hamburguesa
|--------------------------------------------------------------------------
*/

button.arco-menu-toggle {
	display: none !important;

	position: relative;

	width: 46px;
	height: 46px;

	margin: 0;
	padding: 10px;

	align-items: center;
	justify-content: center;
	flex-direction: column;

	border: 0 !important;
	border-radius: 12px;

	background: transparent !important;

	color: inherit !important;

	box-shadow: none !important;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
}

button.arco-menu-toggle:hover,
button.arco-menu-toggle:focus,
button.arco-menu-toggle:active {
	border: 0 !important;

	background:
		rgba(255, 255, 255, 0.10) !important;

	box-shadow: none !important;
	outline: none;
}

.arco-menu-toggle span {
	display: block;

	width: 25px;
	height: 2px;

	margin: 3px 0;

	border-radius: 999px;

	background: var(--arco-white);

	transition:
		transform 0.25s ease,
		opacity 0.25s ease,
		background-color 0.25s ease;
}

.arco-header.is-scrolled .arco-menu-toggle span {
	background: var(--arco-dark-green);
}

.arco-header.is-scrolled button.arco-menu-toggle {
	background:
		rgba(0, 132, 201, 0.07) !important;
}


/*
|--------------------------------------------------------------------------
| Hamburguesa abierta
|--------------------------------------------------------------------------
*/

.arco-header.menu-open .arco-menu-toggle span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.arco-header.menu-open .arco-menu-toggle span:nth-child(2) {
	opacity: 0;
}

.arco-header.menu-open .arco-menu-toggle span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.arco-hero {
	position: relative;

	min-height: 100vh;
	min-height: 100svh;

	display: flex;
	align-items: center;

	overflow: hidden;

	background: var(--arco-dark-green);
	color: var(--arco-white);

	isolation: isolate;
}


/*
|--------------------------------------------------------------------------
| Fondo Hero
|--------------------------------------------------------------------------
*/

.arco-hero__background {
	position: absolute;
	inset: 0;

	z-index: -5;

	background-image: var(--arco-hero-image);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;

	transform: scale(1.025);

	animation:
		arco-hero-zoom
		18s ease-in-out infinite alternate;
}


/*
|--------------------------------------------------------------------------
| Overlay Hero
|--------------------------------------------------------------------------
*/

.arco-hero__overlay {
	position: absolute;
	inset: 0;

	z-index: -4;

	background:
		linear-gradient(
			90deg,
			rgba(7, 47, 38, 0.95) 0%,
			rgba(11, 65, 52, 0.80) 36%,
			rgba(0, 132, 201, 0.20) 72%,
			rgba(0, 0, 0, 0.11) 100%
		);
}


/*
|--------------------------------------------------------------------------
| Decoraciones Hero
|--------------------------------------------------------------------------
*/

.arco-hero__decor {
	position: absolute;
	z-index: -3;
	border-radius: 50%;
	pointer-events: none;
}

.arco-hero__decor--blue {
	width: 650px;
	height: 650px;

	right: -280px;
	bottom: -340px;

	background:
		radial-gradient(
			circle,
			rgba(0, 132, 201, 0.28),
			rgba(0, 132, 201, 0) 70%
		);
}

.arco-hero__decor--green {
	width: 480px;
	height: 480px;

	left: -210px;
	top: 18%;

	background:
		radial-gradient(
			circle,
			rgba(140, 180, 49, 0.22),
			rgba(140, 180, 49, 0) 72%
		);
}


/*
|--------------------------------------------------------------------------
| Isotipo decorativo Hero
|--------------------------------------------------------------------------
*/

.arco-hero__symbol {
	position: absolute;

	top: 54%;
	right: -9vw;

	z-index: -1;

	width: min(52vw, 850px);

	opacity: 0.09;

	transform: translateY(-50%);

	pointer-events: none;

	mix-blend-mode: screen;
}

.arco-hero__symbol img {
	display: block;
	width: 100%;
	height: auto;

	animation:
		arco-float-symbol
		12s ease-in-out infinite;
}


/*
|--------------------------------------------------------------------------
| Contenedor Hero
|--------------------------------------------------------------------------
*/

.arco-hero__container {
	position: relative;
	z-index: 2;

	width: min(
		var(--arco-container-width),
		calc(100% - 80px)
	);

	margin: 0 auto;

	padding-top:
		calc(var(--arco-header-height) + 90px);

	padding-bottom: 160px;

	display: grid;

	grid-template-columns:
		minmax(0, 700px)
		minmax(260px, 1fr);

	align-items: center;

	gap: clamp(70px, 9vw, 170px);
}


/*
|--------------------------------------------------------------------------
| Contenido Hero
|--------------------------------------------------------------------------
*/

.arco-hero__content {
	position: relative;
	width: 100%;
	z-index: 2;
}


/*
|--------------------------------------------------------------------------
| Eyebrow Hero
|--------------------------------------------------------------------------
*/

.arco-hero__eyebrow {
	display: inline-flex;
	align-items: center;

	margin-bottom: 24px;
	padding: 10px 18px;

	border:
		1px solid rgba(255, 255, 255, 0.20);

	border-radius: 999px;

	background: rgba(140, 180, 49, 0.95);
	color: var(--arco-white);

	box-shadow:
		0 12px 30px rgba(23, 89, 56, 0.20);

	font-size: 12px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.09em;
	text-transform: uppercase;

	opacity: 0;

	transform: translateY(18px);

	animation:
		arco-fade-up
		0.9s ease forwards;

	animation-delay: 0.12s;
}


/*
|--------------------------------------------------------------------------
| Título Hero
|--------------------------------------------------------------------------
*/

.arco-hero__title {
	max-width: 720px;

	margin: 0;

	color: var(--arco-white);

	font-size:
		clamp(
			58px,
			6.4vw,
			102px
		);

	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.055em;

	text-shadow:
		0 6px 26px rgba(0, 0, 0, 0.18);

	opacity: 0;

	transform: translateY(18px);

	animation:
		arco-fade-up
		0.9s ease forwards;

	animation-delay: 0.22s;
}

.arco-hero__title span {
	display: block;
	color: var(--arco-green);
}


/*
|--------------------------------------------------------------------------
| Subtítulo Hero
|--------------------------------------------------------------------------
*/

.arco-hero__subtitle {
	margin: 30px 0 0;

	color: var(--arco-white);

	font-size:
		clamp(
			24px,
			2.5vw,
			38px
		);

	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.025em;

	opacity: 0;

	transform: translateY(18px);

	animation:
		arco-fade-up
		0.9s ease forwards;

	animation-delay: 0.32s;
}


/*
|--------------------------------------------------------------------------
| Descripción Hero
|--------------------------------------------------------------------------
*/

.arco-hero__description {
	max-width: 590px;

	margin: 22px 0 0;

	color: rgba(255, 255, 255, 0.88);

	font-size:
		clamp(
			16px,
			1.3vw,
			19px
		);

	font-weight: 400;
	line-height: 1.65;

	opacity: 0;

	transform: translateY(18px);

	animation:
		arco-fade-up
		0.9s ease forwards;

	animation-delay: 0.42s;
}


/*
|--------------------------------------------------------------------------
| Acciones Hero
|--------------------------------------------------------------------------
*/

.arco-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 14px;

	margin-top: 35px;

	opacity: 0;

	transform: translateY(18px);

	animation:
		arco-fade-up
		0.9s ease forwards;

	animation-delay: 0.52s;
}


/*
|--------------------------------------------------------------------------
| Mensaje lateral Hero
|--------------------------------------------------------------------------
*/

.arco-hero__side-message {
	position: relative;

	z-index: 2;

	align-self: center;
	justify-self: end;

	width: min(330px, 100%);

	padding-left: 30px;

	color: rgba(255, 255, 255, 0.86);

	opacity: 0;

	transform: translateX(25px);

	animation:
		arco-side-reveal
		1s ease forwards;

	animation-delay: 0.68s;
}

.arco-hero__side-line {
	position: absolute;

	left: 0;
	top: 3px;
	bottom: 3px;

	width: 3px;

	border-radius: 999px;

	background:
		linear-gradient(
			to bottom,
			var(--arco-blue),
			var(--arco-green)
		);
}

.arco-hero__side-message p {
	margin: 0;

	font-size:
		clamp(
			23px,
			2vw,
			32px
		);

	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.arco-hero__side-message strong {
	display: block;
	color: var(--arco-white);
	font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Botones generales
|--------------------------------------------------------------------------
*/

.arco-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 52px;
	padding: 0 26px;

	border: 0;
	border-radius: 999px;

	font-size: 15px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease,
		color 0.25s ease;
}

.arco-button svg {
	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;

	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	transition:
		transform 0.25s ease;
}

.arco-button:hover svg {
	transform: translateX(4px);
}

.arco-button--primary {
	background: var(--arco-green);
	color: var(--arco-white);

	box-shadow:
		0 13px 34px rgba(140, 180, 49, 0.28);
}

.arco-button--primary:hover,
.arco-button--primary:focus {
	background: var(--arco-light-green);
	color: var(--arco-white);

	transform: translateY(-3px);

	box-shadow:
		0 17px 40px rgba(140, 180, 49, 0.38);
}

.arco-button--secondary {
	border:
		1px solid rgba(255, 255, 255, 0.62);

	background:
		rgba(255, 255, 255, 0.08);

	color: var(--arco-white);

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.arco-button--secondary:hover,
.arco-button--secondary:focus {
	border-color: var(--arco-white);

	background:
		rgba(255, 255, 255, 0.16);

	color: var(--arco-white);

	transform: translateY(-3px);
}


/*
|--------------------------------------------------------------------------
| Indicador Scroll Hero
|--------------------------------------------------------------------------
*/

.arco-hero__scroll {
	position: absolute;

	left: 50%;
	bottom: 75px;

	z-index: 4;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 7px;

	color: rgba(255, 255, 255, 0.82);

	font-size: 11px;
	font-weight: 600;

	letter-spacing: 0.08em;

	text-transform: uppercase;
	text-decoration: none;

	transform: translateX(-50%);
}

.arco-hero__scroll svg {
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;

	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;

	animation:
		arco-scroll-down
		1.8s ease-in-out infinite;
}


/*
|--------------------------------------------------------------------------
| Curva inferior Hero
|--------------------------------------------------------------------------
*/

.arco-hero__bottom {
	position: absolute;

	left: 0;
	right: 0;
	bottom: -1px;

	z-index: 3;

	height: 96px;

	pointer-events: none;
}

.arco-hero__bottom svg {
	display: block;
	width: 100%;
	height: 100%;
}

.arco-hero__bottom path {
	fill: var(--arco-white);
}


/*
|--------------------------------------------------------------------------
| Sección - ¿Qué es ARCO?
|--------------------------------------------------------------------------
*/

.arco-about {
	position: relative;

	padding: 115px 0 125px;

	background: #f6f7f5;

	overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| Decoraciones de fondo About
|--------------------------------------------------------------------------
*/

.arco-about::before {
	content: '';

	position: absolute;

	right: -180px;
	top: -120px;

	width: 460px;
	height: 460px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(0, 132, 201, 0.05) 0%,
			rgba(0, 132, 201, 0) 70%
		);

	pointer-events: none;
}

.arco-about::after {
	content: '';

	position: absolute;

	left: -220px;
	bottom: -180px;

	width: 420px;
	height: 420px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(140, 180, 49, 0.07) 0%,
			rgba(140, 180, 49, 0) 70%
		);

	pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Contenedor About
|--------------------------------------------------------------------------
*/

.arco-about__container {
	position: relative;

	z-index: 2;

	width:
		min(
			var(--arco-container-width),
			calc(100% - 90px)
		);

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(360px, 510px)
		minmax(0, 1fr);

	align-items: center;

	gap:
		clamp(
			38px,
			5vw,
			90px
		);
}


/*
|--------------------------------------------------------------------------
| Visual izquierdo
|--------------------------------------------------------------------------
*/

.arco-about__visual {
	position: relative;

	z-index: 3;

	display: flex;

	align-items: center;
	justify-content: center;
}

/*
|--------------------------------------------------------------------------
| Contenido About
|--------------------------------------------------------------------------
*/

.arco-about__content {
	position: relative;

	z-index: 1;

	margin-left: -95px;

	padding:
		54px
		54px
		36px
		130px;

	opacity: 0;

	transform:
		translateY(30px);

	transition:
		opacity 0.9s ease,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

	transition-delay:
		0.20s;
}

/*
|--------------------------------------------------------------------------
| Estado visible About
|--------------------------------------------------------------------------
*/

.arco-about.is-visible
.arco-about__photo {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}

.arco-about.is-visible
.arco-about__content {
	opacity: 1;

	transform:
		translateY(0);
}

.arco-about.is-visible
.arco-about__arc--green {
	animation:
		arco-about-green-reveal
		1.15s
		cubic-bezier(0.22, 1, 0.36, 1)
		forwards;
}

.arco-about.is-visible
.arco-about__arc--blue {
	animation:
		arco-about-blue-reveal
		1.20s
		cubic-bezier(0.22, 1, 0.36, 1)
		0.10s
		forwards;
}


/*
|--------------------------------------------------------------------------
| Encabezado About
|--------------------------------------------------------------------------
*/

.arco-about__heading {
	margin-bottom: 24px;
}

.arco-about__eyebrow {
	display: block;

	margin-bottom: 14px;

	color: var(--arco-green);

	font-size: 13px;
	font-weight: 700;

	letter-spacing: 0.1em;

	text-transform: uppercase;
}

.arco-about__heading h2 {
	margin: 0;

	color: var(--arco-dark-green);

	font-size:
		clamp(
			44px,
			5vw,
			76px
		);

	font-weight: 500;

	line-height: 0.98;

	letter-spacing: -0.05em;
}

.arco-about__heading h2 strong {
	color: var(--arco-blue);

	font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Introducción About
|--------------------------------------------------------------------------
*/

.arco-about__intro {
	display: grid;

	grid-template-columns:
		1fr
		1fr;

	gap: 28px;

	margin-bottom: 28px;
}

.arco-about__intro p {
	margin: 0;

	color: #46635a;

	font-size: 17px;

	line-height: 1.7;
}

/*
|--------------------------------------------------------------------------
| Acciones About
|--------------------------------------------------------------------------
*/

.arco-about__actions {
	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-top: 28px;
}

.arco-about__link {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	min-height: 42px;

	padding:
		0
		18px;

	border-radius: 999px;

	background:
		rgba(140, 180, 49, 0.10);

	border:
		1px solid rgba(140, 180, 49, 0.20);

	color: var(--arco-dark-green);

	font-size: 14px;
	font-weight: 600;

	text-decoration: none;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		border-color 0.25s ease,
		transform 0.25s ease;
}

.arco-about__link span {
	color: var(--arco-green);

	transition:
		transform 0.25s ease,
		color 0.25s ease;
}

.arco-about__link:hover {
	background:
		var(--arco-green);

	border-color:
		var(--arco-green);

	color:
		var(--arco-white);

	transform:
		translateY(-2px);
}

.arco-about__link:hover span {
	color:
		var(--arco-white);

	transform:
		translateX(3px);
}


/*
|--------------------------------------------------------------------------
| Animaciones
|--------------------------------------------------------------------------
*/

@keyframes arco-fade-up {

	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}

@keyframes arco-side-reveal {

	from {
		opacity: 0;
		transform: translateX(25px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}

}

@keyframes arco-float-symbol {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}

}

@keyframes arco-scroll-down {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(7px);
	}

}

@keyframes arco-hero-zoom {

	from {
		transform: scale(1.025);
	}

	to {
		transform: scale(1.065);
	}

}

/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

	.arco-header .arco-menu-toggle {
		display: none !important;

		visibility: hidden !important;

		opacity: 0 !important;

		width: 0 !important;
		height: 0 !important;

		margin: 0 !important;
		padding: 0 !important;

		pointer-events: none !important;
	}

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	:root {
		--arco-header-height: 96px;
	}

	.arco-header__container {
		width:
			min(
				calc(100% - 40px),
				var(--arco-container-width)
			);

		grid-template-columns:
			minmax(170px, 1fr)
			auto
			auto;

		gap: 18px;

		padding: 14px 0;
	}

	.arco-header__mcd-logo {
		max-width: 205px;
		max-height: 54px;
	}

	.arco-header__arco-logo {
		max-width: 86px;
		max-height: 64px;
	}

	.arco-header__brand {
		order: 2;
	}

	button.arco-menu-toggle {
		display: flex !important;

		order: 3;

		flex-shrink: 0;
	}

	.arco-header__navigation {
		position: fixed;

		top: var(--arco-header-height);

		left: 20px;
		right: 20px;

		display: block;

		max-height:
			calc(
				100vh
				- var(--arco-header-height)
				- 30px
			);

		padding: 18px;

		overflow-y: auto;

		border:
			1px solid rgba(23, 89, 56, 0.08);

		border-radius:
			0 0 22px 22px;

		background:
			rgba(255, 255, 255, 0.98);

		box-shadow:
			0 20px 48px rgba(23, 89, 56, 0.18);

		opacity: 0;

		visibility: hidden;

		transform:
			translateY(-14px);

		transition:
			opacity 0.25s ease,
			visibility 0.25s ease,
			transform 0.25s ease;

		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
	}

	body.admin-bar .arco-header__navigation {
		top:
			calc(
				var(--arco-header-height)
				+ 32px
			);
	}

	.arco-header.menu-open
	.arco-header__navigation {
		opacity: 1;

		visibility: visible;

		transform:
			translateY(0);
	}

	.arco-menu {
		flex-direction: column;

		align-items: stretch;

		gap: 4px;

		width: 100%;
	}

	.arco-menu > li {
		width: 100%;
	}

	.arco-menu > li > a {
		display: flex;

		width: 100%;

		padding: 14px 16px;

		border-radius: 12px;

		color: var(--arco-dark-green);

		justify-content: flex-start;
	}

	.arco-menu > li > a:hover {
		background:
			rgba(0, 132, 201, 0.07);

		color:
			var(--arco-blue);
	}

	.arco-menu > li > a::after {
		display: none;
	}

	.arco-menu > li > a.arco-menu__cta {
		justify-content: center;

		margin-top: 8px;

		color:
			var(--arco-white);
	}

	.arco-hero__container {
		width:
			min(
				calc(100% - 40px),
				var(--arco-container-width)
			);

		grid-template-columns:
			minmax(0, 1fr);

		padding-top:
			calc(
				var(--arco-header-height)
				+ 85px
			);

		padding-bottom: 145px;
	}

	.arco-hero__content {
		max-width: 650px;
	}

	.arco-hero__side-message {
		display: none;
	}

	.arco-hero__symbol {
		right: -20vw;
		top: 40%;

		width:
			min(
				95vw,
				760px
			);

		opacity: 0.08;
	}

	.arco-about {
		padding: 100px 0 110px;
	}

	.arco-about__container {
		width:
			calc(
				100% - 56px
			);
		grid-template-columns:
			minmax(320px, 430px)
			minmax(0, 1fr);
		gap: 46px;
	}

	.arco-about__content {
		margin-left: -55px;
		padding:
			42px
			32px
			30px
			86px;
	}

	.arco-about__content::before {
		left: -110px;
		right: -12px;
		top: -18px;
		bottom: -18px;
		border-radius:
			0
			999px
			999px
			0;
	}

	.arco-about__intro {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/*
|--------------------------------------------------------------------------
| Tablet WordPress Admin Bar
|--------------------------------------------------------------------------
*/

@media (max-width: 782px) {

	body.admin-bar .arco-header {
		top: 46px;
	}

	body.admin-bar .arco-header__navigation {
		top:
			calc(
				var(--arco-header-height)
				+ 46px
			);
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-hero {
		min-height: 100svh;

		align-items: flex-end;
	}

	.arco-hero__background {
		background-position: 56% center;

		animation: none;

		transform: scale(1.03);
	}

	.arco-hero__overlay {
		background:
			linear-gradient(
				180deg,
				rgba(8, 45, 37, 0.30) 0%,
				rgba(8, 45, 37, 0.50) 28%,
				rgba(8, 48, 39, 0.94) 72%,
				rgba(8, 48, 39, 0.99) 100%
			);
	}

	.arco-hero__container {
		width:
			calc(
				100% - 36px
			);

		display: block;

		padding:
			calc(
				var(--arco-header-height)
				+ 100px
			)
			0
			135px;
	}

	.arco-hero__content {
		width: 100%;
		max-width: 100%;
	}

	.arco-hero__symbol {
		top: 29%;
		right: -35vw;

		width: 125vw;

		opacity: 0.065;
	}

	.arco-hero__eyebrow {
		margin-bottom: 20px;

		padding: 9px 15px;

		font-size: 10px;

		letter-spacing: 0.06em;
	}

	.arco-hero__title {
		font-size:
			clamp(
				48px,
				15vw,
				74px
			);

		line-height: 0.97;
	}

	.arco-hero__subtitle {
		margin-top: 25px;

		font-size: 27px;
	}

	.arco-hero__description {
		margin-top: 18px;

		font-size: 16px;

		line-height: 1.55;
	}

	.arco-hero__actions {
		margin-top: 28px;
	}

	.arco-hero__side-message,
	.arco-hero__scroll {
		display: none;
	}

	.arco-hero__bottom {
		height: 68px;
	}

	.arco-about {
		padding:
			82px
			0
			92px;
	}

	.arco-about__container {
		width:
			calc(
				100% - 36px
			);

		grid-template-columns:
			1fr;

		gap: 48px;
	}

	.arco-about__visual {
		order: 1;
	}

	.arco-about__content {
		order: 2;
		margin-left: 0;
		padding:
			34px
			24px
			26px;
	}

	.arco-about__content::before {
		left: -8px;
		right: -8px;
		top: -10px;
		bottom: -10px;
		border-left-color:
			#e0a847;
		border-radius:
			42px;
	}

	.arco-about__photo-wrap {
		width:
			min(
				100%,
				420px
			);
	}

	.arco-about__heading h2 {
		font-size:
			clamp(
				40px,
				13vw,
				60px
			);
	}

	.arco-about__intro {
		display: block;
	}

	.arco-about__intro p + p {
		margin-top: 16px;
	}

	.arco-about__actions {
		flex-direction: column;

		align-items: stretch;
	}

	.arco-about__link {
		justify-content: space-between;
	}

}


/*
|--------------------------------------------------------------------------
| Móviles pequeños
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

	:root {
		--arco-header-height: 84px;
	}

	body.admin-bar .arco-header {
		top: 0;
	}

	body.admin-bar .arco-header__navigation {
		top:
			var(
				--arco-header-height
			);
	}

	.arco-header__container {
		width:
			calc(
				100% - 28px
			);

		grid-template-columns:
			minmax(130px, 1fr)
			auto
			auto;

		gap: 11px;

		padding: 10px 0;
	}

	.arco-header__mcd-logo {
		max-width: 150px;

		max-height: 44px;
	}

	.arco-header__arco-logo {
		max-width: 62px;

		max-height: 54px;
	}

	button.arco-menu-toggle {
		width: 42px;

		height: 42px;

		padding: 9px;
	}

	.arco-menu-toggle span {
		width: 23px;
	}

	.arco-header__navigation {
		left: 14px;
		right: 14px;

		padding: 15px;
	}

	.arco-hero__container {
		width:
			calc(
				100% - 30px
			);

		padding-bottom: 120px;
	}

	.arco-hero__title {
		font-size:
			clamp(
				44px,
				14vw,
				68px
			);
	}

	.arco-hero__subtitle {
		font-size: 25px;
	}

	.arco-hero__actions {
		flex-direction: column;

		align-items: stretch;
	}

	.arco-button {
		width: 100%;
	}

}


/*
|--------------------------------------------------------------------------
| Móviles muy pequeños
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.arco-about__photo {
		width: 70%;
		height: 70%;
	}

	.arco-about__arc--green {
		--arc-size: 86%;
		--arc-thickness: 27px;

		width: var(--arc-size);
		height: var(--arc-size);

		left: 7%;
		top: 6%;
	}

	.arco-about__arc--blue {
		--arc-size: 84%;
		--arc-thickness: 20px;

		width: var(--arc-size);
		height: var(--arc-size);

		left: 8%;
		top: 14%;
	}

	.arco-about__heading h2 {
		font-size: 42px;
	}

}

@media (max-width: 390px) {

	.arco-header__container {
		grid-template-columns:
			minmax(105px, 1fr)
			auto
			auto;

		gap: 8px;
	}

	.arco-header__mcd-logo {
		max-width: 128px;
	}

	.arco-header__arco-logo {
		max-width: 52px;
	}

	button.arco-menu-toggle {
		width: 40px;
		height: 40px;
	}

	.arco-hero__title {
		font-size: 44px;
	}

	.arco-hero__subtitle {
		font-size: 23px;
	}

}


/*
|--------------------------------------------------------------------------
| Reducción de animaciones
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.arco-hero__background,
	.arco-hero__symbol img,
	.arco-hero__scroll svg,
	.arco-hero__eyebrow,
	.arco-hero__title,
	.arco-hero__subtitle,
	.arco-hero__description,
	.arco-hero__actions,
	.arco-hero__side-message,
	.arco-about__arc--green,
	.arco-about__arc--blue {
		animation: none !important;
	}

	.arco-hero__eyebrow,
	.arco-hero__title,
	.arco-hero__subtitle,
	.arco-hero__description,
	.arco-hero__actions,
	.arco-hero__side-message,
	.arco-about__photo,
	.arco-about__content,
	.arco-about__arc--green,
	.arco-about__arc--blue {
		opacity: 1;

		transform: none;
	}

}

/*
|--------------------------------------------------------------------------
| AJUSTES FINALES - INTEGRACIÓN HERO + ABOUT
|--------------------------------------------------------------------------
| Este bloque se deja al FINAL del archivo para prevalecer sobre reglas viejas.
|--------------------------------------------------------------------------
*/

.arco-hero__bottom path {
	fill: #f6f7f5;
}

.arco-about {
	position: relative;
	padding: 85px 0 125px;
	background: #f6f7f5;
	overflow: hidden;
}

.arco-about__container {
	position: relative;
	z-index: 2;

	width: min(
		var(--arco-container-width),
		calc(100% - 90px)
	);

	margin: 0 auto;

	display: grid;
	grid-template-columns:
		minmax(360px, 510px)
		minmax(0, 1fr);

	align-items: center;
	gap: clamp(38px, 5vw, 90px);
}

/*
|--------------------------------------------------------------------------
| Línea naranja - SOLO DESKTOP / TABLET
|--------------------------------------------------------------------------
| Sale desde detrás de la composición circular.
|--------------------------------------------------------------------------
*/

.arco-about__container::before {
	content: '';
	position: absolute;
	z-index: 0;

	left: 240px;
	top: 8px;
	right: 0;
	bottom: 8px;

	border: 1.5px solid #e0a847;
	border-left-color: transparent;

	border-radius:
		0
		999px
		999px
		0;

	pointer-events: none;
}

.arco-about__visual {
	position: relative;
	z-index: 3;
}

.arco-about__content {
	position: relative;
	z-index: 2;

	margin-left: -55px;

	padding:
		48px
		50px
		42px
		90px;

	opacity: 0;

	transform: translateY(30px);

	transition:
		opacity 0.9s ease,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

	transition-delay: 0.20s;
}

.arco-about.is-visible .arco-about__content {
	opacity: 1;
	transform: translateY(0);
}

/*
|--------------------------------------------------------------------------
| Eliminar borde y bloque destacado antiguos
|--------------------------------------------------------------------------
*/

.arco-about__content::before {
	content: none !important;
	display: none !important;
}

.arco-about__highlight {
	display: none !important;
}

.arco-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

/*
|--------------------------------------------------------------------------
| COMPOSICIÓN CIRCULAR FINAL
|--------------------------------------------------------------------------
| Foto, verde y azul comparten exactamente el mismo centro.
|--------------------------------------------------------------------------
*/

.arco-about__photo-wrap {
	position: relative;
	width: min(100%, 500px);
	aspect-ratio: 1;
	margin: 0 auto;
}

.arco-about__photo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;

	width: 74%;
	height: auto;
	aspect-ratio: 1;

	border-radius: 50%;
	overflow: hidden;

	box-shadow:
		0 30px 70px rgba(23, 89, 56, 0.14);

	opacity: 0;

	transform:
		translate(-50%, -50%)
		scale(0.88);

	transition:
		opacity 0.85s ease,
		transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-about__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.arco-about__arc {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1;
	opacity: 0;
	pointer-events: none;
}

.arco-about__arc svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.arco-about__arc circle {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
|--------------------------------------------------------------------------
| Verde - media circunferencia superior
|--------------------------------------------------------------------------
*/

.arco-about__arc--green {
	z-index: 4;
	width: 88%;
	height: auto;

	transform:
		translate(-50%, -50%)
		rotate(180deg)
		scale(0.90);

	filter:
		drop-shadow(
			0 10px 18px rgba(140, 180, 49, 0.10)
		);
}

.arco-about__green-circle {
	stroke: url(#arcoGreenGradient);
	stroke-width: 13;
	stroke-dasharray: 126 126;
}

/*
|--------------------------------------------------------------------------
| Azul - media circunferencia hacia derecha / inferior
|--------------------------------------------------------------------------
*/

.arco-about__arc--blue {
	z-index: 3;
	width: 84%;
	height: auto;

	transform:
		translate(-50%, -50%)
		rotate(42deg)
		scale(0.90);

	filter:
		drop-shadow(
			0 12px 20px rgba(0, 132, 201, 0.12)
		);
}

.arco-about__blue-circle {
	stroke: url(#arcoBlueGradient);
	stroke-width: 9;
	stroke-dasharray: 126 126;
}

/*
|--------------------------------------------------------------------------
| Estado visible
|--------------------------------------------------------------------------
*/

.arco-about.is-visible .arco-about__photo {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}

/*
|--------------------------------------------------------------------------
| Animaciones finales
|--------------------------------------------------------------------------
*/

@keyframes arco-about-green-reveal-final {
	0% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			rotate(70deg)
			scale(0.88);
	}

	65% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			rotate(186deg)
			scale(1.02);
	}

	100% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			rotate(180deg)
			scale(1);
	}
}

@keyframes arco-about-blue-reveal-final {
	0% {
		opacity: 0;
		transform:
			translate(-50%, -50%)
			rotate(140deg)
			scale(0.88);
	}

	65% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			rotate(36deg)
			scale(1.02);
	}

	100% {
		opacity: 1;
		transform:
			translate(-50%, -50%)
			rotate(42deg)
			scale(1);
	}
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	.arco-about {
		padding: 80px 0 105px;
	}

	.arco-about__container {
		width: calc(100% - 56px);

		grid-template-columns:
			minmax(320px, 430px)
			minmax(0, 1fr);

		gap: 46px;
	}

	.arco-about__container::before {
		left: 190px;
		top: 6px;
		bottom: 6px;
	}

	.arco-about__content {
		margin-left: -40px;

		padding:
			42px
			34px
			36px
			72px;
	}

	.arco-about__photo-wrap {
		width: min(100%, 440px);
	}

	.arco-about__photo {
		width: 74%;
	}

	.arco-about__arc--green {
		width: 88%;
	}

	.arco-about__green-circle {
		stroke-width: 12;
	}

	.arco-about__arc--blue {
		width: 84%;
	}

	.arco-about__blue-circle {
		stroke-width: 8.5;
	}
}

/*
|--------------------------------------------------------------------------
| MÓVIL - restaurado
|--------------------------------------------------------------------------
| En móvil:
| - no hay línea naranja;
| - no hay margen negativo;
| - no hay caja alrededor del texto;
| - composición centrada y separada del contenido;
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-about {
		padding:
			52px
			0
			88px;
	}

	.arco-about__container {
		width: calc(100% - 36px);

		display: grid;
		grid-template-columns: 1fr;

		gap: 36px;
	}

	.arco-about__container::before {
		content: none !important;
		display: none !important;
	}

	.arco-about__visual {
		order: 1;

		width: 100%;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arco-about__content {
		order: 2;

		width: 100%;
		max-width: 100%;

		margin: 0;

		padding: 0;

		opacity: 0;

		transform: translateY(24px);

		transition:
			opacity 0.8s ease,
			transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.arco-about.is-visible .arco-about__content {
		opacity: 1;
		transform: translateY(0);
	}

	.arco-about__heading {
		margin-bottom: 22px;
	}

	.arco-about__eyebrow {
		margin-bottom: 10px;
	}

	.arco-about__heading h2 {
		font-size:
			clamp(
				40px,
				13vw,
				60px
			);
	}

	.arco-about__intro {
		display: block;
		margin-bottom: 0;
	}

	.arco-about__intro p {
		font-size: 16px;
		line-height: 1.65;
	}

	.arco-about__intro p + p {
		margin-top: 16px;
	}

	.arco-about__actions {
		flex-direction: column;
		align-items: stretch;

		gap: 10px;

		margin-top: 28px;
	}

	.arco-about__link {
		width: 100%;
		justify-content: space-between;
	}

	.arco-about__photo-wrap {
		width: min(100%, 390px);
	}

	.arco-about__photo {
		top: 50%;
		left: 50%;

		width: 74%;
		height: auto;

		transform:
			translate(-50%, -50%)
			scale(0.88);
	}

	.arco-about.is-visible .arco-about__photo {
		transform:
			translate(-50%, -50%)
			scale(1);
	}

	.arco-about__arc--green {
		top: 50%;
		left: 50%;

		width: 88%;
		height: auto;
	}

	.arco-about__green-circle {
		stroke-width: 11.5;
	}

	.arco-about__arc--blue {
		top: 50%;
		left: 50%;

		width: 84%;
		height: auto;
	}

	.arco-about__blue-circle {
		stroke-width: 8;
	}
}

/*
|--------------------------------------------------------------------------
| MÓVIL PEQUEÑO
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

	.arco-about {
		padding:
			44px
			0
			78px;
	}

	.arco-about__container {
		width: calc(100% - 30px);
		gap: 28px;
	}

	.arco-about__photo-wrap {
		width: min(100%, 340px);
	}

	.arco-about__photo {
		width: 75%;
	}

	.arco-about__arc--green {
		width: 89%;
	}

	.arco-about__green-circle {
		stroke-width: 11;
	}

	.arco-about__arc--blue {
		width: 85%;
	}

	.arco-about__blue-circle {
		stroke-width: 7.5;
	}
}

@media (max-width: 390px) {

	.arco-about__container {
		width: calc(100% - 26px);
	}

	.arco-about__photo-wrap {
		width: min(100%, 310px);
	}

	.arco-about__heading h2 {
		font-size: 40px;
	}
}

/*
|--------------------------------------------------------------------------
| REDUCED MOTION - conservar centro geométrico
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-about__photo {
		opacity: 1 !important;

		transform:
			translate(-50%, -50%) !important;
	}

	.arco-about__arc--green {
		opacity: 1 !important;

		transform:
			translate(-50%, -50%)
			rotate(180deg) !important;
	}

	.arco-about__arc--blue {
		opacity: 1 !important;

		transform:
			translate(-50%, -50%)
			rotate(42deg) !important;
	}
}

/*
|--------------------------------------------------------------------------
| Ajuste escritorio - ampliar composición real
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

	.arco-about__container {
		grid-template-columns:
			minmax(520px, 620px)
			minmax(0, 1fr);

		gap: 30px;
	}

	.arco-about__visual {
		overflow: visible;
	}

	.arco-about__photo-wrap {
		width: 620px;
		max-width: none;
	}

	.arco-about__content {
		margin-left: -70px;
	}

	.arco-about__container::before {
		left: 300px;
	}

}


/*
|--------------------------------------------------------------------------
| SECCIÓN - ¿QUIÉNES PUEDEN PARTICIPAR?
|--------------------------------------------------------------------------
*/

.arco-participa {
	--arco-participa-blue: #2d95cc;
	--arco-participa-green: #97c341;
	--arco-participa-cream: #f3efb0;

	position: relative;
	z-index: 2;
	width: 100%;

	/*
	|--------------------------------------------------------------------------
	| Esta es la clave:
	| la sección sube para traslaparse con la anterior.
	|--------------------------------------------------------------------------
	*/
	margin-top: -72px;
	padding-top: 72px;

	background: transparent;
	overflow: visible;
	isolation: isolate;
}


/*
|--------------------------------------------------------------------------
| Fondo único
|--------------------------------------------------------------------------
*/

.arco-participa__bg {
	position: absolute;
	top: -72px;
	left: 0;
	width: 100%;
	height: calc(100% + 72px);
	z-index: 1;
	pointer-events: none;
	overflow: hidden;

	opacity: 0;
	transform: translateY(26px) scale(1.015);
	transition:
		opacity 1s ease,
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-participa__bg-svg {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 760px;
}

.arco-participa__shape-green {
	fill: var(--arco-participa-green);
}

.arco-participa__shape-blue {
	fill: var(--arco-participa-blue);
}


/*
|--------------------------------------------------------------------------
| Isotipo decorativo
|--------------------------------------------------------------------------
*/

.arco-participa__isotipo {
	position: absolute;
	right: 4.5%;
	bottom: 26px;
	z-index: 2;
	pointer-events: none;

	width: min(360px, 24vw);

	opacity: 0;
	transform: translateY(18px) scale(0.96);
	transition:
		opacity 1s ease,
		transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0.55s;
}

.arco-participa__isotipo img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.12;
}


/*
|--------------------------------------------------------------------------
| Contenido boxed
|--------------------------------------------------------------------------
*/

.arco-participa__inner {
	position: relative;
	z-index: 3;

	width: min(var(--arco-container-width), calc(100% - 72px));
	margin: 0 auto;
	min-height: 690px;

	padding: 42px 24px 34px;

	display: grid;
	grid-template-columns: minmax(340px, 500px) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}


/*
|--------------------------------------------------------------------------
| Columnas
|--------------------------------------------------------------------------
*/

.arco-participa__left,
.arco-participa__right {
	position: relative;
	z-index: 3;
}


/*
|--------------------------------------------------------------------------
| Imagen
|--------------------------------------------------------------------------
*/

.arco-participa__image-wrap {
	max-width: 450px;
	margin: 0 auto 2px;

	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0.18s;
}

.arco-participa__image-wrap img {
	display: block;
	width: 100%;
	height: auto;
}


/*
|--------------------------------------------------------------------------
| Texto
|--------------------------------------------------------------------------
*/

.arco-participa__copy {
	max-width: 390px;
	margin: -4px auto 0;
	color: #ffffff;

	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: 0.30s;
}

.arco-participa__title {
	margin: 0 0 10px;
	line-height: 0.94;
	letter-spacing: -0.03em;
}

.arco-participa__title span {
	display: block;
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 300;
}

.arco-participa__title strong {
	display: block;
	font-size: clamp(54px, 5.1vw, 84px);
	font-weight: 800;
}

.arco-participa__text {
	margin: 0;
	max-width: 360px;
	font-size: 17px;
	line-height: 1.52;
}


/*
|--------------------------------------------------------------------------
| Derecha
|--------------------------------------------------------------------------
*/

.arco-participa__right {
	padding-top: 86px;
}


/*
|--------------------------------------------------------------------------
| Chips
|--------------------------------------------------------------------------
*/

.arco-participa__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 14px;
	align-content: flex-start;
	max-width: 800px;
}

.arco-participa__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 40px;
	padding: 12px 18px;

	background: var(--arco-participa-cream);
	color: #1482d0;

	border-radius: 999px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;

	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);

	opacity: 0;
	transform: translateY(18px) scale(0.96);
	transition:
		opacity 0.55s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}


/*
|--------------------------------------------------------------------------
| Estado visible
|--------------------------------------------------------------------------
*/

.arco-participa.is-visible .arco-participa__bg {
	opacity: 1;
	transform: translateY(0) scale(1);
	animation: arco-participa-float 14s ease-in-out 1.1s infinite alternate;
}

.arco-participa.is-visible .arco-participa__image-wrap,
.arco-participa.is-visible .arco-participa__copy,
.arco-participa.is-visible .arco-participa__chip,
.arco-participa.is-visible .arco-participa__isotipo {
	opacity: 1;
}

.arco-participa.is-visible .arco-participa__image-wrap {
	transform: translateY(0) scale(1);
}

.arco-participa.is-visible .arco-participa__copy,
.arco-participa.is-visible .arco-participa__chip,
.arco-participa.is-visible .arco-participa__isotipo {
	transform: translateY(0) scale(1);
}


/*
|--------------------------------------------------------------------------
| Animación del fondo como una sola pieza
|--------------------------------------------------------------------------
*/

@keyframes arco-participa-float {
	0% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-6px) scale(1.006);
	}
	100% {
		transform: translateY(4px) scale(1.003);
	}
}


/*
|--------------------------------------------------------------------------
| Delays de chips
|--------------------------------------------------------------------------
*/

.arco-participa.is-visible .arco-participa__chip:nth-child(1)  { transition-delay: 0.38s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(2)  { transition-delay: 0.44s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(3)  { transition-delay: 0.50s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(4)  { transition-delay: 0.56s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(5)  { transition-delay: 0.62s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(6)  { transition-delay: 0.68s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(7)  { transition-delay: 0.74s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(8)  { transition-delay: 0.80s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(9)  { transition-delay: 0.86s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(10) { transition-delay: 0.92s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(11) { transition-delay: 0.98s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(12) { transition-delay: 1.04s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(13) { transition-delay: 1.10s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(14) { transition-delay: 1.16s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(15) { transition-delay: 1.22s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(16) { transition-delay: 1.28s; }
.arco-participa.is-visible .arco-participa__chip:nth-child(17) { transition-delay: 1.34s; }


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
	.arco-participa {
		margin-top: -58px;
		padding-top: 58px;
	}

	.arco-participa__bg {
		top: -58px;
		height: calc(100% + 58px);
	}

	.arco-participa__bg-svg {
		min-height: 690px;
	}

	.arco-participa__inner {
		width: calc(100% - 44px);
		min-height: 640px;
		padding: 36px 18px 32px;
		grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
		gap: 24px;
	}

	.arco-participa__right {
		padding-top: 64px;
	}

	.arco-participa__chip {
		font-size: 13px;
		padding: 11px 16px;
	}

	.arco-participa__isotipo {
		width: 250px;
		right: 4%;
		bottom: 20px;
	}
}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
	.arco-participa {
		margin-top: -42px;
		padding-top: 42px;
	}

	.arco-participa__bg {
		top: -42px;
		height: calc(100% + 42px);
	}

	.arco-participa__bg-svg {
		min-height: 920px;
	}

	.arco-participa__inner {
		width: calc(100% - 24px);
		min-height: auto;
		padding: 24px 14px 100px;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.arco-participa__left {
		text-align: center;
	}

	.arco-participa__image-wrap {
		max-width: 385px;
		margin-bottom: 2px;
	}

	.arco-participa__copy {
		max-width: 100%;
		margin-top: 0;
		text-align: center;
	}

	.arco-participa__text {
		max-width: 340px;
		margin: 0 auto;
		font-size: 15px;
	}

	.arco-participa__right {
		padding-top: 16px;
	}

	.arco-participa__chips {
		justify-content: center;
		gap: 10px;
	}

	.arco-participa__chip {
		font-size: 12px;
		min-height: 38px;
		padding: 11px 15px;
	}

	.arco-participa__isotipo {
		width: 160px;
		right: 12px;
		bottom: 12px;
	}

	.arco-participa__isotipo img {
		opacity: 0.09;
	}

	.arco-participa.is-visible .arco-participa__bg {
		animation: arco-participa-float-mobile 14s ease-in-out 1s infinite alternate;
	}
}

@keyframes arco-participa-float-mobile {
	0% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-3px) scale(1.003);
	}
	100% {
		transform: translateY(2px) scale(1.001);
	}
}


/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
	.arco-participa__bg-svg {
		min-height: 900px;
	}

	.arco-participa__inner {
		padding-bottom: 92px;
	}

	.arco-participa__title span {
		font-size: 30px;
	}

	.arco-participa__title strong {
		font-size: 58px;
	}

	.arco-participa__isotipo {
		width: 136px;
		right: 8px;
		bottom: 10px;
	}
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
	.arco-participa__bg,
	.arco-participa__image-wrap,
	.arco-participa__copy,
	.arco-participa__chip,
	.arco-participa__isotipo {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

.arco-participa__title {
	margin: 0 0 12px;
	line-height: 0.92;
	letter-spacing: -0.035em;
}

.arco-participa__title span {
	display: block;

	font-size:
		clamp(
			30px,
			3.2vw,
			54px
		);

	font-weight: 300;

	white-space: nowrap;
}

.arco-participa__title strong {
	display: block;

	font-size:
		clamp(
			58px,
			5.4vw,
			88px
		);

	font-weight: 800;

	line-height: 0.9;
}

@media (max-width: 520px) {

	.arco-participa__title span {
		font-size: clamp(26px, 8vw, 34px);
		white-space: nowrap;
	}

	.arco-participa__title strong {
		font-size: clamp(52px, 15vw, 68px);
	}

}
/*
|--------------------------------------------------------------------------
| SECCIÓN - ¿CÓMO FUNCIONA?
|--------------------------------------------------------------------------
*/

.arco-process {
	--arco-process-dark-green: #087452;
	--arco-process-blue: #2597d1;
	--arco-process-green: #74a633;
	--arco-process-orange: #f4a313;
	--arco-process-cream: #fbf9ed;
	--arco-process-text: #6e7472;
	--arco-process-panel-width: 390px;

	position: relative;
	z-index: 1;

	padding: 84px 0 64px;

	background: var(--arco-process-cream);

	overflow: hidden;
}

.arco-process *,
.arco-process *::before,
.arco-process *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Decoración
|--------------------------------------------------------------------------
*/

.arco-process__decoration {
	position: absolute;
	right: -60px;
	bottom: -100px;
	z-index: 0;

	width: min(680px, 55vw);

	opacity: 0.05;
	pointer-events: none;
}

.arco-process__decoration svg {
	display: block;
	width: 100%;
	height: auto;
}

.arco-process__decoration path {
	fill: none;
	stroke: var(--arco-blue);
	stroke-width: 7;
	stroke-linecap: round;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-process__container {
	position: relative;
	z-index: 2;

	width: min(
		var(--arco-container-width),
		calc(100% - 72px)
	);

	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.arco-process__header {
	max-width: 720px;

	margin: 0 auto 34px;

	text-align: center;

	opacity: 0;
	transform: translateY(24px);

	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-process__title {
	margin: 0 0 12px;

	color: var(--arco-process-blue);

	font-size: clamp(34px, 4vw, 58px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
}

.arco-process__title span,
.arco-process__title strong {
	display: inline;
}

.arco-process__title strong {
	font-weight: 800;
}

.arco-process__intro {
	max-width: 590px;

	margin: 0 auto;

	color: var(--arco-process-text);

	font-size: 16px;
	line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Video
|--------------------------------------------------------------------------
*/

.arco-process__video {
	width: min(760px, 100%);

	margin: 0 auto 46px;

	opacity: 0;

	transform:
		translateY(30px)
		scale(0.98);

	transition:
		opacity 0.9s ease 0.12s,
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.arco-process__video-frame,
.arco-process__video-placeholder {
	position: relative;

	width: 100%;
	aspect-ratio: 16 / 9;

	border-radius: 22px;

	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			#1d779d,
			#0c4967
		);

	box-shadow:
		0 24px 60px rgba(23, 89, 56, 0.14);
}

.arco-process__video-frame iframe {
	display: block;

	width: 100%;
	height: 100%;

	border: 0;
}

.arco-process__video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap: 26px;

	color: #ffffff;
}

.arco-process__video-placeholder::before {
	content: '';

	position: absolute;
	inset: 0;

	background:
		radial-gradient(
			circle at 40% 30%,
			rgba(255, 255, 255, 0.18),
			transparent 48%
		);

	pointer-events: none;
}

.arco-process__video-logo {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	line-height: 1;
}

.arco-process__video-mark {
	display: block;

	width: 110px;
	height: 42px;

	margin-bottom: 8px;

	border: 5px solid rgba(255, 255, 255, 0.95);
	border-top-color: transparent;
	border-radius: 50%;

	transform: rotate(-12deg);
}

.arco-process__video-logo strong {
	font-size: clamp(48px, 8vw, 82px);
	font-weight: 400;
}

.arco-process__video-logo small {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.arco-process__video-message {
	position: relative;

	display: inline-flex;
	align-items: center;

	gap: 12px;

	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.arco-process__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	border-radius: 50%;

	background: rgba(255, 255, 255, 0.94);
	color: var(--arco-process-blue);
}

.arco-process__play svg {
	width: 22px;
	height: 22px;

	fill: currentColor;
}


/*
|--------------------------------------------------------------------------
| Línea y etapas
|--------------------------------------------------------------------------
*/

.arco-process__timeline {
	position: relative;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	align-items: start;

	gap: clamp(24px, 4vw, 64px);

	width: 100%;
	max-width: 1320px;

	margin: 0 auto 38px;
}

.arco-process__line {
	position: absolute;

	top: 26px;
	left: 0;
	right: 0;
	z-index: 0;

	height: 2px;

	background: var(--arco-process-dark-green);

	opacity: 0;

	transform: scaleX(0);
	transform-origin: left center;

	transition:
		opacity 0.8s ease 0.25s,
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.arco-process__step {
	position: relative;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	min-width: 0;

	margin: 0;

	border-radius: 12px 12px 22px 22px;

	opacity: 0;
	transform: translateY(22px);

	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-process__step:nth-of-type(2) {
	transition-delay: 0.34s;
}

.arco-process__step:nth-of-type(3) {
	transition-delay: 0.44s;
}

.arco-process__step:nth-of-type(4) {
	transition-delay: 0.54s;
}


/*
|--------------------------------------------------------------------------
| Encabezado de etapa
|--------------------------------------------------------------------------
*/

.arco-process__step-button {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;

	gap: 12px;

	width: min(100%, var(--arco-process-panel-width));
	min-height: 54px;

	margin: 0 auto;
	padding: 7px 14px 7px 9px;

	border: 0 !important;
	border-radius: 11px;

	color: #ffffff !important;
	background: transparent;

	font-family: inherit;
	font-size: inherit;

	text-align: left;
	text-decoration: none;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	box-shadow:
		0 8px 20px rgba(23, 89, 56, 0.10);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-process__step-button,
.arco-process__step-button span,
.arco-process__step-button strong {
	color: #ffffff !important;
}

.arco-process__step-button svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
}

.arco-process__step--dark-green
.arco-process__step-button {
	background: var(--arco-process-dark-green) !important;
}

.arco-process__step--blue
.arco-process__step-button {
	background: var(--arco-process-blue) !important;
}

.arco-process__step--green
.arco-process__step-button {
	background: var(--arco-process-green) !important;
}

.arco-process__step-button:hover,
.arco-process__step-button:focus-visible {
	transform: translateY(-2px);

	box-shadow:
		0 13px 25px rgba(23, 89, 56, 0.15);
}

.arco-process__step-button:focus-visible {
	outline:
		3px solid rgba(255, 255, 255, 0.72);

	outline-offset: 2px;
}


/*
|--------------------------------------------------------------------------
| Número romano
|--------------------------------------------------------------------------
*/

.arco-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 36px;

	width: 36px;
	height: 36px;

	margin: 0;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.24) !important;

	color: #ffffff !important;

	font-size: 21px;
	font-weight: 400;
	line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Título de etapa
|--------------------------------------------------------------------------
*/

.arco-process__step-title {
	display: block;

	flex: 1 1 auto;

	min-width: 0;
	margin: 0;

	color: #ffffff !important;

	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 700;
	line-height: 1.2;

	text-align: left;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/*
|--------------------------------------------------------------------------
| Flecha
|--------------------------------------------------------------------------
*/

.arco-process__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 24px;

	width: 24px;
	height: 24px;

	margin-left: auto;

	color: #ffffff !important;

	transition: transform 0.35s ease;
}

.arco-process__chevron svg {
	display: block;

	width: 22px;
	height: 22px;

	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.arco-process__step.is-open
.arco-process__chevron {
	transform: rotate(180deg);
}


/*
|--------------------------------------------------------------------------
| Panel desplegable
|--------------------------------------------------------------------------
*/

.arco-process__panel {
	position: relative;

	width: min(100%, var(--arco-process-panel-width));
	max-height: 0;

	margin: 0 auto;

	overflow: hidden;

	background: rgba(255, 255, 255, 0.96);

	border: 1px solid transparent;
	border-top: 0;
	border-radius: 0 0 22px 22px;

	opacity: 0;
	transform: translateY(-6px);

	transition:
		max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease,
		transform 0.35s ease,
		border-color 0.35s ease;
}

.arco-process__step--dark-green
.arco-process__panel {
	border-color: rgba(8, 116, 82, 0.48);
}

.arco-process__step--blue
.arco-process__panel {
	border-color: rgba(37, 151, 209, 0.55);
}

.arco-process__step--green
.arco-process__panel {
	border-color: rgba(116, 166, 51, 0.58);
}

.arco-process__step.is-open
.arco-process__panel {
	max-height: 420px;

	opacity: 1;
	transform: translateY(0);
}

.arco-process__panel-inner {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	padding: 18px 20px 20px;
}

.arco-process__panel p {
	width: 100%;

	margin: 0 auto;

	color: var(--arco-process-text) !important;

	font-size: 15px;
	font-weight: 400;
	line-height: 1.52;

	text-align: center !important;
}


/*
|--------------------------------------------------------------------------
| Apertura por hover
|--------------------------------------------------------------------------
*/

@media (hover: hover) and (pointer: fine) {

	.arco-process__step:hover
	.arco-process__panel {
		max-height: 420px;

		opacity: 1;
		transform: translateY(0);
	}

	.arco-process__step:hover
	.arco-process__chevron {
		transform: rotate(180deg);
	}

}


/*
|--------------------------------------------------------------------------
| Acciones
|--------------------------------------------------------------------------
*/

.arco-process__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	gap: 14px;

	opacity: 0;
	transform: translateY(22px);

	transition:
		opacity 0.8s ease 0.65s,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s;
}

.arco-process__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 12px;

	min-width: min(300px, 100%);
	min-height: 48px;

	padding: 10px 22px;

	border:
		1.5px solid
		var(--arco-process-orange);

	border-radius: 999px;

	background: rgba(255, 255, 255, 0.45);
	color: #e99400;

	font-size: 15px;
	font-weight: 700;

	text-decoration: none;
	text-transform: uppercase;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-process__action svg {
	width: 27px;
	height: 27px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.arco-process__action:hover,
.arco-process__action:focus-visible {
	background: var(--arco-process-orange);
	color: #ffffff;

	transform: translateY(-2px);

	box-shadow:
		0 12px 24px rgba(244, 163, 19, 0.20);
}


/*
|--------------------------------------------------------------------------
| Estado visible
|--------------------------------------------------------------------------
*/

.arco-process.is-visible
.arco-process__header,

.arco-process.is-visible
.arco-process__video,

.arco-process.is-visible
.arco-process__step,

.arco-process.is-visible
.arco-process__actions {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);
}

.arco-process.is-visible
.arco-process__line {
	opacity: 1;
	transform: scaleX(1);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (min-width: 769px) and (max-width: 1100px) {

	.arco-process {
		padding: 70px 0 58px;
	}

	.arco-process__container {
		width: calc(100% - 44px);
	}

	.arco-process__timeline {
		gap: 14px;
	}

	.arco-process__step-button,
	.arco-process__panel {
		width: 100%;
	}

	.arco-process__step-button {
		gap: 8px;
		padding-right: 9px;
	}

	.arco-process__step-title {
		font-size: 14px;
	}

	.arco-process__panel-inner {
		padding: 16px 16px 18px;
	}

	.arco-process__panel p {
		font-size: 14px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-process {
		padding: 58px 0 50px;
	}

	.arco-process__container {
		width: calc(100% - 28px);
	}

	.arco-process__header {
		margin-bottom: 26px;
	}

	.arco-process__video {
		margin-bottom: 32px;
	}

	.arco-process__video-frame,
	.arco-process__video-placeholder {
		border-radius: 16px;
	}

	.arco-process__timeline {
		grid-template-columns: 1fr;

		gap: 14px;

		margin-bottom: 30px;
	}

	.arco-process__line {
		top: 0;
		bottom: 0;
		left: 25px;
		right: auto;

		width: 2px;
		height: auto;

		transform: scaleY(0);
		transform-origin: top center;
	}

	.arco-process.is-visible
	.arco-process__line {
		transform: scaleY(1);
	}

	.arco-process__step {
		align-items: stretch;
	}

	.arco-process__step-button,
	.arco-process__panel {
		width: 100%;
		max-width: none;
	}

	.arco-process__step-button {
		min-height: 54px;

		padding:
			8px
			12px
			8px
			8px;
	}

	.arco-process__step-title {
		font-size: 16px;

		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.arco-process__panel-inner {
		padding:
			16px
			18px
			20px;
	}

	.arco-process__panel p {
		font-size: 14px;
		line-height: 1.5;
	}

	.arco-process__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.arco-process__action {
		width: 100%;
		min-width: 0;
	}

	.arco-process__decoration {
		right: -310px;
		width: 620px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.arco-process__title {
		font-size: 38px;
	}

	.arco-process__intro {
		font-size: 15px;
	}

	.arco-process__video-message {
		flex-direction: column;
	}

	.arco-process__step-button {
		gap: 8px;
	}

	.arco-process__number {
		flex-basis: 34px;

		width: 34px;
		height: 34px;

		font-size: 19px;
	}

	.arco-process__step-title {
		font-size: 15px;
	}

	.arco-process__panel-inner {
		padding:
			15px
			14px
			18px;
	}

}


/*
|--------------------------------------------------------------------------
| Reducción de movimiento
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-process__header,
	.arco-process__video,
	.arco-process__step,
	.arco-process__actions,
	.arco-process__line {
		opacity: 1 !important;

		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

}

/*
|--------------------------------------------------------------------------
| FIX DEFINITIVO - ENCABEZADOS Y PANELES ¿CÓMO FUNCIONA?
|--------------------------------------------------------------------------
*/

@media (min-width: 769px) {

	/*
	|--------------------------------------------------------------------------
	| Cada etapa ocupa toda su columna
	|--------------------------------------------------------------------------
	*/

	.arco-process__step {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;

		width: 100% !important;
		min-width: 0 !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Encabezado y panel con exactamente el mismo ancho
	|--------------------------------------------------------------------------
	*/

	.arco-process__step-button,
	.arco-process__panel {
		width: 100% !important;
		max-width: 390px !important;

		margin-left: auto !important;
		margin-right: auto !important;

		box-sizing: border-box !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Encabezado horizontal
	|--------------------------------------------------------------------------
	|
	| Usamos GRID para impedir que el tema
	| coloque el número encima del título.
	|
	|--------------------------------------------------------------------------
	*/

	.arco-process__step-button {
		display: grid !important;

		grid-template-columns:
			36px
			minmax(0, 1fr)
			24px !important;

		grid-template-rows:
			1fr !important;

		align-items: center !important;
		justify-items: stretch !important;

		column-gap: 12px !important;

		min-height: 54px !important;

		padding:
			8px
			14px
			8px
			9px !important;

		text-align: left !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Número romano
	|--------------------------------------------------------------------------
	*/

	.arco-process__number {
		grid-column: 1 !important;
		grid-row: 1 !important;

		display: inline-flex !important;

		align-items: center !important;
		justify-content: center !important;

		width: 36px !important;
		height: 36px !important;

		margin: 0 !important;

		align-self: center !important;
		justify-self: center !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Título en la misma línea
	|--------------------------------------------------------------------------
	*/

	.arco-process__step-title {
		grid-column: 2 !important;
		grid-row: 1 !important;

		display: block !important;

		width: auto !important;
		min-width: 0 !important;

		margin: 0 !important;

		align-self: center !important;

		color: #ffffff !important;

		font-size: clamp(15px, 1.25vw, 18px) !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;

		text-align: left !important;

		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Flecha
	|--------------------------------------------------------------------------
	*/

	.arco-process__chevron {
		grid-column: 3 !important;
		grid-row: 1 !important;

		display: inline-flex !important;

		align-items: center !important;
		justify-content: center !important;

		width: 24px !important;
		height: 24px !important;

		margin: 0 !important;

		align-self: center !important;
		justify-self: center !important;
	}


	/*
	|--------------------------------------------------------------------------
	| Panel debajo y del mismo tamaño
	|--------------------------------------------------------------------------
	*/

	.arco-process__panel {
		position: relative !important;

		left: auto !important;

		width: 100% !important;
		max-width: 390px !important;

		margin:
			0
			auto !important;

		transform:
			translateY(-6px) !important;
	}


	.arco-process__step.is-open
	.arco-process__panel,

	.arco-process__step:hover
	.arco-process__panel {
		transform:
			translateY(0) !important;
	}

}


/*
|--------------------------------------------------------------------------
| Escritorio ancho
|--------------------------------------------------------------------------
*/

@media (min-width: 1101px) {

	.arco-process__timeline {
		grid-template-columns:
			repeat(3, minmax(0, 1fr)) !important;

		gap:
			clamp(
				30px,
				4vw,
				64px
			) !important;
	}

}


/*
|--------------------------------------------------------------------------
| Tablet horizontal
|--------------------------------------------------------------------------
*/

@media (min-width: 769px) and (max-width: 1100px) {

	.arco-process__step-button,
	.arco-process__panel {
		width: 100% !important;
		max-width: 100% !important;
	}


	.arco-process__step-button {
		grid-template-columns:
			34px
			minmax(0, 1fr)
			22px !important;

		column-gap: 8px !important;
	}


	.arco-process__number {
		width: 34px !important;
		height: 34px !important;
	}


	.arco-process__step-title {
		font-size: 14px !important;
	}

}

/*
|--------------------------------------------------------------------------
| CONSTRUYE TU PROPUESTA
|--------------------------------------------------------------------------
*/

.arco-build {
	--arco-build-blue: #2597d1;
	--arco-build-deep-blue: #19779d;
	--arco-build-green: #91c63f;
	--arco-build-orange: #f5a112;
	--arco-build-cream: #fbfaf2;

	position: relative;

	padding: 72px 0 54px;

	background: #ffffff;

	overflow: hidden;
}

.arco-build *,
.arco-build *::before,
.arco-build *::after {
	box-sizing: border-box;
}

.arco-build__decoration {
	position: absolute;
	top: 0;
	left: 6%;

	width: 72px;
	height: 100%;

	pointer-events: none;
}

.arco-build__decoration svg {
	display: block;

	width: 100%;
	height: 100%;
}

.arco-build__decoration path {
	fill: none;

	stroke: var(--arco-build-deep-blue);
	stroke-width: 10;
	stroke-linecap: round;
}

.arco-build__container {
	position: relative;
	z-index: 2;

	width: min(
		var(--arco-container-width),
		calc(100% - 72px)
	);

	margin: 0 auto;

	display: grid;

	grid-template-columns:
		minmax(320px, 470px)
		minmax(420px, 1fr);

	gap: 70px;

	align-items: center;
}

.arco-build__content {
	padding-left: 130px;
}

.arco-build__title {
	margin: 0 0 26px;

	color: var(--arco-build-blue);

	line-height: 0.92;
}

.arco-build__title strong,
.arco-build__title span {
	display: block;
}

.arco-build__title strong {
	font-size: clamp(38px, 4vw, 58px);
	font-weight: 800;
}

.arco-build__title span {
	font-size: clamp(30px, 3.2vw, 48px);
	font-weight: 300;
}

.arco-build__text {
	color: var(--arco-build-blue);

	font-size: 17px;
	line-height: 1.48;
}

.arco-build__text p {
	margin: 0 0 28px;
}

.arco-build__text p:last-child {
	margin-bottom: 0;
}

.arco-build__text strong {
	font-weight: 800;
}

.arco-build__resources {
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 24px;
}

.arco-build__illustration {
	width: min(430px, 100%);
}

.arco-build__illustration svg {
	display: block;

	width: 100%;
	height: auto;
}

.arco-build__buttons {
	display: flex;
	flex-direction: column;

	gap: 16px;

	width: min(460px, 100%);
}

.arco-build__button {
	display: flex;
	align-items: center;

	width: 100%;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-build__button:hover,
.arco-build__button:focus-visible {
	transform: translateY(-3px);

	box-shadow:
		0 14px 28px rgba(23, 89, 56, 0.15);
}

.arco-build__button--resources {
	justify-content: space-between;

	min-height: 54px;

	padding: 12px 18px;

	border-radius: 999px;

	background: var(--arco-build-orange);
	color: #ffffff;

	font-size: 17px;
	font-weight: 800;
	text-transform: uppercase;
}

.arco-build__button--resources svg {
	width: 28px;
	height: 28px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.arco-build__button--proposal {
	position: relative;

	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	min-height: 68px;

	padding: 9px 74px 10px 18px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			#168058,
			#91c63f
		);

	color: #ffffff;
}

.arco-build__hashtag {
	font-size: clamp(23px, 2.4vw, 34px);
	font-weight: 300;
	line-height: 1;
}

.arco-build__hashtag strong {
	font-weight: 800;
}

.arco-build__button--proposal small {
	margin-left: 18px;

	font-size: 13px;
	line-height: 1.2;
}

.arco-build__form-icon {
	position: absolute;
	right: 16px;
	top: 50%;

	transform: translateY(-50%);
}

.arco-build__form-icon svg {
	width: 42px;
	height: 42px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
|--------------------------------------------------------------------------
| FOOTER ARCO
|--------------------------------------------------------------------------
*/

.arco-footer {
	--arco-footer-blue: #238fbd;
	--arco-footer-deep-blue: #17769d;
	--arco-footer-green: #b5d63c;

	position: relative;

	padding:
		42px
		0
		18px;

	background:
		linear-gradient(
			110deg,
			var(--arco-footer-blue),
			var(--arco-footer-deep-blue)
		);

	color: #ffffff;
}

.arco-footer *,
.arco-footer *::before,
.arco-footer *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-footer__container {
	width:
		min(
			var(--arco-container-width),
			calc(100% - 72px)
		);

	margin:
		0
		auto;

	display:
		grid;

	grid-template-columns:
		210px
		minmax(360px, 1fr)
		240px;

	gap:
		52px;

	align-items:
		center;
}


/*
|--------------------------------------------------------------------------
| Logos
|--------------------------------------------------------------------------
*/

.arco-footer__brand img {
	display:
		block;

	max-width:
		100%;

	height:
		auto;
}

.arco-footer__brand--mcd img {
	width:
		180px;
}

.arco-footer__brand--arco {
	text-align:
		center;
}

.arco-footer__brand--arco img {
	width:
		132px;

	margin:
		0
		auto
		4px;
}

.arco-footer__brand--arco p {
	margin:
		0
		0
		14px;

	font-size:
		13px;

	line-height:
		1.3;
}


/*
|--------------------------------------------------------------------------
| Navegación
|--------------------------------------------------------------------------
*/

.arco-footer__navigation {
	display:
		grid;

	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);

	gap:
		44px;
}

.arco-footer__column {
	display:
		flex;

	flex-direction:
		column;

	align-items:
		flex-start;
}

.arco-footer__column h3 {
	margin:
		0
		0
		4px;

	color:
		var(--arco-footer-green);

	font-size:
		17px;

	font-weight:
		800;

	line-height:
		1.2;
}

.arco-footer__column a {
	color:
		#ffffff;

	font-size:
		13px;

	font-weight:
		700;

	line-height:
		1.4;

	text-decoration:
		none;

	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.arco-footer__column a:hover,
.arco-footer__column a:focus-visible {
	opacity:
		0.78;

	transform:
		translateX(3px);
}


/*
|--------------------------------------------------------------------------
| Redes sociales
|--------------------------------------------------------------------------
*/

.arco-footer__social {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-wrap:
		wrap;

	gap:
		10px;
}

.arco-footer__social-item {
	display:
		inline-flex;
}

.arco-footer__social a {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		31px;

	height:
		31px;

	padding:
		2px;

	color:
		#ffffff;

	border-radius:
		50%;

	text-decoration:
		none;

	transition:
		transform 0.22s ease,
		opacity 0.22s ease,
		background-color 0.22s ease;
}

.arco-footer__social a svg {
	display: block;

	width: 100%;
	height: 100%;

	max-width: 100%;
	max-height: 100%;

	fill: currentColor;

	overflow: visible;

	preserve-aspect-ratio: xMidYMid meet;
}

.arco-footer__social a:hover,
.arco-footer__social a:focus-visible {
	opacity:
		0.8;

	transform:
		translateY(-3px);

	background:
		rgba(255, 255, 255, 0.10);
}

.arco-footer__social a:focus-visible {
	outline:
		2px solid #ffffff;

	outline-offset:
		3px;
}


/*
|--------------------------------------------------------------------------
| Copyright
|--------------------------------------------------------------------------
*/

.arco-footer__copyright {
	grid-column:
		1 / -1;

	margin-top:
		14px;

	padding-top:
		12px;

	border-top:
		1px solid rgba(255, 255, 255, 0.12);

	text-align:
		center;
}

.arco-footer__copyright p {
	margin:
		0;

	font-size:
		12px;

	font-weight:
		300;

	line-height:
		1.4;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	.arco-footer {
		padding:
			38px
			0
			16px;
	}

	.arco-footer__container {
		width:
			calc(
				100% - 44px
			);

		grid-template-columns:
			170px
			minmax(300px, 1fr)
			210px;

		gap:
			30px;
	}

	.arco-footer__brand--mcd img {
		width:
			165px;
	}

	.arco-footer__brand--arco img {
		width:
			120px;
	}

	.arco-footer__navigation {
		gap:
			28px;
	}

	.arco-footer__social {
		gap:
			8px;
	}

	.arco-footer__social a {
		width:
			28px;

		height:
			28px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-footer {
		padding:
			36px
			0
			18px;
	}

	.arco-footer__container {
		width:
			calc(
				100% - 32px
			);

		grid-template-columns:
			1fr;

		gap:
			28px;

		text-align:
			center;
	}

	.arco-footer__brand--mcd img {
		width:
			170px;

		margin:
			0
			auto;
	}

	.arco-footer__navigation {
		grid-template-columns:
			1fr
			1fr;

		gap:
			24px;
	}

	.arco-footer__column {
		align-items:
			center;
	}

	.arco-footer__column a:hover,
	.arco-footer__column a:focus-visible {
		transform:
			none;
	}

	.arco-footer__brand--arco img {
		width:
			130px;
	}

	.arco-footer__social a {
		width:
			32px;

		height:
			32px;
	}

	.arco-footer__copyright {
		grid-column:
			auto;

		margin-top:
			0;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.arco-footer__navigation {
		grid-template-columns:
			1fr;

		gap:
			22px;
	}

	.arco-footer__social {
		gap:
			9px;
	}

	.arco-footer__copyright p {
		font-size:
			11px;
	}

}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-footer__column a,
	.arco-footer__social a {
		transition:
			none;
	}

}

/*
|--------------------------------------------------------------------------
| Corrección icono YouTube
|--------------------------------------------------------------------------
*/

.arco-footer__social-item--youtube a {
	width: 36px;
	height: 31px;

	padding: 1px 0;
}

.arco-footer__social-item--youtube svg {
	display: block;

	width: 34px !important;
	height: auto !important;

	aspect-ratio: 576 / 512;

	overflow: visible;

	fill: #ffffff;
}

.arco-footer__social-item--youtube
.arco-footer__youtube-play {
	fill: var(--arco-footer-deep-blue);
}
/*
|--------------------------------------------------------------------------
| FORMULARIO DE REGISTRO
|--------------------------------------------------------------------------
*/

.arco-registration {
	--arco-registration-blue: #2798d1;
	--arco-registration-deep-blue: #17779e;
	--arco-registration-green: #82bd39;
	--arco-registration-dark-green: #087452;
	--arco-registration-cream: #fbf9ed;
	--arco-registration-text: #777d79;

	position: relative;

	min-height: 100vh;

	padding: 0 0 70px;

	background: #ffffff;

	overflow: hidden;
}

.arco-registration *,
.arco-registration *::before,
.arco-registration *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Imagen superior
|--------------------------------------------------------------------------
*/

.arco-registration__top-image {
	width: 100%;
	height: 150px;

	background:
		linear-gradient(
			rgba(23, 89, 56, 0.05),
			rgba(23, 89, 56, 0.05)
		),
		url('https://arco.mcd.gob.gt/wp-content/uploads/2026/07/Hero.png')
		center 42% / cover no-repeat;
}

.arco-registration__top-overlay {
	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			rgba(0, 132, 201, 0.03),
			rgba(140, 180, 49, 0.04)
		);
}


/*
|--------------------------------------------------------------------------
| Decoración
|--------------------------------------------------------------------------
*/

.arco-registration__decoration {
	position: absolute;

	right: -120px;
	top: 420px;

	width: 720px;

	opacity: 0.04;

	pointer-events: none;
}

.arco-registration__decoration svg {
	display: block;

	width: 100%;
	height: auto;
}

.arco-registration__decoration path {
	fill: none;

	stroke: var(--arco-registration-blue);
	stroke-width: 8;
	stroke-linecap: round;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-registration__container {
	position: relative;
	z-index: 2;

	width: min(
		980px,
		calc(100% - 40px)
	);

	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.arco-registration__header {
	display: flex;

	align-items: center;

	gap: 12px;

	margin:
		20px
		0
		8px;
}

.arco-registration__back {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	border:
		7px solid
		transparent;

	border-left-color:
		var(--arco-registration-green);

	border-right-color:
		var(--arco-registration-deep-blue);

	border-radius: 50%;

	color:
		var(--arco-registration-green);

	text-decoration: none;

	transform:
		rotate(-18deg);
}

.arco-registration__back svg {
	width: 27px;
	height: 27px;

	fill: none;

	stroke:
		currentColor;

	stroke-width:
		2.8;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;

	transform:
		rotate(18deg);
}

.arco-registration__title {
	margin: 0;

	color:
		var(--arco-registration-blue);

	line-height:
		0.9;
}

.arco-registration__title strong,
.arco-registration__title span {
	display: block;
}

.arco-registration__title strong {
	font-size:
		clamp(
			40px,
			5vw,
			66px
		);

	font-weight: 800;
}

.arco-registration__title span {
	font-size:
		clamp(
			30px,
			4vw,
			50px
		);

	font-weight: 300;
}


/*
|--------------------------------------------------------------------------
| Notificaciones
|--------------------------------------------------------------------------
*/

.arco-registration__notice {
	margin: 20px 0;

	padding:
		15px
		18px;

	border-radius:
		12px;
}

.arco-registration__notice strong {
	display: block;

	margin-bottom:
		3px;
}

.arco-registration__notice p {
	margin: 0;
}

.arco-registration__notice--success {
	border:
		1px solid
		rgba(8, 116, 82, 0.35);

	background:
		rgba(140, 180, 49, 0.12);

	color:
		var(--arco-registration-dark-green);
}

.arco-registration__notice--error {
	border:
		1px solid
		rgba(180, 45, 45, 0.35);

	background:
		rgba(180, 45, 45, 0.08);

	color:
		#9d2424;
}


/*
|--------------------------------------------------------------------------
| Caja del formulario
|--------------------------------------------------------------------------
*/

.arco-registration__form {
	width: 100%;

	max-width: 920px;

	margin: 0 auto;

	padding:
		28px
		58px
		34px;

	border:
		1px solid
		rgba(140, 180, 49, 0.20);

	border-radius:
		30px;

	background:
		rgba(251, 249, 237, 0.97);

	box-shadow:
		0
		5px
		14px
		rgba(23, 89, 56, 0.12);
}


/*
|--------------------------------------------------------------------------
| Secciones
|--------------------------------------------------------------------------
*/

.arco-registration__section {
	margin:
		0
		0
		28px;

	padding: 0;

	border: 0;
}

.arco-registration__section:last-child {
	margin-bottom: 0;
}

.arco-registration__section legend {
	width: 100%;

	margin:
		0
		0
		12px;

	color:
		var(--arco-registration-green) !important;

	font-size:
		15px;

	font-weight:
		700;

	line-height:
		1.3;
}


/*
|--------------------------------------------------------------------------
| Campos generales
|--------------------------------------------------------------------------
*/

.arco-registration__field {
	display: flex;

	flex-direction: column;

	gap: 3px;
}

.arco-registration__field--wide {
	width: 100%;
}

.arco-registration__field label,
.arco-registration__upload > label:first-child {
	color:
		var(--arco-registration-text) !important;

	font-size:
		12px;

	font-weight:
		400;

	line-height:
		1.25;
}

.arco-registration__field label span {
	color:
		#b53434;
}

.arco-registration__field input,
.arco-registration__field select,
.arco-registration__field textarea {
	width: 100%;

	border:
		1px solid
		#e5e5df;

	border-radius:
		7px;

	background:
		#ffffff;

	color:
		#555b58;

	font-family:
		inherit;

	font-size:
		13px;

	box-shadow:
		0
		2px
		5px
		rgba(23, 89, 56, 0.12);

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.arco-registration__field input,
.arco-registration__field select {
	height: 34px;

	min-height: 34px;

	padding:
		4px
		12px;
}

.arco-registration__field textarea {
	min-height:
		110px;

	padding:
		9px
		12px;

	resize:
		vertical;
}

.arco-registration__field input:focus,
.arco-registration__field select:focus,
.arco-registration__field textarea:focus {
	outline: none;

	border-color:
		var(--arco-registration-blue);

	box-shadow:
		0
		0
		0
		3px
		rgba(39, 152, 209, 0.12);
}


/*
|--------------------------------------------------------------------------
| Placeholders
|--------------------------------------------------------------------------
*/

.arco-registration__field input::placeholder,
.arco-registration__field textarea::placeholder {
	color:
		#a4a6a3;

	font-style:
		italic;

	opacity: 1;
}


/*
|--------------------------------------------------------------------------
| Select
|--------------------------------------------------------------------------
*/

.arco-registration select {
	width: 100% !important;

	max-width: 100% !important;

	margin: 0 !important;

	padding-right:
		36px;

	color:
		#777d79;

	font-family:
		inherit !important;

	cursor:
		pointer;

	appearance:
		auto;
}


/*
|--------------------------------------------------------------------------
| Sección 1
|--------------------------------------------------------------------------
*/

.arco-registration__section:first-of-type
.arco-registration__field {
	width: 100%;
}


/*
|--------------------------------------------------------------------------
| Sí / No
|--------------------------------------------------------------------------
*/

.arco-registration__section--organization {
	width: 100%;
	max-width: 540px;
}

.arco-registration__choice-group {
	display: flex;

	gap: 10px;

	margin:
		0
		0
		12px
		20px;
}

.arco-registration__choice {
	position: relative;

	cursor: pointer;
}

.arco-registration__choice input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;

	pointer-events: none;
}

.arco-registration__choice span {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-width: 54px;
	min-height: 42px;

	padding:
		8px
		14px;

	border:
		1px solid
		#e4e5df;

	border-radius:
		8px;

	background:
		#ffffff;

	color:
		#168dc9 !important;

	font-size:
		14px;

	font-weight:
		600;

	box-shadow:
		0
		3px
		7px
		rgba(23, 89, 56, 0.12);

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.arco-registration__choice input:checked + span {
	border-color:
		var(--arco-registration-blue);

	background:
		var(--arco-registration-blue);

	color:
		#ffffff !important;
}

.arco-registration__choice input:focus-visible + span {
	outline:
		3px solid
		rgba(39, 152, 209, 0.18);

	outline-offset:
		2px;
}


/*
|--------------------------------------------------------------------------
| Campos condicionales
|--------------------------------------------------------------------------
*/

.arco-registration__conditional {
	display: flex;

	flex-direction: column;

	gap: 9px;

	width: 100%;

	margin:
		0
		0
		12px
		20px;
}

.arco-registration__conditional[hidden] {
	display: none !important;
}

.arco-registration__helper {
	margin:
		0
		0
		1px;

	color:
		#929792;

	font-size:
		12px;

	line-height:
		1.3;
}

.arco-registration__conditional
.arco-registration__field {
	width: 100%;

	max-width: 500px;
}


/*
|--------------------------------------------------------------------------
| Contacto
|--------------------------------------------------------------------------
*/

.arco-registration__contact-fields {
	display: flex;

	flex-direction: column;

	gap: 9px;

	width: 100%;

	margin-left:
		20px;
}

.arco-registration__contact-fields
.arco-registration__field {
	width: 100%;

	max-width: 500px;
}


/*
|--------------------------------------------------------------------------
| Información de la propuesta
|--------------------------------------------------------------------------
*/

.arco-registration__section:nth-of-type(3) {
	width: 100%;

	max-width: 760px;

	margin-left:
		5px;
}

.arco-registration__section:nth-of-type(3)
.arco-registration__field--wide {
	width:
		calc(
			100% - 25px
		);

	max-width:
		720px;

	margin-left:
		25px;
}

.arco-registration__section:nth-of-type(3)
.arco-registration__field--wide
+
.arco-registration__field--wide {
	margin-top:
		10px;
}


/*
|--------------------------------------------------------------------------
| Contador
|--------------------------------------------------------------------------
*/

.arco-registration__counter {
	margin: 0;

	color:
		#939894;

	font-size:
		10px;

	text-align:
		right;
}


/*
|--------------------------------------------------------------------------
| Archivo y envío
|--------------------------------------------------------------------------
*/

.arco-registration__footer-row {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 30px;

	width:
		calc(
			100% - 25px
		);

	margin:
		16px
		0
		0
		25px;
}

.arco-registration__upload {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 6px;
}

.arco-registration__upload input[type='file'] {
	position: absolute;

	width: 1px;
	height: 1px;

	overflow: hidden;

	clip:
		rect(0, 0, 0, 0);
}

.arco-registration__upload-button {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding:
		8px
		14px;

	border-radius:
		5px;

	background:
		var(--arco-registration-blue);

	color:
		#ffffff !important;

	font-size:
		14px;

	font-weight:
		700;

	cursor:
		pointer;

	text-transform:
		uppercase;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.arco-registration__upload-button:hover {
	transform:
		translateY(-1px);

	box-shadow:
		0
		6px
		12px
		rgba(39, 152, 209, 0.18);
}

.arco-registration__upload-button svg {
	width: 21px;
	height: 21px;

	fill: none;

	stroke:
		currentColor;

	stroke-width:
		2;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}

.arco-registration__filename {
	max-width: 360px;

	margin: 0;

	color:
		var(--arco-registration-text);

	font-size:
		11px;

	overflow-wrap:
		anywhere;
}

.arco-registration__upload small {
	color:
		#9a9e9a;

	font-size:
		10px;
}

.arco-registration__submit {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	min-width: 82px;
	min-height: 40px;

	padding:
		8px
		14px;

	border: 0;

	border-radius:
		5px;

	background:
		var(--arco-registration-dark-green);

	color:
		#ffffff !important;

	font-family:
		inherit;

	font-size:
		15px;

	font-weight:
		700;

	cursor:
		pointer;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.arco-registration__submit svg {
	width: 18px;
	height: 18px;

	fill: none;

	stroke:
		currentColor;

	stroke-width:
		2;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}

.arco-registration__submit:hover,
.arco-registration__submit:focus-visible {
	transform:
		translateY(-2px);

	box-shadow:
		0
		9px
		18px
		rgba(8, 116, 82, 0.20);
}

.arco-registration__submit:disabled {
	opacity: 0.65;

	cursor: wait;

	transform: none;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
	.arco-registration__container {
		width:
			calc(
				100% - 34px
			);
	}

	.arco-registration__form {
		padding:
			28px
			34px
			34px;
	}
}

/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 680px) {

	.arco-registration {
		padding-bottom:
			48px;
	}

	.arco-registration__top-image {
		height:
			110px;
	}

	.arco-registration__container {
		width:
			calc(
				100% - 24px
			);
	}

	.arco-registration__header {
		margin-top:
			18px;
	}

	.arco-registration__back {
		flex-basis:
			42px;
		width:
			42px;
		height:
			42px;
	}

	.arco-registration__title strong {
		font-size:
			38px;
	}

	.arco-registration__title span {
		font-size:
			29px;
	}

	.arco-registration__form {
		padding:
			24px
			18px
			30px;

		border-radius:
			24px;
	}

	.arco-registration__section--organization,
	.arco-registration__section:nth-of-type(3) {
		max-width:
			100%;
	}

	.arco-registration__choice-group,
	.arco-registration__conditional,
	.arco-registration__contact-fields,
	.arco-registration__section:nth-of-type(3)
	.arco-registration__field--wide,
	.arco-registration__footer-row {
		width:
			100%;

		max-width:
			100%;

		margin-left:
			0;
	}

	.arco-registration__conditional
	.arco-registration__field,
	.arco-registration__contact-fields
	.arco-registration__field {
		max-width:
			100%;
	}

	.arco-registration__field input,
	.arco-registration__field select {
		height:
			40px;

		min-height:
			40px;

		font-size:
			14px;
	}

	.arco-registration__field textarea {
		min-height:
			120px;

		font-size:
			14px;
	}

	.arco-registration__footer-row {
		flex-direction:
			column;

		align-items:
			stretch;
	}

	.arco-registration__submit {
		width:
			100%;
	}

	.arco-registration__decoration {
		right:
			-300px;

		top:
			500px;
	}

}


/*
|--------------------------------------------------------------------------
| Movimiento reducido
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-registration__choice span,
	.arco-registration__upload-button,
	.arco-registration__submit,
	.arco-registration__field input,
	.arco-registration__field select,
	.arco-registration__field textarea {
		transition:
			none;
	}

}

/*
|--------------------------------------------------------------------------
| Corrección botón Enviar
|--------------------------------------------------------------------------
*/

.arco-registration
.arco-registration__submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	gap: 7px !important;

	min-width: 88px !important;
	min-height: 40px !important;

	padding: 9px 16px !important;

	border: 0 !important;
	outline: 0;

	border-radius: 5px !important;

	background: #087452 !important;
	background-color: #087452 !important;

	color: #ffffff !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1 !important;

	text-decoration: none !important;

	box-shadow: none;

	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.arco-registration
.arco-registration__submit span {
	color: #ffffff !important;
}

.arco-registration
.arco-registration__submit svg {
	display: block;

	width: 18px;
	height: 18px;

	fill: none !important;
	stroke: #ffffff !important;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.arco-registration
.arco-registration__submit:hover,
.arco-registration
.arco-registration__submit:focus,
.arco-registration
.arco-registration__submit:focus-visible {
	border: 0 !important;

	background: #175938 !important;
	background-color: #175938 !important;

	color: #ffffff !important;

	transform: translateY(-2px);

	box-shadow:
		0 9px 18px rgba(8, 116, 82, 0.22) !important;
}

.arco-registration
.arco-registration__submit:focus-visible {
	outline: 3px solid rgba(8, 116, 82, 0.20);
	outline-offset: 3px;
}

.arco-registration
.arco-registration__submit:disabled {
	border: 0 !important;

	background: #087452 !important;
	background-color: #087452 !important;

	color: #ffffff !important;

	opacity: 0.65;

	cursor: wait;
	transform: none;
}


/*
|--------------------------------------------------------------------------
| PÁGINA DE RECURSOS
|--------------------------------------------------------------------------
*/

.arco-resources {
	--arco-resources-blue: #2898d0;
	--arco-resources-dark-blue: #21769e;
	--arco-resources-deep-blue: #176e94;
	--arco-resources-green: #8fc63d;
	--arco-resources-dark-green: #087452;
	--arco-resources-orange: #f5a112;

	position: relative;

	padding:
		0
		0
		54px;

	background: #ffffff;

	overflow: hidden;
}

.arco-resources *,
.arco-resources *::before,
.arco-resources *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Imagen superior
|--------------------------------------------------------------------------
*/

.arco-resources__hero {
	width: 100%;
	height: 178px;

	background:
		linear-gradient(
			rgba(23, 89, 56, 0.03),
			rgba(23, 89, 56, 0.03)
		),
		url('https://arco.mcd.gob.gt/wp-content/uploads/2026/07/Hero.png')
		center 42% / cover no-repeat;
}


/*
|--------------------------------------------------------------------------
| Decoración
|--------------------------------------------------------------------------
*/

.arco-resources__decoration {
	position: absolute;

	right: -90px;
	bottom: 0;

	width: 580px;

	opacity: 0.045;

	pointer-events: none;
}

.arco-resources__decoration svg {
	display: block;

	width: 100%;
	height: auto;
}

.arco-resources__decoration path {
	fill: none;

	stroke: var(--arco-resources-blue);
	stroke-width: 8;
	stroke-linecap: round;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-resources__container {
	position: relative;
	z-index: 2;

	width:
		min(
			var(--arco-container-width),
			calc(100% - 72px)
		);

	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.arco-resources__header {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 42px;

	margin:
		30px
		0
		26px;
}

.arco-resources__heading {
	display: flex;

	align-items: center;

	gap: 16px;
}


/*
|--------------------------------------------------------------------------
| Botón volver
|--------------------------------------------------------------------------
*/

.arco-resources__back {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 56px;

	width: 56px;
	height: 56px;

	border:
		8px solid
		transparent;

	border-left-color:
		var(--arco-resources-green);

	border-right-color:
		var(--arco-resources-deep-blue);

	border-radius: 50%;

	color:
		var(--arco-resources-green);

	text-decoration: none;

	transform:
		rotate(-18deg);
}

.arco-resources__back svg {
	width: 30px;
	height: 30px;

	fill: none;

	stroke:
		currentColor;

	stroke-width:
		2.8;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;

	transform:
		rotate(18deg);
}


/*
|--------------------------------------------------------------------------
| Título
|--------------------------------------------------------------------------
*/

.arco-resources__title {
	margin: 0;

	color:
		var(--arco-resources-blue);

	line-height:
		0.9;

	letter-spacing:
		-0.035em;
}

.arco-resources__title strong,
.arco-resources__title span {
	display: block;
}

.arco-resources__title strong {
	font-size:
		clamp(
			48px,
			5.5vw,
			76px
		);

	font-weight: 800;
}

.arco-resources__title span {
	font-size:
		clamp(
			32px,
			4vw,
			55px
		);

	font-weight: 300;
}


/*
|--------------------------------------------------------------------------
| Botón Mi Voz Mi Propuesta
|--------------------------------------------------------------------------
*/

.arco-resources__proposal-button {
	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: 20px;

	width:
		min(
			440px,
			100%
		);

	min-height: 76px;

	padding:
		10px
		16px
		10px
		22px;

	border-radius:
		999px;

	background:
		linear-gradient(
			90deg,
			var(--arco-resources-dark-green),
			var(--arco-resources-green)
		);

	color:
		#ffffff !important;

	text-decoration:
		none !important;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-resources__proposal-button:hover,
.arco-resources__proposal-button:focus-visible {
	color:
		#ffffff !important;

	transform:
		translateY(-3px);

	box-shadow:
		0
		15px
		28px
		rgba(23, 89, 56, 0.18);
}

.arco-resources__proposal-copy {
	display: flex;

	flex-direction: column;

	min-width: 0;
}

.arco-resources__proposal-title {
	color:
		#ffffff !important;

	font-size:
		clamp(
			24px,
			2.5vw,
			36px
		);

	font-weight:
		300;

	line-height:
		1;
}

.arco-resources__proposal-title strong {
	font-weight:
		800;
}

.arco-resources__proposal-button small {
	margin-left:
		18px;

	color:
		#ffffff !important;

	font-size:
		13px;

	line-height:
		1.2;
}

.arco-resources__proposal-icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex:
		0
		0
		48px;
}

.arco-resources__proposal-icon svg {
	display: block;

	width: 46px;
	height: 46px;

	fill: none;

	stroke:
		#ffffff;

	stroke-width:
		2;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}


/*
|--------------------------------------------------------------------------
| Contenido
|--------------------------------------------------------------------------
*/

.arco-resources__content {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		280px;

	gap: 28px;

	align-items: end;
}


/*
|--------------------------------------------------------------------------
| Tarjetas
|--------------------------------------------------------------------------
*/

.arco-resources__cards {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: 14px;
}

.arco-resources__card {
	display: flex;

	flex-direction: column;

	align-items: center;

	min-height: 180px;

	padding:
		14px
		22px
		18px;

	border-radius:
		30px;

	background:
		var(--arco-resources-dark-blue);

	color:
		#ffffff !important;

	text-align:
		center;

	text-decoration:
		none !important;

	box-shadow:
		0
		7px
		18px
		rgba(23, 89, 56, 0.08);

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-resources__card:hover,
.arco-resources__card:focus-visible {
	background:
		var(--arco-resources-deep-blue);

	color:
		#ffffff !important;

	transform:
		translateY(-6px);

	box-shadow:
		0
		18px
		30px
		rgba(23, 89, 56, 0.18);
}

.arco-resources__card-top {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	width: 100%;
}

.arco-resources__number {
	color:
		#ffffff !important;

	font-size:
		44px;

	font-weight:
		800;

	line-height:
		1;
}

.arco-resources__icon {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;
}

.arco-resources__icon svg {
	display: block;

	width: 66px;
	height: 66px;

	fill: none;

	stroke:
		#ffffff;

	stroke-width:
		2;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}

.arco-resources__divider {
	display: block;

	width: 100%;
	height: 1px;

	margin:
		5px
		0
		8px;

	background:
		var(--arco-resources-green);
}

.arco-resources__card-title {
	margin: 0;

	color:
		#ffffff !important;

	font-size:
		clamp(
			16px,
			1.6vw,
			20px
		);

	font-weight:
		800;

	line-height:
		1.22;
}


/*
|--------------------------------------------------------------------------
| Columna lateral
|--------------------------------------------------------------------------
*/

.arco-resources__side {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 12px;
}

.arco-resources__isotipo {
	width:
		180px;

	opacity:
		0.045;

	pointer-events:
		none;
}

.arco-resources__isotipo img {
	display: block;

	width: 100%;
	height: auto;
}


/*
|--------------------------------------------------------------------------
| Botón formulario
|--------------------------------------------------------------------------
*/

.arco-resources__registration-button {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 14px;

	width: 100%;

	min-height: 66px;

	padding:
		10px
		18px;

	border-radius:
		999px;

	background:
		var(--arco-resources-orange);

	color:
		#ffffff !important;

	font-size:
		18px;

	font-weight:
		800;

	line-height:
		1.05;

	text-decoration:
		none !important;

	text-transform:
		uppercase;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-resources__registration-button:hover,
.arco-resources__registration-button:focus-visible {
	color:
		#ffffff !important;

	transform:
		translateY(-3px);

	box-shadow:
		0
		14px
		26px
		rgba(245, 161, 18, 0.25);
}

.arco-resources__registration-icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;
}

.arco-resources__registration-icon svg {
	width: 42px;
	height: 42px;

	fill: none;

	stroke:
		#ffffff;

	stroke-width:
		2;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}


/*
|--------------------------------------------------------------------------
| Estado visible
|--------------------------------------------------------------------------
*/

.arco-resources__header,
.arco-resources__content {
	opacity: 0;

	transform:
		translateY(28px);

	transition:
		opacity 0.8s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-resources__content {
	transition-delay:
		0.18s;
}

.arco-resources.is-visible
.arco-resources__header,

.arco-resources.is-visible
.arco-resources__content {
	opacity: 1;

	transform:
		translateY(0);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	.arco-resources__container {
		width:
			calc(
				100% - 44px
			);
	}

	.arco-resources__header {
		gap:
			28px;
	}

	.arco-resources__proposal-button {
		width:
			380px;
	}

	.arco-resources__content {
		grid-template-columns:
			minmax(0, 1fr)
			230px;
	}

	.arco-resources__card {
		padding:
			14px
			15px
			18px;
	}

	.arco-resources__registration-button {
		font-size:
			15px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-resources {
		padding-bottom:
			42px;
	}

	.arco-resources__hero {
		height:
			115px;
	}

	.arco-resources__container {
		width:
			calc(
				100% - 28px
			);
	}

	.arco-resources__header {
		flex-direction:
			column;

		align-items:
			stretch;

		gap:
			24px;

		margin-top:
			22px;
	}

	.arco-resources__heading {
		align-items:
			flex-start;
	}

	.arco-resources__back {
		flex-basis:
			46px;

		width:
			46px;

		height:
			46px;
	}

	.arco-resources__title strong {
		font-size:
			44px;
	}

	.arco-resources__title span {
		font-size:
			31px;

		line-height:
			1;
	}

	.arco-resources__proposal-button {
		width:
			100%;
	}

	.arco-resources__content {
		grid-template-columns:
			1fr;

		gap:
			26px;
	}

	.arco-resources__cards {
		grid-template-columns:
			1fr;

		gap:
			14px;
	}

	.arco-resources__card {
		min-height:
			165px;
	}

	.arco-resources__side {
		width:
			100%;
	}

	.arco-resources__isotipo {
		display:
			none;
	}

	.arco-resources__registration-button {
		width:
			min(
				360px,
				100%
			);
	}

}


/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.arco-resources__heading {
		gap:
			10px;
	}

	.arco-resources__title strong {
		font-size:
			38px;
	}

	.arco-resources__title span {
		font-size:
			27px;
	}

	.arco-resources__proposal-title {
		font-size:
			25px;
	}

	.arco-resources__proposal-button small {
		margin-left:
			0;

		font-size:
			11px;
	}

	.arco-resources__registration-button {
		font-size:
			15px;
	}

}


/*
|--------------------------------------------------------------------------
| Movimiento reducido
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-resources__header,
	.arco-resources__content,
	.arco-resources__card,
	.arco-resources__proposal-button,
	.arco-resources__registration-button {
		opacity:
			1 !important;

		transform:
			none !important;

		transition:
			none !important;
	}

}

/*
|--------------------------------------------------------------------------
| PÁGINA - DOCUMENTOS DE APOYO
|--------------------------------------------------------------------------
*/

.arco-support-documents {
	--arco-documents-blue: #2898d0;
	--arco-documents-dark-blue: #176f98;
	--arco-documents-green: #8fc63d;
	--arco-documents-orange: #f5a112;
	--arco-documents-red: #d44749;
	--arco-documents-doc-blue: #1268d8;
	--arco-documents-paper: #f2f0e7;

	position: relative;

	min-height: 520px;

	padding: 0 0 62px;

	background: #ffffff;

	overflow: hidden;
}

.arco-support-documents *,
.arco-support-documents *::before,
.arco-support-documents *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Imagen superior
|--------------------------------------------------------------------------
*/

.arco-support-documents__hero {
	width: 100%;
	height: 178px;

	background:
		linear-gradient(
			rgba(23, 89, 56, 0.03),
			rgba(23, 89, 56, 0.03)
		),
		url('https://arco.mcd.gob.gt/wp-content/uploads/2026/07/Hero.png')
		center 42% / cover no-repeat;
}


/*
|--------------------------------------------------------------------------
| Decoración
|--------------------------------------------------------------------------
*/

.arco-support-documents__decoration {
	position: absolute;

	right: -110px;
	bottom: -60px;

	width: 560px;

	opacity: 0.04;

	pointer-events: none;
}

.arco-support-documents__decoration svg {
	display: block;

	width: 100%;
	height: auto;
}

.arco-support-documents__decoration path {
	fill: none;

	stroke: var(--arco-documents-blue);
	stroke-width: 8;
	stroke-linecap: round;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-support-documents__container {
	position: relative;
	z-index: 2;

	width:
		min(
			var(--arco-container-width),
			calc(100% - 72px)
		);

	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Distribución principal
|--------------------------------------------------------------------------
*/

.arco-support-documents__content {
	display: grid;

	grid-template-columns:
		minmax(350px, 520px)
		minmax(520px, 1fr);

	gap: 80px;

	align-items: center;

	min-height: 335px;

	padding-top: 32px;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.arco-support-documents__heading {
	display: flex;

	align-items: center;

	gap: 18px;
}


/*
|--------------------------------------------------------------------------
| Botón volver
|--------------------------------------------------------------------------
*/

.arco-support-documents__back {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 58px;

	width: 58px;
	height: 58px;

	border: 8px solid transparent;

	border-left-color:
		var(--arco-documents-green);

	border-right-color:
		var(--arco-documents-dark-blue);

	border-radius: 50%;

	color:
		var(--arco-documents-green);

	text-decoration: none;

	transform: rotate(-18deg);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-support-documents__back:hover,
.arco-support-documents__back:focus-visible {
	transform:
		rotate(-18deg)
		scale(1.06);

	box-shadow:
		0 8px 18px
		rgba(23, 89, 56, 0.12);
}

.arco-support-documents__back svg {
	width: 31px;
	height: 31px;

	fill: none;

	stroke: currentColor;
	stroke-width: 2.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transform: rotate(18deg);
}


/*
|--------------------------------------------------------------------------
| Título
|--------------------------------------------------------------------------
*/

.arco-support-documents__title {
	margin: 0;

	color:
		var(--arco-documents-blue);

	line-height: 0.88;

	letter-spacing: -0.035em;
}

.arco-support-documents__title strong,
.arco-support-documents__title span {
	display: block;
}

.arco-support-documents__title strong {
	font-size:
		clamp(
			54px,
			5.6vw,
			78px
		);

	font-weight: 800;
}

.arco-support-documents__title span {
	font-size:
		clamp(
			34px,
			4.2vw,
			56px
		);

	font-weight: 300;
}


/*
|--------------------------------------------------------------------------
| Zona de documentos
|--------------------------------------------------------------------------
*/

.arco-support-documents__resources {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 18px;
}


/*
|--------------------------------------------------------------------------
| Archivos
|--------------------------------------------------------------------------
*/

.arco-support-documents__files {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(130px, 1fr));

	gap: 28px;

	width: 100%;
	max-width: 590px;
}

.arco-support-documents__file {
	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;
}

.arco-support-documents__file-title {
	min-height: 38px;

	margin: 0 0 8px;

	color:
		var(--arco-documents-green);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.arco-support-documents__file-link {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 12px;

	color: inherit;

	text-decoration: none !important;

	transition:
		transform 0.25s ease;
}

.arco-support-documents__file-link:hover,
.arco-support-documents__file-link:focus-visible {
	transform: translateY(-5px);
}


/*
|--------------------------------------------------------------------------
| Iconos documento
|--------------------------------------------------------------------------
*/

.arco-support-documents__document {
	display: block;

	width: 94px;
}

.arco-support-documents__document svg {
	display: block;

	width: 100%;
	height: auto;
}


/*
|--------------------------------------------------------------------------
| PDF
|--------------------------------------------------------------------------
*/

.arco-support-documents__document--pdf
.arco-support-documents__document-page {
	fill:
		var(--arco-documents-paper);
}

.arco-support-documents__document--pdf
.arco-support-documents__document-fold {
	fill: none;

	stroke:
		#d8d6ca;

	stroke-width:
		2;
}

.arco-support-documents__document--pdf
.arco-support-documents__pdf-symbol {
	fill: none;

	stroke:
		var(--arco-documents-red);

	stroke-width:
		4;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}

.arco-support-documents__document--pdf
.arco-support-documents__pdf-label {
	fill:
		var(--arco-documents-red);
}

.arco-support-documents__document--pdf text {
	fill: #ffffff;

	font-family: inherit;

	font-size: 27px;
}


/*
|--------------------------------------------------------------------------
| DOC
|--------------------------------------------------------------------------
*/

.arco-support-documents__document--doc
.arco-support-documents__doc-page {
	fill:
		var(--arco-documents-doc-blue);
}

.arco-support-documents__document--doc
.arco-support-documents__doc-fold {
	fill: none;

	stroke:
		rgba(255, 255, 255, 0.55);

	stroke-width:
		2;
}

.arco-support-documents__document--doc text {
	fill: #ffffff;

	font-family: inherit;

	font-size: 28px;
	font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Botón descarga
|--------------------------------------------------------------------------
*/

.arco-support-documents__download {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	min-width: 92px;
	min-height: 34px;

	padding: 7px 12px;

	border-radius: 999px;

	background:
		var(--arco-documents-orange);

	color: #ffffff !important;

	font-size: 13px;
	font-weight: 700;

	box-shadow:
		0 5px 12px
		rgba(245, 161, 18, 0.16);

	transition:
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-support-documents__file-link:hover
.arco-support-documents__download {
	background: #e89400;

	box-shadow:
		0 8px 16px
		rgba(245, 161, 18, 0.22);
}

.arco-support-documents__download svg {
	width: 19px;
	height: 19px;

	fill: none;

	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/*
|--------------------------------------------------------------------------
| Descripción
|--------------------------------------------------------------------------
*/

.arco-support-documents__description {
	max-width: 470px;

	margin: 0;

	color:
		var(--arco-documents-blue);

	font-size: 13px;
	line-height: 1.35;

	text-align: center;
}


/*
|--------------------------------------------------------------------------
| Animación
|--------------------------------------------------------------------------
*/

.arco-support-documents__heading,
.arco-support-documents__resources {
	opacity: 0;

	transform: translateY(26px);

	transition:
		opacity 0.8s ease,
		transform 0.8s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-support-documents__resources {
	transition-delay: 0.16s;
}

.arco-support-documents.is-visible
.arco-support-documents__heading,

.arco-support-documents.is-visible
.arco-support-documents__resources {
	opacity: 1;

	transform: translateY(0);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	.arco-support-documents__container {
		width:
			calc(
				100% - 44px
			);
	}

	.arco-support-documents__content {
		grid-template-columns:
			minmax(300px, 430px)
			minmax(430px, 1fr);

		gap: 42px;
	}

	.arco-support-documents__files {
		gap: 16px;
	}

	.arco-support-documents__document {
		width: 82px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-support-documents {
		padding-bottom: 46px;
	}

	.arco-support-documents__hero {
		height: 115px;
	}

	.arco-support-documents__container {
		width:
			calc(
				100% - 28px
			);
	}

	.arco-support-documents__content {
		grid-template-columns: 1fr;

		gap: 38px;

		min-height: auto;

		padding-top: 24px;
	}

	.arco-support-documents__heading {
		align-items: flex-start;
	}

	.arco-support-documents__back {
		flex-basis: 46px;

		width: 46px;
		height: 46px;

		border-width: 6px;
	}

	.arco-support-documents__back svg {
		width: 25px;
		height: 25px;
	}

	.arco-support-documents__title strong {
		font-size: 45px;
	}

	.arco-support-documents__title span {
		font-size: 31px;
	}

	.arco-support-documents__files {
		grid-template-columns: 1fr;

		gap: 28px;

		max-width: 300px;
	}

	.arco-support-documents__file-title {
		min-height: auto;

		font-size: 15px;
	}

	.arco-support-documents__document {
		width: 105px;
	}

	.arco-support-documents__description {
		max-width: 330px;
	}

	.arco-support-documents__decoration {
		right: -300px;
		bottom: -80px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {

	.arco-support-documents__heading {
		gap: 10px;
	}

	.arco-support-documents__title strong {
		font-size: 39px;
	}

	.arco-support-documents__title span {
		font-size: 28px;
	}

}


/*
|--------------------------------------------------------------------------
| Movimiento reducido
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {

	.arco-support-documents__heading,
	.arco-support-documents__resources,
	.arco-support-documents__file-link,
	.arco-support-documents__back {
		opacity: 1 !important;

		transform: none !important;

		transition: none !important;
	}

}

/*
|--------------------------------------------------------------------------
| PÁGINA - FORMATOS
|--------------------------------------------------------------------------
*/

.arco-formats {
	--arco-formats-blue: #2898d0;
	--arco-formats-dark-blue: #176f98;
	--arco-formats-green: #8fc63d;
	--arco-formats-orange: #f5a112;
	--arco-formats-red: #d44749;
	--arco-formats-doc-blue: #1268d8;
	--arco-formats-paper: #f2f0e7;

	position: relative;

	min-height: 520px;

	padding: 0 0 62px;

	background: #ffffff;

	overflow: hidden;
}

.arco-formats *,
.arco-formats *::before,
.arco-formats *::after {
	box-sizing: border-box;
}


/*
|--------------------------------------------------------------------------
| Imagen superior
|--------------------------------------------------------------------------
*/

.arco-formats__hero {
	width: 100%;
	height: 178px;

	background:
		linear-gradient(
			rgba(23, 89, 56, 0.03),
			rgba(23, 89, 56, 0.03)
		),
		url('https://arco.mcd.gob.gt/wp-content/uploads/2026/07/Hero.png')
		center 42% / cover no-repeat;
}


/*
|--------------------------------------------------------------------------
| Decoración
|--------------------------------------------------------------------------
*/

.arco-formats__decoration {
	position: absolute;

	right: -110px;
	bottom: -60px;

	width: 560px;

	opacity: 0.04;

	pointer-events: none;
}

.arco-formats__decoration svg {
	display: block;

	width: 100%;
	height: auto;
}

.arco-formats__decoration path {
	fill: none;

	stroke: var(--arco-formats-blue);
	stroke-width: 8;
	stroke-linecap: round;
}


/*
|--------------------------------------------------------------------------
| Contenedor
|--------------------------------------------------------------------------
*/

.arco-formats__container {
	position: relative;
	z-index: 2;

	width:
		min(
			var(--arco-container-width),
			calc(100% - 72px)
		);

	margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Contenido
|--------------------------------------------------------------------------
*/

.arco-formats__content {
	display: grid;

	grid-template-columns:
		minmax(360px, 540px)
		minmax(340px, 1fr);

	gap: 90px;

	align-items: center;

	min-height: 335px;

	padding-top: 32px;
}


/*
|--------------------------------------------------------------------------
| Encabezado
|--------------------------------------------------------------------------
*/

.arco-formats__heading {
	display: flex;

	align-items: center;

	gap: 18px;
}


/*
|--------------------------------------------------------------------------
| Botón volver
|--------------------------------------------------------------------------
*/

.arco-formats__back {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 58px;

	width: 58px;
	height: 58px;

	border: 8px solid transparent;

	border-left-color:
		var(--arco-formats-green);

	border-right-color:
		var(--arco-formats-dark-blue);

	border-radius: 50%;

	color:
		var(--arco-formats-green);

	text-decoration: none;

	transform:
		rotate(-18deg);

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-formats__back:hover,
.arco-formats__back:focus-visible {
	transform:
		rotate(-18deg)
		scale(1.06);

	box-shadow:
		0 8px 18px
		rgba(23, 89, 56, 0.12);
}

.arco-formats__back svg {
	width: 31px;
	height: 31px;

	fill: none;

	stroke: currentColor;
	stroke-width: 2.8;
	stroke-linecap: round;
	stroke-linejoin: round;

	transform:
		rotate(18deg);
}


/*
|--------------------------------------------------------------------------
| Título
|--------------------------------------------------------------------------
*/

.arco-formats__title {
	margin: 0;

	color:
		var(--arco-formats-blue);

	line-height: 0.88;

	letter-spacing: -0.035em;
}

.arco-formats__title strong,
.arco-formats__title span {
	display: block;
}

.arco-formats__title strong {
	font-size:
		clamp(
			54px,
			5.6vw,
			78px
		);

	font-weight: 800;
}

.arco-formats__title span {
	font-size:
		clamp(
			34px,
			4.2vw,
			56px
		);

	font-weight: 300;
}


/*
|--------------------------------------------------------------------------
| Archivos
|--------------------------------------------------------------------------
*/

.arco-formats__files {
	display: flex;

	align-items: flex-end;
	justify-content: center;

	gap: 34px;

	width: 100%;
}

.arco-formats__file {
	display: flex;

	flex-direction: column;

	align-items: center;

	text-align: center;
}

.arco-formats__file-link {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 12px;

	color: inherit;

	text-decoration: none !important;

	transition:
		transform 0.25s ease;
}

.arco-formats__file-link:hover,
.arco-formats__file-link:focus-visible {
	transform:
		translateY(-5px);
}


/*
|--------------------------------------------------------------------------
| Iconos documento
|--------------------------------------------------------------------------
*/

.arco-formats__document {
	display: block;

	width: 102px;
}

.arco-formats__document svg {
	display: block;

	width: 100%;
	height: auto;
}


/*
|--------------------------------------------------------------------------
| PDF
|--------------------------------------------------------------------------
*/

.arco-formats__document--pdf
.arco-formats__document-page {
	fill:
		var(--arco-formats-paper);
}

.arco-formats__document--pdf
.arco-formats__document-fold {
	fill: none;

	stroke:
		#d8d6ca;

	stroke-width:
		2;
}

.arco-formats__document--pdf
.arco-formats__pdf-symbol {
	fill: none;

	stroke:
		var(--arco-formats-red);

	stroke-width:
		4;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;
}

.arco-formats__document--pdf
.arco-formats__pdf-label {
	fill:
		var(--arco-formats-red);
}

.arco-formats__document--pdf text {
	fill: #ffffff;

	font-family: inherit;

	font-size: 27px;
}


/*
|--------------------------------------------------------------------------
| DOC
|--------------------------------------------------------------------------
*/

.arco-formats__document--doc
.arco-formats__doc-page {
	fill:
		var(--arco-formats-doc-blue);
}

.arco-formats__document--doc
.arco-formats__doc-fold {
	fill: none;

	stroke:
		rgba(255, 255, 255, 0.55);

	stroke-width:
		2;
}

.arco-formats__document--doc text {
	fill: #ffffff;

	font-family: inherit;

	font-size: 28px;

	font-weight: 800;
}


/*
|--------------------------------------------------------------------------
| Botón descarga
|--------------------------------------------------------------------------
*/

.arco-formats__download {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 7px;

	min-width: 92px;
	min-height: 34px;

	padding: 7px 12px;

	border-radius: 999px;

	background:
		var(--arco-formats-orange);

	color: #ffffff !important;

	font-size: 13px;

	font-weight: 700;

	box-shadow:
		0 5px 12px
		rgba(245, 161, 18, 0.16);

	transition:
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.arco-formats__file-link:hover
.arco-formats__download {
	background:
		#e89400;

	box-shadow:
		0 8px 16px
		rgba(245, 161, 18, 0.22);
}

.arco-formats__download svg {
	width: 19px;
	height: 19px;

	fill: none;

	stroke: currentColor;

	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/*
|--------------------------------------------------------------------------
| Animación
|--------------------------------------------------------------------------
*/

.arco-formats__heading,
.arco-formats__files {
	opacity: 0;

	transform:
		translateY(26px);

	transition:
		opacity 0.8s ease,
		transform 0.8s
		cubic-bezier(0.22, 1, 0.36, 1);
}

.arco-formats__files {
	transition-delay:
		0.16s;
}

.arco-formats.is-visible
.arco-formats__heading,

.arco-formats.is-visible
.arco-formats__files {
	opacity: 1;

	transform:
		translateY(0);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

	.arco-formats__container {
		width:
			calc(
				100% - 44px
			);
	}

	.arco-formats__content {
		grid-template-columns:
			minmax(300px, 430px)
			minmax(320px, 1fr);

		gap: 44px;
	}

	.arco-formats__files {
		gap: 24px;
	}

	.arco-formats__document {
		width: 90px;
	}

}


/*
|--------------------------------------------------------------------------
| Móvil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.arco-formats {
		padding-bottom: 46px;
	}

	.arco-formats__hero {
		height: 115px;
	}

	.arco-formats__container {
		width:
			calc(
				100% - 28px
			);
	}

	.arco-formats__content {
		grid-template-columns: 1fr;

		gap: 42px;

		min-height: auto;

		padding-top: 24px;
	}

	.arco-formats__heading {
		align-items: flex-start;
	}

	.arco-formats__back {
		flex-basis: 46px;

		width: 46px;
		height: 46px;

		border-width: 6px;
	}

	.arco-formats__back svg {
		width: 25px;
		height: 25px;
	}
	.arco-formats__title strong {
		font-size: 45px;
	}
	.arco-formats__title span {
		font-size: 31px;
	}
	.arco-formats__files {
		align-items: center;
		gap: 30px;
		flex-wrap: wrap;
	}
	.arco-formats__document {
		width: 108px;
	}
	.arco-formats__decoration {
		right: -300px;
		bottom: -80px;
	}
}

/*
|--------------------------------------------------------------------------
| Móvil pequeño
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {
	.arco-formats__heading {
		gap: 10px;
	}
	.arco-formats__title strong {
		font-size: 39px;
	}
	.arco-formats__title span {
		font-size: 28px;
	}
	.arco-formats__files {
		flex-direction: column;
		gap: 34px;
	}
}

/*
|--------------------------------------------------------------------------
| Movimiento reducido
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
	.arco-formats__heading,
	.arco-formats__files,
	.arco-formats__file-link,
	.arco-formats__back {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/*
|--------------------------------------------------------------------------
| Centrar documentos de apoyo cuando hay dos elementos
|--------------------------------------------------------------------------
*/

.arco-support-documents__files {
	grid-template-columns:
		repeat(2, minmax(130px, 170px));

	justify-content: center;

	gap: 46px;

	max-width: 440px;

	margin:
		0
		auto;
}

@media (max-width: 768px) {

	.arco-support-documents__files {
		grid-template-columns: 1fr;

		max-width: 260px;

		gap: 28px;
	}

}