/* ==========================================================================
   Uman — core
   Sistema compartilhado por todo o site: tokens, base, tipografia,
   utilitários, botões, nav e rodapé. Não contém nada específico de uma LP.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS / IDENTIDADE VISUAL
   -------------------------------------------------------------------------- */
:root{
  --amber:   #F9A901;  /* botões, itálicos de destaque, números, âncoras */
  --preto:   #0A0A0A;  /* fundo das seções escuras */
  --grafite: #282829;  /* cards/painéis dentro do escuro, bordas sutis */
  --pedra:   #EEEBE6;  /* fundo das seções claras (alterna com branco puro) */
  --branco:  #FFFFFF;
  --texto-escuro: #1A1A1A;  /* texto sobre fundo claro */
  --texto-claro:  #F4F1EC;  /* texto sobre fundo escuro */

  /* Derivados */
  --amber-escuro: #E09A00;
  --borda-clara:  rgba(26,26,26,.14);
  --borda-escura: rgba(244,241,236,.16);

  /* Tipografia */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Métrica */
  --container: 1240px;
  --gutter: 40px;
  --sec-y: 88px;         /* padding vertical padrão das seções */
  --radius: 4px;
}


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

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  color:var(--texto-escuro);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,video{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* Foco visível no teclado (acessibilidade) */
:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

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

/* Pular para o conteúdo */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:200;
  background:var(--amber); color:var(--preto);
  padding:10px 18px; font-family:var(--mono); font-size:12px;
  transition:top .2s ease;
}
.skip-link:focus{ top:16px; }


/* --------------------------------------------------------------------------
   UTILITÁRIOS DE LAYOUT E TIPOGRAFIA
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{ padding:var(--sec-y) 0; }

/* Alternância de fundos */
.section--claro{ background:var(--branco); color:var(--texto-escuro); }
.section--pedra{ background:var(--pedra);  color:var(--texto-escuro); }
.section--escuro{ background:var(--preto); color:var(--texto-claro); }

/* Eyebrow / rótulo mono */
.eyebrow{
  display:block;
  margin:0 0 26px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
}

/* Títulos serif */
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0; }

.h1{
  font-size:clamp(2.35rem, 4.4vw, 3.65rem);
  line-height:1.12;
  letter-spacing:-.015em;
}
.h2{
  font-size:clamp(1.85rem, 2.9vw, 2.65rem);
  line-height:1.18;
  letter-spacing:-.01em;
}
.h3{
  font-size:clamp(1.3rem, 1.7vw, 1.6rem);
  line-height:1.25;
}

/* Trecho de destaque: itálico verdadeiro em âmbar */
.destaque{
  font-style:italic;
  color:var(--amber);
}

.lead{
  font-size:1.05rem;
  line-height:1.7;
  color:rgba(26,26,26,.72);
  margin:24px 0 0;
  max-width:54ch;
}
.section--escuro .lead{ color:rgba(244,241,236,.72); }


/* --------------------------------------------------------------------------
   BOTÕES E LINKS DE AÇÃO
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.005em;
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn--amber{
  background:var(--amber);
  color:var(--preto);
}
.btn--amber:hover{ background:var(--amber-escuro); transform:translateY(-1px); }

.btn--contorno{
  background:transparent;
  color:var(--texto-escuro);
  border-color:var(--borda-clara);
}
.btn--contorno:hover{ border-color:var(--texto-escuro); }

.btn--bloco{ width:100%; }
.btn--pequeno{ padding:11px 20px; font-size:.88rem; }

/* CTA discreto: tem forma de botão, mas cede o âmbar para o CTA principal.
   Usado no link para o site institucional. */
.btn--linha{
  /* Fundo próprio, discreto: com a película do hero mais clara, um botão
     totalmente transparente ficava à mercê do quadro do vídeo que passasse
     atrás dele. O véu resolve sem acender o botão. */
  background:rgba(10,10,10,.32);
  color:var(--texto-claro);
  border-color:rgba(244,241,236,.26);
  font-weight:500;
  gap:7px;
}
.btn--linha:hover{
  background:rgba(10,10,10,.5);
  border-color:var(--amber);
  color:var(--amber);
}
.btn__seta{
  font-size:.92em;
  line-height:1;
  color:var(--amber);
  transition:transform .2s ease;
}
.btn--linha:hover .btn__seta{ transform:translate(1px,-1px); }

/* Link de texto com seta */
.link-seta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.95rem;
  color:var(--texto-claro);
  opacity:.9;
  transition:opacity .2s ease;
}
.link-seta:hover{ opacity:1; }
.link-seta .seta{ color:var(--amber); font-size:.8em; }


/* --------------------------------------------------------------------------
   NAV (topo, sobre o hero escuro)
   -------------------------------------------------------------------------- */
.site-header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:50;
  padding:26px 0;
  transition:background-color .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
/* Estado ao rolar: barra sólida (classe aplicada via JS) */
.site-header.is-fixo{
  position:fixed;
  padding:14px 0;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--borda-escura);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

/* Wordmark
   A marca é vetor puro (core/img/logo-uman.svg), extraída do
   assets/logo-branco.svg do site. A assinatura NÃO vem do SVG: no arquivo
   original ela era texto vivo em Arial e ficava fora do viewBox, o que
   quebrava o espaçamento em qualquer máquina sem Arial. Aqui ela é texto
   HTML, com tamanho e espaçamento calibrados para acompanhar a largura da
   marca. Se a marca mudar no site, atualizar o SVG aqui. */
.wordmark{
  display:inline-block;
  line-height:1;
  color:var(--texto-claro);
}
.wordmark__marca{
  display:block;
  height:48px;
  width:auto;
}
.wordmark__tag{
  display:block;
  margin-top:4px;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.055em;
  white-space:nowrap;
  color:var(--texto-claro);
}
.wordmark__tag b{
  font-weight:500;
  color:var(--amber);
}

/* Bloco da marca no header: logo + etiqueta do nicho */
.marca{
  display:flex;
  align-items:center;
  gap:18px;
}
.marca__nicho{
  position:relative;
  padding-left:19px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  white-space:nowrap;
}
.marca__nicho::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:1px; height:30px;
  transform:translateY(-50%);
  background:var(--borda-escura);
}

.nav__links{
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto;
}
.nav__links a{
  font-size:.875rem;
  white-space:nowrap;
  color:var(--texto-claro);
  opacity:.82;
  transition:opacity .2s ease, color .2s ease;
}
.nav__links a:hover{ opacity:1; color:var(--amber); }

/* Botão de menu (mobile) */
.nav__toggle{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--borda-escura);
  border-radius:var(--radius);
  color:var(--texto-claro);
  cursor:pointer;
}
.nav__toggle span{
  display:block; position:relative;
  width:18px; height:1.5px; background:currentColor;
}
.nav__toggle span::before,
.nav__toggle span::after{
  content:""; position:absolute; left:0;
  width:18px; height:1.5px; background:currentColor;
}
.nav__toggle span::before{ top:-6px; }
.nav__toggle span::after{ top:6px; }


/* --------------------------------------------------------------------------
   RODAPÉ
   Claro, em pedra: a seção acima dele é preta, e um rodapé preto colado
   num fundo preto virava uma mancha só. Tudo cabe numa linha.
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--pedra);
  color:var(--texto-escuro);
  padding:30px 0;
  border-top:1px solid rgba(26,26,26,.1);
}
.footer__linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.site-footer .wordmark{ color:var(--texto-escuro); }
.site-footer .wordmark__marca{ height:46px; }
.site-footer .wordmark__tag{
  font-size:11px;
  margin-top:4px;
  color:rgba(26,26,26,.72);
}

.footer__links{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
  margin-right:8px;
}
.footer__links a{
  font-size:.92rem;
  white-space:nowrap;
  color:rgba(26,26,26,.74);
  transition:color .2s ease;
}
.footer__links a:hover{ color:var(--texto-escuro); }

/* "Falar com um especialista" nunca quebra em duas linhas */
.footer__cta{ white-space:nowrap; flex:0 0 auto; }

/* --------------------------------------------------------------------------
   7. RESPONSIVO (nav, rodapé e variáveis de espaçamento)
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  :root{ --sec-y:88px; --gutter:32px; }

  /* Nav compacta */
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin:0;
    padding:0 var(--gutter);
    background:rgba(10,10,10,.97);
    border-bottom:1px solid var(--borda-escura);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav__links.is-aberto{ max-height:340px; padding-bottom:18px; }
  .nav__links li{ width:100%; }
  .nav__links a{ display:block; padding:14px 0; }
  .nav__links .btn{ margin:10px 0 4px; }

  /* Rodapé em duas faixas antes de empilhar de vez */
  .footer__linha{ flex-wrap:wrap; gap:26px 32px; }
  .footer__links{ order:3; margin-left:0; }
  .footer__cta{ margin-left:auto; }
}

@media (max-width:900px){
  :root{ --sec-y:72px; --gutter:24px; }

  .marca{ gap:12px; }
  .marca__nicho{ padding-left:13px; font-size:10px; letter-spacing:.14em; }
  .marca__nicho::before{ height:24px; }
  .wordmark__marca{ height:40px; }
  .wordmark__tag{ font-size:9.6px; margin-top:3px; }
  .site-footer .wordmark__marca{ height:42px; }
  .site-footer .wordmark__tag{ font-size:10px; }

  /* Rodapé: a linha única só existe onde há largura para ela */
  .footer__linha{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
  }
  .footer__links{
    flex-wrap:wrap;
    margin:0;
    gap:16px 24px;
  }
}

/* --------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}