/* ==========================================================
Landing page · Família Invest
Guia de marca: Preto Grafite #141414 · Marrom Café #372A26 ·
Gold #9B7E67 · Off White #EFEBE7 · Verde Escuro #132114 ·
Verde Sálvia #678468
Tipografia: Neue Haas Grotesk (títulos), Manrope (textos),
Almonde (destaques manuscritos).
========================================================== */

/* ----------------------------------------------------------
Fontes licenciadas (opcional)
Se tiver os arquivos da Neue Haas Grotesk e da Almonde,
coloque em /fonts e descomente os blocos abaixo.
---------------------------------------------------------- /
/
@font-face { font-family: 'Neue Haas Grotesk'; src: url('../fonts/NeueHaasGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Neue Haas Grotesk'; src: url('../fonts/NeueHaasGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Almonde'; src: url('../fonts/Almonde.woff2') format('woff2'); font-display: swap; }
*/

:root {
--graphite: #141414;
--coffee: #372a26;
--gold: #9b7e67;
--gold-soft: #b79c85;
--offwhite: #efebe7;
--forest: #132114;
--sage: #678468;

--font-display: 'Neue Haas Grotesk', 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', 'Inter', Arial, sans-serif;
--font-body: 'Manrope', 'Inter', system-ui, sans-serif;
--font-script: 'Almonde', 'Mrs Saint Delafield', cursive;

--radius: 22px;
--ease: cubic-bezier(.25, .8, .25, 1);
--max: 620px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
color: var(--offwhite);
background: var(--graphite);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---------- Fundo ---------- */
.bg {
position: fixed; inset: 0; z-index: -1;
background:
radial-gradient(900px 600px at 85% 105%, rgba(55, 42, 38, .75), transparent 70%),
radial-gradient(700px 500px at 0% 0%, rgba(19, 33, 20, .55), transparent 70%),
linear-gradient(160deg, #050505 0%, #141414 45%, #1d1512 100%);
}

/* ---------- Topo ---------- */
.hero { max-width: var(--max); margin: 0 auto; padding: 56px 24px 8px; text-align: center; }

.brand { display: inline-flex; align-items: center; gap: 16px; color: var(--offwhite); }
.brand__icon { width: 52px; height: 58px; fill: var(--gold); }
.brand__word { display: flex; flex-direction: column; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: .95; letter-spacing: -.035em; }
.brand__line { display: inline-flex; align-items: baseline; }
.brand__arrow { width: .62em; height: .62em; margin: 0 .02em 0 .03em; fill: var(--gold); align-self: center; transform: translateY(.12em); }

.hero__title {
margin-top: 40px;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.9rem, 6.4vw, 2.7rem);
line-height: 1.12;
letter-spacing: -.03em;
text-wrap: balance;
}
.hero__title em {
font-family: var(--font-script);
font-style: normal;
font-weight: 400;
color: var(--gold-soft);
font-size: 1.45em;
line-height: .7;
padding: 0 .08em;
}
.hero__text { margin: 0px auto 0; max-width: 46ch; font-size: 1rem; color: rgba(239, 235, 231, .78); }

/* ---------- Cards Imagens ---------- */
.cards { display: flex; flex-direction: column; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 40px 20px 0; }

/* Animação de flutuação suave aplicada ao container do card */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}

.card-item {
animation: float 6s ease-in-out infinite;
will-change: transform;
}

/* Atrasos diferentes para os cards não flutuarem todos ao mesmo tempo */
.card-item:nth-child(2) { animation-delay: -1.5s; }
.card-item:nth-child(3) { animation-delay: -3s; }
.card-item:nth-child(4) { animation-delay: -4.5s; }

.card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9; /* Mantém a proporção de tela Full HD */
border: 1px solid rgba(155, 126, 103, .25);
border-radius: var(--radius);
background: var(--graphite);
overflow: hidden;
transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.card:hover, .card:focus-visible {
border-color: var(--gold);
box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
outline: none;
}
.card:focus-visible { outline: 2px solid var(--offwhite); outline-offset: 3px; }

/* A imagem ocupará 100% do card */
.card__img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* <-- Alterado de 'cover' para 'contain' para não cortar a imagem */
  display: block;
  transition: transform .6s var(--ease);
  background-color: rgba(55, 42, 38, .55); /* Cor de fundo enquanto a imagem carrega */
}

/* Efeito de zoom leve na imagem ao passar o mouse */
.card:hover .card__img, .card:focus-visible .card__img {
transform: scale(1.05);
}

/* ---------- Rodapé ---------- */
.footer { max-width: var(--max); margin: 0 auto; padding: 56px 24px calc(40px + env(safe-area-inset-bottom, 0px)); text-align: center; }
.footer__signature { font-family: var(--font-script); font-size: 2.2rem; line-height: 1; color: var(--gold-soft); }
.footer__copy { margin-top: 14px; font-size: .8rem; letter-spacing: .02em; color: rgba(239, 235, 231, .55); }

/* ---------- Animação de entrada ---------- /
@keyframes reveal { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.js [data-reveal] { opacity: 0; }
/ A animação de reveal não conflita mais com o float pois a de float roda infinitamente após carregar */
.js [data-reveal].is-visible { animation: reveal .8s var(--ease) var(--delay, 0ms) forwards, float 6s ease-in-out 1s infinite; }
.js .card-item:nth-child(2).is-visible { animation: reveal .8s var(--ease) var(--delay, 0ms) forwards, float 6s ease-in-out -0.5s infinite; }
.js .card-item:nth-child(3).is-visible { animation: reveal .8s var(--ease) var(--delay, 0ms) forwards, float 6s ease-in-out -2s infinite; }
.js .card-item:nth-child(4).is-visible { animation: reveal .8s var(--ease) var(--delay, 0ms) forwards, float 6s ease-in-out -3.5s infinite; }

/* ---------- Telas pequenas ---------- */
@media (max-width: 480px) {
.hero { padding-top: 44px; }
.brand__icon { width: 44px; height: 49px; }
.brand__word { font-size: 1.8rem; }
.hero__text { font-size: 0.85rem; max-width: 90%; }
}

/* ---------- Telas maiores ---------- */
@media (min-width: 681px) {
.hero { padding-top: 72px; }
.cards { gap: 32px; padding-top: 48px; }
}

/* ---------- Acessibilidade: menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.js [data-reveal] { opacity: 1; }
}

.brand__image {
  width: 150px; 
  height: auto; 
  max-width: 100%; 
  display: block;
  /* Troquei margin-top por margin-bottom. 
     Se quiser colar mais no texto, use valores mais negativos (ex: -20px) */
  margin-bottom: 20px; 
  margin-top: -10px; 
}