/* ============================================================
   BASE
   Reset, variáveis de marca, tipografia, botões e cunhas de 50°.
   ============================================================ */

:root{
  --navy:#09324a; --navy-d:#061c29; --navy-l:#0e4260; --navy-x:#04121b;
  --yellow:#ead90a; --yellow-d:#c9ba08;
  --cream:#eae8e1; --cream-l:#f5f4ef;
  --sand:#bfbbac; --opal:#afd0c9; --teal:#1c6f80;
  --white:#fff;
  --ink:#09324a; --ink-2:#4d6a7c; --ink-3:#50697a;
  --line:#d6d3c8;
  --f:'Chivo',system-ui,sans-serif;
  --fb:'Boldonse','Chivo',sans-serif;
  --wrap:1320px; --px:clamp(20px,4vw,64px);

  /* Medidas do topo, alinhadas ao site da Osy Implementos para as tres
     frentes abrirem com o mesmo cabecalho. Sao alturas fixas, e nao
     padding: assim a barra nao cresce junto com o conteudo dela.        */
  --altura-barra-grupo:38px;
  --altura-header:76px;
  --altura-header-compacto:66px;
  /* o quanto o topo ocupa antes do conteudo comecar */
  --topo-fixo:calc(var(--altura-barra-grupo) + var(--altura-header));

  /* Um passo mais claro que o --navy do texto, para a lateral da tela nao
     pesar. E o mesmo valor usado no site da Osy Implementos: as duas
     frentes rolam com a mesma barra.                                     */
  --navy-rolagem:#135579;
}

/* Barra de rolagem da pagina, igual a da Implementos: trilho creme, polegar
   navy medio com raio e uma borda do proprio trilho, que faz o polegar
   parecer flutuar. As barras horizontais escondidas (trilhos de chips, abas
   do heroi) seguem escondidas: seletor de classe ganha do seletor global. */
html{scrollbar-width:thin;scrollbar-color:var(--navy-rolagem) var(--cream)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--cream)}
::-webkit-scrollbar-thumb{background:var(--navy-rolagem);border-radius:6px;border:2px solid var(--cream)}
::-webkit-scrollbar-thumb:hover{background:var(--navy)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--cream);font-family:var(--f);font-size:19.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--px)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- tipografia display ---------- */
.d1{font-weight:900;font-size:clamp(50.5px,7.4vw,112px);line-height:.92;letter-spacing:-.045em;text-wrap:balance}
.d2{font-weight:900;font-size:clamp(37px,4.6vw,73.5px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.d3{font-weight:800;font-size:clamp(27.5px,2.6vw,41.5px);line-height:1.08;letter-spacing:-.025em}
.lead{font-size:clamp(19.5px,1.5vw,24px);line-height:1.5;max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--yellow);flex:none}
.eyebrow.on-yellow::before{background:var(--navy)}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--yellow);color:var(--navy);font-weight:800;font-size:17px;letter-spacing:.01em;padding:16px 26px;border:2px solid var(--yellow);transition:transform .16s,background .16s}
.btn:hover{background:var(--white);border-color:var(--white);transform:translateY(-2px)}
.btn--out{background:none;color:var(--cream);border-color:rgba(234,232,225,.45)}
.btn--out:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.btn--dark{background:var(--navy);color:var(--yellow);border-color:var(--navy)}
.btn--dark:hover{background:var(--navy-d);border-color:var(--navy-d);color:var(--yellow)}
.btn--sm{padding:10px 16px;font-size:15px}
.btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- cunhas de 50° ---------- */
.cut-y{background:linear-gradient(140deg,var(--navy) 0 49.6%,var(--yellow) 49.6% 100%)}
.cut-c{background:linear-gradient(140deg,var(--navy) 0 49.6%,var(--cream) 49.6% 100%)}
.sym{position:absolute;pointer-events:none;opacity:.055;color:var(--cream)}
.sym svg{width:100%;height:auto;display:block}