/* ==========================================================================
   KLIPS — camada de tema (Advocacia & Contabilidade)
   --------------------------------------------------------------------------
   Este arquivo SÓ troca cor. Estrutura, tipografia, espaçamentos, efeitos,
   transições e interações do design system original permanecem intactos.
   Carregado DEPOIS de vistal.webflow.shared.css para sobrescrever os tokens.

   Marca:  azul #2A3888  ·  dourado #E0AB0C  (amostrados do logo vetorial)
   Direção: base clara, blocos em azul profundo, dourado contido como acento.
   ========================================================================== */

:root {
  /* ---- Cores da marca ---------------------------------------------------- */
  --klips-navy:        #2A3888;  /* azul oficial Klips */
  --klips-navy-deep:   #0F1533;  /* azul quase-preto: texto e superfícies escuras */
  --klips-gold:        #E0AB0C;  /* dourado oficial Klips */
  --klips-gold-text:   #8A6800;  /* variante escurecida: dourado legível sobre branco */

  /* ---- Sobrescreve a base do template ------------------------------------ */
  --base--black:  var(--klips-navy-deep);
  --base--white:  #FFFFFF;
  --base--yellow: var(--klips-gold);

  /* ---- Escala neutra: cinzas viram azul-acinzentados ---------------------- */
  --grey--grey-100: #F2F3F7;   /* respiro claro (era bege #F0EFED) */
  --grey--grey-200: #C3C8DD;   /* texto terciário sobre escuro */
  --grey--grey-300: #8B93B3;
  --grey--grey-400: #6A7295;   /* texto secundário */
  --grey--grey-500: #3B4368;   /* texto de corpo */
  --grey--grey-600: #232C57;
  --grey--grey-700: #1A2249;
  --grey--grey-800: #141C40;   /* botões circulares / seções escuras */
  --grey--grey-900: #0B1026;

  /* ---- Semânticos -------------------------------------------------------- */
  --bg-color--bg-accent:   var(--klips-navy);   /* blocos full-bleed: azul, não dourado */
  --text-color--text-accent: var(--klips-gold); /* acento tipográfico segue dourado */
}

/* ==========================================================================
   0. Compactação vertical
   --------------------------------------------------------------------------
   O template Vistal usa respiros muito generosos (padding de seção de 7,5rem,
   leque de 150svh). Numa LP de conversão isso "estoura" a tela. Aqui reduzimos
   os espaçamentos globais para as seções caberem em ~1 tela cada.
   ========================================================================== */

:root {
  --_sizes---padding-section--large:  3.25rem;   /* era 7.5rem */
  --_sizes---padding-section--medium: 2.5rem;    /* era 6.25rem */
  --_sizes---padding-section--small:  1.75rem;   /* era 3.75rem */
}

/* seção do "kit": o leque ocupava 1,5 tela só de área de rolagem */
.card_wrap {
  height: 100svh !important;   /* era 150svh */
}
.cards_container {
  top: 12svh !important;       /* era 25svh */
  padding-top: 1.5rem !important;
  padding-bottom: 3rem !important;   /* era 15rem */
}

@media screen and (max-width: 767px) {
  .card_wrap { height: 88svh !important; }
  .cards_container { top: 10svh !important; padding-bottom: 2rem !important; }
}

/* respiro extra (+20px) só no topo destas seções, conforme pedido.
   Usamos padding-top (não margin) de propósito: o rodapé é sticky e uma
   margem transparente deixaria o azul dele vazar pelo vão entre as seções —
   o mesmo bug que já corrigimos. padding-top dá o mesmo respiro, mas opaco. */
#produtos,
.section_faq,
.section_cta,
.klips-contato {
  padding-top: 20px;
}

/* ==========================================================================
   1. Blocos de acento: eram amarelo cheio, agora azul Klips
   ========================================================================== */

.section_about,
.section_cta {
  color: #FFFFFF;
}

.section_about h2,
.section_cta h2,
.section_about .tag,
.section_cta .tag {
  color: #FFFFFF;
}

/* quadradinho do rótulo (eyebrow) precisa contrastar com o azul */
.section_about .icon-1x1-extrasmall.bg-secondary,
.section_cta .icon-1x1-extrasmall.bg-secondary {
  background-color: var(--klips-gold);
}

/* botão secundário dentro dos blocos azuis: dourado, não azul-sobre-azul */
.section_about .button.w-variant-ded5bb62-3369-f5a8-9275-858f0e614de2,
.section_cta   .button.w-variant-ded5bb62-3369-f5a8-9275-858f0e614de2 {
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
}
.section_about .button.w-variant-ded5bb62-3369-f5a8-9275-858f0e614de2 .icon_button,
.section_cta   .button.w-variant-ded5bb62-3369-f5a8-9275-858f0e614de2 .icon_button {
  background-color: var(--klips-navy-deep);
  color: var(--klips-gold);
}

/* ==========================================================================
   2. Elementos pequenos que devem permanecer dourados
      (no template herdavam do mesmo token do bloco full-bleed)
   ========================================================================== */

.arrow,
.icon_button {
  color: var(--klips-gold);
}

/* a seta (SVG) deve sempre herdar a cor do círculo — a variante do Webflow
   forçava azul sobre azul e a seta sumia nos botões dourados dos blocos azuis */
.icon_button svg,
.arrow svg {
  color: inherit !important;
}

.icon_button.w-variant-729b7e2b-f9b2-34e6-f83a-9c3920d85923,
.icon_button.w-variant-ded5bb62-3369-f5a8-9275-858f0e614de2 {
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
}

.icon_button.is-footer {
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
}

.number {
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
}

.number_wrap {
  background-color: rgba(224, 171, 12, .10);
  background-image: linear-gradient(rgba(224, 171, 12, .20), rgba(224, 171, 12, .20));
}

.line_grid {
  border-left-color: var(--klips-gold);
}

blockquote,
.text-style-quote {
  border-left-color: var(--klips-gold);
}

/* ==========================================================================
   3. Abas de ambientes: a aba ativa vira dourada (era amarela)
      Sem isso ficaria azul sobre azul e sumiria.
   ========================================================================== */

.project_tab-card.w--current,
.project_tab-card.is-one.w--current,
.project_tab-card.is-two.w--current,
.project_tab-card.is-three.w--current,
.tabs_content.is-one.w--current,
.tabs_content.is-two.w--current,
.tabs_content.is-three.w--current,
.tabs_content.is-four.w--current,
.tabs_left.is-one.w--current,
.tabs_left.is-two.w--current,
.tabs_left.is-three.w--current,
.tabs_left.is-four.w--current {
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
  /* o template deixava uma foto dele por trás só da primeira aba ativa —
     sobrava sobre o dourado e derrubava a legibilidade do texto */
  background-image: none;
}

/* abas inativas: texto dourado sobre azul profundo */
.tabs_content,
.tabs_left,
.project_tab-card {
  color: var(--klips-gold);
}

/* ==========================================================================
   4. Gradientes e sobreposições: preto puro vira azul profundo
   ========================================================================== */

.bg_shadow-gradient {
  background-image: linear-gradient(rgba(15, 21, 51, 0), var(--klips-navy-deep));
}

/* Hero: duas fotos reais da Klips que fazem crossfade suave, com véu azul.
   Cada camada (::before / ::after) carrega uma foto já com o gradiente por cima;
   a animação alterna a opacidade das duas em loop. */
.hero_bg {
  background-color: var(--klips-navy-deep);
  background-image: none;
}
.hero_bg::before,
.hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: opacity;
}
.hero_bg::before {
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(15, 21, 51, .25), rgba(15, 21, 51, .88)),
    url("klips/hero-1.webp");
  animation: klipsHeroCross 16s ease-in-out infinite;
}
.hero_bg::after {
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(15, 21, 51, .25), rgba(15, 21, 51, .88)),
    url("klips/hero-2.webp");
  animation: klipsHeroCross 16s ease-in-out infinite;
  animation-delay: -8s;
}
@keyframes klipsHeroCross {
  0%   { opacity: 1; }
  44%  { opacity: 1; }
  50%  { opacity: 0; }
  94%  { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero_bg::before, .hero_bg::after { animation: none; }
  .hero_bg::after { opacity: 0; }
}

/* recorte de prédio do template: não existe equivalente Klips, então sai */
.hero_img-overlay {
  display: none !important;
}

/* assinatura da Klips no topo do hero, no lugar da arte gigante do template */
.hero_title {
  padding-top: 0;
}

.klips-slogan {
  color: #FFFFFF;
  font-family: var(--_typography---font-family--headers);
  font-size: clamp(2rem, 6.2vw, 5.5rem);
  font-weight: var(--_typography---font-weight--light);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 .125rem 2.5rem rgba(15, 21, 51, .55);
  margin: 0;
}

/* some quando o conteúdo de baixo do hero sobe e divide a tela (via JS) */
.hero_title {
  transition: opacity .45s ease, transform .45s ease;
}
.hero_title.is-faded {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
}

/* O template (Webflow IX2) fazia o bloco de baixo do hero — "Um parceiro só…"
   + descrição + botão — sumir com fade já no início da rolagem, cedo demais.
   Aqui anulamos esse fade: o bloco fica visível e só sai quando o hero inteiro
   rola para cima (sai naturalmente da tela). */
.hero_content-bottom {
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   5. Ajustes finos de contraste
   ========================================================================== */

/* dourado nunca como texto sobre fundo claro — só sobre superfícies escuras */
.section_services .text-color-accent,
.section_hero-full .text-color-accent,
.footer .text-color-accent {
  color: var(--klips-gold);
}

.text-color-accent {
  color: var(--klips-gold-text);
}

/* foco de teclado na cor da marca */
*[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
input[type="file"]:focus-visible {
  outline: .125rem solid var(--klips-gold);
  outline-offset: .125rem;
}

/* ==========================================================================
   6. Logos
   --------------------------------------------------------------------------
   A classe .img do template é `object-fit: cover` + absoluta, feita para foto
   sangrando no container. Aplicada a um logo, ela recorta e achata a marca —
   por isso todos os logos abaixo voltam ao fluxo com `contain` e largura auto.
   ========================================================================== */

.navbar_logo,
.footer_logo .img,
.footer_bottom .img {
  object-fit: contain;
}

.navbar_logo {
  height: 2.93rem;          /* 2.25rem + 30% */
  max-height: 2.93rem;
  width: auto;
}

.footer_logo {
  width: auto;
  height: 2.75rem;
}

.footer_logo .img {
  position: relative;
  width: auto;
  height: 100%;
  object-position: left center;
}

/* assinatura grande do rodapé: era um wordmark panorâmico esticado na largura
   toda; o lockup da Klips é bem mais alto, então centraliza em vez de esticar */
.footer_bottom {
  padding-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_bottom .img {
  position: relative;
  width: auto;
  height: clamp(3.25rem, 8vw, 7rem);
  opacity: .9;
}

/* ==========================================================================
   7. Cases com depoimento
   --------------------------------------------------------------------------
   Monta em cima do que já existe: .grid_two-columns para a divisão, o par
   .expertise_visual/.img-parallax para a foto (mesmo parallax da seção) e
   .text-style-quote para a citação. Aqui só o espaçamento entre parágrafos.
   ========================================================================== */

.klips-case {
  width: 100%;
}

.klips-case-quote {
  margin: 0;
}

.klips-case-quote p {
  margin: 0 0 1rem;
}

.klips-case-quote p:last-child {
  margin-bottom: 0;
}

.klips-credito {
  padding-top: .75rem;
}

/* --- carrossel de fotos do case ------------------------------------------
   viewport com scroll-snap horizontal; cada slide ocupa 100% da largura.
   As setas e os dots são controlados por assets/klips-cases.js. */
.klips-carousel {
  position: relative;
  width: 100%;
}

.klips-carousel-viewport {
  border-radius: var(--_sizes---border-radius--small, .75rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;           /* Firefox */
  outline: none;
}
.klips-carousel-viewport::-webkit-scrollbar { display: none; } /* WebKit */

.klips-carousel-track {
  display: flex;
}

.klips-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.klips-slide-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;   /* mais baixa que 3/2, para o case ocupar menos tela */
  object-fit: cover;
  border-radius: var(--_sizes---border-radius--small, .75rem);
}

/* setas: círculo translúcido claro sobre a foto, ícone azul-profundo */
.klips-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: var(--klips-navy-deep);
  background-color: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 .5rem 1.5rem rgba(15, 21, 51, .18);
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.klips-carousel:hover .klips-arrow { opacity: 1; }
.klips-arrow:hover {
  background-color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.klips-arrow:focus-visible { opacity: 1; }
.klips-arrow.is-prev { left: 1rem; }
.klips-arrow.is-next { right: 1rem; }
.klips-arrow svg { width: 100%; height: 100%; }

/* dots */
.klips-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.klips-dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(42, 56, 136, .25);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.klips-dot:hover { background-color: rgba(42, 56, 136, .5); }
.klips-dot.is-active {
  background-color: var(--klips-gold);
  transform: scale(1.25);
}

/* dentro dos blocos azuis o carrossel usa dots claros */
.section_about .klips-dot,
.section_cta .klips-dot { background-color: rgba(255, 255, 255, .35); }
.section_about .klips-dot.is-active,
.section_cta .klips-dot.is-active { background-color: var(--klips-gold); }

@media (prefers-reduced-motion: reduce) {
  .klips-carousel-viewport { scroll-behavior: auto; }
}

@media screen and (max-width: 767px) {
  .klips-arrow { width: 2.5rem; height: 2.5rem; padding: .65rem; opacity: .9; }
  .klips-arrow.is-prev { left: .5rem; }
  .klips-arrow.is-next { right: .5rem; }
}

/* ==========================================================================
   9. Seção de contato + mapa
   ========================================================================== */

.klips-contato .klips-contato-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}

.klips-contato-rotulo { color: var(--klips-gold); }

.klips-contato-texto {
  color: var(--text-color--text-tertiary, #C3C8DD);
  line-height: 1.55;
}

.klips-contato-linha {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #FFFFFF;
  text-decoration: none;
  transition: color .2s ease;
}
.klips-contato-linha:first-child { padding-top: 0; }
.klips-contato-linha:hover { color: var(--klips-gold); }
.klips-contato-label {
  font-size: var(--_sizes---fixed--regular, .875rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-color--text-tertiary, #C3C8DD);
}

/* mapa: faixa com cantos arredondados, dentro do container */
.klips-mapa {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: var(--_sizes---border-radius--small, .75rem);
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(15, 21, 51, .25);
}
.klips-mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.2) contrast(1.02);
  /* mapa vira "imagem viva": não arrasta, então o pino Klips fica sempre
     alinhado ao centro; o clique cai no wrapper <a> e abre o Google Maps */
  pointer-events: none;
}

/* pino da Klips sobre o marcador do Google. A ponta fica no ponto (o centro do
   embed) e o corpo é deslocado ligeiramente à esquerda para NÃO cobrir o rótulo
   "Klips Cavaletti…", que o Google escreve à direita do marcador. */
.klips-mapa-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 .35rem .6rem rgba(15, 21, 51, .45));
}
.klips-mapa-pin img {
  display: block;
  width: 1.9rem;   /* pequeno o bastante para cobrir só o marcador do Google,
                      sem invadir o rótulo "Klips Cavaletti…" à direita */
  height: auto;
}
.klips-mapa-selo {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: .6rem 1rem;
  border-radius: 2.5rem;
  background-color: var(--klips-gold);
  color: var(--klips-navy-deep);
  font-size: var(--_sizes---fixed--regular, .875rem);
  font-weight: var(--_typography---font-weight--medium, 500);
  box-shadow: 0 .5rem 1.5rem rgba(15, 21, 51, .3);
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .klips-contato .klips-contato-grid { grid-template-columns: 1fr; gap: 2rem; }
  .klips-mapa { aspect-ratio: 3 / 4; }
}

/* a foto do case é panorâmica; o container do template é retrato por padrão */
.klips-case .expertise_visual {
  padding-top: 62%;
}

@media screen and (max-width: 767px) {
  .klips-case .expertise_visual {
    padding-top: 72%;
  }
}

/* ==========================================================================
   7a. Cards em leque do "kit" — destaque no hover
   --------------------------------------------------------------------------
   Ao passar o mouse, o card se endireita, cresce um pouco, ganha sombra e vem
   para a frente (z-index alto) — mesmo que estivesse atrás. Os outros dois
   recuam de leve. O !important vence os transforms inline que o Webflow aplica.
   ========================================================================== */

/* --- Como funciona: garante que a mídia (vídeo/fotos) apareça no hover,
   como reforço à animação do template; e o vídeo preenche o container --- */
.service_card:hover .service_img-wrap { opacity: 1 !important; }
.service_card:hover .service_img { display: block !important; opacity: 1 !important; }
.service_img video.img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* --- Combo Advocacia: leque de 6 cartões (efeito fan) ---
   Cada cartão vem com rotação/deslocamento inline (arco); no hover ele se
   endireita, cresce e vem para a frente. */
.klips-combo-fan {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  padding: 2.5rem 0 4rem;
}
.klips-fan-card {
  flex: 0 0 auto;
  width: clamp(9rem, 15vw, 13.5rem);
  margin: 0 -1.75rem;                 /* sobreposição entre os cartões */
  border-radius: var(--_sizes---border-radius--small, .75rem);
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1rem 2.25rem rgba(15, 21, 51, .18);
  transform-origin: bottom center;
  transition: transform .4s ease, box-shadow .4s ease;
}
.klips-fan-card:hover {
  transform: rotate(0deg) translateY(-.5rem) scale(1.08) !important;
  z-index: 20 !important;
  box-shadow: 0 1.5rem 3rem rgba(15, 21, 51, .32);
}
.klips-fan-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.klips-fan-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.klips-fan-nome {
  padding: .85rem .5rem;
  text-align: center;
  font-family: var(--_typography---font-family--headers, Inter, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--_typography---font-weight--medium, 500);
  letter-spacing: -.02em;
  color: var(--klips-navy);
}
/* telas menores: desfaz o leque e vira grade legível */
@media screen and (max-width: 767px) {
  .klips-combo-fan { flex-wrap: wrap; justify-content: center; gap: .85rem; padding: 1.5rem 0 2rem; }
  .klips-fan-card { transform: none !important; margin: 0; width: calc(50% - .5rem); }
  .klips-fan-img { aspect-ratio: 4 / 3; }
}

/* --- quadros de ambientes (abas): mais baixos e sem as tags de rodapé --- */
.tabs_menu .tabs_content {
  min-height: 7.8rem !important;   /* ~metade dos 15.6rem originais */
}
.tabs_menu .tab_flex {
  display: none !important;        /* remove "Mecanismo Syncron / Braços…" */
}
/* rótulo pequeno fixo no topo; nome da cadeira no centro real do quadro */
.tabs_menu .tab_content {
  justify-content: center !important;
  position: relative;
}
.tabs_menu .tab_text-top {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
}
.tabs_menu .tab_content .text-2xl {
  margin: 0 !important;
}

/* --- case em vídeo (YouTube): iframe responsivo 16:9 --- */
.klips-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--_sizes---border-radius--small, .75rem);
  overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(15, 21, 51, .22);
  background-color: var(--klips-navy-deep);
}
.klips-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cards_container .card_left,
.cards_container .card_center,
.cards_container .card_right {
  transition: transform .4s ease;
}

.cards_container .card_left .about_card,
.cards_container .card_center .about_card,
.cards_container .card_right .about_card {
  transition: box-shadow .4s ease, transform .4s ease;
}

/* card sob o cursor: endireita, cresce e vem para a frente */
.cards_container .card_left:hover,
.cards_container .card_center:hover,
.cards_container .card_right:hover {
  z-index: 20 !important;
  transform: rotate(0deg) scale(1.07) !important;
}
.cards_container .card_left:hover .about_card,
.cards_container .card_center:hover .about_card,
.cards_container .card_right:hover .about_card {
  box-shadow: 0 1.5rem 2.5rem rgba(15, 21, 51, .28), 0 4rem 5rem rgba(15, 21, 51, .18);
}

/* os demais recuam um pouco quando um irmão está em foco */
.cards_container:hover .card_left:not(:hover),
.cards_container:hover .card_center:not(:hover),
.cards_container:hover .card_right:not(:hover) {
  filter: brightness(.94);
}

@media (hover: none) {
  .cards_container .card_left:hover,
  .cards_container .card_center:hover,
  .cards_container .card_right:hover { transform: none !important; }
}

/* ==========================================================================
   7b. Carrossel de parceiros (substitui o slider do Webflow)
   ========================================================================== */

.klips-par {
  position: relative;
}

.klips-par-viewport {
  overflow: hidden;
}

.klips-par-track {
  display: flex;
  column-gap: 1.5rem;
  will-change: transform;
}

/* cada card ocupa uma fração da largura, mostrando ~3–4 por vez no desktop */
.klips-par-card {
  flex: 0 0 auto;
  width: clamp(17rem, 28vw, 22rem);
}
.klips-par-card .blog_card {
  height: 100%;
}

/* setas no mesmo estilo das do carrossel de cases */
.klips-par-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: var(--klips-navy-deep);
  background-color: rgba(255, 255, 255, .9);
  box-shadow: 0 .5rem 1.5rem rgba(15, 21, 51, .18);
  cursor: pointer;
  opacity: .85;
  transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.klips-par-arrow:hover { opacity: 1; background-color: #fff; transform: translateY(-50%) scale(1.06); }
.klips-par-arrow svg { width: 100%; height: 100%; }
.klips-par-arrow.is-prev { left: -1rem; }
.klips-par-arrow.is-next { right: -1rem; }

@media screen and (max-width: 767px) {
  .klips-par-card { width: 78vw; }
  .klips-par-track { column-gap: 1rem; }
  .klips-par-arrow { width: 2.5rem; height: 2.5rem; padding: .65rem; top: 40%; }
  .klips-par-arrow.is-prev { left: .25rem; }
  .klips-par-arrow.is-next { right: .25rem; }
}

/* ==========================================================================
   8. Botão flutuante de WhatsApp
   ========================================================================== */

.klips-whatsapp {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1200;
  width: 3.75rem;
  height: 3.75rem;
  padding: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background-color: #25D366;            /* verde oficial do WhatsApp */
  border-radius: 50%;
  box-shadow: 0 .5rem 1.5rem rgba(15, 21, 51, .28);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.klips-whatsapp:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 .75rem 2rem rgba(15, 21, 51, .35);
}
.klips-whatsapp svg { width: 100%; height: 100%; display: block; }

/* pulso sutil para chamar atenção sem ser agressivo */
.klips-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: klips-wa-pulse 2.6s ease-out infinite;
}
@keyframes klips-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 .9rem rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* rótulo que surge no hover em telas com ponteiro */
.klips-whatsapp-tip {
  position: absolute;
  right: calc(100% + .75rem);
  white-space: nowrap;
  padding: .5rem .85rem;
  border-radius: 2rem;
  background-color: var(--klips-navy-deep);
  color: #FFFFFF;
  font-size: var(--_sizes---fixed--regular, .875rem);
  opacity: 0;
  transform: translateX(.5rem);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 .5rem 1.25rem rgba(15, 21, 51, .25);
}
.klips-whatsapp:hover .klips-whatsapp-tip {
  opacity: 1;
  transform: translateX(0);
}

@media (hover: none) {
  .klips-whatsapp-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .klips-whatsapp::before { animation: none; }
}
@media screen and (max-width: 767px) {
  .klips-whatsapp { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; padding: .75rem; }
}

/* ==========================================================================
   9. Rodapé sticky — impedir vazamento no meio da página
   --------------------------------------------------------------------------
   O rodapé é `position: sticky; bottom: 0`, então fica no fundo da tela e as
   seções passam por cima dele. Entre a seção de produtos e o FAQ havia um
   espaçador solto e transparente no body: ao cruzar o fundo da tela, o azul do
   rodapé vazava por ele. Damos fundo branco e o elevamos acima do rodapé, para
   a transição ficar branca. O rodapé só se revela no fim, quando a seção de
   contato sobe. (Cobre também qualquer espaçador solto de outros tamanhos.)
   ========================================================================== */

body > .padding-section-medium,
body > .padding-section-small,
body > .padding-section-large {
  position: relative;
  z-index: 2;
  background-color: #FFFFFF;
}

/* ==========================================================================
   10. Selo "Made in Webflow" do export
   ========================================================================== */

.w-webflow-badge {
  display: none !important;
}

/* rótulos do rodapé em português são mais longos que os do template ("Home V.1"),
   então a grade de max-content precisa de folga entre 768px e 991px */
@media screen and (max-width: 991px) {
  .footer_top {
    grid-column-gap: 2rem;
  }
  .footer_top .footer_column {
    min-width: 0;
  }
  .footer_link.is-footer {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}