/* Acabamento da identidade vigente. Este arquivo sobrevive ao src/ do Lovable
   e e incluido pelo prerender em todas as rotas publicadas. */
:root {
  --secondary-foreground: var(--primary-dark);
  --gold-readable: 35 36% 35%;
}

::selection {
  color: hsl(var(--primary-dark));
  background: hsl(var(--secondary-light));
}

:focus-visible {
  outline: 3px solid hsl(var(--secondary));
  outline-offset: 4px;
}

input, textarea {
  caret-color: hsl(var(--primary));
}

a {
  text-underline-offset: 0.2em;
}

/* Dourado sobre claro precisa de um tom mais profundo da mesma familia.
   Sobre navy o acento original permanece. */
#sobre .text-secondary:not(svg),
#servicos .text-secondary:not(svg),
#faq .text-secondary:not(svg),
#blog .eyebrow,
#contato .eyebrow,
main > section:not(.gradient-primary):not(.noise-overlay) > .container-custom > .text-center > .eyebrow {
  color: hsl(var(--gold-readable));
}

/* Os numeros existentes continuam no card, com leitura real. */
#servicos .text-secondary\/10 {
  color: hsl(var(--gold-readable));
  opacity: 0.7;
}

#servicos .grid > div {
  display: flex;
  flex-direction: column;
}

#servicos .grid > div > .inline-flex {
  flex: 0 0 auto;
}

#servicos .grid > div > ul {
  margin-top: auto;
}

#servicos h3:hover,
#blog article:hover h3 {
  color: hsl(var(--gold-readable));
}

/* A borda ja delimita estes dois paineis de contato. */
#contato .grid > div {
  box-shadow: none;
}

#contato .grid > div:first-child {
  border-width: 1px;
}

@media (max-width: 639px) {
  /* Mais largura para o titulo e o texto dentro dos mesmos cards. */
  #servicos .grid > div {
    padding: 1.5rem;
  }

  #contato .grid > div:first-child {
    padding-inline: 1rem;
  }
}

/* ==========================================================================
   Movimento (16/10/2026). Um momento autoral - a entrada do hero - e o resto
   quieto: sem loop perpetuo e sem fade-up em toda secao. Curva forte de saida
   e transicoes com propriedades nomeadas (nada de `transition: all`).
   ========================================================================== */
:root {
  --xbbf-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.transition-smooth,
.transition-spring {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, translate, scale;
  transition-timing-function: var(--xbbf-ease);
}
.transition-smooth { transition-duration: 200ms; }
.transition-spring { transition-duration: 320ms; }

/* Resposta ao toque/clique: aperta rapido, solta no tempo normal. */
button.inline-flex,
a.inline-flex.rounded-md {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, translate, scale;
  transition-timing-function: var(--xbbf-ease);
}
button.inline-flex:active:not(:disabled),
a.inline-flex.rounded-md:active {
  scale: 0.97;
  transition-duration: 120ms;
}

/* Foto do card do blog: aproximacao discreta, nao salto de 10%. */
article .group-hover\:scale-110 {
  transition-duration: 600ms;
}
article.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
}

/* Hover que levanta ou amplia so onde existe hover de verdade: no toque ele
   grudava no card depois do tap. */
@media (hover: none) {
  .hover\:-translate-y-0\.5:hover,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-2:hover {
    --tw-translate-y: 0;
  }
  .hover\:scale-110:hover,
  .group:hover .group-hover\:scale-110,
  article.group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
  }
}

/* Fim dos loops perpetuos (orbes flutuando, seta pulando, brilho girando). */
.animate-float-slow,
main > section.min-h-screen:first-child .animate-bounce {
  animation: none;
}
.text-shimmer {
  animation-iteration-count: 1;
}
/* O halo do WhatsApp chama atencao tres vezes, depois do hero, e para. */
.fixed.bottom-6.right-6 > .animate-ping {
  animation-delay: 1.4s;
  animation-iteration-count: 3;
}

/* Revelacao ao rolar so para o que aparece como lista (cards), com passo menor.
   Titulo de secao e texto corrido ficam visiveis de saida. */
.reveal {
  transform: translateY(12px);
  transition: opacity 560ms var(--xbbf-ease), transform 560ms var(--xbbf-ease);
}
.reveal.is-visible {
  transform: none;
  will-change: auto;
}
main > section:not(:first-child) .text-center.reveal,
#sobre .space-y-6.reveal,
#sobre .bg-accent.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Montagem do React: o que ja estava na tela nao pisca (scripts/entrada.js). */
.xbbf-sem-transicao .reveal {
  transition: none !important;
}

/* ---- A entrada do hero ----------------------------------------------------
   Roda no primeiro paint do HTML pre-renderizado, sem esperar o JavaScript.
   --d e o atraso de cada peca; --xbbf-dt (scripts/entrada.js) e quanto da
   entrada ja tinha passado quando o React trocou o DOM: a animacao continua de
   onde estava em vez de recomecar. `translate`/`scale` individuais compoem com
   as classes de transform do Tailwind (a seta usa -translate-x-1/2). */
@keyframes xbbf-entra {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}
/* O titulo e o elemento de LCP no desktop: nasce pintado (0.01), nunca em 0. */
@keyframes xbbf-sobe {
  from { opacity: 0.01; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}
@keyframes xbbf-traco {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes xbbf-brilho {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@keyframes xbbf-assenta {
  from { scale: 1.06; }
  to { scale: 1; }
}

main > section.min-h-screen:first-child .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  main > section.min-h-screen:first-child .reveal,
  main > section.min-h-screen:first-child .animate-bounce {
    animation: xbbf-entra 720ms var(--xbbf-ease) both;
    animation-delay: calc(var(--d, 0ms) - var(--xbbf-dt, 0ms));
  }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(1) { --d: 0ms; }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(2) { --d: 60ms; }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(3) { --d: 120ms; }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(4) { --d: 200ms; }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(5) { --d: 280ms; }
  main > section.min-h-screen:first-child .max-w-2xl > :nth-child(6) { --d: 360ms; }
  main > section.min-h-screen:first-child .animate-bounce { --d: 1100ms; }
  main > section.min-h-screen:first-child h1.reveal {
    animation-name: xbbf-sobe;
  }

  /* O traco dourado se desenha da esquerda junto com o rotulo. */
  main > section.min-h-screen:first-child .eyebrow .gold-line {
    transform-origin: left center;
    animation: xbbf-traco 640ms var(--xbbf-ease) both;
    animation-delay: calc(100ms - var(--xbbf-dt, 0ms));
  }

  /* "Liquidez Imediata": o dourado pega a luz uma vez e repousa. */
  main > section.min-h-screen:first-child .text-shimmer {
    background-image: linear-gradient(100deg,
      hsl(var(--secondary)) 0%, hsl(var(--secondary)) 40%,
      hsl(38 62% 84%) 50%,
      hsl(var(--secondary)) 60%, hsl(var(--secondary)) 100%);
    background-size: 250% 100%;
    animation: xbbf-brilho 1300ms cubic-bezier(0.77, 0, 0.175, 1) both;
    animation-delay: calc(700ms - var(--xbbf-dt, 0ms));
  }

  /* Foto do escritorio (desktop): a moldura entra e a foto assenta nela. */
  main > section.min-h-screen:first-child .lg\:block.reveal {
    --d: 160ms;
    animation-name: xbbf-sobe; /* a foto tambem e candidata a LCP no desktop */
    animation-duration: 900ms;
  }
  main > section.min-h-screen:first-child .lg\:block .overflow-hidden > img {
    animation: xbbf-assenta 1500ms var(--xbbf-ease) both;
    animation-delay: calc(160ms - var(--xbbf-dt, 0ms));
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: none;
  }
  .text-shimmer {
    animation: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: hsl(var(--secondary));
  }
  .animate-ping,
  .animate-bounce {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   Acabamento (16/10/2026)
   ========================================================================== */

/* Ancora nao para atras do cabecalho fixo (80px). */
section[id] {
  scroll-margin-top: 5rem;
}

/* Cabecalho navy em toda pagina: a 80% ele lavava sobre a foto clara dos artigos. */
header.fixed.bg-primary\/80 {
  background-color: hsl(var(--primary) / 0.93);
}

/* Botao do menu com 44x44 (era 40x40). */
header nav button[aria-expanded] {
  padding: 0.625rem;
  margin: -0.625rem;
}

/* Menu do celular: itens com alvo de 44px e painel que rola quando falta altura
   (em paisagem 640x320 o "Solicitar Proposta" ficava fora da tela). */
@media (max-width: 767px) {
  header nav > div.md\:hidden {
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: xbbf-menu 180ms var(--xbbf-ease) both;
  }
  header nav > div.md\:hidden > .flex-col {
    gap: 0.25rem;
  }
  header nav > div.md\:hidden > .flex-col > :not(.inline-flex) {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
  header nav > div.md\:hidden > .flex-col > .inline-flex {
    margin-top: 0.5rem;
    height: 2.75rem;
  }
}
@keyframes xbbf-menu {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  header nav > div.md\:hidden { animation: none; }
}

/* Letra miuda (decisao do dono, 18/10/2026): nenhum texto abaixo de 14px -
   datas, selos de categoria, tempo de leitura e o CNPJ do rodape eram 12px - e
   corpo com 16px no celular (os diferenciais estavam em 15,2px). */
.text-xs {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-\[0\.95rem\] {
  font-size: 1rem;
}

/* Rotulos de secao com 14px tambem no celular, ainda numa linha so: menos
   espacamento entre letras e traco mais curto (antes o "RPVS" caia sozinho). */
@media (max-width: 639px) {
  .eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    gap: 0.5rem;
  }
  .eyebrow .gold-line {
    width: 1.5rem;
  }
}

/* Os dois botoes do hero com a mesma altura: a altura fixa (44px) era menor que
   o padding (48px) e a borda de 2px deixava o contorno 4px mais alto. */
main > section.min-h-screen:first-child .sm\:flex-row > button {
  height: auto;
  padding-block: 0.75rem;
  border: 2px solid transparent;
}
main > section.min-h-screen:first-child .sm\:flex-row > button.border-primary-foreground {
  border-color: hsl(var(--primary-foreground));
}

/* Foto do hero (desktop) reserva o espaco antes de chegar (arquivo 1360x1020). */
main > section.min-h-screen:first-child .lg\:block img {
  aspect-ratio: 4 / 3;
}

/* Alvos de toque do rodape e das migalhas: 44px de area sem mudar o desenho. */
footer ul button {
  display: inline-block;
  padding: 0.625rem 0.375rem;
  margin: -0.625rem -0.375rem;
}
footer .gap-6 > a,
article nav.mb-8 a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}

/* CNPJ legivel sobre o navy (a 40% dava ~3:1). */
footer .text-primary-foreground\/40 {
  color: hsl(var(--primary-foreground) / 0.62);
}

/* Botoes dos cards do blog com 44px. */
article a.inline-flex.w-full,
article button.inline-flex.w-full {
  height: 2.75rem;
}

/* Migalhas do artigo: link reconhecivel sem depender so da cor. */
article nav.mb-8 a {
  text-decoration: underline;
  text-decoration-color: hsl(var(--secondary));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Corpo do artigo com mais largura de texto no celular. */
@media (max-width: 639px) {
  article .backdrop-blur-sm.p-8 {
    padding: 1.25rem;
  }
  /* O botao com o telefone nao cabia numa linha a 390px. */
  article .gradient-primary a.inline-flex {
    white-space: normal;
    height: auto;
    min-height: 2.75rem;
    padding: 0.75rem 1.25rem;
    line-height: 1.3;
  }
}

/* Corpo dos artigos. As classes `prose` do BlogPost nao fazem nada: o plugin de
   tipografia nao esta registrado no tailwind.config, e o texto saia sem respiro
   entre blocos e com as listas sem marcador. Leitura minima, no estilo da marca. */
article .prose {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: hsl(var(--foreground));
  max-width: 68ch;
  margin-inline: auto;
}
article .prose > * + * {
  margin-top: 1em;
}
article .prose h2 {
  margin-top: 2em;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  line-height: 1.2;
  color: hsl(var(--primary));
}
article .prose h3 {
  margin-top: 1.6em;
  font-size: 1.3rem;
  line-height: 1.25;
  color: hsl(var(--primary));
}
article .prose > :first-child {
  margin-top: 0;
}
article .prose h2 + *,
article .prose h3 + * {
  margin-top: 0.6em;
}
article .prose ul {
  list-style: disc;
  padding-left: 1.25em;
}
article .prose ol {
  list-style: decimal;
  padding-left: 1.4em;
}
article .prose li + li {
  margin-top: 0.45em;
}
article .prose li::marker {
  color: hsl(var(--gold-readable));
}
article .prose strong {
  color: hsl(var(--primary));
  font-weight: 600;
}

/* Fotos dos artigos relacionados: mesma aproximacao lenta dos cards da home. */
.group-hover\:scale-105 {
  transition-duration: 600ms;
}