/* ============================================================================
   SD Digital: ajustes pontuais sobre o CSS compilado do Webflow
   ---------------------------------------------------------------------------
   O arquivo saiddiazdigital.webflow.shared.*.min.css é extraído do Webflow e
   fica só leitura (é o CSS de produção, não código-fonte editável). Pequenos
   ajustes que precisam valer em TODAS as páginas do site (index.html,
   case/topfit, briefing e as LPs de marketplace) entram aqui, carregado
   depois do CSS do Webflow em cada uma delas.
   ========================================================================= */

/* Copyright do rodapé: menor em todas as páginas (era 14px/.875rem). */
.footer .text-14._60 { font-size: 12px; }

/* ============================================================================
   Header da home
   ---------------------------------------------------------------------------
   A marcação saiu do componente `w-nav` do Webflow. Motivo: aquele runtime
   (jQuery) abria e fechava o menu escrevendo estilo inline no elemento, e o
   IX2 ainda plantava um `opacity:0; translate3d(0,-220px,0)` no próprio
   dropdown como "animação de entrada" — o painel nascia invisível e deslocado
   e brigava com qualquer CSS nosso. Havia também um <style> no <head> que
   escondia o header inteiro no mobile até o webflow.js subir.
   Agora o header é HTML comum (mesma estrutura, mesmas classes de estilo, o
   mesmo Lottie), aberto por uma classe `.is-menu-open` que o site-overrides.js
   alterna — igual ao header das LPs. Nada aqui depende mais do runtime.
   ========================================================================= */

/* `z-index: 1000` vinha da classe `.w-nav`, que saiu junto com o runtime; sem
   ele o header (que é `position: fixed`) fica atrás do conteúdo do hero.
   O `!important` no fundo continua necessário: a interação de scroll do IX2
   casa por classe (não por data-w-id) e segue interpolando `background-color`
   no style inline do `.nav` — o resultado era uma barra semitransparente que
   nunca fechava a cor. Quem manda na cor é a classe .nav--scrolled. */
.nav {
  z-index: 1000;
  background-color: transparent !important;
  transition: background-color .3s ease;
}
.nav.nav--scrolled { background-color: var(--black, #1e1e1e) !important; }

/* o botão é um <button> de verdade (só na home): zera o chrome do navegador.
   O seletor pega pelo elemento porque nas LPs o gatilho ainda é uma <div>. */
button.menu-button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--sd-radius-sm);
  padding: 12px;
  font: inherit;
  line-height: 0;
  display: block;
}
button.menu-button.w--open { background-color: var(--black, #1e1e1e); }

/* Dropdown. `.container.rel_2` volta a ser estático: era ele (position:
   relative) que ancorava o painel absoluto, e como é mais baixo que a barra o
   `top:100%` caía dentro do header. Sem ele quem ancora é o `.nav`, que é
   fixed — então 100% é a altura real da barra.
   Os wrappers internos (.container centrado, .page-padding, .menu) são
   achatados: o painel visível passa a ser exatamente o .links-wrapper. */
.nav .container.rel_2 { position: static; }
.nav .nav-menu { display: none; }
.nav.is-menu-open .nav-menu {
  display: block;
  position: absolute;
  inset: 100% 16px auto 16px;
  margin-top: 8px;
  padding: 0;
  background-color: var(--black, #1e1e1e);
  border-radius: var(--sd-radius);
  box-shadow: 0 18px 40px #00000038;
  overflow: hidden;
}
.nav.is-menu-open .nav-menu .container,
.nav.is-menu-open .nav-menu .page-padding,
.nav.is-menu-open .nav-menu .menu {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
}
.nav.is-menu-open .links-wrapper {
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: none;
  padding: 10px;
  display: flex;
}
/* alvo de toque confortável: os 8px de padding do Webflow davam 36px */
.nav.is-menu-open .nav-link,
.nav.is-menu-open .nav-link_2 {
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
}
/* "Contato" traz um border-bottom do Webflow que, com o item esticado, virava
   uma régua branca de ponta a ponta. Encolhido ao conteúdo, volta a ser o
   sublinhado do rótulo. */
.nav.is-menu-open .nav-link_2 {
  width: auto;
  align-self: flex-end;
}
/* O `w--current` que o webflow.js carimba em "início" desenhava um traço
   vertical solto ao lado do rótulo. Como todos os itens são âncoras da mesma
   página, esse "item atual" nunca muda e não informa nada — some. */
.nav .nav-link.w--current {
  border-left: 0;
  border-right: 0;
  font-weight: inherit;
}
/* no desktop o painel para exatamente embaixo do hambúrguer: o botão fica
   dentro do .container (max-width 1236px, centrado) + 16px de padding, então
   o recuo soma essa sobra do container. `max()` segura em 16px quando a
   janela é mais estreita que o container. */
@media screen and (min-width: 992px) {
  .nav.is-menu-open .nav-menu {
    left: auto;                 /* painel compacto, do tamanho dos rótulos */
    width: max-content;
    right: max(16px, calc(16px + (100% - 1236px) / 2));
  }
}

/* Logos de marketplace na home (seção #marketplace): agora linkam pra LP de
   cada canal (/lp/mercado-livre, /lp/amazon, /lp/shopee). O grid-area e o
   place-self continuam vindo do CSS do Webflow (seletor por #id, que ficou
   nesses <a> no lugar dos <img>). Ganham chrome de botão (borda, fundo,
   canto suave) pra parecer clicável, no lugar do logo solto — no mesmo
   espírito visual das tags .hiw-button (borda #d8dbdf) já usadas ao lado.
   width:100% ocupa a coluna inteira do grid (que já reserva 1fr por item),
   garantindo os três do mesmo tamanho mesmo com logos de larguras diferentes.
   .inner-block não esticava (o .hiw-card é flex com align-items:flex-start,
   então o filho só ocupa a largura do próprio conteúdo) — o :has() aqui é só
   pra esse bloco específico (o das logos de marketplace), sem esticar os
   outros .inner-block do slider (ERP, e-commerce, hubs). */
.inner-block:has(.logos-grid._32) { align-self: stretch; }
.logos-grid._32 { grid-column-gap: 12px; grid-row-gap: 12px; }
.marketplace-logo-link {
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  height: 44px;
  padding: 6px 18px;
  border: 1px solid #d8dbdf;
  border-radius: 6px;
  background-color: #f7f8f8;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.marketplace-logo-link:hover,
.marketplace-logo-link:focus-visible {
  transform: translateY(-2px);
  border-color: #1e1e1e;
  background-color: #fff;
  box-shadow: 0 6px 16px rgba(30, 30, 30, .08);
}
/* .image-service vem do Webflow com max-width:60px — largura fixa faz logos
   mais "quadrados" (Amazon) parecerem maiores que os mais largos e baixos
   (Mercado Livre, Shopee). Trocado por um teto de altura: os três leem o
   mesmo peso visual, cada um só com a largura que sua proporção pedir. */
.marketplace-logo-link .image-service {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 24px;
}

/* Ícone do menu mobile (index.html): a fonte de ícones do Webflow
   (webflow-icons, embutida em base64 no CSS) não renderiza de forma
   confiável em todo navegador — em alguns aparece como glifo/caractere
   quebrado no lugar do hambúrguer. Troca por um ícone desenhado em SVG via
   mask, sem depender de font em nenhuma situação.
   Sem o glifo, a div não tem mais tamanho intrínseco nenhum (era o glifo
   que dava a ela 24x24px via font-size) — por isso width/height explícitos
   abaixo. */
.w-icon-nav-menu:before { content: none; }
.w-icon-nav-menu {
  background-color: currentColor;
  width: 24px;
  height: 24px;
  display: block;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2.4' rx='1.2'/%3E%3Crect y='10.8' width='24' height='2.4' rx='1.2'/%3E%3Crect y='17.6' width='24' height='2.4' rx='1.2'/%3E%3C/svg%3E") center / 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect y='4' width='24' height='2.4' rx='1.2'/%3E%3Crect y='10.8' width='24' height='2.4' rx='1.2'/%3E%3Crect y='17.6' width='24' height='2.4' rx='1.2'/%3E%3C/svg%3E") center / 22px no-repeat;
  transition: transform .25s ease;
}
/* quando o menu abre, o botão vira um "x" pra indicar fechar */
.w--open .w-icon-nav-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='-1.2' width='2.4' height='26.4' rx='1.2' transform='rotate(45 12 12)'/%3E%3Crect x='11' y='-1.2' width='2.4' height='26.4' rx='1.2' transform='rotate(-45 12 12)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='11' y='-1.2' width='2.4' height='26.4' rx='1.2' transform='rotate(45 12 12)'/%3E%3Crect x='11' y='-1.2' width='2.4' height='26.4' rx='1.2' transform='rotate(-45 12 12)'/%3E%3C/svg%3E");
}

/* Cards de "novidades": a imagem tinha uma máscara que esmaecia os 30% de
   baixo até transparente, criando um fade pra branco contra o fundo do
   card. Remove a máscara — a imagem fica inteira, sem o degradê. */
.process-card-bottom {
  -webkit-mask-image: none;
  mask-image: none;
}

/* ============================================================================
   Cantos levemente arredondados (site inteiro)
   ---------------------------------------------------------------------------
   O CSS do Webflow entrega quase tudo com canto reto. O objetivo aqui é só
   tirar a dureza — raio pequeno, nada de "pílula". Dois valores:
     --sd-radius     12px  caixas grandes (cards, painéis, imagens de bloco)
     --sd-radius-sm   8px  elementos pequenos (botões de UI, thumbs, campos)
   Seções de página inteira ficam de fora de propósito: arredondar uma faixa
   que sangra de ponta a ponta cria um recorte estranho contra a cor de fundo.
   ========================================================================= */

:root {
  --sd-radius: 12px;
  --sd-radius-sm: 8px;
}

/* cards e blocos de conteúdo */
.hiw-card,
.process-card,
.gallery-card,
.team-about-card,
.tab-panel { border-radius: var(--sd-radius); }

/* imagens que aparecem como bloco dentro de cards */
.image-3,
.image-7,
.blur-image,
.process-card-image { border-radius: var(--sd-radius); }

/* .image-service são logos (marketplace, ERP, e-commerce, hubs, ads) — canto
   arredondado corta a marca sem necessidade, aqui não faz sentido. */
.image-service { border-radius: 0; }

/* elementos pequenos de interface */
.hiw-button,
.feature-tab-link { border-radius: var(--sd-radius-sm); }

/* .hiw-image-wrapper/.hiw-image-small ficam DENTRO do .hiw-card (que tem
   24px de padding) — usar o mesmo raio do card (12px) pros dois deixava a
   moldura interna parecendo "solta", sem relação com o contorno externo.
   Raio menor (--sd-radius-sm) resolve essa aninhagem. O border tracejado
   do Webflow também sai — a própria cor de fundo (#edeef1) já separa o
   bloco do card sem precisar de contorno. */
.hiw-image-wrapper {
  border: none;
  border-radius: var(--sd-radius-sm);
}
.hiw-image-small { border-radius: var(--sd-radius-sm); }

/* o overflow precisa acompanhar, senão o conteúdo vaza pelo canto arredondado */
.hiw-card,
.tab-panel,
.feature-tab-link,
.hiw-image-wrapper { overflow: hidden; }

/* Barra de progresso da troca automática das abas de cases
   (site-overrides.js). Pílula fina com respiro de 8px dos quatro lados —
   não encosta em nenhuma borda da aba. O ::after é a trilha (opacidade
   baixa, largura inteira do respiro) — sem ela, o preenchimento sozinho
   quase não aparece contra o fundo da aba. A barra de preenchimento
   (.tab-progress-bar) fica por cima, em opacidade cheia; a largura dela é
   definida em px pelo JS (não dá pra animar em % aqui, já que ela some
   dentro do respiro em vez de ir de borda a borda). */
.feature-tab-link::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background-color: currentColor;
  opacity: .16;
}
.tab-progress-bar {
  position: absolute;
  z-index: 2;
  left: 8px;
  bottom: 8px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background-color: currentColor;
  opacity: 1;
}

/* ============================================================================
   Tabs de cases: respirar entre os blocos
   ---------------------------------------------------------------------------
   Com canto arredondado, os blocos coladinhos passam a mostrar as "quinas"
   negativas entre um e outro. Um espaçamento pequeno resolve e ainda separa
   visualmente a lista de logos do painel de detalhe.
   ========================================================================= */

.feature-tab-menu { gap: 8px; }
.tab-panel { margin-top: 8px; padding: 40px 24px 0; }
.tab-detail-wrapper { margin-bottom: 20px; }
.div-block-4 { gap: 16px; }

/* No ≤479px a lista de logos das abas de cases é uma grade de 2 colunas
   (.feature-tab-menu{flex-flow:wrap} + .feature-tab-link{width:50%} no CSS do
   Webflow). Só que o gap:8px que adicionamos ao menu logo acima faz
   50% + 50% + 8px estourar a linha: cada logo quebrava sozinho, ocupando só
   metade da largura e encostado à esquerda — com a barra de progresso
   (::after, left/right:8px) e o fundo do item ativo cortados no meio da tela.
   calc(50% - 4px) desconta a metade do gap de cada item, então os dois cabem
   na mesma linha e a grade de 2 colunas volta a fechar certinho. O .w--current
   precisa do mesmo valor porque a regra do Webflow pra aba ativa também fixa
   width:50% com especificidade maior. */
@media screen and (max-width: 479px) {
  .feature-tab-link,
  .feature-tab-link.w--current { width: calc(50% - 4px); }
}

/* ============================================================================
   #solucoes: CTA mobile solto (só ≤479px)
   ---------------------------------------------------------------------------
   No mobile a seção troca o botão do topo (.bttn01.b.hide-mob, ao lado do
   título) por um CTA próprio embrulhado em .hide-desk, que no HTML vem
   DEPOIS do slider "Veja como podemos te ajudar". O slider (.hiw-slider) tem
   a altura do slide mais alto (~704px) e os slides visíveis são mais baixos
   (~600px), então sobra um vão morto embaixo dele — e o botão aparecia
   flutuando nesse vazio, sem relação com o conteúdo acima ou abaixo.
   Reordena via flex pra o CTA seguir direto o parágrafo de introdução
   (encostado em conteúdo real), com o slider logo abaixo dele.
   ========================================================================= */
@media screen and (max-width: 479px) {
  #solucoes .page-padding { display: flex; flex-direction: column; }
  #solucoes .hide-desk { order: 1; margin-bottom: 42px; }
  #solucoes .hide-desk .spacing-top-32 { margin-top: 0; }
  #solucoes .hiw-slider { order: 2; }
}

/* ============================================================================
   #solucoes ↔ #novos-projetos: vão gigante entre as seções no mobile (≤479px)
   ---------------------------------------------------------------------------
   Só essas duas seções (vizinhas) usam .section-regular. O espaço entre elas
   passava de 230px: 72px de padding em cada + ~90px de folga morta que o
   slider deixava embaixo — a .hiw-slider assume a altura do slide mais alto
   (~692px) e os slides visíveis têm ~600px, então sobrava um vazio dentro do
   slider, abaixo do card.
   - Encolhe o padding vertical das duas seções e zera quase todo o
     padding-bottom de #solucoes (o slider já dá peso visual embaixo).
   - Faz o slider caber no slide ativo: os inativos (aria-hidden="true") só
     inflavam a linha do w-slider-mask; colapsando a altura deles, o mask e o
     .hiw-slider (height:auto) passam a seguir só o slide visível. Se o JS do
     slider não rodar, nenhum slide tem aria-hidden e cai no comportamento
     antigo (mostra o mais alto) — degrada sem quebrar.
   ========================================================================= */
@media screen and (max-width: 479px) {
  .section-regular { padding-top: 48px; padding-bottom: 48px; }
  #solucoes { padding-bottom: 24px; }
  #solucoes .hiw-slider,
  #solucoes .w-slider-mask { height: auto; }
  #solucoes .hiw-slide { height: auto; }
  #solucoes .hiw-slide[aria-hidden="true"] { height: 0; overflow: hidden; }
}

/* ============================================================================
   Campos de formulário (home, briefing, TOPFIT e as LPs)
   ---------------------------------------------------------------------------
   Eram sublinhados: fundo transparente e só a borda de baixo (2px). Viram
   campos com caixa própria — fundo, borda inteira, canto suave e área de
   toque maior. O estado de foco deixa de depender só da cor da linha:
   ganha anel, que também serve de indicação de foco para teclado.
   ========================================================================= */

.text-field {
  border: 1px solid rgba(30, 30, 30, .14);
  border-radius: var(--sd-radius-sm);
  background-color: #fff;
  color: #1e1e1e;
  padding: 11px 14px;
  height: auto;
  min-height: 44px;              /* alvo de toque confortável no celular */
  margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.text-field::placeholder { color: rgba(30, 30, 30, .38); }
.text-field:hover { border-color: rgba(30, 30, 30, .26); }
.text-field:focus {
  border-color: #1e1e1e;
  box-shadow: 0 0 0 3px rgba(30, 30, 30, .10);
  outline: 0;
}
textarea.text-field { min-height: 120px; padding-top: 12px; resize: vertical; }

/* o rótulo passa a ficar mais perto do campo que ele nomeia */
.label { margin-bottom: 6px; display: block; font-size: 13px; }

/* ============================================================================
   Rodapé: copyright e disclaimer em caixa normal
   ---------------------------------------------------------------------------
   .text-14 vem do Webflow com text-transform:uppercase, o que faz sentido nas
   tags curtas da home ("análise de dados", "integração erp"). Mas o rodapé usa
   o modificador ._60 para frases inteiras, e frase inteira em caixa alta fica
   difícil de ler. Por isso o alvo é ._60, não .text-14 inteiro.
   ========================================================================= */

.text-14._60 { text-transform: none; letter-spacing: normal; }

/* Vídeo de fundo em preto e branco: seção de contato na home, cases (TOPFIT)
   e as LPs de marketplace — todas usam .background-video. */
.background-video video { filter: grayscale(1); }

/* ============================================================ formulários ==
   Retorno do envio (sd-forms.js). Fica aqui, e não no lp-marketplace.css,
   porque home, case, briefing e LPs usam o mesmo componente. */

.sd-form-status { display: none; margin-top: 16px; border-radius: 10px; padding: 14px 16px; font-size: 15px; }
.sd-form-status.is-ok   { display: block; color: #075e35; background-color: #d8f3e4; }
.sd-form-status.is-fail { display: block; color: #8a1c1c; background-color: #fbe1e1; }

/* Aviso de LGPD ao lado do botão ENVIAR (Home e Case TOPFIT — únicas duas
   páginas que usam .right-align-div/.sd-form-legal). O Webflow deixa
   .right-align-div só right-aligned em linha única; aqui o aviso mora dentro
   dela, ao lado do botão, com espaço generoso entre os dois. Em telas
   estreitas, quebra pro aviso ficar acima do botão em vez de espremer os
   dois numa linha só. */
.right-align-div {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}
.right-align-div .sd-form-legal { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.5; opacity: .6; }
.right-align-div .submit-button { flex: 0 0 auto; }

/* Setas do carrossel de #solucoes: o Webflow zera o border-radius delas na
   versão mobile/tablet (.hiw-arrow.hide-tablet), deixando as pontas retas
   só nessa variante — inconsistente com a versão desktop, que é arredondada
   (.hiw-arrow tem border-radius:8px). */
.hiw-arrow.hide-tablet { border-radius: 8px; }
