/* Variables CSS */
:root {
	--color-light: rgba(185, 185, 185, 0.3);
	--color-gray-dark: #262626;
	--color-first: #004a89;
	--color-second: #0164a7;
	--color-third: #177ab8;
	--color-fourth: #3c8dc3;
	--color-fifth: #96bee0;
	--color-sixth: #f3bca3;
	--color-seventh: #ee7a5e;
	--color-eighth: #d43e32;
	--color-nineth: #8f181d;
	--color-tenth: #6f150f;
	--color-bg: #3c8dc3;
	--color-bg-document: #eff5fb;
	--color-border-document: #064c8a;
}

/* Reset y estilos base */
* {
	padding: 0;
	margin: 0;
	color: var(--color-dark);
	box-sizing: border-box;
	transition: color 0.4s ease;
	color: var(--color-gray-dark);
	font-family: "MuseoSans-500", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Museo Sans 700", sans-serif;
}

html {
	min-height: 100%;
	position: relative;
}

body {
	min-height: 100vh;
	position: relative;
}

main {
	padding-bottom: 300px;
}

/* Header */
.Header {
	display: flex;
	width: 100%;
	padding: 20px;
	justify-content: space-between;
	align-items: center;
}

.Header img {
	width: 100%;
	height: 40px;
	object-fit: contain;
}

.Header__vertical {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.Header__horizontal {
	list-style: none;
	display: flex;
	gap: 10px;
	display: none;
}

.Header li {
	width: max-content;
}

.Header a {
	text-decoration: none;
}

/* Hamburger Menu */
.Hamburger {
	position: relative;
}

.Hamburger button {
	background-color: transparent;
	border: 1px solid var(--color-light);
	padding: 8px 20px;
	border-radius: 4px;
	cursor: pointer;
}

.Hamburger button i {
	font-size: 1.4rem;
}

.Hamburger .Content {
	position: absolute;
	border: 1px solid var(--color-light);
	background-color: white;
	padding: 10px;
	z-index: 9;
	right: 0;
	border-radius: 2px;
}

/* Banner */
.Banner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.Banner img {
	width: 100%;
	object-fit: cover;
	max-height: 500px;
}

.Banner__texts {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.Banner__texts div {
	background-color: white;
	padding: 10px;
	margin: 10px;
	width: fit-content;
	max-width: 500px;
	border-radius: 2px;
}

.Banner__texts h1 {
	font-size: 2rem;
}

.Banner__texts h2 {
	font-size: 1.3rem;
}

/* What is section */
.What-is {
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
}

.What-is .Icons {
	grid-column: 1 / 11;
	width: 100%;
	padding: 8px 20px;
	padding-top: 30px;
}

.What-is__text {
	grid-column: 2 / 10;
	position: relative;
	padding: 50px 0;
}

.What-is__text h2 {
	color: white;
	font-size: 2rem;
}

.What-is__text p {
	background-color: white;
	border-radius: 8px;
	padding: 40px;
}

.What-is img {
	width: 100%;
	height: fit-content;
}

/* Colors component */
.Colors {
	height: 100%;
	display: flex;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.Color {
	width: 100%;
}

.Color.First {
	background-color: var(--color-first);
}

.Color.Second {
	background-color: var(--color-second);
}

.Color.Third {
	background-color: var(--color-third);
}

.Color.Fourth {
	background-color: var(--color-fourth);
}

.Color.Fifth {
	background-color: var(--color-fifth);
}

.Color.Sixth {
	background-color: var(--color-sixth);
}

.Color.Seventh {
	background-color: var(--color-seventh);
}

.Color.Eighth {
	background-color: var(--color-eighth);
}

.Color.Nineth {
	background-color: var(--color-nineth);
}

.Color.Tenth {
	background-color: var(--color-tenth);
}

/* Container */
.Container {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.Container .Content {
	width: 100%;
	max-width: 1000px;
}

/* Sections comunes */
.Met,
.Phases,
.Process,
.Inscription,
.Gallery,
.Repository {
	padding: 60px;
}

.Met h2,
.Phases h2,
.Process h2,
.Inscription h2,
.Gallery h2,
.Repository h2 {
	font-size: 2rem;
	width: 100%;
}

.Met p,
.Phases p,
.Process p,
.Inscription p,
.Gallery p,
.Repository p {
	padding: 20px 0;
}

.Met img,
.Phases img,
.Process img,
.Inscription img,
.Gallery img,
.Repository img {
	width: 100%;
	height: fit-content;
	object-fit: contain;
}

/* Phases */
/* Phases */
.Phase {
	display: grid;
	grid-template-columns: 40px 1fr;
	/* Adjust grid gap if needed */
}

.Phase__number {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Ensure the line connects seamlessly */
}

.Phase__circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-family: "Museo Sans 700", sans-serif;
	font-weight: bold;
	font-size: 1rem;
	z-index: 1;
	flex-shrink: 0;
}

.Phase__line {
	width: 4px;
	flex-grow: 1;
	/* Stretch to fill space between circles */
	min-height: 20px;
	/* Minimum height if text is short */
	margin-top: -1px;
	/* Overlap slightly to avoid gaps */
	margin-bottom: -1px;
}

/* Hide line for the last item if desired, but user image shows line extending. 
   If we need to replicate exact image where line stops eventually...
   For now, I'll valid assume user wants what they see. 
   The image has a line after 5.
*/

.Phase__text {
	display: flex;
	flex-direction: column;
	padding: 0 0 30px 15px;
	/* Add bottom padding for spacing between items, and left padding */
}

/* Ensure text aligns with the top of the circle roughly */
.Phase__text h3 {
	margin-top: 5px;
	/* Adjust to align with circle center */
	line-height: 1.2;
}

.Phase__text p {
	padding: 10px 0 0 0;
	line-height: 1.5;
}

/* Text Colors */
.Phase__text h3.Zero {
	color: var(--color-seventh);
}

.Phase__text h3.One {
	color: var(--color-sixth);
}

.Phase__text h3.Two {
	color: var(--color-fifth);
}

.Phase__text h3.Three {
	color: var(--color-fourth);
}

.Phase__text h3.Four {
	color: var(--color-second);
}

.Phase__text h3.Five {
	color: var(--color-first);
}

/* Background Colors for Circles and Lines */
.Phase__circle.Zero,
.Phase__line.Zero {
	background-color: var(--color-seventh);
}

.Phase__circle.One,
.Phase__line.One {
	background-color: var(--color-sixth);
}

.Phase__circle.Two,
.Phase__line.Two {
	background-color: var(--color-fifth);
}

.Phase__circle.Three,
.Phase__line.Three {
	background-color: var(--color-fourth);
}

.Phase__circle.Four,
.Phase__line.Four {
	background-color: var(--color-second);
}

.Phase__circle.Five,
.Phase__line.Five {
	background-color: var(--color-first);
}

.Phases__people {
	padding: 30px 0;
}

.Phases__people h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-eighth);
}

.Phases__people h3 img {
	width: 50px;
}

/* Inscription form */
.Inscription {
	background-color: var(--color-bg);
}

.Inscription h2 {
	color: white;
}

.Inscription form {
	background-color: white;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.Inscription .Content {
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 20px;
}

.Input {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.Input input {
	padding: 10px;
	border: none;
	min-width: 300px;
	border-bottom: 2px solid var(--color-light);
	transition: all 0.4s ease;
}

.Input input:focus {
	outline: none;
	border-bottom: 2px solid var(--color-bg);
}

.Input .error-messages {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.Input .error-messages small {
	color: var(--color-eighth);
	font-size: 0.875rem;
}

.Inscription button {
	min-width: 250px;
	padding: 10px;
	border-radius: 4px;
	background-color: var(--color-eighth);
	border: none;
	color: white;
	cursor: pointer;
	font-size: 1rem;
}

.Inscription button:hover {
	opacity: 0.9;
}

.form-error {
	color: var(--color-eighth);
	margin-top: 10px;
	text-align: center;
}

/* Gallery */
.Gallery {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.gallery-main {
	width: 100%;
}

.gallery-thumbs {
	margin-top: 10px;
}

.carousel__item {
	width: 100%;
	position: relative;
	height: 300px;
	/* Mobile height */
}

@media (min-width: 768px) {
	.carousel__item {
		height: 450px;
	}
}

@media (min-width: 1024px) {
	.carousel__item {
		height: 550px;
	}
}

.carousel__item img {
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
	height: 100%;
}

.carousel__item footer {
	position: absolute;
	bottom: 0;
	padding: 10px;
	background-color: var(--color-first);
	width: 100%;
	border-radius: 0 0 8px 8px;
}

.carousel__item footer p {
	color: white;
	margin: 0;
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.carousel__item footer p {
		font-size: 1rem;
	}
}

.carousel__item--wait {
	height: 80px;
	width: 100%;
	padding: 2px;
	cursor: pointer;
}

@media (min-width: 768px) {
	.carousel__item--wait {
		height: 120px;
	}
}

.carousel__item--wait img {
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

/* Repository */
.Repository__documents {
	display: flex;
	padding: 30px;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.Repository__documents details {
	width: 100%;
	overflow: hidden;
}

.Repository__documents .Content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	align-items: center;
}

.Repository__documents summary {
	padding: 1rem;
	display: block;
	padding-left: 2.2rem;
	position: relative;
	cursor: pointer;
	color: white;
	user-select: none;
	border-radius: 8px;
}

.Repository__documents summary:before {
	content: '';
	border-width: 0.4rem;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top: 1.3rem;
	left: 1rem;
	transform: rotate(0);
	transform-origin: 0.2rem 50%;
	transition: 0.25s transform ease;
}

.Repository__documents details[open]>summary:before {
	transform: rotate(90deg);
}

.Repository__documents details summary::-webkit-details-marker {
	display: none;
}

.RepositoryCard {
	display: flex;
	max-width: 500px;
	background-color: var(--color-bg-document);
	border: 2px solid var(--color-border-document);
	border-radius: 4px;
	padding: 10px;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
}

.RepositoryCard img {
	width: 32px;
	height: 40px;
	object-fit: contain;
}

.RepositoryCard p {
	margin: 0;
	flex: 1;
	padding: 0 10px;
}

/* Footer */
.Footer {
	position: absolute;
	width: 100%;
	display: flex;
	flex-direction: column;
	bottom: 0;
	justify-content: center;
	align-items: center;
}

.Footer h2 {
	font-size: 1.8rem;
}

.Footer__Content {
	display: flex;
	padding: 20px;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}

.Footer__hr {
	width: 100%;
	height: 20px;
}

.Footer .Logos {
	height: 40px;
	width: 400px;
	object-fit: contain;
}

.Footer__content--network {
	display: flex;
	flex-wrap: wrap;
	max-width: 500px;
	gap: 30px;
}

.Footer .Network {
	display: flex;
	gap: 5px;
	align-items: center;
	text-decoration: none;
}

.Footer .Network img {
	width: 40px;
	height: 40px;
}

.Footer__network--seremi,
.Footer__network--gore {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Responsive */
.Phone {
	display: none;
}

@media (min-width: 1200px) {
	.Header__horizontal {
		display: flex;
	}

	.Hamburger {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.PC {
		display: none;
	}

	.Phone {
		display: block;
	}

	.Met,
	.Phases,
	.Process,
	.Inscription,
	.Gallery,
	.Repository {
		padding: 15px;
	}

	.Footer img {
		object-fit: contain;
		width: 100% !important;
	}

	.Footer__Content {
		flex-direction: column;
		gap: 15px;
	}

	.Input input {
		min-width: 100%;
	}
}