/* ===== Tivel · site institucional =====
   Cores do logo: azul #30a4dc, lima #c6d92c, cinza #58585a */

:root {
    --azul: #30a4dc;
    --azul-escuro: #1b7fb0;
    --azul-profundo: #0f2e43;
    --lima: #c6d92c;
    --lima-escuro: #9fb01c;
    --cinza: #58585a;
    --texto: #1e2a33;
    --texto-suave: #5b6b76;
    --fundo: #ffffff;
    --fundo-claro: #f3f8fb;
    --borda: #dde8ef;
    --raio: 14px;
    --sombra: 0 10px 30px rgba(15, 46, 67, 0.08);
    --largura: 1180px;
    --fonte-titulo: "Poppins", system-ui, sans-serif;
    --fonte-texto: "Nunito Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-escuro); }

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    line-height: 1.2;
    color: var(--azul-profundo);
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }

p { margin: 0 0 1em; }

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

.pular {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--azul-profundo);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    z-index: 100;
}
.pular:focus { left: 8px; }

/* ===== Botões ===== */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.botao:hover { transform: translateY(-1px); }
.botao:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

.botao-primario { background: var(--azul); color: #fff; box-shadow: 0 8px 20px rgba(48, 164, 220, 0.35); }
.botao-primario:hover { background: var(--azul-escuro); }

.botao-secundario { background: transparent; color: var(--azul-profundo); border-color: var(--borda); }
.botao-secundario:hover { border-color: var(--azul); color: var(--azul-escuro); }

.botao-claro { background: #fff; color: var(--azul-profundo); }
.botao-claro:hover { background: var(--lima); }

.etiqueta {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--azul-escuro);
    background: rgba(48, 164, 220, 0.1);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.destaque {
    background: linear-gradient(90deg, var(--azul), var(--lima-escuro));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ===== Cabeçalho ===== */
.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.topo.rolou { border-color: var(--borda); box-shadow: 0 4px 18px rgba(15, 46, 67, 0.06); }

.topo-interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
}

.marca img { width: 150px; height: auto; }

.menu { display: flex; align-items: center; gap: 22px; }
.menu a {
    font-family: var(--fonte-titulo);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--azul-profundo);
    text-decoration: none;
}
.menu a:not(.botao):hover { color: var(--azul); }
.menu .botao-menu { padding: 10px 20px; color: #fff; }

.menu-botao {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 10px;
}
.menu-botao span {
    display: block;
    height: 2px;
    background: var(--azul-profundo);
    border-radius: 2px;
    margin: 5px 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-aberto .menu-botao span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-aberto .menu-botao span:nth-child(2) { opacity: 0; }
.menu-aberto .menu-botao span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Hero ===== */
.hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 90px;
    background:
        radial-gradient(900px 480px at 85% -10%, rgba(48, 164, 220, 0.16), transparent 60%),
        radial-gradient(700px 400px at 0% 110%, rgba(198, 217, 44, 0.16), transparent 60%);
}

.hero-grade {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 56px;
}

.hero-sub { font-size: 1.12rem; color: var(--texto-suave); max-width: 560px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* painel ilustrativo (CSS puro, sem dados reais) */
.hero-ilustracao { position: relative; }

.janela {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(15, 46, 67, 0.18);
    overflow: hidden;
    border: 1px solid var(--borda);
    transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}
.janela-barra { display: flex; gap: 6px; padding: 11px 14px; background: #eef4f8; }
.janela-barra span { width: 10px; height: 10px; border-radius: 50%; background: #cfdbe3; }
.janela-barra span:first-child { background: #f08a7e; }
.janela-barra span:nth-child(2) { background: #f3c86b; }
.janela-barra span:nth-child(3) { background: #8fd18b; }

.janela-corpo { display: grid; grid-template-columns: 54px 1fr; min-height: 320px; }

.painel-lateral {
    background: var(--azul-profundo);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
}
.painel-lateral i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); }
.painel-lateral i.ativo { background: var(--lima); }

.painel-conteudo { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.painel-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.painel-card { background: var(--fundo-claro); border-radius: 10px; padding: 10px 12px; }
.painel-card small { display: block; font-size: 0.68rem; color: var(--texto-suave); }
.painel-card b { display: block; font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--azul-profundo); }
.painel-card em { font-style: normal; font-size: 0.68rem; color: var(--texto-suave); }
.painel-card em.alta { color: #2e9b57; }

.painel-grafico {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 110px;
    padding: 10px 12px 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fbfd, #eef5f9);
}
.painel-grafico span { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--azul), #7cc7ea); }
.painel-grafico span:nth-child(3n) { background: linear-gradient(180deg, var(--lima-escuro), var(--lima)); }

.painel-lista p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px dashed var(--borda);
    color: var(--texto-suave);
}
.painel-lista p:last-child { border-bottom: 0; }
.painel-lista b { margin-left: auto; color: var(--azul-profundo); font-weight: 700; }
.painel-lista i { width: 8px; height: 8px; border-radius: 50%; }
.painel-lista i.verde { background: #2e9b57; }
.painel-lista i.azul { background: var(--azul); }
.painel-lista i.lima { background: var(--lima-escuro); }

.selo {
    position: absolute;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--sombra);
    padding: 9px 16px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--azul-profundo);
    border: 1px solid var(--borda);
}
.selo::before { content: "✓"; color: #2e9b57; margin-right: 6px; }
.selo-1 { left: -18px; bottom: -18px; }
.selo-2 { right: -10px; top: -14px; }

/* ===== Números ===== */
.numeros { background: var(--azul-profundo); color: #fff; padding: 34px 0; }
.numeros-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.numeros b { display: block; font-family: var(--fonte-titulo); font-size: 1.7rem; color: var(--lima); line-height: 1.2; }
.numeros span { color: #cfe3ee; font-size: 0.95rem; }

/* ===== Seções ===== */
.secao { padding: 96px 0; }
.secao-clara { background: var(--fundo-claro); }

.secao-cabecalho { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.secao-cabecalho p:not(.etiqueta) { color: var(--texto-suave); font-size: 1.08rem; }

.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.cartao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 30px;
    box-shadow: var(--sombra);
}
.cartao p { color: var(--texto-suave); margin: 0; }

.cartao-icone {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(48, 164, 220, 0.15), rgba(198, 217, 44, 0.2));
    margin-bottom: 18px;
}
.cartao-icone svg, .contato-icone svg { width: 26px; height: 26px; fill: var(--azul-escuro); }

/* módulos */
.grade-modulos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.modulo {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modulo:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.modulo h3 { display: flex; align-items: center; gap: 10px; }
.modulo ul { margin: 0; padding: 0; list-style: none; }
.modulo li {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    color: var(--texto-suave);
    margin-bottom: 8px;
}
.modulo li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--azul);
}
.modulo-marca { width: 12px; height: 26px; border-radius: 4px; flex: none; }
.modulo-marca.azul { background: var(--azul); }
.modulo-marca.lima { background: var(--lima); }

.modulo-chamada {
    background: linear-gradient(145deg, var(--azul-profundo), #16506f);
    border-color: transparent;
    color: #d8e8f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modulo-chamada h3 { color: #fff; }
.modulo-chamada .botao { align-self: flex-start; margin-top: 6px; }

/* automação de ponta a ponta */
.secao-escura {
    background:
        radial-gradient(700px 360px at 90% 0%, rgba(48, 164, 220, 0.25), transparent 60%),
        radial-gradient(600px 320px at 0% 100%, rgba(198, 217, 44, 0.14), transparent 60%),
        var(--azul-profundo);
    color: #cfe3ee;
}
.secao-escura h2 { color: #fff; }
.etiqueta-clara { color: var(--lima); background: rgba(198, 217, 44, 0.12); }

.fluxo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    counter-reset: etapa;
}
.fluxo li {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--raio);
    padding: 58px 22px 24px;
}
.fluxo li::before {
    counter-increment: etapa;
    content: counter(etapa);
    position: absolute;
    top: 18px;
    left: 22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--azul-profundo);
    background: var(--lima);
}
/* seta entre as etapas */
.fluxo li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 16px;
    height: 16px;
    border-top: 3px solid var(--azul);
    border-right: 3px solid var(--azul);
    transform: translateY(-50%) rotate(45deg);
}
.fluxo b { display: block; font-family: var(--fonte-titulo); font-size: 1.08rem; color: #fff; margin-bottom: 8px; }
.fluxo p { margin: 0; font-size: 0.95rem; order: 2; }
.fluxo b { order: 1; }
.fluxo-tags { order: 3; display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 16px; }
.fluxo-tags i {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #bfe3f5;
    background: rgba(48, 164, 220, 0.2);
    border-radius: 999px;
    padding: 2px 8px;
}
.fluxo-conclusao {
    margin: 36px auto 0;
    max-width: 720px;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.15rem;
    color: #fff;
}
.fluxo-conclusao::before { content: "✓ "; color: var(--lima); }

/* diferenciais */
.grade-diferenciais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.diferencial { border-left: 3px solid var(--lima); padding: 4px 0 4px 20px; }
.diferencial p { color: var(--texto-suave); margin: 0; }

.destaques-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.destaque-pessoal {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 26px 30px;
    border-radius: var(--raio);
    background: linear-gradient(120deg, rgba(48, 164, 220, 0.08), rgba(198, 217, 44, 0.12));
    border: 1px solid var(--borda);
}
.destaque-pessoal .cartao-icone { flex: none; margin: 0; background: #fff; }
.destaque-pessoal h3 { margin-bottom: 4px; }
.destaque-pessoal p { margin: 0; color: var(--texto-suave); }

/* integrações */
.grade-integracoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grupo-integracao { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--azul-profundo);
    background: var(--fundo-claro);
    border: 1px solid var(--borda);
    padding: 5px 12px;
    border-radius: 999px;
}

/* implantação */
.passos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: passo;
}
.passos li { position: relative; padding-top: 58px; }
.passos li::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: #fff;
    background: var(--azul);
    box-shadow: 0 0 0 6px rgba(48, 164, 220, 0.15);
}
.passos li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 56px;
    right: -12px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--borda) 0 8px, transparent 8px 14px);
}
.passos b { display: block; font-family: var(--fonte-titulo); font-size: 1.05rem; color: var(--azul-profundo); margin-bottom: 6px; }
.passos p { color: var(--texto-suave); margin: 0; }

/* clientes e depoimentos (ocultas até ter conteúdo) */
.logos-clientes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 40px;
    align-items: center;
}
.logos-clientes li { display: flex; align-items: center; justify-content: center; height: 64px; }
.logos-clientes img { max-height: 46px; max-width: 190px; width: auto; filter: grayscale(1); opacity: 0.75; transition: 0.2s; }
.logos-clientes img:hover { filter: none; opacity: 1; }

.depoimento { position: relative; margin: 0; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 44px 28px 26px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.depoimento::before { content: "\201C"; position: absolute; top: 6px; left: 24px; font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--lima); }
.depoimento blockquote { margin: 0 0 20px; color: var(--texto); flex: 1; }
.depoimento figcaption { border-top: 1px solid var(--borda); padding-top: 14px; }
.depoimento figcaption b { display: block; color: var(--azul-profundo); }
.depoimento figcaption span { color: var(--texto-suave); font-size: 0.92rem; }

/* chamada */
.chamada { background: linear-gradient(120deg, var(--azul), var(--azul-escuro)); color: #eaf6fc; padding: 56px 0; }
.chamada h2 { color: #fff; margin-bottom: 6px; }
.chamada p { margin: 0; }
.chamada-interna { display: flex; align-items: center; justify-content: space-between; gap: 30px; }

/* contato */
.contato-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.contato-grade > div:first-child p:not(.etiqueta) { color: var(--texto-suave); font-size: 1.08rem; }
.contato-opcoes { display: grid; gap: 14px; }
.contato-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    background: #fff;
    text-decoration: none;
    color: var(--texto);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.contato-item:hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateY(-2px); }
.contato-item b { display: block; font-family: var(--fonte-titulo); color: var(--azul-profundo); }
.contato-item small { color: var(--texto-suave); font-size: 0.95rem; }
.contato-icone {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(48, 164, 220, 0.12);
}

/* rodapé */
.rodape { background: var(--azul-profundo); color: #9fbacb; padding: 40px 0; font-size: 0.92rem; }
.rodape-interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rodape a { color: #d8e8f0; text-decoration: none; }
.rodape a:hover { color: var(--lima); }
.rodape p { margin: 0; }

/* entrada suave ao rolar (só com JS ativo e sem preferência por menos movimento) */
.js .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .revela { opacity: 1; transform: none; transition: none; }
    .botao, .modulo, .contato-item { transition: none; }
}

/* ===== Responsivo ===== */
@media (max-width: 1180px) {
    .menu { gap: 14px; }
    .menu a { font-size: 0.88rem; }
}

@media (max-width: 1100px) {
    .grade-modulos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .hero-grade { grid-template-columns: 1fr; gap: 48px; }
    .hero-ilustracao { max-width: 560px; margin: 0 auto; width: 100%; }
    .janela { transform: none; }
    .grade-3, .grade-integracoes { grid-template-columns: 1fr 1fr; }
    .grade-diferenciais { grid-template-columns: 1fr 1fr; }
    .destaques-extra { grid-template-columns: 1fr; }
    .passos { grid-template-columns: 1fr 1fr; }
    .fluxo { grid-template-columns: 1fr 1fr; }
    .fluxo li:nth-child(2)::after { display: none; }
    .passos li::after { display: none; }
    .numeros-grade { grid-template-columns: 1fr 1fr; }
    .contato-grade { grid-template-columns: 1fr; }

    .menu-botao { display: block; }
    .menu {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--borda);
        box-shadow: 0 12px 24px rgba(15, 46, 67, 0.08);
        padding: 8px 24px 20px;
        display: none;
    }
    .menu a { padding: 12px 0; border-bottom: 1px solid var(--borda); }
    .menu .botao-menu { margin-top: 14px; border-bottom: 0; }
    .menu-aberto .menu { display: flex; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .container { padding: 0 16px; }
    .hero { padding: 44px 0 64px; }
    .secao { padding: 68px 0; }
    .grade-3, .grade-integracoes, .grade-diferenciais, .grade-modulos, .passos { grid-template-columns: 1fr; }
    .logos-clientes { grid-template-columns: 1fr 1fr; gap: 24px; }
    .fluxo { grid-template-columns: 1fr; gap: 30px; }
    .destaque-pessoal { flex-direction: column; align-items: flex-start; padding: 22px; }
    .fluxo li:not(:last-child)::after { display: block; top: auto; bottom: -24px; right: 50%; transform: translateX(50%) rotate(135deg); }
    .logos-clientes img { max-width: 140px; max-height: 38px; }
    .painel-cards { grid-template-columns: 1fr 1fr; }
    .painel-cards .painel-card:last-child { display: none; }
    .selo-1 { left: 8px; bottom: -16px; }
    .selo-2 { right: 8px; }
    .chamada-interna { flex-direction: column; align-items: flex-start; }
    .rodape-interno { flex-direction: column; align-items: flex-start; }
    .hero-acoes .botao { width: 100%; }
}