:root{
    --azul-950:#020914;
    --azul-900:#061120;
    --azul-850:#071426;
    --azul-800:#092653;
    --azul-700:#0b4b8f;
    --azul-500:#159cff;
    --azul-400:#39b6ff;
    --branco:#ffffff;
    --cinza-50:#f7f9fc;
    --cinza-100:#eef3f8;
    --cinza-300:#c9d5e2;
    --cinza-500:#6e7d8d;
    --cinza-700:#354657;
    --texto:#0b2547;
    --verde:#25d366;
    --sombra:0 18px 50px rgba(3,20,42,.10);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--azul-900);
    color:#fff;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

a{
    color:inherit;
}

.container{
    width:min(1180px, 86%);
    margin:0 auto;
}

/* TOPO */

.topo{
    min-height:82px;
    width:100%;
    padding:0 6%;
    display:flex;
    align-items:center;
    gap:28px;
    background:rgba(3,14,29,.96);
    border-bottom:1px solid rgba(255,255,255,.07);
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(16px);
}

.marca{
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    min-width:max-content;
}

.marca-simbolo{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:2px solid var(--azul-500);
    border-radius:15px 4px 15px 4px;
    color:#fff;
    font-size:20px;
    font-weight:800;
    box-shadow:inset 0 0 18px rgba(21,156,255,.18);
}

.marca-texto{
    display:flex;
    flex-direction:column;
    line-height:1.05;
}

.marca-texto strong{
    font-size:22px;
    letter-spacing:.04em;
    color:#fff;
}

.marca-texto small{
    margin-top:5px;
    color:#8fa7c1;
    font-size:11px;
    letter-spacing:.07em;
}

.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-left:auto;
}

.menu a{
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    color:#f5f9ff;
    transition:.25s;
}

.menu a:hover{
    color:var(--azul-400);
}

.menu-toggle{
    display:none;
    margin-left:auto;
    border:0;
    background:transparent;
    color:white;
    font-size:28px;
    cursor:pointer;
}

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    padding:0 26px;
    border:0;
    border-radius:10px;
    text-decoration:none;
    font-weight:800;
    cursor:pointer;
    transition:transform .25s, box-shadow .25s, background .25s;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-topo{
    background:linear-gradient(135deg,var(--azul-500),#0c73dc);
    color:white;
    box-shadow:0 10px 26px rgba(21,156,255,.22);
}

/* HERO */

.hero{
    width:100%;
    padding:0;
    margin:0;
    background:var(--azul-950);
}

.hero-imagem{
    width:100%;
    overflow:hidden;
}

.hero-imagem img{
    display:block;
    width:100%;
    height:auto;
}

/* SEÇÕES */

.secao-clara{
    background:white;
    color:var(--texto);
}

.secao-escura{
    background:
        radial-gradient(circle at 85% 20%, rgba(21,156,255,.16), transparent 28%),
        linear-gradient(135deg,#041020,#071a33);
    color:white;
}

.secao-azul{
    background:linear-gradient(135deg,#06152b,#0a315d);
    color:white;
}

.sobre,
.servicos,
.processo,
.diferenciais,
.segmentos,
.sst,
.clientes,
.contato{
    padding:96px 0;
}

.kicker{
    display:inline-block;
    margin-bottom:12px;
    color:#087dd8;
    text-transform:uppercase;
    letter-spacing:.13em;
    font-size:12px;
    font-weight:900;
}

.kicker-claro{
    color:var(--azul-400);
}

h1,
h2{
    letter-spacing:-.035em;
}

h1{
    font-size:clamp(34px,4.5vw,58px);
    line-height:1.05;
    margin-bottom:24px;
}

h2{
    font-size:clamp(30px,4vw,46px);
    line-height:1.08;
    margin-bottom:18px;
}

h3{
    line-height:1.2;
}

p{
    line-height:1.75;
}

.cabecalho-secao{
    max-width:780px;
    margin-bottom:52px;
}

.centralizado{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.cabecalho-secao p{
    color:var(--cinza-500);
    font-size:17px;
}

.secao-escura .cabecalho-secao p,
.sst p{
    color:#b9c9dc;
}

/* SOBRE */

.duas-colunas{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:64px;
    align-items:center;
}

.sobre p{
    color:#526272;
    font-size:17px;
    margin-bottom:15px;
}

.mini-beneficios{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
    margin-top:32px;
}

.mini-beneficios div{
    padding:18px;
    border:1px solid #e2eaf3;
    background:#fbfdff;
    border-radius:14px;
}

.mini-beneficios strong,
.mini-beneficios span{
    display:block;
}

.mini-beneficios strong{
    color:#086fc3;
    margin-bottom:4px;
}

.mini-beneficios span{
    color:#627284;
    font-size:14px;
}

.painel-institucional{
    background:
        radial-gradient(circle at 80% 10%, rgba(45,174,255,.22), transparent 28%),
        linear-gradient(145deg,#071426,#0c2c55);
    border-radius:26px;
    padding:34px;
    box-shadow:var(--sombra);
}

.painel-destaque{
    display:flex;
    gap:20px;
    align-items:center;
    padding-bottom:26px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.painel-destaque > span{
    min-width:88px;
    height:88px;
    display:grid;
    place-items:center;
    font-size:32px;
    font-weight:900;
    color:white;
    border:2px solid var(--azul-500);
    border-radius:25px 6px 25px 6px;
}

.painel-destaque strong{
    display:block;
    font-size:22px;
    margin-bottom:8px;
}

.painel-destaque p{
    color:#aebed0;
    font-size:14px;
    margin:0;
}

.painel-lista{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:13px;
    margin-top:25px;
}

.painel-lista div{
    color:#dfe9f4;
    font-size:14px;
}

.painel-lista span{
    color:var(--azul-400);
    margin-right:6px;
}

/* SERVIÇOS */

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

.servico-card{
    min-height:350px;
    padding:34px;
    border-radius:20px;
    background:linear-gradient(145deg,rgba(17,48,88,.95),rgba(6,24,47,.95));
    border:1px solid rgba(54,170,255,.18);
    box-shadow:0 18px 48px rgba(0,0,0,.18);
    transition:.3s;
}

.servico-card:hover{
    transform:translateY(-8px);
    border-color:rgba(57,182,255,.85);
}

.icone-servico{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin-bottom:26px;
    border-radius:15px;
    background:#0a6fc7;
    font-size:26px;
}

.servico-card h3{
    font-size:24px;
    margin-bottom:14px;
}

.servico-card p{
    color:#c3d1df;
}

.servico-card ul{
    list-style:none;
    margin-top:20px;
}

.servico-card li{
    margin-top:11px;
    color:#e9f2fb;
    font-size:14px;
}

.servico-card li::before{
    content:"✓";
    color:var(--azul-400);
    margin-right:9px;
    font-weight:bold;
}

/* PROCESSO */

.timeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    position:relative;
}

.timeline::before{
    content:"";
    position:absolute;
    height:2px;
    background:#dce7f2;
    left:8%;
    right:8%;
    top:59px;
}

.etapa{
    position:relative;
    z-index:1;
    text-align:center;
    padding:15px 10px;
}

.numero{
    display:block;
    margin-bottom:10px;
    color:#087dd8;
    font-size:13px;
    font-weight:900;
}

.icone-etapa{
    width:68px;
    height:68px;
    display:grid;
    place-items:center;
    margin:0 auto 20px;
    border-radius:50%;
    background:white;
    border:3px solid #159cff;
    box-shadow:0 0 0 8px #f2f7fc;
    font-size:25px;
}

.etapa h3{
    color:#0b2d55;
    margin-bottom:10px;
}

.etapa p{
    color:#607082;
    font-size:14px;
}

/* BENEFÍCIOS */

.grid-beneficios{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:70px;
    align-items:center;
}

.texto-claro{
    color:#bdd0e4;
}

.beneficios-lista{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.beneficios-lista div{
    display:flex;
    gap:12px;
    padding:20px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
}

.beneficios-lista span{
    color:var(--azul-400);
    font-weight:900;
}

.beneficios-lista p{
    line-height:1.45;
}

/* SEGMENTOS */

.segmentos-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

.segmento{
    padding:28px 14px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    background:#f7faff;
    border:1px solid #e2ebf4;
    border-radius:16px;
    transition:.25s;
}

.segmento:hover{
    transform:translateY(-5px);
    border-color:#42aef7;
}

.segmento span{
    font-size:35px;
}

.segmento strong{
    font-size:14px;
}

/* SST */

.sst-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.sst-grid div{
    padding:22px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
}

/* CLIENTES */

.clientes{
    position:relative;
    overflow:hidden;
}

.clientes::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    right:-180px;
    top:-190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(21,156,255,.10), rgba(21,156,255,0) 70%);
    pointer-events:none;
}

.clientes .container{
    position:relative;
    z-index:1;
}

.logos-clientes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin-top:34px;
}

.cliente-logo{
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:26px;
    background:#fbfdff;
    border:1px solid #e2eaf3;
    border-radius:18px;
    box-shadow:0 12px 32px rgba(3,20,42,.08);
    transition:transform .25s, border-color .25s, box-shadow .25s, background .25s;
}

.cliente-logo:hover{
    transform:translateY(-5px);
    border-color:rgba(21,156,255,.48);
    background:#fff;
    box-shadow:0 18px 42px rgba(3,20,42,.12);
}

.cliente-logo img{
    display:block;
    width:100%;
    max-width:250px;
    max-height:92px;
    object-fit:contain;
}

/* CTA */

.cta{
    padding:70px 0;
    background:linear-gradient(135deg,#031020,#07366d);
}

.cta-box{
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:center;
}

.cta-box h2{
    max-width:720px;
}

.cta-box p{
    max-width:760px;
    color:#bacce0;
}

.btn-whatsapp{
    min-width:220px;
    background:var(--verde);
    color:white;
}

/* CONTATO */

.contato-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:48px;
}

.contato p{
    color:#5c6b7c;
}

form{
    margin-top:30px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

input,
select,
textarea{
    width:100%;
    border:1px solid #d8e2ec;
    background:#fbfdff;
    color:#17314f;
    padding:15px 16px;
    border-radius:10px;
    outline:none;
    font:inherit;
}

input:focus,
select:focus,
textarea:focus{
    border-color:#159cff;
    box-shadow:0 0 0 3px rgba(21,156,255,.12);
}

select,
textarea{
    margin-top:14px;
}

textarea{
    min-height:140px;
    resize:vertical;
}

.btn-form{
    width:100%;
    margin-top:14px;
    background:#0d86e8;
    color:white;
}

.contato-card{
    align-self:start;
    background:#061a35;
    color:white;
    padding:34px;
    border-radius:22px;
    box-shadow:var(--sombra);
}

.marca-contato{
    margin-bottom:30px;
}

.contato-card h3{
    margin-bottom:24px;
    font-size:24px;
}

.contato-card p{
    margin-top:20px;
    color:#bfcfe0;
}

.contato-card a{
    color:white;
    text-decoration:none;
}

/* RODAPÉ */

.rodape{
    background:#020913;
    color:white;
    padding:58px 0 0;
}

.rodape-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:44px;
}

.rodape p{
    margin-top:18px;
    max-width:260px;
    color:#899caf;
    line-height:1.6;
}

.rodape h4{
    margin-bottom:16px;
}

.rodape a,
.rodape span{
    display:block;
    color:#a8b8c8;
    text-decoration:none;
    margin-top:10px;
    font-size:14px;
}

.rodape a:hover{
    color:#3cb6ff;
}

.copyright{
    margin-top:50px;
    padding:22px 6%;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
    color:#73879c;
    font-size:13px;
}

/* WHATSAPP */

.whatsapp-flutuante{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1500;
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--verde);
    color:white;
    text-decoration:none;
    font-size:15px;
    font-weight:900;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
    border:4px solid rgba(255,255,255,.75);
    transition:.25s;
}

.whatsapp-flutuante:hover{
    transform:scale(1.07);
}

/* RESPONSIVO */

@media(max-width:1100px){
    .btn-topo{
        display:none;
    }

    .menu{
        gap:15px;
    }

    .menu a{
        font-size:13px;
    }
}

@media(max-width:900px){
    .topo{
        min-height:76px;
        padding:12px 5%;
    }

    .menu-toggle{
        display:block;
    }

    .menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:22px 5%;
        flex-direction:column;
        align-items:flex-start;
        background:#051326;
        border-top:1px solid rgba(255,255,255,.08);
        box-shadow:0 18px 30px rgba(0,0,0,.25);
    }

    .menu.aberto{
        display:flex;
    }

    .duas-colunas,
    .grid-beneficios,
    .contato-grid{
        grid-template-columns:1fr;
    }

    .cards-servicos{
        grid-template-columns:1fr;
    }

    .timeline{
        grid-template-columns:1fr;
    }

    .timeline::before{
        display:none;
    }

    .etapa{
        max-width:520px;
        margin:auto;
    }

    .segmentos-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .logos-clientes{
        grid-template-columns:repeat(2,1fr);
    }

    .cta-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .rodape-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .container{
        width:min(90%,1180px);
    }

    .marca-texto strong{
        font-size:18px;
    }

    .marca-simbolo{
        width:42px;
        height:42px;
        font-size:17px;
    }

    .sobre,
    .servicos,
    .processo,
    .diferenciais,
    .segmentos,
    .sst,
    .clientes,
    .contato{
        padding:70px 0;
    }

    .mini-beneficios,
    .painel-lista,
    .beneficios-lista,
    .sst-grid,
    .form-grid,
    .segmentos-grid,
    .logos-clientes,
    .rodape-grid{
        grid-template-columns:1fr;
    }

    .cliente-logo{
        min-height:128px;
        padding:22px;
    }

    .cliente-logo img{
        max-width:230px;
        max-height:82px;
    }

    .hero-imagem img{
        width:100%;
        height:auto;
    }

    .painel-institucional{
        padding:24px;
    }

    .painel-destaque{
        align-items:flex-start;
    }

    .painel-destaque > span{
        min-width:64px;
        height:64px;
        font-size:23px;
    }

    .whatsapp-flutuante{
        width:56px;
        height:56px;
        right:16px;
        bottom:16px;
    }
}


/* =========================================================
   IMAGENS INTEGRADAS AO SITE
========================================================= */

.imagem-institucional{
    position:relative;
    border-radius:24px;
    overflow:hidden;
    min-height:420px;
    box-shadow:var(--sombra);
    background:#dfe8f2;
}

.imagem-institucional img{
    width:100%;
    height:100%;
    min-height:420px;
    display:block;
    object-fit:cover;
}

.imagem-legenda{
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    padding:18px 20px;
    border-radius:14px;
    color:white;
    background:rgba(3,18,38,.88);
    backdrop-filter:blur(10px);
    box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.imagem-legenda strong,
.imagem-legenda span{
    display:block;
}

.imagem-legenda strong{
    font-size:18px;
    margin-bottom:5px;
}

.imagem-legenda span{
    color:#c8d7e6;
    font-size:14px;
}

.cards-servicos{
    align-items:stretch;
}

.servico-card{
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.servico-imagem{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    border-bottom:1px solid rgba(57,182,255,.18);
}

.servico-conteudo{
    padding:30px;
    flex:1;
}

.servico-conteudo .icone-servico{
    margin-top:-58px;
    position:relative;
    z-index:2;
    border:4px solid #09203e;
    box-shadow:0 9px 24px rgba(0,0,0,.25);
}

.processo-visual{
    margin-top:58px;
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:34px;
    align-items:center;
    border:1px solid #e0e9f2;
    background:#f7faff;
    border-radius:20px;
    overflow:hidden;
}

.processo-visual img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.processo-visual > div{
    padding:28px 36px 28px 0;
}

.processo-visual h3{
    font-size:28px;
    color:#0b2d55;
    margin-bottom:10px;
}

.processo-visual p{
    color:#607082;
}

.diferenciais-intro{
    min-width:0;
}

.diferenciais-imagem{
    width:100%;
    height:280px;
    margin-top:28px;
    display:block;
    object-fit:cover;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 44px rgba(0,0,0,.24);
}

.apoio-operacional{
    margin-top:42px;
    display:grid;
    grid-template-columns:.6fr 1.4fr;
    align-items:center;
    gap:32px;
    padding:24px;
    border-radius:18px;
    background:#f8fbff;
    border:1px solid #e1eaf3;
}

.apoio-operacional img{
    width:100%;
    height:190px;
    object-fit:cover;
    border-radius:14px;
    display:block;
}

.apoio-operacional h3{
    color:#0b2d55;
    font-size:26px;
    margin-bottom:8px;
}

.apoio-operacional p{
    color:#607082;
}

.sst-imagem{
    margin-bottom:20px;
    overflow:hidden;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
}

.sst-imagem img{
    width:100%;
    height:250px;
    display:block;
    object-fit:cover;
}

.cta-box{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    align-items:center;
    gap:40px;
}

.cta-imagem{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 16px 38px rgba(0,0,0,.28);
}

.cta-imagem img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.cta-conteudo .btn{
    margin-top:24px;
}

/* Ajustes mobile das imagens */
@media(max-width:900px){
    .processo-visual,
    .apoio-operacional,
    .cta-box{
        grid-template-columns:1fr;
    }

    .processo-visual > div{
        padding:0 28px 28px;
    }

    .processo-visual img,
    .apoio-operacional img,
    .cta-imagem img,
    .sst-imagem img{
        height:auto;
    }

    .imagem-institucional,
    .imagem-institucional img{
        min-height:340px;
    }
}

@media(max-width:600px){
    .servico-imagem{
        height:200px;
    }

    .imagem-institucional,
    .imagem-institucional img{
        min-height:300px;
    }

    .imagem-legenda{
        left:14px;
        right:14px;
        bottom:14px;
    }

    .apoio-operacional{
        padding:16px;
    }
}
