@layer reset, base, components, utilities, site, states;

@layer reset {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html {
		font-size: 100%;
		scroll-behavior: smooth;
	}
}

@layer base {
	body {
		min-width: 17.5rem;
		background: var(--surface-soft);
		color: var(--text-primary);
		font-family: var(--font-sans);
		line-height: 1.55;
		text-rendering: optimizelegibility;
	}
	main {
		margin: 0 auto;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
		min-height: 55vh;
		background-color: var(--color1-4);
	}
	section {
		width: 100%;
	}
	img {
		max-width: 100%;
	}
	h1,
	h2,
	h3,
	h4 {
		color: var(--text-primary);
		line-height: 1.15;
		text-wrap: balance;
	}
	p {
		text-wrap: pretty;
	}
	a,
	button,
	input,
	select,
	textarea {
		font: inherit;
	}
	a,
	button {
		transition:
			color 0.2s ease,
			background-color 0.2s ease,
			border-color 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.2s ease,
			opacity 0.2s ease;
	}
	a {
		text-decoration: none;
	}
	:where(a, button, input, select, textarea, summary):focus-visible {
		outline: 0.2rem solid var(--focus-ring);
		outline-offset: 0.18rem;
	}
	[hidden] {
		/* stylelint-disable-next-line declaration-no-important -- Garantiza la semántica nativa de hidden frente a reglas de componentes. */
		display: none !important;
	}
	::selection {
		background-color: var(--brand-accent);
		color: var(--brand-accent-contrast);
	}
	::-webkit-scrollbar {
		width: 0.5rem;
		height: 0.5rem;
	}
	::-webkit-scrollbar-track {
		background: var(--color0-3);
	}
	::-webkit-scrollbar-thumb {
		background: var(--brand-text);
	}
	::-webkit-scrollbar-thumb:hover,
	::-webkit-scrollbar-thumb:active {
		background: var(--brand-accent-text);
	}
	.capa-flotante-fondo {
		position: fixed;
		inset: 0;
		background: rgb(7 31 25 / 52%);
		backdrop-filter: blur(0.18rem);
		pointer-events: auto;
	}
	.grecaptcha-badge {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		/* stylelint-disable declaration-no-important -- Debe prevalecer sobre cualquier animación declarada por los componentes. */
		*,
		*::before,
		*::after {
			scroll-behavior: auto !important;
			transition-duration: 0.01ms !important;
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
		}
		/* stylelint-enable declaration-no-important */
	}
}

@layer states {
	/* La visibilidad interactiva prevalece sobre layout y personalizaciones del sitio. */
	:where(.menu-center, .menu-top-right, .category-menu, .capa-flotante-fondo) {
		display: none;
	}
	.hide {
		/* stylelint-disable-next-line declaration-no-important -- Estado explícito que también debe prevalecer sobre estilos en línea heredados. */
		display: none !important;
	}
}