:root {
	--gres-crema: #e5ddcf;
	--gres-tinta: #0a0604;
}
body {
	margin: 0;
	background: #000;
	color: var(--gres-crema);
	font-family: "Space Grotesk", system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.gres-contenido { max-width: 1140px !important; margin: 0 auto; padding: 40px 20px; }
.elementor-page .gres-contenido { max-width: none; padding: 0; }

/* Landing (medidas de los PSD 1440 y 390) */
.gres-landing p { margin: 0; }
.gres-landing strong { font-weight: 600; }
.gres-landing .elementor-widget-image img { display: block; margin: 0 auto; }
.gres-landing .gres-logo__img { display: block; width: 100%; height: auto; }
.gres-landing .gres-qr a { display: block; line-height: 0; }
.gres-landing .gres-qr img { display: block; width: 100%; height: auto; background: var(--gres-crema); padding: 20px; box-sizing: border-box; border-radius: 16px; }
.gres-landing .gres-ig { display: block; aspect-ratio: 1; color: var(--gres-crema); }
.gres-landing .gres-ig svg { display: block; }
.gres-landing .gres-btn .elementor-button { width: 338px; }

/* Hover: el color se rellena de izquierda a derecha */
.gres-landing .gres-btn .elementor-button {
	--gres-fill: var(--gres-crema);
	background-image: linear-gradient(var(--gres-fill), var(--gres-fill));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size .65s cubic-bezier(.65, 0, .35, 1), color .45s cubic-bezier(.65, 0, .35, 1) .1s;
}
.gres-landing .gres-btn .elementor-button:hover,
.gres-landing .gres-btn .elementor-button:focus-visible {
	background-size: 100% 100%;
	background-color: transparent !important;
	color: var(--gres-tinta) !important;
}
/* Botón claro: se rellena en oscuro y el texto pasa a crema */
.gres-landing .gres-btn--claro .elementor-button { --gres-fill: var(--gres-tinta); }
.gres-landing .gres-btn--claro .elementor-button:hover,
.gres-landing .gres-btn--claro .elementor-button:focus-visible {
	background-color: var(--gres-crema) !important;
	color: var(--gres-crema) !important;
}
@media (prefers-reduced-motion: reduce) {
	.gres-landing .gres-btn .elementor-button { transition: none; }
}
.gres-landing .gres-btn--claro .elementor-button { width: 152px; }
.gres-landing .gres-intro { max-width: 540px !important; }
.gres-landing .gres-viaje { max-width: 760px !important; }
.gres-landing .gres-cover-widget { width: 100%; }

@media (max-width: 767px) {
	.gres-landing .gres-qr a { display: block; line-height: 0; }
	.gres-landing .gres-qr img { padding: 16px; border-radius: 13px !important; }
	.gres-landing .gres-btn .elementor-button { width: 220px; }
	.gres-landing .gres-btn--claro .elementor-button { width: 126px; }
	.gres-landing .gres-intro { max-width: 310px !important; }
	.gres-landing .gres-viaje { max-width: 360px !important; letter-spacing: -.01em; }
	.gres-landing .gres-h2-circular { max-width: 210px !important; }
	.gres-landing .gres-pie { max-width: 320px !important; }
	.gres-landing .gres-br { display: none; }
}

/* Página 404 */
.gres-404 {
	min-height: 100vh;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}
.gres-404__logo { display: block; margin-bottom: 56px; line-height: 0; }
.gres-404__logo img { width: 232px; height: auto; }
.gres-404__codigo {
	margin: 0;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(96px, 22vw, 200px);
	font-weight: 300;
	line-height: .9;
	letter-spacing: -.04em;
}
.gres-404__titulo {
	margin: 24px 0 12px;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 400;
	line-height: 1.15;
}
.gres-404__texto { max-width: 420px; margin: 0 0 40px; font-size: 18px; line-height: 1.5; opacity: .8; }
.gres-404__btn {
	--gres-fill: var(--gres-crema);
	display: inline-block;
	width: 220px;
	max-width: 100%;
	padding: 16px 24px;
	box-sizing: border-box;
	border: 1px solid var(--gres-crema);
	border-radius: 999px;
	color: var(--gres-crema);
	text-decoration: none;
	letter-spacing: .04em;
	background: linear-gradient(var(--gres-fill), var(--gres-fill)) no-repeat left center / 0% 100%;
	transition: background-size .65s cubic-bezier(.65, 0, .35, 1), color .45s cubic-bezier(.65, 0, .35, 1) .1s;
}
.gres-404__btn:hover,
.gres-404__btn:focus-visible { background-size: 100% 100%; color: var(--gres-tinta); }
@media (prefers-reduced-motion: reduce) {
	.gres-404__btn { transition: none; }
}