@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --preto: #111111;
    --branco: #f5f2ea;
    --cinza: #c9c9c2;
    --cinza-claro: #eceae3;
    --acento: #7a1f1f;
    --acento-claro: #9c3131;
    --sombra: 6px 6px 0 var(--preto);
    --sombra-pequena: 4px 4px 0 var(--preto);
    --raio: 4px;
}

* { box-sizing: border-box; }

/* Reserva sempre o espaço da barra de rolagem — sem isso, páginas/abas com conteúdo mais
   curto (sem scroll) ficam alguns pixels mais largas que páginas com scroll, e o layout
   inteiro parece "pular"/redimensionar ao trocar de tela. */
html { overflow-y: auto; scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--preto);
    background-color: var(--cinza-claro);
    background-image:
        repeating-conic-gradient(var(--cinza) 0% 25%, var(--cinza-claro) 0% 50%);
    background-size: 48px 48px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 { font-family: 'Bitter', Georgia, serif; letter-spacing: -0.01em; }

a { color: inherit; }

/* ---------- topo ---------- */
.topo {
    background: var(--branco);
    border-bottom: 3px solid var(--preto);
}
.topo-conteudo {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bitter', serif;
    font-weight: 800;
    font-size: 1.3rem;
    text-decoration: none;
}
.marca-quadro {
    width: 22px;
    height: 22px;
    border: 2px solid var(--preto);
    background-image:
        linear-gradient(45deg, var(--preto) 25%, transparent 25%, transparent 75%, var(--preto) 75%),
        linear-gradient(45deg, var(--preto) 25%, transparent 25%, transparent 75%, var(--preto) 75%);
    background-size: 11px 11px;
    background-position: 0 0, 5.5px 5.5px;
}
.topo-nav { display: flex; gap: 10px; }

/* ---------- botões ---------- */
.botao {
    display: inline-block;
    padding: 10px 18px;
    border: 2.5px solid var(--preto);
    border-radius: var(--raio);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: var(--branco);
    color: var(--preto);
    box-shadow: var(--sombra-pequena);
    transition: transform .12s ease, box-shadow .12s ease;
}
.botao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.botao:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--preto); }
.botao-primario { background: var(--preto); color: var(--branco); }
.botao-ghost { background: transparent; }
.botao-bloco { display: block; width: 100%; text-align: center; }

/* ---------- hero ---------- */
.hero { max-width: 1080px; margin: 0 auto; padding: 56px 24px 24px; text-align: center; }
.hero-selo {
    display: inline-block;
    padding: 4px 14px;
    border: 2px solid var(--preto);
    border-radius: 999px;
    background: var(--branco);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.hero h1 { font-size: 2.6rem; margin: 0 0 8px; }
.hero-sub { color: #444; font-size: 1.05rem; margin: 0; }

/* ---------- grade de cards ---------- */
.secao-grade { max-width: 1080px; margin: 0 auto; padding: 24px 24px 8px; }
.secao-grade-cabecalho h2 { margin: 0 0 4px; font-size: 1.4rem; }
.secao-grade-cabecalho p { margin: 0; color: #555; font-size: .92rem; }

.grade-cards {
    margin: 20px 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 28px;
}
.carregando { grid-column: 1 / -1; text-align: center; color: #555; }

/* ---------- conheça nossos clientes ---------- */
.grade-clientes {
    margin: 20px 0 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}
.cartao-cliente {
    background: var(--branco);
    border: 2px solid var(--preto);
    border-radius: var(--raio);
    box-shadow: var(--sombra-pequena);
    padding: 18px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--preto);
    transition: transform .12s ease, box-shadow .12s ease;
}
a.cartao-cliente:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--preto); }
.cartao-cliente img { max-width: 100%; max-height: 44px; object-fit: contain; }
.cartao-cliente-nome { font-weight: 700; text-align: center; }

.cartao-minisite {
    background: var(--branco);
    border: 3px solid var(--preto);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 24px;
    text-decoration: none;
    color: var(--preto);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.cartao-minisite:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--preto); }
.cartao-minisite:active { transform: translate(0, 0); box-shadow: 3px 3px 0 var(--preto); }
.cartao-minisite-icone {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    border: 2px solid var(--preto);
    border-radius: var(--raio);
    background: var(--cor-card, var(--cinza-claro));
}
.cartao-minisite h3 { margin: 0; font-size: 1.25rem; }
.cartao-minisite p { margin: 0; color: #444; font-size: .92rem; flex-grow: 1; }
.cartao-minisite-tag {
    align-self: flex-start;
    font-size: .78rem;
    font-weight: 600;
    color: var(--acento);
}

/* ---------- páginas de autenticação ---------- */
.pagina-auth {
    max-width: 460px;
    margin: 0 auto;
    padding: 56px 24px 80px;
}
.cartao-auth {
    background: var(--branco);
    border: 3px solid var(--preto);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px;
}
.cartao-auth h1 { margin: 0 0 20px; font-size: 1.7rem; }
.form-auth { display: flex; flex-direction: column; gap: 14px; }
.form-auth[hidden] { display: none; }
.form-auth label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; font-weight: 600; }
.form-auth input[type="text"],
.form-auth input[type="email"],
.form-auth input[type="password"],
.form-auth select,
.form-auth textarea {
    padding: 10px 12px;
    border: 2px solid var(--preto);
    border-radius: var(--raio);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    resize: vertical;
}
.form-auth input:focus, .form-auth select:focus, .form-auth textarea:focus { outline: 3px solid var(--acento-claro); outline-offset: 1px; }

/* ---------- alternar visibilidade de senha (injetado por senha-toggle.js) ---------- */
.campo-senha { position: relative; display: inline-flex; }
.campo-senha input[type="password"],
.campo-senha input[type="text"] { flex: 1 1 auto; min-width: 0; padding-right: 38px; }
.botao-alternar-senha {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}
.botao-alternar-senha:hover, .botao-alternar-senha:focus-visible { opacity: 1; }
.botao-alternar-senha svg { width: 18px; height: 18px; }

.checkbox-linha { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 500; }
.dica-form { margin: -6px 0 0; font-size: .82rem; color: #555; }
.erro-form { margin: 0; padding: 10px 12px; background: #fbe4e4; border: 2px solid var(--acento); border-radius: var(--raio); color: var(--acento); font-size: .88rem; }
.sucesso-form { margin: 0; padding: 10px 12px; background: #e6f2e6; border: 2px solid #2f6b2f; border-radius: var(--raio); color: #2f6b2f; font-size: .88rem; }
.links-auth { display: flex; justify-content: space-between; margin-top: 18px; font-size: .88rem; }
.links-auth a { text-decoration: underline; }

/* ---------- utilitários (evitam style="" inline, exigido pelo CSP) ---------- */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.quebra-palavra { word-break: break-all; }

/* ---------- CTA: solicite seu site/app ---------- */
.cta-solicitacao { max-width: 1080px; margin: 0 auto; padding: 0 24px 56px; }
.cta-conteudo {
    background: var(--preto);
    color: var(--branco);
    border: 3px solid var(--preto);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 36px 32px;
    text-align: center;
}
.cta-conteudo h2 { margin: 0 0 10px; font-size: 1.6rem; }
.cta-conteudo p { margin: 0 auto 20px; max-width: 560px; color: #d8d5cc; }
.cta-conteudo .botao-primario { background: var(--branco); color: var(--preto); }

/* ---------- modal (público) ---------- */
.modal {
    position: fixed; inset: 0; background: rgba(17,17,17,.55);
    display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-caixa {
    background: var(--branco); border: 3px solid var(--preto); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 28px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
}
.modal-caixa h2 { margin-top: 0; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 3px solid var(--preto); background: var(--branco); margin-top: auto; }
.rodape-conteudo {
    max-width: 1080px;
    margin: 0 auto;
    padding: 20px 24px;
    font-size: .85rem;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rodape-bloco, .rodape-redes { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rodape-item, .rodape-redes a { color: #555; text-decoration: none; }
.rodape-item:hover, .rodape-redes a:hover { color: var(--acento); text-decoration: underline; }
.rodape-item-icone { display: inline-flex; align-items: center; gap: 6px; }
.rodape-icone { flex-shrink: 0; }
.rodape-redes a { font-weight: 600; }
.rodape-copy { color: #888; }
.rodape-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rodape-legal a { color: #888; text-decoration: underline; }
.rodape-legal a:hover { color: var(--acento); }

/* ---------- páginas de texto legal (termos, privacidade) ---------- */
.pagina-legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 64px; }
.pagina-legal-cartao {
    background: var(--branco);
    border: 3px solid var(--preto);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 32px 40px;
}
.pagina-legal h1 { font-size: 2rem; margin: 0 0 6px; }
.pagina-legal .legal-atualizado { color: #666; font-size: .88rem; margin: 0 0 32px; }
.pagina-legal h2 { font-size: 1.2rem; margin: 32px 0 10px; }
.pagina-legal p, .pagina-legal li { color: #333; line-height: 1.6; }
.pagina-legal ul { padding-left: 20px; margin: 8px 0; }
.pagina-legal a { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
    .hero h1 { font-size: 2rem; }
    .marca { font-size: 1.1rem; gap: 6px; }
    .topo-nav { gap: 6px; }
    .botao { padding: 8px 12px; font-size: .9rem; }
    /* auto-fill com minmax(240px, 1fr) já cai pra 1 coluna sozinho na maioria das
       telas, mas perto de 600px (240*2 + gap de 28 = 508px de conteúdo) ainda cabem
       2 colunas apertadas — força 1 coluna explicitamente em qualquer tela de celular. */
    .grade-cards { grid-template-columns: 1fr; }
}