/* ============================================
   LF Creative — Landing Page Geral
   Direção minimal (manual de marca, revisão 10/2026):
   fundo gelo liso, LEMON MILK Bold em caixa alta nos títulos,
   traço ciano sob uma palavra, linhas finas, botão preto.
   Sem gradiente, sem sombra, sem teal, sem seção escura.
   ============================================ */

@font-face {
  font-family: 'LEMON MILK';
  src: url('assets/fonts/lemonmilk-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LEMON MILK';
  src: url('assets/fonts/lemonmilk-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Urbanist: fonte de texto e rótulos (licença aberta OFL, arquivo variável, subconjunto latino) */
@font-face {
  font-family: 'Urbanist';
  src: url('assets/fonts/urbanist-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores (manual de marca, p. 06) */
  --cor-gelo: #F4F4F2;      /* fundo padrão */
  --cor-preto: #0A0A0A;     /* títulos, botão, logo */
  --cor-ciano: #5CB8CC;     /* só traço e sublinhado, nunca texto nem botão */
  --cor-texto: #3D3D3D;     /* parágrafos */
  --cor-rotulo: #6B7076;    /* rótulos, datas, números */
  --cor-metal-a: #9CA3AA;   /* detalhes */
  --cor-linha: #D4D7DA;     /* divisores (Metálico B) */

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

  --t-h1: clamp(1.75rem, 1rem + 4.2vw, 4.25rem);
  --t-h2: clamp(1.375rem, 1rem + 1.9vw, 2.5rem);
  --t-h3: 1rem;
  --t-texto: 1.0625rem;
  --t-rotulo: 0.75rem;

  /* Espaçamento (escala 8px) */
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 40px;
  --e-5: 64px;
  --e-6: 96px;
  --e-7: 144px;

  --margem: 20px;           /* margem lateral da página */
  --secao: var(--e-5);      /* respiro vertical entre seções */
  --largura: 1200px;

  --dur: 600ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ============================================
   Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  background: var(--cor-gelo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-texto);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--cor-preto);
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.04; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: .02em; line-height: 1.3; }
p { text-wrap: pretty; }

/* Traço ciano sob uma palavra do título: o único uso de cor da peça */
h1 em, h2 em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--cor-ciano);
  text-decoration-thickness: .11em;
  text-underline-offset: .09em;
  text-decoration-skip-ink: none;
}

/* Links: preto com sublinhado ciano */
a { color: var(--cor-preto); text-decoration: underline; text-decoration-color: var(--cor-ciano); text-decoration-thickness: 2px; text-underline-offset: 5px; }
a:hover { text-decoration-color: var(--cor-preto); }

/* Foco visível: preto, porque ciano sobre gelo não dá contraste */
a:focus-visible, button:focus-visible { outline: 2px solid var(--cor-preto); outline-offset: 3px; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem); }

.pular {
  position: absolute; left: var(--margem); top: -100px; z-index: 100;
  background: var(--cor-preto); color: var(--cor-gelo); padding: 12px 16px; text-decoration: none;
}
.pular:focus { top: 12px; }

/* ============================================
   Componentes
   ============================================ */

/* Rótulo: Medium, caixa alta, espaçado */
.rotulo {
  font-family: var(--fonte-texto);
  font-size: var(--t-rotulo);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor-rotulo);
  line-height: 1.4;
}

/* Botão preto, texto claro, sem borda e sem arredondamento */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--cor-preto);
  color: var(--cor-gelo);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.btn::after { content: "\2192"; transition: transform 200ms var(--curva); }
.btn:hover::after { transform: translateX(4px); }
.btn-compacto { min-height: 44px; padding: 10px 20px; font-size: .9375rem; }

.link { font-weight: 500; }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); }

/* Seção: linha fina no topo, rótulo numerado e título */
.secao { padding: var(--secao) 0; border-top: 1px solid var(--cor-linha); }
.secao-topo { margin-bottom: var(--e-4); }
.secao-topo .rotulo { margin-bottom: var(--e-2); }

/* ============================================
   Cabeçalho
   ============================================ */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cor-gelo);
  border-bottom: 1px solid var(--cor-linha);
}
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 72px; }
.marca { display: inline-flex; text-decoration: none; }
.marca img { height: 40px; width: auto; }   /* monograma: abaixo de 140 px de largura o wordmark some */
.menu { display: none; }
.menu a { text-decoration: none; }
.menu a:hover { color: var(--cor-preto); }

/* ============================================
   Hero
   ============================================ */
.hero { padding: var(--e-5) 0 var(--secao); }
.hero h1 { max-width: 20ch; }
.hero h1 span { display: block; }
.hero h1 span + span { margin-top: .28em; }
.hero-apoio { max-width: 34rem; margin: var(--e-4) 0; font-size: 1.125rem; }

/* ============================================
   01 · O que fazemos
   ============================================ */
.frentes li { display: grid; grid-template-columns: 1fr; gap: var(--e-1); padding: var(--e-3) 0; border-top: 1px solid var(--cor-linha); }
.frentes li:last-child { border-bottom: 1px solid var(--cor-linha); }
.frentes h3 { font-size: 1.125rem; }

/* ============================================
   02 · Pra quem
   ============================================ */
.pra-quem p { max-width: 36rem; margin-bottom: var(--e-4); }

/* ============================================
   03 · Prova
   ============================================ */
.prova-foto { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; object-position: 50% 52%; margin-bottom: var(--e-4); }
.prova-lista li { padding: var(--e-3) 0; border-top: 1px solid var(--cor-linha); color: var(--cor-preto); font-weight: 500; }
.prova-lista li:last-child { border-bottom: 1px solid var(--cor-linha); }
.clientes { margin-top: var(--e-5); }
.clientes .rotulo { margin-bottom: var(--e-3); }
.clientes ul { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cor-linha); border-left: 1px solid var(--cor-linha); }
.clientes li { display: flex; align-items: center; justify-content: center; height: 104px; padding: var(--e-2); border-right: 1px solid var(--cor-linha); border-bottom: 1px solid var(--cor-linha); }
.clientes img { max-height: 44px; max-width: min(150px, 100%); width: auto; object-fit: contain; }
.clientes img.alto { max-height: 64px; }
/* Espaço reservado: arquivo do logo ainda não recebido. Remover antes de publicar. */
.pendente { flex-direction: column; gap: 6px; text-align: center; outline: 1px dashed var(--cor-metal-a); outline-offset: -10px; }
.pendente strong { font-family: var(--fonte-titulo); font-weight: 500; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-preto); line-height: 1.2; }
.pendente span { font-size: .6875rem; }

/* ============================================
   04 · Como funciona
   ============================================ */
.processo-destaque { max-width: 36rem; margin-bottom: var(--e-4); color: var(--cor-preto); font-weight: 500; font-size: 1.125rem; }
.etapas { display: grid; grid-template-columns: 1fr; position: relative; }
.etapas li { padding: var(--e-3) 0; border-top: 1px solid var(--cor-linha); position: relative; }
.etapas li:last-child { border-bottom: 1px solid var(--cor-linha); }
.etapas .rotulo { display: block; margin-bottom: var(--e-2); }
.etapas h3 { font-size: 1.125rem; margin-bottom: var(--e-1); }
/* Linha preta que avança etapa por etapa quando a seção entra na tela: mostra o processo andando */
.etapas li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--cor-preto); transform-origin: left center; }

/* ============================================
   05 · Contato
   ============================================ */
.contato { padding: var(--e-6) 0; }
.contato h2 { font-size: clamp(1.5rem, 1rem + 3vw, 3.25rem); max-width: 20ch; margin-bottom: var(--e-4); }

/* ============================================
   06 · Perguntas frequentes
   ============================================ */
.faq-item { padding: var(--e-3) 0; border-top: 1px solid var(--cor-linha); }
.faq-item:last-child { border-bottom: 1px solid var(--cor-linha); }
.faq-item h3 { font-family: var(--fonte-texto); font-weight: 500; font-size: 1.125rem; text-transform: none; letter-spacing: 0; margin-bottom: var(--e-1); text-wrap: pretty; }
.faq-item p { max-width: 40rem; }

/* ============================================
   Rodapé
   ============================================ */
.rodape { border-top: 1px solid var(--cor-linha); padding: var(--e-5) 0 var(--e-4); }
.rodape .container { display: grid; gap: var(--e-4); }
.rodape-logo { width: 160px; height: auto; }   /* logo completo: mínimo de 140 px de largura */
.rodape-dados { display: grid; gap: var(--e-1); }
.rodape-dados a { font-weight: 500; }

/* ============================================
   Movimento: discreto e com propósito
   (só com JS ativo e sem "reduzir movimento")
   ============================================ */
.com-movimento .revela { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva); }
.com-movimento .revela.visivel { opacity: 1; transform: none; }
/* O traço ciano aparece depois do título, para o olho chegar primeiro no texto */
.com-movimento h1 em, .com-movimento h2 em { text-decoration-color: transparent; transition: text-decoration-color 700ms ease 350ms; }
.com-movimento .visivel em, .com-movimento h1.visivel em { text-decoration-color: var(--cor-ciano); }
.com-movimento .etapas li::before { transform: scaleX(0); transition: transform 700ms var(--curva); }
.com-movimento .etapas.visivel li::before { transform: scaleX(1); }
.com-movimento .etapas.visivel li:nth-child(2)::before { transition-delay: 350ms; }
.com-movimento .etapas.visivel li:nth-child(3)::before { transition-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

/* ============================================
   Tablet (a partir de 768px)
   ============================================ */
@media (min-width: 768px) {
  :root { --margem: 40px; --secao: var(--e-6); --t-texto: 1.125rem; }
  .cabecalho .container { min-height: 80px; }
  .marca img { height: 44px; }
  .menu { display: flex; gap: var(--e-4); margin-left: auto; }
  .hero { padding-top: var(--e-6); }
  .hero-apoio { font-size: 1.25rem; }
  .frentes li { grid-template-columns: 56px 1fr; column-gap: var(--e-3); padding: var(--e-4) 0; }
  .frentes .rotulo { grid-row: span 2; padding-top: 6px; }
  .frentes h3 { font-size: 1.25rem; }
  .frentes p { max-width: 40rem; }
  .prova-corpo { display: grid; grid-template-columns: 5fr 7fr; gap: var(--e-5); align-items: start; }
  .prova-foto { margin-bottom: 0; }
  .clientes li { height: 128px; padding: var(--e-3); }
  .etapas { grid-template-columns: repeat(3, 1fr); column-gap: var(--e-4); }
  .etapas li { border-bottom: 0 !important; padding: var(--e-3) 0 0; }
  .rodape .container { grid-template-columns: 1fr auto; align-items: end; }
  .rodape-dados { text-align: right; justify-items: end; }
}

/* ============================================
   Desktop (a partir de 1200px)
   ============================================ */
@media (min-width: 1200px) {
  :root { --margem: 48px; --secao: var(--e-7); }
  .secao > .container.duas-colunas { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--e-5); align-items: start; }
  .duas-colunas .secao-topo { margin-bottom: 0; position: sticky; top: 128px; }
  .hero { padding-top: var(--e-7); }
  .frentes li { grid-template-columns: 56px 1fr 1.6fr; align-items: baseline; }
  .frentes .rotulo { grid-row: auto; padding-top: 0; }
  .contato { padding: var(--e-7) 0; }
}