/* =========================================================
   DALANTEC — Portal de serviços
   Conceito: base neutra e confiável; cada produto tem sua
   cor (--cor), que "pinta" o card e a landing.
   Mobile-first.
   ========================================================= */

:root{
    --ink:        #0f1b2d;   /* texto principal  */
    --ink-suave:  #5b6b7f;   /* texto secundário */
    --linha:      #e6eaf0;   /* bordas           */
    --base:       #ffffff;   /* fundo branco     */
    --superficie: #f5f7fa;   /* fundo cinza claro*/
    --escuro:     #0e1a2b;   /* hero da home     */
    --cor:        #2563eb;   /* sobrescrita por produto */
    --cor-suave:  rgba(37,99,235,.12);
    --raio:       16px;
    --sombra:     0 6px 24px rgba(15,27,45,.08);
    --max:        1080px;
}

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

html{ scroll-behavior: smooth; }

body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--superficie);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

/* ---------- Topo ---------- */
.topo{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:16px 20px;
    background: var(--base);
    border-bottom:1px solid var(--linha);
    position: sticky; top:0; z-index:20;
}
.marca{
    display:flex; align-items:center; gap:9px;
    font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
}
.marca-ponto{
    width:11px; height:11px; border-radius:50%;
    background: var(--cor);
    box-shadow:0 0 0 4px var(--cor-suave);
}
.topo-whats, .topo-voltar{
    font-size:.9rem; font-weight:600; color: var(--ink-suave);
}
.topo-whats{
    background: var(--cor); color:#fff;
    padding:9px 16px; border-radius:999px;
}
.topo-voltar:hover, .topo-whats:hover{ opacity:.88; }

/* ---------- Hero da home ---------- */
.hero-home{
    background: var(--escuro);
    color:#fff;
    padding:56px 20px 64px;
    text-align:center;
}
.hero-eyebrow{
    text-transform:uppercase; letter-spacing:.14em;
    font-size:.72rem; font-weight:700; opacity:.7; margin-bottom:14px;
}
.hero-home h1{
    font-size: clamp(1.9rem, 6vw, 3rem);
    line-height:1.1; letter-spacing:-.03em; font-weight:800;
    max-width:760px; margin:0 auto;
}
.hero-home h1 strong{ color:#7eb0ff; }
.hero-sub{
    margin:18px auto 0; max-width:520px;
    color:#c4d0de; font-size:1.02rem;
}

/* ---------- Grade de cards ---------- */
.grade-wrap{ max-width:var(--max); margin:-32px auto 0; padding:0 16px 56px; }
.grade{
    display:grid; gap:16px;
    grid-template-columns: 1fr;
}
@media(min-width:600px){ .grade{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:920px){ .grade{ grid-template-columns: repeat(3,1fr); } }

.card{
    position:relative;
    background: var(--base);
    border:1px solid var(--linha);
    border-radius: var(--raio);
    padding:24px 22px 20px;
    box-shadow: var(--sombra);
    display:flex; flex-direction:column; gap:8px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow:hidden;
}
.card::before{
    content:""; position:absolute; inset:0 0 auto 0; height:4px;
    background: var(--cor);
}
.card:hover{
    transform: translateY(-4px);
    box-shadow:0 14px 32px rgba(15,27,45,.14);
    border-color: var(--cor);
}
.card-icone{
    width:52px; height:52px; border-radius:14px;
    display:grid; place-items:center; font-size:1.7rem;
    background: var(--cor-suave); margin-bottom:6px;
}
.card-cat{
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.1em; color: var(--cor);
}
.card-nome{ font-size:1.25rem; letter-spacing:-.02em; }
.card-tag{ color: var(--ink-suave); font-size:.94rem; flex:1; }
.card-link{
    margin-top:8px; font-weight:700; font-size:.92rem; color: var(--cor);
}
.card-selo{
    position:absolute; top:14px; right:14px;
    background: var(--cor); color:#fff;
    font-size:.64rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; padding:4px 9px; border-radius:999px;
}

/* ---------- Hero do serviço (landing) ---------- */
.hero-servico{
    text-align:center;
    padding:48px 20px 40px;
    background:
        linear-gradient(180deg, var(--cor-suave), transparent 70%),
        var(--base);
    border-bottom:1px solid var(--linha);
}
.hero-icone{
    display:inline-grid; place-items:center;
    width:72px; height:72px; border-radius:20px;
    background: var(--cor-suave); font-size:2.3rem; margin-bottom:14px;
}
.hero-cat{
    display:block; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.12em; color: var(--cor);
    margin-bottom:10px;
}
.hero-servico h1{
    font-size: clamp(1.7rem, 5.4vw, 2.6rem);
    line-height:1.12; letter-spacing:-.03em; font-weight:800;
    max-width:680px; margin:0 auto;
}
.hero-tag{
    margin:16px auto 0; max-width:520px;
    color: var(--ink-suave); font-size:1.05rem;
}
.hero-acoes{
    display:flex; flex-wrap:wrap; gap:12px;
    justify-content:center; margin-top:26px;
}

/* ---------- Botões ---------- */
.btn{
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; font-size:1rem;
    padding:14px 26px; border-radius:999px;
    transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primario{
    background: var(--cor); color:#fff;
    box-shadow:0 8px 20px var(--cor-suave);
}
.btn-linha{
    background: var(--base); color: var(--ink);
    border:1.5px solid var(--linha);
}
.btn-linha:hover{ border-color: var(--cor); color: var(--cor); }

/* ---------- Conteúdo da landing ---------- */
.conteudo{
    max-width:760px; margin:0 auto; padding:40px 20px 56px;
    display:flex; flex-direction:column; gap:20px;
}
.bloco{
    background: var(--base);
    border:1px solid var(--linha); border-radius: var(--raio);
    padding:26px 24px;
}
.bloco-destaque{
    background: var(--cor-suave);
    border-color: transparent;
}
.bloco-titulo{
    font-size:1.15rem; letter-spacing:-.02em; margin-bottom:14px;
}
.bloco-texto{ color: var(--ink-suave); font-size:1.02rem; }

.recursos{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.recursos li{
    display:flex; align-items:flex-start; gap:11px;
    font-size:1.02rem;
}
.check{
    flex:none; width:24px; height:24px; border-radius:50%;
    display:grid; place-items:center; font-size:.8rem; font-weight:800;
    background: var(--cor-suave); color: var(--cor);
}

.cta-final{
    text-align:center; padding:12px 0 0;
}
.cta-final h2{
    font-size:1.4rem; letter-spacing:-.02em; margin-bottom:6px;
}

/* ---------- 404 ---------- */
.erro{
    min-height:70vh; display:grid; place-content:center; text-align:center;
    gap:14px; padding:40px 20px;
}
.erro h1{ font-size:1.6rem; }
.erro p{ color: var(--ink-suave); }

/* ---------- Rodapé ---------- */
.rodape{
    background: var(--escuro); color:#c4d0de;
    text-align:center; padding:40px 20px 32px;
    display:flex; flex-direction:column; gap:6px; align-items:center;
}
.rodape-marca{ color:#fff; font-weight:800; font-size:1.1rem; }
.rodape a{ color:#7eb0ff; font-weight:600; }
.rodape small{ opacity:.6; margin-top:10px; }

/* ---------- Acessibilidade ---------- */
a:focus-visible, .btn:focus-visible{
    outline:3px solid var(--cor); outline-offset:3px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
}