/* Orbio theme stylesheet. Ported from the static build (styles.css + pages.css); the conventions in its README apply. */

/* Orbio static build. Design tokens come from the Figma "Style Guide" page
   (variables read with get_variable_defs on node 2513:34). */

/* Fonts: declared by the theme settings (inc/settings.php), self-hosted in assets/fonts. */

:root {
  /* Saturno */
  --color-saturno-50: #fffefd;
  --color-saturno-100: #fefdfa;
  --color-saturno-200: #fdfbf3;
  --color-saturno-300: #fbf9ed;
  --color-saturno-400: #faf7e7;
  --color-saturno-500: #f9f5e1;
  --color-saturno-600: #c7c4b4;
  --color-saturno-700: #959387;
  --color-saturno-800: #64625a;
  --color-saturno-900: #32312d;
  /* Sol */
  --color-sol-50: #fffcf3;
  --color-sol-100: #fff9e3;
  --color-sol-200: #fff1c3;
  --color-sol-300: #ffeaa3;
  --color-sol-400: #ffe384;
  --color-sol-500: #ffdc64;
  --color-sol-600: #ccb050;
  --color-sol-700: #99843c;
  --color-sol-800: #665828;
  --color-sol-900: #332c14;
  /* Jupiter */
  --color-jupiter-50: #fef8ed;
  --color-jupiter-100: #fcefd5;
  --color-jupiter-200: #fadea6;
  --color-jupiter-300: #f7cc77;
  --color-jupiter-400: #f4bb48;
  --color-jupiter-500: #f1a919;
  --color-jupiter-600: #c18714;
  --color-jupiter-700: #91650f;
  --color-jupiter-800: #60440a;
  --color-jupiter-900: #302205;
  /* Marte */
  --color-marte-50: #eeebeb;
  --color-marte-100: #d9d3d1;
  --color-marte-200: #aea19e;
  --color-marte-300: #836f6b;
  --color-marte-400: #583d38;
  --color-marte-500: #2d0b05;
  --color-marte-600: #240904;
  --color-marte-700: #1b0703;
  --color-marte-800: #120402;
  --color-marte-900: #090201;
  /* Mercurio */
  --color-mercurio-50: #fbfdf1;
  --color-mercurio-100: #f5fae0;
  --color-mercurio-200: #e9f4be;
  --color-mercurio-300: #deee9b;
  --color-mercurio-400: #d2e879;
  --color-mercurio-500: #c7e256;
  --color-mercurio-600: #9fb545;
  --color-mercurio-700: #778834;
  --color-mercurio-800: #505a22;
  --color-mercurio-900: #282d11;
  /* Urano */
  --color-urano-50: #ecedec;
  --color-urano-100: #d3d6d3;
  --color-urano-200: #a3a7a1;
  --color-urano-300: #72796f;
  --color-urano-400: #363d33;
  --color-urano-500: #101c0c;
  --color-urano-600: #0d160a;
  --color-urano-700: #0a1107;
  --color-urano-800: #060b05;
  --color-urano-900: #030602;
  /* Neutral (UI) */
  --color-neutral-50: #f9f5e1;
  --color-neutral-100: #f0e8d5;
  --color-neutral-200: #e0d4c2;
  --color-neutral-300: #b5a798;
  --color-neutral-400: #9e8d7f;
  --color-neutral-500: #887367;
  --color-neutral-600: #71594e;
  --color-neutral-700: #5a3f36;
  --color-neutral-800: #44251d;
  --color-neutral-900: #2d0b05;

  --font: "Kumbh Sans", system-ui, sans-serif;

  /* Type scale, desktop (Orbio/H1 ... Orbio/TAG). Single weight: Medium 500. */
  --h1-size: 6rem;        --h1-lh: 1.1;      --h1-ls: -0.02em; /* 96, -2% */
  --h2-size: 4.5rem;      --h2-lh: 1.1;      --h2-ls: -0.01em; /* 72, -1% */
  --h3-size: 3.5rem;      --h3-lh: 1;     /* 56 */
  --h4-size: 3rem;        --h4-lh: 1.16;     /* 48 */
  --h5-size: 2rem;        --h5-lh: 1.1;     /* 32 */
  --h6-size: 1.5rem;      --h6-lh: 2rem;     /* 24/32 */
  --body-size: 1.25rem;   --body-lh: 1.75rem;                /* 20/28 */
  --caption-size: 1rem;   --caption-lh: 1.5;                 /* 16 */
  --tag-size: 0.875rem;   --tag-lh: 1.375rem;                /* 14/22 */
}

/* Type scale, mobile (Orbio/Mobile/H1 ... Orbio/Mobile/TAG). */
@media (max-width: 1023px) {
  :root {
    --h1-size: 2.75rem;     --h1-lh: 1.1;      --h1-ls: -0.02em; /* 44 */
    --h2-size: 2.25rem;     --h2-lh: 1.1;      --h2-ls: -0.01em; /* 36 */
    --h3-size: 1.875rem;    --h3-lh: 1.1;                      /* 30 */
    --h4-size: 1.625rem;    --h4-lh: 1.2;                      /* 26 */
    --h5-size: 1.375rem;    --h5-lh: 1.2;                      /* 22 */
    --h6-size: 1.25rem;     --h6-lh: 1.75rem;                  /* 20/28 */
    --body-size: 1rem;      --body-lh: 1.5rem;                 /* 16/24 */
    --caption-size: 0.875rem; --caption-lh: 1.5;               /* 14 */
    --tag-size: 0.75rem;    --tag-lh: 1.125rem;                /* 12/18 */
  }
}

:root {
  --ease-color: 0.4s ease;
  /* Framer spring (stiffness 200, damping 40, mass 0.1) sampled over 1.2s. */
  --spring: linear(0, 0.2141, 0.3904, 0.5273, 0.6336, 0.7161, 0.7801, 0.8298, 0.8684, 0.8984, 0.9216, 0.9397, 0.9537, 0.9646, 0.973, 0.9796, 0.9847, 0.9886, 0.9917, 0.9941, 0.9959, 0.9973, 0.9985, 0.9993, 1);
  --spring-time: 1.2s;
  /* Fades: the spec spring is overdamped (it starts at full speed, which pops); opacity uses a
     soft-start curve instead, the spring stays on the movement. */
  --fade: 1.4s cubic-bezier(0.45, 0, 0.15, 1);
  --stagger: 0.12s;

  /* Shared radial "orbit" backgrounds (menu panels, dark sections). */
  --orbit-green: radial-gradient(ellipse 173.5% 151.8% at 50% 18.65%, #101c0c 40%, #2a3716 50%, #445220 60%, #5d6d2a 70%, #778834 80%, #5d6d2a 85%, #445220 90%, #2a3716 95%, #101c0c 100%);
  --orbit-yellow: radial-gradient(ellipse 173.5% 151.8% at 50% 18.65%, #ffdc64 40%, #ffe384 50%, #ffeba4 60%, #fff9e3 80%, #ffeba4 90%, #ffe384 95%, #ffdc64 100%);
  --photo-tint: linear-gradient(to bottom, rgba(48, 34, 5, 0) 33.529%, rgba(48, 34, 5, 0.64)); /* jupiter-900 at 0 to 64% */

}

/* =====================================================================
   Palette utilities (generated from the color tokens above)
   .bg-{family}-{step} paints any block and sets readable default text colors
   (--surface-ink for titles, --surface-ink-soft for supporting text).
   .text-{family}-{step} overrides the text color.
   ===================================================================== */
.bg-saturno-50 { background: var(--color-saturno-50); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-100 { background: var(--color-saturno-100); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-200 { background: var(--color-saturno-200); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-300 { background: var(--color-saturno-300); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-400 { background: var(--color-saturno-400); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-500 { background: var(--color-saturno-500); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-600 { background: var(--color-saturno-600); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-saturno-700 { background: var(--color-saturno-700); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-saturno-800 { background: var(--color-saturno-800); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-saturno-900 { background: var(--color-saturno-900); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-sol-50 { background: var(--color-sol-50); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-100 { background: var(--color-sol-100); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-200 { background: var(--color-sol-200); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-300 { background: var(--color-sol-300); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-400 { background: var(--color-sol-400); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-500 { background: var(--color-sol-500); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-600 { background: var(--color-sol-600); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-sol-700 { background: var(--color-sol-700); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-sol-800 { background: var(--color-sol-800); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-sol-900 { background: var(--color-sol-900); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-jupiter-50 { background: var(--color-jupiter-50); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-100 { background: var(--color-jupiter-100); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-200 { background: var(--color-jupiter-200); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-300 { background: var(--color-jupiter-300); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-400 { background: var(--color-jupiter-400); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-500 { background: var(--color-jupiter-500); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-jupiter-600 { background: var(--color-jupiter-600); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-jupiter-700 { background: var(--color-jupiter-700); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-jupiter-800 { background: var(--color-jupiter-800); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-jupiter-900 { background: var(--color-jupiter-900); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-50 { background: var(--color-marte-50); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-marte-100 { background: var(--color-marte-100); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-marte-200 { background: var(--color-marte-200); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-marte-300 { background: var(--color-marte-300); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-400 { background: var(--color-marte-400); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-500 { background: var(--color-marte-500); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-600 { background: var(--color-marte-600); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-700 { background: var(--color-marte-700); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-800 { background: var(--color-marte-800); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-marte-900 { background: var(--color-marte-900); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-mercurio-50 { background: var(--color-mercurio-50); --surface-ink: var(--color-urano-500); --surface-ink-soft: var(--color-urano-500); --surface-ink-strong: var(--color-urano-900); }
.bg-mercurio-100 { background: var(--color-mercurio-100); --surface-ink: var(--color-urano-500); --surface-ink-soft: var(--color-urano-500); --surface-ink-strong: var(--color-urano-900); }
.bg-mercurio-200 { background: var(--color-mercurio-200); --surface-ink: var(--color-urano-500); --surface-ink-soft: var(--color-urano-500); --surface-ink-strong: var(--color-urano-900); }
.bg-mercurio-300 { background: var(--color-mercurio-300); --surface-ink: var(--color-urano-500); --surface-ink-soft: var(--color-urano-500); --surface-ink-strong: var(--color-urano-900); }
.bg-mercurio-400 { background: var(--color-mercurio-400); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-mercurio-800); }
.bg-mercurio-500 { background: var(--color-mercurio-500); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-mercurio-800); }
.bg-mercurio-600 { background: var(--color-mercurio-600); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-mercurio-800); }
.bg-mercurio-700 { background: var(--color-mercurio-700); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-mercurio-800 { background: var(--color-mercurio-800); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-mercurio-900 { background: var(--color-mercurio-900); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-50 { background: var(--color-urano-50); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.bg-urano-100 { background: var(--color-urano-100); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.bg-urano-200 { background: var(--color-urano-200); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.bg-urano-300 { background: var(--color-urano-300); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-400 { background: var(--color-urano-400); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-500 { background: var(--color-urano-500); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-600 { background: var(--color-urano-600); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-700 { background: var(--color-urano-700); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-800 { background: var(--color-urano-800); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-urano-900 { background: var(--color-urano-900); --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200); }
.bg-neutral-50 { background: var(--color-neutral-50); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-neutral-100 { background: var(--color-neutral-100); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-neutral-200 { background: var(--color-neutral-200); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-neutral-300 { background: var(--color-neutral-300); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-neutral-400 { background: var(--color-neutral-400); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-neutral-500 { background: var(--color-neutral-500); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-neutral-600 { background: var(--color-neutral-600); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-neutral-700 { background: var(--color-neutral-700); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-neutral-800 { background: var(--color-neutral-800); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }
.bg-neutral-900 { background: var(--color-neutral-900); --surface-ink: var(--color-sol-50); --surface-ink-soft: var(--color-neutral-300); }

.text-saturno-50 { color: var(--color-saturno-50); --surface-ink: var(--color-saturno-50); }
.text-saturno-100 { color: var(--color-saturno-100); --surface-ink: var(--color-saturno-100); }
.text-saturno-200 { color: var(--color-saturno-200); --surface-ink: var(--color-saturno-200); }
.text-saturno-300 { color: var(--color-saturno-300); --surface-ink: var(--color-saturno-300); }
.text-saturno-400 { color: var(--color-saturno-400); --surface-ink: var(--color-saturno-400); }
.text-saturno-500 { color: var(--color-saturno-500); --surface-ink: var(--color-saturno-500); }
.text-saturno-600 { color: var(--color-saturno-600); --surface-ink: var(--color-saturno-600); }
.text-saturno-700 { color: var(--color-saturno-700); --surface-ink: var(--color-saturno-700); }
.text-saturno-800 { color: var(--color-saturno-800); --surface-ink: var(--color-saturno-800); }
.text-saturno-900 { color: var(--color-saturno-900); --surface-ink: var(--color-saturno-900); }
.text-sol-50 { color: var(--color-sol-50); --surface-ink: var(--color-sol-50); }
.text-sol-100 { color: var(--color-sol-100); --surface-ink: var(--color-sol-100); }
.text-sol-200 { color: var(--color-sol-200); --surface-ink: var(--color-sol-200); }
.text-sol-300 { color: var(--color-sol-300); --surface-ink: var(--color-sol-300); }
.text-sol-400 { color: var(--color-sol-400); --surface-ink: var(--color-sol-400); }
.text-sol-500 { color: var(--color-sol-500); --surface-ink: var(--color-sol-500); }
.text-sol-600 { color: var(--color-sol-600); --surface-ink: var(--color-sol-600); }
.text-sol-700 { color: var(--color-sol-700); --surface-ink: var(--color-sol-700); }
.text-sol-800 { color: var(--color-sol-800); --surface-ink: var(--color-sol-800); }
.text-sol-900 { color: var(--color-sol-900); --surface-ink: var(--color-sol-900); }
.text-jupiter-50 { color: var(--color-jupiter-50); --surface-ink: var(--color-jupiter-50); }
.text-jupiter-100 { color: var(--color-jupiter-100); --surface-ink: var(--color-jupiter-100); }
.text-jupiter-200 { color: var(--color-jupiter-200); --surface-ink: var(--color-jupiter-200); }
.text-jupiter-300 { color: var(--color-jupiter-300); --surface-ink: var(--color-jupiter-300); }
.text-jupiter-400 { color: var(--color-jupiter-400); --surface-ink: var(--color-jupiter-400); }
.text-jupiter-500 { color: var(--color-jupiter-500); --surface-ink: var(--color-jupiter-500); }
.text-jupiter-600 { color: var(--color-jupiter-600); --surface-ink: var(--color-jupiter-600); }
.text-jupiter-700 { color: var(--color-jupiter-700); --surface-ink: var(--color-jupiter-700); }
.text-jupiter-800 { color: var(--color-jupiter-800); --surface-ink: var(--color-jupiter-800); }
.text-jupiter-900 { color: var(--color-jupiter-900); --surface-ink: var(--color-jupiter-900); }
.text-marte-50 { color: var(--color-marte-50); --surface-ink: var(--color-marte-50); }
.text-marte-100 { color: var(--color-marte-100); --surface-ink: var(--color-marte-100); }
.text-marte-200 { color: var(--color-marte-200); --surface-ink: var(--color-marte-200); }
.text-marte-300 { color: var(--color-marte-300); --surface-ink: var(--color-marte-300); }
.text-marte-400 { color: var(--color-marte-400); --surface-ink: var(--color-marte-400); }
.text-marte-500 { color: var(--color-marte-500); --surface-ink: var(--color-marte-500); }
.text-marte-600 { color: var(--color-marte-600); --surface-ink: var(--color-marte-600); }
.text-marte-700 { color: var(--color-marte-700); --surface-ink: var(--color-marte-700); }
.text-marte-800 { color: var(--color-marte-800); --surface-ink: var(--color-marte-800); }
.text-marte-900 { color: var(--color-marte-900); --surface-ink: var(--color-marte-900); }
.text-mercurio-50 { color: var(--color-mercurio-50); --surface-ink: var(--color-mercurio-50); }
.text-mercurio-100 { color: var(--color-mercurio-100); --surface-ink: var(--color-mercurio-100); }
.text-mercurio-200 { color: var(--color-mercurio-200); --surface-ink: var(--color-mercurio-200); }
.text-mercurio-300 { color: var(--color-mercurio-300); --surface-ink: var(--color-mercurio-300); }
.text-mercurio-400 { color: var(--color-mercurio-400); --surface-ink: var(--color-mercurio-400); }
.text-mercurio-500 { color: var(--color-mercurio-500); --surface-ink: var(--color-mercurio-500); }
.text-mercurio-600 { color: var(--color-mercurio-600); --surface-ink: var(--color-mercurio-600); }
.text-mercurio-700 { color: var(--color-mercurio-700); --surface-ink: var(--color-mercurio-700); }
.text-mercurio-800 { color: var(--color-mercurio-800); --surface-ink: var(--color-mercurio-800); }
.text-mercurio-900 { color: var(--color-mercurio-900); --surface-ink: var(--color-mercurio-900); }
.text-urano-50 { color: var(--color-urano-50); --surface-ink: var(--color-urano-50); }
.text-urano-100 { color: var(--color-urano-100); --surface-ink: var(--color-urano-100); }
.text-urano-200 { color: var(--color-urano-200); --surface-ink: var(--color-urano-200); }
.text-urano-300 { color: var(--color-urano-300); --surface-ink: var(--color-urano-300); }
.text-urano-400 { color: var(--color-urano-400); --surface-ink: var(--color-urano-400); }
.text-urano-500 { color: var(--color-urano-500); --surface-ink: var(--color-urano-500); }
.text-urano-600 { color: var(--color-urano-600); --surface-ink: var(--color-urano-600); }
.text-urano-700 { color: var(--color-urano-700); --surface-ink: var(--color-urano-700); }
.text-urano-800 { color: var(--color-urano-800); --surface-ink: var(--color-urano-800); }
.text-urano-900 { color: var(--color-urano-900); --surface-ink: var(--color-urano-900); }
.text-neutral-50 { color: var(--color-neutral-50); --surface-ink: var(--color-neutral-50); }
.text-neutral-100 { color: var(--color-neutral-100); --surface-ink: var(--color-neutral-100); }
.text-neutral-200 { color: var(--color-neutral-200); --surface-ink: var(--color-neutral-200); }
.text-neutral-300 { color: var(--color-neutral-300); --surface-ink: var(--color-neutral-300); }
.text-neutral-400 { color: var(--color-neutral-400); --surface-ink: var(--color-neutral-400); }
.text-neutral-500 { color: var(--color-neutral-500); --surface-ink: var(--color-neutral-500); }
.text-neutral-600 { color: var(--color-neutral-600); --surface-ink: var(--color-neutral-600); }
.text-neutral-700 { color: var(--color-neutral-700); --surface-ink: var(--color-neutral-700); }
.text-neutral-800 { color: var(--color-neutral-800); --surface-ink: var(--color-neutral-800); }
.text-neutral-900 { color: var(--color-neutral-900); --surface-ink: var(--color-neutral-900); }

/* Gradient backgrounds. The green one is dark, so it also recolors cards, tags and buttons inside. */
.bg-orbit-yellow { background: var(--orbit-yellow); --surface-ink: var(--color-neutral-900); --surface-ink-soft: var(--color-neutral-700); }
.bg-orbit-green {
  background: var(--orbit-green), var(--color-urano-500);
  --surface-ink: var(--color-mercurio-50); --surface-ink-soft: var(--color-urano-200);
  --ink: var(--color-mercurio-50); --ink-soft: var(--color-urano-200); --ink-body: var(--color-urano-100);
  --tag-line: var(--color-urano-400); --tag-ink: var(--color-mercurio-500);
  --btn-bg: var(--color-mercurio-500); --btn-bg-hover: var(--color-mercurio-400); --btn-fg: var(--color-urano-500);
  --card-hover: var(--color-mercurio-500);
  color: var(--color-sol-50);
}
/* On yellow pages the dark orbit panels use the warm off-white (Figma: sol-50). */
.theme-yellow .bg-orbit-green { --ink: var(--color-sol-50); --surface-ink: var(--color-sol-50); --card-meta: var(--color-sol-200); }

/* =====================================================================
   Layout tokens
   Every measure below comes from the Figma frames (1440 desktop, 390 mobile).
   Components use these variables, so most of them need no mobile override.
   ===================================================================== */
:root {
  --content: 80rem;          /* 1280: default content column */
  --content-wide: 87.5rem;   /* 1400: cards and hero media */
  --content-narrow: 66.5rem; /* 1064: centered headings */
  --gutter: 5rem;            /* 80: side margin of the content column */
  --gutter-wide: 1.25rem;    /* 20: side margin of the wide column */
  --section-y: 10rem;        /* 160: vertical padding of a section */
  --header-h: 8.375rem;      /* 134 */

  --radius-sm: 0.75rem;      /* 12: buttons, inputs */
  --radius-md: 1rem;         /* 16: media inside cards */
  --radius-lg: 1.5rem;       /* 24: cards, hero media */
  --radius-pill: 999px;
}
@media (max-width: 1023px) {
  :root {
    --gutter: 1.5rem;        /* 24 */
    --gutter-wide: 0.5rem;   /* 8 */
    --section-y: 5rem;       /* 80 */
    --header-h: 4rem;        /* 64 */
  }
}

/* =====================================================================
   Themes
   Institutional pages are yellow; everything under the Evolua hub is green.
   Components read these variables instead of fixed palette colors.
   ===================================================================== */
/* The yellow (institutional) tokens are also the defaults, so the block editor canvas and anything outside <body> inherit them. */
:root, .theme-yellow {
  --page-bg: var(--color-sol-100);
  --ink: var(--color-neutral-900);
  --ink-soft: var(--color-neutral-600);
  --ink-body: var(--color-neutral-700);
  --ink-muted: var(--color-neutral-500);
  --ink-faint: var(--color-neutral-300);
  --line: var(--color-neutral-200);
  --tag-line: var(--color-neutral-200);
  --soft: var(--color-sol-200);        /* soft surface: bars, chips, badges */
  --softer: var(--color-sol-50);       /* items on a soft surface */
  --soft-line: var(--color-sol-300);
  --accent: var(--color-sol-500);
  --glow-ring: var(--color-sol-300);
  --nav-active: var(--color-sol-300);
  --nav-current: var(--color-neutral-100); /* pill of the hovered / current item (Figma headers) */
  --btn-bg: var(--color-neutral-900);
  --btn-bg-hover: var(--color-neutral-800);
  --btn-fg: var(--color-sol-50);
  --toggle-bg: var(--color-neutral-200);
  --menu-bg: var(--orbit-yellow);
  --menu-ink: var(--color-neutral-900);
  --menu-line: rgba(45, 11, 5, 0.12); /* neutral-900 at 12% */
  --menu-btn-bg: var(--color-neutral-900);
  --menu-btn-bg-hover: var(--color-neutral-800);
  --menu-btn-fg: var(--color-sol-50);
}
.theme-green {
  --page-bg: var(--color-mercurio-100);
  --ink: var(--color-urano-500);
  --ink-soft: var(--color-urano-400);
  --ink-body: var(--color-urano-400);
  --ink-muted: var(--color-urano-300);
  --ink-faint: var(--color-urano-300);
  --line: var(--color-urano-100);
  --tag-line: var(--color-mercurio-600);
  --soft: var(--color-mercurio-200);
  --softer: var(--color-mercurio-50);
  --soft-line: var(--color-mercurio-300);
  --accent: var(--color-mercurio-500);
  --glow-ring: var(--color-mercurio-300);
  --nav-active: var(--color-mercurio-200);
  --nav-current: var(--color-mercurio-200);
  --btn-bg: var(--color-urano-500);
  --btn-bg-hover: var(--color-urano-600);
  --btn-fg: var(--color-mercurio-50);
  --toggle-bg: var(--color-urano-100);
  --menu-bg: var(--orbit-green), var(--color-urano-500);
  --menu-ink: var(--color-mercurio-50);
  --menu-line: rgba(251, 253, 241, 0.12); /* mercurio-50 at 12% */
  --menu-btn-bg: var(--color-mercurio-500);
  --menu-btn-bg-hover: var(--color-mercurio-400);
  --menu-btn-fg: var(--color-urano-500);
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
/* Desktop layout scales proportionally with the viewport up to the 1440 frame. */
@media (min-width: 1024px) {
  html { font-size: clamp(0.8125rem, 1.11111vw, 1rem); } /* floor at 13px so text stays legible on 1024 to 1170 */
}
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-variation-settings: "YOPQ" 300;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; font-variation-settings: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Skip link: off screen until it gets the focus. */
.skip-link { position: absolute; top: 1rem; left: 1rem; z-index: 100; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); translate: 0 -200%; }
.skip-link:focus { translate: 0 0; }
.only-mobile { display: none; }
@media (max-width: 1023px) {
  .only-desktop { display: none; }
  .only-mobile { display: revert; }
}

/* ---------- Typography ---------- */
.h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.h3 { font-size: var(--h3-size); line-height: var(--h3-lh); }
.h4 { font-size: var(--h4-size); line-height: var(--h4-lh); }
.h5 { font-size: var(--h5-size); line-height: var(--h5-lh); }
.h6 { font-size: var(--h6-size); line-height: var(--h6-lh); }
.body { font-size: var(--body-size); line-height: var(--body-lh); }
.caption { font-size: var(--caption-size); line-height: var(--caption-lh); }

/* =====================================================================
   Layout primitives
   ===================================================================== */
/* Centered column: 1280 by default, --wide 1400, --narrow 1064. */
.container { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--content-wide) + 2 * var(--gutter-wide)); padding-inline: var(--gutter-wide); }
.container--narrow { max-width: calc(var(--content-narrow) + 2 * var(--gutter)); }
/* Blocks of cards keep the 1280 column on desktop but run almost edge to edge on mobile (8 gutter). */
@media (max-width: 1023px) {
  .container--snug { padding-inline: var(--gutter-wide); }
}
/* Section: vertical padding from --section-y. Sizes, desktop / mobile:
   default 160 / 80, --md 120 / 30, --sm 80 / 20, --xs 60 / 16.
   --mobile-sm: 40 on mobile only. --gutter-top: for a panel right under the previous section. */
.section { padding-block: var(--section-y); }
.section--md { --section-y: 7.5rem; }
.section--sm { --section-y: 5rem; }
.section--xs { --section-y: 3.75rem; }
.section--gutter-top { padding-top: var(--gutter-wide); }
@media (max-width: 1023px) {
  .section--md { --section-y: 1.875rem; }
  .section--sm { --section-y: 1.25rem; }
  .section--xs { --section-y: 1rem; }
  .section--mobile-sm { --section-y: 2.5rem; }
  .section--gutter-top { padding-block: var(--gutter-wide); }
}
/* Equal columns. Options: --2 / --4 columns, --loose for the 60px gap, --tight rows. One column on mobile. */
.grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--grid-row-gap, 3.75rem) var(--grid-gap, 1.25rem); }
.grid--2 { --cols: 2; }
.grid--4 { --cols: 4; }
.grid--loose { --grid-gap: 3.75rem; }
.grid--tight { --grid-row-gap: 1.25rem; }
@media (max-width: 1023px) {
  .grid { --cols: 1; }
  .grid--tight { --grid-row-gap: 0.75rem; }
}
/* Vertical stack. Gap, desktop / mobile: default 60 / 60, --xl 120 / 60, --lg 80 / 40,
   --md 64 / 32, --gutter 20 / 12. */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 3.75rem); }
.stack--xl { --stack-gap: 7.5rem; }
.stack--lg { --stack-gap: 5rem; }
.stack--md { --stack-gap: 4rem; }
.stack--gutter { --stack-gap: var(--gutter-wide); }
@media (max-width: 1023px) {
  .stack--xl { --stack-gap: 3.75rem; }
  .stack--lg { --stack-gap: 2.5rem; }
  .stack--md { --stack-gap: 2rem; }
  .stack--gutter { --stack-gap: 0.75rem; }
}
/* Body of a hub or listing page (use with .stack.stack--xl): space before the closing blocks.
   Desktop / mobile: default 60 / 40, --end 120 / 80. --loose (mobile): blocks 80 apart, 16 after. */
.page-body { padding-bottom: 3.75rem; }
.page-body--end { padding-bottom: 7.5rem; }
@media (max-width: 1023px) {
  .page-body { padding-bottom: 2.5rem; }
  .page-body--end { padding-bottom: 5rem; }
  .page-body--loose { --stack-gap: 5rem; padding-bottom: 1rem; }
}

/* =====================================================================
   Small components
   ===================================================================== */
/* ---------- Icons ---------- */
.icon { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--bold { stroke-width: 2; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Logo (mask so it follows currentColor) ---------- */
.logo {
  display: block;
  width: 9.287375rem;  /* 148.598 */
  aspect-ratio: 148.598 / 30;
  background: currentColor;
  -webkit-mask: url("../logos/orbio.svg") center / 100% 100% no-repeat;
  mask: url("../logos/orbio.svg") center / 100% 100% no-repeat;
}
@media (max-width: 1023px) {
  .logo { width: 7rem; } /* 112 */
}

/* ---------- Tag ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--tag-size);
  line-height: var(--tag-lh);
  white-space: nowrap;
}
/* Figma strokes sit inside the frame: an inset shadow keeps the box size. */
.tag--outline { box-shadow: inset 0 0 0 1.5px var(--tag-line); color: var(--tag-ink, var(--ink)); }
.tag--green { background: var(--color-mercurio-500); color: var(--color-mercurio-900); }
.tag--yellow { background: var(--color-sol-500); box-shadow: inset 0 0 0 1.5px var(--color-sol-600); color: var(--color-neutral-900); }
.tag--lg { padding: 0.5rem 1rem; font-size: var(--caption-size); line-height: var(--caption-lh); } /* section labels on detail pages */

/* ---------- Button ----------
   Height comes from padding + line height (12 + 28 + 12 = 52). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: 1.25rem;   /* same size on desktop and mobile */
  line-height: 1.75rem;
  white-space: nowrap;
  transition: background-color var(--ease-color), color var(--ease-color);
}
.btn--icon-only { padding: 1rem; }
.btn--block { width: 100%; }
/* Follows the page theme or the surface it sits on. */
.btn--theme { background: var(--btn-bg); color: var(--btn-fg); }
.btn--ghost { box-shadow: inset 0 0 0 1.5px var(--soft-line); color: var(--ink); } /* secondary action next to a filled button */
.btn--ghost:hover { background: var(--softer); }
.btn--theme:hover { background: var(--btn-bg-hover); }
.btn--yellow-dark { background: var(--color-neutral-900); color: var(--color-sol-50); }
.btn--yellow-dark:hover { background: var(--color-neutral-800); }
.btn--yellow-white { background: var(--color-sol-50); color: var(--color-neutral-900); }
.btn--yellow-white:hover { background: var(--color-sol-100); }
.btn--yellow-light { background: var(--color-sol-500); color: var(--color-neutral-900); }
.btn--yellow-light:hover { background: var(--color-sol-400); }
.btn--green-dark { background: var(--color-urano-500); color: var(--color-mercurio-50); }
.btn--green-dark:hover { background: var(--color-urano-600); }
.btn--green-white { background: var(--color-mercurio-50); color: var(--color-urano-500); }
.btn--green-white:hover { background: var(--color-mercurio-100); }
.btn--green-light { background: var(--color-mercurio-500); color: var(--color-urano-500); }
.btn--green-light:hover { background: var(--color-mercurio-400); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.2; cursor: default; }

/* ---------- Animated link underline ---------- */
.link { position: relative; display: inline-block; }
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.0625em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--spring-time) var(--spring);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Photo ----------
   A box whose image always covers it. Options through inline variables on the element:
   --focus-x / --focus-y (crop focus), --zoom, and the modifiers below. */
.photo { position: relative; overflow: hidden; isolation: isolate; }
.photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
  transform: scale(calc(var(--zoom, 1) * var(--flip, 1)), var(--zoom, 1));
}
.photo--flip { --flip: -1; }
/* Brand tint used on the institutional photos. */
.photo--tint::after { content: ""; position: absolute; inset: 0; background: var(--photo-tint); mix-blend-mode: color; pointer-events: none; }

/* ---------- Glow (decorative ellipse behind heroes and the footer) ---------- */
.glow {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--page-bg) 40%, var(--glow-ring) 80%, var(--page-bg) 100%);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Hero version fades into the page below its middle line. Figma fades to a slightly grayer cream
   (#F9F5E1), which shows as a tinted half circle on mobile; the page color is used instead. */
.glow--fade { background: linear-gradient(to bottom, transparent 50%, var(--page-bg) 72.14%), radial-gradient(closest-side, var(--page-bg) 40%, var(--glow-ring) 80%, var(--page-bg) 100%); }

/* ---------- Collapse ----------
   Content that opens to its own height: the grid row goes from 0fr to 1fr.
   Open when the element or its parent has [data-open], or when the control right before it
   has aria-expanded="true". While closed the content is also out of the focus order.
   Option: --mobile (collapsible on mobile only, always open on desktop). */
.collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.collapse > * { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.4s; }
.collapse[data-open], [data-open] > .collapse, [aria-expanded="true"] + .collapse { grid-template-rows: 1fr; }
.collapse[data-open] > *, [data-open] > .collapse > *, [aria-expanded="true"] + .collapse > * { visibility: inherit; transition-delay: 0s; } /* inherit, so a hidden ancestor (closed menu) still hides it */
.reduce-motion .collapse { transition: none; }
@media (min-width: 1024px) {
  .collapse--mobile { grid-template-rows: 1fr; }
  .collapse--mobile > * { overflow: visible; visibility: inherit; }
}

/* ---------- Appear animations (Style Guide rules) ---------- */
/* Headings: split per line, opacity only, 0.1s per line. */
/* Until script.js has wrapped the words, the heading stays invisible: no flash of plain text
   before the per-line entrance (the words carry the opacity after that). */
.js:not(.reduce-motion) [data-split]:not(.is-split) { visibility: hidden; }
.js [data-split] .word { display: inline-block; opacity: 0; transition: opacity var(--fade); transition-delay: calc(var(--line, 0) * var(--stagger)); }
.js [data-split].is-inview .word { opacity: 1; }
/* Cards and blocks: slide in from -20Y, staggered. */
.js [data-appear] { opacity: 0; translate: 0 -1.25rem; transition: opacity var(--fade), translate var(--spring-time) var(--spring); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.js [data-appear].is-inview { opacity: 1; translate: none; }
.reduce-motion [data-split] .word, .reduce-motion [data-appear] { opacity: 1; translate: none; transition: none; }

/* =====================================================================
   Header and menus
   ===================================================================== */
.site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; color: var(--ink); }
.site-header__bar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--header-h); transition: color var(--ease-color); }
.site-header__logo { justify-self: start; }
.site-header__cta { justify-self: end; }
.site-nav { display: flex; }
.site-nav__link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 1.25rem; line-height: 1.75rem; white-space: nowrap;
}
/* The design overlaps the items by 4px (item spacing -4): a pill is 24 + text + 24 while the
   texts sit 44 apart. Because of the overlap, while a panel is open the other pills drop their
   background at once, so two pills never show together. */
.site-nav__link + .site-nav__link { margin-left: -0.25rem; } /* -4 */
.site-nav__link--menu { padding-right: 1.25rem; }
/* One pill at a time: the trigger of the open panel; otherwise the hovered item; otherwise the
   item of the current section (aria-current, set by build.mjs). A pill fades in but drops at
   once (the transition lives on the states that have a background), so two never overlap. */
.site-nav__link[aria-expanded="true"] { background: var(--nav-active); transition: background-color var(--ease-color); }
.site-header:not([data-open]) .site-nav__link:is(:hover, [aria-current]) { background: var(--nav-current); transition: background-color var(--ease-color); }
.site-header:not([data-open]) .site-nav:hover .site-nav__link[aria-current]:not(:hover) { background: transparent; transition: none; }
.site-header__toggle { display: none; }
/* While a panel is open the header takes that panel's colors, whatever the page theme. */
.site-header[data-open="solutions"] { color: var(--color-neutral-900); --nav-active: var(--color-sol-300); --btn-bg: var(--color-neutral-900); --btn-bg-hover: var(--color-neutral-800); --btn-fg: var(--color-sol-50); }
.site-header[data-open="evolua"] { color: var(--color-mercurio-50); --nav-active: var(--color-urano-400); --btn-bg: var(--color-mercurio-500); --btn-bg-hover: var(--color-mercurio-400); --btn-fg: var(--color-urano-500); }

/* ---------- Mega menu ---------- */
.mega-scrim { position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity var(--ease-color), visibility 0s 0.4s; }
.site-header[data-open] .mega-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The panel starts under the header bar: its top padding reserves the bar plus 40. */
.mega { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; padding: calc(var(--header-h) + 2.5rem) 0 5rem; overflow: clip; visibility: hidden; pointer-events: none; transition: visibility 0s 0.4s; }
.mega[data-active] { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Background morph: the panel grows out of the header bar. */
.mega__bg { position: absolute; inset: 5px; border-radius: var(--radius-lg); clip-path: inset(0 0 calc(100% - var(--header-h) + 10px) 0 round var(--radius-lg)); opacity: 0; transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity var(--ease-color); }
.mega[data-active] .mega__bg { clip-path: inset(0 round var(--radius-lg)); opacity: 1; }
.mega--evolua .mega__bg { background: var(--orbit-green); }
.mega--solutions .mega__bg { background: var(--orbit-yellow); }
.mega__content { position: relative; display: flex; justify-content: space-between; align-items: flex-start; opacity: 0; transition: opacity var(--ease-color); }
.mega[data-active] .mega__content { opacity: 1; transition-delay: 0.15s; }
.mega--evolua .mega__content { color: var(--color-mercurio-50); --ink: var(--color-mercurio-50); --ink-soft: var(--color-urano-200); --card-hover: var(--color-mercurio-500); }
.mega--solutions .mega__content { color: var(--color-neutral-900); }

.mega__links { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.3125rem; } /* gap 21 */
.mega__link { position: relative; display: block; font-size: 3rem; line-height: 1.16; white-space: nowrap; transition: color var(--ease-color), padding-left var(--spring-time) var(--spring); }
/* Bullet of the current link: a dot that grows in place (from its own center) while the text
   slides right to make room; both on the Style Guide spring. */
.mega__link::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.875rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--spring-time) var(--spring); }
.mega__link[data-current] { padding-left: 2.125rem; } /* 14 dot + 20 */
.mega__link[data-current]::before { transform: none; }
.mega--evolua .mega__links[data-hovering] .mega__link { color: var(--color-urano-300); }
.mega--evolua .mega__links[data-hovering] .mega__link[data-current] { color: var(--color-mercurio-500); }
.mega--solutions .mega__link { color: var(--color-sol-600); }
.mega--solutions .mega__link[data-current] { color: var(--color-neutral-900); }

.mega__cards { display: none; grid-template-columns: repeat(2, 25.8125rem); gap: 1.25rem; } /* 2 x 413 */
.mega__cards[data-current] { display: grid; }
.mega__cards .card { gap: 2.375rem; } /* 38 before the meta line */
.mega__cards .card__media { border-radius: var(--radius-md); }
.mega__symbol { position: absolute; left: var(--gutter); top: 0; width: 80.125rem; max-width: none; pointer-events: none; } /* decorative, 1282 wide */
.mega__photo { width: 32.75rem; aspect-ratio: 4 / 3; border-radius: var(--radius-md); }  /* 524 x 393 */
.mega__photo > img { opacity: 0; transition: opacity var(--ease-color); }
.mega__photo > img[data-current] { opacity: 1; }
.reduce-motion .mega__bg, .reduce-motion .mega__link, .reduce-motion .mega__link::before { transition: none; }

/* ---------- Mobile header + menu ---------- */
.mobile-menu { display: none; }
@media (max-width: 1023px) {
  .site-header__bar { display: flex; justify-content: space-between; padding: 0.625rem 1rem; }
  .site-nav, .site-header__cta, .mega, .mega-scrim { display: none; }
  .site-header__toggle, .mobile-menu__close { display: flex; padding: 0.625rem; border-radius: var(--radius-sm); } /* 24 icon + 10 = 44 */
  .site-header__toggle { background: var(--toggle-bg); }
  .site-header__toggle .icon, .mobile-menu__close .icon { width: 1.5rem; height: 1.5rem; }

  /* The panel morphs out of the toggle button. */
  .mobile-menu { --menu-ease: cubic-bezier(0.22, 1, 0.36, 1); display: block; position: fixed; inset: 0; z-index: 60; visibility: hidden; color: var(--menu-ink); transition: visibility 0s 0.5s; }
  .mobile-menu[data-open] { visibility: visible; transition-delay: 0s; }
  .mobile-menu::before { content: ""; position: absolute; inset: 0; background: var(--page-bg); opacity: 0; transition: opacity var(--ease-color); }
  .mobile-menu[data-open]::before { opacity: 1; }
  .mobile-menu__panel {
    position: absolute; inset: 0.5rem;
    display: flex; flex-direction: column; justify-content: space-between;
    padding-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--menu-bg);
    overflow: hidden auto;
    /* Closed state = the toggle's box, measured from the panel edges. */
    clip-path: inset(0.125rem 0.5rem calc(100% - 2.875rem) calc(100% - 3.25rem) round var(--radius-sm));
    transition: clip-path 0.5s var(--menu-ease);
  }
  .mobile-menu[data-open] .mobile-menu__panel { clip-path: inset(0 round var(--radius-lg)); }
  .mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; flex: none; padding: 0.625rem 1rem; }
  /* The close button starts as a twin of the header toggle (same box, colors and bars, moved
     onto it: the panel sits 8px inside the screen) and becomes the cross while the panel
     opens. Closing plays it back, so the swap between the two buttons is never seen. */
  .mobile-menu__close { background: var(--toggle-bg); color: var(--ink); translate: 0.5rem -0.5rem; transition: background-color 0.4s ease, color 0.4s ease, translate 0.5s var(--menu-ease); } /* Style Guide: 0.4s color fade */
  .mobile-menu[data-open] .mobile-menu__close { background: var(--menu-btn-bg); color: var(--menu-btn-fg); translate: 0 0; }
  /* Three bars that turn into a cross: the outer ones meet in the middle and rotate, the middle one fades. */
  .menu-icon path { transform-box: fill-box; transform-origin: center; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s; }
  .mobile-menu[data-open] .menu-icon__top { transform: translate(0.6px, 8.4px) rotate(45deg) scaleX(1.088); }
  .mobile-menu[data-open] .menu-icon__mid { opacity: 0; transform: scaleX(0); }
  .mobile-menu[data-open] .menu-icon__bottom { transform: translate(0.6px, -8.4px) rotate(-45deg) scaleX(1.088); }
  .reduce-motion .mobile-menu__panel, .reduce-motion .mobile-menu__close, .reduce-motion .menu-icon path { transition: none; }
  .mobile-menu__list { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem 0; }
  .mobile-menu__item + .mobile-menu__item { padding-top: 1rem; box-shadow: inset 0 1px 0 var(--menu-line); }
  .mobile-menu__link { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 1.625rem; line-height: 1.2; white-space: nowrap; }
  .mobile-menu__link .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2.22; }
  /* Sub lists open with .collapse. */
  .mobile-menu__sub > ul { display: flex; flex-direction: column; gap: 0.75rem; padding-left: 1rem; font-size: 1.375rem; line-height: 1.2; }
  .mobile-menu__sub > ul > li:first-child { padding-top: 0.75rem; }
  .mobile-menu__cta { display: flex; justify-content: center; flex: none; padding: 2.5rem 1rem 0; }
  .mobile-menu__cta .btn { background: var(--menu-btn-bg); color: var(--menu-btn-fg); }
  .mobile-menu__cta .btn:hover { background: var(--menu-btn-bg-hover); }
}

/* =====================================================================
   Sections and components
   Each block: base rule, options, then its mobile rules.
   ===================================================================== */

/* ---------- Hero ----------
   One hero for every page. Optional parts: breadcrumb, tag, description, actions, media.
   Options: --crumbs (has a breadcrumb), --left (left aligned).
   Space after it, desktop / mobile: default 120 / 30, --flush 0 / 0, --short 80 / 20,
   --tall 200 / 100, --to-media 0 / 40 (ends with the full-width media). */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5rem; padding-block: calc(var(--header-h) + 7.5rem) var(--hero-pb, 7.5rem); overflow-x: clip; } /* title 120 below the header, 80 to the media */
/* The glow is taller than short heroes: it sits behind everything so it never covers the next section. */
.hero .glow { top: 18rem; z-index: -1; width: 136.625rem; aspect-ratio: 2186 / 1488; } /* top 288 */
.hero--crumbs { gap: 9.5625rem; padding-top: var(--header-h); } /* blocks 153 apart, trail right under the header */
.hero--flush { --hero-pb: 0; --hero-pb-mobile: 0; }
.hero--short { --hero-pb: 5rem; --hero-pb-mobile: 1.25rem; }
.hero--tall { --hero-pb: 12.5rem; --hero-pb-mobile: 6.25rem; }
.hero--to-media { --hero-pb: 0; --hero-pb-mobile: 2.5rem; }
.hero__title-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; }
/* --stack: something sits under the description (filters); intro and extra are 60 apart. */
.hero__title-block--stack { gap: 3.75rem; width: 100%; }
.hero__intro { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.hero__heading { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hero__heading--tight { gap: 0.625rem; } /* tag 10 above the title */
.hero__tags { display: flex; gap: 0.5rem; }
.hero__desc { max-width: 31.25rem; color: var(--ink-soft); } /* 500 */
.hero__desc--wide { max-width: 37.5rem; } /* 600 */
.hero__desc--muted { color: var(--ink-muted); }
.hero__actions { display: flex; gap: 0.75rem; }
.hero--left .hero__title-block, .hero--left .hero__heading { align-items: flex-start; text-align: left; }
.hero--left .hero__heading { width: 100%; }
.hero__media { aspect-ratio: 4 / 3; border-radius: var(--hero-radius, var(--radius-lg)); } /* 1400 x 1050 */
/* Split: left aligned title with the description (and actions) in a column on its right. */
.hero__split { display: flex; align-items: flex-start; gap: 2.5rem; width: 100%; }
.hero__split > :first-child { flex: 1; }
.hero__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; width: 31.25rem; } /* 500 */
/* Detail pages: title block and media 60 apart (__body); the program page replaces the title
   block with tags + title ticker (__marquee), then description and partner logo (__row). */
.hero__body { display: flex; flex-direction: column; gap: 3.75rem; width: 100%; }
.hero__banner { display: flex; flex-direction: column; gap: 7.5rem; }
.hero__marquee { display: flex; flex-direction: column; gap: 1.25rem; }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
.hero__partner { width: auto; height: 3.75rem; } /* 288 x 60 */
@media (max-width: 1023px) {
  .hero { padding-block: 12.875rem var(--hero-pb-mobile, 1.875rem); } /* title at 206 */
  .hero .glow { top: 6.5625rem; width: 151.8vw; } /* top 105; 592 wide at 390, follows the viewport */
  .hero--crumbs { gap: 5rem; padding-top: 6.25rem; } /* trail at 100 */
  .hero__title-block { gap: 1.25rem; }
  .hero__title-block--stack { gap: 2rem; }
  .hero__intro { gap: 1.25rem; }
  .hero__heading { gap: 0.75rem; }
  .hero__heading--tight { gap: 0.25rem; }
  .hero__tags { gap: 0.25rem; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__split { flex-direction: column; gap: 1.25rem; }
  .hero__aside { gap: 1.25rem; width: auto; }
  .hero__body { gap: 2rem; }
  .hero__banner { gap: 3.75rem; }
  .hero__marquee { gap: 0.75rem; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero__partner { height: 3rem; } /* 230 x 48 */
}

/* ---------- Breadcrumb ---------- */
.breadcrumb__list { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; box-shadow: inset 0 -1px 0 var(--line); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-muted); white-space: nowrap; }
.breadcrumb__list li { display: flex; align-items: center; gap: 0.5rem; }
.breadcrumb__list [aria-current] { color: var(--ink); }
@media (max-width: 1023px) {
  .breadcrumb__list { gap: 0.25rem; padding-bottom: 0.25rem; }
  .breadcrumb__list li { flex: none; gap: 0.25rem; }
  /* Only the current page gives way: it is cut with an ellipsis. */
  .breadcrumb__list li:last-child { flex: 0 1 auto; min-width: 0; }
  .breadcrumb__list [aria-current] { overflow: hidden; text-overflow: ellipsis; }
  .breadcrumb__list .icon { width: 1.125rem; height: 1.125rem; }
}

/* ---------- Section head (tag + title + optional description) ----------
   Option: --left. */
.section-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; }
.section-head__heading { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.section-head__title { max-width: var(--content-narrow); }
.section-head__desc { max-width: 31.25rem; color: var(--ink-body); } /* 500 */
.section-head__desc--wide { max-width: 39.375rem; } /* 630 */
.section-head__desc--narrow { max-width: 27.5rem; } /* 440 */
.section-head--left, .section-head--left .section-head__heading { align-items: flex-start; text-align: left; }
@media (max-width: 1023px) {
  .section-head { gap: 1.25rem; }
  .section-head__heading { gap: 0.75rem; }
}

/* ---------- Statement (tag + large text + optional button) ---------- */
.statement { display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
.statement__text { max-width: var(--content-narrow); }
.statement--wide .statement__text { max-width: none; }
.statement--tight { gap: 1.25rem; }
@media (max-width: 1023px) {
  .statement { gap: 1.5rem; }
  .statement--tight { gap: 0.75rem; }
}

/* ---------- Lead (tag, large statement on the left, text column on the right) ---------- */
.lead { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.lead__row { display: flex; gap: 1.25rem; width: 100%; }
.lead__title { flex: none; width: 46.125rem; max-width: 100%; } /* 738 */
.lead__text { display: flex; flex-direction: column; gap: 1.875rem; width: 25.875rem; color: var(--ink-body); } /* 414 */
@media (max-width: 1023px) {
  .lead { gap: 0.75rem; }
  .lead__row { flex-direction: column; gap: 0.75rem; }
  .lead__title, .lead__text { width: auto; }
  .lead__text { gap: 1.5rem; }
}

/* ---------- Dark section (dark background with curved edges) ----------
   Vertical padding through --dark-pt / --dark-pb (defaults 320).
   Options: --brown (use with .bg-neutral-900: recolors tags, text and the numbered cards inside),
   --roomy (mobile: 80 instead of 60 after the curve). */
.dark-section { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7.5rem; padding-block: var(--dark-pt, 20rem) var(--dark-pb, 20rem); }
.dark-section--brown {
  --ink-body: var(--color-neutral-200);
  --tag-line: var(--color-sol-700); --tag-ink: var(--color-sol-500);
  --num-card-num: var(--color-neutral-300); --num-card-title: var(--color-neutral-900); --num-card-desc: var(--color-neutral-500);
  --num-card-active: var(--color-sol-500); --num-card-active-ink: var(--color-neutral-900);
  --carousel-track: var(--color-neutral-700); --carousel-thumb: var(--color-sol-500);
  --carousel-prev: var(--color-sol-50); --carousel-prev-hover: var(--color-sol-100);
  --carousel-next: var(--color-sol-500); --carousel-next-hover: var(--color-sol-400); --carousel-ink: var(--color-neutral-900);
  --card-hover: var(--color-sol-500); /* card title on hover (card-cases Dark in the Style Guide) */
  color: var(--color-sol-50);
}
.dark-section--brown .num-card.is-active { --num-card-num: var(--num-card-active-ink); --num-card-title: var(--num-card-active-ink); --num-card-desc: var(--num-card-active-ink); }
.dark-section__closing { position: relative; max-width: 41.875rem; margin-inline: auto; text-align: center; } /* 670 */
/* Closing block in two columns: large sentence + supporting text. */
.dark-section__split { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; }
.dark-section__split > :first-child { flex: 1; max-width: 47.5rem; }
.dark-section__split > :last-child { width: 27.5rem; color: var(--ink-body); } /* 440 */
/* Curved edge: a page-colored ellipse cap, flattened by --bend (1 = Figma curve, 0 = straight line). */
.curve { position: absolute; left: 0; width: 100%; overflow: hidden; pointer-events: none; transform: scaleY(var(--bend, 1)); }
/* Width follows the viewport but the height stays fixed, so the cap always reaches both edges. */
.curve::before { content: ""; position: absolute; left: 50%; width: max(218rem, 242.23vw); height: 120.8125rem; border-radius: 50%; background: var(--page-bg); transform: translateX(-50%); }
.curve--top { top: -3px; height: calc(6.75rem + 3px); transform-origin: top; } /* 108 visible; 3 of overlap past the edge so the scaled layer never seams with it */
.curve--top::before { bottom: 0; }
.curve--bottom { bottom: -3px; height: calc(7.5rem + 3px); transform-origin: bottom; } /* 120 visible */
.curve--bottom::before { top: 0; }
@media (max-width: 1023px) {
  .dark-section { gap: 3.75rem; padding-block: 6.75rem; } /* 48 cap + 60 */
  .dark-section--roomy { padding-block: 8rem; } /* 48 cap + 80 */
  .dark-section__closing { font-size: 1.25rem; line-height: 1.75rem; }
  .dark-section__split { flex-direction: column; gap: 1.25rem; }
  .dark-section__split > :last-child { width: auto; }
  .curve::before { width: max(37.5rem, 153.85vw); height: 18.75rem; } /* 600 x 300 */
  .curve--top, .curve--bottom { height: calc(3rem + 3px); }
}

/* ---------- Numbered card ----------
   Equal heights come from the row it sits in plus min-height; the text block stays at the bottom.
   Colors through --num-card-* (see --brown and .dark-section--brown).
   Options: --brown, --tagged (a tag between the number and the title), .is-active (highlight). */
.num-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-height: 34.5rem; /* 552 */
  padding: 2rem;
  border-radius: var(--radius-md);
  background: var(--num-card-bg, var(--color-sol-100)); /* Figma mixes sol-100 and a loose #f8f5e0 on these cards; see _figma/PENDING.md */
  transition: background-color var(--ease-color);
}
.num-card__head { display: flex; flex-direction: column; gap: 1.5rem; }
.num-card__num { font-size: var(--h3-size); line-height: var(--h3-lh); color: var(--num-card-num, var(--color-mercurio-700)); }
.num-card__title { color: var(--num-card-title, var(--color-urano-500)); }
.num-card__desc { color: var(--num-card-desc, var(--color-mercurio-800)); }
.num-card--brown { --num-card-bg: var(--color-neutral-900); --num-card-num: var(--color-sol-500); --num-card-title: var(--color-sol-50); --num-card-desc: var(--color-neutral-300); box-shadow: inset 0 0 0 1.5px var(--color-neutral-200); }
.num-card--tagged .num-card__head { gap: 1rem; align-items: flex-start; }
.num-card.is-active { background: var(--num-card-active, var(--color-mercurio-500)); }
@media (max-width: 1023px) {
  .num-card { gap: 3.25rem; min-height: 0; padding: 1.5rem; } /* 24 padding, 52 before the text */
  .num-card__head { gap: 0.75rem; }
  .num-card__num { line-height: 1.1; }
}

/* ---------- Carousel ----------
   Native horizontal scroll with snap (script.js: Orbio.carousel). Controls: a progress bar that
   works like a scrollbar (--thumb-size = visible share, --thumb = progress) and two arrows.
   --split puts the bar on the left and the arrows on the right.
   Options through variables: --carousel-item (item width), --carousel-inset (side padding when
   the items run to the edges of the parent, see .panel--bleed), --carousel-track and
   --carousel-thumb (bar colors), --carousel-prev / --carousel-next (+ -hover) and --carousel-ink
   (arrow buttons). The defaults are the green dark surface; .dark-section--brown sets the yellow ones. */
.carousel { display: flex; flex-direction: column; gap: 2.5rem; }
.carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--carousel-inset, 0px); scrollbar-width: none; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: flex; gap: var(--gutter-wide); width: max-content; padding-inline: var(--carousel-inset, 0px); }
.carousel__track > * { flex: none; width: var(--carousel-item, 25.8125rem); scroll-snap-align: start; } /* 413 */
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding-inline: var(--carousel-inset, 0px); }
.carousel__progress { position: relative; flex: 1; max-width: 25.8125rem; height: 4px; border-radius: var(--radius-pill); background: var(--carousel-track, var(--color-urano-400)); overflow: hidden; } /* up to 413 */
.carousel__progress-bar { position: absolute; top: 0; left: calc(var(--thumb, 0) * (100% - var(--thumb-size, 50%))); width: var(--thumb-size, 50%); height: 100%; border-radius: inherit; background: var(--carousel-thumb, var(--color-mercurio-500)); }
.carousel__arrows { display: flex; gap: 0.375rem; }
.carousel__arrows .btn--icon-only { padding: 1.0625rem; } /* 54 square */
.carousel__prev, .carousel__next { color: var(--carousel-ink, var(--color-urano-500)); }
.carousel__prev { background: var(--carousel-prev, var(--color-mercurio-50)); }
.carousel__prev:hover { background: var(--carousel-prev-hover, var(--color-mercurio-100)); }
.carousel__next { background: var(--carousel-next, var(--color-mercurio-500)); }
.carousel__next:hover { background: var(--carousel-next-hover, var(--color-mercurio-400)); }
.carousel__controls--split { justify-content: space-between; }
.carousel__controls--split .carousel__progress { flex: none; width: 25.8125rem; max-width: 50%; } /* 413 */
/* Mobile: arrow, bar, arrow, centered (52 + 10 + 90 + 10 + 52 at 390). */
@media (max-width: 1023px) {
  .carousel { --carousel-item: 17.5rem; } /* 280 */
  .carousel__track { gap: 0.75rem; }
  .carousel .num-card { min-height: 23.375rem; padding: 1rem; } /* 280 x 374 */
  .carousel__controls, .carousel__controls--split { justify-content: center; padding-inline: 5rem; }
  .carousel__controls--split .carousel__progress { flex: 1; width: auto; max-width: none; }
  .carousel__arrows { display: contents; }
  .carousel__arrows .btn--icon-only { padding: 1rem; }
  [data-carousel-prev] { order: -1; }
}

/* ---------- Wave ----------
   A carousel of numbered cards (use with .carousel) that, on desktop with motion on, becomes a
   pinned stage: script.js adds .is-pinned and moves the cards sideways along a wave with the
   scroll. It reads --wave-step and --wave-card and sets --tx / --ty on each card. */
.wave { position: relative; width: 100%; --wave-card: 25.8125rem; --wave-step: 27.0625rem; --carousel-item: var(--wave-card); --carousel-inset: var(--gutter); } /* card 413, 433 between cards */
.wave.is-pinned { height: calc(44.5rem + var(--travel)); }
/* Fixed stage: the cards are absolutely positioned inside it (card 552 + wave 160). */
.wave.is-pinned .wave__viewport { position: sticky; top: max(1rem, calc((100vh - 44.5rem) / 2)); width: 100%; height: 44.5rem; overflow: hidden; }
.wave.is-pinned .wave__track { position: relative; display: block; width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); height: 100%; margin-inline: auto; padding: 0; transform: scale(var(--fit, 1)); transform-origin: center; }
.wave.is-pinned .num-card { position: absolute; left: 0; top: 0; width: var(--wave-card); transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); will-change: transform; }
.wave.is-pinned .carousel__controls { display: none; }
@media (max-width: 1023px) {
  .wave { --wave-card: 17.5rem; --carousel-inset: var(--gutter-wide); } /* 280 */
}

/* ---------- Content card (programs, articles, materials, cases) ----------
   One anatomy: media, tags, title, optional description, optional footer (meta line or button).
   Width comes from the grid it sits in; the media ratio through --card-ratio (set by the grid).
   Options: --lg (horizontal, media right), --lg-reverse, --action (footer is a button),
   --tight (mobile: image 12 from the text instead of 24, as the design does on program cards).
   Dark surroundings recolor it through --ink / --ink-soft / --card-meta / --card-hover. */
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; text-align: left; }
.card__main { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.card__media { width: 100%; aspect-ratio: var(--card-ratio, 4 / 3); border-radius: var(--radius-lg); } /* Style Guide: images always 4:3 */
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.card__tags { display: flex; align-items: center; gap: 1.25rem; }
.card__badge { width: auto; height: 1.5rem; }
.card__title { max-width: 19.0625rem; font-size: var(--h6-size); line-height: var(--h6-lh); transition: color var(--ease-color); } /* 305 */
.card__desc { max-width: 22.5rem; font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); } /* 360 */
/* The meta line is the only place the design uses Inter. */
.card__meta { display: flex; align-items: center; gap: 0.75rem; font-family: "Inter", sans-serif; font-variation-settings: normal; font-weight: 400; font-size: 0.875rem; line-height: 1.5; color: var(--card-meta, var(--color-urano-200)); white-space: nowrap; }
.card__meta b { font-weight: 700; color: var(--ink); }
/* Hover (Figma): underlined title, in the accent color on dark surfaces. */
a.card:hover .card__title { color: var(--card-hover, inherit); text-decoration: underline; text-underline-position: from-font; }
.card--lg .card__main { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 2rem; }
.card--lg .card__media { flex: none; width: 49.22%; aspect-ratio: 4 / 3; } /* 630 of 1280 */
.card--lg .card__body { gap: 1.25rem; max-width: 32.625rem; } /* 522 */
.card--lg .card__title { max-width: none; font-size: var(--h4-size); line-height: var(--h4-lh); }
.card--lg .card__desc { max-width: 25rem; } /* 400 */
.card--lg .card__body > .card__meta, .card--lg .card__body > .btn { margin-top: 1.25rem; } /* 40 after the text */
.card--lg-reverse .card__main { flex-direction: row; }
/* Two-column grids stretch the card but keep the media height of the 3-column card (311). */
.grid--2 { --card-ratio: 630 / 311; }
.grid--2.grid--loose { --card-ratio: 610 / 311; }
@media (max-width: 1023px) {
  .card { gap: 2rem; }                        /* 32 before the meta line */
  .card--action { gap: 1.75rem; }             /* 28 before the button */
  .card__main { gap: 1.5rem; }                /* 24 from the image to the text */
  .card--tight .card__main { gap: 0.75rem; }  /* 12 */
  .card__body { gap: 0.5rem; }
  .card__tags { gap: 0.75rem; }
  .card__badge { height: 1.25rem; }
  .card__title { max-width: none; }
  .card--lg .card__main { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .card--lg .card__body { gap: 0.75rem; }
  .card--lg .card__media { width: 100%; aspect-ratio: 4 / 3; }
  .grid--2, .grid--2.grid--loose { --card-ratio: 414 / 311; }
}

/* ---------- Post block (title + "see all" + cards) ----------
   On mobile the title centers and the link moves below the cards.
   Row gap through --post-block-gap (see .panel--roomy). */
.post-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title more" "list list"; align-items: end; row-gap: var(--post-block-gap, 3.75rem); }
.post-block__title { grid-area: title; max-width: 52.9375rem; } /* 847 */
.post-block__logo { width: auto; height: 2.5rem; margin-bottom: 0.625rem; } /* 40 high, 10 above the title */
.post-block__desc { max-width: 25.8125rem; margin-top: 2.5rem; color: var(--ink-body); } /* 413 */
.post-block__more { grid-area: more; }
.post-block__list { grid-area: list; }
.post-block__featured { margin-bottom: 2.5rem; }
.more-link { display: inline-flex; align-items: center; gap: 1.5rem; font-size: var(--body-size); line-height: var(--body-lh); white-space: nowrap; }
.more-link:hover .btn { background: var(--btn-bg-hover); }
@media (max-width: 1023px) {
  .post-block { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "list" "more"; row-gap: 2rem; justify-items: center; }
  .post-block__title { text-align: center; }
  .post-block__logo { height: 1.5rem; margin-inline: auto; }
  .post-block__desc { margin-top: 1.25rem; margin-inline: auto; }
  .post-block__list { justify-self: stretch; }
  .post-block__featured { margin-bottom: 3.75rem; }
  .more-link { gap: 0.75rem; white-space: normal; }
}

/* ---------- Panel (rounded block that groups content) ----------
   Background from a bg-* class.
   Options: --bordered (2px line, color from --panel-line), --feature (opens with a centered
   .panel__head, 120 above it; its post blocks get 60 of breathing room), --roomy (120 of
   breathing room), --bleed (content runs to the panel edges, for carousels; the other
   children keep the side padding). */
.panel { display: flex; flex-direction: column; gap: 3.75rem; padding: 3.75rem; border-radius: var(--radius-lg); color: var(--surface-ink, var(--ink)); }
.panel__head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-bottom: 5rem; text-align: center; }
.panel--bordered { box-shadow: inset 0 0 0 2px var(--panel-line, var(--line)); }
.panel--feature { padding-top: 7.5rem; }
.panel--feature .post-block { padding-block: 3.75rem; }
.panel--roomy { gap: 7.5rem; padding-block: 7.5rem; --post-block-gap: 7.5rem; }
.panel--bleed { padding-inline: 0; --inset: 3.75rem; --carousel-inset: var(--inset); }
.panel--bleed > :not(.carousel) { padding-inline: var(--inset); }
/* Section that holds a panel: panels sit 120 apart. --flush: none (desktop), --flush-top: none above. */
.panel-section { padding-block: 3.75rem; }
.panel-section--flush { padding-block: 0; }
.panel-section--flush-top { padding-top: 0; }
@media (max-width: 1023px) {
  .panel { gap: 2rem; padding: 2rem 1rem; }
  .panel__head { gap: 0.75rem; padding-bottom: 2.5rem; }
  .panel--feature { padding-bottom: 1rem; }
  .panel--feature .post-block { padding-block: 0; }
  .panel--roomy { gap: 3.75rem; padding-block: 2rem; --post-block-gap: 2rem; }
  .panel--bleed { padding-inline: 0; --inset: 1rem; }
  .panel-section, .panel-section--flush { padding-block: 1rem; }
  .panel-section--flush-top { padding-top: 0; }
}

/* ---------- Split card (media + text) ----------
   Media on the left by default. Background from a surface class.
   .split-card__actions is a free slot: a button, a form, anything.
   Options: --reverse (media on the right), --roomy (more padding and a media column as tall as
   the text, for a logo instead of a photo). */
.split-card { display: flex; align-items: center; gap: 8rem; padding: 1.25rem 3.75rem 1.25rem 1.25rem; border-radius: var(--radius-lg); overflow: hidden; color: var(--surface-ink-strong, var(--surface-ink, var(--ink))); } /* Figma: the CTA title is the strongest ink of the surface, the text the regular one */ /* 20 around the media, 128 to the text, 60 on the text side */
.split-card--reverse { flex-direction: row-reverse; padding: 1.25rem 1.25rem 1.25rem 3.75rem; }
.split-card__media { flex: none; width: 41.875rem; aspect-ratio: 1; border-radius: var(--radius-md); } /* 670 square */
.split-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3.75rem; flex: 1; max-width: 32.625rem; } /* 522 */
.split-card__text { display: flex; flex-direction: column; gap: 2.5rem; }
.split-card__desc { max-width: 25.8125rem; color: var(--surface-ink-soft, var(--ink-soft)); } /* 413 */
.split-card__desc p + p { margin-top: 1.875rem; }
.split-card__actions { width: 100%; }
.split-card--roomy { align-items: stretch; padding: 5rem 3.75rem 5rem 2.5rem; }
.split-card--roomy .split-card__media { display: grid; place-items: center; width: 40.625rem; aspect-ratio: auto; } /* 650 */
.split-card--roomy .split-card__media img { width: 26.285rem; aspect-ratio: 420.56 / 301.17; } /* 420.56 x 301.17; the ratio keeps the space while the image loads */
.split-card--roomy .split-card__body { justify-content: center; }
.split-card--roomy .split-card__desc { color: var(--ink-soft); } /* Figma: this card reads with the page soft ink (urano-400), the CTA cards with the surface one */
@media (max-width: 1023px) {
  .split-card, .split-card--reverse { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0.5rem 0; border-radius: var(--radius-md); }
  .split-card__media { width: 100%; border-radius: var(--radius-sm); }
  .split-card__body { gap: 1.5rem; max-width: none; padding: 1.5rem 1rem 2rem; }
  .split-card__text { gap: 1rem; }
  .split-card__desc { max-width: none; }
  .split-card__desc p + p { margin-top: 1.5rem; }
  .split-card--roomy { padding: 1rem; }
  .split-card--roomy .split-card__media { width: 100%; padding-block: 3.09375rem; } /* logo 158 in a 257 box */
  .split-card--roomy .split-card__media img { width: 13.8125rem; } /* 221 x 158 */
  .split-card--roomy .split-card__body { padding: 0; }
  .split-card--roomy .split-card__text { gap: 1.25rem; }
}

/* ---------- Closing blocks (split cards at the end of a page, or between sections with --inline) ---------- */
.cta-blocks { display: flex; flex-direction: column; gap: var(--gutter-wide); padding-block: 3.75rem; }
@media (max-width: 1023px) {
  .cta-blocks { padding-block: 5rem; }
  .cta-blocks--inline { padding-block: 1rem; }
}

/* ---------- Input and inline form (one input + button) ----------
   Colors through --input-bg, --input-line, --input-ink, --input-placeholder, --input-focus. */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.inline-form .form__status { width: 100%; }
.input {
  flex: 1; min-width: 0;
  padding: 0.75rem 1.5rem 0.75rem 1rem; /* 12 + 28 line = 52 high */
  border: 0; border-radius: var(--radius-sm);
  background: var(--input-bg, var(--color-mercurio-50));
  box-shadow: inset 0 0 0 2px var(--input-line, var(--color-mercurio-200));
  font-size: var(--body-size); line-height: 1.75rem;
  color: var(--input-ink, var(--color-urano-500));
  transition: box-shadow var(--ease-color);
}
.input::placeholder { color: var(--input-placeholder, var(--color-mercurio-800)); opacity: 1; }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--input-focus, var(--color-urano-500)); }
.input--area { min-height: 12.5rem; resize: vertical; } /* 200 */
@media (max-width: 1023px) {
  .inline-form { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .input { flex: none; }
}

/* ---------- Form ----------
   .field = label + control. Controls reuse .input; the form sets its colors through --input-*.
   .form__status is the message shown after a submit. */
.form {
  --input-bg: var(--color-sol-50); --input-line: var(--color-neutral-200); --input-ink: var(--color-neutral-900);
  --input-placeholder: var(--color-neutral-300); --input-focus: var(--color-neutral-900); --input-check: var(--color-sol-50);
  display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 39.375rem; margin-inline: auto; /* 630 */
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-wide); }
.form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
.form__status { color: var(--ink-soft); font-size: var(--caption-size); line-height: var(--caption-lh); }
.form__status:empty { display: none; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field__label { color: var(--ink-soft); }
.field .input { flex: none; width: 100%; }
/* Select: native control, the arrow is an overlay. */
.select { position: relative; }
.select .input { padding-right: 3.25rem; appearance: none; cursor: pointer; }
.select .input:invalid { color: var(--input-placeholder); }
.select .icon { position: absolute; top: 50%; right: 1rem; translate: 0 -50%; color: var(--input-placeholder); pointer-events: none; }
/* Checkbox: the tick is a mask, so it takes its color from --input-check. */
.check { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); cursor: pointer; }
.check input { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: 0; border-radius: 0.25rem; appearance: none; background: var(--input-bg); box-shadow: inset 0 0 0 2px var(--input-line); cursor: pointer; transition: background-color var(--ease-color), box-shadow var(--ease-color); }
.check input::before { content: ""; width: 1rem; aspect-ratio: 1; background: var(--input-check); opacity: 0; -webkit-mask: url("../img/check.svg") center / contain no-repeat; mask: url("../img/check.svg") center / contain no-repeat; }
.check input:checked { background: var(--input-focus); box-shadow: none; }
.check input:checked::before { opacity: 1; }
.check input:focus-visible { outline: 2px solid var(--input-focus); outline-offset: 2px; }
@media (max-width: 1023px) {
  .form { gap: 1rem; }
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .form__actions { flex-direction: column; align-items: flex-end; gap: 0.75rem; }
  .check { align-items: flex-start; }
}

/* ---------- Byline (name and role of a person) ---------- */
.byline { display: flex; flex-direction: column; gap: 0.25rem; }
.byline__name { font-size: var(--body-size); line-height: var(--body-lh); color: var(--ink); }
.byline__role { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); }

/* ---------- Testimonial ----------
   Option on the author: --row keeps avatar and byline side by side on mobile. */
.testimonial { display: flex; flex-direction: column; align-items: center; gap: 5rem; }
.testimonial__quote { display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
.testimonial__mark { width: 2.297875rem; height: 2rem; fill: var(--color-jupiter-500); } /* 36.766 x 32 */
.testimonial__author { display: flex; align-items: center; gap: 1.5rem; }
.testimonial__avatar { width: 5rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
@media (max-width: 1023px) {
  .testimonial { gap: 2.5rem; }
  .testimonial__quote { gap: 1.5rem; }
  .testimonial__mark { width: 1.75rem; height: 1.5rem; }
  .testimonial__author { flex-direction: column; gap: 0.75rem; text-align: center; }
  .testimonial__avatar { width: 4rem; }
  .testimonial__author--row { flex-direction: row; text-align: left; }
}

/* ---------- Client badge ---------- */
.client { display: flex; flex-direction: column; align-items: center; gap: 1.125rem; width: 7.5rem; } /* 120 */
.client__badge { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--soft); box-shadow: inset 0 0 0 2px var(--soft-line); }
.client__badge img { width: auto; height: 40%; max-width: none; } /* 48 of 120 */
.client__name { font-size: var(--tag-size); line-height: var(--tag-lh); color: var(--ink-soft); text-align: center; }
.theme-green .client__name { color: var(--ink); } /* the green pages use the full ink here */
@media (max-width: 1023px) {
  .client { gap: 0.964313rem; width: 6.428563rem; } /* 102.857 wide, gap 15.429 */
  .client__badge { box-shadow: inset 0 0 0 1.714px var(--soft-line); }
  .client__name { line-height: 1.178563rem; } /* 18.857 */
}

/* ---------- Brand symbol (mask, takes the text color) ---------- */
.symbol { display: block; flex: none; width: 4.0625rem; aspect-ratio: 65 / 56; background: currentColor; -webkit-mask: url("../logos/orbio-symbol.svg") center / 100% 100% no-repeat; mask: url("../logos/orbio-symbol.svg") center / 100% 100% no-repeat; } /* 65 x 56 */

/* ---------- Ticker ----------
   Infinite row: script.js duplicates the group so the -50% loop is seamless.
   Options: --reverse, --title (a page title separated by the brand symbol).
   With motion off the row stops and can be scrolled sideways, so nothing is cut off. */
.ticker { overflow: hidden; }
.ticker__track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker--reverse .ticker__track { animation-direction: reverse; animation-delay: -13s; }
.ticker__group { display: flex; flex: none; }
.ticker .client { flex: none; margin-right: 3.75rem; } /* 60 between badges */
.ticker--title { white-space: nowrap; }
.ticker--title .ticker__group { align-items: center; gap: 2rem; padding-right: 2rem; }
.ticker--title .ticker__track { animation-duration: 30s; }
.ticker--title .symbol { color: var(--accent); }
@keyframes ticker { to { transform: translateX(-50%); } }
.reduce-motion .ticker { overflow-x: auto; scrollbar-width: none; }
.reduce-motion .ticker::-webkit-scrollbar { display: none; }
.reduce-motion .ticker__track { animation: none; }
/* The title ticker repeats the page heading: with motion off it sits centered, as in the Figma frame. */
.reduce-motion .ticker--title { overflow: hidden; }
.reduce-motion .ticker--title .ticker__track { margin-left: 50%; translate: -50% 0; }
@media (max-width: 1023px) {
  .ticker .client { margin-right: 2rem; }
  .ticker--title .ticker__group { gap: 1rem; padding-right: 1rem; }
  .ticker--title .symbol { width: 2rem; }
}

/* ---------- Comparison table ----------
   One card per option. Rows line up across cards through subgrid, so their height follows
   the tallest text. Options: --compare-cols / --compare-rows (inline), --highlight column,
   __value--icon (a check or cross chip in front of the value).
   The label column is visual only; each cell carries its own row label, visually hidden on
   desktop and shown on mobile, where the cards stack. */
.compare { display: grid; grid-template-columns: 12.3125rem repeat(var(--compare-cols, 3), minmax(0, 1fr)); column-gap: 0.625rem; } /* labels 197, 10 between cards */
.compare__labels, .compare__col { display: grid; grid-row: span var(--compare-rows, 5); grid-template-rows: subgrid; }
.compare__labels { margin-right: 0.625rem; } /* 20 to the first card */
.compare__col { border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: rgba(240, 232, 213, 0.4); overflow: hidden; } /* neutral-100 at 40% */
.compare__head { display: flex; align-items: center; min-height: 7.5rem; padding: 1.75rem 2.5rem; border-bottom: 1px solid var(--line); background: var(--color-neutral-100); font-size: var(--h6-size); line-height: var(--h6-lh); } /* 120 high */
.compare__cell { min-height: 8.75rem; margin-inline: 1.25rem; padding: 1.25rem; border-top: 1px solid var(--line); font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--color-neutral-700); } /* 140 high */
.compare__head + .compare__cell { margin-top: 1.25rem; border-top: 0; }
.compare__cell:last-child { margin-bottom: 1.25rem; }
.compare__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.compare__labels .compare__head { background: none; }
.compare__labels .compare__cell { margin-inline: 0; padding-inline: 0; font-size: var(--tag-size); line-height: var(--tag-lh); color: var(--ink); }
.compare__col--highlight { --line: var(--color-mercurio-600); background: var(--color-mercurio-200); }
.compare__col--highlight .compare__head { background: var(--color-mercurio-400); color: var(--color-urano-500); }
.compare__col--highlight .compare__cell { color: var(--color-urano-500); }
.compare__value--icon { display: flex; align-items: flex-start; gap: 1.25rem; }
.compare__check { flex: none; padding: 0.375rem; border-radius: 0.25rem; background: var(--color-neutral-200); }
.compare__col--highlight .compare__check { background: var(--color-mercurio-500); }
.compare__check .icon { width: 1.5rem; height: 1.5rem; }
.compare__logo { width: 6.1875rem; } /* 99 */
@media (max-width: 1023px) {
  .compare { display: flex; flex-direction: column; gap: 0.75rem; }
  .compare__labels { display: none; }
  .compare__col { display: block; border-width: 2px; }
  .compare__head { min-height: 0; padding: 1.5rem; font-size: 1.25rem; line-height: 1.75rem; }
  .compare__cell, .compare__head + .compare__cell, .compare__cell:last-child { min-height: 0; margin: 0 1.5rem; padding: 1.5rem 0; }
  .compare__label { position: static; display: block; width: auto; height: auto; margin-bottom: 0.5rem; overflow: visible; clip-path: none; font-size: 0.75rem; line-height: 1.125rem; color: var(--ink); white-space: normal; }
  .compare__col--highlight .compare__label { color: var(--color-urano-500); }
  .compare__value--icon { align-items: center; gap: 0.75rem; }
  .compare__check { padding: 0.25rem; border-radius: 3.5px; }
  .compare__check .icon { width: 1rem; height: 1rem; }
}

/* ---------- Aside layout (sticky intro on the left, list on the right) ----------
   The intro is a .section-head.section-head--left.
   Options: --even (two 630 columns), --index (index on the left, long text on the right). */
.aside-layout { display: grid; grid-template-columns: 39.3125rem 32.625rem; justify-content: space-between; align-items: start; } /* 629 + 522 */
.aside-layout__aside { position: sticky; top: 2.5rem; }
.aside-layout__list { display: flex; flex-direction: column; gap: 1rem; }
.aside-layout--even { grid-template-columns: repeat(2, minmax(0, 39.375rem)); } /* 630 + 630 */
.aside-layout--even .aside-layout__list { gap: 0.625rem; }
.aside-layout--index { grid-template-columns: 25.8125rem minmax(0, 52.9375rem); gap: var(--gutter-wide); justify-content: start; } /* 413 + 847 */
@media (max-width: 1023px) {
  .aside-layout { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .aside-layout__aside { position: static; padding-inline: 1rem; }
  .aside-layout__list { gap: 0.5rem; }
  .aside-layout--even { gap: 2rem; }
  .aside-layout--even .aside-layout__list { gap: 0.25rem; }
  .aside-layout--index { gap: 0; }
}

/* ---------- Step card ----------
   Colors through --step-bg, --step-line, --step-title, --step-desc. Option: --green
   (the stroke takes layout space in this variant, as in its Figma frame). */
.step-card { display: flex; flex-direction: column; gap: 1.875rem; padding: 1.875rem; border-radius: var(--radius-md); background: var(--step-bg, var(--color-neutral-900)); box-shadow: inset 0 0 0 1px var(--step-line, var(--color-sol-600)); } /* 30 */
.step-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.step-card__title { color: var(--step-title, var(--color-sol-50)); }
.step-card__desc { color: var(--step-desc, var(--color-neutral-300)); }
.step-card--green { --step-bg: var(--color-urano-500); --step-line: var(--color-mercurio-300); --step-title: var(--color-urano-50); --step-desc: var(--color-urano-200); border: 1px solid var(--step-line); border-radius: var(--radius-lg); box-shadow: none; }
.step-card--green .step-card__title { max-width: 25rem; }    /* 400 */
.step-card--green .step-card__desc { max-width: 31.25rem; }  /* 500 */
@media (max-width: 1023px) {
  .step-card { gap: 1rem; padding: 1.5rem; }
  .step-card__head { gap: 0.25rem; }
}

/* ---------- Stats ----------
   Colors through --stat-bg, --stat-value, --stat-label.
   Options: --sm (tighter, inside text columns), --brown. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter-wide); }
.stat { display: flex; flex-direction: column; gap: 1.25rem; padding: 3.75rem; border-radius: var(--radius-lg); background: var(--stat-bg, var(--color-mercurio-500)); }
.stat__value { color: var(--stat-value, var(--color-urano-900)); }
.stat__label { color: var(--stat-label, var(--color-urano-500)); }
.stats--sm { gap: 0.625rem; }
.stats--sm .stat { padding: 2.5rem; }
.stats--brown { --stat-bg: var(--color-neutral-900); --stat-value: var(--color-neutral-50); --stat-label: var(--color-neutral-50); }
@media (max-width: 1023px) {
  .stats { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .stats--sm { gap: 0.25rem; }
  .stat, .stats--sm .stat { gap: 0.75rem; padding: 1.5rem; }
}

/* ---------- Profile (intro on the left, portrait on the right) ----------
   Mobile: use with .container--snug. The photo runs almost edge to edge, the text keeps the gutter. */
.profile { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.5rem; }
.profile__intro { display: flex; flex-direction: column; gap: 3.75rem; max-width: 39.375rem; } /* 630 */
.profile__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.profile__desc { max-width: 25.8125rem; color: var(--ink-soft); } /* 413 */
.profile__person { display: flex; flex-direction: column; gap: 1.875rem; flex: none; width: 19.0625rem; } /* 305 */
.profile__photo { aspect-ratio: 3 / 4; border-radius: var(--radius-md); }
@media (max-width: 1023px) {
  .profile { flex-direction: column; gap: 2rem; }
  .profile__intro { gap: 2rem; padding-inline: 1rem; }
  .profile__heading { gap: 0.75rem; }
  .profile__person { gap: 1rem; width: 100%; }
  .profile__photo { aspect-ratio: 3 / 4; }
  .profile__person .byline { padding-inline: 1rem; }
}

/* ---------- FAQ (accordion) ----------
   Each answer is a .collapse opened by script.js. */
.faq { display: flex; flex-direction: column; align-items: center; gap: 3.75rem; }
.faq__head { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.faq__list { display: flex; flex-direction: column; gap: 0.625rem; width: 52.875rem; max-width: 100%; } /* 846 */
.faq__item { border: 1px solid var(--color-mercurio-300); border-radius: var(--radius-lg); background: var(--color-urano-500); }
.faq__question { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 1.875rem; font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-urano-50); text-align: left; }
/* Toggle: a plus that turns into a cross. */
.faq__toggle { flex: none; display: grid; place-items: center; padding: 0.375rem; border-radius: 0.5rem; background: var(--color-mercurio-500); color: var(--color-urano-500); }
.faq__toggle .icon { transition: transform 0.4s ease; }
.faq__question[aria-expanded="true"] .faq__toggle .icon { transform: rotate(45deg); }
.faq__answer p { max-width: 41.25rem; padding: 0 1.875rem 1.875rem; color: var(--color-urano-200); } /* 600 + 2 x 30 */
.reduce-motion .faq__toggle .icon { transition: none; }
@media (max-width: 1023px) {
  .faq { gap: 2rem; }
  .faq__head { gap: 0.75rem; padding-inline: 1rem; }
  .faq__list { gap: 0.25rem; }
  .faq__question { padding: 1.5rem; }
  .faq__answer p { padding: 0 5rem 1.5rem 1.5rem; } /* same column as the question */
}

/* ---------- Info bar ----------
   A box of facts (icon chip + label + value). Fixed at the bottom of detail pages by default;
   --inline keeps it in the page flow. Colors come from the theme (--soft, --softer, --accent).
   Desktop: always open. Mobile: a floating bar whose items (a .collapse.collapse--mobile)
   open upward on tap. [data-away] (set while the footer is on screen) slides it out.
   Options: __head--mobile (head shown only on mobile), __item--icons (only icon buttons),
   __icon--dark (button chip). */
.infobar { position: fixed; z-index: 40; left: 50%; bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; width: max-content; max-width: calc(100% - 2 * var(--gutter-wide)); padding-block: 0.5rem; border-radius: var(--radius-sm); background: var(--soft); color: var(--ink); translate: -50% 0; overflow: hidden; transition: translate 0.5s var(--spring), opacity var(--ease-color); }
.infobar[data-away] { translate: -50% calc(100% + 1.25rem); opacity: 0; pointer-events: none; }
.infobar--inline { position: static; z-index: auto; translate: none; text-align: left; }
.infobar__head--mobile { display: none; }
.infobar .ticker { width: 0; min-width: 100%; } /* the title never widens the bar */
.infobar .ticker__group { gap: 1rem; padding-right: 1rem; font-size: var(--h6-size); line-height: var(--h6-lh); }
.infobar .symbol { width: 1.125rem; color: var(--color-mercurio-700); } /* 18 x 16 */
.infobar__items { display: flex; gap: 0.5rem; padding-inline: 0.5rem; }
.infobar__item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem 0.75rem 0.75rem; border-radius: 0.5rem; background: var(--softer); white-space: nowrap; }
.infobar__item--icons { padding: 0.75rem; }
.infobar__icon { display: grid; place-items: center; padding: 0.75rem; border-radius: 0.25rem; background: var(--soft); }
.infobar__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.infobar__icon--dark { background: var(--btn-bg); color: var(--accent); transition: background-color var(--ease-color); }
a.infobar__icon--dark:hover, button.infobar__icon--dark:hover { background: var(--btn-bg-hover); }
.infobar__avatar { width: 3rem; aspect-ratio: 1; border-radius: 50%; }
.infobar__share { display: flex; gap: 0.375rem; }
.infobar__label { display: block; font-size: var(--tag-size); line-height: var(--tag-lh); color: var(--ink-faint); }
.infobar__value { display: block; font-size: var(--caption-size); line-height: var(--caption-lh); }
.infobar__toggle { display: none; }
.reduce-motion .infobar { transition: none; }
@media (max-width: 1023px) {
  /* Figma "Infos Fixed Mobile": 310 x 66 at 390, 24 from the bottom; 4 of padding around a
     title pill (ticker, 20/28, symbol 15 wide) and a 58 wide accent toggle with a 16 chevron. */
  .infobar { left: 2.5rem; right: 2.5rem; bottom: 1.5rem; flex-direction: column-reverse; gap: 0.25rem; width: auto; max-width: none; padding: 0.25rem; border-radius: 0.75rem; translate: none; }
  .infobar[data-away] { translate: 0 calc(100% + 1.5rem); }
  .infobar__head, .infobar__head--mobile { display: flex; align-items: stretch; gap: 0.25rem; padding-inline: 0; }
  .infobar__head .ticker { flex: 1; display: flex; align-items: center; width: auto; min-width: 0; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 0.5rem; background: var(--softer); }
  .infobar .ticker__group { gap: 0.75rem; padding-right: 0.75rem; font-size: var(--h6-size); line-height: var(--h6-lh); }
  .infobar .symbol { width: 0.9375rem; } /* 15 x 13 */
  .infobar__toggle { display: grid; place-items: center; width: 3.625rem; border-radius: 0.5rem; background: var(--accent); color: var(--ink); transition: rotate 0.4s ease; }
  .infobar__toggle .icon { width: 1rem; height: 1rem; }
  /* Article bars show the author in the head (Figma type "Artigo"): avatar 42 and two lines. */
  .infobar__author { flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 0.5rem; background: var(--softer); }
  .infobar__author .infobar__avatar { width: 2.625rem; }
  .infobar__author .infobar__label { color: var(--color-urano-300); }
  .infobar__toggle[aria-expanded="true"] { rotate: 180deg; }
  .infobar__items { flex-direction: column; gap: 0.25rem; padding-inline: 0; }
  .infobar__item { white-space: normal; }
  .infobar--inline { flex-direction: column; width: 100%; padding-block: 0.25rem; }
  .infobar--inline .infobar__items { flex-direction: row; gap: 0.25rem; padding-inline: 0.25rem; }
  .infobar--inline .infobar__item { gap: 0.5rem; padding: 0.5rem; white-space: nowrap; }
  .infobar--inline .infobar__item:first-child { flex: 1; }
  .infobar--inline .infobar__icon { padding: 0.5625rem; } /* 42 square */
  .infobar--inline .infobar__share { gap: 0.25rem; }
}

/* ---------- Index (table of contents) ----------
   Desktop: a list that stays on screen next to the text (script.js marks the section in view).
   Mobile: a floating bar with the current section; the list (a .collapse.collapse--mobile)
   opens upward on tap. */
.index { position: sticky; top: 2.5rem; }
.index__toggle { display: none; }
.index__list { display: flex; flex-direction: column; gap: 0.75rem; }
.index__list a, .index__current { display: flex; gap: 1.25rem; color: var(--ink-muted); transition: color var(--ease-color); }
.index__list a > span, .index__current > span { flex: none; width: 2.5rem; } /* number column: 40 */
.index__list a:hover, .index__list a[aria-current] { color: var(--ink); }
.reduce-motion .index { transition: none; }
@media (max-width: 1023px) {
  /* Figma: 310 x 66 at 390, 24 from the bottom. */
  /* Figma "Infos Fixed Mobile": 4 of padding, a pill with the current entry and a 58 square toggle. */
  .index { position: fixed; z-index: 40; top: auto; left: 2.5rem; right: 2.5rem; bottom: 1.5rem; display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 0.25rem; border-radius: var(--radius-sm); background: var(--soft); transition: translate 0.5s var(--spring), opacity var(--ease-color); }
  .index[data-away] { translate: 0 calc(100% + 1.5rem); opacity: 0; pointer-events: none; }
  .index__toggle { display: flex; align-items: stretch; gap: 0.25rem; width: 100%; padding: 0; } /* 50 high */
  .index__toggle .icon { box-sizing: content-box; flex: none; width: 1rem; height: 1rem; padding: 1.3125rem; border-radius: 0.5rem; background: var(--accent); color: var(--ink); transition: rotate 0.4s ease; } /* 58 square */
  .index__toggle[aria-expanded="true"] .icon { rotate: 180deg; }
  .index__current { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--softer); color: var(--ink); font-size: var(--body-size); line-height: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .index__current, .index__list a { gap: 0.75rem; }
  .index__current > span, .index__list a > span { width: 2rem; }
  .index__list { max-height: 60vh; overflow: hidden auto; gap: 0; }
  .index__list a { padding: 0.5rem 1rem; }
  .index[data-open] .index__list { padding-block: 0.25rem; }
}

/* ---------- Article body ---------- */
.article { padding-block: 7.5rem; } /* 120 */
@media (max-width: 1023px) {
  .article { padding-block: 1.875rem; } /* 30 */
}

/* ---------- Prose (rich text of articles, cases and legal pages) ----------
   Styles plain elements, so CMS content needs no classes: h2, p, ul, ol, blockquote, figure,
   plus the .callout box and .stats.
   Spacing: blocks --prose-block apart, paragraphs --prose-para, a heading and its text (or a
   paragraph and its list) --prose-tight. Box colors: --box-bg, --box-line, --box-mark.
   Options: --compact (paragraphs as close as a heading and its text), --numbered (each h2
   gets its number from a counter, in a 40 column like the index; legal pages).
   Mobile: use inside .container--snug. Boxes and images run almost edge to edge, text keeps the gutter. */
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) {
  --prose-block: 3.75rem; --prose-para: 1.875rem; --prose-tight: 1.25rem; /* 60 / 30 / 20 */
  --box-bg: var(--color-mercurio-200); --box-line: var(--color-mercurio-300); --box-mark: var(--color-mercurio-600);
  width: 100%; max-width: 52.875rem; margin-inline: auto; color: var(--ink-muted); /* 846 wide */
}
.theme-yellow :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) { --box-bg: var(--color-neutral-100); --box-line: var(--color-neutral-200); --box-mark: var(--color-neutral-500); color: var(--ink-soft); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container).prose--compact { --prose-para: var(--prose-tight); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > * + * { margin-top: var(--prose-para); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > * + :is(h2, blockquote, figure, .callout, .stats), :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > :is(blockquote, figure, .callout, .stats) + * { margin-top: var(--prose-block); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > h2 + *, :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > p + ul, :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > p + ol { margin-top: var(--prose-tight); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) h2 { max-width: 46.875rem; font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--ink); } /* 750 */
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) strong { font-weight: 700; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-position: from-font; }
/* Only lists without a class are text lists. Markers are decoration: a dot or a bold number centered in a 28 box. */
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ul, ol):is(:not([class]), .wp-block-list) { display: flex; flex-direction: column; gap: 0.625rem; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ul, ol):is(:not([class]), .wp-block-list) > li { position: relative; padding-left: 2.375rem; } /* 28 marker + 10 */
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ul:not([class]), ul.wp-block-list) > li::before { content: ""; position: absolute; left: 0.625rem; top: 0.625rem; width: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ol:not([class]), ol.wp-block-list) { counter-reset: item; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ol:not([class]), ol.wp-block-list) > li::before { counter-increment: item; content: counter(item) "."; position: absolute; left: 0; width: 1.75rem; font-weight: 700; text-align: center; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) figure { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
/* Quote and callout share the box. */
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote, .callout { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 2.5rem; border: 2px solid var(--box-line, var(--color-mercurio-300)); border-radius: var(--radius-lg); background: var(--box-bg, var(--color-mercurio-200)); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote::before { content: ""; width: 1.75rem; aspect-ratio: 28 / 24; background: var(--box-mark); -webkit-mask: url("../img/quote-mark.svg") center / contain no-repeat; mask: url("../img/quote-mark.svg") center / contain no-repeat; }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote p { font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--ink); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote cite { font-size: var(--caption-size); line-height: var(--caption-lh); font-style: normal; color: var(--ink-soft); }
:is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote > :is(cite, footer) { margin-top: 1.25rem; } /* 40 after the quote */
.callout__icon { display: grid; place-items: center; padding: 0.75rem; border-radius: 0.25rem; background: var(--accent); color: var(--ink); }
.callout__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.callout__title { font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--ink); }
.callout__text { color: var(--ink-soft); }
.prose--numbered { counter-reset: section; }
.prose--numbered h2 { display: flex; gap: 1.25rem; max-width: none; font-size: var(--h5-size); line-height: var(--h5-lh); counter-increment: section; }
.prose--numbered h2::before { content: counter(section, decimal-leading-zero); flex: none; width: 2.5rem; }
.prose--numbered p { max-width: 50rem; } /* 800 */
.prose__note { color: var(--ink); }
@media (max-width: 1023px) {
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) { --prose-block: 2rem; --prose-para: 1.5rem; --prose-tight: 0.75rem; } /* 32 / 24 / 12 */
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) > :is(p, h2, h3, ul:not([class]), ol:not([class]), .wp-block-list) { padding-inline: 1rem; }
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) :is(ul, ol):is(:not([class]), .wp-block-list) { gap: 0.25rem; }
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) figure { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote, .callout { padding: 1.5rem; border-radius: var(--radius-md); }
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote { gap: 0.75rem; }
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote > cite { margin-top: 0.75rem; }   /* 24 after the quote */
  :is(.prose, .editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container) blockquote > footer { margin-top: 0.5rem; }  /* 20 */
  .prose--numbered h2 { gap: 0.75rem; }
}


/* Editor canvas of articles and cases: the article column. */
.editor-styles-wrapper.post-type-post .is-root-container, .editor-styles-wrapper.post-type-case .is-root-container { max-width: var(--content); margin-inline: auto; padding: 4rem var(--gutter); }
.editor-styles-wrapper.post-type-case .is-root-container { --prose-para: var(--prose-tight); }

/* ---------- Pagination ----------
   Colors from the theme. Options: __item--arrow, __item--desktop (hidden on mobile),
   --end (120 after it, when nothing follows on the page body). */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; padding-block: 7.5rem 3.75rem; }
.pagination--end { padding-bottom: 7.5rem; }
.pagination__item { display: grid; place-items: center; min-width: 3.25rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--soft); color: var(--ink); font-size: var(--body-size); line-height: 1.75rem; transition: background-color var(--ease-color), color var(--ease-color); }
.pagination__item:hover { background: var(--soft-line); }
.pagination__item[aria-current] { background: var(--btn-bg); color: var(--accent); }
.pagination__item--arrow, .pagination__item--arrow:hover { background: none; }
@media (max-width: 1023px) {
  /* 4 between items, numbers 48 high, arrows 52; 80 after the list, 30 below. */
  .pagination, .pagination--end { align-items: center; gap: 0.25rem; padding-block: 5rem 1.875rem; }
  .pagination__item { padding-block: 0.625rem; }
  .pagination__item--arrow { padding-block: 1rem; }
  .pagination__item--desktop { display: none; }
}

/* ---------- Cookie notice ----------
   Fixed plate at the bottom left (full width on mobile), on the floating-bar anatomy: soft
   surface, 12 radius, text + two buttons. The script shows it until a choice is stored and
   sets --cookie-h on the root so the floating bars sit above it while it is open. */
.cookie { position: fixed; z-index: 45; left: var(--gutter-wide); bottom: 1.25rem; display: flex; flex-direction: column; gap: 1rem; width: 25.8125rem; padding: 1.25rem; border-radius: var(--radius-sm); background: var(--soft); color: var(--ink); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.08); } /* 413 */
.cookie[hidden] { display: none; }
.cookie__text { margin: 0; font-size: var(--caption-size); line-height: var(--caption-lh); }
.cookie__text a { text-decoration: underline; text-underline-position: from-font; }
.cookie__actions { display: flex; gap: 0.5rem; }
.cookie__actions .btn { flex: 1; }
.infobar { bottom: calc(1.25rem + var(--cookie-h, 0px)); } /* the desktop index is sticky, not fixed */
@media (max-width: 1023px) {
  .cookie { left: 1rem; right: 1rem; bottom: 1rem; width: auto; padding: 1rem; }
  .infobar, .index { bottom: calc(1.5rem + var(--cookie-h, 0px)); }
}

/* ---------- Filter chips ----------
   Option: --scroll (mobile: one row that scrolls sideways, from edge to edge). */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
.chip { padding: 0.5rem 1rem; border-radius: var(--radius-pill); background: var(--line); color: var(--ink); font-size: var(--caption-size); line-height: var(--caption-lh); white-space: nowrap; transition: background-color var(--ease-color), color var(--ease-color); }
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.filter-empty { padding-block: 2.5rem; text-align: center; color: var(--ink-soft); }
@media (max-width: 1023px) {
  .chips--scroll { align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; gap: 0.25rem; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .chip { font-size: var(--body-size); line-height: var(--body-lh); } /* Figma keeps 16/24 on mobile */
  .chips--scroll .chip:focus-visible { outline-offset: -2px; } /* the scroller would clip an outer ring */
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll > li { flex: none; }
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { position: relative; display: flex; flex-direction: column; gap: 10rem; padding-block: 2.5rem; background: var(--page-bg); overflow: hidden; }
.site-footer .glow { top: 35.4375rem; width: 164.5rem; aspect-ratio: 2632 / 2031; } /* top 567 */
.site-footer__top { position: relative; display: flex; justify-content: space-between; }
.site-footer__brand { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; max-width: 20.3125rem; } /* 325 */
.site-footer__brand-top { display: flex; flex-direction: column; gap: 3.75rem; }
.site-footer__logo { width: 14.859813rem; } /* 237.757 */
.site-footer__about, .footer-col__links, .site-footer__bottom { color: var(--footer-soft, var(--ink-soft)); }
.theme-green .site-footer { --footer-soft: var(--color-urano-300); }
.site-footer__social { display: flex; gap: 0.5rem; }
.social-btn { display: flex; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); transition: background-color var(--ease-color); }
.social-btn:hover { background: var(--btn-bg-hover); }
.social-btn .icon { width: 1.875rem; height: 1.875rem; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem 1.25rem; width: 39.375rem; } /* 630 */
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.375rem; } /* gap 22 */
.footer-col__title { font-size: var(--body-size); line-height: var(--body-lh); }
.footer-col__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; font-size: var(--caption-size); line-height: var(--caption-lh); }
.site-footer__bottom { position: relative; display: flex; flex-direction: column; gap: 2.5rem; font-size: var(--caption-size); line-height: var(--caption-lh); }
/* Legal links line up with the nav columns above. */
.site-footer__legal-row { display: grid; grid-template-columns: 1fr 39.375rem; white-space: nowrap; }
.site-footer__legal-links { display: flex; gap: 1.25rem; }
.site-footer__legal-links a { text-decoration: underline; text-underline-position: from-font; }
.site-footer__watermark { aspect-ratio: 2026.3277587890625 / 409.0892028808594; background: var(--page-bg); -webkit-mask: url("../logos/orbio-watermark.svg") center / 100% 100% no-repeat; mask: url("../logos/orbio-watermark.svg") center / 100% 100% no-repeat; }
@media (max-width: 1023px) {
  .site-footer { gap: 3rem; padding-block: 5rem 1.5rem; --gutter: 1rem; } /* footer uses a 16 gutter */
  .site-footer .glow { top: auto; bottom: -34.125rem; width: calc(100% + 31.875rem); aspect-ratio: auto; height: 43.4375rem; } /* 255 past each side, 695 high, 546 below */
  .site-footer__top { flex-direction: column; gap: 3rem; }
  .site-footer__brand { max-width: none; gap: 3rem; }
  .site-footer__brand-top { gap: 1.5rem; }
  .site-footer__logo { width: 10rem; }
  .social-btn { padding: 0.4375rem; } /* 30 icon + 7 = 44 */
  .site-footer__nav { display: flex; flex-direction: column; gap: 2rem; width: auto; }
  .footer-col { gap: 0.75rem; }
  .site-footer__bottom { gap: 3rem; }
  .site-footer__legal-row, .site-footer__legal-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .site-footer__watermark { aspect-ratio: 358 / 72; }
}


/* =====================================================================
   Page-specific sections (pages.css)
   ===================================================================== */

/* =====================================================================
   Home
   ===================================================================== */

/* The statement after the hero sits 320 below the hero media on desktop (Figma: 160 + 160). */
@media (min-width: 1024px) {
  .section--after-hero { padding-top: calc(2 * var(--section-y)); }
}

/* ---------- Clients orbit (3328:14423) ----------
   Animation stage: the logos are absolutely placed at their Figma coordinates, as percentages
   of the 1280 x 900 stage, and script.js moves them along the ring. The stage is fluid, so the
   ring keeps its proportions at every width. Mobile shows tickers instead. */
.clients__stage { position: relative; display: grid; place-items: center; width: 100%; max-width: var(--content); aspect-ratio: 1280 / 900; margin-inline: auto; }
.clients__title { text-align: center; }
.clients__line { display: block; }
.clients__line:not(:first-child) { display: none; } /* extra lines only rotate in the pinned mode */
/* The logo layer covers the stage, so the title stays alone in the grid and centered. */
.clients__orbit { position: absolute; inset: 0; }
.clients__orbit .client { position: absolute; left: var(--x); top: var(--y); width: 9.375%; will-change: transform; } /* 120 of 1280 */
.clients .ticker { display: none; }
/* Pinned mode (enabled by script.js): the section becomes a tall scroll track with a sticky stage. */
.clients.is-pinned { height: calc(100vh + var(--pin-distance, 120vh)); padding-block: 0; }
.clients.is-pinned .clients__pin { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; overflow: hidden; }
.clients.is-pinned .clients__stage { transform: translateY(var(--shift, 0)) scale(var(--fit, 1)); } /* fitted to the viewport height by script.js */
/* Lines swap in place, kept inside the ring (800 wide). */
.clients.is-pinned .clients__title { display: grid; place-items: center; width: 50rem; }
.clients.is-pinned .clients__line { display: block; grid-area: 1 / 1; opacity: 0; translate: 0 0.6em; transition: opacity 0.6s ease, translate var(--spring-time) var(--spring); }
.clients.is-pinned .clients__line.is-past { translate: 0 -0.6em; }
.clients.is-pinned .clients__line.is-active { opacity: 1; translate: none; }
@media (max-width: 1023px) {
  .clients__stage { width: auto; aspect-ratio: auto; padding: 7.5rem var(--gutter); } /* 120 above and below the title */
  .clients__orbit { display: none; }
  .clients .ticker { display: block; }
}

/* ---------- Services (3328:14461) ---------- */
.services { display: flex; flex-direction: column; gap: 5rem; }
/* Stacking: each card sticks, so the next one slides over it. */
.service-card { position: sticky; top: max(1.25rem, calc((100vh - 43.5rem) / 2)); display: flex; flex-direction: column; gap: 10rem; padding: 3.75rem; border-radius: var(--radius-lg); overflow: hidden; color: var(--surface-ink); } /* 60 padding, 160 under the title */
.service-card__symbol { position: absolute; left: calc(50% + 27.125rem); top: calc(50% + 11.625rem); width: 39.125rem; max-width: none; translate: -50% -50%; pointer-events: none; } /* decorative, 626 wide at +434, +186 */
.service-card__title { position: relative; }
/* Text on the left (description on top, button at the bottom), media on the right. */
.service-card__body { position: relative; display: grid; grid-template-columns: minmax(0, 25.8125rem) minmax(0, 25.8125rem); grid-template-rows: 1fr auto; grid-template-areas: "desc media" "action media"; justify-content: space-between; } /* 2 x 413 */
.service-card__desc { grid-area: desc; color: var(--surface-ink-soft); }
.service-card__action { grid-area: action; align-self: end; justify-self: start; }
.service-card__media { grid-area: media; aspect-ratio: 413 / 310; border-radius: var(--radius-md); }
@media (max-width: 1023px) {
  .services { gap: 2.5rem; }
  .service-card { position: relative; top: auto; gap: 5rem; padding: 1rem; }
  .service-card__symbol { left: calc(50% + 7.226875rem); top: auto; bottom: -1.4875rem; width: 10.453938rem; translate: -50% 0; } /* 167.263 wide at +115.63, 23.8 below the edge */
  .service-card__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "desc" "action" "media"; gap: 2rem; }
  .service-card__media { aspect-ratio: 342 / 232; }
}

/* =====================================================================
   Sobre
   ===================================================================== */

/* Dark section options used on this page. */
.dark-section--deep { --dark-pb: 25rem; }   /* 400 below the content */
.dark-section--timeline { gap: 5rem; }     /* 80 between the head and the timeline */
@media (max-width: 1023px) {
  .dark-section--timeline { gap: 2.5rem; }
}

/* ---------- Four dimensions ring (3328:15829 / 3328:20655) ----------
   Animation stage: a square with the numbered steps placed on its circle by angle and a
   panel of text in the middle. script.js turns the ring with the scroll (desktop) and
   switches the active step; the steps are also buttons. */
.ring-scroll { position: relative; width: 100%; }
.ring { position: relative; display: grid; place-items: center; width: var(--content-narrow); max-width: 100%; aspect-ratio: 1; margin-inline: auto; container-type: inline-size; background: url("../img/ring.svg") center / 100% 100% no-repeat; } /* 1064 */
.ring__steps { position: absolute; inset: 0; }
/* Each step sits on the circle at --angle (0deg = right, clockwise) plus the ring's --turn. */
.ring__step {
  position: absolute; left: 50%; top: 50%;
  display: grid; place-items: center;
  width: 7.5rem; aspect-ratio: 1; /* 120 */
  margin: -3.75rem 0 0 -3.75rem;
  border-radius: 50%;
  background: var(--color-mercurio-100);
  color: var(--color-urano-200);
  font-size: var(--h3-size); line-height: 1;
  transform: rotate(calc(var(--angle) + var(--turn, 0deg))) translateX(50cqw) rotate(calc(-1 * (var(--angle) + var(--turn, 0deg)))); /* the steps sit on the ring edge whatever its size */
  transition: background-color var(--ease-color), color var(--ease-color);
}
.ring__step.is-active { background: var(--color-mercurio-500); color: var(--color-urano-500); }
.ring__panels { display: grid; width: 39.375rem; max-width: 60%; text-align: center; } /* 630 */
.ring__panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; opacity: 0; visibility: hidden; transition: opacity var(--ease-color), visibility 0s 0.4s; }
.ring__panel.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.ring__desc { max-width: 25.875rem; color: var(--color-mercurio-200); } /* 414 */
/* Pinned mode (desktop): tall scroll track, sticky stage fitted to the viewport height. */
.ring-scroll.is-pinned { height: calc(100vh + var(--pin-distance, 200vh)); }
.ring-scroll.is-pinned .ring-scroll__pin { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; }
/* Scaled to fit; the negative margin gives the scaled size back to the layout so it stays centered. */
.ring-scroll.is-pinned .ring { transform: scale(var(--fit, 1)); margin-block: calc((var(--fit, 1) - 1) * var(--content-narrow) / 2); }
@media (max-width: 1023px) {
  .ring { width: 21.375rem; } /* 342 */
  .ring__step { width: 18.71cqw; margin: -9.355cqw 0 0 -9.355cqw; font-size: min(var(--h3-size), 8.77cqw); line-height: 1.1; transform: rotate(var(--angle)) translateX(50cqw) rotate(calc(-1 * var(--angle))); } /* 64 badge and 30 digit on the 342 ring; everything inside the ring scales with it */
  .ring__panels { width: 63.16cqw; max-width: none; } /* 216 of the 342 ring */
  .ring__panel { gap: min(1.25rem, 5.85cqw); }
  /* Below the 342 ring (320 screens) the text scales with the ring too, like the desktop fit. */
  .ring__panel .h3 { font-size: min(var(--h3-size), 8.77cqw); }
  .ring__desc { font-size: min(var(--body-size), 4.68cqw); line-height: 1.5; }
}

/* ---------- Timeline (3328:15954 / 3328:20782) ----------
   Year on the left, text on the right, a line in the middle that fills with the scroll
   (--progress, set by script.js). Reached years light up; the current item shows its text. */
.timeline { position: relative; display: flex; flex-direction: column; gap: 12.5rem; padding-block: 7.5rem; } /* 200 between items, 120 around */
.timeline__item { display: grid; grid-template-columns: minmax(0, 1fr) 12.25rem minmax(0, 1fr); column-gap: 1.25rem; align-items: center; } /* 196 for the line */
.timeline__year { text-align: right; color: var(--color-urano-50); opacity: 0.2; transition: color var(--ease-color), opacity var(--ease-color); }
.timeline__text { grid-column: 3; display: flex; flex-direction: column; gap: 1.25rem; max-width: 25rem; opacity: 0; transition: opacity var(--ease-color); } /* 400 */
.timeline__title { color: var(--color-mercurio-50); }
.timeline__desc { color: var(--color-urano-200); }
.timeline__item.is-reached .timeline__year { color: var(--color-mercurio-500); opacity: 1; }
.timeline__item.is-current .timeline__text { opacity: 1; }
/* The line is a decorative layer over the middle column. The dot is sticky at the middle of
   the viewport, so it reads as standing still while the page moves under it; it rests on the
   first item (--start, measured by script.js) and stops at the end of the line. The fill hangs
   from the dot (its ::before reaches up the whole line, --line-h) so the browser moves both in
   the same frame; the clip-path trims the fill at the top of the line and leaves the dot whole. */
.timeline__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: rgba(236, 237, 236, 0.2); clip-path: inset(0 -0.5rem); } /* urano-50 at 20% */
.timeline__dot { position: sticky; top: calc(50vh - 0.5rem); display: block; width: 1rem; aspect-ratio: 1; margin: calc(var(--start, 0px) - 0.5rem) 0 0 -0.375rem; border-radius: 50%; background: var(--color-mercurio-500); }
.timeline__dot::before { content: ""; position: absolute; left: 50%; bottom: 50%; width: 4px; height: var(--line-h, 100vh); margin-left: -2px; background: var(--color-mercurio-500); }
/* Without motion every item is readable. */
.reduce-motion .timeline__text { opacity: 1; }
.reduce-motion .timeline__year { color: var(--color-mercurio-500); opacity: 1; }
@media (max-width: 1023px) {
  .timeline { gap: 6.25rem; padding-block: 3.75rem 0; padding-left: 2.25rem; } /* 100 between items, 36 for the spine */
  .timeline__item { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; opacity: 0.2; transition: opacity var(--ease-color); }
  .timeline__item.is-current, .reduce-motion .timeline__item { opacity: 1; }
  .timeline__year { text-align: left; opacity: 1; }
  .timeline__text { gap: 0.75rem; max-width: none; opacity: 1; }
  .timeline__title { font-size: 1.25rem; line-height: 1.75rem; }
  .timeline__line { left: 0.625rem; } /* centered in the 20 spine */
}

/* ---------- Founder (3328:15999 / 3328:20822) ---------- */
.founder { display: flex; flex-direction: column; gap: 7.5rem; }
.bio { display: flex; justify-content: space-between; width: 52.875rem; max-width: 100%; margin-inline: auto; } /* 846 */
.bio__photo { flex: none; width: 19.0625rem; aspect-ratio: 305 / 407; border-radius: var(--radius-md); }
.bio__info { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; width: 25.8125rem; } /* 413 */
.bio__text { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); }
@media (max-width: 1023px) {
  .founder { gap: 3.75rem; }
  .bio { flex-direction: column; gap: 2rem; width: auto; }
  .bio__photo { width: 100%; aspect-ratio: 374 / 499; }
  .bio__info { gap: 1rem; width: auto; padding-inline: 1rem; }
  .bio .byline { gap: 0; } /* name and role touch on mobile */
}

/* ---------- Listing page changes (numbered pagination, in place) ----------
   While the next page loads, the list fades and the Orbio symbol spins over it. */
.listing-wrap { position: relative; }
.listing-wrap.is-loading [data-listing] { opacity: 0.35; pointer-events: none; transition: opacity var(--ease-color); }
.listing-wrap.is-loading::after { content: ""; position: absolute; left: 50%; top: 12rem; width: 3.5rem; aspect-ratio: 65 / 56; margin-left: -1.75rem; background: var(--accent); -webkit-mask: url("../logos/orbio-symbol.svg") center / 100% 100% no-repeat; mask: url("../logos/orbio-symbol.svg") center / 100% 100% no-repeat; animation: listing-spin 1.1s linear infinite; }
.reduce-motion .listing-wrap.is-loading::after { animation: listing-pulse 1s ease-in-out infinite alternate; }
@keyframes listing-spin { to { transform: rotate(360deg); } }
@keyframes listing-pulse { from { opacity: 0.35; } to { opacity: 1; } }
.pagination__item[aria-current] { pointer-events: none; }

/* ---------- Last Forms adapter ----------
   The plugin renders the controls and the submit button; the template in
   Last Forms carries the design's labels and rows. These rules put the
   plugin's classes on the design's input, button and status styles. The
   plugin stylesheet loads after this one, so every selector is scoped to
   .lf-form to win on specificity. */
.lf-form .lf-control {
  flex: 1; min-width: 0; width: 100%;
  padding: 0.75rem 1.5rem 0.75rem 1rem;
  border: 0; border-radius: var(--radius-sm);
  background: var(--input-bg, var(--color-mercurio-50));
  box-shadow: inset 0 0 0 2px var(--input-line, var(--color-mercurio-200));
  font: inherit; font-size: var(--body-size); line-height: 1.75rem;
  color: var(--input-ink, var(--color-urano-500));
  transition: box-shadow var(--ease-color);
}
.lf-form .lf-control::placeholder { color: var(--input-placeholder, var(--color-mercurio-800)); opacity: 1; }
.lf-form .lf-control:focus { outline: none; box-shadow: inset 0 0 0 2px var(--input-focus, var(--color-urano-500)); }
.lf-form textarea.lf-control { min-height: 12.5rem; resize: vertical; }
.lf-form .lf-select { padding-right: 3.25rem; appearance: none; cursor: pointer; }
.lf-form .lf-select:invalid { color: var(--input-placeholder); }
.lf-form .lf-field__error { display: block; color: var(--color-marte-400); font-size: var(--caption-size); line-height: var(--caption-lh); }
.lf-form .lf-field__error:empty { display: none; }
.lf-form .lf-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.lf-form .lf-choice { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); cursor: pointer; }
.lf-form .lf-choice input { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: 0; border-radius: 0.25rem; appearance: none; background: var(--input-bg); box-shadow: inset 0 0 0 2px var(--input-line); cursor: pointer; transition: background-color var(--ease-color), box-shadow var(--ease-color); }
.lf-form .lf-choice input::before { content: ""; width: 1rem; aspect-ratio: 1; background: var(--input-check); opacity: 0; -webkit-mask: url("../img/check.svg") center / contain no-repeat; mask: url("../img/check.svg") center / contain no-repeat; }
.lf-form .lf-choice input:checked { background: var(--input-focus); box-shadow: none; }
.lf-form .lf-choice input:checked::before { opacity: 1; }
.lf-form .lf-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0.75rem 1.25rem; border: 0; border-radius: var(--radius-sm);
  font: inherit; font-size: 1.25rem; line-height: 1.75rem; white-space: nowrap; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color var(--ease-color), color var(--ease-color), opacity var(--ease-color);
}
.lf-form .lf-submit:hover { background: var(--btn-bg-hover); }
.lf-form .lf-submit:disabled { opacity: 0.6; cursor: wait; }
.lf-form .lf-submit::before { content: ""; flex: none; width: 1.25rem; aspect-ratio: 1; background: currentColor; -webkit-mask: url("../img/arrow.svg") center / contain no-repeat; mask: url("../img/arrow.svg") center / contain no-repeat; }
.lf-form .lf-form__message { margin: 0; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: var(--caption-size); line-height: var(--caption-lh); }
.lf-form .lf-form__message--error { color: var(--color-marte-400); }
.lf-form .lf-form__message:empty { display: none; }
/* Contact: the plugin form takes the design's column layout. */
.form--lf .lf-form { display: flex; flex-direction: column; gap: 2rem; width: 100%; }
.form--lf .lf-form .form__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; }
/* Newsletter: the plugin form takes the design's inline layout; the green button of the closing card. */
.inline-form--lf .lf-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.inline-form--lf .lf-form .lf-field__error, .inline-form--lf .lf-form .lf-form__message { width: 100%; }
.inline-form--lf .lf-form .lf-submit { background: var(--color-urano-500); color: var(--color-mercurio-50); }
.inline-form--lf .lf-form .lf-submit:hover { background: var(--color-urano-600); }
/* The editor centers every root block (margin auto); prose elements with a max-width (H2) stay on the left as on the front. */
.editor-styles-wrapper.post-type-post .is-root-container > *, .editor-styles-wrapper.post-type-case .is-root-container > * { margin-inline: 0; }