/* Visual do site institucional: cores da marca, logo, botões, abertura com foto, seção de produtos e rodapé. */

/* ---------- Tokens (cores e fontes da marca) ---------- */
:root {
  --cobre: #d39a5e;
  --cobre-claro: #e2ad72;
  --creme: #f3e9dc;
  --carvao: #0d0e0e;
  --marinho: #0e1b28;
  --noite: #02244b;
  --sombra: rgba(4, 10, 22, .78);
  --texto-suave: rgba(243, 233, 220, .72);
  --texto-botao: #1a1209;
  --fonte-marca: "Jost", "Segoe UI", sans-serif;
  --fonte-texto: "Inter", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--fonte-texto); color: var(--creme); background: var(--carvao); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; } /* height: auto mantém a proporção mesmo com width/height no HTML */

/* ---------- Logo (X da marca + nome em texto) ---------- */
.logo { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.logo img { width: clamp(70px, 10vw, 112px); height: auto; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .5)); }
.logo .nome { font-family: var(--fonte-marca); font-weight: 500; font-size: clamp(34px, 6vw, 60px); letter-spacing: .32em; line-height: 1; color: var(--creme); }
.logo .sub { display: block; margin-top: 8px; font-size: clamp(11px, 1.6vw, 16px); letter-spacing: .42em; color: var(--cobre); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font: 600 15px var(--fonte-texto); text-decoration: none;
  background: var(--cobre); color: var(--texto-botao);
  transition: transform .15s, background .15s;
}
.botao:hover { background: var(--cobre-claro); transform: translateY(-1px); }
.botao:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
.botao.contorno { background: rgba(4, 10, 22, .35); backdrop-filter: blur(6px); color: var(--creme); border: 1px solid rgba(243, 233, 220, .4); }
.botao.contorno:hover { border-color: var(--cobre); color: var(--cobre); }
.botao .seta { transition: transform .15s; }
.botao:hover .seta { transform: translateX(3px); }

/* ---------- Abertura: foto de fundo + logo + chamada ---------- */
.abertura { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--noite); }
.abertura .fundo, .abertura .fundo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.abertura .fundo img { object-fit: cover; object-position: 75% center; }
/* Escurece o lado do texto para ele ficar legível sobre a foto */
.abertura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sombra) 0%, rgba(4, 10, 22, .45) 38%, rgba(4, 10, 22, 0) 62%); }
.abertura .cabecalho, .abertura .chamada, .abertura .rolar { position: relative; z-index: 1; }
.abertura .cabecalho { display: flex; justify-content: flex-end; padding: 22px clamp(16px, 5vw, 64px); }
.abertura .chamada { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 0 clamp(16px, 5vw, 64px) 10vh; max-width: 680px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.abertura .lema { font-family: var(--fonte-marca); font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35; }
.abertura .acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.abertura .rolar { position: absolute; bottom: 18px; left: clamp(16px, 5vw, 64px); font-size: 13px; color: var(--creme); opacity: .8; text-decoration: none; }

/* ---------- Produtos: texto + computador e celular lado a lado ---------- */
.produtos {
  background:
    radial-gradient(900px 600px at 78% 45%, rgba(211, 154, 94, .14), transparent 70%),
    repeating-linear-gradient(60deg, transparent 0 46px, rgba(211, 154, 94, .035) 46px 47px),
    var(--carvao);
}
.principal { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 96px clamp(16px, 5vw, 64px) 64px; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cobre); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cobre); box-shadow: 0 0 0 4px rgba(211, 154, 94, .2); }
.produtos h2 { font-family: var(--fonte-marca); font-weight: 500; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.1; }
.produtos h2 em { font-style: normal; color: var(--cobre); }
.texto { margin: 22px 0 32px; max-width: 460px; color: var(--texto-suave); line-height: 1.65; font-size: 17px; }

/* Imagens do sistema (fundo transparente): celular sobreposto ao canto do notebook */
.dispositivos { position: relative; padding-right: 12%; }
.dispositivos .img-notebook { width: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.dispositivos .img-celular { position: absolute; right: 0; bottom: -6%; width: 30%; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)); }

/* Caixa para quem chegou aqui procurando o Finance */
.faixa { max-width: 1240px; margin: 0 auto; padding: 24px clamp(16px, 5vw, 64px) 72px; }
.faixa .caixa { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 24px 28px; border-radius: 18px; background: var(--marinho); border: 1px solid rgba(211, 154, 94, .22); }
.faixa .caixa img { width: 210px; border-radius: 6px; }
.faixa .caixa p { flex: 1; min-width: 220px; color: var(--texto-suave); line-height: 1.5; }
.faixa .caixa p b { color: var(--creme); display: block; font-size: 18px; margin-bottom: 4px; }

/* ---------- Rodapé ---------- */
.rodape { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--texto-suave); border-top: 1px solid rgba(243, 233, 220, .1); }
.rodape a { color: var(--cobre); text-decoration: none; }

/* ---------- Telas em pé (celular, tablet em pé): foto vertical, texto no céu livre do topo ---------- */
@media (max-aspect-ratio: 1/1) {
  .abertura .fundo img { object-position: center bottom; }
  .abertura::after { background: linear-gradient(180deg, rgba(4, 10, 22, .55) 0%, rgba(4, 10, 22, .15) 40%, rgba(4, 10, 22, 0) 55%); }
  .abertura .chamada { justify-content: flex-start; align-items: center; text-align: center; gap: 22px; padding: 4vh 16px 0; margin: 0 auto; }
  .abertura .rolar { display: none; }
}

/* ---------- Telas estreitas: produtos em uma coluna ---------- */
@media (max-width: 860px) {
  .principal { grid-template-columns: 1fr; padding-top: 64px; }
}

/* Quem pediu menos movimento no sistema não vê animações */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .botao .seta { transition: none; }
}