/* ============================================================================
   mode: PERSUADE — quiet.

   This is a placeholder, not a launch page. It persuades only that the thing is
   real and that someone is reachable; it does not sell, count down, or capture.
   Everything a launch page would add (a form, a timer, social proof, imagery)
   is absent on purpose, and the absences are the design.

   Committed to a single light appearance. There is no `prefers-color-scheme`
   block because the brand tokens are defined against white only — inventing a
   dark palette here would put unreviewed colour pairs in front of the client
   before the real surface has them. `body` paints its background explicitly.

   There is no animation and no transition anywhere in this file, so there is
   nothing for `prefers-reduced-motion` to reduce.
   ============================================================================ */

:root {
	/* Brand tokens. Every ratio below is COMPUTED against the surface the token
	   actually prints on in this file — not against white by default. */
	--primary:  #280071; /* 15.81:1 on white · 13.93:1 on --tint          */
	--green:    #00CE7C; /* FILL ONLY. 2.08:1 on white — never text.      */
	--body:     #3d3a47; /* 11.08:1 on white ·  9.77:1 on --tint          */
	--body-3:   #55505f; /*  7.78:1 on white ·  6.86:1 on --tint          */
	--tint:     #f2effa;
	--tint-2:   #e8e3f5;
	--border:   #ddd8ea;
	--surface:  #ffffff;
	--dark:     #1d1533; /* 17.39:1 on white. Hover ground for the action.  */

	/* The application's own fallback chain, copied verbatim from
	   resources/scss/utilities/_typography.scss. See README.md for why this
	   page ships no font files. */
	--font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--surface);
	color: var(--body);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	/* The page is short; centring it vertically on a tall viewport stops it
	   sitting in the top-left corner of a desktop screen looking unfinished in
	   a way we did not intend. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	padding: 2.5rem 1.5rem;
}

main, footer { width: 100%; max-width: 34rem; margin-inline: auto; }

/* --- status ------------------------------------------------------------- */

.status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	background: var(--tint-2);
	color: var(--primary); /* 12.60:1 on --tint-2 */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* The one place the green appears: an 8px fill with no text on it, decorative,
   and never the only carrier of the meaning — the label beside it says the
   same thing in words. */
.status__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--green);
	flex: none;
}

/* --- type --------------------------------------------------------------- */

h1 {
	margin: 0 0 1rem;
	color: var(--primary); /* 15.81:1 on --surface */
	font-size: clamp(2.5rem, 9vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.lead {
	margin: 0 0 1.25rem;
	color: var(--body); /* 11.08:1 on --surface */
	font-size: 1.1875rem;
	line-height: 1.55;
	text-wrap: pretty;
}

.note {
	margin: 0 0 2rem;
	color: var(--body-3); /* 7.78:1 on --surface */
	font-size: 1rem;
}

/* --- contacto ----------------------------------------------------------- */

.contacto {
	background: var(--tint);
	border-left: 3px solid var(--primary); /* 13.93:1 against --tint */
	border-radius: 4px;
	padding: 1.25rem 1.25rem 1rem;
}

.contacto h2 {
	margin: 0 0 0.25rem;
	color: var(--primary); /* 13.93:1 on --tint */
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.contacto p {
	margin: 0;
	color: var(--body); /* 9.77:1 on --tint */
	font-size: 0.9375rem;
}

/* The only control on the page. Named by its own address, which is the most
   honest label a link out of a placeholder can carry, and given a 44px tap
   target with the negative inline margin cancelling the padding so the text
   stays flush with the paragraph above it. */
.contacto__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-inline-start: -0.5rem;
	padding-inline: 0.5rem;
	border-radius: 4px;
	color: var(--primary); /* 13.93:1 on --tint */
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	word-break: break-word;
}

.contacto__enlace:hover { background: var(--tint-2); }

/* --- the staging action -------------------------------------------------
   The page's only action, so it is the one filled element on it. #280071 on
   white is 15.81:1 as a ground; white on #280071 is the same 15.81:1 as ink,
   well past AA for the 16px it prints at. 44px minimum, because a phone is
   where a placeholder gets opened.

   The note beside it is not decoration: it is what stops a closed door from
   reading as a broken one. #55505f on --surface is 7.78:1. */
.avance {
	margin: 2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
}

.avance__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 1.125rem;
	border-radius: 4px;
	background: var(--primary);
	color: #ffffff; /* 15.81:1 on --primary */
	font-weight: 600;
	text-decoration: none;
}

/* Hover darkens rather than lightens: a lighter fill would walk the white ink
   down towards the 4.5:1 floor, and a hover state must never be the state
   that fails. #1d1533 takes it to 17.39:1. */
.avance__enlace:hover { background: var(--dark); }

.avance__nota {
	color: var(--body-3); /* 7.78:1 on --surface */
	font-size: 0.875rem;
}

/* Focus is never suppressed here — no `outline: none`, no `outline: 0`. The
   ring is the primary at 13.93:1 against the surface it lands on, well past
   the 3:1 that WCAG 1.4.11 asks of a non-text indicator. */
:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- footer ------------------------------------------------------------- */

footer {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

footer p {
	margin: 0;
	color: var(--body-3); /* 7.78:1 on --surface */
	font-size: 0.875rem;
}