/* AI Lucas — public site design system.
 *
 * This file is the whole design system: three hand-written pages share it and there is no build
 * step, no preprocessor and no framework. Every colour and every spacing value is a token declared
 * once in the :root block below; nothing under that block may use a raw hex colour or a raw pixel
 * margin or padding. The deployed CSP is `style-src 'self'`, so this is also the only place any CSS
 * may live — an inline <style> block or a style attribute would be blocked at runtime.
 */

:root {
  color-scheme: light;

  /* Color — D-12 warm consumer, light. One warm accent. */
  --surface:      #FFFCF8;
  --sand:         #F6EFE7;
  --card:         #FFFFFF;
  --accent:       #B23A16;
  --accent-tint:  #FBEDE7;
  --ink:          #1F1B16;
  --ink-muted:    #5C5348;
  --border:       #E4DACD;

  /* Type */
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --text-display: 1.875rem;  /* 30px; 40px at >=640px */
  --text-heading: 1.375rem;  /* 22px; 26px at >=640px */
  --text-body:    1.0625rem; /* 17px */
  --text-small:   0.875rem;  /* 14px */
  --lh-display:   1.15;
  --lh-heading:   1.25;
  --lh-body:      1.6;
  --lh-small:     1.5;
  --w-regular:    400;
  --w-semibold:   600;

  /* Spacing — 8-point, multiples of 4 only */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  /* Measure */
  --w-text: 680px;
  --w-wide: 880px;

  /* Shape */
  --radius-sm: 4px;    /* chip, focus-ring rounding */
  --radius-md: 12px;   /* bubbles, cards, provider cells */
  --shadow-card: 0 1px 2px rgba(31, 27, 22, 0.05);  /* answer bubble ONLY */
}

@media (min-width: 40rem) {
  :root {
    --text-display: 2.5rem;    /* 40px */
    --text-heading: 1.625rem;  /* 26px */
  }
}

/* --- 1. Reset ------------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

/* --- 2. Containers -------------------------------------------------------------------------- */
/* Two measures only: the prose column everything defaults to, and the wide column used by the
 * example exchange and the provider grid. Both are centred and carry the side padding, so a
 * full-bleed band is just a background on the section around them. */

.wrap {
  max-inline-size: var(--w-text);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.wrap-wide {
  max-inline-size: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* --- 3. Section rhythm ---------------------------------------------------------------------- */
/* Every section shares one vertical rhythm; no section defines its own. */

section {
  padding-block: var(--space-6);
}

/* --- 4. Typography -------------------------------------------------------------------------- */
/* Four size tokens, two weights, upright only — no slanted face anywhere on the site. */

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--w-semibold);
}

h1 {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h3 {
  font-size: var(--text-body);
  line-height: 1.35;
  margin-block-start: var(--space-4);
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p {
  margin-block-start: var(--space-3);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li + li {
  margin-block-start: var(--space-3);
}

strong {
  font-weight: var(--w-semibold);
}

/* --- 5. Bands and raised surfaces ------------------------------------------------------------ */
/* The sand bands are full-bleed; the pure-white surfaces sit on top of them, which is what makes
 * them read as raised. */

.demo,
.site-footer {
  background: var(--sand);
}

/* --- 6. Kicker ------------------------------------------------------------------------------- */
/* A short accent bar above each landing-page h2. Decorative only, and absent from the legal pages
 * where the accent stays on links. */

.kicker {
  display: block;
  inline-size: 32px;
  block-size: 3px;
  background: var(--accent);
  margin-block-end: var(--space-3);
}

/* --- 7. Header ------------------------------------------------------------------------------- */

.site-header {
  padding-block: var(--space-4);
}

.site-header .wordmark {
  font-size: var(--text-body);
  font-weight: var(--w-semibold);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- 8. Hero --------------------------------------------------------------------------------- */

.hero .subtitle {
  margin-block-start: var(--space-4);
}

.hero .beta {
  margin-block-start: var(--space-4);
}

.hero .channel,
.hero .price {
  margin-block-start: var(--space-2);
}

/* The one accent-filled element on the page, and the one most at risk of reading as a button:
 * a plain span with no interactive affordance of any kind. */
.chip {
  display: inline-block;
  background: var(--accent);
  color: var(--card);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  cursor: default;
  margin-block-end: var(--space-2);
}

/* --- 9. Section bodies ------------------------------------------------------------------------ */

.does ul,
.doesnt ul,
.examples ul {
  margin-block-start: var(--space-5);
}

.providers ul {
  margin-block-start: var(--space-4);
}

.bubble-a ul {
  margin-block-start: var(--space-3);
}

.does li,
.doesnt li,
.examples li,
.bubble-a li {
  padding-inline-start: var(--space-4);
  position: relative;
}

.does li::before,
.doesnt li::before,
.examples li::before,
.bubble-a li::before {
  content: "—";
  color: var(--ink-muted);
  position: absolute;
  inset-inline-start: 0;
}

/* The honesty line stays at body size: it is the credibility line, not fine print. */
.does .honesty {
  margin-block-start: var(--space-5);
}

.doesnt .closing,
.providers .nominative {
  margin-block-start: var(--space-5);
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--lh-small);
}

.providers .lead,
.does h2 + *,
.doesnt h2 + *,
.providers h2 + * {
  margin-block-start: var(--space-5);
}

/* --- 10. The example exchange ----------------------------------------------------------------- */

.demo-label {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-block-end: var(--space-3);
}

.bubble-q {
  background: var(--accent-tint);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-md);
  margin-block-end: var(--space-3);
}

.bubble-a {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

/* The citation is the product's differentiator: upright, never monospace, never truncated.
 * It wraps rather than shrinking, at any viewport. */
.cite {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-muted);
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--space-2);
  margin-block-start: var(--space-3);
  overflow-wrap: anywhere;
}

.disclaimer {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-muted);
  margin-block-start: var(--space-3);
}

.examples {
  margin-block-start: var(--space-6);
}

/* --- 11. Providers ----------------------------------------------------------------------------- */
/* Plain-text cells: no logo, no mark, no brand colour, no link. */

.providers ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.providers li {
  margin-block-start: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: var(--w-semibold);
  text-align: start;
}

/* --- 12. Footer --------------------------------------------------------------------------------- */

.site-footer {
  border-block-start: 1px solid var(--border);
  padding-block: var(--space-7) var(--space-6);
}

.site-footer .name {
  font-weight: var(--w-semibold);
  color: var(--ink);
}

.site-footer .identity,
.site-footer .contact,
.site-footer .links {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-muted);
  margin-block-start: var(--space-2);
}

.site-footer .links {
  margin-block-start: var(--space-3);
}

/* --- 13. Legal pages ------------------------------------------------------------------------------ */
/* /privacidad and /terminos share this stylesheet. No kicker rule here: on the legal pages the
 * accent stays on links only. */

.vigencia {
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-muted);
  margin-block-start: var(--space-2);
}

.summary {
  background: var(--sand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block-start: var(--space-5);
}

.prose h2 {
  margin-block-start: var(--space-6);
}

.prose h2 + p,
.prose h3 + p {
  margin-block-start: var(--space-3);
}

.prose ul {
  margin-block-start: var(--space-3);
}

.prose li {
  padding-inline-start: var(--space-4);
  position: relative;
}

.prose li::before {
  content: "—";
  color: var(--ink-muted);
  position: absolute;
  inset-inline-start: 0;
}

/* --- 14. Links and focus -------------------------------------------------------------------------- */
/* Underlined at rest: colour is never the sole affordance. Footer links are the same accent as prose
 * links, not muted — a muted footer link is how a legal link becomes unfindable. */

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Duplicated under :focus for engines without :focus-visible; the :focus-visible rule wins where
 * it is supported. The ring is never suppressed anywhere in this file. */
a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- 15. Motion ------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-thickness 120ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- 16. Breakpoint --------------------------------------------------------------------------------- */
/* One general breakpoint for the whole site. */

@media (min-width: 40rem) {
  .wrap,
  .wrap-wide {
    padding-inline: var(--space-5);
  }

  section {
    padding-block: var(--space-7);
  }

  .hero {
    padding-block-start: var(--space-8);
  }

  .bubble-q {
    max-inline-size: 88%;
    margin-inline-start: auto;
  }

  .bubble-a {
    max-inline-size: 88%;
    margin-inline-end: auto;
    padding: var(--space-4) var(--space-5);
  }

  .providers ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* The single permitted exception: the provider grid's 2 to 3 column step. */
@media (min-width: 56.25rem) {
  .providers ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}