/* ============================================================================
   Anthares 44 — FOOTER (componente novo · fonte única da verdade)
   ----------------------------------------------------------------------------
   Card branco centralizado que flutua sobre a faixa escura da marca
   (var(--brand-dark)). Conceito clean/minimalista/premium: cantos bem
   arredondados, sombra suave, muito respiro interno, tipografia Inter.

   Layout:
     • Desktop  → 4 colunas (marca + Product + Resources + Company)
     • Tablet   → 2 colunas
     • Mobile   → tudo empilhado

   Prefixo exclusivo .a44f-* → não colide com nenhum estilo antigo.
   Injetado por assets/js/footer.js no placeholder <div id="anthares-footer">.
   ========================================================================== */

/* ------------------------------- WRAPPER -------------------------------- */
.a44f {
    position: relative;
    isolation: isolate;                       /* contexto de empilhamento → watermark z-index:-1 fica atrás do card */
    overflow: hidden;                         /* recorta o "44" gigante nas bordas da seção */
    width: 100%;
    margin-top: 70px;                         /* desce o rodapé ~70px (espaço acima) */
    background: var(--page-background);        /* faixa contínua com a seção acima */
    padding: clamp(88px, 11vh, 150px) clamp(20px, 4vw, 56px);   /* muito espaço em branco ao redor */
    padding-bottom: calc(clamp(88px, 11vh, 150px) + 190px);     /* +190px abaixo → espaço para o "Anthares 44" aparecer completo ao final da página */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   MARCA D'ÁGUA "Anthares 44" — gigante, ATRÁS do card (z-index NEGATIVO), cinza
   muito claro (~4% opacity). Ancorada na BORDA INFERIOR da seção e empurrada para
   baixo → ~74% da palavra fica escondida (clipada por overflow:hidden) e só os
   TOPOS das letras aparecem abaixo do card, exatamente como na referência.
   Nunca sobrepõe links/textos (fica atrás do card branco opaco).
   --------------------------------------------------------------------------- */
.a44f-watermark {
    position: absolute;
    left: 50%;
    bottom: 0;                                /* ancorada na parte inferior da seção */
    top: auto;
    transform: translate(-50%, -34%);         /* palavra COMPLETA visível + folga generosa abaixo (não fica colada na borda da janela) */
    z-index: -1;                              /* NEGATIVO → atrás de tudo */
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800;                         /* ExtraBold / Black */
    font-size: clamp(84px, 17vw, 320px);      /* ocupa praticamente toda a largura da página */
    line-height: 0.8;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: #0e0f12;                           /* escuro em 4% → resulta em cinza muito claro (~#F2F2F2) */
    opacity: 0.045;                           /* entre 3% e 5% */
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ------------------- CARD BRANCO ÚNICO (grande, 30px) ------------------- */
.a44f-card {
    position: relative;
    z-index: 1;                               /* ACIMA do watermark (branco opaco → o esconde) */
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;                           /* centralizado horizontalmente */
    background: #ffffff;
    border: 1px solid #ededed;                /* borda cinza extremamente suave */
    border-radius: 30px;                      /* cantos grandes (28–32px) */
    padding: clamp(44px, 4.8vw, 76px);        /* muito espaço interno */
    box-shadow:
        0 34px 74px -36px rgba(17, 24, 39, .10),
        0 8px 20px -12px rgba(17, 24, 39, .04);   /* sombra premium muito discreta */
    box-sizing: border-box;
}

/* ------------------------------- GRID TOPO ------------------------------ */
.a44f-grid {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr;   /* marca (larga) + 4 categorias */
    gap: 52px 44px;
    align-items: start;
}

/* --------------------------- COLUNA DA MARCA ---------------------------- */
.a44f-brand { max-width: 320px; }

.a44f-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
/* Mesmo mark oficial (anthares-logo.png) da navbar: PNG transparente, tinta
   escura, proporção natural. Sem caixa/fundo/border-radius. */
.a44f-logo-img {
    font-size: 1.2rem;
    width: auto;                        /* proporção natural — nunca achatada */
    height: 0.95em;
    align-self: center;                 /* centrado com o texto "Anthares" */
    display: block;
    flex-shrink: 0;
}
.a44f-logo-text {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #0e0f12;
    line-height: 1;
}
.a44f-logo-text strong { font-weight: 700; }

.a44f-desc {
    margin: 22px 0 0;
    color: #6b7280;
    font-size: 14.5px;
    line-height: 1.7;
    font-weight: 400;
}

/* -------------------------- COLUNAS DE LINKS ---------------------------- */
.a44f-col-title {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0e0f12;
}
.a44f-col ul { list-style: none; margin: 0; padding: 0; }
.a44f-col li + li { margin-top: 14px; }
.a44f-col a {
    font-size: 14.5px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: none;
    transition: color .22s ease;
}
.a44f-col a:hover { color: #0e0f12; }

/* ------------------------------- DIVISÓRIA ------------------------------ */
.a44f-divider {
    height: 1px;
    background: #ececec;                       /* linha horizontal discreta */
    margin: 56px 0 0;
}

/* ------------------------------ BARRA INFERIOR -------------------------- */
.a44f-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    flex-wrap: wrap;
    padding-top: 26px;
}
.a44f-copy {
    margin: 0;
    font-size: 13.5px;
    color: #9aa0a6;
    font-weight: 400;
}
.a44f-legal {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
.a44f-legal a {
    font-size: 13.5px;
    font-weight: 400;
    color: #6b7280;
    text-decoration: none;
    transition: color .22s ease;
}
.a44f-legal a:hover { color: #0e0f12; }

/* =========================== ANIMAÇÃO (reveal) ========================== */
/* Estado inicial oculto apenas quando o JS marca .a44f-ready → degrada sem JS
   e respeita prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .a44f.a44f-ready .a44f-anim {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                    transform .7s cubic-bezier(.22, .61, .36, 1);
    }
    .a44f.a44f-ready .a44f-grid .a44f-anim:nth-child(2) { transition-delay: .06s; }
    .a44f.a44f-ready .a44f-grid .a44f-anim:nth-child(3) { transition-delay: .12s; }
    .a44f.a44f-ready .a44f-grid .a44f-anim:nth-child(4) { transition-delay: .18s; }
    .a44f.a44f-ready .a44f-grid .a44f-anim:nth-child(5) { transition-delay: .24s; }
    .a44f.a44f-ready .a44f-bottom { transition-delay: .12s; }

    .a44f.is-in .a44f-anim { opacity: 1; transform: none; }
}

/* =============================== RESPONSIVO ============================= */
/* Intermediário → marca na 1ª linha, 4 colunas de links abaixo (4 tracks). */
@media (max-width: 1100px) {
    .a44f-card { padding: clamp(36px, 4.4vw, 56px); }
    .a44f-grid { grid-template-columns: repeat(4, 1fr); gap: 44px 40px; }
    .a44f-brand { grid-column: 1 / -1; max-width: 520px; }
}

/* Tablet → 2 colunas de links (marca ocupa a linha inteira). */
@media (max-width: 720px) {
    .a44f-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .a44f-brand { max-width: 460px; }
}

/* Mobile → tudo empilhado, perfeitamente alinhado. */
@media (max-width: 520px) {
    .a44f { padding: clamp(56px, 8vh, 80px) 14px; }
    .a44f-card { padding: clamp(26px, 6vw, 36px); border-radius: 28px; }
    .a44f-grid { grid-template-columns: 1fr; gap: 34px; }
    .a44f-brand { max-width: 100%; }
    .a44f-divider { margin-top: 40px; }
    .a44f-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
    .a44f-legal { gap: 20px; }
    .a44f-watermark { font-size: clamp(60px, 18vw, 130px); }   /* mantém a palavra atravessando a largura */
}