/**
 * Global styles.
 *
 * Base visual compartida por todo el sitio. Elementor debe controlar el layout
 * visual principal; este archivo define tokens, accesibilidad y ajustes globales
 * que conviene mantener fuera del editor visual.
 */

:root {
	--cream: #f5edd8;
	--gold: #b8863c;
	--gold-light: #d4a855;
	--dark: #1a1208;
	--dark-mid: #2a1f0e;
	--hcc-color-text: #1a1208;
	--hcc-color-muted: rgba(26, 18, 8, 0.68);
	--hcc-color-surface: #ffffff;
	--hcc-color-border: rgba(26, 18, 8, 0.12);
	--hcc-color-primary: #ab2a3e;
	--hcc-color-primary-hover: #c93d52;
	--hcc-font-body: "Helvetica Neue", "Raleway", sans-serif;
	--hcc-font-menu: "Oswald", "Helvetica Neue", sans-serif;
	--hcc-focus-ring: 0 0 0 3px rgba(212, 168, 85, 0.34);
	--hcc-container-width: 1200px;
}

html {
	scroll-behavior: smooth;
}

body {
	background: #ffffff;
	color: var(--hcc-color-text);
	font-family: var(--hcc-font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a {
	text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	box-shadow: var(--hcc-focus-ring);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

img,
svg,
video {
	height: auto;
	max-width: 100%;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.screen-reader-text:focus {
	background-color: var(--hcc-color-surface);
	clip: auto;
	clip-path: none;
	color: var(--hcc-color-text);
	display: block;
	height: auto;
	left: 1rem;
	padding: 0.75rem 1rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

.hcc-container {
	margin-inline: auto;
	max-width: var(--hcc-container-width);
	padding-inline: clamp(1rem, 4vw, 2rem);
	width: 100%;
}