/*
 * Site do sisGP. As cores e a fonte são as do sistema (Nunito Sans, o azul do degradê da faixa do topo), com tema
 * claro e escuro: o tema vem do aparelho, o botão do alto troca e a escolha fica no navegador (js/site.js põe
 * data-tema no <html>). As fontes vêm da pasta comum dos sites (/comum/fontes).
 */

@font-face{ font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url("/comum/fontes/NunitoSans-Regular.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 600; font-display: swap; src: url("/comum/fontes/NunitoSans-SemiBold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url("/comum/fontes/NunitoSans-Bold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 800; font-display: swap; src: url("/comum/fontes/NunitoSans-ExtraBold.ttf") format("truetype"); }
@font-face{ font-family: "Nunito Sans"; font-weight: 900; font-display: swap; src: url("/comum/fontes/NunitoSans-Black.ttf") format("truetype"); }

:root{
    --primaria: #0467EC;
    --primaria-forte: #0357C8;
    --sobre-primaria: #FFFFFF;
    --fundo: #FAFCFE;
    --superficie: #F1F6FD;
    --superficie-alta: #E4EEFB;
    --cartao: #FFFFFF;
    --texto: #142233;
    --suave: #56667A;
    --linha: #D3DDEA;
    --verde: #0A8A3A;
    --laranja: #B26A00;
    --vermelho: #C62828;
    /* a faixa escura (abertura, rede, chamada final) é escura nos dois temas */
    --noite: #06162B;
    --noite-2: #0B2545;
    --noite-texto: #E8F0FB;
    --noite-suave: #A9BCD6;
    --noite-linha: rgba(255, 255, 255, 0.12);
    --brilho: #4FB3FF;
    --sombra: 0 10px 30px rgba(20, 34, 51, 0.10);
    --sombra-forte: 0 30px 80px rgba(3, 30, 70, 0.30);
    --raio: 18px;
    --coluna: 1200px;
    color-scheme: light;
}

:root[data-tema="escuro"]{
    --primaria: #6FB8FF;
    --primaria-forte: #4FA3F7;
    --sobre-primaria: #04203F;
    --fundo: #0C1117;
    --superficie: #141B24;
    --superficie-alta: #1C2532;
    --cartao: #121821;
    --texto: #E3E9F1;
    --suave: #9DAABB;
    --linha: #2A3442;
    --verde: #4CC36F;
    --laranja: #E8A64C;
    --vermelho: #FF7070;
    --noite: #050C16;
    --noite-2: #0A1A30;
    --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
    --sombra-forte: 0 30px 80px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

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

html{ scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body{
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    overflow-x: hidden;
}

img, svg{ max-width: 100%; }
img{ height: auto; display: block; }
a{ color: var(--primaria); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1, h2, h3, h4, p, ul{ margin: 0; }
h1, h2, h3, h4{ line-height: 1.1; font-weight: 900; letter-spacing: -0.5px; }
ul{ padding: 0; list-style: none; }
.bi{ line-height: 1; }
:focus-visible{ outline: 3px solid var(--brilho); outline-offset: 3px; border-radius: 6px; }

.miolo{ width: 100%; max-width: var(--coluna); margin: 0 auto; padding: 0 24px; }
.visivel-so-leitor{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- botões ---------- */

.botao{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 24px; border-radius: 999px; border: 0;
    font: inherit; font-weight: 800; font-size: 16px; line-height: 1.2;
    cursor: pointer; text-decoration: none !important; white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.botao:hover{ transform: translateY(-1px); }
.botao-cheio{ background: linear-gradient(135deg, #1E8BFF, #0357C8); color: #fff; box-shadow: 0 10px 24px rgba(4, 103, 236, 0.35); }
.botao-cheio:hover{ box-shadow: 0 14px 30px rgba(4, 103, 236, 0.45); }
.botao-zap{ background: #1FAF52; color: #fff; box-shadow: 0 10px 24px rgba(31, 175, 82, 0.30); }
.botao-vidro{ background: rgba(255, 255, 255, 0.10); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(6px); }
.botao-vidro:hover{ background: rgba(255, 255, 255, 0.18); }
.botao-linha{ background: transparent; color: var(--primaria); border: 1.5px solid var(--linha); }
.botao-pequeno{ padding: 10px 18px; font-size: 15px; }

/* ---------- topo ---------- */

/* o topo é escuro nos dois temas: ele fica por cima da faixa escura da abertura */
.topo{
    position: sticky; top: 0; z-index: 50; color: var(--noite-texto);
    background: rgba(6, 22, 43, 0.82);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--noite-linha);
}
.topo.rolou{ background: rgba(6, 22, 43, 0.94); }
.topo .miolo{ display: flex; align-items: center; gap: 28px; height: 72px; }

.marca{ display: inline-flex; align-items: center; gap: 10px; color: inherit; font-weight: 900; font-size: 22px; letter-spacing: -0.4px; text-decoration: none !important; }
.marca img{ width: 36px; height: 36px; border-radius: 10px; background: #fff; padding: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.marca b{ color: var(--brilho); }
.gaveta .marca{ color: var(--texto); }
.gaveta .marca b{ color: var(--primaria); }

.menu{ display: flex; align-items: center; gap: 4px; margin-left: 8px; flex: 1; }
.menu > li{ position: relative; }
.menu > li > a, .menu > li > button{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px; border: 0; background: none;
    color: var(--noite-texto); font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none !important;
}
.menu > li > a:hover, .menu > li > button:hover, .menu > li > a[aria-current="page"]{ background: rgba(255, 255, 255, 0.10); }
.topo .botao-icone{ background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.topo .botao-icone:hover{ background: rgba(255, 255, 255, 0.16); }
.menu .bi-chevron-down{ font-size: 12px; transition: transform .2s; }
.menu button[aria-expanded="true"] .bi-chevron-down{ transform: rotate(180deg); }

.mega{
    position: absolute; top: calc(100% + 10px); left: -16px; width: 640px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px;
    background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-forte);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s ease;
}
.mega.aberto{ opacity: 1; visibility: visible; transform: none; }
.mega a{ display: flex; gap: 14px; padding: 12px; border-radius: 12px; color: var(--texto); text-decoration: none !important; }
.mega a:hover{ background: var(--superficie); }
.mega .icone{ flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-alta); color: var(--primaria); font-size: 19px; }
.mega strong{ display: block; font-weight: 800; font-size: 15.5px; }
.mega small{ display: block; color: var(--suave); font-size: 13.5px; font-weight: 600; line-height: 1.4; }

.topo-acoes{ display: flex; align-items: center; gap: 8px; margin-left: auto; }
.botao-icone{
    width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao);
    color: var(--texto); display: grid; place-items: center; font-size: 18px; cursor: pointer;
}
.botao-icone:hover{ background: var(--superficie); }
.so-celular{ display: none !important; }

/* o tema mostra o ícone do que vai virar */
:root[data-tema="escuro"] .tema .bi-moon-stars, :root:not([data-tema="escuro"]) .tema .bi-sun{ display: none; }

@media (max-width: 1080px){
    .menu{ display: none; }
    .so-celular{ display: grid !important; }
    .topo-acoes .botao-cheio{ display: none; }
}

.gaveta{
    position: fixed; inset: 0; z-index: 60; background: rgba(6, 22, 43, 0.55); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: all .2s ease;
}
.gaveta.aberta{ opacity: 1; visibility: visible; }
.gaveta-painel{
    position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); overflow-y: auto;
    background: var(--fundo); padding: 20px; transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column; gap: 6px;
}
.gaveta.aberta .gaveta-painel{ transform: none; }
.gaveta-cab{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gaveta-painel h4{ font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--suave); margin: 14px 4px 4px; font-weight: 800; }
.gaveta-painel a:not(.botao){ display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 12px; color: var(--texto); font-weight: 700; text-decoration: none !important; }
.gaveta-painel a:not(.botao):hover{ background: var(--superficie); }
.gaveta-painel a .bi{ color: var(--primaria); font-size: 18px; width: 22px; }
.gaveta-painel .botao{ margin-top: 16px; }

/* ---------- abertura (faixa escura do alto) ---------- */

.abertura{
    position: relative; overflow: hidden; color: var(--noite-texto);
    background:
        radial-gradient(900px 500px at 85% -10%, rgba(30, 139, 255, 0.45), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(3, 87, 200, 0.55), transparent 60%),
        linear-gradient(180deg, var(--noite-2), var(--noite));
}
.abertura::before{
    /* a grade de pontos, que lembra o mapa da rede */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.abertura .miolo{ position: relative; }
.abertura a:not(.botao){ color: #9fd2ff; }

.selo{
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 14px; font-weight: 800; color: #CFE6FF; letter-spacing: 0.2px;
}
.selo i{ color: var(--brilho); }
.selo-claro{ background: var(--superficie-alta); border-color: transparent; color: var(--primaria); }
.selo-claro i{ color: var(--primaria); }

.capa{ display: grid; grid-template-columns: 1.02fr 1fr; gap: 48px; align-items: center; padding-top: 88px; padding-bottom: 110px; }
.capa h1{ font-size: clamp(40px, 5.6vw, 68px); margin: 20px 0 22px; letter-spacing: -1.5px; }
.capa h1 em{ font-style: normal; background: linear-gradient(90deg, #7CC4FF, #4FB3FF 40%, #A7E0FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.capa .lead{ font-size: clamp(18px, 1.6vw, 20.5px); color: var(--noite-suave); max-width: 560px; font-weight: 600; }
.capa-acoes{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.capa-notas{ display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--noite-suave); font-size: 15px; }
.capa-notas span{ display: inline-flex; align-items: center; gap: 8px; }
.capa-notas i{ color: #5CE08A; }

/* a tela do sistema numa moldura de navegador, com os cartões que flutuam em volta */
.vitrine{ position: relative; perspective: 1600px; }
.janela{
    border-radius: 14px; overflow: hidden; background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--sombra-forte), 0 0 0 8px rgba(255, 255, 255, 0.04);
}
.janela-barra{ height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #E9EEF5; }
.janela-barra i{ width: 10px; height: 10px; border-radius: 50%; background: #F45B57; }
.janela-barra i:nth-child(2){ background: #F6BC2F; }
.janela-barra i:nth-child(3){ background: #2CC840; }
:root[data-tema="escuro"] .janela-barra{ background: #1C2532; }
.vitrine .janela{ transform: rotateY(-9deg) rotateX(4deg); transform-origin: left center; }

.celular{
    width: 190px; border-radius: 30px; padding: 8px; background: #0B1220;
    box-shadow: var(--sombra-forte), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.celular img{ border-radius: 23px; }
.vitrine .celular{ position: absolute; right: -14px; bottom: -64px; transform: rotate(3deg); }

.flutua{
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.96); color: #142233; box-shadow: var(--sombra-forte); font-size: 14px; font-weight: 700; line-height: 1.3;
    animation: boia 6s ease-in-out infinite;
}
.flutua .bolha{ width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: #fff; flex: none; }
.flutua small{ display: block; color: #56667A; font-weight: 600; font-size: 12.5px; }
.flutua-pix{ left: -34px; bottom: 36px; }
.flutua-pix .bolha{ background: #0A8A3A; }
.flutua-nota{ left: 34%; top: -26px; animation-delay: -3s; }
.flutua-nota .bolha{ background: #0467EC; }
@keyframes boia{ 50%{ transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .flutua{ animation: none; } html{ scroll-behavior: auto; } }

@media (max-width: 980px){
    .capa{ grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 120px; }
    .vitrine{ margin: 0 8px; }
    .vitrine .janela{ transform: none; }
    .vitrine .celular{ width: 130px; right: -6px; bottom: -80px; border-radius: 22px; padding: 6px; }
    .vitrine .celular img{ border-radius: 17px; }
    .flutua-pix{ left: -6px; bottom: -36px; }
    .flutua-nota{ display: none; }
}

/* a faixa de tecnologias logo abaixo da abertura */
.faixa-tec{ border-bottom: 1px solid var(--linha); background: var(--cartao); }
.faixa-tec .miolo{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; padding: 22px 24px; }
.faixa-tec p{ color: var(--suave); font-size: 14.5px; font-weight: 700; }
.faixa-tec span{ display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--texto); font-size: 15px; }
.faixa-tec span i{ color: var(--primaria); }

/* ---------- seções ---------- */

.secao{ padding: 104px 0; }
.secao-cinza{ background: var(--superficie); }
.cabeca{ max-width: 760px; margin-bottom: 52px; }
.cabeca-centro{ margin-left: auto; margin-right: auto; text-align: center; }
.chapeu{ display: inline-block; font-size: 13.5px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: var(--primaria); margin-bottom: 14px; }
.cabeca h2{ font-size: clamp(31px, 3.8vw, 46px); letter-spacing: -1px; }
.cabeca p{ margin-top: 18px; font-size: 19px; color: var(--suave); }
@media (max-width: 720px){ .secao{ padding: 72px 0; } .cabeca{ margin-bottom: 36px; } }

/* a rotina do provedor, em oito passos */
.trilha{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: passo; }
.passo{
    position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--raio);
    background: var(--cartao); border: 1px solid var(--linha); color: var(--texto); text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.passo:hover{ transform: translateY(-4px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--primaria) 45%, var(--linha)); }
.passo::before{ counter-increment: passo; content: counter(passo, decimal-leading-zero); position: absolute; top: 20px; right: 22px; font-weight: 900; font-size: 15px; color: var(--linha); }
.passo .icone{ width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, #1E8BFF, #0357C8); }
.passo h3{ font-size: 19px; margin-top: 6px; }
.passo p{ color: var(--suave); font-size: 15.5px; line-height: 1.5; }
.passo .seta{ margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 800; color: var(--primaria); display: inline-flex; gap: 6px; align-items: center; }
@media (max-width: 1080px){ .trilha{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .trilha{ grid-template-columns: 1fr; } }

/* o mosaico de destaques */
.mosaico{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.peca{
    position: relative; overflow: hidden; border-radius: 22px; padding: 30px; background: var(--cartao); border: 1px solid var(--linha);
    display: flex; flex-direction: column; gap: 12px;
}
.peca h3{ font-size: 23px; }
.peca p{ color: var(--suave); font-size: 16px; }
.peca .icone{ width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--superficie-alta); color: var(--primaria); font-size: 21px; }
.peca-larga{ grid-column: span 4; }
.peca-media{ grid-column: span 3; }
.peca-curta{ grid-column: span 2; }
.peca-imagem{ margin: 10px -30px -30px; border-top: 1px solid var(--linha); }
.peca-imagem img{ width: 100%; }
.peca-azul{ background: linear-gradient(150deg, #1E8BFF, #0347A8); color: #fff; border: 0; }
.peca-azul p{ color: rgba(255, 255, 255, 0.82); }
.peca-azul .icone{ background: rgba(255, 255, 255, 0.16); color: #fff; }
.peca-escura{ background: var(--noite-2); color: var(--noite-texto); border-color: var(--noite-linha); }
.peca-escura p{ color: var(--noite-suave); }
.peca-escura .icone{ background: rgba(79, 179, 255, 0.15); color: var(--brilho); }
.peca .marcador{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.marcador span{ font-size: 13px; font-weight: 800; padding: 6px 11px; border-radius: 999px; background: var(--superficie-alta); color: var(--primaria); }
.peca-azul .marcador span, .peca-escura .marcador span{ background: rgba(255, 255, 255, 0.12); color: #fff; }
@media (max-width: 980px){ .mosaico{ grid-template-columns: 1fr 1fr; } .peca-larga, .peca-media{ grid-column: span 2; } .peca-curta{ grid-column: span 1; } }
@media (max-width: 600px){ .mosaico{ grid-template-columns: 1fr; } .peca-larga, .peca-media, .peca-curta{ grid-column: span 1; } }

/* a seção escura da rede, com o terminal */
.escuro{ background: radial-gradient(800px 400px at 100% 0, rgba(30, 139, 255, 0.25), transparent 60%), var(--noite); color: var(--noite-texto); }
.escuro .cabeca p, .escuro .suave{ color: var(--noite-suave); }
.escuro .chapeu{ color: var(--brilho); }
.dupla{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 980px){ .dupla{ grid-template-columns: 1fr; gap: 40px; } }

.lista-check{ display: grid; gap: 16px; margin-top: 8px; }
.lista-check li{ display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.lista-check li > i{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--superficie-alta); color: var(--primaria); margin-top: 1px; }
.escuro .lista-check li > i{ background: rgba(79, 179, 255, 0.14); color: var(--brilho); }
.lista-check strong{ display: block; font-weight: 800; font-size: 17px; }
.lista-check span{ color: var(--suave); font-size: 15.5px; }
.escuro .lista-check span{ color: var(--noite-suave); }

.terminal{
    border-radius: 16px; overflow: hidden; background: #070F1C; border: 1px solid var(--noite-linha);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 400;
}
.terminal-barra{ display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #0D1A2E; color: #8DA2C0; font-size: 13px; font-family: "Nunito Sans", sans-serif; font-weight: 700; }
.terminal-barra i{ width: 10px; height: 10px; border-radius: 50%; background: #F45B57; }
.terminal-barra i:nth-child(2){ background: #F6BC2F; }
.terminal-barra i:nth-child(3){ background: #2CC840; margin-right: 8px; }
.terminal-barra .gravando{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #FF8A8A; }
.terminal-barra .gravando::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF5A5A; animation: pisca 1.4s infinite; }
@keyframes pisca{ 50%{ opacity: .25; } }
.terminal pre{ margin: 0; padding: 20px 22px 24px; color: #CFE0F5; line-height: 1.75; white-space: pre; overflow-x: auto; }
.mostra .terminal{ font-size: 12.5px; }
.terminal .p{ color: #5CE08A; }
.terminal .c{ color: #7CC4FF; }
.terminal .d{ color: #6E8099; }
.terminal .a{ color: #F6BC2F; }

/* as integrações: fichas que andam sozinhas */
.esteira{ overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.esteira + .esteira{ margin-top: 14px; }
.esteira-trilho{ display: flex; gap: 12px; width: max-content; animation: anda 60s linear infinite; }
.esteira-volta .esteira-trilho{ animation-direction: reverse; }
.esteira:hover .esteira-trilho{ animation-play-state: paused; }
@keyframes anda{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .esteira-trilho{ animation: none; flex-wrap: wrap; width: auto; } }
.ficha{ display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--cartao); border: 1px solid var(--linha); font-weight: 800; font-size: 15.5px; white-space: nowrap; }
.ficha small{ color: var(--suave); font-weight: 700; font-size: 12.5px; }
.ficha i{ color: var(--primaria); }

/* cartões simples, em grade */
.grade{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grade-2{ grid-template-columns: repeat(2, 1fr); }
.grade-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grade, .grade-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .grade, .grade-2, .grade-4{ grid-template-columns: 1fr; } }
.cartao{ padding: 26px; border-radius: var(--raio); background: var(--cartao); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.cartao .icone{ width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--superficie-alta); color: var(--primaria); font-size: 20px; }
.cartao h3{ font-size: 19px; }
.cartao p{ color: var(--suave); font-size: 15.5px; }
.escuro .cartao{ background: rgba(255, 255, 255, 0.04); border-color: var(--noite-linha); }
.escuro .cartao p{ color: var(--noite-suave); }
.escuro .cartao .icone{ background: rgba(79, 179, 255, 0.14); color: var(--brilho); }

/* uma tela grande com texto ao lado, alternando o lado */
.mostra{ display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.mostra + .mostra{ margin-top: 96px; }
.mostra-inverte .mostra-texto{ order: 2; }
.mostra-texto h3{ font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.6px; margin-bottom: 14px; }
.mostra-texto > p{ color: var(--suave); font-size: 17.5px; margin-bottom: 22px; }
.mostra .janela{ border-color: var(--linha); box-shadow: var(--sombra); }
@media (max-width: 980px){ .mostra{ grid-template-columns: 1fr; gap: 28px; } .mostra-inverte .mostra-texto{ order: 0; } .mostra + .mostra{ margin-top: 72px; } }

/* o lugar de um print que ainda vai ser tirado do sistema */
.print-pendente{
    aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 24px;
    background: repeating-linear-gradient(135deg, var(--superficie) 0 14px, var(--superficie-alta) 14px 28px);
    color: var(--suave); font-weight: 800; font-size: 15px;
}
.print-pendente i{ display: block; font-size: 30px; color: var(--primaria); margin-bottom: 8px; }
.celular .print-pendente{ aspect-ratio: 9 / 19.5; border-radius: 23px; font-size: 13px; }

/* abertura das páginas de assunto */
.capa-assunto{ padding: 72px 0 0; }
.capa-assunto .capa-texto{ max-width: 820px; }
.capa-assunto h1{ font-size: clamp(36px, 5vw, 58px); margin: 18px 0 18px; letter-spacing: -1.2px; }
.capa-assunto .lead{ font-size: clamp(18px, 1.6vw, 20.5px); color: var(--noite-suave); max-width: 720px; }
.capa-assunto .vitrine-assunto{ margin-top: 52px; margin-bottom: -120px; position: relative; z-index: 2; }
.capa-assunto + .secao{ padding-top: 180px; }
.capa-assunto .janela{ box-shadow: var(--sombra-forte); }
@media (max-width: 720px){ .capa-assunto .vitrine-assunto{ margin-bottom: -60px; } .capa-assunto + .secao{ padding-top: 110px; } }

.trilha-migalha{ display: flex; gap: 8px; align-items: center; font-size: 14.5px; color: var(--noite-suave); font-weight: 700; }
.trilha-migalha a{ color: #9fd2ff; }

/* fichas de recursos "também faz" */
.fichas{ display: flex; flex-wrap: wrap; gap: 10px; }
.fichas li{ padding: 9px 15px; border-radius: 999px; background: var(--cartao); border: 1px solid var(--linha); font-size: 15px; font-weight: 700; }

/* próximo assunto */
.vizinhos{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vizinhos a{ display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); text-decoration: none !important; }
.vizinhos a:hover{ border-color: var(--primaria); }
.vizinhos small{ color: var(--suave); font-weight: 700; }
.vizinhos strong{ font-size: 19px; font-weight: 900; }
.vizinhos a:last-child{ text-align: right; }
@media (max-width: 600px){ .vizinhos{ grid-template-columns: 1fr; } .vizinhos a:last-child{ text-align: left; } }

/* perguntas */
.perguntas{ max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.perguntas details{ border-radius: 16px; background: var(--cartao); border: 1px solid var(--linha); padding: 4px 22px; }
.perguntas summary{ cursor: pointer; list-style: none; padding: 18px 0; font-weight: 800; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; }
.perguntas summary::-webkit-details-marker{ display: none; }
.perguntas summary::after{ content: "+"; font-size: 24px; line-height: 1; color: var(--primaria); font-weight: 700; }
.perguntas details[open] summary::after{ content: "–"; }
.perguntas details p{ padding: 0 0 20px; color: var(--suave); }

/* a chamada final */
.chamada{ position: relative; overflow: hidden; padding: 96px 0; text-align: center; color: #fff; background: radial-gradient(700px 360px at 50% 0, rgba(124, 196, 255, 0.35), transparent 70%), linear-gradient(135deg, #0B6CF0, #0347A8 60%, #062B66); }
.chamada h2{ font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -1px; max-width: 820px; margin: 0 auto; }
.chamada p{ margin: 18px auto 0; max-width: 640px; font-size: 19px; color: rgba(255, 255, 255, 0.85); }
.chamada .capa-acoes{ justify-content: center; }

/* rodapé */
.rodape{ background: var(--noite); color: var(--noite-suave); padding: 72px 0 36px; font-size: 15.5px; }
.rodape a{ color: var(--noite-texto); }
.rodape-grade{ display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.rodape .marca{ color: #fff; }
.rodape .marca b{ color: var(--brilho); }
.rodape h4{ color: #fff; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; font-weight: 900; }
.rodape li + li{ margin-top: 9px; }
.rodape-fim{ margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--noite-linha); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 980px){ .rodape-grade{ grid-template-columns: 1fr 1fr; } .rodape-grade > div:first-child{ grid-column: 1 / -1; } }

/* botão do WhatsApp que acompanha a página */
.zap{
    position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
    display: grid; place-items: center; background: #1FAF52; color: #fff; font-size: 28px; box-shadow: 0 12px 30px rgba(31, 175, 82, 0.45);
    text-decoration: none !important;
}

/* a página em construção */
.obra{ min-height: calc(100vh - 72px); display: grid; place-items: center; text-align: center; padding: 64px 24px; }
.obra .icone{ width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; margin: 0 auto 26px; font-size: 38px; color: #fff; background: linear-gradient(135deg, #1E8BFF, #0357C8); box-shadow: 0 20px 40px rgba(4, 103, 236, 0.35); }
.obra h1{ font-size: clamp(32px, 4.4vw, 48px); }
.obra p{ margin: 16px auto 28px; max-width: 520px; color: var(--suave); font-size: 18px; }

/* entrada suave ao rolar (js/site.js marca .surge e põe .apareceu) */
.surge{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.surge.apareceu{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .surge{ opacity: 1; transform: none; } }

/* o celular por cima da tela grande, na abertura das páginas de assunto */
.vitrine-assunto{ position: relative; }
.vitrine-assunto .celular-sobre{ position: absolute; right: 28px; bottom: -48px; width: 210px; transform: rotate(2deg); }
@media (max-width: 720px){ .vitrine-assunto .celular-sobre{ width: 120px; right: 4px; bottom: -36px; border-radius: 20px; padding: 5px; } .vitrine-assunto .celular-sobre img{ border-radius: 16px; } }

/* uma fileira de celulares com a legenda embaixo (o app do técnico) */
.fila-celulares{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 8px 0 56px; }
.fila-celulares figure{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fila-celulares .celular{ width: 100%; max-width: 230px; }
.fila-celulares figcaption{ text-align: center; font-size: 15px; font-weight: 700; color: var(--noite-suave); max-width: 220px; }
@media (max-width: 980px){ .fila-celulares{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .fila-celulares{ gap: 18px; } .fila-celulares .celular{ border-radius: 22px; padding: 6px; } .fila-celulares .celular img{ border-radius: 17px; } }