/* ==========================================================================
   Rhoven — Base
   Reset, tokens da marca, tipografia e utilitários.
   Paleta oficial: página 06 do manual da marca.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Principais */
  --laranja: #F45A00;
  --laranja-escuro: #C94800;
  --carvao: #1A1A1A;

  /* Laranja para TEXTO pequeno e para fundo de botão com texto branco.
     O --laranja da marca só rende 3.3:1 com branco — reprova em WCAG AA.
     Este tom passa (≥4.5:1) e continua sendo laranja Rhoven a olho nu.
     Use --laranja em blobs, ícones, traços e títulos grandes; use este
     em qualquer texto pequeno e em superfícies que carregam texto. */
  --laranja-texto: #A63C00;

  /* Tints do laranja (80/60/40/20% do manual) */
  --laranja-80: #F67B33;
  --laranja-60: #F89C66;
  --laranja-40: #FBBD99;
  --laranja-20: #FDDECC;

  /* Neutras */
  --branco: #FFFFFF;
  --cinza-claro: #F6F6F6;
  --cinza-medio: #BDBDBD;
  --cinza-escuro: #4A4A4A;
  --preto: #0D0D0D;

  /* Apoio — só para gráficos e ilustrações. NUNCA na interface. */
  --azul-confianca: #2563EB;
  --verde-estrategico: #10B981;
  --roxo-criativo: #7C3AED;
  --amarelo-energia: #FBBF24;
  --pink-impulso: #EC4899;
  --azul-claro: #06B6D4;

  /* Tipografia */
  --fonte-titulo: 'Poppins', system-ui, -apple-system, sans-serif;
  --fonte-texto: 'Inter', system-ui, -apple-system, sans-serif;

  /* Espaçamento — múltiplos de 8 */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;
  --e7: 96px;
  --e8: 128px;

  /* Forma */
  --raio: 14px;
  --raio-g: 28px;

  /* Sombra em duas camadas: um contato curto e rente (dá a borda de apoio)
     mais uma difusa e larga (dá a altura). Uma sombra só, larga, lê como
     borrão cinza; duas leem como objeto pousado sobre a página. */
  --sombra:
    0 1px 2px rgba(26, 26, 26, .04),
    0 10px 30px rgba(26, 26, 26, .06);
  --sombra-alta:
    0 2px 4px rgba(26, 26, 26, .05),
    0 22px 56px rgba(26, 26, 26, .13);
  /* Repouso dos cards: quase imperceptível, para o hover ter para onde subir. */
  --sombra-baixa:
    0 1px 2px rgba(26, 26, 26, .04),
    0 4px 14px rgba(26, 26, 26, .04);

  --container: 1180px;
  --altura-header: 84px;

  /* Curvas de aceleração.
     --facil    saída padrão, já usada em todo o site
     --facil-forte  expo-out: arranca rápido e assenta longo. É a curva que
                    faz um elemento parecer que "chega" em vez de deslizar.
     --facil-suave  entrada e saída simétricas, para vaivém contínuo */
  --facil: cubic-bezier(.22, .61, .36, 1);
  --facil-forte: cubic-bezier(.16, 1, .3, 1);
  --facil-suave: cubic-bezier(.45, 0, .55, 1);

  --transicao: 240ms var(--facil);
  --transicao-lenta: 640ms var(--facil-forte);
}

/* --- Reset --------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--branco);
  color: var(--carvao);
  font-family: var(--fonte-texto);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Tipografia ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* Escala harmônica e elegante: H1 no topo em 3.5rem max (~56px) para manter respiro e equilíbrio visual. */
h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}

h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.0rem);
  line-height: 1.14;
  letter-spacing: -.035em;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.02em;
}

h4 {
  font-size: 1.05rem;
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

/* Destaque em laranja dentro de título — só em texto grande (contraste) */
.destaque {
  color: var(--laranja);
}

/* Texto de apoio */
.texto-apoio {
  color: var(--cinza-escuro);
  font-size: 1.08rem;
}

/* --- Rótulo de seção (assinatura do manual) ------------------------------
   Texto curto em caixa alta com traço ao lado, acima de cada título.
   Usa --laranja-escuro: o --laranja não passa no contraste em texto pequeno.
   -------------------------------------------------------------------------- */

.rotulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fonte-texto);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--laranja-texto);
  margin-bottom: var(--e3);
}

.rotulo::after {
  content: '';
  flex: 0 0 40px;
  height: 2px;
  background: var(--laranja);
}

.rotulo--centro {
  justify-content: center;
}

.rotulo--claro {
  color: var(--laranja-80);
}

/* Numeral grande do manual: 01. 02. */
.numeral {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--laranja);
  letter-spacing: -.03em;
}

/* --- Botões -------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 52px;
  padding: 0 var(--e4);
  border-radius: 100px;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  transition: transform var(--transicao), background-color var(--transicao),
    box-shadow var(--transicao), color var(--transicao);
}

/* Fundo em --laranja-escuro, não --laranja: branco sobre #F45A00 dá só
   3.3:1 e reprova em WCAG AA para o texto de 16px do botão. */
.botao--primario {
  background: var(--laranja-escuro);
  color: var(--branco);
  box-shadow: 0 6px 20px rgba(244, 90, 0, .28);
}

.botao--primario:hover {
  background: var(--laranja-texto);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244, 90, 0, .34);
}

.botao--secundario {
  border: 2px solid var(--carvao);
  color: var(--carvao);
}

.botao--secundario:hover {
  background: var(--carvao);
  color: var(--branco);
  transform: translateY(-2px);
}

.botao--claro {
  background: var(--branco);
  color: var(--laranja-texto);
}

.botao--claro:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}

/* Composição em miniatura dentro do botão, durante o envio */
.botao__carregando {
  width: 22px;
  flex: 0 0 22px;
}

.botao__carregando::before,
.botao__carregando::after {
  background: var(--branco);
}

.botao__carregando::after {
  opacity: .55;
}

/* --- Foco visível (acessibilidade) --------------------------------------- */

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Máscara em blob -----------------------------------------------------
   Toda foto do site aparece recortada numa forma orgânica, como no manual
   ("Máscaras e recortes", página 11). A proporção da imagem é preservada.
   -------------------------------------------------------------------------- */

.mascara-blob {
  position: relative;
  overflow: hidden;
  background: var(--laranja-20);
  border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
  aspect-ratio: 1;
}

.mascara-blob > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mascara-blob--b {
  border-radius: 58% 42% 44% 56% / 55% 52% 48% 45%;
}

.mascara-blob--c {
  border-radius: 42% 58% 52% 48% / 44% 56% 44% 56%;
}

/* Retrato mais alto que largo (fotos do time) */
.mascara-blob--retrato {
  aspect-ratio: 4 / 5;
}

/* Paisagem (foto da equipe, cases) */
.mascara-blob--paisagem {
  aspect-ratio: 4 / 3;
}

/* Placeholder enquanto a foto real não chega */
.mascara-blob__vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--laranja-20);
  color: var(--laranja-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* --- Composição de blobs -------------------------------------------------
   O par "blob laranja + blob carvão deslocado" da capa do manual, reduzido
   a um componente. Serve de moldura para ícone, numeral, logo ou símbolo.
   O conteúdo vai dentro e fica sempre por cima.
   -------------------------------------------------------------------------- */

.comp-blob {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  aspect-ratio: 1;
  color: var(--branco);
}

/* Blob principal, laranja */
.comp-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(140deg, var(--laranja) 0%, var(--laranja-escuro) 100%);
  border-radius: 58% 42% 44% 56% / 55% 52% 48% 45%;
}

/* Blob de apoio, carvão — entra por trás, deslocado, como no manual */
.comp-blob::after {
  content: '';
  position: absolute;
  right: -16%;
  bottom: -12%;
  z-index: -1;
  width: 58%;
  aspect-ratio: 1;
  background: var(--carvao);
  border-radius: 42% 58% 52% 48% / 44% 56% 44% 56%;
  opacity: .92;
}

/* Variação de silhueta, para a repetição não ficar mecânica */
.comp-blob--b::before {
  border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
}

.comp-blob--b::after {
  right: auto;
  left: -14%;
  bottom: -10%;
  border-radius: 56% 44% 48% 52% / 52% 46% 54% 48%;
}

.comp-blob--c::before {
  border-radius: 52% 48% 40% 60% / 44% 58% 42% 56%;
}

.comp-blob--c::after {
  right: -12%;
  bottom: auto;
  top: -12%;
}

/* Sem o blob de apoio (quando o espaço é apertado) */
.comp-blob--simples::after {
  display: none;
}

/* Versão clara: fundo suave, conteúdo em laranja escuro.
   Usada onde o texto dentro é pequeno e precisa de contraste alto. */
.comp-blob--clara {
  color: var(--laranja-texto);
}

.comp-blob--clara::before {
  background: var(--laranja-20);
}

.comp-blob--clara::after {
  opacity: .16;
}

.comp-blob > * {
  position: relative;
  z-index: 1;
}

/* --- Formas em evolução constante ----------------------------------------
   O manual descreve os elementos gráficos como "movimento, conexão e
   criatividade em constante evolução". Aqui isso é literal: a silhueta de
   cada blob se transforma devagar, sem sair do lugar e sem piscar.
   Lento de propósito (14–18s) — a forma nunca "chama", só nunca está
   parada. Os dois pseudo-elementos usam tempos diferentes para não
   pulsarem em bloco.
   -------------------------------------------------------------------------- */

@keyframes morf-blob {
  0%,
  100% {
    border-radius: 58% 42% 44% 56% / 55% 52% 48% 45%;
  }

  33% {
    border-radius: 46% 54% 58% 42% / 48% 44% 56% 52%;
  }

  66% {
    border-radius: 52% 48% 40% 60% / 44% 58% 42% 56%;
  }
}

.comp-blob::before {
  animation: morf-blob 14s ease-in-out infinite;
}

.comp-blob::after {
  animation: morf-blob 18s ease-in-out infinite reverse;
}

/* A animação sobrescreve o border-radius das variantes, então a variedade
   de silhueta viria a perder-se: todos ficariam idênticos no mesmo
   instante. O atraso negativo devolve a diferença — cada variante entra
   em um ponto distinto do ciclo. */
.comp-blob--b::before {
  animation-delay: -4.6s;
}

.comp-blob--b::after {
  animation-delay: -6.1s;
}

.comp-blob--c::before {
  animation-delay: -9.2s;
}

.comp-blob--c::after {
  animation-delay: -12.3s;
}

/* --- Composição em movimento (indicador de carregamento) -----------------
   Os dois blobs giram em sentidos opostos, devagar, enquanto algo é
   processado. Usado no envio do formulário.
   -------------------------------------------------------------------------- */

.comp-blob--girando::before {
  animation: gira-blob 2.6s linear infinite;
}

.comp-blob--girando::after {
  animation: gira-blob 2.1s linear infinite reverse;
}

@keyframes gira-blob {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .comp-blob--girando::before,
  .comp-blob--girando::after {
    animation: none;
  }
}

/* --- Fundo animado ------------------------------------------------------- */

.fundo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Blobs de borda definida, como no manual — que usa formas sólidas, não
   névoa. O blur de 26px dissolvia a silhueta e o fundo lia como mancha
   suja em vez de elemento de marca; 1px só tira o serrilhado do canvas.

   Sem máscara: ela desmanchava a borda das formas num degradê — era
   metade do efeito de sujeira. O que mantém o fundo discreto agora é a
   própria construção: formas chapadas em tint claro, ancoradas nas
   bordas da tela (ver fundo.js). */
#fundo-blobs {
  z-index: -2;
  filter: blur(1px);
}

/* Canvas mantido no HTML para o caso de as linhas voltarem localizadas. */
#fundo-linhas {
  z-index: -1;
}

/* --- Revelação ao rolar -------------------------------------------------- */

/* Só esconde quando há JS para revelar de volta. Sem JS (ou se o script
   falhar), o conteúdo aparece normalmente em vez de sumir para sempre. */
/* O desfoque de 6px que some junto com a subida é o detalhe que troca a
   sensação de "elemento aparecendo" pela de "elemento entrando em foco".
   Custa uma camada de composição por elemento e só existe durante a
   transição — depois de .visivel o filtro volta a none e o navegador
   descarta a camada. */
.js .revelar {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--facil-forte),
    transform 900ms var(--facil-forte),
    filter 900ms var(--facil-forte);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .revelar.visivel {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Variante lateral: o bloco desliza de fora para dentro em vez de subir.
   Usada nas grades de cards, para a página inteira não ter um movimento
   único. O deslocamento é para a direita porque a leitura é da esquerda
   para a direita — o card entra "seguindo" o olho, não contra ele.
   O body tem overflow-x: hidden, então o transbordo lateral do estado
   inicial não cria barra de rolagem horizontal. */
.js .revelar--lado {
  transform: translateX(-30px);
}

/* --- Utilitários --------------------------------------------------------- */

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  top: -100px;
  left: var(--e2);
  z-index: 200;
  padding: var(--e2) var(--e3);
  background: var(--carvao);
  color: var(--branco);
  border-radius: var(--raio);
  transition: top var(--transicao);
}

.pular-para-conteudo:focus {
  top: var(--e2);
}

/* --- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js .revelar {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* O traço do separador vive escondido por stroke-dashoffset e só aparece
     quando a animação roda. Sem movimento, ele precisa nascer desenhado —
     senão a linha simplesmente não existe para quem reduziu animações. */
  .js .separador path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  /* Sem a morfagem, cada variante volta a mostrar a silhueta própria
     definida em .comp-blob--b / --c. */
  .comp-blob::before,
  .comp-blob::after {
    animation: none;
  }

  /* A regra global acima só encurta a duração, o que congelaria estes dois
     no ÚLTIMO quadro: o símbolo pararia 8px fora do lugar e o tracejado
     do método, deslocado. Desligadas, ambos ficam na posição de repouso. */
  .js .sobre__marca img,
  .js .metodo__linha path {
    animation: none;
  }
}