/* ============================================================
   HL Solutions — ajustes visuais sobre o clone
   A troca de paleta principal é feita em hl-brand.js; aqui ficam
   só os casos em que uma mesma cor original tinha dois papéis.
   ============================================================ */

/* Fonte da wordmark "HL SOLUTIONS" (desenhada por cima do logo animado
   original — ver hl-override.js). O peso 400 é o único usado. Hospedada no
   próprio site (licença OFL), só o subconjunto latino: carregar do Google Fonts
   mandava o IP de todo visitante ao Google, sem consentimento (LGPD). */
@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/CrimsonText-Regular-latin.woff2') format('woff2');
}

:root {
  --hl-bg: #FAF9F5;
  --hl-bg-alt: #F1EDE4;
  --hl-text: #1E1510;
  --hl-muted: #7C7468;
  --hl-accent: #C86927;
  --hl-accent-dark: #3B2215;
  --hl-sand: #E3B98A;
}

::selection {
  background: rgba(200, 105, 39, 0.35) !important;
  color: var(--hl-text);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--hl-accent) !important;
}

/* Cores que eram usadas como fundo E como texto */
.text-apple-green,
.text-Darkslate-grey,
.text-Hoki,
.text-white-smoke,
.text-white {
  color: var(--hl-text) !important;
}

/* Exceção: o menu fixo (CONTATO/MENU no topo) e o indicador de scroll usam
   mix-blend-mode:difference com texto branco de propósito — é assim que o
   texto se auto-inverte conforme o fundo por trás (claro vira escuro e
   vice-versa). Forçar essas cores pra --hl-text quebra a conta do blend e
   deixa o texto "sumindo" contra fundos claros. Mantém branco puro só nesses
   dois elementos — outros blocos com mix-blend-difference (texto do hero,
   overlay do menu) dependem do fundo escuro original logo atrás deles e
   ficam invisíveis se forçarmos branco aqui também. */
nav.mix-blend-difference,
nav.mix-blend-difference *,
.scroll-down-indicator {
  color: #fff !important;
}

.testimonial-card,
.testimonial-card * {
  color: var(--hl-text);
}

/* Links e sublinhados em destaque */
a:hover .text-white-smoke,
.layout-link-underline {
  color: var(--hl-accent);
}

/* Logo animado: as letras originais somem, o overlay do hl-override.js desenha HL SOLUTIONS */
.NavbarSVGMorphCharacter path,
.FooterLogoChar path {
  visibility: hidden;
}

.hl-logo-overlay {
  z-index: 1001;
  pointer-events: none;
  color: var(--hl-text);
  transition: color 0.3s ease;
}

.hl-logo-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Logo do topo em branco enquanto o vídeo de fundo da home está visível
   (ver hl-override.js — a classe é alternada no scroll). O do rodapé
   (.hl-logo-overlay--footer) fica sempre escuro: ele só aparece sobre o
   fundo creme do rodapé, nunca sobre o vídeo. */
html.hl-hero-video-visible .hl-logo-overlay--nav {
  color: #fff;
}

/* A área reservada pro logo grande do início (".NavbarMorphingLogo-spacer")
   tem um fundo creme opaco próprio (".bg-outer-space") — sem isso, ele
   tampava o vídeo bem no topo da página, mesmo o vídeo sendo fixo e cobrindo
   a tela inteira (o div fica na frente por ter fundo pintado, independente
   do z-index negativo do vídeo). */
.NavbarMorphingLogo-spacer {
  background: transparent !important;
}

/* Vídeo de fundo do topo da home (injetado pelo hl-override.js, filho direto
   do <body>). Fixo na tela inteira desde o primeiro quadro — inclusive atrás
   do logo grande do início, que não é filho da seção do herói. */
.hl-hero-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* Título e parágrafo dentro do ".hero-section": ficam brancos só enquanto o
   vídeo ainda domina o fundo por trás deles (a seção continua colada na tela
   — "sticky" — bem depois do vídeo já ter sumido, então não dá pra deixar
   branco fixo: sobraria texto quase invisível sobre o creme). O
   "mix-blend-mode: difference" original dependia de um fundo escuro que não
   existe mais atrás desse texto; em vez de tentar acertar a conta do blend,
   desligamos ele e forçamos a cor certa conforme a classe do vídeo. */
.hero-section > .text-white-smoke.mix-blend-difference {
  mix-blend-mode: normal;
}
html.hl-hero-video-visible .hero-section .heroSection-splitWord,
html.hl-hero-video-visible .hero-section .heroSection-splitLine {
  color: #fff !important;
}
/* O parágrafo tem uma cópia "fantasma" (aria-hidden, só pra reservar o
   espaço) por trás da linha que realmente anima — .heroSection-splitLine
   é a visível de verdade. Bug encontrado: eu tinha deixado as duas brancas
   por engano, e a cópia fantasma (que era "invisível" só por coincidência,
   por ter a mesma cor do fundo creme original) ficou visível também,
   duplicando o texto. */
.hero-section .text-outer-space {
  opacity: 0;
}

/* Reel do hero: vitrine dos produtos no lugar do vídeo original */
.heroSection-expanding-box video {
  opacity: 0 !important;
}

/* A imagem entra na camada do vídeo, que só aparece depois da animação dos blocos */
.heroSection-expanding-box > div:has(> video) {
  background: transparent url("/images/brand/hero-showcase.webp") center / cover no-repeat;
}

/* DESATIVADO DE PROPÓSITO (temporário): o clique em "Ver vídeo" tenta tocar
   o showreel original em HLS, que a gente nunca carrega (ver hl-brand.js,
   comentário "Hero da home: o showreel..." — o vídeo pesava 8-11MB e ficava
   escondido atrás da vitrine mesmo assim). Sem o vídeo carregado, o clique
   expande a caixa e trava numa tela preta/vazia. Enquanto não existe um
   vídeo de verdade pra colocar aí, o clique fica desligado (mas a vitrine
   continua visível — só a interação de "abrir o vídeo" é que não funciona).
   Pra reativar no futuro: apagar este bloco e trocar o src do vídeo em
   hl-brand.js (a busca por "showreel.m3u8") pelo arquivo definitivo. */
.heroSection-expanding-box,
.heroSection-expanding-box * {
  pointer-events: none !important;
}
.showreel-cursor-follower {
  display: none !important;
}

/* Depoimentos e logos de clientes são do site original: ocultos até termos os nossos */
.testimonials-spacer,
.testimonials-section {
  display: none !important;
}

/* Tags sobre as imagens dos produtos */
.project-tag {
  background: rgba(250, 249, 245, 0.92) !important;
  border-color: rgba(30, 21, 16, 0.12) !important;
  color: var(--hl-text) !important;
}

/* Fotos dos produtos devem preencher o card inteiro, sem moldura/fundo aparecendo nas bordas */
img[src*="/images/products/"] {
  padding: 0 !important;
  object-fit: cover !important;
}

.logo-card {
  background-color: transparent !important;
  border-color: rgba(30, 21, 16, 0.1) !important;
}

.contribution-section, .contribution-section * {
  color: var(--hl-text) !important;
}

/* Esconder Novidades (Newsletter): o campo de email não fica dentro de um
   <form>, e sim de uma div (.input-feild-nav) — e ":contains()" não existe em
   CSS puro (só jQuery), o que fazia esta regra inteira ser ignorada. */
.input-feild-nav,
[placeholder="EMAIL"] {
  display: none !important;
}

/* O botão de enviar (ícone de avião de papel) é irmão do campo, não fica
   dentro dele — escondemos só a linha (neto direto) que contém os dois,
   sem afetar os contêineres maiores acima (:has() sem limite de profundidade
   esconderia a página inteira, já que tudo ali é ancestral do campo). */
div:has(> * > [placeholder="EMAIL"]) {
  display: none !important;
}

/* Redes sociais: o clone tem 3 ícones (Twitter/X, LinkedIn e um terceiro que,
   dependendo da página, aparece rotulado "Instagram" mas às vezes aponta pra
   um vídeo do YouTube em vez do Instagram de verdade). Como só queremos
   LinkedIn e Instagram, ocultamos tudo por padrão e reexibimos só pelo href
   (a classe Navbar-Social-Link fica num filho do <a>, não no próprio link). */
a:has(.Navbar-Social-Link) {
  display: none !important;
}
a[href*="linkedin.com"]:has(.Navbar-Social-Link),
a[href*="instagram.com"]:has(.Navbar-Social-Link) {
  display: flex !important;
}


/* Transição entre páginas: wordmark e símbolo da HL no lugar dos originais.
   O SVG do wordmark fica (mantém o tamanho e a animação), só o desenho troca.
   O vídeo do símbolo Ø girando ficou sem fonte (hl-brand.js); o logo da HL
   gira no lugar dele com a mesma duração do vídeo original (~2s por volta). */
.page-transition-overlay .w-\[10vw\] svg path {
  visibility: hidden;
}

.page-transition-overlay .w-\[10vw\] svg {
  background: url("/images/brand/footer-A.png") center / contain no-repeat;
}

.page-transition-overlay video {
  aspect-ratio: 1;
  background: url("/images/brand/hl-icon-320.webp") center / 80% auto no-repeat;
  animation: hl-spin 2s linear infinite;
}

@keyframes hl-spin {
  from { transform: perspective(900px) rotateY(0deg); }
  to { transform: perspective(900px) rotateY(360deg); }
}

/* Campos do formulário (e seletores): as classes originais usam branco
   translúcido, feito para o fundo preto — no fundo creme ficavam invisíveis */
.bg-white-smoke\/5 {
  background-color: rgba(30, 21, 16, 0.035) !important;
}

.border-white-smoke\/15 {
  border-color: rgba(30, 21, 16, 0.22) !important;
}

form input:focus,
form textarea:focus {
  border-color: var(--hl-accent) !important;
}

/* Rodapé ocupando a tela inteira: com 770px numa tela de 900px sobrava uma
   faixa da seção anterior em cima. O espaço extra entra entre os links e o
   letreiro, que continua colado no fim da página. */
footer.footer {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

footer.footer > .footer-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

footer.footer > .footer-content > :first-child {
  margin-bottom: auto;
}

/* "FECHAR" do menu aberto: fica num bloco com mix-blend-mode:difference, que
   precisa de texto branco para aparecer escuro sobre o fundo creme */
.close-menu,
.close-menu * {
  color: #fff !important;
}

/* Cards de serviço (home e contato): as ilustrações são claras, então o
   texto é escuro e o degradê de baixo (que era preto, para texto branco)
   vira um degradê creme. A etiqueta "Serviço" tem fundo próprio. */
.ghost-card span,
.ghost-card p,
.ghost-card h3,
.ghost-card h4 {
  color: var(--hl-text) !important;
  text-shadow: none;
}

.ghost-card [class*="5C5247"] {
  color: #3B2215 !important;
}

.ghost-card .bg-white-smoke {
  background-color: var(--hl-text) !important;
}

.ghost-card [class*="linear-gradient(0deg,#000_0%"] {
  background-image: linear-gradient(0deg, rgba(250, 249, 245, 0.95) 0%, rgba(250, 249, 245, 0.74) 24%, rgba(250, 249, 245, 0) 62%) !important;
}

/* Filtro que apaga os cards inativos (multiplica uma cor sobre o vídeo).
   O original era um marrom escuro para vídeos escuros; nas ilustrações claras
   ele sujava as cores, então vira um bege claro. A animação (opacidade) é a mesma. */
.ghost-card > .mix-blend-multiply {
  background-color: #E9DCC8 !important;
}

/* Página Empresa: faixa com logos de clientes do site original (SVGs no código).
   O desenho original some e os logos da HL entram no lugar, os mesmos da home
   (imagens quadradas já padronizadas). Cada volta tem 6 posições, então o ciclo
   de 4 logos se repete (Gestão, CRM, KanbanDoro, Flow, Gestão, CRM) e a emenda
   entre uma volta e outra nunca junta dois logos iguais. */
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 {
  width: 6.4vw !important;
  height: 6.4vw;
  background: center / contain no-repeat;
}

[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 > svg {
  visibility: hidden;
}

[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(4n+1) { background-image: url("/images/logos/hl-gestao.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(4n+2) { background-image: url("/images/logos/hl-crm.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(4n+3) { background-image: url("/images/logos/kanbandoro.webp"); }
[class*="mt-[6.9vh]"] > .w-max > div > .shrink-0:nth-child(4n+4) { background-image: url("/images/logos/flow.webp"); }

@media (max-width: 640px) {
  [class*="mt-[6.9vh]"] > .w-max > div > .shrink-0 {
    width: 20vw !important;
    height: 20vw;
  }
}

/* Botão "SIGA" da página Empresa: o ícone era o do X; o link agora é o Instagram */
div:has(> svg > path[d^="M17.6863"]) {
  display: none !important;
}

/* Página Empresa: a 1ª linha do texto do topo (compartilhada com a home) é
   mais longa em português e quebrava no meio na coluna de 30vw */
@media (min-width: 1025px) {
  p:has(.studioHero-splitLine) {
    max-width: 36vw !important;
  }
}

/* Ícones de tecnologias no lugar da pedra (seção de serviços da home) */
.hl-tech {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hl-tech-icon {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
}

.hl-tech.is-in .hl-tech-icon {
  animation: hl-tech-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hl-tech-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5vw;
  height: 5vw;
  min-width: 64px;
  min-height: 64px;
  padding: 0.9vw;
  border-radius: 24px;
  background: rgba(250, 249, 245, 0.8);
  border: 1px solid rgba(30, 21, 16, 0.08);
  box-shadow: 0 18px 40px rgba(30, 21, 16, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: hl-tech-float 7s ease-in-out infinite alternate;
}

.hl-tech-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes hl-tech-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hl-tech-float {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(6px, -8px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(-6px, 8px) rotate(-5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 640px) {
  .hl-tech-card {
    width: 52px;
    height: 52px;
    min-width: 0;
    min-height: 0;
    padding: 11px;
    border-radius: 16px;
  }
  .hl-tech-icon:nth-child(n + 11) {
    display: none;
  }
}

/* Faixa de logos da home: todos os logos com a mesma largura (os arquivos já
   vêm padronizados), independente da largura que o HTML trouxer */
.logo-card > div {
  width: 80% !important;
}

/* Páginas /lab e /journal ("Serviços") removidas: o link some do menu (o
   próprio link, não só o texto, porque o href já existe pronto tanto no
   menu compacto quanto no aberto) */
a[href="/lab"],
a[href="/journal"] {
  display: none !important;
}

/* Card "Instagram" (3º) da seção de serviços: removido do array em JS quebraria
   a hidratação (o HTML pré-renderizado ainda teria os mesmos 5 blocos), então
   só ocultamos aqui. Numa flex row um item com display:none simplesmente some
   da fileira — os outros 4 cards preenchem o espaço normalmente. */
.ghost-card:nth-child(3) {
  display: none !important;
}

/* Botão "Alterar minha escolha de cookies" da política de privacidade
   (criado no hl-override.js), no mesmo corpo de texto da página */
.hl-cookie-settings {
  margin-top: 1.6vh;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.67vw;
  color: var(--hl-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.hl-cookie-settings:hover,
.hl-cookie-settings:focus-visible {
  color: var(--hl-accent-dark);
}
@media (max-width: 1024px) {
  .hl-cookie-settings { font-size: 2.34vw; }
}
@media (max-width: 640px) {
  .hl-cookie-settings { font-size: 3.48vw; }
}