/* Base: reset, tipografía, utilidades. Mobile first. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { object-fit: cover; }
a { color: var(--c-primary-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary); }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }
blockquote { margin: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px; z-index: 1000;
	width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
	padding: 10px 16px; background: var(--c-white); color: var(--c-dark);
	font-weight: 700; border-radius: 6px; box-shadow: var(--shadow);
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.container--narrow { max-width: 860px; }
.container--article { max-width: 800px; }
.text-center { text-align: center; }
.mt { margin-top: 24px; }
.accent { color: var(--c-primary); }
.is-flip { transform: scaleX(-1); }

.icon { flex: none; }

/* Placeholders (cuando aún no se sube imagen) */
.ph {
	display: block; width: 100%; height: 100%; min-height: 120px;
	background:
		radial-gradient(120% 70% at 50% 100%, #3f8f1a 0%, #2a6a12 45%, transparent 46%),
		linear-gradient(180deg, #0d2b1a 0%, #1b4d2a 100%);
}
.ph--hero {
	background:
		radial-gradient(60% 55% at 78% 30%, rgba(255, 244, 190, .55) 0%, transparent 60%),
		repeating-linear-gradient(90deg, #2f7d12 0 70px, #3a8c18 70px 140px),
		linear-gradient(180deg, #0a1d12, #1a4a22);
	background-size: auto, 100% 45%, auto;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center, bottom, center;
}
.ph--stadium { background: linear-gradient(180deg, #0f2a4a 0%, #1d3f66 38%, #2f7d12 38%, #3f9b1d 100%); }
.ph--garden { background: linear-gradient(180deg, #a7d3a0 0%, #6fb15b 35%, #3f8f1a 100%); }
.ph--terrace { background: linear-gradient(180deg, #e8efe6 0%, #c9d8c4 45%, #4f9a2a 45%, #3f8f1a 100%); }
.ph--office { background: linear-gradient(180deg, #cfd9de 0%, #9fb3bd 50%, #5a9b35 50%, #3f8f1a 100%); }
.ph--play { background: linear-gradient(180deg, #8fc6e8 0%, #b9dff0 40%, #4f9a2a 40%, #3f8f1a 100%); }
.ph--pool { background: linear-gradient(180deg, #7ec4e6 0%, #3e9ad0 45%, #3f8f1a 45%, #2f7d12 100%); }
.ph--sq0 { background: linear-gradient(135deg, #7fb069, #2f7d12); }
.ph--sq1 { background: linear-gradient(135deg, #a7d3a0, #3f8f1a); }
.ph--sq2 { background: linear-gradient(135deg, #5a9b35, #1d5a0e); }

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