/* businessos.es: the static marketing site. No build step, no JavaScript, no inline styles (the CSP
   in vercel.json forbids them), so this one file is the whole of its design.

   THE VALUES ARE THE APP'S. design-system/businessos/MASTER.md is the prose and
   src/app/globals.css the implementation; this file MIRRORS that stylesheet's ramps, semantics,
   radii, type scale, focus ring and motion tokens, because a static site cannot import it. Change a
   value there, change it here. The one difference is the theme switch: the app sets `.dark` from a
   script, and this site has no script, so dark is `prefers-color-scheme: dark` alone. */

/* ── Fonts: the app's own files (src/app/_fonts), self-hosted, never a CDN ─────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* latin-ext: only for a character in Google's range (layout.tsx), so Spanish text never fetches it. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-latin-ext-wght.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: 'Fira Code';
  src: url('/fonts/fira-code-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── 1 · Ramps (globals.css § 1, the subset this site uses) ────────────────────────────────── */
:root {
  --ramp-neutral-0: #ffffff;
  --ramp-neutral-50: #f4f4f6;
  --ramp-neutral-100: #e8e8eb;
  --ramp-neutral-200: #d9d9de;
  --ramp-neutral-350: #a1a1a9;
  --ramp-neutral-400: #85858d;
  --ramp-neutral-500: #74747d;
  --ramp-neutral-600: #62626a;
  --ramp-neutral-800: #2a2a2f;
  --ramp-neutral-850: #26262a;
  --ramp-neutral-880: #1f1f22;
  --ramp-neutral-900: #161618;
  --ramp-neutral-950: #0c0c0e;
  --ramp-neutral-975: #050506;
  --ramp-orange-500: #eb4e23;
  --ramp-orange-600: #d4421a;
  --ramp-orange-700: #bf330c;
}

/* ── 2 · Semantics, light (the default) — measured in MASTER § 4 ──────────────────────────── */
:root {
  color-scheme: light dark;

  --ds-canvas: var(--ramp-neutral-100);
  --ds-shell: var(--ramp-neutral-50);
  --ds-surface: var(--ramp-neutral-0);
  --ds-raised: var(--ramp-neutral-50);
  --ds-fg: var(--ramp-neutral-950);
  --ds-fg-muted: var(--ramp-neutral-600);
  --ds-edge: var(--ramp-neutral-100);
  --ds-primary: var(--ramp-neutral-950);
  --ds-primary-hover: var(--ramp-neutral-800);
  --ds-primary-fg: var(--ramp-neutral-0);
  --ds-primary-muted: var(--ramp-neutral-350);
  --ds-link: var(--ramp-neutral-950);
  --ds-accent: var(--ramp-orange-500);
  --ds-hero: var(--ramp-orange-600);
  --ds-hero-deep: var(--ramp-orange-700);
  --ds-hero-fg: var(--ramp-neutral-0);
  --ds-ring: var(--ramp-neutral-950);

  --ds-shadow-card: 0 1px 2px rgb(12 12 14 / 0.04), 0 6px 20px -8px rgb(12 12 14 / 0.08);
  --ds-shadow-lift: 0 2px 4px rgb(12 12 14 / 0.04), 0 18px 36px -14px rgb(12 12 14 / 0.18);
  --ds-shadow-hero: 0 18px 40px -18px rgb(212 66 26 / 0.6);
  --ds-shadow-pill: 0 1px 2px rgb(12 12 14 / 0.05);
}

/* ── 2 · Semantics, dark (the app's `.dark`, here from the system preference) ──────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ds-canvas: var(--ramp-neutral-975);
    --ds-shell: var(--ramp-neutral-950);
    --ds-surface: var(--ramp-neutral-900);
    --ds-raised: var(--ramp-neutral-880);
    --ds-fg: var(--ramp-neutral-50);
    --ds-fg-muted: var(--ramp-neutral-350);
    --ds-edge: var(--ramp-neutral-850);
    --ds-primary: var(--ramp-neutral-50);
    --ds-primary-hover: var(--ramp-neutral-200);
    --ds-primary-fg: var(--ramp-neutral-950);
    --ds-primary-muted: var(--ramp-neutral-600);
    --ds-link: var(--ramp-neutral-50);
    --ds-ring: var(--ramp-neutral-50);

    --ds-shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.5);
    --ds-shadow-lift: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 18px 36px -14px rgb(0 0 0 / 0.8);
    --ds-shadow-hero: 0 18px 40px -18px rgb(212 66 26 / 0.45);
    --ds-shadow-pill: inset 0 1px 0 rgb(255 255 255 / 0.04);
  }
}

/* ── 2 · Theme-independent: geometry, type, motion (MASTER §§ 6, 7, 10) ────────────────────── */
:root {
  --radius-pill: 9999px;
  --radius-tile: 1rem;
  --radius-panel: 1.5rem;
  --radius-shell: 2rem;
  --target: 2.75rem;
  --container-shell: 84rem;

  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, monospace;

  --text-sm: 0.875rem;
  --text-sm-lh: 1.25rem;
  --text-base: 1rem;
  --text-base-lh: 1.5rem;
  --text-lg: 1.125rem;
  --text-lg-lh: 1.625rem;
  --text-2xl: 1.5rem;
  --text-2xl-lh: 1.875rem;
  --text-3xl: 2rem;
  --text-3xl-lh: 2.375rem;
  --text-4xl: 2.5rem;
  --text-4xl-lh: 2.875rem;
  --text-5xl: 3.5rem;
  --text-5xl-lh: 3.5rem;

  --duration-fast: 120ms;
  --duration-slow: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

html {
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--ds-canvas);
  color: var(--ds-fg);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

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

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

/* MASTER § 5, verbatim: one ring for everything focusable. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-ring);
  outline-offset: 2px;
}

/* Links are underlined, always: the line is the non-colour cue (globals.css --ds-link). */
a {
  color: var(--ds-link);
  text-underline-offset: 0.2em;
}

svg {
  display: block;
  flex-shrink: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The skip link: off screen until focused, then a primary pill over the top-left corner. */
.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* ── The floating container (V14: canvas, then the 32px shell) ─────────────────────────────── */
.frame {
  max-width: var(--container-shell);
  margin: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--ds-shell);
  border-radius: var(--radius-shell);
}

@media (min-width: 40rem) {
  .frame {
    padding: 1rem;
    gap: 1.25rem;
  }
}

@media (min-width: 85rem) {
  .frame {
    margin-inline: auto;
  }
}

/* ── Pills (button.tsx: primary black, white in dark; surface is the white pill on grey) ───── */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target);
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-pill);
  transition: background-color var(--duration-fast) var(--ease);
}

.pill-primary {
  background-color: var(--ds-primary);
  color: var(--ds-primary-fg);
}

.pill-primary:hover {
  background-color: var(--ds-primary-hover);
}

.pill-surface {
  background-color: var(--ds-surface);
  color: var(--ds-fg);
}

.pill-surface:hover {
  background-color: var(--ds-raised);
}

.pill-lg {
  padding: 0 1.5rem;
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
}

/* ── Header ───────────────────────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--target);
  border-radius: var(--radius-pill);
  color: var(--ds-fg);
  font-size: var(--text-base);
  line-height: var(--text-base-lh);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-decoration: none;
}

/* Wordmark.tsx's BrandMark: the orange disc, 36px, the three-node glyph at 20px in white. */
.mark {
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--ds-accent);
  color: var(--ds-hero-fg);
}

.mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Below sm the hero's own buttons sit right under the bar; the header keeps only «Acceder». */
.top-demo {
  display: none;
}

@media (min-width: 40rem) {
  .top-demo {
    display: inline-flex;
  }
}

/* ── Main ─────────────────────────────────────────────────────────────────────────────────── */
main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 40rem) {
  main {
    gap: 1.25rem;
  }
}

.card {
  min-width: 0;
  padding: 1.5rem;
  background-color: var(--ds-surface);
  border-radius: var(--radius-panel);
  box-shadow: var(--ds-shadow-card);
}

@media (min-width: 64rem) {
  .card-roomy {
    padding: 2rem;
  }
}

.section-title {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh);
  font-weight: 600;
  letter-spacing: -0.025em;
}

@media (min-width: 48rem) {
  .section-title {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl-lh);
  }
}

.muted {
  color: var(--ds-fg-muted);
}

/* ── Hero: the one orange thing on the page (MASTER § 4, rules 3 and 4) ───────────────────── */
.hero {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: var(--ds-hero);
  color: var(--ds-hero-fg);
  border-radius: var(--radius-panel);
  box-shadow: var(--ds-shadow-hero);
}

@media (min-width: 40rem) {
  .hero {
    padding: 2rem;
  }
}

.hero h1 {
  max-width: 20ch;
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: 600;
  letter-spacing: -0.025em;
}

@media (min-width: 40rem) {
  .hero h1 {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl-lh);
  }
}

@media (min-width: 64rem) {
  .hero h1 {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl-lh);
  }
}

.hero-text {
  max-width: 65ch;
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── «Qué hace»: three cards ──────────────────────────────────────────────────────────────── */
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-head {
  padding: 1rem 0.25rem 0;
}

.grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* icon-disc.tsx `md`: 40px, raised grey on a white card, the glyph on the 16-unit grid. */
.disc {
  display: flex;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background-color: var(--ds-raised);
  color: var(--ds-fg);
}

.disc svg {
  width: 1.25rem;
  height: 1.25rem;
}

.disc-sm {
  width: 2rem;
  height: 2rem;
}

.disc-sm svg {
  width: 1rem;
  height: 1rem;
}

.feature h3,
.step h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
  font-weight: 600;
}

.feature .lead {
  font-weight: 500;
}

/* ── «Pensado para despachos»: a list in one card ─────────────────────────────────────────── */
.checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 48rem) {
  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
  }
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ── «Cómo empezamos»: three numbered tiles ───────────────────────────────────────────────── */
.step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-number {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

/* ── The closing call: V15's one dark card (primary, which inverts in dark) ───────────────── */
.cta {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--ds-primary);
  color: var(--ds-primary-fg);
  border-radius: var(--radius-panel);
  /* The ring must read on this card: the page ring is the card's own colour. */
  --ds-ring: var(--ds-primary-fg);
}

@media (min-width: 40rem) {
  .cta {
    padding: 2rem;
  }
}

@media (min-width: 64rem) {
  .cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cta-copy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cta p {
  color: var(--ds-primary-muted);
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
}

/* ── Legal pages: one readable column ─────────────────────────────────────────────────────── */
.prose {
  max-width: 65ch;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prose h1 {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh);
  font-weight: 600;
  letter-spacing: -0.025em;
}

@media (min-width: 40rem) {
  .prose h1 {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl-lh);
  }
}

.prose h2 {
  margin-top: 1rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh);
  font-weight: 600;
}

.prose ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
}

/* fact.tsx: each term-and-value pair a grey tile; one column on a phone, two from sm. */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
}

.facts div {
  min-width: 0;
  padding: 0.75rem 1rem;
  background-color: var(--ds-raised);
  border-radius: var(--radius-tile);
}

.facts dt {
  color: var(--ds-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  font-weight: 500;
}

.facts dd {
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts .wide {
    grid-column: span 2;
  }
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* A mailto or an inline link inside prose: a 44px target would break the line, so the target is
   the line's own 24px height, which clears axe's 24px (MASTER § 6: the gate's floor). */
.prose a {
  overflow-wrap: anywhere;
}

.updated {
  margin-top: 1rem;
  color: var(--ds-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

/* ── Footer ───────────────────────────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem 0.25rem;
  color: var(--ds-fg-muted);
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
}

@media (min-width: 64rem) {
  .foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 0.5rem;
  border-radius: var(--radius-pill);
  color: var(--ds-fg);
}

.foot li:first-child a {
  padding-left: 0;
}

/* ── Motion: hover answers only (§ 10). Nothing here moves on its own. ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}