/* ==== FONTS ==== */
@font-face {
	src: url('../fonts/plex-serif-light.woff2') format('woff2');
	font-family: 'IBM Plex Serif';
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	src: local('Georgia');
	font-family: 'IBM Plex Serif Fallback';
	size-adjust: 103.92%;
}
@font-face {
	src: url('../fonts/plex-sans-var.woff2') format('woff2');
	font-family: 'IBM Plex Sans';
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	src: local('Arial');
	font-family: 'IBM Plex Sans Fallback';
	size-adjust: 100.15%;
}

/* ==== TOKENS ==== */
:root {
	--color-borrasca: hsl(216, 29%, 10%);
	--color-calima: hsl(216, 33%, 97%);
	--color-neblina: hsl(216, 25%, 92%);
	--color-costura: hsl(214, 19%, 84%);
	--color-grisalla: hsl(215, 10%, 48%);
	--color-ria: hsl(196, 83%, 26%);
	--color-ria-hondo: hsl(196, 83%, 19%);
	--color-azufre: hsl(47, 100%, 44%);
	--color-error: hsl(4, 70%, 38%);
	--space-minimo: 4px;
	--space-corto: 8px;
	--space-medio: 16px;
	--space-amplio: 32px;
	--space-holgado: 48px;
	--space-seccion: clamp(64px, 8vw, 112px);
	--space-gutter: clamp(16px, 4vw, 48px);
	--space-header: 76px;
	--font-titular: 'IBM Plex Serif', 'IBM Plex Serif Fallback', Georgia, serif;
	--font-texto: 'IBM Plex Sans', 'IBM Plex Sans Fallback', Arial, sans-serif;
	--radius-pieza: 10px;
}

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

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

body {
	min-height: 100vh;
	margin: 0;
	font-family: var(--font-texto);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-borrasca);
	background: var(--color-calima);
}

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

svg {
	display: block;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

/* keep [hidden] stronger than component display rules */
body [hidden],
body [hidden][class] {
	display: none;
}

a {
	color: var(--color-ria);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--color-ria-hondo);
}

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

/* ==== TYPE ==== */
h1,
h2,
h3 {
	font-family: var(--font-titular);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(2rem, 3.6vw, 3.1rem);
}

h3 {
	font-size: 1.45rem;
	letter-spacing: -0.01em;
}

p + p {
	margin-top: var(--space-medio);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--space-medio);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-borrasca);
}

.skew-mark {
	display: inline-block;
	flex: none;
	width: 22px;
	height: 12px;
	background: var(--color-azufre);
	transform: skewX(-24deg);
}

.lead {
	max-width: 62ch;
	font-size: 1.15rem;
	line-height: 1.6;
}

.small-note {
	font-size: 0.95rem;
	line-height: 1.55;
}

.price-tag {
	font-family: var(--font-texto);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ==== BUTTONS ==== */
.btn,
.btn-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 26px;
	font-family: var(--font-texto);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border-radius: 0;
}

.btn {
	color: var(--color-calima);
	background: var(--color-ria);
	border: 1px solid var(--color-ria);
}

.btn:hover {
	color: var(--color-calima);
	background: var(--color-ria-hondo);
}

.btn-line {
	color: var(--color-borrasca);
	background: transparent;
	border: 1px solid var(--color-borrasca);
}

.btn-line:hover {
	color: var(--color-calima);
	background: var(--color-borrasca);
}

.btn[disabled] {
	cursor: wait;
	background: var(--color-grisalla);
	border-color: var(--color-grisalla);
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	font-weight: 600;
	text-decoration: none;
	color: var(--color-ria);
}

.arrow-link:hover {
	text-decoration: underline;
}

/* JS-only controls stay hidden until the script runs */
html:not(.scripted) .js-only {
	display: none;
}

.scripted .no-js-note {
	display: none;
}

/* ==== FIELDS ==== */
.field {
	display: grid;
	gap: 6px;
}

.field label,
.field-label {
	font-size: 0.95rem;
	font-weight: 600;
}

.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	font-family: var(--font-texto);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-borrasca);
	background: var(--color-calima);
	border: 1px solid var(--color-grisalla);
	border-radius: var(--radius-pieza);
}

.field textarea {
	min-height: 140px;
	resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: 2px solid var(--color-ria);
	outline-offset: 1px;
	border-color: var(--color-ria);
}

.field-hint {
	font-size: 0.88rem;
	color: var(--color-borrasca);
}

.field-error {
	min-height: 1.2em;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-error);
}

.field[data-bad] input,
.field[data-bad] select,
.field[data-bad] textarea {
	border-color: var(--color-error);
}

.check-row {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 0.95rem;
	line-height: 1.5;
}

.check-row input {
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--color-ria);
}

.form-status {
	min-height: 1.4em;
	font-weight: 600;
}

.form-status[data-tone="error"] {
	color: var(--color-error);
}