/* =============================================================================
   RAVIA PEOPLE — Folha de estilo principal
   -----------------------------------------------------------------------------
   Linha visual aprovada pela cliente: fundo quase preto quente, dourado como
   única cor de destaque, texto creme e títulos em serifada de traço fino
   (Cormorant Garamond). Sem verde e sem seção de fundo claro.

   Organização:
     01. Tokens de design
     02. Reset e base
     03. Utilitários e layout
     04. Componentes (botões, cards, numeração, divisores)
     05. Header e navegação
     06. Seções da landing page
     07. Formulário e contato
     08. Footer
     09. Animações de entrada
     10. Responsivo (mobile-first)

   Ao criar novas páginas, reaproveite os blocos 01–05 e 08–10.
   ========================================================================== */

/* ---------- 01. TOKENS DE DESIGN ----------------------------------------- */
:root {
  /* Fundos — preto quente, nunca preto puro */
  --preto:     #090706;   /* fundo principal */
  --preto-2:   #040302;   /* fundo mais profundo (topo/base de gradientes) */
  --card:      #0F0D0B;   /* superfície de card */
  --card-2:    #13110F;   /* faixa alternada de seção */
  --borda:     #24211C;   /* linha de contorno neutra */

  /* Dourado — a única cor de destaque do sistema */
  --ouro:        #EBBD57;
  --ouro-suave:  #F0D592;
  --ouro-medio:  #D29922;
  --ouro-fundo:  #9D6300;

  /* Texto */
  --creme:       #F5F1EA;             /* texto principal */
  --creme-suave: #A39E94;             /* texto secundário */
  --creme-fraco: rgba(163, 158, 148, .72);  /* .72 mantém o tom apagado e passa em contraste */

  /* Gradientes */
  --grad-ouro: linear-gradient(135deg, var(--ouro-suave) 0%, var(--ouro-medio) 50%, var(--ouro-fundo) 100%);
  --grad-escuro: radial-gradient(ellipse at top, #15110D 0%, var(--preto-2) 60%, #020201 100%);

  /* Sombras */
  --sombra: 0 20px 60px -20px rgba(0, 0, 0, .6);
  --sombra-ouro: 0 10px 40px -10px rgba(235, 189, 87, .28);

  /* Tipografia */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Escala fluida. A Cormorant tem altura-x baixa: pede corpo maior que o usual. */
  --fs-hero:  clamp(2.75rem, 7.5vw, 4.5rem);
  --fs-h2:    clamp(2.1rem, 5vw, 3.25rem);
  --fs-h3:    clamp(1.3rem, 2.4vw, 1.6rem);
  --fs-lead:  clamp(1.02rem, 1.8vw, 1.18rem);
  --fs-body:  1rem;
  --fs-micro: .75rem;   /* rótulos, botões, eyebrows */

  /* Layout */
  --max: 1180px;
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --sec-y: clamp(4.5rem, 11vw, 8rem);
  --radius: 2px;        /* cantos praticamente retos — leitura sóbria */

  --transicao: 320ms cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 02. RESET E BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--preto);
  color: var(--creme);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* <picture> nasce inline: sem isto ele não repassa a largura para a <img> */
picture { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;                  /* a serifada fina é o próprio luxo */
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--creme);
  margin: 0 0 .4em;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
p  { margin: 0 0 1.1em; color: var(--creme-suave); }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 1px solid var(--ouro); outline-offset: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ouro); color: var(--preto);
  padding: .8rem 1.2rem; font-weight: 500;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- 03. UTILITÁRIOS E LAYOUT ------------------------------------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); position: relative; }

/* Alternância sutil de fundo — o site inteiro é escuro, sem seção clara */
.bg-alt { background: rgba(15, 13, 11, .55); }
.bg-fundo { background: var(--grad-escuro); }

/* Rótulo de seção: micro-tipografia dourada, muito espaçada */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 1.5rem;
}

.lead { font-size: var(--fs-lead); color: var(--creme-suave); max-width: 62ch; line-height: 1.75; }

.section-head { max-width: 720px; margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section-head--centro { margin-inline: auto; text-align: center; }

/* Texto com preenchimento dourado (números e destaques) */
.ouro-texto {
  background: var(--grad-ouro);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ouro { color: var(--ouro); }

/* Divisores de linha fina dourada */
.regua { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(235,189,87,.4), transparent); }

.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;
}

/* ---------- 04. COMPONENTES ---------------------------------------------- */
/* Botões — micro-tipografia em caixa alta, muito espaçada */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 2rem;
  border-radius: var(--radius);
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: filter var(--transicao), background var(--transicao),
              border-color var(--transicao), transform var(--transicao);
  text-align: center; line-height: 1.4;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ouro { background: var(--grad-ouro); color: var(--preto); box-shadow: var(--sombra-ouro); }
.btn--ouro:hover { filter: brightness(1.08); }

.btn--contorno { border-color: rgba(235,189,87,.3); color: var(--creme); background: transparent; }
.btn--contorno:hover { background: var(--card); border-color: rgba(235,189,87,.6); }

.btn--bloco { width: 100%; }

/* Mini-CTA em texto */
.link-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro);
  padding: .55rem 0;
  transition: gap var(--transicao), color var(--transicao);
}
.link-cta:hover { gap: .95rem; color: var(--ouro-suave); }
.link-cta svg { width: 14px; height: 14px; flex: none; }

/* Cards */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.6vw, 2.4rem);
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.card:hover { border-color: rgba(235,189,87,.4); transform: translateY(-4px); box-shadow: var(--sombra); }
.card p { font-size: .95rem; }
.card .link-cta { margin-top: auto; align-self: flex-start; }

/* Destaque para os dois serviços que hoje mais geram receita */
.card--destaque { border-color: rgba(235,189,87,.35); box-shadow: var(--sombra); }


/* Numeração 01, 02, 03… em serifada dourada — assinatura do protótipo */
.num {
  font-family: var(--font-display);
  font-size: 1.9rem; line-height: 1; color: var(--ouro);
  display: block; margin-bottom: 1.1rem;
}
.section-head .num { margin-bottom: .6rem; }


/* Ícones de linha fina */
.icone { width: 34px; height: 34px; flex: none; color: var(--ouro); }
.icone svg { width: 100%; height: 100%; stroke: currentColor; fill: none;
  stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

/* Grids */
.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--3, .grid--2 { grid-template-columns: 1fr; }

/* Lista com marcador de losango dourado */
.lista { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .95rem; }
.lista li { position: relative; padding-left: 1.7rem; color: var(--creme-suave); font-size: .95rem; }
.lista li::before {
  content: "◆"; position: absolute; left: 0; top: 0;
  color: var(--ouro); font-size: .6rem; line-height: 2.6;
}

/* Moldura de imagem com fio dourado */
.moldura { position: relative; }
.moldura img { border-radius: var(--radius); width: 100%; height: auto; }
.moldura::after {
  content: ""; position: absolute; inset: 16px -16px -16px 16px;
  border: 1px solid rgba(235,189,87,.35); border-radius: var(--radius);
  z-index: -1;
}

/* Etiqueta sobre a foto (padrão do protótipo: rótulo + nome) */
.moldura__legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(4,3,2,.95), transparent);
}
.moldura__legenda .eyebrow { margin-bottom: .35rem; }
.moldura__legenda strong {
  font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--creme);
}

/* ---------- 05. HEADER ---------------------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background var(--transicao), border-color var(--transicao), padding var(--transicao);
  border-bottom: 1px solid transparent;
  padding-block: 1.15rem;
}
.header.is-scrolled {
  background: rgba(9, 7, 6, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--borda);
  padding-block: .7rem;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* PLACEHOLDER do logo — trocar o arquivo em assets/img/ (ver README) */
.logo img { height: 42px; width: auto; }

.nav { display: none; }
.nav a {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--creme-suave); transition: color var(--transicao);
}
.nav a:hover { color: var(--ouro); }

.header .btn { display: none; padding: .7rem 1.35rem; }

.hamburguer {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(235,189,87,.3); border-radius: var(--radius);
}
.hamburguer span { display: block; width: 18px; height: 1px; background: var(--ouro); position: relative; }
.hamburguer span::before, .hamburguer span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: var(--ouro);
  transition: transform var(--transicao), opacity var(--transicao);
}
.hamburguer span::before { top: -6px; }
.hamburguer span::after  { top: 6px; }
.hamburguer[aria-expanded="true"] span { background: transparent; }
.hamburguer[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: 0; z-index: 99;
  background: var(--preto-2);
  display: grid; align-content: center; gap: 1.5rem;
  padding: 5rem var(--gut) 3rem;
  transform: translateY(-100%);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.menu-mobile.is-open { transform: translateY(0); }
.menu-mobile a {
  font-family: var(--font-display); font-size: 1.9rem; color: var(--creme);
  border-bottom: 1px solid var(--borda); padding-bottom: .8rem;
}
.menu-mobile .btn { font-family: var(--font-body); border-bottom: 0; }
body.menu-aberto { overflow: hidden; }

/* ---------- 06. SEÇÕES ---------------------------------------------------- */
/* Hero — foto escurecida por gradiente, texto por cima */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: clamp(7.5rem, 16vw, 10rem);
  padding-bottom: clamp(4rem, 9vw, 6.5rem);
  overflow: hidden;
  background: var(--grad-escuro);
}
/* Camada de imagem de fundo: trocar a url por uma foto ambiente quando houver */
.hero__fundo {
  position: absolute; inset: 0; opacity: .5;
  background: radial-gradient(ellipse at 70% 20%, rgba(235,189,87,.14), transparent 55%);
}
.hero__fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(9,7,6,.4) 0%, rgba(9,7,6,.65) 55%, var(--preto) 100%);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(3rem, 7vw, 4.5rem); align-items: center; }
.hero h1 { margin-bottom: 1.75rem; }
.hero h1 em { font-style: italic; }
/* Quebras de linha controladas: só entram a partir do tablet */
br.quebra { display: none; }
.hero .lead { margin-bottom: 2.5rem; }

.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 3rem; }
.hero__acoes .btn { flex: 1 1 auto; min-width: 230px; }

/* Linha de credenciais do hero */
.credenciais {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  padding-top: 2rem; border-top: 1px solid var(--borda);
  list-style: none; margin: 0;
}
.credenciais li {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--creme-fraco);
}
.credenciais strong { color: var(--ouro); font-weight: 500; }

/* No mobile a foto entra menor para o hero não ficar longo demais */
.hero__foto { position: relative; max-width: 320px; width: 100%; justify-self: center; }

/* Bloco das duas portas de entrada */
.portas { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
.porta {
  background: var(--preto); padding: clamp(2rem, 4.5vw, 3rem);
  display: flex; flex-direction: column; gap: .9rem;
  transition: background var(--transicao);
}
.porta:hover { background: var(--card); }
.porta .num { margin-bottom: .4rem; }
.porta h3 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.porta p { font-size: .95rem; }
.porta .link-cta { margin-top: auto; align-self: flex-start; }

/* Bloco de porta detalhado (Empresas / Líder) */
.porta-bloco { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.porta-bloco__acoes { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* Frase-âncora de dor */
.dor-box {
  border-left: 1px solid var(--ouro);
  padding: .3rem 0 .3rem 1.5rem;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  line-height: 1.35;
  color: var(--creme);
}

/* Cartão de serviço detalhado */
.detalhe {
  border: 1px solid var(--borda); border-radius: var(--radius);
  padding: clamp(1.6rem, 3.4vw, 2.1rem);
  background: var(--card);
}
.detalhe + .detalhe { margin-top: 1.5rem; }
.detalhe h3 { margin-bottom: .6rem; }
.detalhe p { font-size: .95rem; }
.detalhe .lista { margin-bottom: 1.75rem; }

/* Os quatro movimentos da tese: Estrutura · Pessoas · Liderança · Estratégia */
.tese { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
.tese__item { background: var(--preto); padding: clamp(1.75rem, 3.5vw, 2.25rem); }
.tese__palavra {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2rem); color: var(--ouro); margin-bottom: .35rem;
}
.tese__item p { font-size: .95rem; margin: 0; }

/* Pares "sabem que precisam / mas" — tensão que originou a Ravia */
.tensao { display: grid; gap: 0; border-top: 1px solid var(--borda); }
.tensao__linha { padding: 1.5rem 0; border-bottom: 1px solid var(--borda); }
.tensao__sabem {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  color: var(--creme); margin: 0 0 .4rem;
}
.tensao__mas {
  font-size: .93rem; color: var(--creme-suave); margin: 0; padding-left: 1.5rem;
  border-left: 1px solid rgba(235,189,87,.4);
}

/* Frase de destaque no meio da seção */
.destaque {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.65rem); line-height: 1.4;
  color: var(--creme); max-width: 46ch;
}

/* Citação curta dentro de um card */
.citacao {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  line-height: 1.4; color: var(--creme); margin: 0;
}

/* Citação de autoridade da fundadora */
.citacao-forte {
  margin: 2rem 0 0; padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 1px solid var(--ouro);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.45; color: var(--creme);
}

/* Interseção pessoas · liderança · estratégia */
.intersecao { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.intersecao__svg { width: 100%; max-width: 420px; height: auto; justify-self: center; }
.intersecao__texto h3 { margin-bottom: .75rem; }

/* Etapas da abordagem */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.etapa { border-top: 1px solid var(--borda); padding-top: 1.6rem; }
.etapa h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.etapa p { font-size: .93rem; margin: 0; }

/* Números de autoridade */
.numeros { display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
.numero { background: var(--preto); padding: clamp(1.75rem, 3.5vw, 2.25rem); text-align: center; }
.numero strong {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 3.25rem); line-height: 1; margin-bottom: .6rem;
}
.numero span {
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--creme-fraco);
}

/* Depoimentos */
.depoimento {
  background: var(--card); border: 1px solid var(--borda); border-radius: var(--radius);
  padding: clamp(1.75rem, 3.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.25rem; margin: 0;
}
.depoimento__aspas { font-family: var(--font-display); font-size: 2.8rem; line-height: .5; color: var(--ouro); }
.depoimento blockquote {
  margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5; color: var(--creme);
}
.depoimento figcaption {
  margin-top: auto; font-size: var(--fs-micro); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ouro);
}
.depoimento--vazio { border-style: dashed; }
.depoimento--vazio blockquote { color: var(--creme-suave); font-style: italic; }

/* Assinatura da fundadora */
.assinatura { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--ouro); margin-top: 1.75rem; }

/* CTA final */
.cta-final { background: var(--grad-escuro); text-align: center; overflow: hidden; }
.portas-cta { display: grid; gap: 1.5rem; text-align: left; margin-top: 3rem; }
.porta-card {
  border: 1px solid var(--borda); border-radius: var(--radius);
  padding: clamp(1.9rem, 4vw, 2.5rem); background: var(--card);
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color var(--transicao), transform var(--transicao);
}
.porta-card:hover { border-color: rgba(235,189,87,.5); transform: translateY(-4px); }
.porta-card h3 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); }
.porta-card p { font-size: .94rem; }
.porta-card .btn { margin-top: auto; }

/* ---------- 07. FORMULÁRIO E CONTATO ------------------------------------- */
.contato__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }

.form { display: grid; gap: 1.25rem; }
.campo { display: grid; gap: .5rem; }
.campo label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--creme-fraco);
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .95rem 1.1rem;
  background: var(--preto-2);
  border: 1px solid var(--borda);
  border-radius: var(--radius);
  color: var(--creme); font: inherit; font-size: .97rem; font-weight: 300;
  transition: border-color var(--transicao), background var(--transicao);
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: rgba(235,189,87,.6); background: var(--card);
}
.campo input::placeholder, .campo textarea::placeholder { color: rgba(163,158,148,.4); }
.campo select option { background: var(--card); color: var(--creme); }

.form__nota { font-size: .82rem; color: var(--creme-fraco); }
.form__nota a { color: var(--ouro); }

/* Honeypot anti-spam — invisível para pessoas, preenchido por bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form__status {
  font-size: .9rem; padding: .9rem 1.1rem; border-radius: var(--radius);
  border: 1px solid rgba(235,189,87,.35); background: rgba(235,189,87,.07);
  color: var(--ouro-suave);
}
.form__status[hidden] { display: none; }

.contato__aside .canal {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-block: 1.35rem; border-bottom: 1px solid var(--borda);
}
.contato__aside .canal:first-of-type { border-top: 1px solid var(--borda); }
.canal .icone { width: 22px; height: 22px; margin-top: .35rem; }
.canal strong {
  display: block; font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ouro); margin-bottom: .3rem;
}
.canal a, .canal p { color: var(--creme-suave); font-size: .95rem; margin: 0; }
.canal a:hover { color: var(--creme); }

/* Botão flutuante de WhatsApp */
.whats-flutuante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grad-ouro); color: var(--preto);
  box-shadow: var(--sombra-ouro);
  transition: transform var(--transicao);
}
.whats-flutuante:hover { transform: scale(1.06); }
.whats-flutuante svg { width: 24px; height: 24px; }

/* ---------- 08. FOOTER ---------------------------------------------------- */
.footer { background: var(--preto-2); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; border-top: 1px solid var(--borda); }
.footer__grid { display: grid; gap: 2.75rem; }
.footer p { font-size: .93rem; }
.footer h4 {
  font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase; color: var(--ouro); margin-bottom: 1.25rem;
}
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer__links a { color: var(--creme-suave); font-size: .93rem; transition: color var(--transicao); }
.footer__links a:hover { color: var(--ouro); }
.social { display: flex; gap: .75rem; margin-top: 1.5rem; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--borda); border-radius: 50%; color: var(--ouro);
  transition: border-color var(--transicao), background var(--transicao);
}
.social a:hover { border-color: rgba(235,189,87,.5); background: var(--card); }
.social svg { width: 17px; height: 17px; }
.footer__base {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--creme-fraco);
}

/* ---------- 09. ANIMAÇÕES DE ENTRADA ------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover, .porta-card:hover { transform: none; }
}

/* ---------- 10. RESPONSIVO ------------------------------------------------ */
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tese { grid-template-columns: repeat(2, 1fr); }
  .etapas { grid-template-columns: repeat(2, 1fr); }
  br.quebra { display: inline; }
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .portas { grid-template-columns: repeat(2, 1fr); }
  .portas-cta { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .numeros--3 { grid-template-columns: repeat(3, 1fr); }

  .hero__grid { grid-template-columns: 1.1fr .9fr; }
  /* No desktop há espaço à direita: o grafismo cresce e ganha presença */
  .hero__grafismo { right: -13%; top: 46%; width: min(1020px, 82%); opacity: .9; }
  .hero__foto { max-width: 440px; }
  .tese { grid-template-columns: repeat(4, 1fr); }
  .etapas { grid-template-columns: repeat(5, 1fr); }
  .intersecao { grid-template-columns: .85fr 1.15fr; }
  .porta-bloco { grid-template-columns: 1fr 1fr; }
  .porta-bloco--invertido .porta-bloco__midia { order: -1; }
  .contato__grid { grid-template-columns: 1.25fr .75fr; }

  .nav { display: flex; gap: 2.25rem; }
  .header .btn { display: inline-flex; }
  .hamburguer, .menu-mobile { display: none; }

  .whats-flutuante { right: 1.75rem; bottom: 1.75rem; }
}

/* =============================================================================
   11. ELEMENTOS GRÁFICOS (LP 2.0)
   -----------------------------------------------------------------------------
   Substituem as fotos de pessoa no hero e na frente 02. São SVG inline:
   nítidos em qualquer tela, sem requisição extra e sempre na cor da marca.
   ========================================================================== */

/* Grafismo solto: sem caixa, sem borda, sem fundo. Ele vaza da coluna e
   convive com o texto em vez de ficar emoldurado ao lado dele. */
.emblema { position: relative; background: none; border: 0; overflow: visible; }
.emblema svg { width: 100%; height: auto; display: block; overflow: visible; }

/* No hero o grafismo vira camada de fundo: grande, sangrando pela direita,
   com o texto por cima. */
/* Mobile: o grafismo recua para textura, senão compete com o parágrafo */
.hero__grafismo {
  position: absolute;
  right: -32%;
  top: 32%;
  transform: translateY(-50%);
  width: 105%;
  opacity: .3;
  pointer-events: none;
  z-index: 0;
}
.hero__grid { position: relative; z-index: 1; }
.hero__texto { max-width: 660px; }

/* Na frente 02 ele estoura a coluna para a esquerda */
.grafismo-solto { overflow: visible; }
.grafismo-solto svg { width: 138%; margin-left: -19%; }

.emblema .fio    { fill: none; stroke: var(--ouro); stroke-opacity: .5; stroke-width: 1.1; }
.emblema .fio-forte { fill: none; stroke: var(--ouro); stroke-opacity: .9; stroke-width: 1.3; }
.emblema .marca  { fill: var(--ouro); }
.emblema .rotulo {
  fill: var(--creme); font-family: var(--font-body); font-size: 15px;
  font-weight: 500; letter-spacing: 6px;
}
.emblema .rotulo--suave { fill: var(--creme-suave); font-size: 12.5px; letter-spacing: 4.5px; }
.emblema .monograma {
  fill: var(--ouro); font-family: var(--font-display); font-size: 96px; letter-spacing: 2px;
}
.emblema .numero-etapa {
  fill: var(--ouro); font-family: var(--font-display); font-size: 26px; fill-opacity: .85;
}
.emblema .texto-etapa {
  fill: var(--creme-suave); font-family: var(--font-body); font-size: 15px; letter-spacing: 1.4px;
}

/* Traços auxiliares dos elementos (grades de fundo e nós secundários) */
.emblema .fio-fraco   { fill: none; stroke: var(--ouro); stroke-opacity: .16; stroke-width: 1; }
.emblema .marca-fraca { fill: var(--ouro); fill-opacity: .35; }
.emblema .rotulo-s {
  fill: var(--creme-suave); font-family: var(--font-body);
  font-size: 13px; font-weight: 500; letter-spacing: 4px;
}

/* Sobre nós: a foto é deitada e fica mais baixa que a coluna de texto.
   Centralizar evita o vão embaixo dela e dá mais presença à imagem. */
.porta-bloco--centro { align-items: center; }
@media (min-width: 960px) {
  .porta-bloco--centro { grid-template-columns: 1.1fr .9fr; }
}