/* ============================================================
   CG LUB — BASE E COMPONENTES
   Depende de tokens.css. Cada bloco aqui traduz um maneirismo
   real da brochura impressa para a tela.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-soft);
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--lime);text-decoration:none}
a:hover{color:var(--lime-glow)}

::selection{background:var(--lime);color:var(--text-ink)}

:focus-visible{
  outline:2px solid var(--lime-glow);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- LAYOUT ------------------------------------------ */

.u-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.u-section{padding-block:var(--section-y);position:relative;overflow:clip}
.u-measure{max-width:var(--maxw-text)}

/* ---------- TIPOGRAFIA -------------------------------------- */

.t-h2,.t-h3,.t-h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--text);
  margin:0;
  text-wrap:balance;
}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-h);letter-spacing:var(--track-h)}
.t-h3{font-size:var(--t-h3);line-height:var(--lh-h);letter-spacing:var(--track-h)}
.t-h4{font-size:var(--t-h4);line-height:1.3}

/* na brochura o titulo troca de cor no meio da frase */
.t-lime{color:var(--lime)}
.t-amber{color:var(--amber)}

.t-lead{
  font-size:var(--t-lead);line-height:1.5;color:var(--text);
  font-weight:400;margin:var(--s-3) 0 0;
}
.t-body{font-size:var(--t-body);color:var(--text-soft);margin:var(--s-4) 0 0}
.t-small{font-size:var(--t-small);color:var(--text-mute)}

/* olho de secao — versalete espacado, sempre acima do titulo */
.t-eyebrow{
  display:inline-block;
  font-family:var(--font-text);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:var(--s-3);
}

/* ---------- ETIQUETA ----------------------------------------
   No folder cada bloco abre com um titulo lime em caixa alta
   correndo sobre um filete. Aqui o filete sai pela direita.
   Usada nos pilares da Empresa e no Bora!. */

.c-etiqueta{
  display:flex;align-items:center;gap:var(--s-3);
  margin:0 0 var(--s-4);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-small);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lime);
}
.c-etiqueta::after{
  content:"";flex:1;height:1px;
  background:var(--line-strong);
}


/* ---------- FRASE-DESTAQUE ----------------------------------
   No folder: Marine Bold Obliqua em ambar, tres linhas centradas entre
   si e duas setas vazadas — contorno de 0,5pt, nao preenchimento —
   com a altura de ~1,5x o bloco de texto. O desenho das setas fica
   uma vez so no <defs> da pagina (#cg-setas).

   Numeros do impresso: corpo 17,2pt, setas 98pt de altura (5,7em)
   e 107pt de largura. Aqui as setas descem para 4,6em para o bloco
   nao ficar mais alto que o necessario na tela.

   O bloco (setas + texto) fica centralizado na pagina. As setas
   abrem a frase na Empresa e fecham a de Onde atuamos (--dir), como
   nas paginas 1 e 2 do folder.

   As linhas sao <span> em bloco, nao <br>: no celular elas viram
   texto corrido e quebram onde couber. */

.c-destaque{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(var(--s-4), 2vw, var(--s-6));
  /* descola do bloco anterior (pilares / grade de mapas) — sem
     isso a frase colava direto na grade de cima */
  margin:clamp(var(--s-7), 6vw, var(--s-9)) 0 0;
  font-family:var(--font-italic);
  font-style:italic;font-weight:700;
  font-size:clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height:1.22;
  color:var(--amber-folder);
}
.c-destaque__texto{text-align:center}
.c-destaque__texto > span{display:block}

.c-destaque__setas{
  flex:none;
  height:4.6em;width:auto;
  fill:none;
  stroke:var(--amber-folder);
  stroke-width:1.5;
}

@media (max-width:640px){
  .c-destaque{gap:var(--s-3)}
  .c-destaque__texto{text-align:left}
  .c-destaque__texto > span{display:inline}
  .c-destaque__setas{height:3.2em}
}


/* ---------- ASSINATURA DA MARCA ------------------------------
   LUBRAX  CG LUB | Distribuidor Autorizado — a mesma no menu, no
   hero e no rodape. LUBRAX e o texto sao as duas pecas do selo do
   folder, separadas dos proprios tracos. So ha filete antes de
   "Distribuidor Autorizado". Tudo deriva de --a-h, a altura da logo:

     LUBRAX                  0,435 x a logo
     Distribuidor Autorizado a mesma altura de LUBRAX, alinhado em
                             cima e embaixo com ele; a caixa fica na
                             altura da logo, para o filete medir o
                             mesmo que ela                         */

.c-assinatura{
  --a-h:46px;
  --a-gap:var(--s-5);
  display:flex;align-items:center;gap:var(--a-gap);
}
.c-assinatura img{display:block;width:auto}
.c-assinatura__lubrax{height:calc(var(--a-h) * .435)}
.c-assinatura__cglub{height:var(--a-h)}
.c-assinatura__da{
  height:var(--a-h);
  padding-block:calc(var(--a-h) * .2825);   /* (1 - 0,435) / 2 */
  padding-left:var(--a-gap);
  border-left:1px solid var(--line-soft);
}

/* ---------- REDES SOCIAIS -----------------------------------
   Icones em circulo com filete, como no folder. */

.c-redes{display:flex;gap:var(--s-3)}
.c-redes a{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--text-soft);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.c-redes a:hover{color:var(--lime);border-color:var(--line-strong)}
.c-redes svg{width:18px;height:18px;fill:currentColor}

/* ---------- BOTOES ------------------------------------------
   Ambar = acao principal, sempre com texto escuro (branco sobre
   ambar da 1.91:1, reprovado). Lime = acao secundaria, so em
   contorno. Nunca dois ambares na mesma dobra.               */

.c-btn{
  --btn-h:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  height:var(--btn-h);padding-inline:var(--s-6);
  font-family:var(--font-text);
  font-size:var(--t-small);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:0;border-radius:var(--r-pill);
  cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),
             background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.c-btn:active{transform:translateY(1px)}

.c-btn--primary{background:var(--amber);color:var(--text-ink)}
.c-btn--primary:hover{background:var(--amber-soft);box-shadow:var(--glow-amber)}

.c-btn--secondary{
  background:transparent;color:var(--lime);
  box-shadow:inset 0 0 0 1.5px var(--line-strong);
}
.c-btn--secondary:hover{
  background:rgba(168,207,69,.10);
  box-shadow:inset 0 0 0 1.5px var(--lime);
  color:var(--lime-glow);
}

.c-btn--whats{background:var(--lubrax);color:var(--text)}
.c-btn--whats:hover{background:var(--lubrax-lit)}

.c-btn--sm{--btn-h:40px;padding-inline:var(--s-4);font-size:var(--t-label)}
.c-btn--block{width:100%}

/* seta que desliza no hover — unico ornamento de movimento */
.c-btn__arrow{transition:transform var(--dur) var(--ease-out)}
.c-btn:hover .c-btn__arrow{transform:translateX(4px)}

/* ---------- CARD --------------------------------------------
   Filete lime fino, cantos superiores redondos e base reta.  */

.c-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--s-6);
  position:relative;
  transition:border-color var(--dur) var(--ease),
             background var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}

/* card de segmento: barra de cor no topo, uma cor por publico */
.c-seg{
  background:var(--surface);
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid var(--line-soft);
  display:flex;flex-direction:column;
}
.c-seg::before{
  content:"";display:block;height:5px;
  background:var(--seg,var(--lime));
}
.c-seg--revenda{--seg:var(--seg-revenda)}
.c-seg--transporte{--seg:var(--seg-transporte)}
.c-seg--industria{--seg:var(--seg-industria)}
.c-seg__body{padding:var(--s-6);flex:1;display:flex;flex-direction:column}
.c-seg__list{list-style:none;padding:0;margin:var(--s-4) 0 0;font-size:var(--t-small)}
.c-seg__list li{
  padding-left:var(--s-5);position:relative;
  margin-bottom:var(--s-2);color:var(--text-soft);
}
.c-seg__list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;
  background:var(--seg,var(--lime));
}

/* ---------- MASCARA DE ARCO ---------------------------------
   A brochura corta TODAS as fotos com arcos de raio enorme.
   Aqui isso vira um clip-path elipsoide, nao uma imagem fixa. */

.c-arc{position:relative;overflow:hidden;isolation:isolate}
.c-arc > img{width:100%;height:100%;object-fit:cover}

/* canto inferior direito puxado para dentro */
.c-arc--br{border-radius:0 0 68% 0 / 0 0 36% 0}

/* verniz verde por cima da foto, para o texto sempre ganhar */
.c-arc::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(7,20,9,.10) 0%,
    rgba(7,20,9,.55) 65%,
    rgba(7,20,9,.88) 100%);
}
/* verniz curto: liga a base da foto a superficie do card, sem escurecer o assunto */
.c-arc--soft::after{
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(7,20,9,.06) 55%,
    rgba(12,36,17,.72) 100%);
}

/* ---------- CURVAS NEON --------------------------------------
   As linhas finas que atravessam as paginas. Decorativas:
   aria-hidden, sem peso semantico, sem custo de imagem.      */

.c-curves{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
}
.c-curves path{
  fill:none;
  stroke:var(--lime);
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;   /* traco nao engorda ao escalar */
  stroke-width:var(--w-mid);
  opacity:var(--o-mid);
}

/* --- escala de espessura ---------------------------------------
   Degraus bem separados. A diferenca precisa ser obvia a
   distancia: se duas linhas parecem iguais, viram ruido em vez
   de hierarquia.                                                */

.c-curves{
  --w-lead:  3;     --o-lead:  1;      /* a condutora            */
  --w-mid:   1.5;   --o-mid:   .62;    /* acompanhamento         */
  --w-faint: .9;    --o-faint: .34;    /* fundo                  */
}

.c-curves .is-lead { stroke-width:var(--w-lead);  opacity:var(--o-lead)  }
.c-curves .is-mid  { stroke-width:var(--w-mid);   opacity:var(--o-mid)   }
.c-curves .is-faint{ stroke-width:var(--w-faint); opacity:var(--o-faint) }

/* ---------- FORMULARIO --------------------------------------- */

.c-field{margin-bottom:var(--s-4)}
.c-label{
  display:block;font-size:var(--t-label);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:var(--s-2);
}
.c-input,.c-select,.c-textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  color:var(--text);
  font-family:var(--font-text);font-size:var(--t-body);
  padding:var(--s-3) var(--s-4);
  min-height:48px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.c-textarea{min-height:120px;resize:vertical}
.c-input::placeholder,.c-textarea::placeholder{color:var(--text-mute)}
.c-input:focus,.c-select:focus,.c-textarea:focus{
  outline:none;border-color:var(--lime);box-shadow:var(--glow-lime);
}
.c-input[aria-invalid="true"]{border-color:#E86A5A}
.c-check{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--t-small)}
.c-check input{margin-top:.25em;accent-color:var(--lime);width:18px;height:18px;flex:none}

/* ---------- RESPONSIVO --------------------------------------- */

@media (max-width:560px){
  .c-btn{width:100%}
}