/* Tellus Cooperative — design tokens (Figma XRqSz2oG6K622fa44wG8Gl · spec §2)
   Shared by every static page. Load order: tokens.css → site.css → page css.

   Fonts: only Fraunces (400 + 400 italic) and Inter (400/500/600). Load them with
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400,0,1;1,9..144,400,0,1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

   Section themes: put data-section-theme="claro|teal|naranjo|cielo|verde" on any
   section (default = claro). It is deliberately NOT `data-theme`: that attribute is
   already used on <html> by the legacy dark-mode switch (theme.js/theme.css) that the
   unmigrated pages still load. The two never collide. */

:root {
  /* — Primitives — */
  --sand-50: #FBF7F0; --sand-100: #F3EADB; --sand-200: #ECE0CC; --sand-300: #D9CCB6;
  --teal-300: #3F8487; --teal-600: #2A5A5C; --teal-700: #4F6566; --teal-800: #3D5556;
  --teal-850: #2D4849; --teal-900: #1F3536;
  --clay-200: #EBA57C; --clay-400: #C75A2A; --clay-500: #9E441F; --clay-700: #86391A;
  --sky-200: #9DD3EF; --sky-400: #5BB8E6; --green-100: #C9F0D8; --green-300: #7ED9A4;
  --white: #FFFFFF; --qr-tinta: #173F42;
  /* Logo-only colours: use inside the official SVGs, never in UI. */
  --marca-medialuna: #B65A30; --marca-t: #407E7D; --marca-t-trazo: #42807F;

  /* — Spacing (8 pt) and radii — */
  --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px;
  --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px;
  --space-128: 128px;
  --radius-8: 8px; --radius-16: 16px; --radius-24: 24px; --radius-999: 999px;

  /* — Grid — desktop 12 col / gutter 24 / margin 80 · mobile 4 col / gutter 16 / margin 24 — */
  --gutter: 24px;
  --margin: clamp(24px, 5.5vw, 80px);   /* 24 mobile → 40 tablet → 80 desktop */
  --max: 1280px;                         /* content max-width ≥ 1440 */

  /* — Type families — */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-modal: 0 24px 64px rgba(31, 51, 54, 0.18);
  --shadow-panel: 0 24px 32px rgba(31, 51, 54, 0.18);
}

/* ── Semantic tokens · 5 themes (default Claro) ───────────────────────────── */
:root,
[data-section-theme="claro"] {
  --bg-page: var(--sand-100);   --bg-surface: var(--sand-50);  --bg-sunken: var(--sand-200);
  --bg-inverse: var(--teal-900); --bg-brand: var(--teal-600);
  --text-primary: var(--teal-900); --text-secondary: var(--teal-800); --text-muted: var(--teal-700);
  --text-brand: var(--teal-600);  --text-inverse: var(--sand-100);   --text-inverse-muted: var(--sand-300);
  --accent: var(--clay-500); --accent-hover: var(--clay-700); --accent-on-dark: var(--clay-200);
  --accent-on-accent: var(--sand-50);
  --border: var(--sand-300); --border-strong: var(--teal-600);
  --border-inverse: var(--teal-800); --border-inverse-strong: var(--sand-300);
  --illustration-teal: var(--teal-300);
}
[data-section-theme="teal"] {
  --bg-page: var(--teal-900);   --bg-surface: var(--teal-850); --bg-sunken: var(--teal-850);
  --bg-inverse: var(--sand-100); --bg-brand: var(--clay-500);
  --text-primary: var(--sand-50); --text-secondary: var(--sand-200); --text-muted: var(--sand-300);
  --text-brand: var(--clay-200);  --text-inverse: var(--teal-900);   --text-inverse-muted: var(--teal-800);
  --accent: var(--clay-200); --accent-hover: var(--sand-100); --accent-on-dark: var(--clay-500);
  --accent-on-accent: var(--teal-900);
  --border: var(--teal-600); --border-strong: var(--sand-300);
  --border-inverse: var(--teal-600); --border-inverse-strong: var(--teal-800);
  --illustration-teal: var(--clay-200);
}
[data-section-theme="naranjo"] {
  --bg-page: var(--clay-500);   --bg-surface: var(--clay-700); --bg-sunken: var(--clay-700);
  --bg-inverse: var(--teal-900); --bg-brand: var(--teal-900);
  --text-primary: var(--sand-50); --text-secondary: var(--sand-100); --text-muted: var(--sand-100);
  --text-brand: var(--sand-50);   --text-inverse: var(--sand-50);    --text-inverse-muted: var(--sand-200);
  --accent: var(--sand-50); --accent-hover: var(--sand-100); --accent-on-dark: var(--clay-200);
  --accent-on-accent: var(--teal-900);
  --border: var(--clay-700); --border-strong: var(--sand-100);
  --border-inverse: var(--clay-700); --border-inverse-strong: var(--sand-200);
  --illustration-teal: var(--sand-100);
}
[data-section-theme="cielo"] {
  --bg-page: var(--sky-400);    --bg-surface: var(--sky-200);  --bg-sunken: var(--sky-200);
  --bg-inverse: var(--teal-900); --bg-brand: var(--teal-900);
  --text-primary: var(--teal-900); --text-secondary: var(--teal-900); --text-muted: var(--teal-900);
  --text-brand: var(--teal-900);  --text-inverse: var(--sand-50);    --text-inverse-muted: var(--sand-200);
  --accent: var(--teal-900); --accent-hover: var(--teal-800); --accent-on-dark: var(--clay-200);
  --accent-on-accent: var(--sand-50);
  --border: var(--teal-600); --border-strong: var(--teal-900);
  --border-inverse: var(--teal-800); --border-inverse-strong: var(--sand-300);
  --illustration-teal: var(--teal-900);
}
[data-section-theme="verde"] {
  --bg-page: var(--green-300);  --bg-surface: var(--green-100); --bg-sunken: var(--green-100);
  --bg-inverse: var(--teal-900); --bg-brand: var(--teal-900);
  --text-primary: var(--teal-900); --text-secondary: var(--teal-900); --text-muted: var(--teal-900);
  --text-brand: var(--teal-900);  --text-inverse: var(--sand-50);    --text-inverse-muted: var(--sand-200);
  --accent: var(--teal-900); --accent-hover: var(--teal-800); --accent-on-dark: var(--clay-200);
  --accent-on-accent: var(--sand-50);
  --border: var(--teal-600); --border-strong: var(--teal-900);
  --border-inverse: var(--teal-800); --border-inverse-strong: var(--sand-300);
  --illustration-teal: var(--teal-900);
}

/* A themed section paints its own page background and text colour. */
[data-section-theme] { background: var(--bg-page); color: var(--text-primary); }

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--sand-100); color: var(--teal-900);
  font-family: var(--sans); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ── Text styles (Fraunces + Inter only; nothing below 14 px) ─────────────── */
.t-display, .t-h1 { font: 400 clamp(48px, 7vw, 88px)/1.045 var(--serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-display-it, .t-display em { font-style: italic; }
.t-stat   { font: 400 clamp(40px, 4.2vw, 56px)/1.07 var(--serif); letter-spacing: -0.02em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-h2     { font: 400 clamp(36px, 4vw, 52px)/1.115 var(--serif); letter-spacing: -0.015em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-lead   { font: 400 clamp(26px, 3vw, 36px)/1.28 var(--serif); letter-spacing: -0.01em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-h3     { font: 400 clamp(24px, 2.2vw, 28px)/1.21 var(--serif); letter-spacing: -0.01em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-h4     { font: 400 22px/28px var(--serif); letter-spacing: -0.005em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-cinta  { font: italic 400 22px/1.3 var(--serif); letter-spacing: -0.01em; font-variation-settings: "SOFT" 0, "WONK" 1; }
.t-body-l { font: 400 18px/28px var(--sans); }
.t-body-m { font: 400 16px/24px var(--sans); }
.t-body-s { font: 400 14px/20px var(--sans); }
.t-eyebrow { font: 600 14px/20px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.t-meta   { font: 500 14px/20px var(--sans); }
.t-button { font: 600 16px/24px var(--sans); }
.t-link   { font: 500 16px/24px var(--sans); }
.t-nav    { font: 500 15px/24px var(--sans); }
@media (max-width: 767px) { .t-cinta { font-size: 18px; } }

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