/*
Theme Name: Los Cinco Encantos
Theme URI: https://example.com/
Author: Los Cinco Encantos
Description: Tema de presentación para la casa rural Los Cinco Encantos.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: los-cinco-encantos
*/

:root {
	--ink: #222b24;
	--muted: #667066;
	--paper: #f7f6f1;
	--white: #fff;
	--green: #294d3e;
	--green-dark: #18372c;
	--rust: #b96342;
	--line: #dcded6;
	--serif: Georgia, "Times New Roman", serif;
	--sans: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
}

a {
	color: inherit;
}

img {
	display: block;
	max-width: 100%;
}

.site-header {
	position: relative;
	z-index: 2;
	background: var(--paper);
	border-bottom: 1px solid rgba(34, 43, 36, .1);
}

.header-inner {
	width: min(1240px, calc(100% - 64px));
	min-height: 82px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.brand {
	text-decoration: none;
	font-family: var(--serif);
	font-size: 23px;
	line-height: 1.05;
}

.brand span {
	display: block;
	margin-top: 5px;
	color: var(--muted);
	font-family: var(--sans);
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
}

.main-nav {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 42px);
}

.main-nav a {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.main-nav a:hover,
.main-nav a:focus-visible {
	color: var(--rust);
}

.nav-cta,
.button {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	border: 1px solid var(--green);
	background: var(--green);
	color: var(--white) !important;
	font-size: 12px !important;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.nav-cta:hover,
.button:hover {
	transform: translateY(-2px);
	border-color: var(--green-dark);
	background: var(--green-dark);
}

.button--light {
	border-color: rgba(255, 255, 255, .75);
	background: transparent;
}

.button--light:hover {
	border-color: var(--white);
	background: rgba(255, 255, 255, .12);
}

.hero {
	position: relative;
	min-height: min(720px, 76svh);
	min-height: min(720px, 76vh);
	display: flex;
	align-items: flex-end;
	color: var(--white);
	background: var(--green-dark);
	overflow: hidden;
}

.hero-image,
.hero-image::after {
	position: absolute;
	inset: 0;
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
}

.hero-image::after {
	content: "";
	background: linear-gradient(90deg, rgba(16, 30, 24, .76), rgba(16, 30, 24, .25) 65%, rgba(16, 30, 24, .12)), linear-gradient(0deg, rgba(16, 30, 24, .4), transparent 55%);
}

.hero-content {
	position: relative;
	z-index: 1;
	width: min(1240px, calc(100% - 64px));
	margin: 0 auto;
	padding: 100px 0 86px;
	animation: arrive .75s ease-out both;
}

.eyebrow {
	margin: 0 0 18px;
	color: var(--rust);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.hero .eyebrow {
	color: #f2b49b;
}

.hero h1 {
	max-width: 780px;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(54px, 8vw, 104px);
	font-weight: 400;
	line-height: .98;
}

.hero-copy {
	max-width: 520px;
	margin: 24px 0 30px;
	color: rgba(255, 255, 255, .88);
	font-size: 17px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hero-actions > p,
.contact-inner > p {
	margin: 0;
}

.facts {
	background: var(--green);
	color: var(--white);
}

.facts-inner {
	width: min(1240px, calc(100% - 64px));
	min-height: 104px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.fact {
	padding: 12px 28px;
	border-right: 1px solid rgba(255, 255, 255, .22);
}

.fact:first-child {
	padding-left: 0;
}

.fact:last-child {
	border: 0;
}

.fact strong,
.fact span {
	display: block;
}

.fact strong {
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 400;
}

.fact span {
	margin-top: 2px;
	color: rgba(255, 255, 255, .76);
	font-size: 11px;
}

.section {
	width: min(1240px, calc(100% - 64px));
	margin: 0 auto;
	padding: 112px 0;
}

.intro-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	align-items: center;
	gap: clamp(48px, 8vw, 120px);
}

.intro-grid > .wp-block-group__inner-container,
.facts-inner > .wp-block-group__inner-container,
.stay-grid > .wp-block-group__inner-container,
.gallery-grid > .wp-block-group__inner-container {
	display: contents !important;
}

.intro-copy h2,
.section-heading h2,
.stay-copy h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(38px, 5vw, 62px);
	font-weight: 400;
	line-height: 1.08;
}

.intro-copy p:not(.eyebrow) {
	max-width: 490px;
	margin: 24px 0 30px;
	color: var(--muted);
}

.text-link {
	color: var(--green);
	font-size: 12px;
	font-weight: 800;
	text-decoration-color: var(--rust);
	text-underline-offset: 6px;
}

.intro-photo {
	position: relative;
	min-height: 450px;
}

.intro-photo img {
	width: 100%;
	height: 450px;
	object-fit: cover;
}

.photo-note {
	position: absolute;
	right: -18px;
	bottom: -18px;
	width: 160px;
	padding: 19px 20px;
	background: var(--rust);
	color: var(--white);
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.2;
}

.stays {
	background: #e9ede6;
}

.stays-inner {
	width: min(1240px, calc(100% - 64px));
	margin: 0 auto;
	padding: 100px 0 108px;
}

.section-heading {
	max-width: 640px;
	margin-bottom: 48px;
}

.section-heading > p:last-child {
	max-width: 510px;
	margin: 18px 0 0;
	color: var(--muted);
}

.stay-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.stay {
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(28px, 4vw, 48px);
	background: var(--white);
	border-top: 3px solid var(--green);
}

.stay:nth-child(2) {
	border-top-color: var(--rust);
}

.stay-number {
	color: var(--rust);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
}

.stay h3 {
	margin: 20px 0 10px;
	font-family: var(--serif);
	font-size: 34px;
	font-weight: 400;
}

.stay p {
	max-width: 430px;
	margin: 0 0 26px;
	color: var(--muted);
	font-size: 14px;
}

.region {
	background: #e9ede6;
}

.region-inner {
	width: min(1240px, calc(100% - 64px));
	margin: 0 auto;
	padding: 104px 0 110px;
}

.region-intro {
	max-width: 760px;
	margin: 0 0 42px;
}

.region-intro h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 400;
	line-height: 1.06;
}

.region-intro > p:not(.eyebrow) {
	max-width: 670px;
	margin: 20px 0 22px;
	color: var(--muted);
}

.region-map-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 17px;
	border: 1px solid var(--green);
	color: var(--green);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.region-map-link:hover {
	background: var(--green);
	color: var(--white);
}

.region-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.region-grid > .wp-block-group__inner-container {
	display: contents !important;
}

.region-card {
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--line);
}

.region-card > .wp-block-group__inner-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.region-card > .wp-block-group__inner-container > .wp-block-image {
	width: 100%;
	height: auto;
	aspect-ratio: 1.38;
	margin: 0;
	overflow: hidden;
}

.region-card > .wp-block-group__inner-container > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.region-card-copy {
	height: 100%;
	flex: 1;
	padding: 22px 23px 18px;
	display: flex;
	flex-direction: column;
}

.region-card-copy > .wp-block-group__inner-container {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.region-card-copy h3 {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.12;
}

.region-card-copy > p:not(.region-credit) {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 13px;
}

.region-card-copy .text-link {
	margin-top: auto;
}

.region-credit {
	margin: 18px 0 0;
	color: var(--muted);
	font-size: 10px;
	line-height: 1.4;
}

.region-credit a {
	text-decoration-color: var(--rust);
	text-underline-offset: 2px;
}

.region-links {
	margin-top: 28px;
	padding-top: 21px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

.region-links a {
	color: var(--green);
	font-weight: 700;
	text-underline-offset: 4px;
}

.gallery-section {
	padding-bottom: 120px;
}

.gallery-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr .8fr;
	grid-template-rows: 250px 250px;
	gap: 14px;
}

.gallery-grid figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #d7d8cf;
}

.gallery-grid figure:first-child {
	grid-row: span 2;
}

.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.gallery-grid figure:hover img {
	transform: scale(1.035);
}

.gallery-grid figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 36px 16px 14px;
	background: linear-gradient(0deg, rgba(20, 30, 23, .7), transparent);
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
}

.contact-band {
	background: var(--green-dark);
	color: var(--white);
}

.contact-inner {
	width: min(1240px, calc(100% - 64px));
	margin: 0 auto;
	padding: 76px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.contact-inner h2 {
	max-width: 650px;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 400;
	line-height: 1.1;
}

.contact-inner .eyebrow {
	color: #f2b49b;
}

.site-footer {
	padding: 25px 32px;
	background: #122a21;
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
}

.footer-inner {
	width: min(1240px, 100%);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 18px;
}

.footer-inner p {
	margin: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@keyframes arrive {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
	.header-inner {
		width: calc(100% - 36px);
		min-height: 72px;
		gap: 12px;
	}

	.brand {
		font-size: 19px;
	}

	.main-nav {
		gap: 14px;
	}

	.main-nav a:not(.nav-cta) {
		display: none;
	}

	.nav-cta {
		min-height: 40px;
		padding: 0 13px;
		font-size: 11px !important;
	}

	.hero {
		min-height: 660px;
		min-height: 78svh;
	}

	.hero-image img {
		object-position: 53% center;
	}

	.hero-image::after {
		background: linear-gradient(90deg, rgba(16, 30, 24, .72), rgba(16, 30, 24, .24)), linear-gradient(0deg, rgba(16, 30, 24, .4), transparent 65%);
	}

	.hero-content,
	.facts-inner,
	.section,
	.stays-inner,
	.contact-inner {
		width: calc(100% - 36px);
	}

	.hero-content {
		padding: 84px 0 54px;
	}

	.hero h1 {
		font-size: clamp(54px, 15vw, 76px);
	}

	.hero-copy {
		max-width: 390px;
		font-size: 15px;
	}

	.facts-inner {
		min-height: 0;
		grid-template-columns: 1fr;
		padding: 10px 0;
	}

	.fact,
	.fact:first-child {
		padding: 15px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}

	.fact:last-child {
		border-bottom: 0;
	}

	.fact strong {
		font-size: 21px;
	}

	.section {
		padding: 76px 0;
	}

	.intro-grid {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.intro-photo,
	.intro-photo img {
		min-height: 0;
		height: 330px;
	}

	.photo-note {
		right: -7px;
		bottom: -12px;
		width: 135px;
		padding: 15px;
		font-size: 16px;
	}

	.stays-inner {
		padding: 76px 0;
	}

	.stay-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.stay {
		min-height: 260px;
		padding: 28px;
	}

	.region-inner {
		width: calc(100% - 36px);
		padding: 76px 0;
	}

	.region-grid {
		grid-template-columns: 1fr;
	}

	.region-card > .wp-block-group__inner-container > .wp-block-image {
		aspect-ratio: 1.45;
	}

	.gallery-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 270px 170px 170px;
	}

	.gallery-grid figure:first-child {
		grid-column: span 2;
		grid-row: auto;
	}

	.contact-inner {
		align-items: flex-start;
		flex-direction: column;
		padding: 64px 0;
	}

	.footer-inner {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}