/* ─────────────────────────────────────────────────────────────────────────
   Tema Arménio Moreira — armeniomoreira.com
   Réplica do estilo do site: minimalista PRETO sobre BRANCO, corpo em
   IBM Plex Sans, menu geométrico em MAIÚSCULAS espaçadas (o site usa a fonte
   "decalotype", que é comercial; aqui usa-se Montserrat, muito próxima), e o
   rodapé branco centrado (redes → © → ligações separadas por "·").
   Valores MEDIDOS no site (getComputedStyle), não adivinhados.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Montserrat:wght@500;600&display=swap');

:root {
    --am-tinta:  #111111;
    --am-cinza:  #6B6B6B;
    --am-linha:  #E6E6E6;
    --am-fundo:  #FFFFFF;
    --am-acento: #00A99D; /* teal do site — usado só nos hovers das ligações */
}

/* ── Base ── */
/* O núcleo põe um fundo cinzento (#F5F6FA); o site é branco puro. */
body {
    background: var(--am-fundo) !important;
    color: #1A1A1A;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
h1, h2, h3 {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    letter-spacing: -0.01em;
    color: var(--am-tinta);
}

/* ── Cabeçalho e menu ── */
header.bg-white { background: #FFFFFF !important; border-bottom-color: var(--am-linha) !important; }
/* Navegação: Montserrat MAIÚSCULA espaçada, a preto (como o menu do site). */
header nav a {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 600;
    color: #1A1A1A !important;
}
/* Item ativo: mantém o realce por fundo claro (o texto fica igual, a preto). */
header nav a.bg-brand-50 { background-color: #F3F3F3 !important; }
/* O botão cheio (Log In) tem fundo PRETO: o texto tem de voltar a BRANCO — senão a
   regra de cima (preto em todos os links do menu) deixava-o preto sobre preto. */
header nav a.bg-brand-500, header nav a.bg-brand-500:hover { color: #FFFFFF !important; }

/* ── Cor de marca → PRETO elegante (o site é preto/branco) ──
   Apanha os botões, os contadores e as ligações que usavam a cor de marca. */
.bg-brand-500 { background-color: #141414 !important; background-image: none !important; }
.hover\:bg-brand-600:hover { background-color: #000000 !important; }
.text-brand-600, .text-brand-500 { color: #141414 !important; }
.border-brand-500 { border-color: #141414 !important; }
.bg-brand-50 { background-color: #F3F3F3 !important; }
/* Botão do carrinho (usa slate-600 no núcleo) → preto */
.bg-slate-600 { background-color: #141414 !important; }
.hover\:bg-slate-700:hover { background-color: #000000 !important; }
/* Campos: foco a preto (em vez do azul do núcleo) */
input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus {
    border-color: #141414 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .08) !important;
}
input[type=checkbox], input[type=radio] { accent-color: #141414; }

/* Cartões brancos com filete discreto */
.bg-white.rounded-xl, .bg-white.rounded-2xl { border-color: var(--am-linha) !important; }

/* Rede de segurança da largura (ver layout) */
main > * { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   RODAPÉ — réplica de armeniomoreira.com: BRANCO, centrado.
   Redes sociais → linha de direitos → ligações separadas por "·".
   ───────────────────────────────────────────────────────────── */
.am-footer {
    background: #FFFFFF;
    border-top: 1px solid var(--am-linha);
    padding: 42px 20px 34px;
    text-align: center;
    margin-top: auto;
}
.am-footer__redes { display: flex; justify-content: center; gap: 24px; margin-bottom: 20px; }
.am-footer__redes a { color: #000; display: inline-flex; transition: opacity .15s; }
.am-footer__redes a:hover { opacity: .55; }

.am-footer__copy {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 14px; color: #000; margin-bottom: 12px;
}

.am-footer__links {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    font-family: 'IBM Plex Sans', sans-serif; font-size: 13px;
}
.am-footer__links li { display: flex; align-items: center; }
.am-footer__links li:not(:last-child)::after {
    content: '·'; margin: 0 10px; color: #B4B4B4;
}
.am-footer__links a { color: #000; font-weight: 500; }
.am-footer__links a:hover { color: var(--am-acento); }
