/* O @import das fontes saiu daqui: functions.php já enfileira a MESMA família,
   com os mesmos pesos, via wp_enqueue_style('rike-fonts'). Eram duas
   requisições para o mesmo CSS — e a do @import é a pior das duas, porque só
   começa depois que o main.css termina de baixar, encadeando a espera. */

/* ─── Tokens estruturais ─────────────────────────────────────────────
   Extraídos do Figma deste projeto (node 7656:1349), não presumidos.
   --content-w = --frame-w − (padding lateral × 2) = 1440 − 224
   --section-px = 112 / 1440 = 7.78vw, com piso mobile de 24px          */
:root {
  --frame-w:     1440px;
  --content-w:   1216px;
  --section-px:  clamp(24px, 7.78vw, 112px);
  --content-gap: 56px;
  /* Altura do #sticky-header renderizado (pt-4 + conteúdo + pb-4).
     Usado como deslocamento por elementos `position: sticky`. */
  --header-h:    82px;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #0C111D;
}

/* ─── Gradient border (Diferenciais + Entregáveis cards) ────────── */
.gradient-border { position: relative; }
.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(270deg, #66b8ff 0%, rgba(255,255,255,0) 50%, #66b8ff 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.3;
  pointer-events: none;
}

/* ─── Fade-in on scroll ──────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Logos: proporção automática ───────────────────────────────── */
/*
  Qualquer logo, de qualquer dimensão, fica contido numa caixa
  de 160 × 40 px com object-fit: contain.
  Logos muito finos ficam alinhados ao centro.
*/
/* Mobile-only elements: hidden por padrão (desktop) */
.mobile-burger      { display: none !important; }
#mobile-drawer      { display: none; }

/* Helpers: visibilidade por breakpoint (≤899px = mobile, ≥900px = desktop) */
.mobile-only        { display: none !important; }
.desktop-only       { display: block; }
@media (max-width: 899px) {
  .mobile-only      { display: block !important; }
  .desktop-only     { display: none !important; }
}

/* Logo: altura fixa 40px, largura natural (cada logo ocupa só o que precisa) */
.logo-item {
  flex-shrink: 0;
  height: 40px;
  width: auto;
  display: flex;
  align-items: center;
}
.logo-item img {
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  /* `flex-shrink: 0` é obrigatório: a img é flex item de .logo-item e, com o
     padrão 1, encolhia na horizontal mantendo os 40px de altura — quebrando a
     proporção dos logos mais largos.
     Sem opacity/hover: no Figma os logos ficam em cor cheia e não há hover. */
  flex-shrink: 0;
}

/* Track: gap fixo de 24px entre logos */
.logos-track {
  display: flex;
  gap: 24px;
  align-items: center;
  width: max-content;
  will-change: transform;
}

/* ─── Hero slider ───────────────────────────────────────────────── */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Sticky header ──────────────────────────────────────────────── */
#sticky-header {
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
#sticky-header.visible {
  transform: translateY(0);
}

/* ─── Dotted line separator ─────────────────────────────────────── */
.dotted-bottom {
  background-image: repeating-linear-gradient(
    to right, #8B99AD 0, #8B99AD 2px, transparent 2px, transparent 10px
  );
  background-position: bottom;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* ─── Cases slider ───────────────────────────────────────────────── */
.cases-viewport { width: 100%; }
.cases-track    { will-change: transform; }
.case-slide     { box-sizing: border-box; }
.case-desc p    { margin: 0 0 16px; }
.case-desc p:last-child { margin-bottom: 0; }

.case-border { position: relative; }
.case-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(270deg,
    rgba(102, 184, 255, 0.3) 0%,
    rgba(255, 255, 255, 0)   43%,
    rgba(102, 184, 255, 0.3) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* O antigo `.post-content` saiu daqui na v2.15.0: o single passou a seguir o
   Figma 8023:1708 e o corpo do artigo vive em `.sgl-corpo`, em single.css. */

/* ─── Paginação (home/archive) ──────────────────────────────────── */
.pagination .nav-links,
.navigation .nav-links       { display: flex; gap: 8px; }
.page-numbers                {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 8px; background: white; color: #4a5568;
  font-family:'Trebuchet MS',sans-serif; font-size: 14px;
  text-decoration: none; transition: all .15s;
}
.page-numbers:hover          { background:#006fcc; color:white; }
.page-numbers.current        { background:#004a8a; color:white; font-weight: bold; }

/* ─── Video background sections ────────────────────────────────── */
.video-section video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  pointer-events: none;
}

/* ─── Acessibilidade ───────────────────────────────────────────── */
/* Classe padrão do WordPress: some da tela mas continua no fluxo de leitura
   de leitores de tela. `clip-path` além de `clip` porque o segundo está
   obsoleto e alguns navegadores já o ignoram. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Ao receber foco pelo teclado, volta a aparecer — senão um botão "Filtrar"
   invisível vira uma armadilha para quem navega com Tab. */
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* ─── Rodapé (Figma 7640:24) ────────────────────────────────────── */
/* TODOS os traços do rodapé são `strokeAlign: INSIDE` no Figma: ficam dentro da
   caixa e não mudam o tamanho dela. `border` faz o contrário — soma 1px por
   lado, e era daí que vinham os 4px a mais na altura do rodapé, o botão de 62
   em vez de 60 e o separador legal de 177 em vez de 175. Inset resolve os
   cinco casos, e é o mesmo recurso já usado no campo de busca. */
.ft-topo  { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .15); }
.ft-sobre { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .15); }
.ft-btn   { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.ft-selos {
  box-shadow: inset 0  1px 0 rgba(255, 255, 255, .15),
              inset 0 -1px 0 rgba(255, 255, 255, .15);
}
/* Separador dos links legais: linha dos dois lados no item do meio (7643:766),
   e só à esquerda quando existem apenas dois links. */
.ft-sep    { box-shadow: inset  1px 0 0 #344054, inset -1px 0 0 #344054; }
.ft-sep--l { box-shadow: inset  1px 0 0 #344054; }
/* Os selos têm larguras diferentes (68, 69 e 80px) e a mesma altura de 80 —
   por isso a altura é fixa e a largura fica automática. */
.ft-selos__img {
  display: block;
  height: 80px;
  width: auto;
  max-width: 100%;
}
/* O fill do texto é um GRADIENTE no Figma. Em CSS isso só existe via
   background-clip: text, e o texto precisa ficar transparente para o fundo
   aparecer. O `color` acima é a reserva de quem não suporta a propriedade —
   sem ele, o texto sumiria em vez de degradar. */
.ft-selos__texto {
  margin: 0;
  /* No Figma o nó de texto ocupa os 1216px e centraliza dentro deles; sem a
     largura cheia a caixa encolhe para o texto e sai do diff. */
  width: 100%;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #06ab75;
  background-image: linear-gradient(90deg, #06ab75 0%, #0061ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-text-fill-color: transparent) {
  .ft-selos__texto { -webkit-text-fill-color: transparent; }
}
.ft-rede { text-decoration: none; }

/* ─── Cards de blog da home ────────────────────────────────────── */
/* Mesmo hover dos cards da listagem (`.blg-card` em blog.css): a imagem sobe
   4px e o título vira azul. O `overflow: visible` é obrigatório — o card tem
   `overflow-clip` do Tailwind, que cortaria justamente os 4px do movimento. */
.home-post { overflow: visible; }
.home-post__img,
.home-post h3 { transition: transform .3s cubic-bezier(.2,.7,.3,1), color .2s; }
.home-post:hover .home-post__img { transform: translateY(-4px); }
.home-post:hover h3            { color: #006fcc; }

/* ─── Card de blog inteiro clicável ────────────────────────────────
   Clicar em qualquer ponto do card leva ao post, não só no "Saiba mais".

   Não dá para embrulhar o card num <a>: ele já tem link na imagem, no
   título e no botão, e HTML não permite âncora dentro de âncora — o
   navegador desmontaria a marcação. Entra então uma camada por cima,
   com o mesmo destino.

   `aria-hidden` + `tabindex="-1"` no elemento (ver os template-parts):
   para leitor de tela e para o teclado ela não existe, senão cada card
   passaria a anunciar mais um link, vazio. Quem navega assim continua
   usando os links reais, que seguem no HTML.

   O :hover de cada card já existia — imagem sobe 4px, título fica azul —
   e continua valendo: a camada é FILHA do card, então passar por ela é
   passar pelo card. */
.blg-card,
.blg-dest-main,
.blg-small,
.home-post,
.sgl-relacionado { position: relative; }

.card-cobre {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

/* ─── Dropdown de Soluções ─────────────────────────────────────── */
/* O Figma traz só o caret (nó 7656:2430, frame de gap 4 com texto + seta).
   O painel foi desenhado seguindo o sistema: raio 14 e a mesma sombra do
   header (0 4px 24px rgba(0,0,0,.08)).

   O header estático mora dentro do hero, que tem `overflow: hidden` em várias
   páginas — por isso o painel precisa de z-index alto e o hero de um
   `overflow: visible` no cabeçalho (ver .*-hero__header abaixo). */
.nav-drop { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.nav-drop__label { text-decoration: none; }
.nav-drop__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.nav-drop__toggle svg { transition: transform .2s cubic-bezier(.2,.7,.3,1); }
.nav-drop__toggle[aria-expanded="true"] svg,
.nav-drop:hover .nav-drop__toggle svg { transform: rotate(180deg); }

.nav-drop__painel {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 60;
  min-width: 296px;
  margin-top: 12px;
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  text-align: left;
  white-space: normal;
}
/* Ponte invisível sobre o intervalo de 12px: sem ela o painel fecha quando o
   mouse sai do link e ainda não chegou no painel. */
.nav-drop__painel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
/* Hover e foco abrem sem depender de JS; o JS só cuida de clique e Esc,
   removendo/recolocando o atributo `hidden`. */
.nav-drop:hover > .nav-drop__painel,
.nav-drop:focus-within > .nav-drop__painel,
.nav-drop__painel:not([hidden]) { display: block; }

.nav-drop__item {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .15s;
}
.nav-drop__item:hover,
.nav-drop__item:focus-visible { background: #f5f9ff; }
.nav-drop__item-titulo {
  display: block;
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #0c111d;
}
.nav-drop__item-desc {
  display: block;
  margin-top: 2px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #6b778c;
}

/* Os heroes cortam o conteúdo com overflow hidden; o cabeçalho precisa deixar
   o painel escapar. */
.obs-hero__header, .con-hero__header, .cmp-hero__header,
.dyn-hero__header, .blg-hero__header, .svc-hero__header,
.sbr-hero__header, #sticky-header { overflow: visible; }