*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

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

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

a {
	color: inherit;
}

button {
	font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin-top: 0;
}

/*
 * Heading scale cloned from nosolowebs.es: Space Grotesk throughout, their
 * weights, their tracking, and their colours — including the blue h3, which is
 * the most recognisable part of the system.
 *
 * Sizes are clamped rather than fixed. The agency site switches sizes at
 * Elementor breakpoints; a clamp reaches the same desktop value and degrades on
 * a phone without a second set of rules to keep in sync.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
}

h1 {
	color: var(--color-black);
	font-size: clamp(34px, 4.6vw, 46px);
	font-weight: 700;
	letter-spacing: -3px;
	line-height: 1.08;
	margin-bottom: 30px;
}

h2 {
	color: var(--color-ink);
	font-size: clamp(30px, 3.8vw, 38px);
	font-weight: 500;
	letter-spacing: -1.2px;
	line-height: 1.05;
	margin-bottom: 28px;
}

h3 {
	color: var(--color-blue);
	font-size: clamp(21px, 2.4vw, 24px);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.33;
}

h4 {
	color: var(--color-grey);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.11;
}

h5 {
	color: var(--color-ink);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.3px;
	line-height: 1.25;
}

h6 {
	color: var(--color-grey);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.3;
}

/* On dark or blue ground the heading colours have to invert or they vanish. */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6,
.section-dark h1, .section-dark h2, .section-dark h3,
.band h1, .band h2, .band h3 {
	color: var(--color-white);
}

/*
 * The hero keeps a display size of its own. A product landing page leads with
 * its promise, and 46px is the agency's in-page heading size, not its hero.
 */
.hero-copy h1 {
	font-size: clamp(44px, 6.6vw, 92px);
	letter-spacing: -0.055em;
	line-height: 0.98;
}

.container {
	margin-inline: auto;
	max-width: var(--container);
	padding-inline: var(--gutter);
	width: 100%;
}

.section {
	padding-block: var(--section-space);
	position: relative;
}

.skip-link {
	background: var(--color-accent);
	color: var(--color-black);
	left: 16px;
	padding: 10px 14px;
	position: fixed;
	top: -100px;
	z-index: 100;
}

.skip-link:focus {
	top: 16px;
}

:focus-visible {
	outline: 3px solid var(--color-green);
	outline-offset: 4px;
}

/* Visually hidden but still announced. The burger label needs it, and without
   it "Abrir menú" simply printed next to the button. */
.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}