/* =========================================================
   L&L INCORPORAÇÕES · TOKENS
   Paleta da marca, sem invenção e sem gradiente:
     terracota #CC7F52   ·   verde-oliva #404939
   O chão do site é o próprio oliva, escurecido só o
   suficiente para o texto branco respirar. Não é preto.
   Toda superfície é cor sólida.
   ========================================================= */

:root{
  /* --- oliva: o chão e as superfícies --- */
  --bg:#2F3729;            /* oliva escuro, branco a 11,3:1 */
  --bg-2:#394233;
  --bg-3:#3E4738;
  --bg-4:#4E5947;
  --olive:#404939;         /* oliva exato da marca */
  --olive-lit:#55614B;

  /* --- terracota: o acento --- */
  --ac:#CC7F52;            /* terracota exata da marca */
  --ac-2:#EFB68F;          /* texto terracota: passa AA nas quatro superfícies oliva */
  --ac-3:#8C4D27;          /* texto terracota sobre papel, 5,6:1 */
  --ac-deep:#7A4626;       /* superfície terracota escura */
  --on-ac:#241202;         /* texto sobre a terracota, 5,8:1 */

  --ac-text:#EFB68F;
  --ac-text-h:#F7CCAE;

  /* --- texto --- */
  --fg:#F4F5F1;
  --fg-2:rgba(244,245,241,.74);   /* 7,0:1 */
  --fg-3:rgba(244,245,241,.68);   /* 4,9:1 na superfície mais clara */

  /* --- linhas e vidro --- */
  --line:rgba(244,245,241,.12);
  --line-2:rgba(244,245,241,.22);
  --glass:rgba(47,55,41,.66);
  --glass-2:rgba(38,45,33,.86);

  --tint-1:rgba(244,245,241,.05);
  --tint-2:rgba(244,245,241,.08);
  --tint-3:rgba(244,245,241,.15);
  --hi:rgba(244,245,241,.08);

  /* Véu sólido sobre foto: uma cor, sem transição. */
  --veil:rgba(30,36,25,.62);
  --veil-strong:rgba(30,36,25,.82);
  /* No hero o render precisa aparecer: véu mais leve, mas
     ainda com o branco acima de 7:1 nas áreas claras. */
  --veil-hero:rgba(30,36,25,.70);

  /* --- raios --- */
  --r-xl:30px;
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;
  --shell:6px;

  /* --- tipografia --- */
  --f-display:"Outfit","Helvetica Neue",Arial,sans-serif;
  --f-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;

  /* --- espaço --- */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px;  --s6:32px;  --s7:48px;  --s8:64px;
  --s9:96px;  --s10:128px;--s11:168px;--s12:220px;

  /* --- grid --- */
  --maxw:1320px;
  --gut:clamp(20px,5vw,64px);

  /* --- movimento --- */
  --e:cubic-bezier(.32,.72,0,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
  --t-fast:.35s var(--e);
  --t:.7s var(--e);
  --t-slow:1.1s var(--e);

  --nav-h:88px;
  --z-dock:50;
  --z-menu:70;
  --z-nav:80;
  --z-grain:90;
  --z-loader:120;
}

/* =========================================================
   SEÇÃO CLARA
   Mídia em fundo escuro, leitura em fundo claro.
   No claro a elevação sobe: o cartão é mais claro que o chão.
   ========================================================= */
.sec--paper{
  --bg:#ECEFE6;            /* papel com nuance oliva, não creme */
  --bg-2:#F7F9F4;
  --bg-3:#FDFEFB;
  --bg-4:#FFFFFF;

  --fg:#1B2116;            /* 14,2:1 sobre o papel */
  --fg-2:rgba(27,33,22,.74);
  --fg-3:rgba(27,33,22,.64);

  --ac-text:#8C4D27;
  --ac-text-h:#6E381A;
  /* Laranja vivo só para título grande: 3,37:1 sobre o papel,
     acima do mínimo de 3:1 para texto desse corpo. O terracota
     da marca dá 2,68:1 e não serve nem para título. */
  --ac-titulo:#C06A36;

  --line:rgba(27,33,22,.14);
  --line-2:rgba(27,33,22,.24);

  --tint-1:rgba(27,33,22,.05);
  --tint-2:rgba(27,33,22,.08);
  --tint-3:rgba(27,33,22,.13);
  --hi:rgba(255,255,255,.7);

  background:var(--bg);
  color:var(--fg);
}

@media (max-width:760px){
  :root{ --nav-h:70px; --r-xl:24px; --r-lg:18px; }
}