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

/* latin-ext */
@font-face {
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/kumbh-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/kumbh-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter: only used by the meta line of content cards. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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;        --h3-ls: 0;     /* 56 */
  --h4-size: 3rem;        --h4-lh: 1.16;     --h4-ls: 0;     /* 48 */
  --h5-size: 2rem;        --h5-lh: 1.1;      --h5-ls: 0;     /* 32 */
  --h6-size: 1.5rem;      --h6-lh: 2rem;     --h6-ls: 0;     /* 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;

  /* 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));

}

/* =====================================================================
   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-900); --surface-ink-soft: var(--color-urano-500); }
.bg-mercurio-100 { background: var(--color-mercurio-100); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.bg-mercurio-200 { background: var(--color-mercurio-200); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.bg-mercurio-300 { background: var(--color-mercurio-300); --surface-ink: var(--color-urano-900); --surface-ink-soft: var(--color-urano-500); }
.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);
}

/* =====================================================================
   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.
   ===================================================================== */
.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);
  --line: var(--color-neutral-200);
  --tag-line: var(--color-neutral-200);
  --glow-ring: var(--color-sol-300);
  --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);
  --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);
  --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);
  --line: var(--color-urano-100);
  --tag-line: var(--color-mercurio-600);
  --glow-ring: var(--color-mercurio-300);
  --nav-active: 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);
  --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: min(100%, 1.11111vw); }
}
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; }
.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 { padding-block: var(--section-y); }
.section--compact { padding-block: calc(var(--section-y) / 2); }
/* Equal columns. Options: --2 / --4 columns, --loose for the 60px gap. 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-row-gap: 3.75rem; } /* cards 60 apart */
  .grid--tight { --grid-row-gap: 0.75rem; }
}
/* Vertical rhythm between the blocks of a section: 80 (-lg) or 64 (-md); 40 / 32 on mobile. */
.stack-lg, .stack-md { display: flex; flex-direction: column; gap: 5rem; }
.stack-md { gap: 4rem; }
@media (max-width: 1023px) {
  .stack-lg { gap: 2.5rem; }
  .stack-md { gap: 2rem; }
}

/* =====================================================================
   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("assets/logos/orbio.svg") center / 100% 100% no-repeat;
  mask: url("assets/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); }

/* ---------- 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--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 { 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%); }

/* ---------- Appear animations (Style Guide rules) ---------- */
/* Headings: split per line, opacity only, 0.1s per line. */
.js [data-split] .word { display: inline-block; opacity: 0; transition: opacity var(--spring-time) var(--spring); transition-delay: calc(var(--line, 0) * 0.1s); }
.js [data-split].is-inview .word { opacity: 1; }
/* Cards and blocks: slide in from -20Y, 0.1s stagger. */
.js [data-appear] { opacity: 0; translate: 0 -1.25rem; transition: opacity var(--spring-time) var(--spring), translate var(--spring-time) var(--spring); transition-delay: calc(var(--i, 0) * 0.1s); }
.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;
  transition: background-color var(--ease-color);
}
.site-nav__link + .site-nav__link { margin-left: -4px; } /* Figma item spacing: -4 */
.site-nav__link--menu { padding-right: 1.25rem; }
.site-nav__link[aria-expanded="true"] { background: var(--nav-active); }
/* Neighbors overlap by 4px, so while a panel is open the other pills leave at once: two never show together. */
.site-header[data-open] .site-nav__link:not([aria-expanded="true"]) { 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="solucoes"] { 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; 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--solucoes .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--solucoes .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 { display: flex; align-items: center; font-size: 3rem; line-height: 1.16; white-space: nowrap; transition: color var(--ease-color); }
/* Bullet of the current link: grows in from zero width. */
.mega__link::before { content: ""; flex: none; width: 0; height: 0.875rem; margin-right: 0; border-radius: 50%; background: currentColor; transform: scale(0); transition: width 0.4s ease, margin-right 0.4s ease, transform 0.4s ease; }
.mega__link[data-current]::before { width: 0.875rem; margin-right: 1.25rem; 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--solucoes .mega__link { color: var(--color-sol-600); }
.mega--solucoes .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; }

/* ---------- 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 { 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 cubic-bezier(0.22, 1, 0.36, 1);
  }
  .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; }
  .mobile-menu__close { background: var(--menu-btn-bg); color: var(--menu-btn-fg); }
  .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; }
  /* Accordion: animates from 0fr to 1fr, so the height follows the content. */
  .mobile-menu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
  .mobile-menu__link[aria-expanded="true"] + .mobile-menu__sub { grid-template-rows: 1fr; }
  .mobile-menu__sub > ul { display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; overflow: hidden; 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
   ===================================================================== */
/* ---------- Hero ----------
   One hero for every page. Optional parts: breadcrumb, tag, description, actions, media.
   Modifiers: --crumbs (has a breadcrumb), --left (left aligned), --flush (no bottom padding). */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5rem; padding-block: calc(var(--header-h) + 7.5rem) 7.5rem; overflow-x: clip; } /* title 120 below the header, 80 to the media, 120 after */
/* 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__title-block { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; text-align: center; }
.hero__heading { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hero__desc { max-width: 31.25rem; color: var(--ink-soft); } /* 500 */
.hero__desc--wide { max-width: 37.5rem; } /* 600 */
.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 */
@media (max-width: 1023px) {
  .hero { padding-block: 12.875rem 1.875rem; } /* title at 206, 30 after */
  .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__heading { gap: 0.75rem; }
  .hero__media { aspect-ratio: 374 / 280; }
}
.hero--flush { padding-bottom: 0; }

/* ---------- 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); }

/* ---------- Section head (tag + title + optional description) ----------
   Modifier: --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; }
}

/* ---------- Dark section (orbit background with curved edges) ----------
   Vertical padding through --dark-pt / --dark-pb (defaults 320). */
.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__closing { position: relative; max-width: 41.875rem; margin-inline: auto; text-align: center; } /* 670 */
/* 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: -1px; height: calc(6.75rem + 1px); transform-origin: top; } /* 108 visible */
.curve--top::before { bottom: 0; }
.curve--bottom { bottom: -1px; height: calc(7.5rem + 1px); 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__closing { font-size: 1.25rem; line-height: 1.75rem; }
  .dark-section--roomy { padding-block: 8rem; } /* 48 cap + 80 */
  .curve::before { width: max(37.5rem, 153.85vw); height: 18.75rem; } /* 600 x 300 */
  .curve--top, .curve--bottom { height: calc(3rem + 1px); }
}

/* ---------- 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). */
.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));
  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); }
@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. Track color: --carousel-track.
   --carousel-inset: side padding when the items run to the edges of the parent (see .panel--bleed). */
.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; height: 4px; border-radius: var(--radius-pill); background: var(--carousel-track, var(--color-urano-400)); overflow: hidden; }
.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(--color-mercurio-500); }
.carousel__arrows { display: flex; gap: 0.375rem; }
.carousel__arrows .btn--icon-only { padding: 1.0625rem; } /* 54 square */
.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 (numbered cards on a pinned horizontal scroll; carousel on mobile) ----------
   script.js reads --wave-step and --wave-card and moves the cards along the wave. */
.wave { position: relative; width: 100%; --wave-card: 25.8125rem; --wave-step: 27.0625rem; } /* card 413, 433 between cards */
/* Fixed stage: the cards are absolutely positioned inside it (card 552 + wave 160). */
.wave__viewport { width: 100%; height: 44.5rem; overflow: hidden; }
.wave__track { position: relative; width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); height: 100%; margin-inline: auto; }
.wave .num-card { position: absolute; left: 0; top: 0; width: var(--wave-card); transform: translate3d(var(--tx), var(--ty), 0); will-change: transform; }
/* Static Figma state (card 02 centered), used when motion is off. */
.wave .num-card:nth-child(1) { --tx: 5rem; --ty: 7.5rem; }       /* 80, 120 */
.wave .num-card:nth-child(2) { --tx: 32.0625rem; --ty: 0rem; }   /* 513, 0 */
.wave .num-card:nth-child(3) { --tx: 59.125rem; --ty: 5rem; }    /* 946, 80 */
.wave .num-card:nth-child(4) { --tx: 86.1875rem; --ty: 10rem; }  /* 1379, 160 */
.wave__controls { display: none; }
.wave.is-pinned { height: calc(44.5rem + var(--travel)); }
.wave.is-pinned .wave__viewport { position: sticky; top: max(1rem, calc((100vh - 44.5rem) / 2)); }
.wave.is-pinned .wave__track { transform: scale(var(--fit, 1)); transform-origin: center; }
@media (max-width: 1023px) {
  .wave { --wave-card: 17.5rem; } /* 280 */
  .wave__viewport { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter-wide); scrollbar-width: none; }
  .wave__viewport::-webkit-scrollbar { display: none; }
  .wave__track { display: flex; gap: 0.75rem; width: max-content; max-width: none; height: auto; padding-inline: var(--gutter-wide); }
  .wave .num-card { position: static; flex: none; min-height: 23.375rem; padding: 1rem; transform: none; scroll-snap-align: start; } /* 280 x 374 */
  .wave__controls { display: flex; margin-top: 2.5rem; } /* the controls are the carousel ones */
}

/* ---------- Content card (programs, articles, materials, cases) ----------
   One anatomy: media 4:3, tags, title, optional description, optional footer (meta line or button).
   Width comes from the grid it sits in. Modifiers: --lg (horizontal, media right), --lg-reverse.
   Dark surroundings recolor it through --ink / --ink-soft (see .bg-orbit-green). */
.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: 414 / 311; border-radius: var(--radius-lg); }
.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); } /* 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(--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. */
.card__title { transition: color var(--ease-color); }
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: 630 / 473; } /* 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-reverse .card__main { flex-direction: row; }
@media (max-width: 1023px) {
  .card { gap: 2rem; }                       /* 32 before the meta line */
  .card:has(> .btn) { gap: 1.75rem; }        /* 28 before the button */
  .card__main { gap: 1.5rem; }               /* 24 from the image to the text */
  .card--snug .card__main { gap: 0.75rem; }  /* program cards: 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: 414 / 311; }
}

/* ---------- Split card (media + text) ----------
   Media on the left by default; --reverse puts it on the right. Background from a surface class.
   .split-card__actions is a free slot: a button, a form, anything. */
.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, var(--ink)); } /* 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__actions { width: 100%; }
@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; }
}

/* Closing blocks at the end of every page. */
.cta-blocks { display: flex; flex-direction: column; gap: var(--gutter-wide); padding-block: 3.75rem; }
@media (max-width: 1023px) {
  .cta-blocks { padding-block: 5rem; }
}

/* ---------- Input and inline form (one input + button) ----------
   Colors through --input-bg, --input-line, --input-ink, --input-placeholder, --input-focus. */
.inline-form { display: flex; align-items: center; gap: 0.625rem; }
.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)); }
@media (max-width: 1023px) {
  .inline-form { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .input { flex: none; }
}

/* ---------- Testimonial ---------- */
.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; }
.testimonial__name { display: block; font-size: var(--body-size); line-height: var(--body-lh); color: var(--ink); }
.testimonial__role { display: block; margin-top: 0.25rem; font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); }
@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 + ticker ---------- */
.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(--color-sol-200); box-shadow: inset 0 0 0 2px var(--color-sol-300); }
.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(--color-neutral-600); text-align: center; }
/* Infinite row: script.js duplicates the group so the -50% loop is seamless. */
.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 */
@keyframes ticker { to { transform: translateX(-50%); } }
.reduce-motion .ticker__track { animation: none; }
@media (max-width: 1023px) {
  .client { gap: 0.964313rem; width: 6.428563rem; } /* 102.857 wide, gap 15.429 */
  .ticker .client { margin-right: 2rem; }
  .client__badge { box-shadow: inset 0 0 0 1.714px var(--color-sol-300); }
  .client__name { line-height: 1.178563rem; } /* 18.857 */
}

/* =====================================================================
   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("assets/logos/orbio-watermark.svg") center / 100% 100% no-repeat; mask: url("assets/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; }
}

/* ---------- 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.
   On mobile each card stacks and shows its own row labels. */
.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; }
.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 { display: none; }
.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:has(.compare__check) { display: flex; align-items: flex-start; gap: 1.25rem; }
/* Icon chip in front of a value (check or cross). */
.compare__check { flex: none; padding: 0.375rem; border-radius: 4px; 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 { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--ink); }
  .compare__col--highlight .compare__label { color: var(--color-urano-500); }
  .compare__value:has(.compare__check) { align-items: center; gap: 0.75rem; }
  .compare__check { padding: 0.25rem; border-radius: 3.5px; }
  .compare__check .icon { width: 1rem; height: 1rem; }
}

/* ---------- Hero, split variant ----------
   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 */
@media (max-width: 1023px) {
  .hero__split { flex-direction: column; gap: 1.25rem; }
  .hero__aside { gap: 1.25rem; width: auto; }
  .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; }
}

/* ---------- 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, brown variant (service pages) ----------
   Use with .bg-neutral-900. Recolors tags, text and the numbered cards inside. */
.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);
  color: var(--color-sol-50);
}
.num-card.is-active { background: var(--num-card-active, var(--color-mercurio-500)); }
.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); }
.num-card__head:has(.tag) { gap: 1rem; align-items: flex-start; }
/* 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 */
@media (max-width: 1023px) {
  .dark-section__split { flex-direction: column; gap: 1.25rem; }
  .dark-section__split > :last-child { width: auto; }
}

/* ---------- Aside layout (sticky intro on the left, list 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; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; }
.aside-layout__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.aside-layout__desc { max-width: 31.25rem; color: var(--ink-body); }
.aside-layout__list { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1023px) {
  .aside-layout { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .aside-layout__aside { position: static; gap: 1.25rem; padding-inline: 1rem; }
  .aside-layout__heading { gap: 0.75rem; }
  .aside-layout__list { gap: 0.5rem; }
}

/* ---------- Step card ---------- */
.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)); }
@media (max-width: 1023px) {
  .step-card { gap: 1rem; padding: 1.5rem; }
  .step-card__head { gap: 0.25rem; }
}

/* ---------- Panel (rounded block that groups content) ----------
   Background from a bg-* class; --outlined adds the 2px border. */
.panel { display: flex; flex-direction: column; gap: 3.75rem; padding: 3.75rem; border-radius: var(--radius-lg); color: var(--surface-ink, var(--ink)); }
.panel--outlined { padding-top: 7.5rem; box-shadow: inset 0 0 0 2px var(--panel-line, var(--color-mercurio-400)); }
.panel__head { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-bottom: 5rem; text-align: center; }
.panel-section { padding-block: 3.75rem; } /* panels sit 120 apart */
.panel-section--flush { padding-block: 0; }
@media (max-width: 1023px) {
  .panel { gap: 2rem; padding: 2rem 1rem; }
  .panel--outlined { padding: 2rem 1rem 1rem; }
  .panel__head { gap: 0.75rem; padding-bottom: 2.5rem; }
  .panel-section, .panel-section--flush { padding-block: 1rem; }
  .cta-blocks--inline { padding-block: 1rem; }
}

/* ---------- Post block (title + "see all" + cards) ----------
   On mobile the title centers and the link moves below the cards. */
.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__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__list { justify-self: stretch; --grid-row-gap: 3.75rem; }
  .more-link { gap: 0.75rem; }
}

/* 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); }
.bg-orbit-green .card__meta { color: var(--color-sol-200); }
.theme-green .bg-orbit-green .card__meta { color: var(--color-urano-200); }
/* Inside an outlined panel each post block gets 60 of breathing room. */
.panel--outlined .post-block { padding-block: 3.75rem; }
/* Two-column grids stretch the card but keep the media height of the 3-column card (311). */
.grid--2 .card__media { aspect-ratio: 630 / 311; }
@media (max-width: 1023px) {
  .panel--outlined .post-block { padding-block: 0; }
  .grid--2 .card__media { aspect-ratio: 414 / 311; }
}
/* Large cards stacked one under the other (60 apart). */
.stack-card { display: flex; flex-direction: column; gap: 3.75rem; }

/* ---------- Page blocks 120 apart (hub and listing pages) ---------- */
.stack-xl { display: flex; flex-direction: column; gap: 7.5rem; padding-bottom: 3.75rem; }
.post-block__logo { width: auto; height: 2.5rem; margin-bottom: 0.625rem; } /* 40 high, 10 above the title */
@media (max-width: 1023px) {
  .stack-xl { gap: 3.75rem; padding-bottom: 2.5rem; }
  .stack-xl--loose { gap: 5rem; padding-bottom: 1rem; } /* hub page: blocks 80 apart */
  .post-block__featured { margin-bottom: 3.75rem; }
  .post-block__logo { height: 1.5rem; margin-inline: auto; }
}

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 0.625rem; padding-block: 7.5rem 3.75rem; }
.pagination__item { display: grid; place-items: center; min-width: 3.25rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--color-mercurio-200); color: var(--color-urano-500); font-size: var(--body-size); line-height: 1.75rem; transition: background-color var(--ease-color), color var(--ease-color); }
.pagination__item:hover { background: var(--color-mercurio-300); }
.pagination__item[aria-current] { background: var(--color-urano-500); color: var(--color-mercurio-500); }
.pagination__item--arrow, .pagination__item--arrow:hover { background: none; }
.theme-yellow .pagination__item { background: var(--color-sol-200); color: var(--color-neutral-900); }
.theme-yellow .pagination__item[aria-current] { background: var(--color-neutral-900); color: var(--color-sol-500); }
.theme-yellow .pagination__item--arrow { background: none; }
@media (max-width: 1023px) {
  /* 4 between items, numbers 48 high, arrows 52; 80 after the list, 30 below. */
  .pagination { 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; }
}

/* ---------- Listing page options ---------- */
.stack-xl--end { padding-bottom: 7.5rem; }       /* 120 after the last block */
.pagination--end { padding-bottom: 7.5rem; }
.grid--loose.grid--2 .card__media { aspect-ratio: 610 / 311; }
/* Hero with something under the description (filters): intro and extra sit 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__desc--muted { color: var(--ink-muted); }
/* Filter chips */
.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) {
  .stack-xl--end { padding-bottom: 5rem; }
  .pagination--end { padding-bottom: 1.875rem; }
  .grid--loose.grid--2 .card__media { aspect-ratio: 414 / 311; }
  .hero__title-block--stack { gap: 2rem; }
  .hero__intro { gap: 1.25rem; }
  /* One row that scrolls sideways, from edge to edge. */
  .chips--scroll { align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .chips--scroll::-webkit-scrollbar { display: none; }
  .chips--scroll > li { flex: none; }
}
.card--lg .card__body > .card__meta, .card--lg .card__body > .btn { margin-top: 1.25rem; } /* 40 after the text */

/* ---------- Section and stack options ---------- */
.section--md { --section-y: 7.5rem; }                     /* 120 */
.section--snug-top { padding-top: var(--gutter-wide); }   /* a panel right under the previous section */
.stack-gutter { display: flex; flex-direction: column; gap: var(--gutter-wide); }
.stack-xl--flush { padding-bottom: 0; }
@media (max-width: 1023px) {
  .section--md { --section-y: 1.875rem; }                     /* 30 */
  .section--snug-top { padding-block: var(--gutter-wide); }   /* 8 around the panel */
  .section--mobile-sm { --section-y: 2.5rem; }                /* 40 on mobile, regular on desktop */
  .stack-gutter { gap: 0.75rem; }
}

/* ---------- Panel options ----------
   --roomy: 120 of breathing room.
   --bleed: content runs to the panel edges (carousels); the other children keep the side padding.
   --bordered: 2px line around it, color from --panel-line. */
.panel--roomy { gap: 7.5rem; padding-block: 7.5rem; --post-block-gap: 7.5rem; }
.panel--bordered { box-shadow: inset 0 0 0 2px var(--panel-line, var(--line)); }
.panel--bleed { padding-inline: 0; --inset: 3.75rem; --carousel-inset: var(--inset); }
.panel--bleed > :not(.carousel) { padding-inline: var(--inset); }
.post-block__desc { max-width: 25.8125rem; margin-top: 2.5rem; color: var(--ink-body); } /* 413 */
@media (max-width: 1023px) {
  .panel--roomy { gap: 3.75rem; padding-block: 2rem; --post-block-gap: 2rem; }
  .panel--bleed { --inset: 1rem; }
  .post-block__desc { margin-top: 1.25rem; margin-inline: auto; }
}

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

/* ---------- Larger tag (section labels on detail pages) ---------- */
.tag--lg { padding: 0.5rem 1rem; font-size: var(--caption-size); line-height: var(--caption-lh); }

/* ---------- Client badges follow the theme ---------- */
.theme-green .client__badge { background: var(--color-mercurio-200); box-shadow: inset 0 0 0 2px var(--color-mercurio-300); }
.theme-green .client__name { color: var(--color-urano-500); }

/* ---------- Title ticker (detail page hero and info bar) ---------- */
.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(--color-mercurio-500); }
/* Motion off: the title sits centered, as in the Figma frame. */
.reduce-motion .ticker--title .ticker__track { margin-left: 50%; translate: -50% 0; }
@media (max-width: 1023px) {
  .ticker--title .ticker__group { gap: 1rem; padding-right: 1rem; }
  .ticker--title .symbol { width: 2rem; }
}

/* ---------- Hero of detail pages ----------
   Tags + title ticker, then description and partner logo, then the media. */
.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__tags { display: flex; gap: 0.5rem; }
.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:has(> .hero__body) { padding-bottom: 2.5rem; } /* 40 after the media */
  .hero__body { gap: 2rem; }
  .hero__banner { gap: 3.75rem; }
  .hero__marquee { gap: 0.75rem; }
  .hero__tags { gap: 0.25rem; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero__partner { height: 3rem; } /* 230 x 48 */
}

/* ---------- Aside layout and step cards, options ---------- */
.aside-layout--even { grid-template-columns: repeat(2, minmax(0, 39.375rem)); } /* 630 + 630 */
.aside-layout--even .aside-layout__list { gap: 0.625rem; }
@media (max-width: 1023px) {
  .aside-layout--even { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .aside-layout--even .aside-layout__list { gap: 0.25rem; }
  .step-card--green { padding: 1.5rem; }
}
.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 */

/* ---------- Split card options ----------
   --roomy: more padding and a media column as tall as the text (a logo instead of a photo). */
.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__desc p + p { margin-top: 1.875rem; }
@media (max-width: 1023px) {
  .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; }
  .split-card__desc p + p { margin-top: 1.5rem; }
}

/* ---------- Stats ---------- */
.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)); }
/* Options: --sm (tighter, inside text columns), --brown. Any other color through the --stat-* variables. */
.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) ---------- */
.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: 305 / 407; border-radius: var(--radius-md); }
.profile__name { display: flex; flex-direction: column; gap: 0.25rem; }
.profile__role { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-soft); }
/* Mobile: use with .container--snug. The photo runs almost edge to edge, the text keeps the gutter. */
@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: 374 / 499; }
  .profile__name { padding-inline: 1rem; }
}

/* ---------- FAQ (accordion) ---------- */
.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); }
/* Opens smoothly: the row goes from 0fr to 1fr, so the height follows the answer. */
.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.faq__answer > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0.4s; }
.faq__question[aria-expanded="true"] + .faq__answer, .faq__item:has([aria-expanded="true"]) .faq__answer { grid-template-rows: 1fr; }
.faq__item:has([aria-expanded="true"]) .faq__answer > div { visibility: visible; }
.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__answer, .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 (fixed at the bottom of detail pages) ----------
   Desktop: always open. Mobile: a floating bar whose items open upward on tap.
   [data-away] (set while the footer is on screen) slides it out. */
.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(--color-mercurio-200); color: var(--color-urano-500); 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 .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(--color-mercurio-50); white-space: nowrap; }
.infobar__icon { display: grid; place-items: center; padding: 0.75rem; border-radius: 4px; background: var(--color-mercurio-200); }
.infobar__icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.infobar__label { display: block; font-size: var(--tag-size); line-height: var(--tag-lh); color: var(--color-urano-300); }
.infobar__value { display: block; font-size: var(--caption-size); line-height: var(--caption-lh); }
.infobar__toggle { display: none; }
@media (max-width: 1023px) {
  /* Figma: 310 x 66 at 390, 24 from the bottom. */
  .infobar { left: 2.5rem; right: 2.5rem; bottom: 1.5rem; flex-direction: column-reverse; gap: 0; width: auto; max-width: none; translate: none; }
  .infobar[data-away] { translate: 0 calc(100% + 1.5rem); }
  .infobar__head { display: flex; align-items: center; gap: 0.5rem; padding-inline: 0.5rem; }
  .infobar__head .ticker { flex: 1; width: auto; min-width: 0; }
  .infobar .ticker__group { font-size: var(--body-size); line-height: var(--body-lh); }
  .infobar__toggle { display: grid; place-items: center; padding: 0.9375rem; border-radius: 0.5rem; background: var(--color-urano-500); color: var(--color-mercurio-500); rotate: 180deg; transition: rotate 0.4s ease; }
  .infobar__toggle[aria-expanded="true"] { rotate: 0deg; }
  .infobar__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
  .infobar[data-open] .infobar__panel { grid-template-rows: 1fr; }
  .infobar__items { flex-direction: column; min-height: 0; overflow: hidden; }
  .infobar[data-open] .infobar__items { padding-bottom: 0.5rem; }
  .infobar__item { white-space: normal; }
}

/* ---------- Article body ---------- */
.article { padding-block: 7.5rem; } /* 120 */
.panel-section--flush-top { padding-top: 0; }
@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. Options: --compact. Box colors: --box-bg, --box-line, --box-mark. Spacing: blocks --prose-block apart, paragraphs --prose-para,
   a heading and its text (or a paragraph and its list) --prose-tight.
   Mobile: use inside .container--snug. Boxes and images run almost edge to edge, text keeps the gutter. */
.prose {
  --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 .prose { --box-bg: var(--color-neutral-100); --box-line: var(--color-neutral-200); --box-mark: var(--color-neutral-500); color: var(--ink-soft); }
.prose.prose--compact { --prose-para: var(--prose-tight); } /* paragraphs as close as a heading and its text */
.prose > * + * { margin-top: var(--prose-para); }
.prose > * + :is(h2, blockquote, figure, .callout, .stats), .prose > :is(blockquote, figure, .callout, .stats) + * { margin-top: var(--prose-block); }
.prose > h2 + *, .prose > p + ul, .prose > p + ol { margin-top: var(--prose-tight); }
.prose h2 { max-width: 46.875rem; font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--ink); } /* 750 */
.prose strong { font-weight: 700; }
.prose a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-position: from-font; }
.prose :is(ul, ol):not([class]) { display: flex; flex-direction: column; gap: 0.625rem; }
.prose :is(ul, ol):not([class]) > li { position: relative; padding-left: 2.375rem; } /* 28 marker + 10 */
/* Only lists without a class are text lists. Markers are decoration: a dot or a bold number centered in a 28 box. */
.prose ul:not([class]) > li::before { content: ""; position: absolute; left: 0.625rem; top: 0.625rem; width: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: currentColor; }
.prose ol:not([class]) { counter-reset: item; }
.prose ol:not([class]) > li::before { counter-increment: item; content: counter(item) "."; position: absolute; left: 0; width: 1.75rem; font-weight: 700; text-align: center; }
.prose figure { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
/* Quote and callout share the box. */
.prose 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)); }
.prose blockquote::before { content: ""; width: 1.75rem; aspect-ratio: 28 / 24; background: var(--box-mark); -webkit-mask: url("assets/img/quote-mark.svg") center / contain no-repeat; mask: url("assets/img/quote-mark.svg") center / contain no-repeat; }
.prose blockquote p { font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--ink); }
.prose blockquote cite { font-size: var(--caption-size); line-height: var(--caption-lh); font-style: normal; color: var(--ink-soft); }
.prose blockquote > :is(cite, footer) { margin-top: 1.25rem; } /* 40 after the quote */
.callout__icon { display: grid; place-items: center; padding: 0.75rem; border-radius: 4px; background: var(--color-mercurio-500); color: var(--color-urano-500); }
.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); }
@media (max-width: 1023px) {
  .prose { --prose-block: 2rem; --prose-para: 1.5rem; --prose-tight: 0.75rem; } /* 32 / 24 / 12 */
  .prose > :is(p, h2, h3, ul:not([class]), ol:not([class])) { padding-inline: 1rem; }
  .prose :is(ul, ol):not([class]) { gap: 0.25rem; }
  .prose figure { aspect-ratio: 374 / 280; border-radius: var(--radius-md); }
  .prose blockquote, .callout { padding: 1.5rem; border-radius: var(--radius-md); }
  .prose blockquote { gap: 0.75rem; }
  .prose blockquote > cite { margin-top: 0.75rem; }   /* 24 after the quote */
  .prose blockquote > footer { margin-top: 0.5rem; }  /* 20 */
}

/* ---------- Info bar parts for articles ---------- */
.infobar__head--mobile { display: none; }
.infobar__avatar { width: 3rem; aspect-ratio: 1; border-radius: 50%; }
.infobar__share { display: flex; gap: 0.375rem; }
.infobar__icon--dark { background: var(--color-urano-500); color: var(--color-mercurio-500); transition: background-color var(--ease-color); }
a.infobar__icon--dark:hover, button.infobar__icon--dark:hover { background: var(--color-urano-400); }
@media (max-width: 1023px) {
  .infobar__head--mobile { display: flex; }
}

/* ---------- Small section (60 above and below; 16 on mobile) ---------- */
.section--sm { --section-y: 3.75rem; }
@media (max-width: 1023px) {
  .section--sm { --section-y: 1rem; }
}

/* ---------- Aside layout option: index on the left, long text on the right ---------- */
.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--index { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Prose option: numbered headings (legal pages) ----------
   Each h2 gets its number from a counter, in a 40 column like the index. */
.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) {
  .prose--numbered h2 { gap: 0.75rem; }
}

/* ---------- 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 opens upward on tap. */
.index { position: sticky; top: 2.5rem; --bar-bg: var(--color-sol-200); --bar-item: var(--color-sol-50); }
.theme-green .index { --bar-bg: var(--color-mercurio-200); --bar-item: var(--color-mercurio-50); }
.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); }
@media (max-width: 1023px) {
  /* Figma: 310 x 66 at 390, 24 from the bottom. */
  .index { position: fixed; z-index: 40; top: auto; left: 2.5rem; right: 2.5rem; bottom: 1.5rem; display: flex; flex-direction: column-reverse; padding: 0.5rem; border-radius: var(--radius-sm); background: var(--bar-bg); 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: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.6875rem 1rem; border-radius: 0.5rem; background: var(--bar-item); } /* 50 high */
  .index__toggle .icon { rotate: 180deg; transition: rotate 0.4s ease; }
  .index__toggle[aria-expanded="true"] .icon { rotate: 0deg; }
  .index__current { min-width: 0; color: var(--ink); font-size: var(--body-size); line-height: 1.75rem; white-space: nowrap; }
  .index__current, .index__list a { gap: 0.75rem; }
  .index__current > span, .index__list a > span { width: 1.75rem; }
  .index__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
  .index[data-open] .index__panel { grid-template-rows: 1fr; }
  .index__list { min-height: 0; max-height: 60vh; overflow: hidden auto; gap: 0; }
  .index__list a { padding: 0.5rem 1rem; }
  .index[data-open] .index__list { padding-block: 0.5rem; }
}

/* ---------- Hero and section options (contact page) ---------- */
.hero--short { padding-bottom: 5rem; }             /* 80 */
.hero--tall { padding-bottom: 12.5rem; }             /* 200 */
.hero__heading--tight { gap: 0.625rem; }           /* tag 10 above the title */
.section--snug { --section-y: 5rem; }              /* 80 */
@media (max-width: 1023px) {
  .hero--short { padding-bottom: 1.25rem; }        /* 20 */
  .hero--tall { padding-bottom: 6.25rem; }         /* 100 */
  .hero__heading--tight { gap: 0.25rem; }
  .section--snug { --section-y: 1.25rem; }
}

/* ---------- Info bar: yellow pages and inline use ----------
   --inline: the same box inside the page flow (contact hero) instead of fixed at the bottom. */
.theme-yellow .infobar { background: var(--color-sol-200); color: var(--color-neutral-900); }
.theme-yellow .infobar__item { background: var(--color-sol-50); }
.theme-yellow .infobar__icon { background: var(--color-sol-200); }
.theme-yellow .infobar__label { color: var(--color-neutral-300); }
.theme-yellow .infobar__icon--dark { background: var(--color-neutral-900); color: var(--color-sol-500); }
.theme-yellow a.infobar__icon--dark:hover { background: var(--color-neutral-800); }
.infobar--inline { position: static; z-index: auto; translate: none; text-align: left; }
.infobar--inline .infobar__item:has(> .infobar__share:only-child) { padding: 0.75rem; }
@media (max-width: 1023px) {
  .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; overflow: visible; }
  .infobar--inline .infobar__item, .infobar--inline .infobar__item:has(> .infobar__share:only-child) { 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; }
}

/* ---------- Form ----------
   .field = label + control. Controls reuse .input; colors through --input-*. */
.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);
  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; justify-content: flex-end; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field__label { color: var(--ink-soft); }
.field .input { flex: none; width: 100%; }
.input--area { min-height: 12.5rem; resize: vertical; } /* 200 */
/* 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 */
.check { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-soft); cursor: pointer; }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; border-radius: 4px; appearance: none; background: var(--input-bg) center / 1rem no-repeat; 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:checked { background-color: var(--input-focus); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffcf3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17L4 12'/%3E%3C/svg%3E"); box-shadow: none; }
.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; }
  .check { align-items: flex-start; }
}