/* ==========================================================================
   CAMARLEON EVENTOS — FOLHA DE ESTILO PRINCIPAL
   Arquivo único, compartilhado por index.html e 404.html.
   Construído mobile-first: estilos base valem para telas pequenas: as
   media queries no final do arquivo ajustam para telas maiores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RESET BÁSICO
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Permite rolagem suave ao clicar em links internos (ex: skip-link) */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--cor-preto);
  color: var(--cor-branco);
  font-family: var(--fonte-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0 0 0.6em 0;
  /* Evita "órfãos" (uma palavra sozinha na última linha do título) */
  text-wrap: balance;
}

p {
  margin: 0 0 1em 0;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

/* Respeita quem prefere menos movimento na tela */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   VARIÁVEIS DE MARCA
   -------------------------------------------------------------------------- */
:root {
  /* Paleta oficial extraída das imagens da marca — usar exatamente estes
     valores, sem substituir por tons "padrão" de biblioteca de cores. */
  --cor-preto: #0B0B0A;
  --cor-dourado: #C9A227;
  --cor-dourado-claro: #E0C158;
  --cor-roxo: #4B3B6B;
  --cor-nude: #E7DAC3;
  --cor-branco: #FDFDFD;
  --cor-texto: #1A1A1A;

  /* Famílias tipográficas (ver <link> do Google Fonts no <head> de cada página) */
  --fonte-display: 'Cinzel', serif;       /* hero, eyebrows — uso moderado */
  --fonte-titulo: 'Cormorant Garamond', serif; /* H2 / H3 */
  --fonte-corpo: 'Jost', sans-serif;      /* corpo de texto, botões, navegação */

  /* Espaçamento vertical entre seções — mobile primeiro, ajustado em
     telas maiores via media query mais abaixo neste arquivo */
  --espaco-secao: 56px;

  /* --- Tons que se adaptam ao fundo da seção ---------------------------
     O dourado da marca (#C9A227) tem contraste ótimo sobre preto (7,4:1),
     fraco sobre roxo (3,7:1) e péssimo sobre nude (1,7:1 — praticamente
     desaparece). Em vez de espalhar overrides do tipo
     ".secao--nude .servico__numero", cada variante de fundo redefine
     estas três variáveis (ver VARIANTES DE FUNDO) e os componentes
     reagem sozinhos. Os valores abaixo são o padrão, calibrado para os
     fundos escuros. */
  --cor-dourado-legivel: var(--cor-dourado);
  --cor-borda-dourada: rgba(201, 162, 39, 0.15);
  --cor-borda-dourada-forte: rgba(201, 162, 39, 0.35);
  /* Painel dos cartões (serviços, projetos, podcast) sobre o fundo da seção */
  --cor-painel-cartao: rgba(11, 11, 10, 0.18);

  /* Outros tokens de identidade visual */
  --raio-padrao: 6px;
  --transicao: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --sombra-dourada-sutil: 0 0 28px rgba(201, 162, 39, 0.18);
  --sombra-roxa-sutil: 0 0 28px rgba(0, 0, 0, 0.35);
  --largura-conteudo: 1300px;
  --altura-nav: 72px;
}

/* --------------------------------------------------------------------------
   UTILITÁRIOS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin-inline: auto;
  padding-inline: 20px;
}

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

/* Link "Pular para o conteúdo": invisível até receber foco de teclado */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 1000;
  background: var(--cor-dourado);
  color: var(--cor-preto);
  padding: 12px 20px;
  border-radius: var(--raio-padrao);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transicao);
}

.skip-link:focus {
  top: 12px;
}

/* Foco de teclado visível em qualquer elemento interativo do site */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cor-dourado-claro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA DE APOIO
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: var(--fonte-display);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cor-dourado-legivel);
  margin-bottom: 1em;
}

.titulo-secao {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  line-height: 1.15;
}

/* Painel com fundo levemente diferenciado do fundo da seção — antes o
   texto ficava "solto" direto sobre a cor da seção, sem nenhuma marca
   visual própria. Cor exata do painel vem de --cor-painel-texto,
   definida por seção (.secao--preto/nude/roxo) em VARIANTES DE FUNDO. */
.texto-corpo {
  max-width: 68ch;
  font-size: 1.0625rem;
  background-color: var(--cor-painel-texto, transparent);
  border: 1px solid var(--cor-painel-texto-borda, transparent);
  border-radius: var(--raio-padrao);
  padding: 22px 20px;
}

.texto-corpo p + p {
  margin-top: 1.2em;
}

.texto-corpo--centralizado {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   BOTÕES E CTAs
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--raio-padrao);
  padding: 15px 28px;
  transition: var(--transicao);
  transition-property: transform, box-shadow, background-color, border-color, color;
}

.botao:active {
  transform: translateY(1px) scale(0.98);
}

.botao--whatsapp {
  background-color: var(--cor-dourado);
  color: var(--cor-preto);
}

/* O ícone herdaria a cor dourada padrão de .icone — invisível sobre um
   fundo também dourado. Força a mesma cor do texto do botão. */
.botao--whatsapp .icone {
  color: var(--cor-preto);
}

.botao--whatsapp:hover {
  background-color: var(--cor-dourado-claro);
  box-shadow: var(--sombra-dourada-sutil);
}

.botao--contorno {
  background-color: transparent;
  border-color: rgba(201, 162, 39, 0.5);
  color: var(--cor-dourado-legivel);
}

.botao--contorno:hover {
  border-color: var(--cor-dourado-claro);
  color: var(--cor-dourado-claro);
  box-shadow: var(--sombra-dourada-sutil);
}

.botao .icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Botão flutuante de WhatsApp — some durante o hero e aparece assim que a
   seção seguinte entra na tela — ver ativarWhatsappAoSairDoHero() em
   script.js */
.whatsapp-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--cor-dourado);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-dourada-sutil);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: var(--transicao);
  transition-property: transform, box-shadow, background-color, opacity;
}

.whatsapp-flutuante--visivel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.whatsapp-flutuante:hover {
  background-color: var(--cor-dourado-claro);
  transform: scale(1.06);
}

.whatsapp-flutuante:active {
  transform: scale(0.96);
}

.whatsapp-flutuante .icone {
  width: 26px;
  height: 26px;
  color: var(--cor-preto);
}

/* Botão "voltar ao topo" — discreto, empilhado acima do botão de
   WhatsApp. Some por padrão; o JS revela depois de rolar a página. */
.topo-flutuante {
  position: fixed;
  right: 18px;
  bottom: 86px;
  z-index: 500;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(11, 11, 10, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 162, 39, 0.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: var(--transicao);
  transition-property: opacity, transform, border-color, background-color;
}

.topo-flutuante--visivel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.topo-flutuante:hover {
  border-color: var(--cor-dourado-claro);
  background-color: rgba(11, 11, 10, 0.9);
}

.topo-flutuante:active {
  transform: scale(0.94);
}

.topo-flutuante .icone {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------------------
   ÍCONES (traço fino, cor dourada — nunca ícones "cheios" genéricos)
   -------------------------------------------------------------------------- */
.icone {
  color: var(--cor-dourado);
  /* Tamanho padrão: sem isto, um <svg> sem width/height cai no tamanho
     padrão do navegador (300x150px) — era a causa dos ícones gigantes
     no rodapé. Qualquer uso específico (botões, flutuante) sobrescreve. */
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   CABEÇALHO — nav fixa, sempre visível durante a rolagem
   -------------------------------------------------------------------------- */
/* Tema padrão da nav (equivale à seção --preto). ativarTemaNavPorSecao()
   em script.js troca o atributo data-tema conforme a seção que está
   passando por baixo da barra, e estas variáveis reagem sozinhas — o
   camaleão da logo não usa nenhuma delas, então continua sempre dourado. */
.cabecalho {
  --cor-nav-fundo: rgba(11, 11, 10, 0.82);
  --cor-nav-painel: var(--cor-preto);
  --cor-nav-texto: var(--cor-branco);
  --cor-nav-hover: var(--cor-dourado-claro);
}

/* Sobre o hero a barra assume o tom do topo da foto de fundo, pra parecer
   parte dela. Este é o cinza da foto vertical do mobile; a partir de
   600px, junto com a troca da foto, vira o preto da logo horizontal
   (ver media query). */
.cabecalho[data-tema="hero"] {
  --cor-nav-fundo: rgba(19, 19, 19, 0.9);
  --cor-nav-painel: #131313;
  --cor-nav-texto: var(--cor-branco);
  --cor-nav-hover: var(--cor-dourado-claro);
}

.cabecalho[data-tema="nude"] {
  --cor-nav-fundo: rgba(231, 218, 195, 0.92);
  --cor-nav-painel: var(--cor-nude);
  --cor-nav-texto: var(--cor-texto);
  --cor-nav-hover: var(--cor-roxo);
}

.cabecalho[data-tema="roxo"] {
  --cor-nav-fundo: rgba(75, 59, 107, 0.88);
  --cor-nav-painel: var(--cor-roxo);
  --cor-nav-texto: var(--cor-branco);
  --cor-nav-hover: var(--cor-dourado-claro);
}

.cabecalho {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--altura-nav);
  display: flex;
  align-items: center;
  background-color: var(--cor-nav-fundo);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
  transition: var(--transicao);
  transition-property: background-color;
}

.cabecalho .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* O nome "Camarleon Eventos" + o camaleão recortado funcionam como logo
   da marca na nav */
/* A logo "vazando" por baixo da barra da nav, de propósito — sem cortar
   nenhuma parte do camaleão (por isso a posição absoluta em vez de ficar
   presa à altura fixa da nav). */
.marca-topo {
  position: relative;
  display: block;
  width: 68px;
  /* Altura fixa (não 100%) — dentro de um flex com altura automática,
     "100%" virava um valor ambíguo e a caixa acabava centralizada mais
     pra baixo do que o topo real da barra, empurrando a logo junto. */
  height: var(--altura-nav);
  flex-shrink: 0;
}

.marca-topo__logo {
  position: absolute;
  top: 2px;
  left: 0;
  width: auto;
  height: 118px;
  /* O reset global (img{max-width:100%}) limitaria a largura aos 68px do
     link — como este elemento é posicionado (fora do fluxo), ele pode
     usar sua largura real sem estourar o layout de ninguém. */
  max-width: none;
}

/* Botão hamburguer — visível só no mobile (ver media query) */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.menu-toggle__linha {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--cor-nav-texto);
  transition: var(--transicao);
  transition-property: transform, opacity, background-color;
}

/* Estado aberto: hamburguer vira "X" */
.menu-toggle[aria-expanded="true"] .menu-toggle__linha:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__linha:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__linha:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Menu principal — painel deslizante no mobile, linha horizontal no desktop */
.menu-principal {
  position: fixed;
  top: var(--altura-nav);
  left: 0;
  right: 0;
  background-color: var(--cor-nav-painel);
  border-bottom: 1px solid rgba(201, 162, 39, 0.15);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color var(--transicao);
}

.menu-principal--aberto {
  max-height: 480px;
}

.menu-principal__lista {
  list-style: none;
  margin: 0;
  padding: 12px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-principal__lista a {
  display: block;
  padding: 12px 4px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--cor-nav-texto);
  text-decoration: none;
  /* Contorno dourado sutil sempre visível — não é só o divisor entre
     itens, é o "destaque" dourado que marca a nav mesmo em repouso */
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  transition: var(--transicao);
  transition-property: color, border-color, padding-left, text-shadow;
}

.menu-principal__lista a:hover,
.menu-principal__lista a:focus-visible {
  color: var(--cor-nav-hover);
  border-color: var(--cor-dourado-claro);
  padding-left: 10px;
  text-shadow: 0 0 14px rgba(201, 162, 39, 0.45);
}

/* Marca qual seção está na tela no momento (ver ativarTemaNavPorSecao em
   script.js) — mesmo tratamento do hover, só que fixo enquanto a seção
   estiver ativa, com o peso da fonte um pouco maior pra reforçar */
.menu-principal__lista a.ativo {
  color: var(--cor-nav-hover);
  border-color: var(--cor-dourado-claro);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   HERO — a logo oficial (assets/img/logos/logofundopreto.jpg) vira o fundo do
   hero em tela cheia; um véu escuro por cima garante contraste para a
   frase de assinatura da marca.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Conteúdo ancorado mais para baixo, longe do nome da marca que já está
     escrito na própria imagem de fundo */
  justify-content: flex-end;
  text-align: center;
  background-color: var(--cor-preto);
  /* Fundo do hero — a única coisa nesta seção, além do botão de rolar.
     Véu escuro bem sutil, só para dar profundidade e garantir contraste
     ao botão.
     No mobile usamos uma foto diferente (logograndecamaleaoesilmara.jpg),
     que já é vertical (1024x1536) — quase a proporção de um celular — em
     vez de forçar a logo horizontal (logofundopreto.jpg) numa tela alta.
     A partir do tablet/desktop (media query mais abaixo) volta pra logo
     horizontal, que aí sim cobre a tela em "cover" sem cortar o texto. */
  background-image:
    linear-gradient(to bottom, rgba(11, 11, 10, 0.1) 0%, rgba(11, 11, 10, 0.15) 55%, rgba(11, 11, 10, 0.55) 100%),
    url('../assets/img/site/logograndecamaleaoesilmara.jpg');
  background-size: cover;
  background-position: 40% center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 32px 20px 56px;
}

.hero__conteudo {
  position: relative;
  z-index: 2;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Convite discreto logo acima do botão de rolar — fino e pequeno, pra
   não competir com o nome da marca que já está na foto */
.hero__convite {
  margin: 0;
  font-weight: 300;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: rgba(253, 253, 253, 0.78);
}

/* Botão "rolar para baixo" — único elemento interativo do hero além da
   nav. Um leve balanço convida ao scroll sem chamar atenção demais. */
.hero__scroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background-color: rgba(11, 11, 10, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: var(--transicao);
  transition-property: border-color, background-color, transform;
  animation: hero-scroll-balanco 2.4s ease-in-out infinite;
}

.hero__scroll:hover {
  border-color: var(--cor-dourado-claro);
  background-color: rgba(11, 11, 10, 0.55);
}

.hero__scroll:active {
  transform: scale(0.92);
}

.hero__scroll .icone {
  width: 20px;
  height: 20px;
}

@keyframes hero-scroll-balanco {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(7px);
  }
}

/* --------------------------------------------------------------------------
   SEÇÕES — VARIANTES DE FUNDO
   -------------------------------------------------------------------------- */
.secao {
  padding-block: var(--espaco-secao);
  scroll-margin-top: var(--altura-nav);
}

/* Variáveis do "painel" sutil atrás dos blocos de texto corridos (ver
   .texto-corpo e .fundadora__essencia) — cada fundo de seção pede um tom
   de painel e de borda diferente pra continuar discreto */
.secao--preto {
  background-color: var(--cor-preto);
  color: var(--cor-branco);
  --cor-painel-texto: rgba(201, 162, 39, 0.05);
  --cor-painel-texto-borda: rgba(201, 162, 39, 0.14);
}

.secao--nude {
  background-color: var(--cor-nude);
  color: var(--cor-texto);
  --cor-painel-texto: rgba(11, 11, 10, 0.035);
  --cor-painel-texto-borda: rgba(11, 11, 10, 0.1);
  /* --cor-dourado (#C9A227) sobre --cor-nude (#E7DAC3) dá só ~1,7:1 de
     contraste — quase some. Um dourado bem mais escuro/profundo aqui
     mantém a identidade da cor sem ficar ilegível (~5:1). */
  --cor-dourado-legivel: #6E5313;
  --cor-borda-dourada: rgba(110, 83, 19, 0.26);
  --cor-borda-dourada-forte: rgba(110, 83, 19, 0.5);
  /* Painel claro que "levanta" do bege em vez do véu escuro usado nos
     fundos pretos, que sobre o nude viraria um cinza barrento */
  --cor-painel-cartao: rgba(253, 253, 253, 0.55);
}

.secao--roxo {
  background-color: var(--cor-roxo);
  color: var(--cor-branco);
  --cor-painel-texto: rgba(253, 253, 253, 0.06);
  --cor-painel-texto-borda: rgba(253, 253, 253, 0.14);
  /* O dourado padrão sobre o roxo da marca dá só ~3,7:1; o dourado claro
     sobe para ~5:1 e passa no critério de texto normal */
  --cor-dourado-legivel: var(--cor-dourado-claro);
}

.secao--preto .titulo-secao,
.secao--roxo .titulo-secao {
  color: var(--cor-branco);
}

.secao--nude .titulo-secao {
  color: var(--cor-texto);
}

/* Textura dourada sutil — assets/img/site/petalasdouradas.jpg (fundo claro),
   usada na seção "Por que a Camarleon". Uma camada preta semitransparente
   por cima controla a intensidade, e background-blend-mode "screen"
   garante que só os traços dourados mais claros apareçam sobre o preto. */
.secao--textura-dourada {
  background-color: var(--cor-preto);
  background-image:
    linear-gradient(rgba(11, 11, 10, 0.82), rgba(11, 11, 10, 0.82)),
    url('../assets/img/site/petalasdouradas.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: normal, screen;
}

/* Padrão geométrico dourado — assets/img/site/detalhesdourados.jpg (arabescos
   dourados sobre preto), usado como textura sutil e repetida na seção do
   podcast, que fecha a página */
.secao--padrao-geometrico {
  background-color: var(--cor-preto);
  background-image:
    linear-gradient(rgba(11, 11, 10, 0.96), rgba(11, 11, 10, 0.96)),
    url('../assets/img/site/detalhesdourados.jpg');
  background-size: auto, 360px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
}

.secao__cabecalho {
  max-width: 720px;
  margin-bottom: 2.5em;
}

/* --------------------------------------------------------------------------
   ANIMAÇÃO DE ENTRADA AO ROLAR (controlada via IntersectionObserver no JS)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante usada em fotos/imagens de destaque: além do fade, entra com
   uma leve escala — dá mais textura ao scroll do que só o fade padrão */
.reveal--imagem {
  transform: translateY(24px) scale(0.96);
}

.reveal--imagem.is-visible {
  transform: translateY(0) scale(1);
}

/* Efeito cascata: itens de uma mesma lista revelam em sequência, mesmo
   quando entram juntos na tela (ex.: os 7 serviços) */
.reveal--atraso-1 { transition-delay: 0.08s; }
.reveal--atraso-2 { transition-delay: 0.16s; }
.reveal--atraso-3 { transition-delay: 0.24s; }
.reveal--atraso-4 { transition-delay: 0.32s; }
.reveal--atraso-5 { transition-delay: 0.4s; }
.reveal--atraso-6 { transition-delay: 0.48s; }

/* Pequena animação de entrada da página (hero), sem depender do scroll */
@keyframes entrada-suave {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__conteudo {
  animation: entrada-suave 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------------------------------
   SEÇÃO 2 — MINHA TRAJETÓRIA
   -------------------------------------------------------------------------- */
.trajetoria__grade {
  display: grid;
  gap: 32px;
}

/* Foto do camaleão ao lado do título — no mobile aparece logo após o
   título (ordem natural do HTML); no desktop fica na mesma coluna do
   título, ou seja, ao lado do texto da coluna vizinha. Usa o recorte com
   fundo já transparente (assets/img/logos/camaleao-recorte-md.png). */
.trajetoria__imagem-wrap {
  max-width: 200px;
  margin-top: 28px;
}

.trajetoria__imagem {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------------
   SEÇÃO 3 — POR QUE A CAMARLEON
   -------------------------------------------------------------------------- */
/* Grade com o texto de abertura + imagem de destaque (camaleão de cartola
   no ombro de Silmara) — empilhada no mobile, lado a lado no desktop */
.porque__grade {
  display: grid;
  gap: 32px;
  align-items: center;
}

.porque__imagem-wrap {
  max-width: 360px;
  margin-inline: auto;
}

.porque__imagem {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 3px;
}

.porque__cta {
  margin-top: 3em;
  padding: 40px 28px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: var(--raio-padrao);
  text-align: center;
  box-shadow: var(--sombra-dourada-sutil);
}

.porque__cta .titulo-secao {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
}

.porque__cta p {
  max-width: 52ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   SEÇÃO 4 — SERVIÇOS (moldura dupla)
   -------------------------------------------------------------------------- */
.servicos__chamada {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  max-width: 60ch;
}

.servicos__lista {
  list-style: none;
  margin: 2.5em 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

/* Moldura externa: borda fina dourada em baixa opacidade, com padding
   pequeno — envolve o bloco interno como uma peça encaixada */
.moldura-externa {
  border: 1px solid var(--cor-borda-dourada);
  border-radius: var(--raio-padrao);
  padding: 6px;
  transition: var(--transicao);
  transition-property: border-color, box-shadow, transform;
}

.moldura-externa:hover {
  border-color: var(--cor-borda-dourada-forte);
  box-shadow: var(--sombra-dourada-sutil);
  transform: translateY(-3px);
}

.moldura-interna {
  display: flex;
  align-items: baseline;
  gap: 20px;
  background-color: var(--cor-painel-cartao);
  border-radius: 3px;
  padding: 22px 22px;
}

.moldura-interna--sem-padding {
  display: block;
  padding: 0;
  overflow: hidden;
}

/* Cada serviço é um item de acordeão: um <button> com número + título +
   seta, e um painel que expande para revelar a explicação. Só um item
   fica aberto por vez (controlado via JS em script.js). */
.servico {
  background-color: var(--cor-painel-cartao);
  border-radius: 3px;
}

.servico__cabecalho {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: none;
  padding: 22px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.servico__numero {
  flex-shrink: 0;
  font-family: var(--fonte-display);
  font-size: 2rem;
  color: var(--cor-dourado-legivel);
  line-height: 1;
  min-width: 1.4em;
}

.servico__titulo {
  flex: 1;
  font-family: var(--fonte-titulo);
  font-size: 1.35rem;
  margin: 0;
}

.servico__seta {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  /* Sobrescreve o dourado fixo de .icone: num fundo claro aquele tom
     praticamente desaparece */
  color: var(--cor-dourado-legivel);
  transition: transform var(--transicao);
}

.servico__cabecalho[aria-expanded="true"] .servico__seta {
  transform: rotate(180deg);
}

/* Truque de grid para animar até a altura natural do conteúdo, sem JS
   precisar calcular pixels: 0fr fechado, 1fr aberto */
.servico__conteudo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.servico__conteudo--aberto {
  grid-template-rows: 1fr;
}

.servico__conteudo-interno {
  overflow: hidden;
}

.servico__conteudo-interno p {
  margin: 0;
  padding: 16px 22px 22px 62px;
  font-size: 0.98rem;
  max-width: 62ch;
  border-top: 1px solid var(--cor-borda-dourada);
}

/* --------------------------------------------------------------------------
   SEÇÃO 5 — GALERIA / PORTFÓLIO
   Cards de projeto: foto + título + contexto + descrição. Reaproveitam .moldura-externa (a mesma moldura dourada dos
   serviços), então a borda e o "levantar" no hover vêm de graça.
   -------------------------------------------------------------------------- */
.galeria__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

/* O <li> precisa ser flex para o card interno esticar até a altura total
   da linha da grade — sem isso, cards com textos de tamanhos diferentes
   ficariam com alturas desiguais dentro da mesma fileira */
.galeria__item {
  display: flex;
}

.projeto {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--cor-painel-cartao);
  border-radius: 3px;
  overflow: hidden;
}

/* Sem "display" declarado de propósito: quando a foto ainda não existe, o
   script troca a <img> por uma <div class="img-fallback projeto__imagem">,
   e o display:flex do .img-fallback (definido mais abaixo neste arquivo)
   precisa vencer. O aspect-ratio continua valendo e dá ao bloco tracejado
   a mesma proporção da foto definitiva. O height: auto impede que os
   atributos width/height do <img> virem altura fixa (ver .podcast__capa). */
.projeto__imagem {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.projeto__corpo {
  /* Ocupa a altura restante do card, mantendo os cards de uma mesma
     fileira terminando alinhados. Coluna flex para a assinatura de
     autoria poder ser empurrada para o pé do card (margin-top: auto). */
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.projeto__titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.3rem;
  margin-bottom: 0.3em;
}

.projeto__meta {
  font-family: var(--fonte-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-dourado-legivel);
  margin-bottom: 1.2em;
}

.projeto__texto {
  font-size: 0.98rem;
  margin-bottom: 1.4em;
}

/* Assinatura de autoria — pedido da cliente, presente em todos os
   projetos. Fica sempre no pé do card, então em cards lado a lado as
   assinaturas se alinham mesmo com descrições de tamanhos diferentes. */
.projeto__autoria {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--cor-borda-dourada-forte);
}

.projeto__autoria-rotulo {
  font-family: var(--fonte-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-dourado-legivel);
}

.projeto__autoria-nome {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   SEÇÃO 6 — SOBRE A FUNDADORA
   -------------------------------------------------------------------------- */
.fundadora {
  display: grid;
  gap: 36px;
  align-items: start;
}

.fundadora__foto-wrap {
  border: 1px solid rgba(201, 162, 39, 0.25);
  padding: 8px;
  border-radius: var(--raio-padrao);
}

.fundadora__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Mantém o rosto no enquadramento em vez de cortar pelo centro da foto */
  object-position: center 15%;
  border-radius: 3px;
  background-color: rgba(75, 59, 107, 0.08);
}

.fundadora__nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.15em;
}

.fundadora__cargo {
  display: block;
  font-family: var(--fonte-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-roxo);
  margin-bottom: 1.4em;
}

/* Fecho pessoal da seção (fé, família, o que sustenta uma entrega de
   verdade) — o texto que vinha da antiga seção "Bastidores".
   Não há praticamente nada declarado aqui de propósito: no HTML o bloco
   leva também a classe .texto-corpo, a mesma do currículo logo acima, e
   herda de lá fonte, corpo, painel de fundo, borda, cantos e largura
   máxima. As duas caixas da seção são a mesma peça visual. O espaço entre
   elas vem do "gap" da grade .fundadora; o alinhamento com a coluna de
   texto no desktop está na media query de 900px, no fim do arquivo. */

/* --------------------------------------------------------------------------
   SEÇÃO 7 — PODCAST
   Card com capa + descrição + link, dentro da mesma .moldura-externa usada
   nos serviços e na galeria. Não há <iframe> aqui de propósito: o embed do
   YouTube carrega quase 1MB de script de terceiro e cria cookies de
   rastreamento em toda visita, inclusive de quem nunca clica no play.
   -------------------------------------------------------------------------- */
.podcast__interno {
  display: grid;
  gap: 24px;
  align-items: center;
  background-color: var(--cor-painel-cartao);
  border-radius: 3px;
  padding: 22px;
}

.podcast__capa-wrap {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* Quadrada, como é a convenção de capa de podcast. O height: auto é
   obrigatório: sem ele, o atributo height="600" do <img> vira altura fixa
   de 600px, anula o aspect-ratio e o cover corta as laterais da arte. */
.podcast__capa {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
}

.podcast__texto {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background-color: var(--cor-preto);
  color: rgba(253, 253, 253, 0.75);
  padding-block: 64px 32px;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
  text-align: center;
}

/* Assinatura da marca no rodapé: o camaleão dourado ao lado do nome —
   reforça a identidade antes mesmo de chegar nos contatos */
.rodape__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
}

.rodape__marca-icone {
  width: auto;
  height: 52px;
}

.rodape__marca-texto {
  font-family: var(--fonte-display);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-dourado);
}

.rodape__titulo {
  font-family: var(--fonte-display);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: 1.6em;
}

/* Ícones de rede social/contato: botões circulares discretos, com traço
   fino dourado — em vez de uma lista vertical crua de links */
.rodape__redes {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.rodape__icone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.35);
  transition: var(--transicao);
  transition-property: border-color, background-color, transform;
}

.rodape__icone-link .icone {
  width: 18px;
  height: 18px;
}

.rodape__icone-link:hover {
  border-color: var(--cor-dourado-claro);
  background-color: rgba(201, 162, 39, 0.08);
  transform: translateY(-2px);
}

.rodape__icone-link:active {
  transform: translateY(0) scale(0.94);
}

.rodape__base {
  font-size: 0.85rem;
  color: rgba(253, 253, 253, 0.45);
  border-top: 1px solid rgba(253, 253, 253, 0.08);
  padding-top: 20px;
  margin-bottom: 12px;
}

/* Crédito do desenvolvedor: menor e mais apagado que o copyright. A logo
   é azul (identidade do Lucas, não da Camarleon), então fica esmaecida e
   só ganha cor cheia no hover — assim não destoa do preto e dourado. */
.rodape__credito {
  margin: 0;
  font-size: 0.75rem;
}

.rodape__credito-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: rgba(253, 253, 253, 0.35);
  transition: var(--transicao);
  transition-property: color;
}

.rodape__credito-logo {
  width: auto;
  height: 16px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: var(--transicao);
  transition-property: opacity, filter;
}

.rodape__credito-nome {
  font-weight: 500;
}

.rodape__credito-link:hover {
  color: rgba(253, 253, 253, 0.75);
}

.rodape__credito-link:hover .rodape__credito-logo {
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------------------
   FALLBACK DE IMAGEM AUSENTE (ativado via JS quando o arquivo real ainda
   não foi adicionado em assets/img/)
   -------------------------------------------------------------------------- */
.img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  color: rgba(201, 162, 39, 0.85);
  background: repeating-linear-gradient(
    135deg,
    rgba(201, 162, 39, 0.06),
    rgba(201, 162, 39, 0.06) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 1px dashed rgba(201, 162, 39, 0.35);
}

/* ==========================================================================
   PÁGINA 404
   ========================================================================== */
.pagina-404 {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  background-color: var(--cor-preto);
}

.pagina-404__conteudo {
  max-width: 480px;
}

.pagina-404__logo {
  max-width: 200px;
  margin: 0 auto 32px;
}

.pagina-404__codigo {
  font-family: var(--fonte-display);
  font-size: clamp(3rem, 12vw, 5rem);
  color: var(--cor-dourado);
  margin-bottom: 0.2em;
}

.pagina-404__acoes {
  margin-top: 2em;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ==========================================================================
   MEDIA QUERIES — MOBILE-FIRST (telas maiores a partir daqui)
   ========================================================================== */
@media (min-width: 600px) {
  /* A partir daqui a tela já é larga o suficiente pra logo horizontal
     cobrir o hero de ponta a ponta sem cortar o texto — volta pra
     logofundopreto.jpg no lugar da foto vertical usada no mobile */
  .hero {
    background-image:
      linear-gradient(to bottom, rgba(11, 11, 10, 0.1) 0%, rgba(11, 11, 10, 0.2) 70%, rgba(11, 11, 10, 0.5) 100%),
      url('../assets/img/logos/logofundopreto.jpg');
    background-size: cover;
    background-position: center;
  }

  /* Acompanha a troca da foto: a logo horizontal tem fundo preto puro */
  .cabecalho[data-tema="hero"] {
    --cor-nav-fundo: rgba(1, 1, 1, 0.88);
    --cor-nav-painel: #010101;
  }

  .servicos__lista {
    gap: 22px;
  }

  .moldura-interna {
    padding: 26px 30px;
  }

  .galeria__lista {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (min-width: 900px) {
  :root {
    --espaco-secao: 96px;
    --altura-nav: 84px;
  }

  .texto-corpo {
    padding: 30px 36px;
  }


  /* No desktop, o menu vira uma linha horizontal sempre visível — some o
     botão hamburguer e o comportamento de painel deslizante do mobile */
  .menu-toggle {
    display: none;
  }

  .menu-principal {
    position: static;
    max-height: none;
    overflow: visible;
    background: none;
    border-bottom: none;
  }

  .menu-principal__lista {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
  }

  .menu-principal__lista a {
    padding: 6px 0;
    font-size: 0.92rem;
    border-bottom: none;
    position: relative;
  }

  /* No desktop o destaque no hover é o próprio brilho do traço embaixo do
     link (em vez do deslocamento lateral usado na lista vertical do
     mobile) — por isso zera o padding-left herdado da regra base. */
  .menu-principal__lista a:hover,
  .menu-principal__lista a:focus-visible,
  .menu-principal__lista a.ativo {
    padding-left: 0;
  }

  /* Traço dourado sutil sempre visível embaixo de cada link; no
     hover/foco ele fica mais grosso e mais brilhante — o item ativo
     (seção atual, ver script.js) fica sempre nesse estado "brilhante" */
  .menu-principal__lista a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-color: rgba(201, 162, 39, 0.35);
    transition: var(--transicao);
    transition-property: background-color, height;
  }

  .menu-principal__lista a:hover::after,
  .menu-principal__lista a:focus-visible::after,
  .menu-principal__lista a.ativo::after {
    background-color: var(--cor-nav-hover);
    height: 2px;
  }

  .container {
    padding-inline: 40px;
  }

  .trajetoria__grade {
    grid-template-columns: 0.9fr 1.4fr;
    align-items: start;
    gap: 60px;
  }

  .fundadora {
    grid-template-columns: 360px 1fr;
    gap: 64px;
    /* Foto centralizada em relação à altura do bloco de texto ao lado,
       em vez de ficar "presa" no topo enquanto o texto continua descendo */
    align-items: center;
  }

  /* Segunda linha da grade, na coluna do texto (não na da foto): as duas
     caixas de texto da seção ficam com a mesma margem esquerda e a mesma
     largura. Sem isto o fecho começaria embaixo da foto, desalinhado da
     caixa do currículo logo acima. */
  .fundadora__essencia {
    grid-column: 2;
  }

  .porque__grade {
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
  }

  .porque__imagem-wrap {
    max-width: 100%;
  }

  .servico__numero {
    font-size: 2.4rem;
  }

  .galeria__lista {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Capa à esquerda, texto e botão à direita */
  .podcast__interno {
    grid-template-columns: 300px 1fr;
    gap: 40px;
    padding: 32px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: 0;
  }
}