/* ============================================================
   CG LUB — LANDING PAGE
   Depende de tokens.css, ui.css e motion.css, nesta ordem.
   Aqui mora so o que e especifico desta pagina, na ordem em que
   aparece. Componente que se repetir em outra secao sobe para
   ui.css.

   O hero e uma reconstrucao da capa da brochura (pag. 1).
   Toda medida abaixo veio do PDF, nao de estimativa:
     - H1        Marine-Bold 34,69pt numa pagina de 595,28pt
                 entrelinha 30,55pt  =  0,88 do corpo
     - apoio     Marine 17,79pt      =  0,51 do corpo do H1
     - alinhamento a direita, margem direita de 58pt (9,7%)
     - 3 curvas neon #A8CF45 de 0,75pt, todas de raio 544,62pt
       (0,915 da largura da pagina) e centros diferentes
     - brilho verde #00D200 saindo do canto inferior esquerdo
   ============================================================ */

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* pula direto para o conteudo — so aparece no foco por teclado */
.u-skip{
  position:absolute;left:var(--s-4);top:calc(var(--s-4) * -6);
  z-index:calc(var(--z-header) + 1);
  background:var(--lime);color:var(--text-ink);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);
  font-size:var(--t-small);font-weight:700;
  transition:top var(--dur) var(--ease-out);
}
.u-skip:focus{top:var(--s-4);color:var(--text-ink)}


/* ============================================================
   HEADER
   Transparente sobre o hero; ao rolar ganha fundo e filete.
   As classes de estado (.is-stuck, .is-hidden) vem de motion.js.
   ============================================================ */

.c-header__in{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--header-h);
  display:flex;align-items:center;gap:var(--s-5);
}

/* a assinatura (.c-assinatura, ui.css) com a logo em ate 54px */
.c-header__brand{--a-h:clamp(40px,3.9vw,54px);flex:none}

.c-header__nav{
  margin-left:auto;
  display:flex;align-items:center;gap:var(--s-6);
}
.c-header__nav a{
  color:var(--text);
  font-size:var(--t-small);font-weight:700;
  letter-spacing:.04em;
  position:relative;padding-block:var(--s-2);
}
.c-header__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--lime);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease-out);
}
.c-header__nav a:hover{color:var(--lime)}
.c-header__nav a:hover::after{transform:scaleX(1)}

.c-header__cta{flex:none}
/* o item de WhatsApp existe so no painel do celular */
.c-header__zap{display:none}

/* botao hamburguer — so existe no celular */
.c-header__burger{
  display:none;margin-left:auto;
  width:44px;height:44px;flex:none;
  background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--text);
  cursor:pointer;
  align-items:center;justify-content:center;
}


/* ============================================================
   HERO
   Quatro camadas empilhadas, de baixo para cima:
     1. fundo quase preto + brilho verde no canto inferior esquerdo
     2. foto recortada pelo arco gigante
     3. as tres curvas neon, que passam POR CIMA da foto
        (mesma ordem do PDF)
     4. o texto
   ============================================================ */

.s-hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  min-height:clamp(620px, 100svh, 980px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--header-h) + var(--s-7)) var(--s-8);
  background:var(--bg-deep);
}

/* --- camada 1: fundo e brilho ------------------------------- */

.s-hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(120% 90% at 100% 0%,  #000000 0%, transparent 60%),
    radial-gradient(58% 46% at -6% 103%,
      color-mix(in srgb, var(--green-glow) 88%, transparent) 0%,
      color-mix(in srgb, var(--green-glow) 34%, transparent) 40%,
      transparent 74%),
    radial-gradient(90% 70% at 6% 118%,
      color-mix(in srgb, var(--green-glow) 26%, transparent) 0%,
      transparent 68%),
    linear-gradient(160deg, #000000 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

/* --- camada 2: a foto no arco -------------------------------- */

.s-hero__art{position:absolute;inset:0;z-index:-2;pointer-events:none}

.s-hero__photo{
  position:absolute;inset:0;
  clip-path:url(#cg-arco-hero);
  /* a foto e posicionada em unidades desta caixa (cqw/cqh) */
  container-type:size;
}

/* No original o caminhao fica a direita, e o arco so mostra a metade
   esquerda. A foto entra espelhada (a imagem e gerada, sem texto que
   denuncie).

   ANCORADA NO CAMINHAO. A foto e dimensionada pela altura do hero e a
   tela varia de proporcao: com a imagem alinhada por uma borda, o
   que sobra e cortado do outro lado, e numa tela mais estreita o
   caminhao saia de cena pela esquerda. Aqui a posicao e calculada
   para o centro da cabine (42,5% da largura da foto) cair sempre a
   30% da tela — onde ele fica na tela grande aprovada.

     largura  = 116% da altura x 1,958 (proporcao da foto) = 227,2cqh,
                ou 76% da tela, se for maior (ultrawide)
     left     = 30cqw - 0,425 x largura
     limites  = a foto nunca descola da borda esquerda (<= 0) e
                cobre pelo menos ate 76% da tela — o arco so mostra a
                foto ate 74%, o resto a direita nunca aparece

   A primeira declaracao e o fallback de navegador sem container
   query: foto encostada pela direita, como antes. */
.s-hero__photo img{
  position:absolute;inset:-8% auto -8% -5%;
  width:100%;height:116%;
  object-fit:cover;object-position:100% 50%;
}
@supports (width:1cqw){
  .s-hero__photo img{
    --foto-w:max(227.2cqh, 76cqw);
    top:-8cqh;bottom:auto;
    /* max-width:none: o img{max-width:100%} do ui.css travaria a foto
       na largura da caixa, e o caminhao encolheria e sairia do lugar */
    width:var(--foto-w);max-width:none;height:auto;
    left:clamp(calc(76cqw - var(--foto-w)), calc(30cqw - .425 * var(--foto-w)), 0px);
  }
}

/* verniz: a foto tem que morrer no fundo antes de encostar no
   texto, senao o H1 branco perde contraste na borda do arco. Escurece
   a partir de 60%, e o sol fica fora da faixa escura. */
.s-hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(4,13,6,.50) 0%,
      rgba(4,13,6,.06) 22%,
      rgba(4,13,6,.10) 40%,
      rgba(4,13,6,.56) 60%,
      rgba(4,13,6,.70) 100%),
    linear-gradient(180deg, rgba(4,13,6,.72) 0%, transparent 34%),
    linear-gradient(0deg, rgba(4,13,6,.60) 0%, transparent 30%);
}

/* Filete claro correndo por fora do arco. E a mesma forma,
   girada um grau e meio a partir da base: o giro abre a fresta
   para cima, reproduzindo a cunha cinza que a capa tem no canto
   superior direito e que fecha perto do rodape. */
.s-hero__echo{
  position:absolute;inset:0;z-index:-1;
  clip-path:url(#cg-arco-hero);
  transform-origin:22% 100%;
  transform:rotate(-1.7deg) translateX(7px);
  background:linear-gradient(180deg,
    rgba(226,236,222,.62) 0%,
    rgba(200,214,196,.34) 52%,
    rgba(168,207,69,.30) 100%);
}

/* --- camada 3: as curvas ------------------------------------- */

/* preserveAspectRatio="none": os tres circulos viram elipses e a
   composicao fica identica em qualquer proporcao de tela. A
   espessura nao acompanha a distorcao por causa do
   vector-effect no proprio SVG. */
.s-hero__curves{position:absolute;inset:0}
.s-hero__curvesart{position:absolute;inset:0;display:block;width:100%;height:100%}
.s-hero__curvesart--estreito{display:none}

/* Brilho sem filtro: um traco largo e translucido por baixo do traco
   fino. Ver o comentario no index.html — drop-shadow corta a curva
   quando o SVG nao preserva a proporcao.
   O seletor precisa da classe do pai: `.c-curves path` em ui.css tem
   especificidade maior que uma classe sozinha e ganharia a espessura. */
.c-curves .is-halo{
  stroke:var(--lime);
  stroke-width:9;
  opacity:.12;
}

/* Entrada das curvas: mascara que abre da esquerda para a direita, no
   lugar do traco que se desenha. Quem carrega o data-reveal e a div de
   fora; quem e recortado e o SVG de dentro. Ver o comentario no
   index.html para o porque dessa separacao.

   Vale para qualquer bloco de curvas da pagina, nao so o hero: e por
   isso que o seletor e o atributo, nao a classe da secao. */
.has-js [data-reveal="curvas"] .c-curves{
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--dur-draw) var(--ease-draw);
}
.has-js [data-reveal="curvas"].is-in .c-curves{ clip-path:inset(0 0 0 0) }

@media (prefers-reduced-motion: reduce){
  .has-js [data-reveal="curvas"] .c-curves{ clip-path:none;transition:none }
}

/* --- camada 4: o texto --------------------------------------- */

.s-hero__in{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;
}
.s-hero__col{max-width:min(680px, 54%)}

.s-hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.5rem, 1.1rem + 4.3vw, 4.5rem);
  line-height:var(--lh-display-tight);
  letter-spacing:var(--track-display);
  color:var(--text);
  margin:0;
}

.s-hero__lead{
  font-family:var(--font-display);
  font-size:clamp(1.125rem, .95rem + .8vw, 1.625rem);
  line-height:1.24;
  color:var(--text);
  /* margin-left:auto encosta a caixa na direita. Sem isso o
     max-width mede a partir da esquerda da coluna e a borda direita
     do apoio para antes da do titulo. */
  margin:var(--s-4) 0 0 auto;
  max-width:34ch;
}

.s-hero__cta{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  justify-content:flex-end;
  margin-top:var(--s-6);
}

/* a assinatura da marca (.c-assinatura), na posicao relativa do
   rodape da capa, alinhada a direita */
.s-hero__selo{
  justify-content:flex-end;
  margin-top:var(--s-7);
  padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
}

/* seta de rolagem, encostada na margem esquerda do texto */
.s-hero__scroll{
  position:absolute;left:var(--gutter);bottom:var(--s-7);
  z-index:2;
  display:inline-flex;align-items:center;gap:var(--s-3);
  color:rgba(255,255,255,.78);
  font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;
  text-shadow:0 1px 6px rgba(4,13,6,.7);
}
.s-hero__scroll:hover{color:var(--text)}
.s-hero__scroll svg{animation:cg-bob 2.4s var(--ease) infinite}
@keyframes cg-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(5px)}
}
@media (prefers-reduced-motion: reduce){ .s-hero__scroll svg{animation:none} }


/* o titulo comeca em cima da borda do arco, onde passa o ceu claro */
.s-hero__title,
.s-hero__lead,
.s-hero__eyebrow{text-shadow:0 2px 22px rgba(4,13,6,.55)}

/* duas linhas no desktop: numa so, o comeco invadia a foto */
.s-hero__eyebrow span{display:block}

/* --- camada 5: os produtos da capa ---------------------------
   Montagem de galoes + embalagem flexivel cruzando a base do arco
   da foto (.s-hero--produtos).

   Alinhada a margem esquerda do grid — a mesma da logo no header —
   e com largura fixa: em porcentagem ela encolhia nas telas menores.
   So cede abaixo de ~1240px de janela, para nao invadir o texto. */
.s-hero__produtos{
  position:absolute;z-index:1;
  left:calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter));
  top:63.5%;
  width:min(560px, 45vw);
  pointer-events:none;
}
.s-hero__produtos img{position:relative;display:block;width:100%;height:auto}

/* sombra de chao, eliptica, em vez de filter:drop-shadow — o filtro
   desenhava um retangulo escuro do tamanho da caixa por tras dos
   galoes */
.s-hero__produtos::before{
  content:"";position:absolute;
  left:4%;right:4%;bottom:-6%;height:22%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.6) 0%, transparent 72%);
}


/* ============================================================
   RESPONSIVO
   ============================================================ */

/* a barra aperta: LUBRAX e "Distribuidor Autorizado" saem primeiro,
   a logo CG LUB fica sozinha */
/* entre 821 e 1180px o menu ainda esta aberto na barra: LUBRAX e
   "Distribuidor Autorizado" saem e a logo CG LUB fica sozinha. No
   celular o menu vira hamburguer e a assinatura volta completa. */
@media (min-width:821px) and (max-width:1180px){
  .c-header__brand .c-assinatura__lubrax,
  .c-header__brand .c-assinatura__da{display:none}
}
@media (max-width:1180px){
  .c-header__nav{gap:var(--s-5)}
  /* a coluna encolhe junto com a tela: se ela mantiver a mesma
     proporcao, o texto invade a parte clara da foto e os dois
     botoes deixam de caber lado a lado */
  .s-hero__col{max-width:min(580px, 56%)}
}

@media (max-width:1024px){
  .s-hero__col{max-width:min(520px, 60%)}
  /* os dois botoes deixam de caber lado a lado. Empilhados com a
     mesma largura o bloco continua lendo como par; com larguras
     diferentes viraria uma escada. */
  .s-hero__cta .c-btn{width:min(320px, 100%)}
}

/* celular: a composicao gira. A foto vira faixa no topo com o
   arco na base — o mesmo gesto da foto da estrada na capa — e o
   texto passa a alinhar a esquerda, porque duas linhas de apoio
   alinhadas a direita sao ruins de ler em coluna estreita. */
@media (max-width:820px){
  .c-header__nav,
  .c-header__cta{display:none}
  .c-header__burger{display:inline-flex}

  /* assinatura completa, em escala que cabe ao lado do hamburguer
     ate 320px de tela */
  .c-header__brand{--a-h:clamp(24px, 7.4vw, 40px);--a-gap:var(--s-3)}

  .s-hero{
    min-height:0;
    display:block;
    padding-block:0 var(--s-8);
  }
  .s-hero__art{
    position:relative;
    height:clamp(260px, 46svh, 420px);
    margin-bottom:var(--s-6);
  }
  .s-hero__curvesart--amplo{display:none}
  .s-hero__curvesart--estreito{display:block}

  .s-hero__photo,
  .s-hero__echo{clip-path:url(#cg-arco-hero-movel)}
  /* no celular a foto e outro arquivo (hero-caminhao-mobile), sem
     espelhar e com o caminhao ja no centro */
  .s-hero__photo img{left:0;width:100%;height:116%;object-position:50% 50%}
  .s-hero__photo::after{
    background:
      linear-gradient(180deg, rgba(4,13,6,.78) 0%, transparent 42%),
      linear-gradient(0deg,   rgba(4,13,6,.55) 0%, transparent 40%);
  }
  .s-hero__echo{transform:translate(0, 13px)}

  /* o brilho verde sobe: em coluna ele tem que encostar na base
     do arco, senao fica fora de campo no rodape do hero */
  .s-hero::before{
    background:
      radial-gradient(90% 22% at -22% 44%,
        color-mix(in srgb, var(--green-glow) 82%, transparent) 0%,
        color-mix(in srgb, var(--green-glow) 28%, transparent) 46%,
        transparent 78%),
      radial-gradient(130% 34% at 4% 56%,
        color-mix(in srgb, var(--green-glow) 20%, transparent) 0%,
        transparent 70%),
      linear-gradient(170deg, #000000 0%, var(--bg) 48%, var(--bg-deep) 100%);
  }

  .s-hero__in{align-items:flex-start;text-align:left}
  .s-hero__selo{justify-content:flex-start}
  .s-hero__lead{margin-left:0}
  .s-hero__col{max-width:none}
  .s-hero__lead{max-width:38ch}
  .s-hero__cta{justify-content:flex-start}
  .s-hero__cta .c-btn{flex:1 1 220px}
  .s-hero__scroll{display:none}

  .s-hero__eyebrow span{display:inline}
  .s-hero__eyebrow span + span::before{content:"· "}

  /* a foto vira faixa no topo e os produtos entram logo abaixo,
     subindo por cima do arco da base */
  .s-hero--produtos .s-hero__art{margin-bottom:0}
  .s-hero__produtos{
    position:relative;
    left:auto;top:auto;
    width:calc(100% - 2 * var(--gutter));
    margin:calc(var(--s-9) * -1) auto var(--s-6);
  }
}

@media (max-width:420px){
  .s-hero__selo{--a-h:38px;--a-gap:var(--s-4)}
}


/* ============================================================
   02 · A EMPRESA
   Folder, pag. 1. Coluna de imagem estreita, coluna de texto
   larga: o peso esta no que se le, nao na foto. O Grupo (com a
   assinatura do CEO) fica no texto; os dois socios, em pilares
   abaixo.
   ============================================================ */


.s-empresa__grid{
  display:grid;
  grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:clamp(var(--s-6), 5vw, var(--s-9));
  align-items:center;
}

.s-empresa__foto{
  aspect-ratio:5 / 6;
  /* o arco do canto inferior direito vem de .c-arc--br; aqui so os
     outros tres cantos, um pouco arredondados. Por canto, nunca o
     atalho border-radius, que sobrescreveria o arco inteiro. */
  border-top-left-radius:var(--r-lg);
  border-top-right-radius:var(--r-lg);
  border-bottom-left-radius:var(--r-lg);
}
.s-empresa__foto img{width:100%;height:100%;object-fit:cover}

.s-empresa .t-lead{ margin-top:var(--s-5) }

/* Grupo, Eduardo e Sergio: tres cards de mesmo peso, lado a lado,
   comecando pelo Grupo. Em duas colunas o terceiro card ficaria
   sozinho numa linha, entao a grade vai direto para uma. */
.s-pilares{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
  margin-top:clamp(var(--s-7), 6vw, var(--s-9));
}

@media (max-width:900px){
  .s-pilares{grid-template-columns:1fr}
}


/* ---------- PILAR (perfil de socio) ------------------------- */

.c-pilar{
  background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  clip-path:url(#cg-arco-card-base);
  padding:clamp(var(--s-5), 3vw, var(--s-6));
  padding-bottom:clamp(var(--s-6), 4vw, var(--s-8));
}
.c-pilar__topo{
  display:flex;align-items:center;gap:var(--s-4);
  margin-bottom:var(--s-4);
}
.c-pilar__retrato{
  width:88px;height:88px;
  border-radius:50%;object-fit:cover;
  border:2px solid var(--line);
}
.c-pilar__topo .t-h4{margin:0}
/* no card do Grupo o titulo e a logo: selo claro de cantos
   arredondados, na altura de duas linhas de nome */
.c-pilar__marca{margin:0}
.c-pilar__marca img{height:48px;width:auto;border-radius:10px}
.c-pilar__papel{
  margin:var(--s-1) 0 0;
  color:var(--lime);font-style:italic;font-size:var(--t-small);
}
.c-pilar > .t-small{margin:0;color:var(--text-soft)}


/* ============================================================
   03 · SEGMENTOS
   ============================================================ */

/* ============================================================
   FAIXA UNICA · DA EMPRESA AO CONTATO
   As sete secoes entre o hero e o rodape sobre uma superficie so:
   um gradiente longo no lugar da alternancia --bg / --bg-deep, tres
   conjuntos de curvas e as luzes verdes.

   GRADE, NAO PORCENTAGEM
   As linhas da grade tem o nome da secao que comeca ali. E o que
   deixa um conjunto de curvas ou uma luz cobrir secoes inteiras sem
   saber a altura delas — que muda com a largura da tela e com o
   texto. Reposicionar qualquer camada e trocar o nome da linha.

   Os conjuntos e as luzes sao `position:absolute` COM posicao de
   grade: ficam fora do fluxo (nao empurram secao nenhuma) e mesmo
   assim se prendem as linhas. Se uma secao entrar ou sair da faixa,
   `grid-template-rows` precisa ganhar ou perder uma linha aqui.
   ============================================================ */

.u-faixa{
  position:relative;
  isolation:isolate;
  overflow:clip;

  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:
    [empresa]       auto
    [segmentos]     auto
    [inovacao]      auto
    [portfolio]     auto
    [porque]        auto
    [cobertura]     auto
    [contato]       auto
    [fim];

  /* O gradiente comeca e termina escuro: em cima encosta na base do
     hero, que ja fecha em --bg-deep, e embaixo no rodape, que e
     preto. No meio ele respira sem nunca desenhar uma borda — a
     distancia entre os dois tons e pequena de proposito. */
  background:linear-gradient(180deg,
    var(--bg-deep)   0%,
    var(--bg)       22%,
    var(--bg-deep)  48%,
    var(--bg)       72%,
    var(--bg-deep) 100%);
}

/* As secoes perdem o fundo proprio. Sem isto cada uma pinta por cima
   do gradiente e das curvas, e a emenda volta.

   O nome [porque] ficou da versao anterior, quando a linha era a de
   "Por que a CG LUB": hoje e a Proposta de valor. Mantido porque o
   conjunto de curvas 3 ancora nele. */
.u-faixa > .u-section{ background:transparent }


/* ---------- LUZES ------------------------------------------
   A mesma luz que ficava presa ao Portfolio, agora repetivel em
   qualquer linha da grade. Cada instancia so redefine variaveis:

     --luz-x / --luz-y   centro, em % da secao
     --luz-w / --luz-h   raio horizontal e vertical
     --luz-forca        % de --green-glow no centro

   Ficam em z-index:-2, abaixo das curvas: luz e campo, curva e
   desenho — invertido, o brilho lava o traco.               */

.u-faixa__luz{
  position:absolute;
  grid-column:1;

  /* Sangra 40% da altura da propria linha para cima e para baixo.
     Sem isto o degrade ainda tem cor ao chegar na borda da secao e
     termina num corte reto: a luz de "A empresa" morria numa linha
     horizontal visivel. A caixa passa a ser 180% da linha, o que da
     espaco para o degrade fechar em transparente antes da borda.
     Como .u-faixa tem overflow:clip, a sangria nunca escapa da faixa
     — nao encosta no hero nem no rodape.
     Os valores de --luz-y e --luz-h abaixo ja estao convertidos para
     esta caixa maior (linha / 1,8). */
  inset:-40% 0;

  z-index:-2;
  pointer-events:none;
  background:radial-gradient(
    var(--luz-w,58%) var(--luz-h,46%) at var(--luz-x,50%) var(--luz-y,50%),
    color-mix(in srgb, var(--green-glow) var(--luz-forca,17%), transparent) 0%,
    color-mix(in srgb, var(--green-glow) calc(var(--luz-forca,17%) / 2.8), transparent) 44%,
    transparent 74%);
}

/* Atras dos produtos: e a luz original do Portfolio, com os mesmos
   numeros. No hero ela vem do canto inferior esquerdo; aqui fica no
   centro, sobre a metade de baixo da montagem, e bem mais fraca —
   la ela e o assunto, aqui e contraluz e nao pode competir com o
   texto que passa por cima. */
.u-faixa__luz--portfolio{
  grid-row:portfolio / porque;
  --luz-y:50%; --luz-h:26%;
}

/* As outras duas sao contraluz de canto, mais fracas ainda. */
.u-faixa__luz--empresa{
  grid-row:empresa / segmentos;
  --luz-x:14%; --luz-y:62%; --luz-w:66%; --luz-h:30%; --luz-forca:11%;
}
.u-faixa__luz--cobertura{
  grid-row:cobertura / contato;
  --luz-x:86%; --luz-y:50%; --luz-w:60%; --luz-h:24%; --luz-forca:9%;
}

/* luz atras do pack de embalagem flexivel, que tem fundo
   transparente */
.u-faixa__luz--inovacao{
  grid-row:inovacao / portfolio;
  --luz-x:72%; --luz-y:50%; --luz-w:44%; --luz-h:26%; --luz-forca:24%;
}


/* ---------- CONJUNTOS DE CURVAS -----------------------------
   Tres camadas, tres trechos, tres observers: cada conjunto
   desenha quando o trecho dele chega na tela.

   `inset` negativo: a camada e 7% mais larga e 4% mais alta que a
   area da grade. E a folga que a deriva continua consome. Sem ela,
   ao deslizar 2 ou 3% a camada descolaria da borda da faixa e a
   ponta do traco apareceria no meio da tela — exatamente o corte
   que a faixa existe para eliminar.                          */

.u-faixa__conjunto{
  position:absolute;
  grid-column:1;
  inset:-4% -7%;
  z-index:-1;
  pointer-events:none;
}
.u-faixa__conjunto--1{ grid-row:empresa / portfolio }
.u-faixa__conjunto--2{ grid-row:portfolio / porque }
.u-faixa__conjunto--3{ grid-row:porque / fim }

.u-faixa__curvasart{
  position:absolute;inset:0;
  width:100%;height:100%;display:block;
}
.u-faixa__curvasart--estreito{display:none}

/* A troca de quadro e em 900px, nao nos 820 que o Portfolio usava
   sozinho: e em 900 que a grade de segmentos cai para uma coluna e
   os trechos quase dobram de altura. Manter o quadro amplo ate 820
   poria 1440x2020 dentro de 845x3100 — x em 0,59 e y em 1,53, a
   mesma distorcao que ja tinha estragado as curvas do hero. */
@media (max-width:900px){
  .u-faixa__curvasart--amplo{display:none}
  .u-faixa__curvasart--estreito{display:block}
}


/* ---------- DERIVA CONTINUA ---------------------------------
   Depois da entrada, cada conjunto segue em movimento muito lento —
   amplitude de 2 a 3%, ciclo de 40 a 60s, sentidos diferentes. E
   `transform`, entao roda no compositor e nao repinta nada.

   Fica parado ate a entrada terminar: a mascara abrindo e o traco
   deslizando ao mesmo tempo leem como falha, nao como movimento. */

@keyframes cg-deriva-a{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-2.4%, 1.1%, 0) }
}
@keyframes cg-deriva-b{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(2.8%, -1.4%, 0) }
}
@keyframes cg-deriva-c{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(-1.8%, -0.9%, 0) }
}

.has-js .u-faixa__conjunto .c-curves{
  animation-duration:52s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused;
}
.has-js .u-faixa__conjunto--1 .c-curves{ animation-name:cg-deriva-a }
.has-js .u-faixa__conjunto--2 .c-curves{ animation-name:cg-deriva-b;animation-duration:38s }
.has-js .u-faixa__conjunto--3 .c-curves{ animation-name:cg-deriva-c;animation-duration:64s }

.has-js .u-faixa__conjunto.is-in .c-curves{ animation-play-state:running }

@media (prefers-reduced-motion: reduce){
  .has-js .u-faixa__conjunto .c-curves{ animation:none }
}


.s-segmentos__topo{
  max-width:var(--maxw-text);
  margin-bottom:clamp(var(--s-6), 4vw, var(--s-8));
}

.s-segmentos__grade{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
}

.s-segmentos__foto{
  aspect-ratio:16 / 10;
  border-radius:0;
}
.s-segmentos__foto img{width:100%;height:100%;object-fit:cover}

/* Ritmo interno do card.
   O ponto mais baixo do arco da foto e a propria base da caixa da
   imagem, entao o respiro ate o titulo e o padding-top do corpo — e
   ele iguala o respiro do titulo ate os topicos. Nas laterais a folga
   e maior, porque ali o arco sobe.

   Sem margin-top:auto no botao: com ele o botao colava na base e
   engolia qualquer folga que se tentasse dar embaixo. A sobra de
   altura da grade agora cai ABAIXO do botao. */
.s-segmentos .c-seg__body{
  padding:var(--s-5) var(--s-6) var(--s-7);
}
.s-segmentos .c-seg__list{
  margin:var(--s-5) 0 var(--s-4);
}

@media (max-width:900px){
  .s-empresa__grid{grid-template-columns:1fr}
  .s-empresa__foto{aspect-ratio:16 / 9;max-height:320px}
  .s-segmentos__grade{grid-template-columns:1fr}
  .s-segmentos__foto{aspect-ratio:16 / 7}
}



/* ---- Arco na base do card e cor do segmento na curva --------
   A base da foto E a do card sao cortadas pelo mesmo arco de raio
   enorme do hero, e a cor do segmento passa a correr pela curva de
   baixo em vez de ficar numa barra reta no topo.

   Como a faixa colorida acompanha uma curva, ela nao pode ser uma
   borda: e a cor do proprio card aparecendo por baixo. O card pinta
   a cor do segmento e recebe o recorte; a caixa de dentro pinta a
   superficie e recebe o mesmo recorte, 6px mais curta. A diferenca
   entre os dois arcos e a faixa. Mesmo truque do filete do hero. */

.s-segmentos__foto--arco{ clip-path:url(#cg-arco-card) }

.s-segmentos .c-seg{
  display:block;
  background:var(--seg,var(--lime));
  border:0;
  overflow:visible;
  /* o mesmo raio de topo da caixa, senao a cor do card aparece nos
     dois cantos de cima, atras dos cantos arredondados dela */
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  clip-path:url(#cg-arco-card-base);
}
/* a barra reta do topo sai: quem marca o segmento agora e a curva */
.s-segmentos .c-seg::before{display:none}

.s-segmentos .c-seg__caixa{
  display:flex;flex-direction:column;
  /* calc, nao height:100% + margin: a margem nao encurta uma altura
     percentual, e a caixa cobriria o card inteiro — a faixa colorida
     simplesmente nao apareceria */
  height:calc(100% - 6px);
  background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  overflow:hidden;
  clip-path:url(#cg-arco-card-base);
}



/* ============================================================
   04 · INOVACAO
   Texto curto e numero grande a esquerda; o pack sangra a
   direita. O 65% e o unico numero de destaque da pagina.
   ============================================================ */

/* o pack e o assunto: coluna da imagem mais larga e o respiro ate o
   texto mais curto, para ele crescer e chegar perto da frase */
.s-inovacao__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(var(--s-5), 3vw, var(--s-7));
  align-items:center;
}
.s-inovacao__numero{
  display:flex;align-items:baseline;gap:var(--s-3);
  margin:clamp(var(--s-5), 3vw, var(--s-7)) 0 0;
}
.s-inovacao__numero b{
  font-family:var(--font-display);
  font-size:clamp(3.5rem, 2rem + 6vw, 6.5rem);
  line-height:.9;
  letter-spacing:var(--track-display);
  color:var(--lime);
}
.s-inovacao__numero span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-h3);
  color:var(--text);
}
.s-inovacao__pack img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
}

@media (max-width:900px){
  .s-inovacao__grid{grid-template-columns:1fr}
}


/* ============================================================
   05 · PORTFOLIO E CATALOGO
   A montagem de produtos e horizontal (2,55:1). Por isso ela ocupa
   uma faixa de largura total no topo, com as curvas neon por tras —
   sem elas o fundo atras dos produtos fica vazio, porque a imagem
   tem fundo transparente. Embaixo, texto a esquerda e acao a
   direita, na mesma linha.
   ============================================================ */

.s-catalogo{
  position:relative;
  /* o overflow segura a sangria de 112% da montagem no celular */
  overflow:clip;
  /* fundo, luz e curvas sao da .u-faixa, que envolve esta secao */
}

.s-catalogo__faixa{
  position:relative;
  width:100%;
  /* Margem negativa: a montagem tem ~10% de altura transparente
     embaixo (a area da sombra). Sem descontar isso, o espaco ate o
     texto fica com o dobro do tamanho que se ve no CSS.

     O desconto e fixo, nao percentual, porque a area transparente
     encolhe junto com a imagem mas o respiro desejado nao: no
     celular ela vale ~16px, e os mesmos 48px de desconto fariam o
     texto subir por cima dos produtos. Por isso o celular zera. */
  margin-bottom:calc(var(--s-7) * -1);
}

/* a imagem acompanha a largura do bloco de texto; quem sangra ate a
   borda da tela sao so as curvas */
.s-catalogo__produtos{
  position:relative;
  width:100%;
  height:auto;
  display:block;
}

.s-catalogo__base{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-6) clamp(var(--s-6), 5vw, var(--s-9));
  align-items:center;
}

.s-catalogo__texto .t-body{max-width:56ch}

.s-catalogo__linhas{
  list-style:none;padding:0;
  margin:var(--s-6) 0 0;
  display:flex;flex-wrap:wrap;gap:var(--s-2);
}
.s-catalogo__linhas li{
  font-size:var(--t-small);font-weight:700;
  color:var(--text);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}

.s-catalogo__cta{
  display:flex;flex-direction:column;align-items:flex-end;
  gap:var(--s-3);
}
.s-catalogo__meta{
  margin:0;
  font-size:var(--t-label);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-mute);
  text-align:right;
}

@media (max-width:900px){
  .s-catalogo__base{grid-template-columns:1fr}
  .s-catalogo__cta{align-items:stretch}
  .s-catalogo__meta{text-align:center}
}

@media (max-width:820px){
  /* Em coluna estreita a montagem fica pequena demais para se
     reconhecer o produto, entao ela transborda. A sangria e so a
     esquerda: a direita a imagem encosta na borda da tela, porque e
     de la que vem a fileira de frascos — o corte fica no caminhao,
     que ja aparece cortado no original. */
  .s-catalogo__faixa{margin-bottom:var(--s-2)}
  .s-catalogo__faixa > .u-wrap{padding-inline:0}
  .s-catalogo__produtos{
    /* o reset de ui.css poe max-width:100% em toda img; sem anular
       aqui, a largura de 112% nunca passa dos 100% e a sangria some */
    width:112%;
    max-width:none;
    margin-left:-12%;
  }
}

/* ============================================================
   06 · PROPOSTA DE VALOR
   Folder, pag. 2: tres frentes com foto e o Bora! Lubrax.
   ============================================================ */

.s-proposta__topo{
  max-width:var(--maxw-text);
  margin-bottom:clamp(var(--s-6), 4vw, var(--s-8));
}

.s-proposta__grade{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
}

@media (max-width:900px){
  .s-proposta__grade{grid-template-columns:1fr}
}


/* ---------- FRENTE (card com foto da Proposta de valor) -----
   A moldura ambar do folder vira a faixa colorida na curva de
   baixo, com o mesmo truque dos cards de segmento: a foto vai numa
   caixa ambar recortada pelo arco, e a imagem por cima, recortada
   pelo mesmo arco 6px mais curta. */

.c-frente__foto{
  aspect-ratio:16 / 10;
  background:var(--amber);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  clip-path:url(#cg-arco-card);
  margin-bottom:var(--s-5);
}
.c-frente__foto picture{display:block;height:calc(100% - 6px)}
.c-frente__foto img{
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  clip-path:url(#cg-arco-card);
}
/* a montagem de produtos e larga (3,2:1): no card 16:10 so metade
   aparece, e a metade da direita e a dos galoes e da embalagem
   flexivel */
.c-frente__foto img[src*="produtos-montagem"]{object-position:100% 50%}
.c-frente .t-h3{margin:0 0 var(--s-2);color:var(--lime)}
.c-frente .t-small{margin:0;color:var(--text-soft);max-width:34ch}

@media (max-width:900px){
  .c-frente__foto{aspect-ratio:16 / 8}
}


/* ---------- BORA! LUBRAX ------------------------------------
   Tres areas: marca ambar, mascote cruzando a borda e texto. O QR
   do impresso nao entra — no site o link e o botao. O mascote e o que liga a marca ao texto — por isso ele fica
   por cima da emenda entre as duas colunas. */

.c-bora{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);
  grid-template-areas:"marca texto";
  align-items:center;
  gap:clamp(var(--s-5), 3vw, var(--s-7));
  margin-top:clamp(var(--s-7), 6vw, var(--s-9));
  padding:clamp(var(--s-5), 3vw, var(--s-7));
  background:var(--surface);
  /* sem o recorte em arco dos outros cards: clip-path cortaria o
     mascote, que precisa pisar na borda de baixo */
  border-radius:var(--r-lg);
}

.c-bora__marca{
  grid-area:marca;
  align-self:stretch;
  display:flex;align-items:flex-start;
  min-height:260px;
  padding:clamp(var(--s-5), 3vw, var(--s-6));
  background:linear-gradient(135deg, var(--amber) 0%, var(--amber-bora) 100%);
  border-radius:var(--r-folder);
}
.c-bora__logo{display:block;width:min(100%, 220px);height:auto}

.c-bora__mascote{
  grid-area:marca;
  align-self:end;justify-self:end;
  width:min(62%, 220px);
  margin-right:-12%;
  margin-bottom:calc(clamp(var(--s-5), 3vw, var(--s-7)) * -1);
  pointer-events:none;
}
.c-bora__mascote img{display:block;width:100%;height:auto}

.c-bora__texto{grid-area:texto}
.c-bora__texto .t-h3{margin:0}
.c-bora__texto .t-body{max-width:52ch}
.c-bora__texto .c-btn{margin-top:var(--s-5)}

@media (max-width:1024px){
  .c-bora{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
}
@media (max-width:760px){
  .c-bora{
    grid-template-columns:1fr;
    grid-template-areas:"marca" "texto";
  }
  .c-bora__marca{min-height:200px}
  .c-bora__mascote{width:150px;margin-right:0;margin-bottom:-8px}
}


/* ============================================================
   07 · ONDE ATUAMOS
   Mapas em SVG inline, nao <img>: assim o traco herda as cores dos
   tokens e o brilho e feito com o mesmo truque das curvas do hero
   — um traco largo e translucido por baixo, sem filtro.
   ============================================================ */


.s-cobertura__topo{
  max-width:var(--maxw-text);
  margin-bottom:clamp(var(--s-5), 3vw, var(--s-7));
}

.s-cobertura__grade{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(var(--s-6), 4vw, var(--s-8));
  align-items:center;
}

/* minmax na coluna da lista: sem o minimo, a coluna de Sergipe
   apertava e "Aracaju e Regiao Metropolitana" quebrava em tres linhas */
.s-cobertura__estado{
  display:grid;
  grid-template-columns:auto minmax(190px,1fr);
  gap:var(--s-5);
  align-items:center;
}
.s-cobertura__mapa{flex:none}

/* Sergipe nao entra na mesma altura da Bahia. A area real e cerca de
   25x menor; desenhar os dois do mesmo tamanho engana quem conhece a
   regiao. Escala verdadeira deixaria Sergipe ilegivel, entao fica um
   meio-termo: 62% da altura, o suficiente para ler como estado
   menor. */
.mapa{
  display:block;
  height:clamp(190px, 21vw, 280px);
  width:auto;
  overflow:visible;
}
.mapa--sergipe{ height:clamp(145px, 16vw, 212px) }

/* Brilho da borda: tres tracos do mesmo contorno, do largo e fraco ao
   curto e forte, todos por baixo do preenchimento — entao so a parte
   de fora aparece. Circulos e tracos em vez de filtro: mais barato de
   compor e sem depender de regiao de filtro, que ja deu problema nas
   curvas do hero. */
.mapa__halo{
  fill:none;
  stroke:var(--lime);
  stroke-linejoin:round;
  stroke-linecap:round;
}
.mapa__halo--1{ stroke-width:44;opacity:.05 }
.mapa__halo--2{ stroke-width:26;opacity:.09 }
.mapa__halo--3{ stroke-width:13;opacity:.16 }

.mapa__area{
  fill:var(--surface-2);
  stroke:var(--lime);
  stroke-width:7;
  stroke-linejoin:round;
  paint-order:stroke fill;
}
.mapa__rota{
  fill:none;
  stroke:var(--lime);
  stroke-width:5;
  opacity:.5;
}

/* halo dos pontos, mesma logica: do maior e mais fraco ao menor e
   mais forte, por tras do no */
.mapa__brilho{ fill:var(--lime);opacity:.10 }
.mapa__brilho--forte{ opacity:.20 }
.mapa__brilho.mapa__no--sede{ fill:var(--amber);opacity:.14 }
.mapa__brilho--forte.mapa__no--sede{ opacity:.26 }

.mapa__no{ fill:var(--lime);opacity:.9 }
.mapa__no--sede{ fill:var(--amber);opacity:1 }

.s-cobertura__lista .t-h3{margin-bottom:var(--s-4)}
/* lista corrida, nao chips: os nomes de regiao sao longos e viravam
   pilulas de larguras muito diferentes, que liam como botoes */
.s-cobertura__regioes{
  list-style:none;padding:0;margin:0;
}
.s-cobertura__regioes li{
  font-size:var(--t-body);
  color:var(--text-soft);
  padding:var(--s-2) 0 var(--s-2) var(--s-5);
  position:relative;
  border-bottom:1px solid var(--line-soft);
}
.s-cobertura__regioes li:last-child{border-bottom:0}
.s-cobertura__regioes li::before{
  content:"";position:absolute;left:0;top:.95em;
  width:6px;height:6px;border-radius:50%;
  background:var(--lime);
}

/* ---------- FOTOS DOS CENTROS DE DISTRIBUICAO ---------------
   As duas fotos dos CDs como no folder: uma moldura so, com os
   cantos opostos bem abertos (superior esquerdo e inferior direito)
   e os outros dois quase retos. O fio ambar e uma sombra dura
   deslocada para baixo e para a direita: aparece grosso na base e
   vai afinando ao subir pela curva do canto inferior direito, o
   mesmo desenho do impresso. box-shadow e nao pseudo-elemento
   porque o overflow:hidden da moldura nao corta a propria sombra. */

.s-cobertura__fotos{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4px;
  background:var(--bg-deep);
  border-radius:var(--r-folder);
  overflow:hidden;
  box-shadow:5px 9px 0 var(--amber);
  margin-right:5px;
}
/* o estado final do data-reveal (motion.css) poe clip-path:inset(0),
   que recorta tudo fora da caixa — inclusive o fio ambar */
.has-js .s-cobertura__fotos.is-in{clip-path:none}
.s-cobertura__fotos picture{display:block;aspect-ratio:760 / 310}
.s-cobertura__fotos img{width:100%;height:100%;object-fit:cover;display:block}

.s-cobertura__frentes{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s-5) clamp(var(--s-6), 5vw, var(--s-9));
  margin:clamp(var(--s-5), 3vw, var(--s-7)) 0 clamp(var(--s-7), 6vw, var(--s-9));
}
.s-cobertura__frentes .t-body{margin-top:var(--s-3);max-width:44ch}

@media (max-width:760px){
  .s-cobertura__fotos{grid-template-columns:1fr;box-shadow:3px 6px 0 var(--amber)}
  .s-cobertura__frentes{grid-template-columns:1fr}
}

@media (max-width:1024px){
  .s-cobertura__grade{grid-template-columns:1fr}
}
/* celular: cada mapa quase na largura da coluna e o texto das
   regioes centralizado embaixo dele. O marcador da regiao sai da
   margem e entra na linha, senao ficaria solto a esquerda. */
@media (max-width:560px){
  .s-cobertura__estado{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }
  .s-cobertura__mapa{width:86%}
  .mapa,
  .mapa--sergipe{width:100%;height:auto}
  .s-cobertura__regioes li{padding-inline:0}
  .s-cobertura__regioes li::before{
    position:static;
    display:inline-block;
    vertical-align:middle;
    margin:0 var(--s-2) .15em 0;
  }
}


/* ============================================================
   08 · CONTATO
   ============================================================ */

.s-contato__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(var(--s-6),5vw,var(--s-9));
  align-items:start;
}
.s-contato__canais{
  list-style:none;padding:0;
  margin:clamp(var(--s-6),4vw,var(--s-7)) 0 0;
  display:grid;gap:var(--s-5);
}
.s-contato__canais li{display:grid;gap:2px}
.s-contato__canais .t-body{margin:0;color:var(--text)}

.s-contato__caixa{padding:clamp(var(--s-5),3vw,var(--s-7))}
.s-contato__caixa .t-small{margin:var(--s-2) 0 0;color:var(--text-mute)}
.s-contato__form{margin-top:var(--s-6)}
.s-contato__par{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.s-contato__form .c-check{margin:var(--s-5) 0}
.s-contato__erro{
  margin:0 0 var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:rgba(232,106,90,.12);
  border:1px solid rgba(232,106,90,.5);
  color:#F3B4AB;
  font-size:var(--t-small);
}
.s-contato__ok{
  margin:0 0 var(--s-4);
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-md);
  background:rgba(168,207,69,.12);
  border:1px solid var(--line-strong);
  color:var(--lime);
  font-size:var(--t-small);
}


.s-contato__fone{
  font-family:var(--font-display);
  font-size:var(--t-h3);
  font-weight:700;
}

.s-contato__foto{
  margin-top:clamp(var(--s-6), 4vw, var(--s-7));
  aspect-ratio:16 / 10;
  border-top-left-radius:var(--r-lg);
  border-top-right-radius:var(--r-lg);
  border-bottom-left-radius:var(--r-lg);
}
.s-contato__foto img{width:100%;height:100%;object-fit:cover}

.s-enderecos{
  display:grid;grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--s-5);
  margin-top:clamp(var(--s-7), 6vw, var(--s-9));
  padding-top:clamp(var(--s-5), 3vw, var(--s-7));
  border-top:1px solid var(--line-soft);
}
.s-enderecos address{
  font-style:normal;
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--text-soft);
}
.s-enderecos b{
  display:block;
  margin-bottom:var(--s-2);
  font-family:var(--font-display);
  font-size:var(--t-h4);
  line-height:1.2;
  color:var(--text);
}

@media (max-width:900px){
  .s-enderecos{grid-template-columns:1fr}
}


/* ============================================================
   RODAPE
   ============================================================ */

.s-rodape{
  background:#000;
  border-top:1px solid var(--line);
  padding-block:clamp(var(--s-7),5vw,var(--s-9)) var(--s-6);
}
.s-rodape__grade{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:var(--s-6);
}
/* a assinatura em escala menor: a coluna da marca tem ~320px */
.s-rodape__assinatura{--a-h:30px;--a-gap:var(--s-3);margin-bottom:var(--s-4)}
.s-rodape__marca .t-small{margin:0;max-width:32ch}

.s-rodape__col ul{list-style:none;padding:0;margin:var(--s-3) 0 0;display:grid;gap:var(--s-2)}
.s-rodape__col a{color:var(--text-soft);font-size:var(--t-small)}
.s-rodape__col a:hover{color:var(--lime)}

.s-rodape .c-redes{margin-top:var(--s-5)}

.s-rodape__pe{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);
  justify-content:space-between;
  margin-top:clamp(var(--s-6),4vw,var(--s-8));
  padding-top:var(--s-5);
  border-top:1px solid var(--line-soft);
  font-size:var(--t-label);
  color:var(--text-mute);
}
.s-rodape__pe p{margin:0}
.s-rodape__pe a{color:var(--text-mute)}
.s-rodape__pe a:hover{color:var(--lime)}


/* ---------- BOTAO FLUTUANTE DE WHATSAPP ---------------------- */

.s-fab{
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--lubrax);color:var(--text);
  box-shadow:var(--shadow-2);
}
.s-fab:hover{background:var(--lubrax-lit);color:var(--text)}


/* ---------- RESPONSIVO DAS SECOES FINAIS --------------------- */

@media (max-width:1024px){
  .s-contato__grid{grid-template-columns:1fr}
  .s-rodape__grade{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .s-contato__par{grid-template-columns:1fr}
  .s-rodape__grade{grid-template-columns:1fr}
  .s-rodape__pe{flex-direction:column}
}


/* ---------- MENU DO CELULAR ----------------------------------
   O painel usa o mesmo <nav> do desktop: no celular ele sai do
   fluxo e cobre a tela. Sem marcacao duplicada, sem dois menus
   para manter em sincronia.
   ------------------------------------------------------------ */

@media (max-width:820px){
  .c-header__nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;
    margin:0;
    padding:var(--s-5) var(--gutter) var(--s-7);
    /* opaco, sem backdrop-filter: o header ja tem um, e dois
       backdrop-filter aninhados deixavam o conteudo da pagina
       aparecendo por tras dos itens do menu */
    background:var(--bg-deep);
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);
    opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity var(--dur) var(--ease-out),
               transform var(--dur) var(--ease-out),
               visibility 0s linear var(--dur);
  }
  .c-header.is-menu-aberto .c-header__nav{
    transform:none;opacity:1;pointer-events:auto;visibility:visible;
    transition-delay:0s;
  }
  .c-header__zap{display:block}
  .c-header__nav a{
    padding-block:var(--s-4);
    font-size:var(--t-h4);
    border-bottom:1px solid var(--line-soft);
  }
  .c-header__nav a::after{display:none}

  .c-header__zap{
    margin-top:var(--s-5);
    color:var(--lime) !important;
    border-bottom:0 !important;
  }

  /* enquanto o painel esta aberto o header nao pode se esconder */
  .c-header.is-menu-aberto.is-hidden{transform:none}
}


/* ============================================================
   CURVA NA BASE DO CARD DO FORMULARIO
   O mesmo arco raso dos cards de segmento, sem a faixa colorida.
   Cartao curvado nao pode ter borda: o clip-path corta o filete no
   meio da curva e sobra um toco nas laterais. A definicao vem do
   contraste entre a superficie e o fundo da secao.
   ============================================================ */

.s-contato__caixa{
  clip-path:url(#cg-arco-card-base);
  border:0;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  /* o arco come altura no rodape do card; sem folga extra o ultimo
     paragrafo encosta na curva */
  padding-bottom:clamp(var(--s-6), 4vw, var(--s-8));
}