/*
 * MaFe Sistemas — site institucional
 * Identidade: azul -> ciano -> verde da logomarca (2026).
 * CSS escrito à mão, sem build: sobe para a Hostinger como está.
 * Cores só por token (:root). Não espalhe hexadecimal pelas regras.
 */

:root {
    --azul-950: #04122b;
    --azul-900: #061a3d;
    --azul-800: #0a2a5e;
    --azul-700: #0b3f95;
    --azul-600: #0d5bd7;
    --azul-500: #0a84e0;
    --ciano-400: #1ab3e6;
    --verde-600: #1f9a3a;
    --verde-500: #3fb428;
    --verde-400: #6fd11f;

    --tinta: #0f1b33;
    --tinta-suave: #475569;
    --tinta-fraca: #64748b;
    --linha: #e2e8f0;
    --superficie: #ffffff;
    --superficie-alt: #f4f7fb;
    --whatsapp: #25d366;

    --gradiente: linear-gradient(115deg, var(--azul-600) 0%, var(--azul-500) 40%, var(--verde-500) 100%);
    --gradiente-texto: linear-gradient(100deg, var(--azul-600) 0%, var(--azul-500) 45%, var(--verde-500) 100%);

    --raio: 18px;
    --raio-sm: 12px;
    --sombra-sm: 0 1px 2px rgba(15, 27, 51, .06), 0 2px 8px rgba(15, 27, 51, .05);
    --sombra: 0 10px 30px -12px rgba(11, 63, 149, .25), 0 4px 12px rgba(15, 27, 51, .06);
    --sombra-lg: 0 30px 60px -20px rgba(11, 63, 149, .35);

    --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo: 'Plus Jakarta Sans', var(--fonte);
    --largura: 1200px;
    --nav-altura: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-altura); -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--superficie);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--azul-500); color: #fff; }
:focus-visible { outline: 3px solid var(--ciano-400); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 24px; } }

.icone { width: 20px; height: 20px; stroke-width: 2; flex-shrink: 0; }
.icone-sm { width: 16px; height: 16px; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
    font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primario { background: var(--gradiente); color: #fff; box-shadow: 0 10px 24px -10px rgba(13, 91, 215, .6); }
.btn-primario:hover { box-shadow: 0 16px 30px -10px rgba(13, 91, 215, .7); }
.btn-contorno { background: var(--superficie); color: var(--azul-700); border-color: var(--linha); }
.btn-contorno:hover { border-color: var(--azul-500); color: var(--azul-600); }
.btn-claro { background: #fff; color: var(--azul-800); }
.btn-whatsapp { background: var(--whatsapp); color: #06381b; }
.btn-whatsapp:hover { box-shadow: 0 14px 28px -12px rgba(37, 211, 102, .8); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-bloco { width: 100%; }

/* ---------- Navegação ---------- */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-altura);
    display: flex; align-items: center;
    transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.rolou { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 0 var(--linha), 0 8px 24px -16px rgba(15, 27, 51, .25); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo img { height: 42px; width: auto; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-links a.link { padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--tinta-suave); transition: color .2s, background-color .2s; }
.nav-links a.link:hover { color: var(--azul-600); background: var(--superficie-alt); }
.nav-acoes { display: none; align-items: center; gap: 8px; }
.nav-admin { display: inline-flex; padding: 9px; border-radius: 999px; color: var(--tinta-fraca); transition: color .2s, background-color .2s; }
.nav-admin:hover { color: var(--azul-600); background: var(--superficie-alt); }
.nav-toggle { display: inline-flex; padding: 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--tinta); cursor: pointer; }
.nav-mobile {
    position: fixed; top: var(--nav-altura); left: 0; right: 0; z-index: 49;
    background: #fff; border-top: 1px solid var(--linha); box-shadow: 0 20px 40px -20px rgba(15, 27, 51, .35);
    padding: 12px 16px 20px; display: none; max-height: calc(100vh - var(--nav-altura)); overflow-y: auto;
}
.nav-mobile.aberto { display: block; }
.nav-mobile a.link { display: block; padding: 12px 8px; border-bottom: 1px solid var(--superficie-alt); font-weight: 500; color: var(--tinta); }
.nav-mobile .nav-mobile-acoes { display: grid; gap: 10px; margin-top: 16px; }
@media (min-width: 1080px) {
    .nav-links, .nav-acoes { display: flex; }
    .nav-toggle, .nav-mobile, .nav-mobile.aberto { display: none; }
}

/* ---------- Seções ---------- */
.secao { padding: 80px 0; position: relative; }
@media (min-width: 900px) { .secao { padding: 112px 0; } }
.secao-alt { background: var(--superficie-alt); }
.cabecalho { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.cabecalho.esquerda { margin-left: 0; text-align: left; }
.sobretitulo {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--azul-600);
}
.sobretitulo::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--gradiente); }
.titulo-secao { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; color: var(--tinta); }
.subtitulo-secao { margin-top: 16px; font-size: clamp(16px, 1.6vw, 18px); color: var(--tinta-suave); }
.texto-gradiente { background: var(--gradiente-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--nav-altura) + 48px) 0 72px; overflow: hidden; background: linear-gradient(180deg, #f5f9ff 0%, #ffffff 70%); }
@media (min-width: 900px) { .hero { padding: calc(var(--nav-altura) + 80px) 0 110px; } }
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(13, 91, 215, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 91, 215, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.bolha { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: .55; }
.bolha-azul { width: 420px; height: 420px; background: rgba(10, 132, 224, .35); top: -120px; right: -80px; }
.bolha-verde { width: 360px; height: 360px; background: rgba(63, 180, 40, .28); bottom: -140px; left: -100px; }
.hero-grade { position: relative; display: grid; gap: 56px; align-items: center; }
@media (min-width: 980px) { .hero-grade { grid-template-columns: 1.1fr .9fr; } }
.selo {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
    background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm);
    font-size: 13.5px; font-weight: 600; color: var(--azul-700);
}
.selo-ponto { width: 22px; height: 22px; border-radius: 50%; background: var(--gradiente); display: grid; place-items: center; color: #fff; }
.hero h1 { margin-top: 22px; font-size: clamp(36px, 6vw, 62px); font-weight: 800; color: var(--tinta); }
.hero-descricao { margin-top: 22px; font-size: clamp(17px, 1.8vw, 19px); color: var(--tinta-suave); max-width: 580px; }
.hero-botoes { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479px) { .hero-botoes .btn { width: 100%; } }
.hero-fatos { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
.fato { padding: 14px; border-radius: var(--raio-sm); background: rgba(255, 255, 255, .8); border: 1px solid var(--linha); }
.fato strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.fato span { display: block; font-size: 13px; color: var(--tinta-fraca); line-height: 1.35; margin-top: 2px; }

.hero-vitrine { position: relative; max-width: 520px; width: 100%; margin: 0 auto; }
.hero-vitrine .anel {
    position: absolute; inset: 8% 8%; border-radius: 50%;
    background: conic-gradient(from 200deg, var(--azul-600), var(--ciano-400), var(--verde-500), var(--azul-600));
    filter: blur(50px); opacity: .28;
}
.vitrine-grade { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vitrine-item {
    border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra);
    overflow: hidden; aspect-ratio: 4 / 3; position: relative;
    transition: transform .35s ease, box-shadow .35s ease;
}
.vitrine-item:nth-child(even) { transform: translateY(28px); }
.vitrine-item:hover { box-shadow: var(--sombra-lg); }
.vitrine-item img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; }
.vitrine-marca {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 26%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: var(--sombra-lg);
    padding: 4px; border: 1px solid var(--linha);
}
.vitrine-marca img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }

/* ---------- Sobre / serviços ---------- */
.sobre-grade { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .sobre-grade { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.sobre-texto p + p { margin-top: 16px; }
.sobre-texto p { color: var(--tinta-suave); font-size: 17px; }
.pilares { margin-top: 32px; display: grid; gap: 14px; }
.pilar { display: flex; gap: 14px; align-items: flex-start; }
.pilar-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(13, 91, 215, .1), rgba(63, 180, 40, .12)); color: var(--azul-600); flex-shrink: 0; }
.pilar h3 { font-size: 16px; font-weight: 700; }
.pilar p { font-size: 15px; color: var(--tinta-suave); margin-top: 2px; }

.servicos { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .servicos { grid-template-columns: 1fr 1fr; } }
.servico {
    padding: 24px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servico:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: rgba(10, 132, 224, .35); }
.servico-icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--gradiente); color: #fff; margin-bottom: 16px; box-shadow: 0 8px 18px -8px rgba(13, 91, 215, .6); }
.servico h3 { font-size: 18px; font-weight: 700; }
.servico p { margin-top: 8px; font-size: 15px; color: var(--tinta-suave); }

/* ---------- Produtos ---------- */
.produtos { display: grid; gap: 24px; }
@media (min-width: 860px) { .produtos { grid-template-columns: 1fr 1fr; gap: 28px; } }
.produto {
    display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--linha);
    overflow: hidden; box-shadow: var(--sombra-sm); transition: transform .3s ease, box-shadow .3s ease;
}
.produto:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
.produto-logo { aspect-ratio: 16 / 7; position: relative; border-bottom: 1px solid var(--linha); overflow: hidden; }
.produto-logo img { position: absolute; inset: 18px 28px; width: calc(100% - 56px); height: calc(100% - 36px); object-fit: contain; transition: transform .5s ease; }
.produto-logo.preenche img { inset: 0; width: 100%; height: 100%; }
.produto-logo.preenche img { object-fit: cover; }
.produto-logo.quadrada img { inset: 8px 16px; width: calc(100% - 32px); height: calc(100% - 16px); }
.produto:hover .produto-logo img { transform: scale(1.04); }
.produto-corpo { padding: 26px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 640px) { .produto-corpo { padding: 30px; } }
.etiqueta {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: var(--azul-700); background: rgba(10, 132, 224, .09);
}
.produto h3 { margin-top: 14px; font-size: 26px; font-weight: 800; }
.produto-resumo { margin-top: 8px; font-weight: 600; color: var(--tinta); }
.produto-descricao { margin-top: 10px; color: var(--tinta-suave); font-size: 15.5px; }
.recursos { margin-top: 20px; display: grid; gap: 10px; }
.recursos li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinta); }
.recursos li .icone { color: var(--verde-500); margin-top: 2px; }
.produto-rodape { margin-top: auto; padding-top: 26px; }

/* Modelo de contratação no card do produto */
.contratacao { margin-top: 22px; padding: 14px 16px; border-radius: 14px; border: 1px dashed rgba(13, 91, 215, .35); background: rgba(13, 91, 215, .05); }
.contratacao strong { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--azul-700); }
.contratacao span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--tinta-suave); }
.contratacao-saas { border-color: rgba(63, 180, 40, .45); background: rgba(63, 180, 40, .07); }
.contratacao-saas strong { color: var(--verde-600); }

/* WhatsApp logo abaixo dos cards */
.whatsapp-linha { margin-top: 40px; display: flex; justify-content: center; }
.whatsapp-linha.esquerda { justify-content: flex-start; margin-top: 28px; }
.whatsapp-linha a {
    display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px; border-radius: 999px;
    background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.whatsapp-linha a:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(37, 211, 102, .8); border-color: var(--whatsapp); }
.whatsapp-linha-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--whatsapp); color: #fff; flex-shrink: 0; }
.whatsapp-linha-icone svg { width: 26px; height: 26px; }
.whatsapp-linha small { display: block; font-size: 13px; color: var(--tinta-fraca); line-height: 1.3; }
.whatsapp-linha strong { display: block; font-family: var(--fonte-titulo); font-size: 20px; color: var(--tinta); letter-spacing: -.01em; }
.whatsapp-linha.escuro a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .15); box-shadow: none; }
.whatsapp-linha.escuro small { color: #b5c3dc; }
.whatsapp-linha.escuro strong { color: #fff; }

/* ---------- Personalizados (seção escura) ---------- */
.secao-escura { background: radial-gradient(1200px 500px at 85% -10%, rgba(10, 132, 224, .25), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(63, 180, 40, .18), transparent 60%), var(--azul-900); color: #e7eefb; }
.secao-escura .titulo-secao { color: #fff; }
.secao-escura .subtitulo-secao { color: #b5c3dc; }
.secao-escura .sobretitulo { color: var(--verde-400); }
.personalizados { display: grid; gap: 24px; }
@media (min-width: 980px) { .personalizados { grid-template-columns: 1fr 1fr; } }
.personalizado {
    display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1); transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.personalizado:hover { transform: translateY(-5px); border-color: rgba(111, 209, 31, .45); background: rgba(255, 255, 255, .06); }
.personalizado-logo { aspect-ratio: 16 / 7; position: relative; overflow: hidden; }
.personalizado-logo img { position: absolute; inset: 18px 28px; width: calc(100% - 56px); height: calc(100% - 36px); object-fit: contain; }
.personalizado-corpo { padding: 26px; }
@media (min-width: 640px) { .personalizado-corpo { padding: 30px; } }
.personalizado .etiqueta { color: var(--verde-400); background: rgba(111, 209, 31, .12); }
.personalizado h3 { margin-top: 12px; font-size: 22px; font-weight: 800; color: #fff; }
.personalizado p { margin-top: 10px; font-size: 15px; color: #b5c3dc; }
.personalizado .recursos li { color: #dbe5f5; font-size: 14.5px; }
.personalizado .recursos li .icone { color: var(--verde-400); }
.chamada-sob-medida {
    margin-top: 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-content: space-between;
    padding: 28px; border-radius: 22px; background: linear-gradient(115deg, rgba(13, 91, 215, .35), rgba(63, 180, 40, .25)); border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 820px) { .chamada-sob-medida { flex-direction: row; align-items: center; padding: 32px 40px; } }
.chamada-sob-medida h3 { font-size: clamp(20px, 2.4vw, 26px); color: #fff; font-weight: 800; }
.chamada-sob-medida p { margin-top: 6px; color: #d3def1; }

/* ---------- Metodologia ---------- */
.passos { display: grid; gap: 20px; counter-reset: passo; }
@media (min-width: 640px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .passos { grid-template-columns: repeat(4, 1fr); } }
.passo { position: relative; padding: 28px 24px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); }
.passo-numero { font-family: var(--fonte-titulo); font-size: 44px; font-weight: 800; line-height: 1; }
.passo h3 { margin-top: 14px; font-size: 18px; font-weight: 700; }
.passo p { margin-top: 8px; font-size: 15px; color: var(--tinta-suave); }

/* ---------- Portfólio / parceiros ---------- */
.portfolio { display: grid; gap: 24px; }
@media (min-width: 640px) { .portfolio { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .portfolio { grid-template-columns: repeat(3, 1fr); } }
.projeto { display: flex; flex-direction: column; border-radius: var(--raio); overflow: hidden; background: #fff; border: 1px solid var(--linha); transition: transform .3s ease, box-shadow .3s ease; }
.projeto:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.projeto-imagem { aspect-ratio: 16 / 10; background: var(--superficie-alt); overflow: hidden; display: grid; place-items: center; color: var(--tinta-fraca); }
.projeto-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.projeto:hover .projeto-imagem img { transform: scale(1.06); }
.projeto-corpo { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.projeto h3 { font-size: 19px; font-weight: 700; }
.projeto-corpo > p { margin-top: 12px; font-size: 14.5px; color: var(--tinta-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.projeto-rodape { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--tinta-fraca); }
.projeto-rodape a { color: var(--azul-600); font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.parceiros { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; }
.parceiros img { height: 64px; width: auto; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.parceiros img:hover { filter: none; opacity: 1; }

/* ---------- Contato (sem formulário) ---------- */
.contato-faixa {
    position: relative; overflow: hidden; border-radius: 28px; padding: 40px 24px; color: #fff; background: var(--gradiente);
    box-shadow: var(--sombra-lg);
}
@media (min-width: 900px) { .contato-faixa { padding: 64px; } }
.contato-faixa::after { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .08); pointer-events: none; }
.contato-grade { position: relative; z-index: 1; display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .contato-grade { grid-template-columns: 1.2fr .8fr; } }
.contato-faixa h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.contato-faixa p.lead { margin-top: 14px; font-size: 18px; color: rgba(255, 255, 255, .88); max-width: 560px; }
.contato-faixa .hero-botoes { margin-top: 28px; }
.contato-canais { display: grid; gap: 12px; }
.canal { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); transition: background-color .2s; }
a.canal:hover { background: rgba(255, 255, 255, .2); }
.canal-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--azul-600); flex-shrink: 0; }
.canal small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .75); }
.canal strong { display: block; font-size: 15.5px; word-break: break-word; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-950); color: #a9b7d0; padding: 64px 0 28px; }
.rodape-grade { display: grid; gap: 40px; }
@media (min-width: 760px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.rodape-logo img { height: 46px; width: auto; }
.rodape p { font-size: 14.5px; margin-top: 16px; max-width: 340px; }
.rodape-titulo { margin: 0 0 14px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-family: var(--fonte-titulo); }
.rodape li + li { margin-top: 10px; }
.rodape a { font-size: 14.5px; transition: color .2s; }
.rodape a:hover { color: var(--verde-400); }
.rodape-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px; }

/* ---------- WhatsApp flutuante ---------- */
.whatsapp-flutuante {
    position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 60px; height: 60px; border-radius: 50%;
    display: grid; place-items: center; background: var(--whatsapp); color: #fff; box-shadow: 0 12px 28px -8px rgba(37, 211, 102, .7);
    transition: transform .25s ease;
}
@media (min-width: 640px) { .whatsapp-flutuante { right: 26px; bottom: 26px; width: 64px; height: 64px; } }
.whatsapp-flutuante:hover { transform: scale(1.08); }
.whatsapp-flutuante svg { width: 32px; height: 32px; }
.whatsapp-flutuante::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--whatsapp); z-index: -1; animation: pulso 2.4s ease-out infinite; }
.whatsapp-dica {
    position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap;
    padding: 9px 14px; border-radius: 10px; background: var(--tinta); color: #fff; font-size: 14px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: opacity .25s ease; box-shadow: var(--sombra);
}
.whatsapp-flutuante:hover .whatsapp-dica, .whatsapp-flutuante:focus-visible .whatsapp-dica { opacity: 1; }
@media (hover: none) { .whatsapp-dica { display: none; } }
@keyframes pulso { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- Página de suporte ---------- */
.hero-compacto { padding-bottom: 72px; }
.hero-compacto h1 { margin-top: 0; }
.suporte-grade { position: relative; display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .suporte-grade { grid-template-columns: .85fr 1.15fr; gap: 56px; } }
.suporte-passos { margin-top: 28px; display: grid; gap: 12px; }
.suporte-passos li { display: flex; align-items: center; gap: 12px; color: var(--tinta-suave); }
.suporte-passos li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gradiente); color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.suporte-cartao { padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-lg); display: grid; gap: 18px; }
@media (min-width: 640px) { .suporte-cartao { padding: 32px; } }
.suporte-cartao h2 { font-size: 22px; font-weight: 800; }
.campo { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-size: 14px; font-weight: 600; color: var(--tinta); padding: 0; margin-bottom: 6px; }
.campo abbr { color: #dc2626; text-decoration: none; }
.campo input, .campo select, .campo textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--tinta); background: var(--superficie-alt);
    border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; background: #fff; border-color: var(--azul-500); box-shadow: 0 0 0 4px rgba(10, 132, 224, .15); }
.campo-duplo { display: grid; gap: 18px; }
@media (min-width: 560px) { .campo-duplo { grid-template-columns: 1fr 1fr; } }
.campo-erro { color: #dc2626; font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.sistemas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sistema-opcao { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 2px solid var(--linha); cursor: pointer; transition: border-color .2s, box-shadow .2s; margin: 0 !important; }
.sistema-opcao:hover { border-color: rgba(10, 132, 224, .45); }
.sistema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.sistema-opcao:has(input:checked) { border-color: var(--azul-600); box-shadow: 0 0 0 4px rgba(13, 91, 215, .14); }
.sistema-opcao:has(input:focus-visible) { outline: 3px solid var(--ciano-400); outline-offset: 2px; }
.sistema-logo { position: relative; display: block; aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden; }
.sistema-logo img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.sistema-nome { text-align: center; font-size: 14px; font-weight: 700; }
.suporte-nota { font-size: 13px; color: var(--tinta-fraca); text-align: center; }
.btn-whatsapp .icone { width: 20px; height: 20px; }

/* ---------- Avisos (flash) ---------- */
.avisos { position: fixed; top: calc(var(--nav-altura) + 12px); right: 16px; left: 16px; z-index: 70; display: grid; gap: 8px; justify-items: end; }
.aviso { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; color: #fff; font-weight: 500; box-shadow: var(--sombra); max-width: 420px; }
.aviso-sucesso { background: var(--verde-600); }
.aviso-erro { background: #dc2626; }

/* ---------- Animação de entrada ---------- */
.revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .revelar { opacity: 1; transform: none; transition: none; }
    .whatsapp-flutuante::before { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}