/* D'tel Telecom — design system (fonte: Manual de Marca v1.0, 2026).
   Único lugar com valores visuais; o restante do site usa estas variáveis. */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Variable.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

:root {
    /* Cores */
    --dtel-azul: #001A44;
    --dtel-azul-medio: #193056;
    --dtel-verde: #68DE68;
    --dtel-verde-hover: #41CF41;
    --dtel-branco: #FFFFFF;
    --dtel-cinza-claro: #F3F5F8;
    --dtel-cinza-texto: #4A5568;

    /* Tipografia */
    --dtel-fonte: 'Inter', system-ui, sans-serif;
    --fs-h1: 40px;  --lh-h1: 1.05;
    --fs-h2: 32px;  --lh-h2: 1.1;
    --fs-h3: 24px;  --lh-h3: 1.2;
    --fs-lead: 18px; --lh-lead: 1.5;
    --fs-body: 16px; --lh-body: 1.6;
    --fs-btn: 15px;  --lh-btn: 1.2;

    /* Raios */
    --raio-sm: 12px;
    --raio-md: 24px;
    --dtel-raio-card: 32px;
    --dtel-raio-pilula: 999px;

    /* Espaçamento */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px;
    --sp-5: 40px; --sp-6: 64px; --sp-7: 96px;
    --container: 1200px;
    --btn-altura: 48px;
}

@media (min-width: 768px) {
    :root {
        --fs-h1: 64px; --fs-h2: 48px; --fs-h3: 32px;
        --fs-lead: 22px; --fs-body: 18px; --fs-btn: 16px;
    }
}

body {
    margin: 0;
    font-family: var(--dtel-fonte);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--dtel-cinza-texto);
    background: var(--dtel-branco);
}

h1, h2, h3 { color: var(--dtel-azul); margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
/* Assinatura tipográfica: palavra-chave em ExtraBold, resto em Light */
.titulo-assinatura { font-weight: 300; }
.titulo-assinatura strong { font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }

/* Botões: pílula, mínimo 48px. Nunca texto branco sobre verde. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--btn-altura); padding: 0 var(--sp-4);
    border-radius: var(--dtel-raio-pilula); border: 0;
    font: 600 var(--fs-btn)/var(--lh-btn) var(--dtel-fonte);
    text-decoration: none; cursor: pointer; transition: background .2s;
}
.btn-verde { background: var(--dtel-verde); color: var(--dtel-azul); }
.btn-verde:hover { background: var(--dtel-verde-hover); }
.btn-azul { background: var(--dtel-azul); color: var(--dtel-branco); }
.btn-azul:hover { background: var(--dtel-azul-medio); }

.card {
    background: var(--dtel-cinza-claro);
    border-radius: var(--dtel-raio-card);
    padding: var(--sp-5);
}
.secao-clara { background: var(--dtel-cinza-claro); }
.secao-azul { background: var(--dtel-azul); color: var(--dtel-branco); }
.secao-azul h1, .secao-azul h2, .secao-azul h3 { color: var(--dtel-branco); }

/* Tag com ponto */
.tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: 14px; color: var(--dtel-azul); }
.tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dtel-verde); }