/* contact.duxels.com: the page itself. The common header and footer (duxels-shared, put in by the Worker) bring their own stylesheet, which loads AFTER this one and sets the Duxels
   tokens on :root (--bg #0b1020, --bg2 #121a33, --fg #e8ecf8, --mut #a4adc8, --ia #2a86ff, --xr #f0392f, --bc #22b14c, --line, --font); the fallbacks below are the same values.
   Dark only (Estándares Duxels point 16). Mobile first: it works at 360 px with no sideways scroll. The header is fixed, so <main> leaves room for it. */
:root {
  color-scheme: dark;
  /* the tokens, with their values, in case the header's stylesheet is late or missing (it overrides these with the same values) */
  --bg: #0b1020; --bg2: #121a33; --fg: #e8ecf8; --mut: #a4adc8; --ia: #2a86ff; --xr: #f0392f; --bc: #22b14c; --line: rgba(232, 236, 248, 0.14);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --card: var(--bg2);
  --blue: var(--ia);
  --red: var(--xr);
  --green: var(--bc);
  --err: #ff8a80; /* the red as TEXT on the card: #f0392f is 4.0:1 there, this one passes AA */
  --ink: #0b1020; /* the text on a blue button: 5:1; white on #2a86ff is 3.5:1 */
  --radius: 14px;
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--font); }
/* the text of the page follows the language of the header (the Worker and the menu set <html lang>) */
html:lang(es) main [lang="en"], html:lang(en) main [lang="es"] { display: none; }
.contact { flex: 1; width: min(100% - 32px, 680px); margin: 0 auto; padding: 88px 0 40px; box-sizing: border-box; }
.contact:focus { outline: none; }
.contact [hidden] { display: none !important; }
.contact a:not(.btn) { color: var(--blue); text-underline-offset: 3px; }
.contact a:not(.btn):hover { color: #6aa9ff; }

.hero h1 { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.035em; line-height: 1.1; overflow-wrap: anywhere; margin: 0; }
.hero .lead { color: var(--mut); font-size: 1.05rem; margin-top: 12px; max-width: 38em; }
.alts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.alts .btn { margin-top: 0; min-height: 48px; }
.contact .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: 10px 20px; border: 1px solid var(--blue); border-radius: 999px;
  font: inherit; line-height: 1.2; text-decoration: none; cursor: pointer; background: var(--blue); border-color: var(--blue); color: var(--ink); font-weight: 700; }
.contact .btn:hover { background: #5aa0ff; border-color: #5aa0ff; }
.contact .btn.alt { background: transparent; border-color: var(--line); color: var(--fg); }
.contact .btn.alt:hover { background: rgba(232, 236, 248, 0.1); border-color: var(--fg); }
.contact .btn svg { width: 20px; height: 20px; }
.contact .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.contact .btn[disabled][aria-busy="true"] { cursor: progress; }
.contact .btn:focus-visible, .contact a:focus-visible, .contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.card { margin-top: 36px; padding: clamp(18px, 4vw, 28px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; }
.card h2:focus { outline: none; }
.field { margin-top: 18px; }
.field label { display: block; font-weight: 650; margin-bottom: 6px; }
.field .opt { color: var(--mut); font-weight: 400; }
.field .hint { color: var(--mut); font-size: 0.92rem; margin: -2px 0 6px; }
.field input, .field textarea { display: block; width: 100%; max-width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg);
  color: var(--fg); font: inherit; }
.field input::placeholder, .field textarea::placeholder { color: var(--mut); }
.field textarea { min-height: 140px; resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.count { color: var(--mut); font-size: 0.88rem; text-align: right; margin-top: 4px; }
.err { color: var(--err); font-size: 0.95rem; margin-top: 6px; }
.err:empty { display: none; }

/* the trap: no person sees it or reaches it (off the screen, not display:none, which some bots skip) */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.turnstile { margin-top: 20px; min-height: 0; max-width: 100%; overflow-x: auto; }
.consent { color: var(--mut); font-size: 0.92rem; margin-top: 16px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 20px; }
.actions .btn { margin-top: 0; min-height: 48px; }
.status { color: var(--err); margin-top: 14px; min-height: 0; }
.status:empty { display: none; }
.notice { margin-top: 16px; padding: 10px 14px; border-left: 3px solid var(--blue); background: rgba(42, 134, 255, 0.1); color: var(--fg); border-radius: 0 10px 10px 0; }
.notice:empty { display: none; }
.thanks { margin-top: 4px; padding: 4px 0 0 14px; border-left: 3px solid var(--green); }
.thanks:focus { outline: none; }
.thanks p { color: var(--mut); margin-top: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .card { animation: c-in 0.22s ease-out; }
  @keyframes c-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}