/* Órigo Human Strategy — folha compartilhada (Home + páginas internas). Gerada do protótipo. */
/* ================================================================
     ÓRIGO HUMAN STRATEGY — Home V2 (protótipo)
     Paleta oficial:
     RAIZ #4B5143 · ESPRESSO #373028 · LINHO #D9CDBF
     NÉVOA #D1E2EC · PEDRA #8D7D6E · LEVEZA #F9F9F9

     TIPOGRAFIA — sistema digital do site: Fraunces (serifada editorial) +
     Manrope (sans), via Google Fonts. As fontes do manual da marca
     (Nexa · Athena · Alamanda) são referência de IDENTIDADE (logo/marca),
     não fonte funcional global. Ver docs/tipografia.md.
     ================================================================ */

  :root {
    /* tipografia do site (digital) — Fraunces + Manrope */
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-text: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* base — tema claro */
    --ground: #F9F9F9;
    --ink: #363029;
    --ink-soft: #675E51;
    --ink-faint: #877C6C;
    --hairline: #DED6C7;
    --hairline-strong: #C7BCA9;

    /* cores da marca (literais, iguais nos dois temas) */
    --raiz: #4B5143;
    --espresso: #373028;
    --linho: #D9CDBF;
    --nevoa: #D1E2EC;
    --pedra: #8D7D6E;

    /* superfícies de capítulo */
    --ch-cool: #E7EEF1;        /* Névoa muito suave */
    --ch-warm: #EEE7D9;        /* Linho suave */
    --ch-warm-ghost: #F1ECE1;  /* hover em superfície clara */

    /* capítulo Raiz */
    --raiz-ground: #4B5143;
    --on-raiz: #EFECE2;
    --on-raiz-soft: #C4C7B8;
    --raiz-hairline: rgba(238,235,225,0.18);

    /* capítulo Espresso */
    --espresso-ground: #322B23;
    --on-espresso: #E9E2D5;
    --on-espresso-soft: #A99F8E;
    --espresso-hairline: rgba(233,226,213,0.14);
    --accent-on-espresso: #93A07F;

    --accent: #4B5143;
    --accent-deep: #3A4034;
    --accent-text: #4B5143;
    --on-accent: #F3EFE6;

    --measure: 42rem;
    --wrap: 74rem;
    --pad-x: clamp(1.35rem, 5.2vw, 5.5rem);
    --chapter-y: clamp(4.5rem, 11vw, 10rem);

    --s--1: clamp(0.78rem, 0.76rem + 0.12vw, 0.88rem);
    --s-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
    --s-1: clamp(1.14rem, 1.04rem + 0.45vw, 1.42rem);
    --s-2: clamp(1.4rem, 1.15rem + 1.15vw, 2.25rem);
    --s-3: clamp(1.85rem, 1.35rem + 2.4vw, 3.5rem);
    --s-4: clamp(2.1rem, 1.2rem + 4.1vw, 5rem);
    --s-5: clamp(2.45rem, 1rem + 6.4vw, 6.75rem);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --glyph-opacity: 0.16;
    --sym-url: url("brand/symbol.png");
  }

  /* Tema padrão = claro ("versão do dia"), igual em desktop e mobile.
     O escuro NÃO segue mais o modo do sistema — só entra pelo botão
     sol/lua (data-theme="dark"). */
  :root { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  :root[data-theme="dark"] {
    --ground: #29241E;
    --ink: #EAE3D6;
    --ink-soft: #B3A895;
    --ink-faint: #9A8F80;
    --hairline: #423B31;
    --hairline-strong: #4E4638;

    --ch-cool: #222A2D;
    --ch-warm: #2E2A21;
    --ch-warm-ghost: #2A251E;

    --raiz-ground: #454B3E;
    --espresso-ground: #201C17;

    --accent-text: #9AA783;
    --on-accent: #F3EFE6;
    --glyph-opacity: 0.22;
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--s-0);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* textura de papel — quase imperceptível */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.35; }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-optical-sizing: auto;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
    margin: 0;
    color: inherit;
  }
  p { margin: 0; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  ::selection { background: var(--raiz); color: var(--on-raiz); }

  main, header, footer { position: relative; z-index: 2; }

  .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
  .measure { max-width: var(--measure); }

  .eyebrow {
    font-size: var(--s--1);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
  }
  .eyebrow::before {
    content: "";
    width: 2rem;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    flex: none;
  }
  .eyebrow--plain { display: block; }
  .eyebrow--plain::before { display: none; }

  /* ---------- skip link ---------- */
  .skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--raiz); color: var(--on-raiz);
    padding: 0.75rem 1.25rem; z-index: 300;
  }
  .skip:focus { left: 0; }

  /* ---------- rail / marcador de capítulo ---------- */
  .rail {
    position: fixed;
    left: clamp(1rem, 3vw, 2.4rem);
    top: 0; bottom: 0;
    width: 1px;
    background: var(--hairline);
    z-index: 40;
    pointer-events: none;
  }
  .rail__fill {
    position: absolute; inset: 0 auto 0 0; width: 1px;
    background: var(--accent-text);
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
  }
  .rail__chapter {
    position: absolute;
    left: 0.9rem;
    bottom: 3rem;
    writing-mode: vertical-rl;
    font-size: 0.68rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
    transition: opacity 0.5s var(--ease);
  }
  .rail__chapter.fade { opacity: 0; }
  @media (max-width: 1120px) { .rail { display: none; } }

  /* ---------- header ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease);
  }
  .site-header[data-scrolled="true"] { border-bottom-color: var(--hairline); }
  .site-header__inner {
    max-width: var(--wrap); margin-inline: auto;
    padding: 0.85rem var(--pad-x);
    display: flex; align-items: center; gap: 2rem;
  }
  .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
  .brand img { width: 28px; height: auto; }
  .tri-neg { display: none; }
  :root[data-theme="dark"] .tri-pos { display: none; }
  :root[data-theme="dark"] .tri-neg { display: block; }
  .brand span {
    font-family: var(--font-display); font-weight: 400; font-size: 1.24rem;
    letter-spacing: 0.01em; color: var(--ink);
  }
  .brand small {
    display: block; font-family: var(--font-ui); font-size: 0.5rem;
    letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); margin-top: 1px;
  }
  .nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
  .nav a {
    position: relative; text-decoration: none; font-size: 0.9rem; font-weight: 500;
    white-space: nowrap; color: var(--ink-soft); padding: 0.35rem 0;
    transition: color 0.25s var(--ease);
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
    background: var(--accent-text); transition: width 0.3s var(--ease);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after, .nav a:focus-visible::after { width: 100%; }
  .header-cta {
    display: inline-flex; align-items: center; font-size: 0.88rem; font-weight: 600;
    text-decoration: none; color: var(--ink);
    border: 1px solid var(--hairline-strong); padding: 0.6rem 1.1rem; border-radius: 999px;
    white-space: nowrap;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
  }
  .header-cta:hover { background: var(--raiz); border-color: var(--raiz); color: var(--on-raiz); }
  .theme-toggle {
    flex: none; width: 33px; height: 33px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--hairline-strong); border-radius: 999px;
    color: var(--ink-soft); cursor: pointer;
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
  }
  .theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
  .theme-toggle svg { width: 15px; height: 15px; }
  .theme-toggle .moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .moon { display: block; }
  :root[data-theme="dark"] .theme-toggle .sun { display: none; }
  .menu-btn {
    display: none; margin-left: auto; width: 42px; height: 42px;
    border: 1px solid var(--hairline-strong); border-radius: 999px; background: transparent;
    cursor: pointer; color: var(--ink); align-items: center; justify-content: center;
  }
  .menu-btn svg { width: 18px; height: 18px; }
  @media (max-width: 1024px) {
    .nav, .header-cta { display: none; }
    .menu-btn { display: inline-flex; }
    .theme-toggle { margin-left: auto; }
    .menu-btn + .theme-toggle { margin-left: 0; }
  }
  .mobile-menu {
    position: fixed; inset: 0; z-index: 200; background: var(--ground);
    padding: clamp(5rem, 16vw, 7rem) var(--pad-x) 3rem;
    display: flex; flex-direction: column; gap: 0.3rem;
    transform: translateY(-100%); transition: transform 0.5s var(--ease); overflow-y: auto;
  }
  .mobile-menu[data-open="true"] { transform: translateY(0); }
  .mobile-menu a {
    text-decoration: none; font-family: var(--font-display); font-weight: 300;
    font-size: clamp(1.7rem, 7vw, 2.4rem); color: var(--ink);
    padding: 0.5rem 0; border-bottom: 1px solid var(--hairline);
  }
  .mobile-menu .mm-cta {
    margin-top: 1.6rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
    color: var(--on-raiz); background: var(--raiz); border: none; border-radius: 999px;
    padding: 0.9rem 1.4rem; text-align: center;
  }
  .mm-close {
    position: absolute; top: 1.4rem; right: var(--pad-x); width: 42px; height: 42px;
    border: 1px solid var(--hairline-strong); border-radius: 999px; background: transparent;
    color: var(--ink); cursor: pointer;
  }

  /* ---------- botões ---------- */
  .btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em;
    text-decoration: none; padding: 0.95rem 1.7rem; border-radius: 999px;
    border: 1px solid transparent; cursor: pointer;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  }
  .btn svg { width: 14px; height: 14px; flex: none; transition: transform 0.25s var(--ease); }
  .btn:hover svg { transform: translateX(3px); }
  .btn--solid { background: var(--raiz); color: var(--on-raiz); }
  .btn--solid:hover { background: var(--accent-deep); transform: translateY(-2px); }
  .btn--ghost { border-color: var(--hairline-strong); color: var(--ink); }
  .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--ground); }
  .btn--on-raiz { background: var(--on-raiz); color: var(--raiz); }
  .btn--on-raiz:hover { transform: translateY(-2px); background: #fff; }
  .btn--ghost-raiz { border-color: var(--raiz-hairline); color: var(--on-raiz); }
  .btn--ghost-raiz:hover { background: var(--on-raiz); color: var(--raiz); border-color: var(--on-raiz); }

  :where(a, button, input):focus-visible {
    outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px;
  }

  /* ---------- capítulos / fundos ---------- */
  .chapter { padding-block: var(--chapter-y); position: relative; }
  .chapter--cool { background: var(--ch-cool); }
  .chapter--warm { background: var(--ch-warm); }
  .chapter--raiz {
    background: var(--raiz-ground); color: var(--on-raiz);
    --hairline: var(--raiz-hairline); --ink-faint: var(--on-raiz-soft);
  }
  .chapter--espresso {
    background: var(--espresso-ground); color: var(--on-espresso);
    --hairline: var(--espresso-hairline); --ink-faint: var(--on-espresso-soft); --ink-soft: var(--on-espresso-soft);
  }

  .lede { font-size: var(--s-1); line-height: 1.55; color: var(--ink-soft); margin-top: 1.6rem; }
  .body-copy { color: var(--ink-soft); margin-top: 1.4rem; }
  .body-copy + .body-copy { margin-top: 1.1rem; }

  /* ---------- revelação ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal--l { transform: translateX(-26px); }
  .reveal--r { transform: translateX(26px); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  }

  /* ================= 01 · HERO ================= */
  .hero {
    position: relative;
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(4rem, 10vw, 8rem);
    overflow: clip;
  }
  .hero__grid {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    min-height: min(76vh, 720px);
  }
  @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; min-height: 0; } }

  .hero h1 { font-size: var(--s-4); max-width: 22ch; text-wrap: balance; }
  .hero h1 em { font-style: italic; font-weight: 400; color: var(--accent-text); }
  .hero__kicker {
    margin-top: 0.55rem;
    font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
  }

  .antithesis { margin-top: 2.4rem; padding-left: 1.5rem; border-left: 2px solid var(--accent-text); }
  .antithesis .a1 { font-size: var(--s-0); color: var(--ink-soft); line-height: 1.5; }
  .antithesis .a-wrap { min-height: 1.4em; margin: 0.2rem 0 0.4rem; }
  .antithesis .cycle {
    font-family: var(--font-display); font-style: italic; font-weight: 500;
    font-size: var(--s-2); color: var(--accent-text); display: inline-block;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .antithesis .cycle.swap { opacity: 0; transform: translateY(6px); }
  .antithesis .a2 { font-family: var(--font-display); font-size: var(--s-1); font-weight: 300; color: var(--ink); }

  .hero__actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
  .hero__context { margin-top: 2.6rem; max-width: 33rem; color: var(--ink-soft); font-size: var(--s-0); }

  /* símbolo arquitetônico — duas camadas */
  .hero__glyphs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
  .glyph { position: absolute; opacity: var(--glyph-opacity); will-change: transform; }
  .glyph--far {
    width: min(120vw, 1100px); right: -34vw; top: 50%;
    transform: translateY(-50%);
    filter: blur(2px);
    opacity: calc(var(--glyph-opacity) * 0.55);
    animation: driftFar 34s ease-in-out infinite alternate;
  }
  .glyph--near {
    width: min(48vw, 360px); right: 1vw; top: 20%;
    animation: driftNear 22s ease-in-out infinite alternate;
  }
  @keyframes driftFar {
    from { transform: translateY(-50%) translate(0, -14px) rotate(-1.5deg); }
    to   { transform: translateY(-50%) translate(-22px, 14px) rotate(1.5deg); }
  }
  @keyframes driftNear {
    from { transform: translate(0, -10px) rotate(2deg) scale(0.98); }
    to   { transform: translate(-12px, 10px) rotate(-2deg) scale(1.02); }
  }
  @media (prefers-reduced-motion: reduce) { .glyph { animation: none !important; } }
  @media (max-width: 900px) {
    .glyph--near { width: 150px; right: -10px; top: -8px; }
    .glyph--far { width: 150vw; right: -70vw; opacity: calc(var(--glyph-opacity) * 0.4); }
  }

  /* faixa de aviso (protótipo) */
  .note-strip {
    position: relative; z-index: 2;
    background: var(--ch-warm); color: var(--ink-soft);
    font-size: 0.78rem; letter-spacing: 0.04em; text-align: center;
    padding: 0.7rem var(--pad-x); border-block: 1px solid var(--hairline);
  }
  .note-strip b { color: var(--ink); font-weight: 600; }

  /* ================= 02 · A ORIGEM ================= */
  .origin__head { position: relative; z-index: 2; }
  .origin__axis {
    position: relative; z-index: 2;
    margin-top: clamp(2.5rem, 7vw, 5.5rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  .pole { position: relative; }
  .pole--future { padding-top: clamp(1.75rem, 5vw, 3.5rem); }
  .pole__kicker {
    font-size: var(--s--1); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 0.6rem;
  }
  .pole--future .pole__kicker { color: var(--accent-text); }
  .pole__word {
    font-family: var(--font-display); font-weight: 300; font-size: var(--s-2);
    line-height: 1.08; max-width: 13ch;
  }
  .pole__note { color: var(--ink-soft); margin-top: 0.9rem; font-size: 0.96rem; max-width: 25rem; }
  .pole__ex {
    margin-top: 0.9rem; font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .origin__fork {
    margin-top: 1.9rem;
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    gap: 0.55rem 1rem;
    max-width: 17rem;
  }
  .origin__fork-mark {
    grid-column: 1; grid-row: 1 / 3;
    width: 3.4rem; height: auto; color: var(--accent-text);
  }
  .origin__fork span {
    font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
  }
  .origin__fork .up { grid-column: 2; grid-row: 1; }
  .origin__fork .down { grid-column: 2; grid-row: 2; }

  .origin__synthesis {
    position: relative; z-index: 2;
    margin-top: clamp(4rem, 11vw, 7.5rem);
  }
  .origin__future {
    font-family: var(--font-display); font-weight: 300; font-size: var(--s-3); line-height: 1.12;
    color: var(--ink); max-width: 18ch;
  }
  .origin__future-sub { margin-top: 0.6rem; font-size: var(--s-1); color: var(--ink-soft); max-width: 30ch; }

  .origin__prompt { position: relative; z-index: 2; margin-top: clamp(2.5rem, 6vw, 4rem); }
  .origin__q {
    font-family: var(--font-display); font-weight: 300; font-style: italic;
    font-size: var(--s-1); line-height: 1.3; color: var(--ink); max-width: 30ch;
  }
  .origin__prompt .btn { margin-top: 1.6rem; }

  @media (max-width: 768px) {
    .origin__axis { grid-template-columns: 1fr; gap: clamp(2.5rem, 9vw, 3.5rem); margin-top: clamp(2rem, 8vw, 3rem); }
    .pole--future { padding-top: 0; }
    .pole__word { max-width: 18ch; }
    .pole__note { max-width: none; }
    .origin__synthesis { margin-top: clamp(3rem, 12vw, 4.5rem); }
  }

  /* ================= 03 · FRASE CONCEITUAL (RAIZ) ================= */
  .phrase { min-height: 88vh; display: flex; align-items: center; }
  .phrase__big {
    font-family: var(--font-display); font-weight: 300;
    font-size: var(--s-5); line-height: 1.12; letter-spacing: -0.02em;
    max-width: 20ch;
  }
  .phrase__big em { font-style: italic; color: #C9D9E0; }
  .phrase .eyebrow { color: var(--on-raiz-soft); }

  /* ================= 04 · NOSSO OLHAR ================= */
  .lens__layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4rem); position: relative; z-index: 2; }
  @media (min-width: 940px) {
    .lens__layout { grid-template-columns: 1.3fr 0.7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  }
  .lens__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); }
  .lens__row {
    width: 100%; text-align: left; font: inherit; color: inherit;
    background: none; border: 0; border-bottom: 1px solid var(--hairline);
    display: grid; grid-template-columns: 3.2rem 1fr; gap: 0.3rem 1.4rem;
    align-items: baseline;
    padding: clamp(1.2rem, 3vw, 2rem) 0;
    cursor: pointer;
    transition: padding-left 0.45s var(--ease), background 0.45s var(--ease);
  }
  .lens__n {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease);
  }
  .lens__t { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.16; }
  .lens__micro {
    grid-column: 2; font-size: 0.86rem; color: var(--ink-faint); max-width: 34rem;
    max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
    transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease), margin-top 0.4s var(--ease);
  }
  .lens__row[aria-pressed="true"] { padding-left: 1rem; background: var(--ch-warm-ghost); }
  .lens__row[aria-pressed="true"] .lens__n { color: var(--accent-text); }
  .lens__row[aria-pressed="true"] .lens__micro { max-height: 7rem; opacity: 1; margin-top: 0.55rem; }
  @media (hover: hover) and (min-width: 940px) {
    .lens__row:hover { padding-left: 1rem; background: var(--ch-warm-ghost); }
    .lens__row:hover .lens__n { color: var(--accent-text); }
    .lens__row:hover .lens__micro { max-height: 7rem; opacity: 1; margin-top: 0.55rem; }
  }
  .lens__media { position: relative; }
  @media (min-width: 940px) { .lens__media { position: sticky; top: 5.5rem; } }
  @media (max-width: 939px) {
    .lens__media {
      order: -1; position: sticky; top: 3.5rem; z-index: 3;
      margin-bottom: 1.2rem;
      background: var(--ground); padding-bottom: 0.4rem;
    }
    .lens__rows { border-top: none; }
    .lens__row[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--accent-text); }
  }
  .lens__whisper {
    font-family: var(--font-display); font-style: italic; font-weight: 300;
    font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft);
    margin-top: 1.1rem; max-width: 24rem;
  }

  /* ---- moldura de foto: placeholder tratado, pronto para trocar só o arquivo ---- */
  figure { margin: 0; }
  .photo {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: var(--photo-ar, 4 / 5);
  }
  .photo[data-photo="olhar"] { --photo-ar: 3 / 2; --photo-tone: color-mix(in srgb, var(--pedra) 20%, var(--ground)); --photo-cast: var(--pedra); }
  .photo[data-photo="people"] { --photo-ar: 1 / 1; --photo-tone: color-mix(in srgb, var(--linho) 52%, var(--ground)); --photo-cast: var(--linho); }
  .photo[data-photo="liberdade"] { --photo-ar: 4 / 5; --photo-tone: color-mix(in srgb, var(--espresso) 28%, var(--ground)); --photo-cast: var(--raiz); --photo-pos: 70% 46%; }
  .photo[data-photo="select"] { --photo-ar: 16 / 9; --photo-tone: color-mix(in srgb, var(--raiz) 24%, var(--ground)); --photo-cast: var(--pedra); }
  @media (max-width: 600px) {
    .photo[data-photo="olhar"] { --photo-ar: 4 / 3; }
    .photo[data-photo="liberdade"] { --photo-ar: 1 / 1; }
  }
  .photo__img {
    position: absolute; inset: 0; z-index: 1;
    background-color: var(--photo-tone, var(--ch-warm));
    background-image:
      radial-gradient(115% 85% at var(--photo-pos, 50% 42%),
        color-mix(in srgb, var(--photo-hi, var(--linho)) 55%, transparent) 0%, transparent 60%),
      repeating-linear-gradient(135deg, transparent 0 9px,
        color-mix(in srgb, var(--pedra) 13%, transparent) 9px 10px);
    transform: scale(var(--photo-scale, 1.04));
    transform-origin: var(--photo-pos, 50% 42%);
    transition: background-image 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .photo > img {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--photo-pos, 50% 42%);
    transform: scale(var(--photo-scale, 1));
    filter: saturate(var(--photo-sat, 1)) contrast(var(--photo-con, 1));
    transition: object-position 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
  }
  .photo:has(> img) .photo__img { display: none; }
  .photo__grade {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--espresso) 22%, transparent) 100%),
      color-mix(in srgb, var(--photo-cast, var(--pedra)) 7%, transparent);
    mix-blend-mode: multiply;
    transition: background 0.7s var(--ease);
  }
  .photo__grade::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 60px rgba(55, 48, 40, 0.2);
    outline: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    outline-offset: -1px;
  }
  /* enquadramentos de "Nosso olhar" — a empresa é a mesma, muda o olhar.
     5 leituras nitidamente diferentes: execução → relações → condução → cultura → sistema */
  .photo[data-frame="1"] { --photo-pos: 13% 52%; --photo-scale: 1.5;  --photo-cast: var(--pedra); --photo-sat: 0.98; --photo-con: 1.04; }
  .photo[data-frame="2"] { --photo-pos: 92% 45%; --photo-scale: 1.2;  --photo-cast: var(--linho); --photo-sat: 1;    --photo-con: 1; }
  .photo[data-frame="3"] { --photo-pos: 78% 42%; --photo-scale: 1.62; --photo-cast: var(--pedra); --photo-sat: 1;    --photo-con: 1.05; }
  .photo[data-frame="4"] { --photo-pos: 48% 50%; --photo-scale: 1.14; --photo-cast: var(--nevoa); --photo-sat: 0.96; --photo-con: 0.99; }
  .photo[data-frame="5"] { --photo-pos: 50% 50%; --photo-scale: 1.0;  --photo-cast: var(--nevoa); --photo-sat: 0.94; --photo-con: 0.98; }
  @media (prefers-reduced-motion: reduce) {
    .photo__img, .photo > img, .photo__grade { transition: none; }
  }

  /* ================= 05 · O MÉTODO (síntese) ================= */
  .mflow {
    --mf-node: 26px;
    list-style: none; padding: 0;
    margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
    display: grid; grid-template-columns: repeat(6, 1fr);
    position: relative;
  }
  .mflow::before {   /* fio contínuo: do centro do 1º símbolo ao centro do 6º */
    content: ""; position: absolute;
    left: calc(100% / 12); right: calc(100% / 12);
    top: calc(var(--mf-node) / 2);
    height: 1px; background: var(--hairline-strong);
  }
  .mflow li {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.7rem; padding: 0 0.4rem;
  }
  .mflow__node {
    width: var(--mf-node); height: var(--mf-node); flex: none;
    background: var(--sym-url) center / contain no-repeat;
    position: relative; z-index: 1;
    box-shadow: 0 0 0 7px var(--ch-warm);   /* "corta" o fio atrás do símbolo */
  }
  .mflow__n {
    font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.06em;
    color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .mflow__v {
    font-family: var(--font-display); font-weight: 300; line-height: 1.12;
    font-size: clamp(1rem, 1.7vw, 1.4rem); color: var(--ink);
  }
  .mflow__cta { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
  @media (max-width: 768px) {
    .mflow { grid-template-columns: 1fr; margin-top: clamp(2rem, 8vw, 2.75rem); }
    .mflow::before {
      left: calc(var(--mf-node) / 2); right: auto;
      top: calc(var(--mf-node) / 2); bottom: calc(var(--mf-node) / 2);
      width: 1px; height: auto;
    }
    .mflow li {
      flex-direction: row; align-items: center; text-align: left;
      gap: 1rem; padding: 0.7rem 0;
    }
    .mflow__n { order: 3; margin-left: auto; }
  }

  .terr-link { position: relative; z-index: 2; margin-top: clamp(2.5rem, 6vw, 4rem); }
  .terr-link p {
    font-family: var(--font-display); font-weight: 300;
    font-size: var(--s-1); line-height: 1.4; color: var(--ink-soft);
  }
  .terr-link b { font-weight: 500; font-style: italic; color: var(--ink); }

  /* ================= 06 · TERRITÓRIOS PEOPLE + SELECT ================= */
  .territories { position: relative; z-index: 2; display: flex; min-height: 84vh; }
  .terr {
    flex: 1 1 50%; min-width: 0;
    display: flex; flex-direction: column; gap: 1.8rem; justify-content: space-between;
    padding: clamp(2rem, 5vw, 4.5rem);
    text-decoration: none; position: relative; overflow: hidden;
    transition: flex-grow 0.55s var(--ease);
  }
  .terr--people { background: var(--ch-cool); color: var(--ink); }
  .terr--select { background: var(--raiz-ground); color: var(--on-raiz); --ink-faint: var(--on-raiz-soft); }
  .terr__top { display: flex; flex-direction: column; gap: 1.4rem; }
  .terr__label {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  }
  .terr--people .terr__label { color: var(--accent-text); }
  .terr--select .terr__label { color: #C9D9E0; }
  .terr__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.06; }
  .terr__sub { font-size: 0.96rem; color: var(--ink-soft); max-width: 30rem; }
  .terr--select .terr__sub { color: var(--on-raiz-soft); }
  .terr__verbs {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem;
    font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  }
  .terr__verbs span { position: relative; }
  .terr__verbs span + span::before { content: "·"; position: absolute; left: -0.68rem; opacity: 0.6; }
  .terr__photo { margin-top: 0.5rem; }
  .terr__photo .photo { width: min(100%, 380px); }
  @media (max-width: 860px) { .terr__photo .photo { width: min(100%, 460px); } }
  .terr__ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }
  .terr__cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 0.75rem 1.2rem; border-radius: 999px; border: 1px solid currentColor;
    opacity: 0.72; transition: opacity 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
  }
  .terr--people .terr__cta.is-primary { background: var(--raiz); color: var(--on-raiz); border-color: var(--raiz); }
  .terr--select .terr__cta.is-primary { background: var(--on-raiz); color: var(--raiz); border-color: var(--on-raiz); }
  .terr:hover .terr__cta, .terr:focus-visible .terr__cta { opacity: 1; }
  @media (hover: hover) and (min-width: 861px) {
    .territories:hover .terr { flex-grow: 0.82; }
    .territories .terr:hover { flex-grow: 1.22; }
  }
  @media (max-width: 860px) {
    .territories { flex-direction: column; }
    .terr { min-height: 66vh; }
  }

  /* ================= 07 · MANIFESTO (ESPRESSO) ================= */
  .manifesto { position: relative; overflow: clip; }
  .manifesto__glyph {
    position: absolute; z-index: 1; pointer-events: none;
    width: min(90vw, 780px); left: -22vw; bottom: -30%;
    opacity: 0.06;
    animation: driftNear 40s ease-in-out infinite alternate;
  }
  @media (prefers-reduced-motion: reduce) { .manifesto__glyph { animation: none; } }
  .manifesto__inner { position: relative; z-index: 2; }
  .manifesto__big {
    font-family: var(--font-display); font-weight: 300;
    font-size: var(--s-4); line-height: 1.14; max-width: 22ch;
  }
  .manifesto__big .soft { color: var(--on-espresso-soft); }
  .manifesto .body-copy { max-width: 38rem; }

  /* ================= 08 · DEVOLVEMOS A LIBERDADE ================= */
  .freedom__grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3.5rem);
  }
  @media (min-width: 861px) {
    .freedom__grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: clamp(2.5rem, 6vw, 5rem); }
    .freedom__text { padding-top: clamp(1rem, 5vw, 4rem); }
    .freedom__photo { margin-bottom: clamp(-9rem, -8vw, -4rem); position: relative; z-index: 3; }
  }
  .freedom__h { font-family: var(--font-display); font-weight: 300; font-size: var(--s-3); line-height: 1.12; }
  .freedom__h em { font-style: italic; color: var(--accent-text); }

  /* ================= 09 · DECISÃO ================= */
  .decisions { position: relative; z-index: 2; margin-top: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--hairline-strong); }
  .decision {
    display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 2rem; align-items: center;
    padding: clamp(2rem, 5vw, 3.4rem) 0;
    border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink);
    transition: padding-left 0.45s var(--ease), background 0.45s var(--ease);
  }
  .decision:hover, .decision:focus-visible { padding-left: 1.2rem; background: var(--ch-warm-ghost); }
  .decision__k { grid-column: 1; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.08; }
  .decision__d { grid-column: 1; color: var(--ink-soft); font-size: 0.97rem; margin-top: 0.5rem; max-width: 46ch; }
  .decision__cta {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
    font-size: 0.88rem; font-weight: 600; color: var(--accent-text);
    display: inline-flex; align-items: center; gap: 0.5rem;
    opacity: 0.7; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .decision:hover .decision__cta { opacity: 1; transform: translateX(4px); }
  @media (max-width: 620px) {
    .decision { grid-template-columns: 1fr; }
    .decision__cta { grid-column: 1; grid-row: auto; margin-top: 1rem; }
  }

  /* ================= 10 · CTA FINAL ================= */
  .final { text-align: left; }
  .final h2 { font-size: var(--s-4); max-width: 17ch; }
  .final h2 em { font-style: italic; color: #C9D9E0; }
  .final .btn { margin-top: 2.4rem; }

  /* bloco editorial de contato — abaixo do botão do CTA final */
  .cta-contact {
    margin-top: clamp(2rem, 3.6vw, 2.5rem);   /* respiro do botão: ~32–40px */
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem clamp(1.6rem, 4vw, 2.75rem);
  }
  .cta-contact__item {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .cta-contact__item + .cta-contact__item {
    border-left: 1px solid var(--espresso-hairline);
    padding-left: clamp(1.6rem, 4vw, 2.75rem);
  }
  .cta-contact__label {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--on-espresso-soft);
  }
  .cta-contact__value {
    position: relative;
    align-self: flex-start;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--on-espresso);
    transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
  }
  .cta-contact__value::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s var(--ease);
  }
  .cta-contact__value:hover {
    color: var(--linho);
    opacity: 0.92;
  }
  .cta-contact__value:hover::after { transform: scaleX(1); }
  .cta-contact__value:focus-visible {
    outline: 2px solid var(--linho);
    outline-offset: 3px;
    border-radius: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-contact__value::after { transition: none; }
  }
  @media (max-width: 768px) {
    .cta-contact { flex-direction: column; gap: 1.35rem; }
    .cta-contact__item + .cta-contact__item {
      border-left: 0;
      padding-left: 0;
    }
  }

  /* ================= FOOTER ================= */
  .site-footer {
    background: var(--espresso-ground); color: var(--on-espresso-soft);
    padding-block: clamp(3.5rem, 8vw, 5.5rem);
  }
  .footer__top {
    display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; justify-content: space-between;
    padding-bottom: 2.5rem; border-bottom: 1px solid var(--espresso-hairline);
  }
  .footer__brand img { width: 124px; opacity: 0.9; margin-bottom: 1rem; }
  .footer__brand .dom { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
  .footer__cols { display: flex; flex-wrap: wrap; gap: 2.5rem 3.5rem; }
  .footer__col h4 {
    font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--on-espresso); margin: 0 0 0.9rem;
  }
  .footer__col a, .footer__col span {
    display: block; text-decoration: none; color: var(--on-espresso-soft); font-size: 0.9rem;
    padding: 0.28rem 0; transition: color 0.2s var(--ease);
  }
  .footer__col a:hover { color: var(--on-espresso); }
  .footer__col .soon { opacity: 0.55; }
  .footer__legal {
    display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
    padding-top: 2rem; font-size: 0.78rem;
  }
  .footer__flag { color: var(--accent-on-espresso); }

  /* ---------- toast ---------- */
  .toast {
    position: fixed; left: 50%; bottom: 1.6rem; transform: translate(-50%, 160%);
    background: var(--espresso-ground); color: var(--on-espresso);
    border: 1px solid var(--espresso-hairline); padding: 0.9rem 1.3rem; border-radius: 999px;
    font-size: 0.85rem; z-index: 220; transition: transform 0.5s var(--ease);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5); max-width: calc(100vw - 2rem);
  }
  .toast[data-show="true"] { transform: translate(-50%, 0); }
  .toast code { font-family: ui-monospace, Menlo, monospace; color: var(--accent-on-espresso); font-size: 0.8rem; }

  /* =====================================================================
     TEMPLATE MOBILE — pensado para o celular, não "encolher o desktop"
     ===================================================================== */
  @media (max-width: 1024px) {
    .theme-toggle { width: 40px; height: 40px; }
    .menu-btn { width: 44px; height: 44px; }
  }

  @media (max-width: 768px) {
    :root { --chapter-y: clamp(4rem, 15vw, 6rem); }

    /* header enxuto */
    .site-header__inner { padding: 0.7rem var(--pad-x); gap: 0.75rem; }
    .brand img { width: 26px; }
    .brand span { font-size: 1.14rem; }

    /* hero */
    .hero { padding-top: 2rem; padding-bottom: 3rem; }
    .hero__grid { gap: 1.5rem; }
    .hero__aside { display: none; }
    .glyph--near { width: 116px; right: -6px; top: -6px; }
    .antithesis { margin-top: 1.8rem; padding-left: 1.1rem; }
    .hero__context { margin-top: 2rem; }
    .hero__actions { margin-top: 2rem; gap: 0.7rem; }
    .hero__actions .btn { flex: 1 1 100%; justify-content: center; }

    /* CTAs largos e confortáveis */
    .btn { padding: 1rem 1.6rem; min-height: 3rem; }
    .origin__prompt .btn, .final .btn { width: 100%; justify-content: center; }


    /* territórios: blocos altos, cores próprias, CTAs grandes */
    .territories { min-height: 0; }
    .terr { min-height: 68vh; padding: clamp(2rem, 8vw, 2.75rem) var(--pad-x); gap: 1.6rem; }
    .terr__title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
    .terr__ctas { flex-direction: column; align-items: stretch; }
    .terr__cta { opacity: 1; justify-content: center; padding: 0.95rem 1.2rem; min-height: 3rem; }

    /* decisão: uma por bloco, área toda tocável */
    .decision { padding: 1.8rem 0; }
    .decision:hover, .decision:focus-visible { padding-left: 0; }
    .decision__cta { opacity: 1; }

    /* manifesto: cada frase com ar; símbolo mais discreto */
    .manifesto__big { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.22; }
    .manifesto__glyph { width: min(78vw, 460px); opacity: 0.045; bottom: -18%; left: -26vw; }

    /* frase-conceito */
    .phrase { min-height: 68vh; }
    .phrase__big { max-width: 16ch; }

    /* liberdade: texto e depois foto */
    .freedom__grid { gap: 1.8rem; }

    /* rodapé */
    .footer__top { gap: 2rem; }
    .footer__cols { gap: 1.8rem 2.5rem; }
  }

  @media (max-width: 380px) {
    :root { --pad-x: 1.15rem; }
    .brand small { display: none; }
  }