/***************
 CSS RESET
 ***************/
@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
		padding: 0;
	}

	body {
		min-height: 100vh;
		line-height: 1.5;
		font-family: "Montserrat", system-ui, sans-serif;
		background: #ffffff;
		color: #202020;
	}

	img, picture, video, canvas, svg {
		display: block;
		max-inline-size: 100%;
	}

	input, button, textarea, select {
		font: inherit;
		letter-spacing: inherit;
		word-spacing: inherit;
		color: currentColor;
	}

	p, h1, h2, h3, h4, h5, h6 {
		overflow-wrap: break-word;
	}

	ol, ul {
		list-style: none;
	}

	:not([class]) {
		h1&, h2&, h3&, h4&, h5&, h6& {
			margin-block: 0.75em;
			line-height: 1.25;
			text-wrap: balance;
			letter-spacing: -0.05ch;
		}

		p&, ol&, ul& {
			margin-block: 1em;
		}

		ol&, ul& {
			padding-inline-start: 1.5em;
			list-style: revert;
		}

		li& {
			margin-block: 0.5em;
		}
	}
}


/* El header forma parte del flujo del documento */
#page {
	min-height: 100vh;
	padding-top: 0;
}

/* Globales */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.container-large {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Hero sections genéricas */
.hero-section .hero-header-container {
	padding: 0 10%;
}

.global-wrapper {
	padding: 0px 60px;
}

/* Breadcrumb */
.breadcrumb {
	padding: 16px 0;
}

.breadcrumb .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.breadcrumb-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.breadcrumb-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.breadcrumb-link {
	color: #666666;
	font-size: 14px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.breadcrumb-link:hover {
	color: #f5332a;
	text-decoration: underline;
}

.breadcrumb-separator {
	color: #666666;
	font-size: 14px;
	user-select: none;
}

.breadcrumb-current {
	color: #1A1A1A;
	font-size: 14px;
	font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
	.breadcrumb {
		padding: 12px 0;
	}

	.breadcrumb-link,
	.breadcrumb-separator,
	.breadcrumb-current {
		font-size: 13px;
	}

	.breadcrumb-nav {
		gap: 8px;
	}

	.breadcrumb-item {
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.breadcrumb-link,
	.breadcrumb-separator,
	.breadcrumb-current {
		font-size: 12px;
	}
}