/*
 * Base de conhecimento -- identidade visual da Sellentt (sellentt.com.br).
 *
 * Paleta 100% laranja Sellentt (sem azul) e fundo branco, igual ao site --
 * o site institucional nao tem modo escuro, entao esta base tambem nao tem.
 *
 * Formas extraidas do site institucional:
 *   - laranja de marca #EE7100 (CTA, links, indicador ativo, categorias, tags)
 *   - cantos retos (2px) em botoes e cartoes -- a marca nao usa pilula/rounded
 *   - sombra caracteristica 0 16px 40px rgba(100,114,128,.2) nos cartoes
 *   - tipografia GreycliffCF (fonte proprietaria da Sellentt, licenciada
 *     separadamente). Aqui usamos Poppins como substituta -- geometria
 *     proxima -- ate os arquivos .woff2 da GreycliffCF serem adicionados em
 *     /public/fonts e declarados via @font-face (ver comentario no final).
 *
 * A unica excecao ao canto reto e a NAVBAR: a capsula, os links e o CTA dela
 * sao pilula (999px), forma copiada da navbar do site da Fastchannel a pedido
 * -- ver o comentario do bloco `topbar`. Dentro do mega-menu o conteudo volta
 * ao canto reto da marca.
 */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #f4f3f0;
  --border: #dedcd7;
  /* Largura da figura "onde fica" -- o recorte do menu lateral montado num
     quadro de 1000px. Nessa medida o menu sai no tamanho real dele (~220px);
     em 100% da coluna ele ficava com o dobro e tomava a tela inteira. */
  --figura-menu: 520px;
  --text: #1a1a1a;
  --muted: #5f5e5a;

  /* Preto da capsula da navbar. */
  --ink: #111111;

  --brand: #ee7100;
  --brand-strong: #c85000;
  --brand-soft: #fff3ec;
  /* Laranja claro da escala do painel (--sellentt-primary-200 em
     sellentt-panel/src/css/sellentt-variables.css). Mais forte que o
     --brand-soft e ainda claro o bastante para texto preto. */
  --brand-200: #ffc18a;
  /* "acento" agora e so um segundo tom de laranja -- sem azul na marca */
  --accent: #c85000;
  --accent-soft: #fff3ec;

  --radius: 2px;
  --radius-lg: 4px;

  /* Cartao do painel da Sellentt: sem contorno, so a barra na esquerda, canto
     de .3rem e a sombra do tema -- e o que .card.card-bordered faz la
     (sellentt-panel/src/assets/inspinia-v4/scss/components/_card.scss). */
  --card-radius: 0.3rem;
  --card-rail: 3px;
  --card-shadow: 0 1px 4px rgba(130, 143, 163, 0.15);
  --card-shadow-hover: 0 4px 14px rgba(130, 143, 163, 0.28);
  /* Hover do painel: sobe 2px em 0.3s ease-out e o icone esmaece para cinza
     (.card4:hover .material-symbols-outlined { color: lightgray }). */
  --card-transition: 0.3s ease-out;
  --card-lift: -2px;
  --icon-muted: #d3d3d3;
  /* Forma dos cartoes de grade (papel, modulo, artigo): canto generoso,
     simbolo num quadradinho tingido, seta num circulo no canto oposto e um
     botao de largura cheia no rodape. So a FORMA e nova -- a paleta e a
     mesma: laranja da marca no quadradinho e cinza rebaixado no botao.

     A barra laranja da esquerda (--card-rail) nao vale mais para todo
     cartao: ela ficou so nas portas por cargo e no convite da lista
     completa, que sao os dois pontos de enfase da home. Cartao de grade
     se separa do fundo pelo contorno de 1px em --border, o mesmo dos
     quadrinhos do indice, mais a sombra. */
  --card-radius-soft: 14px;
  --card-ico-radius: 10px;
  --card-seta: 28px;
  --shadow: 0 16px 40px rgba(100, 114, 128, 0.2);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-click: 0 1px 2px rgba(26, 26, 26, 0.04), 0 2px 6px rgba(26, 26, 26, 0.03);
  --shadow-click-hover: 0 2px 4px rgba(26, 26, 26, 0.05), 0 8px 20px rgba(100, 114, 128, 0.12);
  --code-bg: #f4f3f0;

  --font: 'Poppins', 'GreycliffCF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;

  /* Guia de layout Expanded (840-1199dp) do M3, o mesmo do Figma: 12 colunas,
     margem de 24 e goteira de 24. Com o `.wrap` limitado a 1080px sobram
     1032px de conteudo, ou seja colunas de 64px. */
  --m3-margem: 24px;
  --m3-goteira: 24px;
  /* Medidas da capsula, tiradas da navbar da referencia: 80px de altura e
     margem lateral de 6.8% da janela (em 1920px da ~130px de cada lado). A
     barra tem faixa propria, mais larga que o .wrap de 1080px do conteudo. */
  --navbar-h: 64px;
  --navbar-largura: 1360px;
  --navbar-margem: clamp(var(--m3-margem), 6.8vw, 130px);
  /* Altura ocupada pela barra: a capsula mais as duas folgas de 14px que a
     fazem flutuar. Quem depende disto e a trilha lateral do artigo. */
  --topbar-h: 92px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a,
img,
svg {
  -webkit-user-drag: none;
  user-drag: none;
}

a[class],
button,
nav {
  -webkit-user-select: none;
  user-select: none;
}

a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
 * Para usar a fonte oficial da marca em vez do substituto Poppins, adicione
 * os arquivos licenciados em /public/fonts e troque a variavel --font acima
 * por 'GreycliffCF', preservando o fallback:
 *
 * @font-face {
 *   font-family: 'GreycliffCF';
 *   src: url('/static/fonts/GreycliffCF-Regular.woff2') format('woff2');
 *   font-weight: 400;
 *   font-display: swap;
 * }
 * @font-face {
 *   font-family: 'GreycliffCF';
 *   src: url('/static/fonts/GreycliffCF-DemiBold.woff2') format('woff2');
 *   font-weight: 600;
 *   font-display: swap;
 * }
 */

/* ==========================================================================
   HOME (views/home.ejs) e blocos novos da pagina de artigo.
   Padroes vindos de Agendor, Ploomes, Omie, Olist, Nuvemshop, Mercos e Asaas,
   sobre os tokens que ja estavam neste arquivo.
   ========================================================================== */

/* Icones dos avisos. Uma variavel por icone porque cada um e usado duas vezes
   (`-webkit-mask-image` e `mask-image`). A cor vem do `background`. */
:root {
  --ico-aviso: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-dica: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E");
  --ico-cenario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
}

@keyframes hero-grade {
  from {
    background-position: 0 0, 0 0, 0 0;
  }
  to {
    background-position: 138px 138px, 46px 46px, 46px 46px;
  }
}

@keyframes hero-brilho {
  from {
    transform: translate3d(-1.6%, -1.2%, 0) scale(1);
    opacity: 0.82;
  }
  to {
    transform: translate3d(1.6%, 1.4%, 0) scale(1.08);
    opacity: 1;
  }
}

@keyframes chat-entrar {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgba(238, 113, 0, 0.12);
}

body.is-zoom,
body.is-menu-aberto {
  overflow: hidden;
}

@media (max-width: 900px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --m3-margem: 16px;
  }
}