/*
Theme Name: Verik Marketing
Theme URI: https://github.com/empresa-digital/verik-marketing
Description: Child theme do Hello Elementor para o site de marketing do Verik.
Author: TeamCollab
Template: hello-elementor
Version: 0.2.3
Text Domain: verik-marketing
*/

/* CSS custom do site de marketing entra aqui.
   Preferir estilizar via Elementor; usar este arquivo para o que o
   Elementor não cobre (ex.: estados iniciais de animação GSAP). */

/* Estado inicial dos elementos animados (evita flash antes do GSAP rodar).
   O HERO (.gsap-hero) anima no load; as demais seções (.gsap-fade-up) no scroll.
   Quem revela é o GSAP; se ele (ou o ScrollTrigger) não carregar, animations.js
   força tudo a visível, e com o JS desligado o <noscript> em functions.php faz
   o mesmo. */
.gsap-hero,
.gsap-fade-up {
  opacity: 0;
}

/* Hover dos cards: leve elevação + sombra (feeling do demo Zenix).
   A classe .vk-card é aplicada aos containers-card via create-home-sections.php;
   o Elementor a emite em .elementor-element.vk-card. */
.vk-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 16, 17, 0.12);
}

/* Hover dos botões, FIEL ao Zenix. No demo o kit define um hover GLOBAL
   (bg → secondary/navy, texto → branco) para todo .elementor-button — ver
   ref/36034f77-post-4746.css. Nesta build o save descarta os controles de
   hover por-variante do widget (button_background_hover_color/… em vk_button),
   então o swap de cor some do markup; só sobra o float do hover_animation.
   Reponho o swap aqui, determinístico, mantendo o float. Transição suave. */
.elementor-button {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.elementor-button:hover,
.elementor-button:focus {
  background-color: var(--e-global-color-secondary); /* navy */
  color: var(--e-global-color-vk_white);             /* branco */
  border-color: var(--e-global-color-secondary);
}

/* Icon-box dos cards, FIEL ao Zenix e feito 100% em CSS (o sanitizer de save
   desta build descarta view/shape/cores/typography do widget — ver
   vk_icon_box em vk-page-helpers.php). No demo: badge quadrado-arredondado lima
   (primary) com glifo navy (secondary), ícone no topo, TEXTO À ESQUERDA,
   título navy 21px/600, descrição 18px. */
.vk-card .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 16px;
}
.vk-card .elementor-icon-box-icon {
  margin: 0;
}
.vk-card .elementor-icon-box-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  font-size: 29px;
  border-radius: 12px;
  background-color: var(--e-global-color-primary); /* lima */
  color: var(--e-global-color-secondary);          /* navy */
}
.vk-card .elementor-icon-box-icon .elementor-icon svg,
.vk-card .elementor-icon-box-icon .elementor-icon i {
  fill: var(--e-global-color-secondary);
  color: var(--e-global-color-secondary);
  width: 1em;
  height: 1em;
}
.vk-card .elementor-icon-box-title {
  margin-block-end: 10px;
  color: var(--e-global-color-secondary);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}
.vk-card .elementor-icon-box-description {
  font-size: 18px;
  line-height: 1.6;
}

/* NAVBAR numa linha só (estilo Zenix): o menu horizontal do header não pode
   quebrar nem encolher. Sem isto o widget nav-menu recebe uma largura estreita
   e os itens (Home/Soluções/Sobre/Contato/Blog) quebram em 3 linhas. O widget
   só aparece no header, então o seletor global é seguro. */
.elementor-widget-nav-menu {
  width: auto !important;
  flex: 0 0 auto !important;
}
.elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
  flex-wrap: nowrap;
}
.elementor-nav-menu--main .elementor-item {
  white-space: nowrap;
}

/* NAVBAR: logo não pode sobrepor o 1º item do menu (fix 2026-10-20).
   Sintoma: o tile lima do "V" sumia (colapsava pra 0) e o "V" dele caía por
   cima da wordmark "Verik" (parecia "W"), e "Home" encostava no fim da
   wordmark — a coluna do logo não reservava largura nem o gap de 36px pro
   menu. Causa: nesta build o save descarta a altura do tile e a largura
   computada da coluna do logo colapsa (os controles `height`/`flex_grow` do
   container não persistem; só `--width` sobra no tile). Selecionamos por
   ESTRUTURA porque os element-ids dos containers são regenerados a cada run
   (não dá pra fixar classe/id). Só o container boxed do header tem
   `.e-con-inner`, então a âncora é única: seu 1º filho `.e-con` = left_group
   (logo + nav-menu). */
.elementor-location-header .e-con-inner > .e-con {
  /* os 2 grupos da barra (left_group = logo+menu, e as ações = botões)
     herdam `--container-widget-flex-grow:1` e esticam; ao dar largura real
     pro logo, o grupo de ações passava a encavalar o último item do menu
     ("Entrar" sobre "Contact"). Dimensionar pelo conteúdo e deixar o
     space-between do boxed preencher o meio. */
  flex: 0 0 auto !important;
}
.elementor-location-header .e-con-inner > .e-con:first-child > .e-con {
  /* coluna do logo: dimensiona pelo conteúdo, não encolhe (preserva o gap
     de 36px do left_group até o menu). */
  flex: 0 0 auto !important;
  width: auto !important;
}
.elementor-location-header .e-con-inner > .e-con:first-child > .e-con > .e-con {
  /* tile lima 40x40: fixa o quadrado (altura é descartada no save). */
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
}

/* NAVBAR sticky + semi-transparente (estilo Zenix): o header do Elementor
   (<header class="elementor-location-header">) ancora no topo ao rolar e a
   barra principal fica translúcida com blur de fundo. O Zenix usa
   `<header class="site-header sticky-header">` fixo no topo; reproduzimos o
   mesmo comportamento sem depender do tema ekit.
   - `position: sticky; top: 0` cola o header inteiro (faixa de anúncio + navbar)
     no topo da viewport durante o scroll; o <body> é o container de rolagem.
   - A barra branca (logo|menu|botões) é o ÚLTIMO container de topo do header
     (a faixa de anúncio lima é o primeiro). Selecionamos por posição
     (`> .e-con:last-child`) porque esta build do Elementor NÃO emite
     `_css_classes` no markup de containers, então uma classe custom não chega
     ao HTML. O `!important` vence o background global (var --e-global-color-vk_white)
     que o Elementor emite no mesmo elemento. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.elementor-location-header > .elementor-element.e-con:last-child {
  background-color: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(16, 16, 17, 0.06);
}

/* Âncoras do one-page nav (menu Features/Pricing/FAQ): o header é sticky
   (~106px: faixa de anúncio + navbar), então sem offset o topo da seção fica
   coberto ao navegar pela âncora. scroll-margin-top recua o ponto de parada. */
#features,
#pricing,
#faq {
  scroll-margin-top: 120px;
}

/* HERO claro ao estilo Zenix: fundo branco→verde-pálido com um grid lima
   sutil. O grid é desenhado com dois linear-gradients (linhas verticais +
   horizontais) sobre um radial suave que clareia o centro. A classe .vk-hero
   é aplicada à SEÇÃO do hero em create-home-sections.php; o Elementor a emite
   em .elementor-element.vk-hero. */
.vk-hero {
  position: relative;
  background-color: #ffffff;
  background-image:
    radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(231, 251, 218, 0.35) 100%),
    linear-gradient(to right, rgba(185, 251, 106, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(185, 251, 106, 0.18) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Bloco visual à direita do hero: gradiente verde-pálido + sombra suave,
   funcionando como placeholder de imagem da mesma proporção do mock do Zenix. */
.vk-hero-visual {
  background-image: linear-gradient(135deg, #ebfef6 0%, #e7fbda 55%, #d7f3b8 100%) !important;
  box-shadow: 0 24px 60px rgba(27, 66, 0, 0.12);
  overflow: hidden;
}

/* STATS / números ao estilo Zenix (widget counter). Os controles de estilo do
   widget são descartados no save desta build, então número e rótulo são
   estilizados aqui. Medidas do CSS de referência (ref/3cd6d16f-post-4911.css):
   número Inter Tight 68/700, line-height 1, letter-spacing -0.03em, navy
   (secondary); rótulo Inter Tight 500 na cor de texto; gap 4px. GOTCHA: a
   classe custom `.vk-stat` do widget counter NÃO chega ao markup nesta build
   (persiste no _elementor_data mas o HTML sai só com .elementor-widget-counter
   — versão-widget do mesmo gotcha dos containers). Como counter é usado APENAS
   nesta faixa de stats, selecionamos pelo tipo do widget, que é determinístico. */
.elementor-widget-counter {
  flex: 1 1 180px;
  max-width: 280px;
  text-align: center;
}
.elementor-widget-counter .elementor-counter {
  gap: 4px;
  align-items: center;
}
.elementor-widget-counter .elementor-counter-number-wrapper {
  justify-content: center;
  color: var(--e-global-color-secondary);
  font-family: "Inter Tight", sans-serif;
  font-weight: 700;
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.elementor-widget-counter .elementor-counter-title {
  justify-content: center;
  color: var(--e-global-color-text);
  font-family: "Inter Tight", sans-serif;
  font-weight: 500;
  font-size: 17px;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .elementor-widget-counter {
    flex-basis: 40%;
  }
  .elementor-widget-counter .elementor-counter-number-wrapper {
    font-size: 48px;
  }
}

/* INTEGRAÇÕES — faixa navy fiel ao Zenix (container d92ab20). Fundo escuro com
   um grid sutil de linhas claras (o Zenix usa um SVG white-lines overlay). Os
   cards (.vk-int-card) são navy com borda branca sutil 1px e radius 12px; como
   os controles de estilo do icon-box caem no save desta build, o visual do
   card (ícone lima no topo, título branco 21/600 com hover lima, descrição
   branca) é feito aqui, em `.vk-int-card .elementor-icon-box-*`. */
.vk-integrations {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.vk-int-card {
  border: 1px solid rgba(224, 224, 233, 0.13);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.vk-int-card:hover {
  transform: translateY(-6px);
  border-color: var(--e-global-color-primary); /* lima no hover */
}
.vk-int-card .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 14px;
}
.vk-int-card .elementor-icon-box-icon {
  margin: 0;
}
.vk-int-card .elementor-icon-box-icon .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.vk-int-card .elementor-icon-box-icon .elementor-icon i,
.vk-int-card .elementor-icon-box-icon .elementor-icon svg {
  color: var(--e-global-color-primary); /* glifo lima sobre o navy */
  fill: var(--e-global-color-primary);
  width: 1em;
  height: 1em;
}
/* Título/descrição: o post-5.css gerado pelo Elementor emite
   `.elementor-widget-icon-box .elementor-icon-box-title{color:primary}` (lima)
   com especificidade 0,2,0 e carrega DEPOIS do style.css — por isso incluímos
   `.elementor-widget-icon-box` no seletor (0,3,0) pra vencer e manter o título
   branco (fiel ao Zenix: branco em repouso, lima no hover). */
.vk-int-card .elementor-widget-icon-box .elementor-icon-box-title {
  margin-block-end: 8px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}
.vk-int-card .elementor-widget-icon-box .elementor-icon-box-title a {
  color: #ffffff;
}
.vk-int-card:hover .elementor-widget-icon-box .elementor-icon-box-title,
.vk-int-card:hover .elementor-widget-icon-box .elementor-icon-box-title a {
  color: var(--e-global-color-primary);
}
.vk-int-card .elementor-widget-icon-box .elementor-icon-box-description {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   TEAM — 4 cards fiéis ao Zenix (grid 6354c71 / card e8ab971 do
   3cd6d16f-post-4911.css). O card não tem fundo (transparente), padding 16,
   radius 16; a foto, nome, divisor, cargo e ícones sociais são HTML inline no
   text-editor (o sanitizer de save descarta os controles de estilo dos widgets
   image/divider/icon-list/social-icons, e a classe de container é intermitente
   no markup). Aqui só vão o hover do card (lift) e o hover do social (swap
   lima→navy, fiel ao Zenix). As classes .vk-soc são de anchors (HTML sempre
   emitido), então o hover é confiável mesmo quando .vk-team-card não sai. */
.vk-team-card {
  transition: transform 0.3s ease;
}
.vk-team-card:hover {
  transform: translateY(-6px);
}
.vk-soc {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}
.vk-soc:hover {
  background: #13213B !important;
  color: #B9FB6A !important;
  border-color: #13213B !important;
}

/* ---------------------------------------------------------------------------
   FAQ — accordion/toggle fiel ao Zenix (medidas do nested-accordion em
   3cd6d16f-post-4911.css: título 21px/500 navy #13213B, divisor 1px #13213B17,
   padding 24px vertical, ícone +/- à DIREITA 18px navy; conteúdo slate 18px).
   O Zenix usa o widget nested-accordion; aqui reproduzimos sobre o widget
   legado `toggle`, que renderiza .elementor-toggle / .elementor-tab-title /
   .elementor-tab-content e já ANIMA (elementor-frontend faz slideToggle no
   clique; não sobrescrevemos o display:none do conteúdo, só padding/cor/fonte).
   Escopo via .elementor-widget-toggle .elementor-toggle (0,3,0) pra vencer a
   base widget-toggle.min.css (0,2,0) e o post-5.css (0,2,0). Só há um toggle
   na Home (a seção FAQ), então o escopo é determinístico. */
.elementor-widget-toggle .elementor-toggle {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.elementor-widget-toggle .elementor-toggle .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  border-block-end: 1px solid rgba(19, 33, 59, 0.09);
  font-weight: 500;
}
/* título à esquerda (ocupa o espaço), empurra o ícone pra direita */
.elementor-widget-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-title {
  order: 1;
  flex: 1 1 auto;
  color: #13213B;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}
/* ícone +/- à direita (escondemos o caret SVG padrão e desenhamos o glifo;
   a base já alterna qual span aparece via .elementor-active) */
.elementor-widget-toggle .elementor-toggle .elementor-tab-title .elementor-toggle-icon {
  order: 2;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon svg {
  display: none;
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon-closed,
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon-opened {
  color: #13213B;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  width: 18px;
  text-align: center;
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon-closed::before {
  content: "+";
}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-icon-opened::before {
  content: "\2212"; /* sinal de menos − */
}
/* conteúdo aberto: slate, largura de leitura confortável */
.elementor-widget-toggle .elementor-toggle .elementor-tab-content {
  padding: 2px 48px 24px 0;
  color: #64748B;
  font-size: 18px;
  line-height: 1.7;
  border-block-end: 1px solid rgba(19, 33, 59, 0.09);
}
.elementor-widget-toggle .elementor-toggle .elementor-tab-content p {
  margin: 0;
}

/* ---- Footer multi-coluna (fiel ao Zenix post-4683, fatia 1) -------------
   As cores/tamanhos vêm inline no HTML do text-editor (controles de widget
   caem no save); aqui ficam só hover e o responsivo do grid, escopados ao
   location footer. Grid 5-col desktop → 3-col tablet → 2-col mobile (como o
   grid 2d12536 do Zenix). */
.elementor-location-footer .vk-footer-cols a:hover,
.elementor-location-footer .vk-footer-bottom a:hover {
  color: #B9FB6A !important;
}
@media (max-width: 1024px) {
  .elementor-location-footer .vk-footer-cols {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .elementor-location-footer .vk-footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  .elementor-location-footer .vk-footer-bottom {
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
  }
}

/* ---- Footer fatia 2: faixa de contato + bloco "Innovating" + galeria -----
   (contact 7037479 / innovating 01b573f / galeria 35fc67f do Zenix). Hover dos
   links/social + galeria quebra pra grid no mobile (no desktop é a faixa
   nowrap de 7 tiles do demo). */
.elementor-location-footer .vk-fcontact a:hover {
  color: #B9FB6A !important;
}
.elementor-location-footer .vk-fsoc a:hover {
  opacity: 0.8;
}
@media (max-width: 767px) {
  .elementor-location-footer .vk-gallery {
    flex-wrap: wrap !important;
  }
  .elementor-location-footer .vk-gallery > div {
    flex: 1 1 28% !important;
  }
}