/* ============================================================
Sementeira · base.css
Fonte única de estilo. Toda página do site importa este arquivo.
Valores vindos de marca/spec-visual.md (auditoria medida).
============================================================ */
:root{
/* os três pontos do degradê da marca: claro, cheio e fundo.
Trocar a matiz do site inteiro é trocar estes três mais o acento. */
--g-claro:#2C543D; --g-cheio:#21402F; --g-fundo:#182D21; --g-poco:#14170F;
--g-suave:#3A6B4C; /* o topo do degradê do ladrilho claro */
/* a paleta nomeada: Terra, Semente, Broto, Mata, Sol e Musgo */
--terra:#14170F; --semente:#F3ECDC; --broto:#5A9270;
--mata:#21402F; --sol:#D9A441; --musgo:#93A68D;
--acento-600:#21402F; --acento-700:#14170F; --acento-tint:#E4EBDD;
/* estados da unidade: prevista, recebida, comprovada */
--u-prev:#C4B48F; --u-receb:#5A9270; --u-comp:#21402F;
/* cor de ação: a única coisa quente da página, e só em botão primário
e no selo de fase. Nunca em texto, link, fundo de seção ou estado. */
--acao:#E0245E; --acao-2:#C11B4F; --acao-tint:#FDE7EF;
--acento-foco:rgba(33,64,47,.42);
/* Semente, e os degraus derivados dela. Branco puro não existe no sistema. */
--n-0:#FBF7EC; --n-15:#F8F2E4; --n-25:#F3ECDC; --n-50:#EBE3D0; --n-100:#DFD5BE; --n-200:#C7BCA0;
--n-300:#A89C80; --n-400:#7E7663; --n-500:#5E6B58; --n-600:#45503F; --n-700:#2E3629;
--n-800:#1D2318; --n-900:#14170F;
/* estado, só em badge e alerta */
--sucesso:#5A9270; --erro:#B3261E; --atencao:#9A6200; --info:#12608A;
/* raio */
/* tipo: escala fechada. Nove degraus, e nada de tamanho avulso no meio da folha.
Vinte e um tamanhos diferentes foi o que mais deixava a página com cara de
montada em vez de desenhada. */
--t-micro:11px; /* sobrancelha e cabeçalho de tabela, sempre em caixa alta */
--t-nota:13px; /* nota de rodapé, legenda, meta */
--t-rotulo:14px; /* rótulo, linha secundária */
--t-corpo:16px; /* prosa */
--t-corpo-g:18px; /* prosa de destaque, lede */
--t-bloco:21px; /* título de bloco */
--t-titulo:27px; /* título de painel */
/* escala de display: só título e número grande vivem aqui */
--d-1:clamp(30px,2.85vw,39px); /* h1 */
--d-2:clamp(27px,2.5vw,36px); /* h2 e manchete de seção */
--d-3:29px; /* título de seção em caixa alta */
--d-num:31px; /* número de destaque */
--d-num-g:44px; /* número de preço */
/* raio: aresta quase reta. Painel de banco e relatório impresso não têm
canto arredondado; software de consumo tem. A marca fica do lado do documento. */
--r-xs:4px; --r-sm:6px; --r-md:14px; --r-lg:28px;
/* espaçamento, grade de 4 */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
--sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px; --sp-11:96px;
/* sombra: só duas no sistema inteiro */
/* sombra: estrutura é borda de 1px. Sombra só quando algo levanta do plano,
e curta. Halo grande e difuso é o acabamento padrão de template. */
--sombra-1:0 1px 2px rgba(14,21,36,.06);
--sombra-2:0 2px 4px rgba(14,21,36,.07), 0 8px 16px -10px rgba(14,21,36,.14);
--container:1240px;
--medida:36rem;
/* a unidade e a calha: é daqui que a grade da marca nasce */
--us:14px; --ug:4px;
--medida-larga:55rem;
/* um respiro vertical de seção só, em vez de três valores soltos */
--sec-y:88px;
/* acabamento: toda superfície que responde usa esta curva */
--t:120ms cubic-bezier(.2,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--n-0);color:var(--n-700);
font-variant-numeric:tabular-nums;
font-family:'Archivo',ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.55;
font-variation-settings:'wdth' 100;
-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--acento-600);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--acento-700)}
:focus-visible{outline:0;box-shadow:0 0 0 3px var(--acento-foco);border-radius:var(--r-sm)}
h1,h2,h3,h4{color:var(--n-900);font-weight:700;letter-spacing:-.012em;margin:0;
font-variation-settings:'wdth' 100}
h1{font-size:var(--d-1);line-height:1.05}
h2{font-size:var(--d-2);line-height:1.14}
h3{font-size:var(--t-bloco);line-height:1.3;letter-spacing:-.01em}
h4{font-size:var(--t-bloco);line-height:1.4;letter-spacing:0}
p{margin:0}
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--sp-7);padding-right:var(--sp-7)}
@media(max-width:640px){.wrap{padding-left:var(--sp-5);padding-right:var(--sp-5)}}
.medida{max-width:var(--medida)}
.medida--larga{max-width:var(--medida-larga)}
.eyebrow{font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--acento-600);font-variation-settings:'wdth' 100}
.lede{font-size:var(--t-corpo-g);line-height:1.5;color:var(--n-500);max-width:var(--medida)}
.nota{font-size:var(--t-rotulo);color:var(--n-400);max-width:var(--medida)}
.num{font-variant-numeric:tabular-nums lining-nums}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);border-bottom:1px solid var(--n-100)}
.sec:last-of-type{border-bottom:0}
@media(max-width:1279px){:root{--sec-y:64px}}
@media(max-width:767px){:root{--sec-y:48px}}
.sec--claro{background:var(--n-25)}
.sec--linha{border-top:1px solid var(--n-50)}
.grade{display:grid;gap:var(--sp-5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
height:48px;padding:0 var(--sp-6);border-radius:var(--r-sm);font-size:var(--t-corpo-g);font-weight:600;
font-family:inherit;border:1px solid transparent;cursor:pointer;box-shadow:none;text-decoration:none;
transition:background var(--t),border-color var(--t),color var(--t)}
.btn--lg{height:48px}
.btn--sm{height:32px;padding:0 var(--sp-3);font-size:var(--t-rotulo)}
.btn--1{background:var(--acao);color:#FFFFFF}
.btn--1:hover{background:var(--acao-2);color:#FFFFFF}
.btn--2{background:var(--n-0);color:var(--n-800);border-color:var(--n-200)}
.btn--2:hover{border-color:var(--n-300);color:var(--n-800)}
.btn--3{background:transparent;color:var(--acento-600);padding:0 var(--sp-2)}
.btn--3:hover{background:var(--acento-tint)}
/* ---------- formulário ---------- */
label{display:block;font-size:var(--t-rotulo);font-weight:500;color:var(--n-600);margin-bottom:var(--sp-2)}
input,select,textarea{width:100%;height:40px;border:1px solid var(--n-200);border-radius:var(--r-sm);
padding:0 var(--sp-3);font-size:var(--t-corpo);font-family:inherit;color:var(--n-800);background:var(--n-0)}
textarea{height:auto;padding:var(--sp-3);line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acento-600);box-shadow:0 0 0 3px var(--acento-foco)}
/* ---------- superfícies ---------- */
.card{background:var(--n-15);border:1px solid var(--n-100);border-radius:var(--r-md);
padding:var(--sp-5);box-shadow:none;
transition:border-color var(--t),background var(--t),transform var(--t)}
.sec--claro .card{background:var(--n-0)}
a.card{display:block}
a.card:hover{border-color:var(--n-300);background:var(--n-0);transform:translateY(-1px)}
.sec--claro a.card:hover{background:var(--n-0);border-color:var(--n-300)}
.painel{background:var(--n-0);border-radius:var(--r-lg);box-shadow:var(--sombra-1)}
.flutua{border-radius:var(--r-lg);box-shadow:var(--sombra-2);background:var(--n-0);overflow:hidden}
/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);
border-radius:var(--r-sm);border:1px solid var(--n-200);font-size:var(--t-micro);font-weight:500;color:var(--n-600);background:transparent}
.badge--ok{color:var(--u-comp);border-color:#C6C9EC;background:var(--acento-tint)}
.badge--err{color:var(--erro);border-color:#EBC4C1;background:#FCF3F2}
.badge--at{color:var(--atencao);border-color:#E9D4A6;background:#FCF7EC}
/* ---------- alerta ---------- */
.alerta{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-3);
border:1px solid var(--n-100);border-radius:var(--r-md);padding:var(--sp-4);background:var(--n-25);font-size:var(--t-corpo)}
.alerta svg{width:20px;height:20px;color:var(--n-500);margin-top:2px}
.alerta b{display:block;font-weight:500;color:var(--n-800);margin-bottom:2px}
.alerta--info{background:var(--acento-tint);border-color:#CFDBF8}
.alerta--info svg{color:var(--acento-600)}
/* nota interna: aparece só com RASCUNHO=True no build.py, e precisa parecer bilhete, não conteúdo */
.alerta.obra{background:repeating-linear-gradient(135deg,#FFFBF2 0 10px,#FDF6E7 10px 20px);
border-color:#E9D4A6;border-style:dashed}
.alerta.obra svg{color:var(--atencao)}
.alerta.obra b{color:var(--atencao);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
/* ---------- tabela ---------- */
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-corpo)}
.tabela th{text-align:left;font-weight:500;font-size:var(--t-nota);letter-spacing:.06em;text-transform:uppercase;
color:var(--n-400);padding:0 var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--n-100)}
.tabela td{padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;border-bottom:1px solid var(--n-50);color:var(--n-700)}
.tabela tbody tr{transition:background var(--t)}
.tabela tbody tr:hover{background:var(--n-15)}
.tabela tr:last-child td{border-bottom:0}
.tabela .dir{text-align:right;font-variant-numeric:tabular-nums}
.rolagem{overflow-x:auto}
/* ---------- breadcrumb ---------- */
.migalha{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--t-rotulo);color:var(--n-400);flex-wrap:wrap}
.migalha a{color:var(--n-500)}
.migalha svg{width:16px;height:16px;color:var(--n-300)}
.migalha [aria-current]{color:var(--n-700)}
/* ---------- subnav de página ---------- */
.subnav{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--n-100);overflow-x:auto}
.subnav a{padding:var(--sp-3) 0;font-size:var(--t-corpo);color:var(--n-500);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t),border-color var(--t)}
.subnav a:hover{color:var(--n-800)}
.subnav a[aria-current]{color:var(--acento-600);border-bottom-color:var(--acento-600)}
/* ---------- paginação ---------- */
.pag{display:flex;gap:var(--sp-2);align-items:center}
.pag a{transition:border-color var(--t),color var(--t)}
.pag a,.pag span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
padding:0 var(--sp-2);border:1px solid var(--n-200);border-radius:var(--r-sm);font-size:var(--t-rotulo);color:var(--n-600)}
.pag [aria-current]{border-color:var(--acento-600);color:var(--acento-600);background:var(--acento-tint)}
/* ---------- accordion ---------- */
.faq{border-top:1px solid var(--n-100)}
.faq details{border-bottom:1px solid var(--n-100);padding:var(--sp-5) 0}
.faq summary{transition:color var(--t);display:flex;justify-content:space-between;gap:var(--sp-5);cursor:pointer;list-style:none;
font-size:var(--t-corpo-g);font-weight:500;color:var(--n-900);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;color:var(--acento-600);flex:none;transition:transform .16s ease}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin-top:var(--sp-3);color:var(--n-500);max-width:var(--medida)}
/* ---------- preço ---------- */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media(max-width:900px){.planos{grid-template-columns:1fr}}
.plano{border:1px solid var(--n-100);border-radius:var(--r-md);padding:var(--sp-6);background:var(--n-0)}
.plano--destaque{border-color:var(--acento-600)}
.plano .nome{font-size:var(--t-bloco);font-weight:500;color:var(--n-900)}
.plano .taxa{font-size:var(--d-num-g);font-weight:700;color:var(--n-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
margin-top:var(--sp-4);line-height:1}
.plano .taxa small{font-size:var(--t-corpo);font-weight:400;color:var(--n-400);letter-spacing:0}
.plano ul{list-style:none;margin:var(--sp-5) 0 var(--sp-6);padding:0}
.plano li{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-2);padding:var(--sp-2) 0;font-size:var(--t-corpo)}
.plano li svg{width:20px;height:20px;color:var(--acento-600)}
/* ---------- cabeçalho ---------- */
.topo{position:sticky;top:0;z-index:60;background:var(--n-0);border-bottom:1px solid var(--n-100)}
.topo .wrap{max-width:none}
.topo__in{display:flex;align-items:center;gap:var(--sp-6);height:88px}
.marca{display:flex;align-items:center;gap:var(--sp-2);font-weight:500;font-size:var(--t-bloco);
letter-spacing:-.02em;color:var(--n-900)}
.marca:hover{color:var(--n-900)}
.menu{display:flex;align-items:center;gap:var(--sp-1);margin-left:var(--sp-5)}
.menu > li{list-style:none;position:relative}
.menu__link{display:inline-flex;align-items:center;gap:var(--sp-2);height:44px;padding:0 var(--sp-4);
font-size:var(--t-corpo-g);font-weight:500;color:var(--n-700);border-radius:var(--r-lg);background:transparent;border:0;
font-family:inherit;cursor:pointer;letter-spacing:-.005em}
.menu__link{white-space:nowrap}
.menu__link{transition:color var(--t),background var(--t)}
.menu__link:hover{color:var(--n-900);background:var(--n-50)}
.menu__link svg{width:17px;height:17px;color:var(--n-400)}
.mega{position:absolute;top:calc(100% + 8px);left:0;min-width:600px;padding:var(--sp-5);
background:var(--n-0);border-radius:var(--r-lg);box-shadow:var(--sombra-1);
opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s}
.menu > li:hover .mega,.menu > li:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega__grade{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2) var(--sp-5)}
.mega__item{display:grid;grid-template-columns:20px 1fr;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-sm)}
.mega__item{transition:background var(--t)}
.mega__item:hover{background:var(--n-25)}
.mega__item svg{width:20px;height:20px;color:var(--n-500);margin-top:2px}
.mega__item b{display:block;font-weight:500;font-size:var(--t-corpo);color:var(--n-900)}
.mega__item span{font-size:var(--t-nota);color:var(--n-400);line-height:1.45}
.mega__rodape{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--n-50);
display:flex;justify-content:space-between;align-items:center;font-size:var(--t-rotulo);color:var(--n-500)}
.topo__dir{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)}
.topo__dir > .btn{white-space:nowrap}
.topo__dir .entrar{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-rotulo);color:var(--n-400)}
.topo__dir .entrar:hover{color:var(--n-700)}
.topo__dir .entrar svg{width:15px;height:15px}
.abrir{display:none;height:40px;width:40px;align-items:center;justify-content:center;border:1px solid var(--n-200);
border-radius:var(--r-sm);background:var(--n-0);cursor:pointer}
@media(max-width:1279px){
.menu{display:none}
.topo__dir .entrar{display:none}
.topo__dir > .btn{display:none}
.abrir{display:inline-flex}
.topo__in{height:76px}
}
.drawer{display:none;border-top:1px solid var(--n-100);background:var(--n-0);padding:var(--sp-4) 0 var(--sp-6)}
.drawer.aberto{display:block}
.drawer details{border-bottom:1px solid var(--n-50)}
.drawer summary{list-style:none;cursor:pointer;padding:var(--sp-4) 0;font-size:var(--t-corpo);color:var(--n-800);
display:flex;justify-content:space-between}
.drawer summary::-webkit-details-marker{display:none}
.drawer a{display:block;padding:var(--sp-2) 0;font-size:var(--t-corpo);color:var(--n-500)}
.drawer a.btn{padding:0 var(--sp-5)}
.drawer a.btn--1{color:#FFFFFF}
.drawer a.btn--2{color:var(--n-900)}
.drawer a.btn--2{color:var(--n-800)}
/* ---------- rodapé ---------- */
.rodape{background:var(--n-900);color:var(--n-300);padding-top:var(--sp-10);padding-bottom:var(--sp-9);font-size:var(--t-rotulo)}
.rodape__cols{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:var(--sp-6)}
@media(max-width:1080px){.rodape__cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.rodape__cols{grid-template-columns:repeat(2,1fr)}}
.rodape h5{margin:0 0 var(--sp-3);font-size:var(--t-nota);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--n-0)}
.rodape a{display:block;padding:var(--sp-1) 0;color:var(--n-300);transition:color var(--t)}
.rodape a:hover{color:var(--n-0)}
.rodape .marca{color:var(--n-0);margin-bottom:var(--sp-3)}
.rodape__legal{margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.1);
font-size:var(--t-nota);line-height:1.7;color:var(--n-400)}
.rodape__legal strong{color:var(--n-200);font-weight:500}
.tag-ph{display:inline-block;font-size:var(--t-micro);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
color:#E1A48A;border:1px dashed rgba(225,164,138,.45);border-radius:var(--r-sm);padding:2px 8px}
/* ---------- hero de fotografia, régua Harvey ---------- */
.topo--sobre{position:absolute;top:0;left:0;right:0;z-index:60;background:transparent;border-bottom:0}
.topo--sobre .marca{color:var(--semente)}
.topo--sobre .marca svg path:first-child{fill:var(--semente)}
.topo--sobre .marca svg path:last-child{fill:#12100D}
.topo--sobre .menu__link{color:rgba(255,255,255,.78)}
.topo--sobre .menu__link:hover{color:var(--semente);background:rgba(255,255,255,.10)}
.topo--sobre .menu__link svg{color:rgba(255,255,255,.6)}
.topo--sobre .entrar{color:rgba(255,255,255,.78)}
.topo--sobre .btn--1{background:var(--n-0);color:var(--n-900)}
.topo--sobre .btn--1:hover{background:var(--n-0);color:var(--n-900)}
.topo--sobre .abrir{border-color:rgba(255,255,255,.35);background:transparent;color:var(--semente)}
.palco{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;
background:var(--n-900);overflow:hidden}
.palco__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.palco__veu{position:absolute;inset:0;
background:linear-gradient(90deg, rgba(18,16,13,.86) 0%, rgba(18,16,13,.62) 42%, rgba(18,16,13,.18) 100%),
linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 45%)}
.palco__conteudo{position:relative;width:100%;padding-bottom:var(--sp-9);padding-top:var(--sp-11)}
.palco h1{color:var(--semente);max-width:15ch;font-size:clamp(36px,4.6vw,58px);line-height:1.04}
.palco .lede{color:rgba(255,255,255,.82);margin-top:var(--sp-5);max-width:40rem;font-size:var(--t-corpo-g)}
.palco .acoes{display:flex;gap:var(--sp-3);margin-top:var(--sp-7);flex-wrap:wrap}
.palco .btn--1{background:var(--n-0);color:var(--n-900)}
.palco .btn--1:hover{background:var(--n-0)}
.palco .btn--2{background:transparent;color:var(--semente);border-color:rgba(255,255,255,.4)}
.palco .btn--2:hover{border-color:var(--semente);color:var(--semente)}
.credito{position:absolute;right:var(--sp-5);bottom:var(--sp-3);font-size:var(--t-micro);
color:rgba(255,255,255,.45);letter-spacing:.02em}
.credito a{color:rgba(255,255,255,.6)}
@media(max-width:640px){.credito{left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-2);font-size:var(--t-micro);line-height:1.4}}
/* faixa de clientes, logo abaixo do palco */
.faixa-logos{border-bottom:1px solid var(--n-50);background:var(--n-0)}
.faixa-logos .wrap{display:flex;align-items:center;gap:var(--sp-7);padding-top:var(--sp-5);
padding-bottom:var(--sp-5);flex-wrap:wrap}
.faixa-logos .rot{font-size:var(--t-nota);color:var(--n-400);letter-spacing:.04em}
/* bloco editorial com foto lateral */
.editorial{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
@media(max-width:900px){.editorial{grid-template-columns:1fr}}
.editorial__foto{min-height:420px;background-size:cover;background-position:center}
.editorial__texto{padding:var(--sp-9) var(--sp-8)}
@media(max-width:900px){.editorial__texto{padding:var(--sp-8) var(--sp-5)}}
/* ---------- pilar, dispositivo gráfico da marca ---------- */
.com-pilar{position:relative}
.hero{padding-top:var(--sp-10);padding-bottom:var(--sp-10);
--previa-esq:50%; /* largura da coluna de texto */
--previa-sangria:200px} /* quanto a prévia avança para fora do container */
.hero .grade{min-height:470px}
@media(min-width:901px){
.hero .grade{grid-template-columns:var(--previa-esq) minmax(0,1fr)}
.hero .previa{margin-right:calc(-1 * min(var(--previa-sangria),
max(0px, (100vw - var(--container)) / 2 - 24px)))}
}
@media(max-width:1279px){.hero{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}.hero .grade{min-height:0}}
.pilar{position:absolute;top:0;bottom:0;width:128px;pointer-events:none;color:var(--n-300);
left:auto;right:calc(50% + (var(--container) / 2))}
.pilar__cap,.pilar__base{position:absolute;left:0;width:128px;color:inherit}
.pilar__cap{top:0}
.pilar__base{bottom:0}
.pilar__fuste{position:absolute;left:15px;right:15px;top:32px;bottom:37px;
background:repeating-linear-gradient(90deg, transparent 0 16.4px, currentColor 16.4px 18px);
opacity:1}
@media(max-width:1520px){.pilar{display:none}}
/* ===== campo ultramar: onde a página respira em cor cheia ===== */
.ultra{background:var(--acento-600);color:var(--semente);border-bottom:0}
.ultra h2,.ultra h3,.ultra .sec__t{color:var(--semente)}
.ultra .sec__n{color:#C2D0B8}
.ultra .lede,.ultra p{color:#E4EADB}
.ultra .sec__cab{border-color:rgba(255,255,255,.22)}
.ultra .btn--1:hover{background:var(--acao-2);color:#FFFFFF}
.ultra .btn--2{background:transparent;color:var(--semente);border-color:rgba(255,255,255,.45)}
.ultra .btn--2:hover{border-color:var(--semente);color:var(--semente)}
.ultra .u{background:rgba(255,255,255,.22)}
.ultra .u--r{background:rgba(255,255,255,.55)}
.ultra .u--c{background:var(--n-0)}
/* ===== campo de unidades no hero: o produto e a marca são a mesma peça ===== */
.campo{background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-md);
padding:var(--sp-6)}
.campo__cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.campo__t{font-size:var(--t-corpo-g);font-weight:600;color:var(--n-900);font-variation-settings:'wdth' 100}
.campo__v{margin-top:var(--sp-3);font-size:var(--d-num);font-weight:600;color:var(--n-900);
letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.campo__v span{font-size:var(--t-corpo-g);font-weight:400;color:var(--n-400);letter-spacing:0}
.campo__l{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--n-50);
font-size:var(--t-nota);line-height:1.55;color:var(--n-400)}
/* trilho da margem: o acúmulo vertical, no lugar do pilar do nome antigo */
.trilho{position:absolute;top:var(--sp-9);width:auto;pointer-events:none;
left:auto;right:calc(50% + (var(--container) / 2) - 4px)}
@media(max-width:1520px){.trilho{display:none}}
/* ===== a unidade, elemento base do sistema =====
uma contribuição é uma unidade. o conjunto é a campanha.
prevista = neutra, recebida = ultramar claro, comprovada = ultramar cheio */
.malha{display:grid;grid-template-columns:repeat(var(--cols,24),minmax(0,var(--us)));gap:var(--ug)}
.u{display:block;aspect-ratio:1;border-radius:1px;background:var(--u-prev)}
.u--r{background:var(--u-receb)}
.u--c{background:var(--u-comp)}
.fila{display:flex;flex-wrap:wrap;gap:var(--ug)}
.malha--fina{--us:9px;--ug:3px}
.malha--larga{--us:18px;--ug:5px}
@media(max-width:900px){.malha{--us:10px;--ug:3px}}
/* legenda dos estados, sempre que a malha aparecer sozinha */
.malha-leg{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4);
font-size:var(--t-nota);color:var(--n-500)}
.malha-leg span{display:inline-flex;align-items:center;gap:7px}
.malha-leg i{width:11px;height:11px;border-radius:1px;display:block}
/* ===== seção numerada: o documento se conta, como as unidades ===== */
.sec__cab{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);align-items:baseline;
padding-bottom:var(--sp-5);border-bottom:1px solid var(--n-100);margin-bottom:var(--sp-8)}
.sec__n{font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;color:var(--acento-600);
font-variant-numeric:tabular-nums}
.sec__t{font-size:var(--d-3);font-weight:600;letter-spacing:.03em;text-transform:uppercase;
color:var(--n-900);font-variation-settings:'wdth' 100;line-height:1.1}
@media(max-width:767px){.sec__t{font-size:var(--t-bloco)}}
/* ===== ciclo da doação, seção da home ===== */
/* ============================================================
s2 · o ciclo da doação em anel, desenhado com cartões
Fundo claro, traço fino, sem grade, sem brilho, sem moldura.
Cada parada é um cartão branco do mesmo sistema do site.
A linha do anel passa por trás dos cartões.
Azul só na volta para quem doou e no cartão de quem doa.
============================================================ */
.ciclo{
background:transparent;
color:var(--n-700);
padding-top:var(--sec-y);
padding-bottom:var(--sec-y);
border-bottom:1px solid var(--n-100);
}
@media(max-width:1279px){.ciclo{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}}
@media(max-width:767px){.ciclo{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}}
.ciclo__in{max-width:var(--container);margin:0 auto;
padding-left:var(--sp-7);padding-right:var(--sp-7)}
@media(max-width:640px){.ciclo__in{padding-left:var(--sp-5);padding-right:var(--sp-5)}}
/* ---------------- cabeçalho ---------------- */
.ciclo-eyebrow{font-size:var(--t-nota);font-weight:500;letter-spacing:.08em;
text-transform:uppercase;color:var(--acento-600)}
.ciclo-titulo-p{margin-top:0;font-size:var(--t-bloco);line-height:1.35;color:var(--n-900);
font-weight:600;font-variation-settings:'wdth' 100;letter-spacing:-.015em;max-width:34ch}
.ciclo-titulo{margin-top:var(--sp-2);color:var(--n-900);font-weight:500;
letter-spacing:-.03em;font-size:var(--d-2);line-height:1.14;max-width:22ch}
@media(max-width:1279px){.ciclo-titulo-p{margin-top:0;font-size:var(--t-bloco);line-height:1.35;color:var(--n-900);
font-weight:600;font-variation-settings:'wdth' 100;letter-spacing:-.015em;max-width:34ch}
.ciclo-titulo{font-size:var(--d-2)}}
@media(max-width:767px){.ciclo-titulo-p{margin-top:0;font-size:var(--t-bloco);line-height:1.35;color:var(--n-900);
font-weight:600;font-variation-settings:'wdth' 100;letter-spacing:-.015em;max-width:34ch}
.ciclo-titulo{font-size:var(--t-titulo)}}
.ciclo-apoio{margin-top:var(--sp-4);font-size:var(--t-corpo-g);line-height:1.5;
color:var(--n-500);max-width:var(--medida)}
/* ---------------- o anel ---------------- */
.ciclo-anel{margin:0;padding:0}
.ciclo-anel__palco{margin-top:var(--sp-9)}
@media(max-width:1100px){.ciclo-anel__palco{margin-top:var(--sp-8)}}
.ciclo-svg{width:100%;height:auto;display:block}
.ciclo-svg--largo{display:block}
.ciclo-svg--estreito{display:none}
@media(max-width:1100px){
.ciclo-svg--largo{display:none}
.ciclo-svg--estreito{display:block;max-width:430px;margin:0 auto}
}
/* cartões do anel */
.ciclo-cartao{fill:var(--n-0);stroke:var(--n-200);stroke-width:1;
filter:drop-shadow(0 1px 2px rgba(18,16,13,.045))}
.ciclo-cartao--foco{fill:var(--acento-tint);stroke:var(--acento-600)}
/* tipografia dentro do desenho */
.ciclo-svg text{font-family:inherit}
.ciclo-tit{font-size:var(--t-corpo);font-weight:500;fill:var(--n-900);letter-spacing:-.01em}
.ciclo-sub{font-size:var(--t-nota);font-weight:400;fill:var(--n-500)}
.ciclo-marca{font-size:var(--t-nota);font-weight:400;fill:var(--acento-600)}
.ciclo-mini{font-size:var(--t-nota);font-weight:400;fill:var(--n-500)}
.ciclo-mini-b{font-size:var(--t-corpo);font-weight:500;fill:var(--n-600)}
@media(max-width:1100px){
.ciclo-svg--estreito .ciclo-tit{font-size:var(--t-corpo-g)}
.ciclo-svg--estreito .ciclo-sub{font-size:var(--t-nota)}
}
/* legenda curta abaixo do desenho */
.ciclo-legenda{margin-top:var(--sp-6);font-size:var(--t-rotulo);line-height:1.6;
color:var(--n-500);max-width:70ch}
@media(max-width:1100px){.ciclo-legenda{margin-top:var(--sp-5)}}
/* ---------------- três blocos ---------------- */
.ciclo-blocos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--sp-6) var(--sp-8);margin-top:var(--sp-9)}
@media(max-width:900px){.ciclo-blocos{grid-template-columns:1fr;gap:var(--sp-6);margin-top:var(--sp-8)}}
.ciclo-bloco{border-top:1px solid var(--n-100);padding-top:var(--sp-4)}
.ciclo-bloco h3{font-size:var(--t-corpo-g);line-height:1.3;font-weight:500;
color:var(--n-900);letter-spacing:-.01em}
.ciclo-bloco p{margin-top:var(--sp-2);font-size:var(--t-corpo);line-height:1.6;color:var(--n-500)}
.ciclo-nota{margin-top:var(--sp-8);font-size:var(--t-rotulo);line-height:1.6;
color:var(--n-400);max-width:var(--medida)}
@media(max-width:767px){.ciclo-nota{margin-top:var(--sp-7)}}
/* ---------------- traço que se desenha uma vez ---------------- */
.ciclo-traco{stroke-dasharray:100}
html.ciclo-js .ciclo:not(.ciclo-vis) .ciclo-traco{stroke-dashoffset:100}
html.ciclo-js .ciclo:not(.ciclo-vis) .ciclo-surge{opacity:0}
.ciclo-vis .ciclo-traco{animation:ciclodraw 1.2s cubic-bezier(.42,0,.24,1) both}
.ciclo-vis .ciclo-surge{animation:cicloentra .5s ease both}
@keyframes ciclodraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes cicloentra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
html.ciclo-js .ciclo .ciclo-traco{stroke-dashoffset:0 !important;animation:none !important}
html.ciclo-js .ciclo .ciclo-surge{opacity:1 !important;animation:none !important}
}
/* lista de detalhes operacionais */
.detalhes{list-style:none;margin:0;padding:0;border-top:1px solid var(--n-100)}
.detalhes li{padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);border-bottom:1px solid var(--n-50);transition:border-color var(--t);
font-size:var(--t-corpo);color:var(--n-600);position:relative;line-height:1.55}
.detalhes li::before{content:"";position:absolute;left:0;top:calc(var(--sp-4) + 8px);
width:6px;height:6px;border-radius:var(--r-xs);background:var(--n-300)}
/* provas do herói. O marcador quadrado saiu: mesmo com a lista começando na
mesma régua dos outros elementos, o texto ficava 24px à direita por causa da
coluna do marcador, e o olho lê o texto, não a caixa. Agora o texto começa
exatamente onde começam o título, a etiqueta e o botão, e a separação fica
por conta do fio, que é a mesma linguagem do resto da página. */
.provas{list-style:none;margin:var(--sp-7) 0 0;padding:0;display:grid}
.provas li{padding:var(--sp-3) 0;border-top:1px solid rgba(255,255,255,.16);
font-size:var(--t-corpo);line-height:1.5;color:var(--n-500)}
.provas li:first-child{border-top:0;padding-top:0}
/* ---------- prévia da interface, sem marca de cliente ---------- */
.previa{border:1px solid var(--n-100);border-radius:var(--r-lg);overflow:hidden;background:var(--n-0);
box-shadow:var(--sombra-2)}
.previa__topo{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
border-bottom:1px solid var(--n-50);background:var(--n-25)}
.previa__topo .nome{font-size:var(--t-nota);font-weight:500;color:var(--n-600)}
.previa__topo .abas{display:flex;gap:var(--sp-4);margin-left:var(--sp-4);font-size:var(--t-nota);color:var(--n-400)}
.previa__topo .abas .on{color:var(--acento-600)}
@media(max-width:720px){
.previa__topo .abas{display:none}
.previa__topo .nome{white-space:nowrap}
.previa__kpis{grid-template-columns:1fr 1fr}
.previa__kpi:last-child{display:none}
}
.previa__corpo{padding:var(--sp-4)}
.previa__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}
.previa__kpi{border:1px solid var(--n-50);border-radius:var(--r-sm);padding:var(--sp-3)}
.previa__kpi .r{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--n-400)}
.previa__kpi .v{font-size:var(--t-bloco);font-weight:500;color:var(--n-900);margin-top:2px;font-variant-numeric:tabular-nums}
.camp{display:grid;grid-template-columns:1fr auto;gap:var(--sp-3);align-items:center;
padding:var(--sp-3) 0;border-top:1px solid var(--n-50)}
.camp:first-of-type{border-top:0}
.camp .n{font-size:var(--t-rotulo);color:var(--n-800)}
.camp .meta{font-size:var(--t-nota);color:var(--n-400);margin-top:2px;font-variant-numeric:tabular-nums}
/* a marca é a unidade repetida: progresso deixa de ser barra e passa a ser contagem */
.camp .barra{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:var(--sp-2);width:100%}
.camp .barra i{display:block;height:9px;border-radius:1px;background:var(--u-prev)}
.camp .barra i.on{background:var(--u-comp)}
/* ---------- diagrama 101 ---------- */
.fluxo{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--n-100);
border-radius:var(--r-md);overflow:hidden;background:var(--n-0)}
@media(max-width:1000px){.fluxo{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fluxo{grid-template-columns:1fr}}
.fluxo__p{padding:var(--sp-5);border-right:1px solid var(--n-50);position:relative}
.fluxo__p:last-child{border-right:0}
@media(max-width:1000px){.fluxo__p{border-bottom:1px solid var(--n-50)}}
.fluxo__p .n{font-size:var(--t-micro);color:var(--n-300);font-variant-numeric:tabular-nums}
.fluxo__p svg{width:32px;height:32px;color:var(--acento-600);margin:var(--sp-3) 0}
.fluxo__p b{display:block;font-size:var(--t-corpo);font-weight:500;color:var(--n-900);margin-bottom:var(--sp-2)}
.fluxo__p p{font-size:var(--t-nota);color:var(--n-500);line-height:1.5}
/* ============================================================
CAMPO ULTRAMAR, a pontuação viva da página
============================================================ */
.ultra .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22)}
.ultra .card h3{color:var(--semente)}
.ultra .tabela th{color:#C2D0B8;border-bottom-color:rgba(255,255,255,.28)}
.ultra .tabela td{color:#F0F4E9;border-bottom-color:rgba(255,255,255,.14)}
.ultra .btn--2{border-color:rgba(255,255,255,.45);color:var(--semente);background:transparent}
.ultra .btn--2:hover{background:rgba(255,255,255,.12);border-color:var(--semente)}
.ultra .nota{color:#C2D0B8}
/* FAQ resumido no fecho escuro: as linhas do FAQ claro queimam sobre o verde,
e o sinal de mais precisa da cor do texto para aparecer. */
.ultra .faq{border-top-color:rgba(255,255,255,.22)}
.ultra .faq details{border-bottom-color:rgba(255,255,255,.22)}
.ultra .faq summary{color:var(--semente)}
.ultra .faq summary svg{color:var(--semente)}
.ultra .faq details p{color:#D6DFCB}
.faq--fecho details{padding:var(--sp-4) 0}
.faq--fecho summary{font-size:var(--t-corpo)}
/* ============================================================
FECHO COM FAQ
As duas colunas estavam a 24px uma da outra, coladas. A calha
sobe para 64px, e a coluna do FAQ ganha rótulo próprio (o
.eyebrow padrão é Mata, invisível sobre o campo escuro) e um
link de saída que se parece com link.
============================================================ */
.fecho{gap:var(--sp-9)}
@media(max-width:900px){.fecho{gap:var(--sp-7)}}
.fecho__r{font-size:var(--t-corpo-g);font-weight:700;letter-spacing:-.012em;
color:var(--semente);margin-bottom:var(--sp-5)}
.fecho__todas{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-5);
font-size:var(--t-rotulo);font-weight:600;color:var(--semente);
text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.fecho__todas::after{content:"→";transition:transform var(--t)}
.fecho__todas:hover{text-decoration-thickness:2px}
.fecho__todas:hover::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.fecho__todas::after{transition:none}
.fecho__todas:hover::after{transform:none}}
.ultra a{color:var(--semente)}
/* o botão primário precisa vencer .ultra a, que é mais específico que .btn--1.
Sem isso ele herda a tinta clara da seção e some dentro do magenta. */
.ultra a.btn--1,.hero.ultra a.btn--1,.capa.ultra a.btn--1{
background:var(--acao);color:#FFFFFF}
.ultra a.btn--1:hover,.hero.ultra a.btn--1:hover,.capa.ultra a.btn--1:hover{
background:var(--acao-2);color:#FFFFFF}
/* marca de unidades no topo do cartão, o sistema da marca dentro do componente */
.card__marca{display:flex;gap:3px;margin-bottom:var(--sp-4)}
.card__marca i{width:7px;height:7px;border-radius:1px;background:var(--n-200);display:block}
.card__marca i:first-child{background:var(--acento-600)}
a.card:hover .card__marca i{background:var(--u-receb)}
a.card:hover .card__marca i:first-child{background:var(--acento-600)}
a.card{transition:border-color var(--t),transform var(--t),box-shadow var(--t)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--sombra-1)}
/* a progressao da pagina, uma unidade por secao */
.sec__cab{grid-template-columns:auto auto minmax(0,1fr)}
.sec__prog{display:flex;gap:3px;align-self:center;margin-left:var(--sp-2)}
.sec__prog i{width:6px;height:6px;border-radius:1px;background:var(--n-200);display:block}
.sec__prog i.on{background:var(--acento-600)}
.ultra .sec__prog i{background:rgba(255,255,255,.3)}
.ultra .sec__prog i.on{background:var(--n-0)}
.ultra .sec__cab{border-bottom-color:rgba(255,255,255,.3)}
@media(max-width:600px){.sec__prog{display:none}}
/* a capa das paginas internas carrega o campo da marca */
.capa{padding-bottom:var(--sp-8)}
.capa__u{display:flex;gap:4px;margin-top:var(--sp-6)}
.capa__u i{width:10px;height:10px;border-radius:1px;background:var(--n-100);display:block}
.capa__u i.on{background:var(--acento-600)}
.capa__u i.on:nth-child(n+8){background:var(--u-receb)}
@media(max-width:600px){.capa__u i{width:8px;height:8px}}
.ultra .tabela tr:hover td{background:rgba(255,255,255,.06)}
.ultra .alerta{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#F0F4E9}
.ultra .alerta b{color:var(--semente)}
.ultra .detalhes summary,.ultra details summary{color:var(--semente)}
.ultra .tag,.ultra .tag-ph{color:var(--semente);border-color:rgba(255,255,255,.35)}
/* a unidade encolhe junto com a tela, o campo nunca empurra a pagina */
@media(max-width:820px){:root{--us:12px;--ug:3px}}
@media(max-width:600px){:root{--us:9px;--ug:3px}
.malha--larga{--us:12px;--ug:4px} .malha--fina{--us:7px;--ug:2px}}
@media(max-width:420px){:root{--us:8px;--ug:2px}}
.capa__u{flex-wrap:wrap}
.malha{max-width:100%}
html,body{overflow-x:clip}
/* ============================================================
HERÓI EM COR CHEIA
A página abre no campo ultramar e só depois clareia.
O campo de unidades sangra para fora do container, do jeito
que o objeto grande da Celcoin ocupa o bloco de cor, só que
aqui o objeto é o sistema da marca, não uma ilustração.
============================================================ */
.hero.ultra{position:relative;overflow:hidden;border-bottom:0;
background:linear-gradient(103deg,var(--g-claro) 4%,var(--g-fundo) 84%)}
.hero.ultra .wrap{position:relative;z-index:1}
.hero__fundo{position:absolute;inset:0;pointer-events:none;z-index:0;
background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 38%),
linear-gradient(180deg, transparent 55%, rgba(0,0,0,.16) 100%)}
/* a trama de unidades como textura do fundo, quase no limite do visível */
.hero__fundo::after{content:"";position:absolute;inset:0;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
background-size:18px 18px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 42%, #000 100%)}
.hero.ultra h1{color:var(--semente)}
.hero.ultra .lede{color:#E4EADB}
.hero.ultra .provas li{color:#D3DEC8}
.hero
.hero.ultra .btn--2{background:transparent;color:var(--semente);border-color:rgba(255,255,255,.45)}
.hero.ultra .btn--2:hover{background:rgba(255,255,255,.12);border-color:var(--semente)}
/* etiqueta de abertura */
.pill{display:inline-block;font-size:var(--t-nota);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--semente);padding:7px 14px;border-radius:var(--r-sm);
border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
/* o cartão da campanha dentro da cor cheia */
.campo--vidro{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);
backdrop-filter:blur(2px);box-shadow:var(--sombra-2)}
.campo--vidro .campo__t,.campo--vidro .campo__v{color:var(--semente)}
.campo--vidro .campo__v span{color:#C2D0B8}
.campo--vidro .campo__l{color:#C2D0B8;border-top-color:rgba(255,255,255,.2)}
.campo--vidro .malha-leg{color:#E4EADB}
.campo--vidro .badge{color:var(--semente);border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.campo--vidro .u{background:rgba(255,255,255,.20)}
.campo--vidro .u--r{background:rgba(255,255,255,.58)}
.campo--vidro .u--c{background:var(--n-0)}
.campo--vidro .malha-leg i{border:0}
/* ============================================================
FAIXA DE LIGAÇÃO
O degrau entre o campo de cor e a página clara. Diz de saída
o que são as duas plataformas, antes de qualquer explicação.
============================================================ */
.faixa{background:var(--n-15);border-bottom:1px solid var(--n-100)}
.faixa__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media(max-width:900px){.faixa__g{grid-template-columns:1fr}}
.faixa__i{display:block;padding:var(--sp-7) var(--sp-6) var(--sp-7) 0;
border-left:1px solid var(--n-100);padding-left:var(--sp-6);
text-decoration:none;color:inherit;transition:background var(--t)}
.faixa__i:first-child{border-left:0;padding-left:0}
@media(max-width:900px){.faixa__i{border-left:0;padding-left:0;
border-top:1px solid var(--n-100)}.faixa__i:first-child{border-top:0}}
a.faixa__i:hover{background:var(--n-25)}
.faixa__r{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--acento-600)}
.faixa__i b{display:block;margin-top:var(--sp-3);font-size:var(--t-titulo);font-weight:600;
letter-spacing:-.02em;color:var(--n-900);font-variation-settings:'wdth' 100}
.faixa__i span:last-child{display:block;margin-top:var(--sp-2);font-size:var(--t-corpo);
line-height:1.55;color:var(--n-500)}
.faixa__i--fixo .faixa__r{color:var(--n-400)}
.faixa__i--fixo b{color:var(--n-400)}
a.faixa__i b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;
border-radius:1px;background:var(--acento-600);vertical-align:middle}
/* o cartão volta a ser sólido: objeto claro sobre o campo de cor,
e as unidades voltam à paleta da marca em vez de virarem brancas */
.campo--vidro{background:var(--n-0);border-color:rgba(255,255,255,.35);
backdrop-filter:none;box-shadow:var(--sombra-2)}
.campo--vidro .campo__t,.campo--vidro .campo__v{color:var(--n-900)}
.campo--vidro .campo__v span{color:var(--n-400)}
.campo--vidro .campo__l{color:var(--n-400);border-top-color:var(--n-50)}
.campo--vidro .malha-leg{color:var(--n-500)}
.campo--vidro .badge{color:var(--n-600);border-color:var(--n-200);background:var(--n-25)}
.campo--vidro .u{background:var(--u-prev)}
.campo--vidro .u--r{background:var(--u-receb)}
.campo--vidro .u--c{background:var(--u-comp)}
/* o campo de cor precisa de altura para virar abertura, não faixa */
.hero.ultra{padding-top:var(--sp-11,104px);padding-bottom:var(--sp-11,104px)}
@media(max-width:1279px){.hero.ultra{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}}
.hero.ultra h1{line-height:1.04}
/* o marcador do item clicável na faixa */
a.faixa__i b::after{width:0;height:0;margin-left:10px;background:transparent;
border-top:4px solid transparent;border-bottom:4px solid transparent;
border-left:6px solid var(--acento-600);border-radius:0;
transition:transform var(--t)}
a.faixa__i:hover b::after{transform:translateX(3px)}
/* o desenho do ciclo passa a ser objeto, não desenho solto no branco */
.ciclo-anel__palco{background:var(--n-15);border:1px solid var(--n-100);
border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-6)}
@media(max-width:900px){.ciclo-anel__palco{padding:var(--sp-5) var(--sp-4)}}
.ciclo-anel__palco .ciclo-cartao{fill:var(--n-0)}
.ciclo-anel__palco .ciclo-cartao--foco{fill:var(--acento-tint)}
/* ============================================================
CAPA DAS INTERNAS EM COR CHEIA
Toda página abre no campo ultramar, do mesmo jeito que a home.
O site deixa de ser branco com um bloco de cor e passa a ser
um produto com abertura em cor.
============================================================ */
.capa.ultra{position:relative;overflow:hidden;border-bottom:0;
background:linear-gradient(103deg,var(--g-claro) 4%,var(--g-fundo) 84%);
padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.capa.ultra .wrap{position:relative;z-index:1}
.capa.ultra h1{color:var(--semente);font-size:clamp(30px,3.2vw,44px);line-height:1.06}
.capa.ultra .lede{color:#E4EADB;max-width:52ch}
.capa.ultra .migalha{color:#C2D0B8}
.capa.ultra .migalha a{color:#E4EADB;text-decoration:none}
.capa.ultra .migalha a:hover{color:var(--semente);text-decoration:underline}
.capa.ultra .migalha svg{color:rgba(255,255,255,.45)}
.capa.ultra .migalha [aria-current]{color:var(--semente)}
.capa.ultra .capa__u i{background:rgba(255,255,255,.22)}
.capa.ultra .capa__u i.on{background:var(--n-0)}
.capa.ultra .capa__u i.on:nth-child(n+8){background:rgba(255,255,255,.6)}
.capa.ultra .btn--2{background:transparent;color:var(--semente);border-color:rgba(255,255,255,.45)}
.capa.ultra .btn--2:hover{background:rgba(255,255,255,.12);border-color:var(--semente)}
.capa.ultra .pill{display:inline-block}
/* a subnav logo abaixo da capa gruda na cor, sem faixa branca solta */
.capa.ultra + .wrap .subnav{margin-top:0;border-top:0}
/* o cartão do formulário fica claro por cima do campo de cor */
.capa.ultra .card{background:var(--n-0);border-color:rgba(255,255,255,.3);
box-shadow:var(--sombra-2)}
.capa.ultra .card h3,.capa.ultra .card label,.capa.ultra .card b{color:var(--n-900)}
.capa.ultra .card p,.capa.ultra .card span{color:var(--n-500)}
.capa.ultra .card .btn--1{background:var(--acao);color:#FFFFFF}
.capa.ultra .alerta{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#F0F4E9}
.capa.ultra .alerta b{color:var(--semente)}
.capa.ultra .alerta svg{color:var(--semente)}
.capa.ultra a:not(.btn){color:var(--semente)}
/* ============================================================
TRILHA DA DOAÇÃO
Substitui o anel. O caminho vira uma sequência de estações
dentro de um painel em cor cheia, e a última estação, que é
a prova voltando para quem doou, é a única sólida em branco.
O laço embaixo fecha o ciclo de volta na estação 01.
============================================================ */
.trilha{position:relative;overflow:hidden;margin-top:var(--sp-8);
border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-7) var(--sp-6);
background:linear-gradient(103deg,var(--g-claro) 4%,var(--g-fundo) 84%)}
@media(max-width:640px){.trilha{padding:var(--sp-5) var(--sp-4)}}
.trilha::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
background-image:linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
background-size:18px 18px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 50%, #000 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 50%, #000 100%)}
.trilha > *{position:relative;z-index:1}
/* legenda dos dois lados */
.trilha__lados{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.trilha__lado{display:flex;align-items:center;gap:8px;font-size:var(--t-micro);font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:#D3DEC8}
.trilha__lado::before{content:"";width:10px;height:3px;border-radius:1px;background:var(--n-0)}
.trilha__lado--adm::before{background:#93A68D}
/* as estações */
.trilha__ol{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px}
@media(max-width:1100px){.trilha__ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px}}
@media(max-width:640px){.trilha__ol{grid-template-columns:1fr;gap:18px}}
.est{position:relative;border-radius:var(--r-lg);padding:20px 16px 16px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24)}
.est::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;
border-radius:0 0 2px 2px;background:var(--n-0)}
.est--adm::before{background:#93A68D}
.est__n{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.62);
font-variant-numeric:tabular-nums}
.est b{display:block;margin-top:8px;font-size:var(--t-corpo-g);line-height:1.2;font-weight:600;
color:var(--semente);letter-spacing:-.015em;font-variation-settings:'wdth' 100}
.est__d{display:block;margin-top:7px;font-size:var(--t-nota);line-height:1.5;color:#D3DEC8}
/* a seta que liga uma estação na outra */
.est:not(:last-child)::after{content:"";position:absolute;top:50%;right:-16px;
transform:translateY(-50%);width:0;height:0;
border-top:5px solid transparent;border-bottom:5px solid transparent;
border-left:7px solid rgba(255,255,255,.6)}
@media(max-width:1100px){
.est:nth-child(2)::after{display:none}
.est:not(:last-child)::after{right:-17px}
}
@media(max-width:640px){
.est:nth-child(2)::after{display:block}
.est:not(:last-child)::after{top:auto;right:auto;bottom:-14px;left:24px;transform:none;
border-left:5px solid transparent;border-right:5px solid transparent;
border-top:7px solid rgba(255,255,255,.6);border-bottom:0}
}
/* a estação que fecha o ciclo, a única sólida */
.est--fim{background:var(--n-0);border-color:var(--semente);box-shadow:var(--sombra-2)}
.est--fim::before{background:var(--acento-600)}
.est--fim .est__n{color:var(--acento-600)}
.est--fim b{color:var(--n-900)}
.est--fim .est__d{color:var(--n-500)}
/* o laço que devolve a prova para a estação 01 */
.trilha__volta{position:relative;height:52px;margin-top:var(--sp-5);
border:1.5px dashed rgba(255,255,255,.5);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg)}
.trilha__volta::before{content:"";position:absolute;left:-6px;top:-2px;width:0;height:0;
border-left:5px solid transparent;border-right:5px solid transparent;
border-bottom:8px solid rgba(255,255,255,.75)}
.trilha__volta-t{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
white-space:nowrap;font-size:var(--t-corpo-g);font-weight:700;letter-spacing:-.012em;
color:var(--semente);padding:9px 20px;border-radius:var(--r-sm);background:#21402F;
border:1px solid rgba(255,255,255,.35)}
@media(max-width:640px){.trilha__volta-t{font-size:var(--t-rotulo);white-space:normal;
text-align:center;max-width:86%;padding:8px 14px}}
/* a abertura da seção em duas colunas, para o texto não deixar meia página vazia */
.ciclo-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--sp-8);align-items:start}
@media(max-width:900px){.ciclo-intro{grid-template-columns:1fr;gap:var(--sp-5)}}
.ciclo-intro .ciclo-legenda{margin-top:0;padding-top:var(--sp-2)}
.ciclo-intro .ciclo-apoio{max-width:38ch}
/* ============================================================
REDISTRIBUIÇÃO DE DESTAQUE
Um: todo campo ultramar da página ganha o mesmo tratamento do
herói (degradê, brilho e trama), porque azul chapado ao lado
do herói lia como versão pobre dele.
Dois: cada seção passa a ter uma manchete própria, e não só
o rótulo em caixa alta. Era isso que sumia na descida.
============================================================ */
.ultra{position:relative;overflow:hidden;border-bottom:0;
background:linear-gradient(103deg,var(--g-claro) 4%,var(--g-fundo) 84%)}
.ultra::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 38%),
linear-gradient(180deg, transparent 55%, rgba(0,0,0,.16) 100%)}
.ultra::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
background-image:linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
background-size:18px 18px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 42%, #000 100%)}
.ultra > .wrap,.ultra > .ciclo__in{position:relative;z-index:1}
/* terreno de areia, o descanso entre dois campos de cor */
.sec--areia{background:var(--n-25)}
.sec--branca{background:var(--n-0)}
.sec--areia + .sec--areia{border-top:1px solid var(--n-100)}
/* a manchete de cada seção */
.tese{margin-top:var(--sp-5);font-size:var(--d-2);line-height:1.1;
font-weight:600;letter-spacing:-.012em;color:var(--n-900);max-width:20ch;
font-variation-settings:'wdth' 100}
.ultra .tese{color:var(--semente)}
.ciclo-intro .tese{margin-top:0}
.ciclo-apoio{color:var(--n-500)}
.ultra .ciclo-apoio,.ultra .ciclo-legenda{color:#D3DEC8}
/* a tira de três dentro do herói, no lugar da antiga faixa clara */
.tira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
margin-top:var(--sp-9);border-top:1px solid rgba(255,255,255,.28)}
@media(max-width:900px){.tira{grid-template-columns:1fr}}
.tira__i{display:block;padding:var(--sp-6) var(--sp-6) 0 var(--sp-6);
border-left:1px solid rgba(255,255,255,.28);text-decoration:none;color:inherit;
transition:background var(--t)}
.tira__i:first-child{border-left:0;padding-left:0}
@media(max-width:900px){.tira__i{border-left:0;padding-left:0;padding-right:0;
border-top:1px solid rgba(255,255,255,.22)}
.tira__i:first-child{border-top:0}}
a.tira__i:hover{background:rgba(255,255,255,.07)}
.tira__r{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:#C2D0B8}
.tira__i b{display:block;margin-top:var(--sp-3);font-size:var(--t-bloco);font-weight:600;
letter-spacing:-.02em;color:var(--semente);font-variation-settings:'wdth' 100}
.tira__i span:last-child{display:block;margin-top:var(--sp-2);font-size:var(--t-rotulo);
line-height:1.55;color:#D3DEC8}
.tira__i--fixo .tira__r,.tira__i--fixo b{color:rgba(255,255,255,.5)}
.tira__i--fixo span:last-child{color:rgba(255,255,255,.42)}
a.tira__i b::after{content:"";display:inline-block;width:0;height:0;margin-left:10px;
vertical-align:middle;border-top:4px solid transparent;border-bottom:4px solid transparent;
border-left:6px solid rgba(255,255,255,.7);transition:transform var(--t)}
a.tira__i:hover b::after{transform:translateX(3px)}
/* o painel da trilha, agora sobre areia, ganha borda para não flutuar */
.sec--areia .trilha{box-shadow:var(--sombra-2)}
/* cartão escuro: o objeto forte dentro de uma seção clara */
.card--escuro{position:relative;overflow:hidden;border:0;color:var(--semente);
background:linear-gradient(180deg,var(--g-cheio) 0%,var(--g-fundo) 50%,var(--g-poco) 100%);
box-shadow:var(--sombra-2)}
.card--escuro::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
background-image:linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
background-size:18px 18px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 50%, #000 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 50%, #000 100%)}
.card--escuro > *{position:relative;z-index:1}
.card--escuro .tabela th{color:#C2D0B8;border-bottom-color:rgba(255,255,255,.3)}
.card--escuro .tabela td{color:#F0F4E9;border-bottom-color:rgba(255,255,255,.14)}
.card--escuro .tabela tr:last-child td{border-bottom:0}
/* os casos de uso deixam de ser cartão pequeno e passam a ter peso */
.card--nicho{display:flex;flex-direction:column;padding:var(--sp-6);min-height:220px;
background:var(--n-0)}
.card--nicho h3{margin-top:var(--sp-5);font-size:var(--t-bloco);line-height:1.2;
font-variation-settings:'wdth' 100}
.card--nicho p{margin-top:var(--sp-3);font-size:var(--t-corpo);line-height:1.55;color:var(--n-500)}
.card--nicho .card__ir{margin-top:auto;padding-top:var(--sp-5);font-size:var(--t-rotulo);
font-weight:600;color:var(--acento-600);display:flex;align-items:center;gap:8px}
.card--nicho .card__ir::after{content:"";width:0;height:0;
border-top:4px solid transparent;border-bottom:4px solid transparent;
border-left:6px solid var(--acento-600);transition:transform var(--t)}
.card--nicho:hover .card__ir::after{transform:translateX(3px)}
/* listas e notas dentro do campo de cor */
.ultra .detalhes{border-top-color:rgba(255,255,255,.32)}
.ultra .detalhes li{color:#E4EADB;border-bottom-color:rgba(255,255,255,.14)}
.ultra .detalhes li::before{background:rgba(255,255,255,.55)}
.ultra .nota,.ultra .ciclo-nota{color:#C2D0B8}
.ultra .ciclo-bloco{border-top-color:rgba(255,255,255,.3)}
.ultra .ciclo-bloco h3{color:var(--semente)}
.ultra .ciclo-bloco p{color:#D3DEC8}
.ultra details{border-color:rgba(255,255,255,.22)}
.ultra details summary{color:var(--semente)}
.ultra details p{color:#D3DEC8}
.ultra .subnav a{color:#E4EADB}
.ultra .migalha,.ultra .migalha a{color:#E4EADB}
.ultra .campo:not(.campo--vidro){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26)}
/* rede de segurança: texto embutido em tom neutro clareia dentro do campo de cor */
.ultra{--txt-300:rgba(255,255,255,.5);--txt-400:#C2D0B8;--txt-500:#D3DEC8;
--txt-600:#E4EADB;--txt-800:#F0F4E9}
.ultra .card--escuro,.ultra .campo{--txt-500:#D3DEC8}
.ultra svg{color:var(--semente)}
.ultra .btn--1 svg{color:currentColor}
.capa.ultra .card svg{color:var(--acento-600)}
/* cartão claro dentro do campo de cor mantém o link na cor da marca */
.ultra .card a,.ultra .campo a,.capa.ultra .card a{color:var(--acento-600)}
/* ============================================================
DOIS PAINÉIS
O portal e o painel viram dois objetos lado a lado dentro do
campo de cor. Claro é a cara pública, escuro é a operação.
============================================================ */
.lados{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-8)}
@media(max-width:900px){.lados{grid-template-columns:1fr;gap:var(--sp-4)}}
.lados__c{border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-6);position:relative;overflow:hidden}
@media(max-width:600px){.lados__c{padding:var(--sp-5) var(--sp-4)}}
.lados__c--doa{background:var(--n-0);box-shadow:var(--sombra-2)}
.lados__c--adm{background:linear-gradient(180deg,var(--g-fundo) 0%,var(--g-poco) 100%);
border:1px solid rgba(255,255,255,.18)}
.lados__r{display:flex;align-items:center;gap:9px;font-size:var(--t-micro);font-weight:600;
letter-spacing:.13em;text-transform:uppercase}
.lados__r::before{content:"";width:11px;height:3px;border-radius:1px}
.lados__c--doa .lados__r{color:var(--acento-600)}
.lados__c--doa .lados__r::before{background:var(--acento-600)}
.lados__c--adm .lados__r{color:#C2D0B8}
.lados__c--adm .lados__r::before{background:#93A68D}
.lados__t{margin-top:var(--sp-3);font-size:var(--t-titulo);font-weight:600;letter-spacing:-.012em;
font-variation-settings:'wdth' 100;line-height:1.1}
.lados__c--doa .lados__t{color:var(--n-900)}
.lados__c--adm .lados__t{color:var(--semente)}
.lados__l{list-style:none;margin:var(--sp-6) 0 0;padding:0}
.lados__l li{padding:var(--sp-4) 0;display:grid;grid-template-columns:26px minmax(0,1fr);
gap:var(--sp-3)}
.lados__c--doa .lados__l li{border-top:1px solid var(--n-100)}
.lados__c--adm .lados__l li{border-top:1px solid rgba(255,255,255,.16)}
.lados__l li:first-child{border-top:0}
.lados__n{font-style:normal;font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
font-variant-numeric:tabular-nums;padding-top:4px}
.lados__c--doa .lados__n{color:var(--acento-600)}
.lados__c--adm .lados__n{color:#93A68D}
.lados__l b{display:block;font-size:var(--t-corpo-g);font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lados__l span{display:block;margin-top:4px;font-size:var(--t-rotulo);line-height:1.5}
.lados__c--doa .lados__l b{color:var(--n-900)}
.lados__c--doa .lados__l span{color:var(--n-500)}
.lados__c--adm .lados__l b{color:var(--semente)}
.lados__c--adm .lados__l span{color:#D3DEC8}
/* número no lugar do ícone: o cartão passa a ser item de índice */
.card--nicho .card__n{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
color:var(--acento-600);font-variant-numeric:tabular-nums}
.card--nicho h3{margin-top:var(--sp-3)}
/* ============================================================
TIRA DE PARCEIROS
Mesma posição que a Donorbox usa: colada embaixo do herói,
antes de qualquer explicação. Quem está na tira responde a
pergunta que o visitante faz primeiro, que é "quem já usa".
============================================================ */
.parceiros{background:var(--n-0);border-bottom:1px solid var(--n-100)}
.parceiros__q{max-width:var(--container);margin:0 auto;padding:var(--sp-5) var(--sp-7);
display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-6);align-items:center}
@media(max-width:900px){.parceiros__q{grid-template-columns:1fr;gap:var(--sp-3);
padding:var(--sp-5) var(--sp-5)}}
.parceiros__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--n-400);white-space:nowrap}
.parceiros__janela{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.parceiros__pista{display:flex;width:max-content;animation:desfila 34s linear infinite}
.parceiros__janela:hover .parceiros__pista{animation-play-state:paused}
.parceiros__fila{display:flex;align-items:center;gap:var(--sp-9);padding-right:var(--sp-9)}
@keyframes desfila{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
.parceiros__pista{animation:none}
.parceiros__janela{mask-image:none;-webkit-mask-image:none;overflow-x:auto}
}
/* Duas formas de marca convivem na tira. Símbolo sem nome ganha o nome
tipografado ao lado; assinatura que já traz o nome desenhado entra sozinha,
senão o nome apareceria duas vezes. Tudo monocromático, senão o laranja da
Betânia, o azul da Lapa e o vermelho do Credify brigam com o verde da
página. A cor volta no hover. */
.pc{display:flex;align-items:center;gap:var(--sp-3);white-space:nowrap}
.pc img{filter:grayscale(1) brightness(.42) contrast(1.35);opacity:.62;
transition:filter var(--t),opacity var(--t)}
.pc--s img{height:34px;width:auto;flex:none}
.pc--a img{height:22px;width:auto;display:block}
.pc__t{display:grid;gap:3px;justify-items:start}
.pc b{font-size:var(--t-corpo-g);font-weight:700;letter-spacing:-.012em;color:var(--n-400);
line-height:1.15;transition:color var(--t)}
.pc i{font-style:normal;font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--n-300)}
.parceiros:hover .pc b{color:var(--n-600)}
.parceiros:hover .pc img{filter:none;opacity:1}
@media(max-width:600px){.pc--s img{height:28px}.pc--a img{height:19px}}
/* ============================================================
LADRILHOS
A gramática de cartão da Donorbox: bloco de cor cheia, título,
uma linha, e o link sublinhado no pé. Aqui em duas tintas do
mesmo ultramar, em vez das quatro delas.
============================================================ */
.ladrilhos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(max-width:800px){.ladrilhos{grid-template-columns:1fr}}
.ladrilho{position:relative;overflow:hidden;display:flex;flex-direction:column;
min-height:230px;padding:var(--sp-6);border-radius:var(--r-lg);text-decoration:none;
transition:transform var(--t)}
/* o símbolo do nicho, gigante e fosco, no canto de baixo à direita: textura da
marca, não ilustração central. Some atrás do texto, nunca compete com ele. */
.ladrilho__marca{position:absolute;right:-18px;bottom:-22px;width:132px;height:132px;
color:var(--semente);opacity:.10;pointer-events:none;z-index:0}
.ladrilho__marca svg{width:100%;height:100%;stroke-width:1.1}
.ladrilho > *:not(.ladrilho__marca){position:relative;z-index:1}
.ladrilho:hover{transform:translateY(-2px)}
.ladrilho--cla{background:linear-gradient(180deg,var(--g-claro) 0%,var(--g-cheio) 100%)}
.ladrilho--esc{background:linear-gradient(180deg,var(--g-fundo) 0%,var(--g-poco) 100%)}
.ladrilho__n{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.ladrilho h3{margin-top:var(--sp-4);font-size:var(--t-titulo);line-height:1.08;
color:var(--semente);letter-spacing:-.012em;font-variation-settings:'wdth' 100}
.ladrilho p{margin-top:var(--sp-3);margin-bottom:var(--sp-6);font-size:var(--t-corpo);
line-height:1.55;color:#D3DEC8;max-width:34ch}
/* o convite do ladrilho é pastilha, não link solto: pesa mais sem virar botão
primário, que é o único lugar do sistema onde a cor de ação pode aparecer. */
.ladrilho__ir{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
gap:.5em;padding:.62em 1.1em;border-radius:999px;font-size:var(--t-rotulo);
font-weight:600;color:var(--semente);text-decoration:none;
background:rgba(243,236,220,.10);border:1px solid rgba(243,236,220,.34);
transition:background var(--t),border-color var(--t),color var(--t)}
.ladrilho__ir::after{content:"→";font-weight:500;transition:transform var(--t)}
.ladrilho:hover .ladrilho__ir{background:var(--semente);border-color:var(--semente);
color:var(--g-poco)}
.ladrilho:hover .ladrilho__ir::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.ladrilho__ir::after{transition:none}
.ladrilho:hover .ladrilho__ir::after{transform:none}}
/* ============================================================
BARRA DE ANÚNCIO
O lugar que a Donorbox usa para empurrar a demonstração.
Fica acima do cabeçalho e some no clique, por sessão.
============================================================ */
.anuncio{position:relative;background:var(--acento-700);color:var(--semente);
padding:11px var(--sp-9) 11px var(--sp-5);text-align:center;font-size:var(--t-rotulo)}
.anuncio__q{max-width:var(--container);margin:0 auto;display:flex;gap:var(--sp-3);
align-items:center;justify-content:center;flex-wrap:wrap}
.anuncio a{color:var(--semente);font-weight:600;text-decoration:underline;
text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.anuncio a:hover{text-decoration-thickness:2px;color:var(--semente)}
.anuncio__x{position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);
background:transparent;border:0;color:rgba(255,255,255,.7);font-size:var(--t-bloco);
line-height:1;cursor:pointer;padding:4px 8px;font-family:inherit}
.anuncio__x:hover{color:var(--semente)}
@media(max-width:600px){.anuncio{font-size:var(--t-nota);padding-right:var(--sp-8)}}
/* ============================================================
TÍTULO CENTRALIZADO COM UMA EXPRESSÃO REALÇADA
É a assinatura tipográfica da Donorbox ("refreshingly").
============================================================ */
.h2c{max-width:22ch;margin:0 auto;text-align:center;font-size:var(--d-2);line-height:1.1;
letter-spacing:-.03em;font-variation-settings:'wdth' 100}
.h2c em{font-style:normal;color:var(--acento-600)}
.ultra .h2c em{color:#7FBF9A}
.h2c__ap{max-width:62ch;margin:var(--sp-5) auto 0;text-align:center;
font-size:var(--t-corpo-g);line-height:1.55;color:var(--n-500)}
.h2c__pe{margin-top:var(--sp-8);display:flex;justify-content:center;align-items:center;
gap:var(--sp-5);flex-wrap:wrap}
/* ============================================================
MÓDULO EM COR BIPARTIDA
O card é dois blocos de cor de verdade: claro para quem doa,
escuro para quem administra, com cabeçalho e link atravessando
os dois numa faixa neutra. A dualidade é a própria estrutura.
============================================================ */
.lms{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-8)}
/* quando o módulo sozinho fecha a grade (posição ímpar e último), ele ocupa
as duas colunas em vez de deixar buraco ao lado */
.lms .mod:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:900px){.lms{grid-template-columns:1fr}}
.mod{border-radius:var(--r-lg);background:var(--n-15);padding:var(--sp-5);
display:flex;flex-direction:column}
.mod__cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
align-items:baseline;gap:2px var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-4)}
.mod__n{font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;color:var(--acento-600);
font-variant-numeric:tabular-nums}
.mod h3{font-size:19px;color:var(--n-900);font-weight:700;letter-spacing:-.012em}
.mod__sub{grid-column:2/-1;font-size:var(--t-nota);font-weight:500;color:var(--n-400)}
.mod__corpo{display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1;
border-radius:var(--r-md);overflow:hidden}
@media(max-width:560px){.mod__corpo{grid-template-columns:1fr}}
.mod__lado{padding:var(--sp-6) var(--sp-5)}
.mod__lado--doa{background:linear-gradient(160deg,var(--g-suave,#8FA987) 0%,var(--g-cheio) 100%)}
.mod__lado--adm{background:linear-gradient(160deg,var(--g-fundo) 0%,var(--g-poco) 100%)}
.mod__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:rgba(255,255,255,.6)}
.mod__tit{margin-top:var(--sp-3);font-size:20px;font-weight:700;letter-spacing:-.012em;
color:var(--semente);line-height:1.2}
.mod__p{margin-top:var(--sp-2);font-size:var(--t-rotulo);line-height:1.55;color:#E4EADB}
.mod__ir{justify-self:end}
.mod__ir a{font-size:var(--t-nota);font-weight:600;color:var(--acento-600);
text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mod__ir a:hover{text-decoration-thickness:2px}
/* ============================================================
ESPAÇO RESERVADO
Onde a Donorbox tem informação que a Sementeira ainda não tem.
Fica marcado, com o recado do que entra, em vez de vazio.
============================================================ */
.vago{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-2);
padding:var(--sp-6);border:1px dashed var(--n-200);border-radius:var(--r-lg);
background:var(--n-15)}
.vago__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--n-300)}
.vago b{font-size:var(--t-corpo-g);font-weight:600;color:var(--n-600);
letter-spacing:-.015em;line-height:1.2}
.vago__t{font-size:var(--t-rotulo);line-height:1.55;color:var(--n-400);max-width:52ch}
.vago i{font-style:italic}
.ultra .vago{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3)}
.ultra .vago__r{color:rgba(255,255,255,.5)}
.ultra .vago b{color:var(--semente)}
.ultra .vago__t{color:#D3DEC8}
/* faixa de prova: o lugar do número grande e dos depoimentos */
.hoje{background:var(--acento-tint);border-bottom:1px solid var(--n-100)}
.prova__g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);
margin-top:var(--sp-7)}
@media(max-width:900px){.prova__g{grid-template-columns:1fr}}
.selos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(max-width:800px){.selos{grid-template-columns:1fr}}
/* ============================================================
JORNADA
Os três estágios de "Here's what it's like to use Donorbox".
============================================================ */
.jornada{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
margin-top:var(--sp-8)}
@media(max-width:900px){.jornada{grid-template-columns:1fr;gap:var(--sp-7)}}
.jr{border-top:2px solid var(--acento-600);padding-top:var(--sp-4)}
.jr__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--acento-600)}
.jr h3{margin-top:var(--sp-2);font-size:var(--t-bloco);letter-spacing:-.02em}
.jr__l{list-style:none;margin:var(--sp-5) 0 0;padding:0;counter-reset:jr}
.jr__l li{position:relative;padding:0 0 var(--sp-4) var(--sp-6);counter-increment:jr}
.jr__l li::before{content:counter(jr,decimal-leading-zero);position:absolute;left:0;top:2px;
font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;color:var(--n-300);
font-variant-numeric:tabular-nums}
.jr__l b{display:block;font-size:var(--t-corpo);font-weight:600;color:var(--n-900)}
.jr__l span{display:block;margin-top:3px;font-size:var(--t-rotulo);line-height:1.5;
color:var(--n-500)}
/* o h1 em frases curtas, como a Donorbox abre */
.h1--linhas{max-width:none}
/* ============================================================
O QUE EXISTE HOJE
Ocupa o lugar que a Donorbox dá ao número agregado e aos
depoimentos. Aqui entra a prática que a gente levantou nas
duas organizações, que é conteúdo que já temos.
============================================================ */
.hoje__g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
@media(max-width:900px){.hoje__g{grid-template-columns:1fr}}
.hj{display:flex;flex-direction:column;background:var(--n-0);border:1px solid var(--n-100);
border-radius:var(--r-lg);padding:var(--sp-6)}
.hj__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--n-400)}
.hj h3{margin-top:var(--sp-3);font-size:var(--t-bloco);line-height:1.15;letter-spacing:-.012em;
color:var(--n-900);font-variation-settings:'wdth' 100}
.hj p{margin-top:var(--sp-3);font-size:var(--t-corpo);line-height:1.55;color:var(--n-500)}
.hj__dep{margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--n-100);
font-size:var(--t-corpo);line-height:1.5;color:var(--n-900);font-weight:500}
.hj__dep span{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--acento-600);margin-bottom:6px}
.hoje__n{margin-top:var(--sp-7);text-align:center;max-width:74ch;margin-left:auto;
margin-right:auto;font-size:var(--t-rotulo);line-height:1.6;color:var(--n-500)}
/* O bloco "com a Sementeira" ficava em altura diferente em cada cartão, porque
ele era ancorado embaixo e o parágrafo de cima tem comprimento diferente nos
três. Com subgrid as quatro faixas (rótulo, título, parágrafo, virada) passam
a compartilhar a mesma régua horizontal, então o fio alinha nos três. */
@supports (grid-template-rows: subgrid){
.hoje__g{grid-template-rows:auto auto 1fr auto}
.hj{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.hj__dep{margin-top:0;align-self:start}
}
.hoje .vago{margin-top:var(--sp-7);background:transparent;border-color:var(--n-200)}
/* ============================================================
SEGURANÇA: o que a plataforma faz, o que nunca faz
Desconfiança se desarma nomeando o que não acontece, não
listando atributo em tabela neutra. Mesma gramática de dois
lados que os módulos e a trilha já usam.
============================================================ */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-8)}
@media(max-width:800px){.seg{grid-template-columns:1fr}}
/* O primeiro item da direita quebra em duas linhas e o da esquerda em uma,
então os pares saíam desalinhados. Com subgrid o rótulo e os três itens
dividem a mesma régua nas duas colunas, e as colunas ficam da mesma altura. */
@supports (grid-template-rows: subgrid){
.seg{grid-template-rows:auto repeat(3,auto)}
.seg__col{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.seg__l{display:contents}
.seg__r{margin-bottom:var(--sp-6)}
}
.seg__col{border-radius:var(--r-lg);padding:var(--sp-6)}
.seg__col--faz{background:rgba(243,236,220,.09);border:1px solid rgba(243,236,220,.28)}
.seg__col--nao{background:rgba(20,23,15,.42);border:1px solid rgba(243,236,220,.16)}
.seg__r{display:flex;align-items:center;gap:9px;font-size:var(--t-micro);font-weight:600;
letter-spacing:.13em;text-transform:uppercase}
.seg__r::before{content:"";width:11px;height:3px;border-radius:1px}
.seg__col--faz .seg__r{color:var(--semente)}
.seg__col--faz .seg__r::before{background:var(--semente)}
.seg__col--nao .seg__r{color:var(--musgo)}
.seg__col--nao .seg__r::before{background:var(--musgo)}
.seg__l{list-style:none;margin:var(--sp-7) 0 0;padding:0}
.seg__l li{padding:var(--sp-4) 0;border-top:1px solid rgba(243,236,220,.14);
font-size:var(--t-rotulo);line-height:1.5;color:#D3DEC8}
.seg__l li:first-child{border-top:0;padding-top:0}
.seg__l b{display:block;font-size:var(--t-corpo-g);font-weight:700;color:var(--semente);
letter-spacing:-.012em;margin-bottom:3px}
/* ============================================================
JORNADA EM LADRILHOS
Mesma gramática dos módulos, para a página não trocar de
idioma na metade de baixo.
============================================================ */
.jts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
/* "As campanhas se adaptam" quebra em duas linhas e as outras duas em uma,
então a lista começava mais embaixo num card do que nos outros. Com subgrid
as três faixas (rótulo, título, lista) dividem a mesma régua horizontal. */
@supports (grid-template-rows: subgrid){
.jts{grid-template-rows:auto auto 1fr}
.jt{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.jt__l{align-self:start}
}
@media(max-width:900px){.jts{grid-template-columns:1fr}}
.jt{border-radius:var(--r-lg);padding:var(--sp-6)}
.jt--cla{background:linear-gradient(180deg,var(--g-claro) 0%,var(--g-cheio) 100%)}
.jt--esc{background:linear-gradient(180deg,var(--g-fundo) 0%,var(--g-poco) 100%)}
.jt__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.6)}
.jt h3{margin-top:var(--sp-2);font-size:var(--t-titulo);line-height:1.08;color:var(--semente);
letter-spacing:-.03em;font-variation-settings:'wdth' 100}
.jt__p{display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--sp-3);
padding:var(--sp-4) 0;border-top:1px solid rgba(255,255,255,.16)}
.jt__l{margin-top:var(--sp-5)}
.jt__p i{font-style:normal;font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;padding-top:3px}
.jt__p b{display:block;font-size:var(--t-corpo);font-weight:600;color:var(--semente);line-height:1.3}
.jt__p span{display:block;margin-top:3px;font-size:var(--t-rotulo);line-height:1.5;color:#D3DEC8}
/* ============================================================
APROXIMAÇÃO DO DONORBOX
Medidas tiradas do site deles: ladrilho com raio 32 e degradê
claro para azul na diagonal, botão de raio 5, título 36/700
sem tracking negativo, corpo em 18, e o círculo de ação no
canto do cartão.
============================================================ */
/* a unidade da marca não arredonda junto: ela é quadrada por definição */
.u,.malha i,.camp .barra i,.capa__u i,.sec__prog i,.card__marca i,.vB__u i,
.parceiros__r::before,.trilha__lado::before,.lados__r::before,.matriz__lado::before{
border-radius:1px}
/* ladrilho de módulo no formato deles */
.jt,.ladrilho{border-radius:var(--r-lg);overflow:hidden;padding:var(--sp-7) var(--sp-6) 0}
.jt--cla,.ladrilho--cla{background:linear-gradient(299deg,var(--g-suave,#8FA987) 6%,var(--g-cheio) 98%)}
.jt--esc,.ladrilho--esc{background:linear-gradient(299deg,var(--g-claro) 6%,var(--g-poco) 98%)}
.jt,.ladrilho{padding-bottom:var(--sp-7)}
.jt h3,.ladrilho h3{letter-spacing:-.012em;font-weight:700}
/* título de seção centralizado, do tamanho e do peso deles */
.h2c{font-weight:700;letter-spacing:-.012em;max-width:26ch}
.h2c__ap{font-size:var(--t-corpo-g);color:var(--n-500)}
/* cartões claros também arredondam */
.card,.campo,.hj,.vago,.trilha,.previa{border-radius:var(--r-md)}
.trilha,.card--escuro,.campo--vidro{border-radius:var(--r-lg)}
.est{border-radius:var(--r-md)}
.anuncio a{text-underline-offset:4px}
/* contraste dentro do ladrilho claro, que ficou lavado com o degradê novo */
.jt--cla .jt__r{color:#F0F4E9}
.jt--cla .jt__p span,.ladrilho--cla p{color:#E9EFE1}
.jt--cla .jt__p i{color:#E4EADB}
.jt--cla .jt__r,.ladrilho--cla .ladrilho__n{color:rgba(255,255,255,.78)}
/* os dois botões do herói cabem lado a lado */
.hero .btn--lg{padding:0 var(--sp-5)}
@media(max-width:520px){.hero .btn--lg{width:100%}}
/* ============================================================
COLAGEM DO HERÓI
O lado direito deixa de ser um cartão chapado e passa a ser
três peças sobrepostas sobre dois arcos, que é a construção
do herói do Donorbox. Aqui as peças são dado nosso.
============================================================ */
.colagem{position:relative;min-height:600px}
.colagem__arco{position:absolute;inset:-40px -70px -40px -20px;pointer-events:none;z-index:0}
.colagem__arco circle{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.5}
.colagem__pri{position:relative;z-index:2;margin-left:auto;margin-bottom:150px;
max-width:452px;background:var(--n-0);border-radius:var(--r-lg);padding:var(--sp-6);
box-shadow:0 30px 70px -34px rgba(12,22,10,.85)}
.colagem__selo{position:absolute;right:-14px;top:-16px;z-index:4;
background:var(--acao);color:#FFFFFF;font-size:var(--t-micro);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
box-shadow:0 12px 28px -12px rgba(12,22,10,.7)}
.colagem__sec{position:absolute;left:-8px;bottom:0;z-index:3;width:296px;
background:var(--n-0);border-radius:var(--r-md);padding:var(--sp-5);
box-shadow:0 24px 54px -26px rgba(12,22,10,.8)}
.colagem__sec h4{font-size:var(--t-rotulo);font-weight:700;color:var(--n-900);
letter-spacing:-.012em;margin-bottom:var(--sp-2)}
.dl{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
padding:9px 0;border-top:1px solid var(--n-50);font-size:var(--t-nota);color:var(--n-700)}
.dl:first-of-type{border-top:0}
.dl b{font-weight:600;color:var(--n-900)}
.et{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
padding:3px 8px;border-radius:999px}
.et--rec{background:var(--acao-tint);color:var(--acao-2)}
.et--uni{background:var(--acento-tint);color:var(--acento-600)}
/* o cartão é claro dentro do campo ultramar: a paleta das unidades volta */
.colagem__pri .u{background:var(--u-prev)}
.colagem__pri .u--r{background:var(--u-receb)}
.colagem__pri .u--c{background:var(--u-comp)}
.colagem__pri .campo__t,.colagem__pri .campo__v{color:var(--n-900)}
.colagem__pri .campo__v span{color:var(--n-400)}
.colagem__pri .campo__l{color:var(--n-400);border-top-color:var(--n-50)}
.colagem__pri .malha-leg{color:var(--n-500)}
@media(max-width:1100px){
.colagem{min-height:0}
.colagem__arco{display:none}
.colagem__pri{margin:0 0 var(--sp-4);max-width:none}
.colagem__sec{position:static;width:auto}
}
/* ============================================================
A PALETA NOMEADA NO LUGAR
Terra é o fundo escuro e a tinta principal. Semente é o claro,
e branco puro não existe. Mata é o verde da marca. Broto é
apoio: ícone, etiqueta e o estado "recebida" da unidade.
Musgo é texto secundário e fio sobre escuro. Sol é a única
coisa quente, e mora só no botão primário e no selo de fase.
============================================================ */
.ultra .u--r,.campo--vidro .u--r{background:var(--broto)}
/* o marcador quadrado do lado de quem administra */
.trilha__lado--adm::before,.lados__c--adm .lados__r::before,
.matriz__lado--adm::before{background:var(--musgo)}
/* e o fio vertical da coluna, que é borda e não fundo */
.vB__lado--adm{border-left-color:var(--musgo)}
.pl--m{background:var(--acao-tint);color:var(--acao-2)}
.pl--u{background:var(--acento-tint);color:var(--mata)}
/* o botão único do herói, na escala que a Donorbox usa na abertura */
.btn--heroi{height:58px;padding:0 var(--sp-10);min-width:340px;font-size:var(--t-bloco);
font-weight:700;letter-spacing:-.012em}
@media(max-width:600px){.btn--heroi{width:100%;min-width:0;padding:0 var(--sp-5);
height:54px;font-size:var(--t-corpo-g)}}
/* ============================================================
AVISO DE GRATUIDADE
Fica logo abaixo do botão primário. Não é nota de rodapé: é
remoção de risco, então tem tamanho de texto de leitura e o
quadrado da marca como marcador.
============================================================ */
.gratis{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);
font-size:var(--t-corpo);font-weight:600;color:var(--n-600)}
.gratis span{flex:none;width:9px;height:9px;border-radius:1px;background:var(--acento-600)}
.ultra .gratis,.hero .gratis{color:#DCE6D5}
.ultra .gratis span,.hero .gratis span{background:var(--broto)}
.gratis--dir{justify-content:flex-end}
/* a gratuidade mora dentro do próprio botão: uma chamada em duas linhas,
e não um aviso solto embaixo dela */
/* o botão do herói com pedestal: a ação numa linha rosa, e a condição
numa base de vidro escuro soldada embaixo, com o quadrado da marca */
.ped{display:inline-flex;flex-direction:column;align-items:stretch;min-width:340px}
.ped__btn{display:flex;align-items:center;justify-content:center;height:58px;
padding:0 var(--sp-9);border-radius:var(--r-sm) var(--r-sm) 0 0;
background:var(--acao);color:#FFFFFF;font-size:var(--t-bloco);font-weight:600;
text-decoration:none;transition:background var(--t)}
.ped__btn:hover{background:var(--acao-2);color:#FFFFFF}
.ped__base{display:flex;align-items:center;justify-content:center;gap:10px;
padding:9px var(--sp-4);border-radius:0 0 var(--r-sm) var(--r-sm);
background:rgba(20,23,15,.42);border:1px solid rgba(255,255,255,.14);border-top:0;
font-size:var(--t-nota);font-weight:500;color:#DCE6D5;letter-spacing:.01em}
.ped__base i{width:8px;height:8px;background:var(--broto);flex:none}
@media(max-width:600px){.gratis{font-size:var(--t-rotulo)}
.ped{width:100%;min-width:0}
.ped__btn{height:54px;padding:0 var(--sp-5);font-size:var(--t-corpo-g)}}
/* ============================================================
PLANOS E GRADE DE COMPARAÇÃO
Três colunas sem preço nenhum, e embaixo a grade em grupos
nomeados, que é o que faz a diferença entre os planos ser
legível — coluna sozinha só diz o que tem, grade diz o que
muda. A marca de "incluído" não é um certo genérico: é a
unidade quadrada do sistema, nos três estados que o produto
já usa na lâmina — cheia para incluído, bege para
customização e vazia para não incluído.
============================================================ */
/* cartao termina onde o conteudo dele termina: esticar os tres ate a altura
do mais alto abria trezentos pixels de vazio no pe dos outros dois */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:start}
.plano{position:relative;display:flex;flex-direction:column;background:var(--n-0);
border:1px solid var(--n-100);border-radius:var(--r-md);padding:var(--sp-7) var(--sp-6)}
.plano--dest{border-color:var(--acento-600);box-shadow:var(--sombra-2)}
.plano__sel{position:absolute;top:-11px;left:var(--sp-6);background:var(--acento-600);color:var(--n-0);
font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
padding:3px var(--sp-3);border-radius:var(--r-xs)}
.plano__u{display:flex;gap:4px;margin-bottom:var(--sp-5)}
.plano__u i{width:10px;height:10px;border-radius:1px;background:var(--n-100);display:block}
.plano__u i.on{background:var(--acento-600)}
.plano__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--n-500)}
.plano__d{margin-top:var(--sp-2);font-size:var(--t-titulo);font-weight:700;letter-spacing:-.012em;
color:var(--n-900);line-height:1.2;min-height:calc(2 * 1.2em)} /* duas linhas fixas, como o paragrafo:
descritor de altura variavel desalinhava os tres botoes */
.plano__p{margin-top:var(--sp-3);font-size:var(--t-rotulo);line-height:1.55;color:var(--n-500);
min-height:calc(3 * 1.55em)} /* tres linhas fixas para os tres botoes ficarem na mesma altura */
/* A herança entre planos é o argumento comercial do cartão de cima: quem
contrata a Rede leva tudo o que a Instituição tem. Isso estava escrito numa
sobrancelha de 11px em tinta secundária, a coisa mais fraca do cartão. Agora
é tarja, com o quadrado da marca e a tinta de acento, e o rótulo da lista
fica só com o que sobra dele: "E mais". */
.plano__h{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 0;
padding:var(--sp-4) var(--sp-4);background:var(--acento-tint);border-radius:var(--r-sm);
font-size:var(--t-rotulo);line-height:20px;color:var(--acento-600)}
.plano__h i{flex:none;width:12px;height:12px;background:var(--acento-600)}
.plano__h b{font-weight:700}
.plano__h span{flex:1 1 auto;min-width:0}
.plano__h em{flex:none;font-style:normal;font-size:var(--t-nota);font-weight:600;
color:var(--acento-600);opacity:.72;font-variant-numeric:tabular-nums}
/* os cartões de plano vivem dentro de .ultra, que pinta todo descendente com
a tinta clara de chão escuro. A tarja é um
sobre fundo claro, então precisa
reconquistar a própria cor com a mesma especificidade. */
.ultra .plano__h{color:var(--acento-600)}
.plano__h + .plano__q{margin-top:var(--sp-5);padding-top:0;border-top:0}
.plano__q{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--n-50);
font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--n-500)}
.plano__l{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.plano__l li{display:grid;grid-template-columns:9px 1fr;gap:var(--sp-3);align-items:start;
font-size:var(--t-rotulo);line-height:1.5;color:var(--n-700)}
.plano__l li::before{content:"";width:9px;height:9px;border-radius:1px;background:var(--acento-600);
margin-top:6px}
/* o botao vem antes da lista, e nao depois: colado no fim ele obrigava os
cartoes curtos a abrir um vazio ate a base do mais alto */
.plano__b{margin-top:var(--sp-6)}
.plano__b .btn{width:100%}
@media(max-width:900px){.planos{grid-template-columns:1fr}}
/* texto só para leitor de tela: a marca da grade é um quadrado, e quadrado
não se lê em voz alta */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
/* Cartão de plano e de customização têm chão próprio e claro, então a tinta
deles não pode seguir a do campo escuro. Sem isto o parágrafo do cartão sai
claro sobre claro — foi o que aconteceu quando a seção de customizações caiu
no .ultra, a 1,1:1. Mesma família da armadilha do .ultra a vencendo .btn--1. */
.ultra .plano__d{color:var(--n-900)}
.ultra .plano__p{color:var(--n-500)}
.ultra .plano__l li{color:var(--n-700)}
.ultra .plano__r,.ultra .plano__q{color:var(--n-500)}
.ultra .custom__m{color:var(--acento-600)}
/* ============================================================
ABERTURA CENTRADA, PARA PÁGINA DE DECISÃO
Attio, Donorbox e Subsplash abrem a página de preço com texto
centrado em chão claro, e o motivo é bom: comparação pede
chão neutro. Campo escuro é ótimo para narrativa e péssimo
para tabela, porque obriga o olho a trocar de polaridade
duas linhas depois. O fundo é a malha da marca: as unidades
se enchendo de prevista para recebida e comprovada, que é o
mesmo ciclo que a grade da página mostra parada.
============================================================ */
.capa-c{position:relative;overflow:hidden;background:var(--n-0);text-align:center;
padding-top:calc(var(--sec-y) + 24px);padding-bottom:calc(var(--sec-y) + 8px);
border-bottom:1px solid var(--n-100)}
.capa-c::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.75;
background-image:linear-gradient(var(--n-50) 1px, transparent 1px),
linear-gradient(90deg, var(--n-50) 1px, transparent 1px);
background-size:24px 24px;
-webkit-mask-image:radial-gradient(112% 88% at 50% 46%, transparent 0 28%, #000 66%);
mask-image:radial-gradient(112% 88% at 50% 46%, transparent 0 28%, #000 66%)}
/* as unidades soltas: ficam nas beiradas e somem atrás do texto, para nunca
disputar leitura com a manchete */
.capa-c__u{position:absolute;inset:0;pointer-events:none;z-index:0;
-webkit-mask-image:radial-gradient(102% 84% at 50% 46%, transparent 0 33%, #000 70%);
mask-image:radial-gradient(102% 84% at 50% 46%, transparent 0 33%, #000 70%)}
.capa-c__u i{position:absolute;width:18px;height:18px;border-radius:1px;
background:var(--n-100);animation:semear 7s ease-in-out infinite}
/* A onda varre na diagonal, com atraso proporcional à posição da unidade na
grade: sorteio puro pisca sem sentido nenhum e o olho lê como ruído, enquanto
a varredura lê como semeadura passando pelo canteiro. O ciclo é o mesmo da
lâmina — prevista, recebida, comprovada — e a unidade cresce um fio ao encher,
que é o que faz o movimento existir sem precisar de cor forte. */
@keyframes semear{
0%,6%{background:var(--n-100);transform:scale(.72)}
16%{background:var(--u-prev);transform:scale(.88)}
30%{background:var(--u-receb);transform:scale(1)}
44%,56%{background:var(--u-comp);transform:scale(1)}
78%,100%{background:var(--n-100);transform:scale(.72)}
}
@media(prefers-reduced-motion:reduce){.capa-c__u i{animation:none;background:var(--n-100)}}
.capa-c__in{position:relative;z-index:1}
.capa-c .migalha{justify-content:center}
.capa-c h1{max-width:21ch;margin:var(--sp-5) auto 0}
.capa-c .lede{max-width:58ch;margin:var(--sp-5) auto 0;font-size:var(--t-corpo-g)}
.capa-c__nota{margin-top:var(--sp-6);font-size:var(--t-rotulo);color:var(--n-500)}
@media(max-width:640px){
.capa-c h1{max-width:none}
.capa-c__u{display:none}
}
/* ============================================================
A FAIXA DOS PLANOS, NO CAMPO ESCURO
Três cartões claros sobre o verde cheio. Página inteira em
creme deixava os cartões sem peso nenhum — creme sobre creme
é o acabamento que faz um comparativo parecer rascunho. O do
meio cresce dezesseis pixels para cada lado e ganha a mesma
medida em recheio, então ele é maior sem que o conteúdo dos
três saia de linha: botão com botão, lista com lista.
============================================================ */
.sec--planos{padding-top:calc(var(--sec-y) + 20px);padding-bottom:calc(var(--sec-y) + 20px)}
.plano{transition:transform var(--t),box-shadow var(--t)}
.ultra .plano{box-shadow:0 12px 32px -20px rgba(0,0,0,.6)}
.plano:hover{transform:translateY(-3px)}
.plano--dest{border-color:var(--acento-600);
margin-top:-16px;margin-bottom:-16px;
padding-top:calc(var(--sp-7) + 16px);padding-bottom:calc(var(--sp-7) + 16px)}
.ultra .plano--dest{box-shadow:0 28px 54px -24px rgba(0,0,0,.66)}
/* no campo escuro a etiqueta precisa inverter: Mata sobre Mata some */
.ultra .plano__sel{background:var(--semente);color:var(--g-poco)}
.plano__u i{width:12px;height:12px}
@media(max-width:900px){
.plano--dest{margin-top:0;margin-bottom:0}
}
/* texto só para leitor de tela: a marca da grade é um quadrado, e quadrado
não se lê em voz alta */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap;border:0}
/* Cartão de plano e de customização têm chão próprio e claro, então a tinta
deles não pode seguir a do campo escuro. Sem isto o parágrafo do cartão sai
claro sobre claro — foi o que aconteceu quando a seção de customizações caiu
no .ultra, a 1,1:1. Mesma família da armadilha do .ultra a vencendo .btn--1. */
.ultra .plano__d{color:var(--n-900)}
.ultra .plano__p{color:var(--n-500)}
.ultra .plano__l li{color:var(--n-700)}
.ultra .plano__r,.ultra .plano__q{color:var(--n-500)}
.ultra .custom__m{color:var(--acento-600)}
/* ============================================================
ABERTURA CENTRADA, PARA PÁGINA DE DECISÃO
Attio, Donorbox e Subsplash abrem a página de preço com texto
centrado em chão claro, e o motivo é bom: comparação pede
chão neutro. Campo escuro é ótimo para narrativa e péssimo
para tabela, porque obriga o olho a trocar de polaridade
duas linhas depois. O fundo é a malha da marca: as unidades
se enchendo de prevista para recebida e comprovada, que é o
mesmo ciclo que a grade da página mostra parada.
============================================================ */
.capa-c{position:relative;overflow:hidden;background:var(--n-0);text-align:center;
padding-top:calc(var(--sec-y) + 24px);padding-bottom:calc(var(--sec-y) + 8px);
border-bottom:1px solid var(--n-100)}
.capa-c::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.75;
background-image:linear-gradient(var(--n-50) 1px, transparent 1px),
linear-gradient(90deg, var(--n-50) 1px, transparent 1px);
background-size:24px 24px;
-webkit-mask-image:radial-gradient(112% 88% at 50% 46%, transparent 0 28%, #000 66%);
mask-image:radial-gradient(112% 88% at 50% 46%, transparent 0 28%, #000 66%)}
/* as unidades soltas: ficam nas beiradas e somem atrás do texto, para nunca
disputar leitura com a manchete */
.capa-c__u{position:absolute;inset:0;pointer-events:none;z-index:0;
-webkit-mask-image:radial-gradient(102% 84% at 50% 46%, transparent 0 33%, #000 70%);
mask-image:radial-gradient(102% 84% at 50% 46%, transparent 0 33%, #000 70%)}
.capa-c__u i{position:absolute;width:18px;height:18px;border-radius:1px;
background:var(--n-100);animation:semear 7s ease-in-out infinite}
/* A onda varre na diagonal, com atraso proporcional à posição da unidade na
grade: sorteio puro pisca sem sentido nenhum e o olho lê como ruído, enquanto
a varredura lê como semeadura passando pelo canteiro. O ciclo é o mesmo da
lâmina — prevista, recebida, comprovada — e a unidade cresce um fio ao encher,
que é o que faz o movimento existir sem precisar de cor forte. */
@keyframes semear{
0%,6%{background:var(--n-100);transform:scale(.72)}
16%{background:var(--u-prev);transform:scale(.88)}
30%{background:var(--u-receb);transform:scale(1)}
44%,56%{background:var(--u-comp);transform:scale(1)}
78%,100%{background:var(--n-100);transform:scale(.72)}
}
@media(prefers-reduced-motion:reduce){.capa-c__u i{animation:none;background:var(--n-100)}}
.capa-c__in{position:relative;z-index:1}
.capa-c .migalha{justify-content:center}
.capa-c h1{max-width:21ch;margin:var(--sp-5) auto 0}
.capa-c .lede{max-width:58ch;margin:var(--sp-5) auto 0;font-size:var(--t-corpo-g)}
.capa-c__nota{margin-top:var(--sp-6);font-size:var(--t-rotulo);color:var(--n-500)}
@media(max-width:640px){
.capa-c h1{max-width:none}
.capa-c__u{display:none}
}
/* ============================================================
A FAIXA DOS PLANOS, NO CAMPO ESCURO
Três cartões claros sobre o verde cheio. Página inteira em
creme deixava os cartões sem peso nenhum — creme sobre creme
é o acabamento que faz um comparativo parecer rascunho. O do
meio cresce dezesseis pixels para cada lado e ganha a mesma
medida em recheio, então ele é maior sem que o conteúdo dos
três saia de linha: botão com botão, lista com lista.
============================================================ */
.sec--planos{padding-top:calc(var(--sec-y) + 20px);padding-bottom:calc(var(--sec-y) + 20px)}
.plano{transition:transform var(--t),box-shadow var(--t)}
.ultra .plano{box-shadow:0 12px 32px -20px rgba(0,0,0,.6)}
.plano:hover{transform:translateY(-3px)}
.plano--dest{border-color:var(--acento-600);
margin-top:-16px;margin-bottom:-16px;
padding-top:calc(var(--sp-7) + 16px);padding-bottom:calc(var(--sp-7) + 16px)}
.ultra .plano--dest{box-shadow:0 28px 54px -24px rgba(0,0,0,.66)}
/* no campo escuro a etiqueta precisa inverter: Mata sobre Mata some */
.ultra .plano__sel{background:var(--semente);color:var(--g-poco)}
.plano__u i{width:12px;height:12px}
@media(max-width:900px){
.plano--dest{margin-top:0;margin-bottom:0}
}
/* Customizações: o que não é degrau de plano porque custa por cliente
toda vez. Fica fora da grade de propósito, para não parecer que a
organização perdeu alguma coisa por estar no plano de baixo. */
.custom{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.custom__i{border:1px solid var(--n-100);border-radius:var(--r-md);background:var(--n-15);
padding:var(--sp-6) var(--sp-5)}
.custom__t{font-weight:700;color:var(--n-900);font-size:var(--t-bloco);letter-spacing:-.01em}
.custom__p{margin-top:var(--sp-3);font-size:var(--t-rotulo);line-height:1.55;color:var(--n-500)}
.custom__m{display:inline-block;margin-top:var(--sp-4);font-size:var(--t-micro);font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--acento-600)}
@media(max-width:900px){.custom{grid-template-columns:1fr}}
/* Dois planos em vez de três: os cartões ficam mais largos e o miolo não pode
esparramar, senão a linha de leitura passa de setenta caracteres. */
.planos--2{grid-template-columns:repeat(2,1fr);max-width:1000px;margin:0 auto}
.planos--2 .plano{padding:var(--sp-8) var(--sp-7)}
.planos--2 .plano--dest{padding-top:calc(var(--sp-8) + 16px);padding-bottom:calc(var(--sp-8) + 16px)}
.planos--2 .plano__d{font-size:var(--d-2);min-height:0}
.planos--2 .plano__r{font-size:var(--t-micro)}
.planos--2 .plano__p{min-height:calc(2 * 1.55em)}
@media(max-width:900px){.planos--2{grid-template-columns:1fr}}
/* ============================================================
MÓDULOS
Cartão claro sobre o chão de areia, para levantar do plano em
vez de sumir nele — creme sobre creme foi o que fez a versão
anterior parecer rascunho. A marca de cada um é o quadrado com
o mais: módulo é a unidade que se soma, e é o mesmo quadrado
que atravessa o site inteiro.
============================================================ */
.sec--mods{padding-top:calc(var(--sec-y) + 8px)}
/* abertura centrada, como a capa da página: a seção fica com um eixo só e a
coluna dupla, que desencontrava título curto com texto longo, sai de cena */
.mods__cab{text-align:center}
.mods__cab h2{margin:var(--sp-3) auto 0;max-width:22ch}
.mods__cab .lede{margin:var(--sp-4) auto 0;max-width:64ch}
/* auto-rows em 1fr: sem isso cada fila tem a sua altura e os seis cartões
não batem entre si, só dentro da própria linha */
.mods{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
gap:var(--sp-5);margin-top:var(--sp-8)}
.mods__i{position:relative;background:var(--n-0);border:1px solid var(--n-100);
border-radius:var(--r-md);padding:var(--sp-7) var(--sp-6);
display:flex;flex-direction:column;box-shadow:var(--sombra-1);
transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.mods__i:hover{transform:translateY(-3px);box-shadow:var(--sombra-2);border-color:var(--n-200)}
/* a arte do módulo: composição feita da unidade quadrada da marca, na mesma
grade do resto do site. Altura fixa para as seis ficarem na mesma linha de
base, largura livre porque cada desenho tem a sua. */
/* o ícone dentro do círculo de fio: dá moldura sem o peso do bloco de cor,
e assim a faixa de planos continua sendo a única área pesada da página */
.mods__cont{display:flex;align-items:center;justify-content:center;flex:none;
width:52px;height:52px;border-radius:50%;border:1px solid var(--n-200);
color:var(--acento-600);margin-bottom:var(--sp-6);transition:border-color var(--t)}
.mods__cont svg{width:24px;height:24px}
.mods__i:hover .mods__cont{border-color:var(--acento-600)}
/* duas linhas fixas no título e quatro no texto: título que quebra em duas
empurrava o parágrafo, e parágrafo curto deixava o fio subindo e descendo
de cartão para cartão */
.mods__t{font-size:var(--t-bloco);line-height:1.3;color:var(--n-900);min-height:calc(2 * 1.3em)}
.mods__p{margin-top:var(--sp-3);font-size:var(--t-rotulo);line-height:1.6;color:var(--n-600);
min-height:calc(4 * 1.6em)}
.mods__l{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--n-50);
/* pinado no pé: título de duas linhas desalinhava o selo dentro da mesma fila */
font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--acento-600)}
.mods__pe{margin-top:var(--sp-7);font-size:var(--t-rotulo);color:var(--n-500);max-width:74ch}
.mods__pe b{font-weight:600;color:var(--n-700)}
/* os cartões de módulo em chão escuro: o cartão é claro, então a tinta
interna não pode herdar a paleta clara do .ultra */
.ultra .mods__t{color:var(--n-900)}
.ultra .mods__p{color:var(--n-600)}
.ultra .mods__i .mods__l{color:var(--acento-600)}
@media(max-width:1100px){.mods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
.mods__cab{grid-template-columns:1fr;gap:var(--sp-5);align-items:start}
.mods{grid-template-columns:1fr}
}
/* ============================================================
O ATO DOIS DA PLATAFORMA: OS SETE MÓDULOS EM LINHAS
A linha verde sangra de ponta a ponta e inverte a tinta; a
clara fica no creme. Alternar sem inverter não adianta — verde
e creme se anulam e viram listra. O visual troca de lado a
cada módulo, então o olho nunca encontra a mesma composição
duas vezes seguidas.
============================================================ */
.pnav{position:sticky;top:88px;z-index:40;background:var(--n-0);
border-bottom:1px solid var(--n-100)}
@media(max-width:1279px){.pnav{top:76px}}
.pnav .subnav{border-bottom:0;gap:var(--sp-6)}
.pnav .subnav a{font-size:var(--t-rotulo)}
.pmod{padding:var(--sec-y) 0;scroll-margin-top:148px}
.pmod__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--sp-10);align-items:start}
.pmod--inv .pmod__txt{order:2}
.pmod__txt .lede{max-width:52ch}
@media(max-width:900px){
.pmod__in{grid-template-columns:1fr;gap:var(--sp-7)}
.pmod--inv .pmod__txt{order:0}
}
/* os visuais: componentes do site montados com dado de demonstração */
.pv{background:var(--n-0);box-shadow:var(--sombra-2)}
.pv__lin{margin-top:var(--sp-5)}
.pv__cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.pv__cab b{font-size:var(--t-corpo-g);color:var(--n-900);font-weight:600}
.pv__cab span{font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--acento-600)}
.pv__selo{display:inline-block;margin-bottom:var(--sp-4);background:var(--acao);color:#FFFFFF;
font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
padding:3px var(--sp-3);border-radius:var(--r-xs)}
.pv .dl i{display:inline-block;width:9px;height:9px;border-radius:1px;margin-right:9px}
.pv__p1{background:var(--u-comp)} .pv__p2{background:var(--u-receb)}
.pv__p3{background:var(--u-prev)} .pv__p4{background:var(--n-300)}
.pv__cores{display:inline-flex;gap:4px}
.pv__cores i{width:14px;height:14px;border-radius:2px;margin:0}
.pv__janela{display:flex;align-items:center;gap:6px;padding:8px var(--sp-3);
background:var(--n-25);border:1px solid var(--n-100);border-radius:var(--r-sm)}
.pv__pt{width:7px;height:7px;border-radius:50%;background:var(--n-200)}
.pv__url{margin-left:var(--sp-2);font-size:var(--t-nota);color:var(--n-500)}
.pv__conversa{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}
.pv__bal{font-size:var(--t-rotulo);line-height:1.5;padding:var(--sp-3) var(--sp-4);
border-radius:var(--r-md);max-width:88%}
.pv__bal--e{background:var(--n-25);color:var(--n-700);align-self:flex-start;
border-bottom-left-radius:var(--r-xs)}
.pv__bal--d{background:var(--acento-tint);color:var(--n-800);align-self:flex-end;
border-bottom-right-radius:var(--r-xs)}
/* ============================================================
CAPTURA DE TELA DO PRODUTO
A tela é a única imagem do site inteiro, e por isso ganha
palco: fica sobre o campo cheio da marca, com a borda clara
por cima, para não parecer recorte colado no meio do texto.
============================================================ */
.tela{margin:var(--sp-9) 0 0;padding:var(--sp-7);border-radius:var(--r-md);
background:linear-gradient(150deg,var(--g-suave) 0%,var(--g-cheio) 62%,var(--g-fundo) 100%)}
.tela img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.24);
box-shadow:0 30px 60px -28px rgba(0,0,0,.7);display:block}
.tela figcaption{margin-top:var(--sp-4);font-size:var(--t-nota);color:#C2D0B8;text-align:center}
.sec--areia .tela,.sec .tela{max-width:none}
@media(max-width:640px){.tela{padding:var(--sp-4)}}
/* as âncoras do ato 1 também precisam de folga: sem isto o título fica atrás
do topo grudado do site quando alguém chega pelo link direto */
#portal,#painel,#caminho,#limites{scroll-margin-top:120px}
/* ============================================================
A CAPA DA PLATAFORMA, COM AS DUAS TELAS
O título promete duas plataformas: as duas aparecem juntas,
uma atrás da outra, com o rótulo de cada uma. Sem troca
automática e sem botão — quem não clica é a maioria, e as
duas precisam ser vistas.
Nenhuma das duas é cortada aqui: cada captura já é enquadrada
na origem para terminar onde o último cartão fecha, e recortar
de novo no CSS era o que fazia a tela acabar no meio de uma
linha. A proporção de cada uma vem do arquivo.
============================================================ */
.capa--prod__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:var(--sp-9);align-items:center}
.capa--prod .pill{margin-top:var(--sp-5)}
.capa--prod h1{max-width:17ch}
.capa--prod .lede{max-width:50ch}
.pilha{position:relative;padding-bottom:var(--sp-8)}
.pl{margin:0}
.pl img{width:100%;height:auto;display:block;border-radius:var(--r-sm);
border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.pl figcaption{position:absolute;font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:#C2D0B8}
.pl--adm{width:76%;margin-left:auto}
.pl--adm figcaption{top:-22px;right:0}
.pl--doa{width:57%;position:absolute;left:0;bottom:0}
.pl--doa figcaption{bottom:-22px;left:0}
@media(max-width:900px){
.capa--prod__in{grid-template-columns:1fr;gap:var(--sp-8)}
.pilha{padding-bottom:0}
.pl--adm,.pl--doa{width:100%;position:static;margin:0}
.pl--doa{margin-top:var(--sp-7)}
.pl--adm figcaption,.pl--doa figcaption{position:static;display:block;margin-top:var(--sp-2)}
}
/* ============================================================
O ATO UM: PORTAL E PAINEL, LADO A LADO COM A TELA
Antes eram dois parágrafos e cinco itens antes de a imagem
aparecer — e a imagem repetia a que a capa já mostra. Agora a
tela fica ao lado do texto, cortada no topo, onde mora a
informação, e a lista cai para três itens.
============================================================ */
.pato__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:var(--sp-9);align-items:start}
.pato--inv .pato__txt{order:2}
.pato__txt .lede{max-width:52ch}
.pato__vis{margin:0;position:relative;padding-top:var(--sp-8)}
/* a captura aparece inteira: ela já é enquadrada na origem, terminando onde o
último cartão fecha. Cortar de novo aqui era o que fazia a tela acabar no
meio de uma linha da lista. */
.pato__vis img{width:100%;height:auto;display:block;border-radius:var(--r-sm);
border:1px solid var(--n-100);box-shadow:var(--sombra-2)}
/* A legenda virou rótulo. Antes era uma frase de 13px solta embaixo da imagem,
que repetia o nome que o cabeçalho já dá e gastava o resto se desculpando.
Agora é o mesmo rótulo que a capa usa em cada tela: micro caixa alta, preso
ao alto da moldura, na linha do número da seção. A ressalva de instância de
demonstração aparece uma vez, no fim do 02, que é onde a última das três
telas fecha. */
/* Mesmo corpo e mesma caixa alta do nome da seção, para os dois caírem na mesma
linha: de um lado da tela "01 O PORTAL DE QUEM DOA", do outro "PORTAL · RESUMO".
Os 10px de topo são a distância entre o alto do bloco e a linha de base do
número de 31px, que é quem manda no alinhamento do cabeçalho. */
.pato__vis figcaption{position:absolute;top:10px;left:0;margin:0;font-size:var(--t-rotulo);
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--n-500)}
.pato__aviso{order:3;grid-column:1/-1;margin-top:var(--sp-8);display:flex;gap:var(--sp-3);
align-items:baseline;font-size:var(--t-nota);color:var(--n-500)}
.pato__aviso i{flex:none;width:8px;height:8px;background:var(--n-200);transform:translateY(-1px)}
.chao-campo .pato__aviso,.ultra .pato__aviso{color:#C2D0B8}
.chao-campo .pato__aviso i,.ultra .pato__aviso i{background:rgba(255,255,255,.3)}
.ultra .pato__vis img{border-color:rgba(255,255,255,.22);box-shadow:0 26px 52px -26px rgba(0,0,0,.62)}
.ultra .pato__vis figcaption{color:#C2D0B8}
@media(max-width:900px){
.pato__in{grid-template-columns:1fr;gap:var(--sp-7)}
.pato--inv .pato__txt{order:0}
}
/* ============================================================
A PLACA: O CABEÇALHO DE SEÇÃO
Antes o bloco tinha duas manchetes (o nome em caixa alta
grande e a tese logo abaixo) e a identificação da seção em
11px, o menor tipo da página inteira, carregando número,
nome e onze quadradinhos na mesma linha.
Agora o nome é rótulo de 14px, o mesmo tamanho do link da
barra grudada, e o número cresce para 31px: quem identifica
a seção passa a ser o algarismo, e a tese vira o h2.
Sem fio embaixo: a página já tem a borda de cada seção, a da
barra e a regra entre chãos, e mais onze linhas horizontais
numa rolagem só viram papel pautado.
Os respiros descem 40, 24 e 12, medidos contra a entrelinha
de 28px do texto: acima dela é outra voz, abaixo é o mesmo
fôlego.
============================================================ */
.cabs__olho{display:flex;align-items:baseline;gap:var(--sp-3)}
.cabs__olho .sec__n{font-size:var(--d-num);font-weight:700;line-height:1;
font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;
color:var(--acento-600);text-transform:none}
.cabs__olho b{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--n-600)}
.cabs__olho .sec__n{order:1}
.cabs__olho b{order:2}
/* o build pendura a progressão logo depois do número; a ordem do flex a
devolve para o fim da linha, encostada no fim da coluna */
.cabs__olho .sec__prog{order:3;margin-left:auto;align-self:center;gap:var(--sp-1)}
.cabs__olho .sec__prog i{width:8px;height:8px;background:var(--n-200)}
.cabs__olho .sec__prog i.on{background:var(--acento-600)}
.cabs__t{margin-top:var(--sp-7);font-size:var(--d-2);line-height:36px;letter-spacing:-.012em;
max-width:26ch}
.cabs__t + .lede{margin-top:var(--sp-5)}
.lede + .lede{margin-top:var(--sp-3)}
.pato__txt .lede,.pmod__txt .lede{font-size:var(--t-corpo-g);line-height:28px;color:var(--n-700)}
.ultra .cabs__olho b,.chao-campo .cabs__olho b{color:#C2D0B8}
.ultra .cabs__olho .sec__n,.chao-campo .cabs__olho .sec__n{color:var(--semente)}
.ultra .cabs__t,.chao-campo .cabs__t{color:var(--semente)}
.chao-campo .pato__txt .lede,.chao-campo .pmod__txt .lede{color:#E4EADB}
.chao-campo .cabs__olho .sec__prog i{background:rgba(255,255,255,.28)}
.chao-campo .cabs__olho .sec__prog i.on{background:var(--semente)}
@media(max-width:900px){
.cabs__t{margin-top:var(--sp-6)}
.cabs__t + .lede{margin-top:var(--sp-4)}
.lede + .lede{margin-top:var(--sp-2)}
}
@media(max-width:600px){
.cabs__olho{flex-wrap:wrap}
.cabs__olho .sec__prog{margin-left:0;width:100%;margin-top:var(--sp-3)}
}
/* ============================================================
O CHÃO DA PÁGINA: CAMPO, PAPEL E AREIA
Prefixadas com chao- porque .campo já é o cartão de campanha.
Três chãos nomeados, e a seção diz qual é o dela em vez de
herdar de um ciclo automático. Campo e papel se alternam de
ponta a ponta; areia é o meio-tom e fica reservado às seções
de leitura pesada, onde há tabela ou lista longa.
A tinta acompanha o chão: no campo ela inverte inteira, e é
por isso que .chao-campo declara o conjunto todo e não só a cor de
fundo — foi assim que a página deixou de ter texto claro
sobre chão claro em dois lugares.
============================================================ */
.chao-campo{background:linear-gradient(150deg,var(--g-suave) 0%,var(--g-cheio) 58%,var(--g-fundo) 100%)}
.chao-papel{background:var(--n-0)}
.chao-areia{background:var(--n-25)}
.chao-campo .cabs__t,.chao-campo h2,.chao-campo h3{color:var(--semente)}
.chao-campo .lede{color:#E4EADB}
.chao-campo .detalhes{border-top-color:rgba(255,255,255,.22)}
.chao-campo .detalhes li{color:#D3DEC8;border-bottom-color:rgba(255,255,255,.14)}
.chao-campo .detalhes li::before{background:var(--broto)}
.chao-campo .alerta{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.chao-campo .alerta b{color:var(--semente)}
.chao-campo .alerta div{color:#D3DEC8}
.chao-campo .alerta svg{color:var(--broto)}
.chao-campo .pv,.chao-campo .pato__vis img{box-shadow:0 26px 52px -26px rgba(0,0,0,.62)}
.chao-campo .pato__vis img{border-color:rgba(255,255,255,.22)}
.chao-campo .pato__vis figcaption{color:#C2D0B8}
/* a borda entre seções só existe entre dois chãos claros: entre campo e papel
a própria troca de cor já é o limite */
.chao-papel + .chao-papel,.chao-papel + .chao-areia,.chao-areia + .chao-papel{border-top:1px solid var(--n-100)}
.sec.chao-campo,.pmod.chao-campo{border-bottom:0}
/* ============================================================
03 · DOIS TRILHOS
O desenho antigo era um fluxograma de três caixas iguais com
a Sementeira pendurada por um tracejado saindo do meio da
linha do dinheiro. Tracejado é ligação fraca, mas ainda é
ligação: o desenho dizia "passa um pouquinho", contra um
título que diz que não passa nada.
Agora são duas faixas que nunca se cruzam. Em cima o dinheiro,
que é da organização; embaixo o registro, que é nosso. A
separação carrega o argumento sozinha, sem precisar de seta.
A faixa de cima é contínua e a de baixo tracejada porque uma
é liquidação e a outra é lançamento. A última parada de cada
trilho é quadrado cheio: é destino, não mais uma parada.
============================================================ */
.tr{margin-top:var(--sp-8)}
.tr__r{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--n-500)}
.tr__r em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:400;
color:var(--n-400);margin-left:var(--sp-3)}
.tr__p{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--acento-600)}
.tr__f--nos .tr__p{border-top-color:var(--n-300);border-top-style:dashed}
.tr__p li{position:relative;padding:var(--sp-6) var(--sp-6) var(--sp-6) 0}
/* o miolo do quadrado é da cor do papel do documento, para o fio passar
por trás e não atravessar a marca da parada */
.tr__p li::before{content:"";position:absolute;top:-9px;left:0;width:12px;height:12px;
border:2px solid var(--acento-600);background:var(--n-0)}
.tr__f--nos .tr__p li::before{border-color:var(--n-300)}
.tr__p li.on::before{top:-8px;width:14px;height:14px;border:0;background:var(--acento-600)}
.tr__f--nos .tr__p li.on::before{background:var(--n-400)}
.tr__p b{display:block;font-size:var(--t-bloco);color:var(--n-900)}
.tr__p span{display:block;margin-top:var(--sp-2);font-size:var(--t-nota);line-height:20px;
color:var(--n-500);max-width:30ch}
.tr__muro{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-7) 0;
padding:var(--sp-4) 0;border-top:1px solid var(--n-200);border-bottom:1px solid var(--n-200);
font-size:var(--t-rotulo);font-weight:600;color:var(--n-700)}
.tr__muro i{flex:none;width:14px;height:14px;background:var(--acento-600)}
/* O DOCUMENTO
As duas faixas moram dentro de uma peça de papel com cabeçalho, borda e
sombra, em vez de flutuarem sobre o chão da seção. A seção 02, logo acima,
já é a mancha escura da página em tela cheia: um painel escuro aqui poria
duas manchas seguidas e as duas se anulariam. O peso vem de moldura, de
papel sobre areia e de uma tarja só.
A tarja do muro sangra até a borda do documento (as margens negativas), para
ela dividir a peça em duas metades em vez de ser mais um parágrafo dentro. */
.doc{margin-top:var(--sp-8);background:var(--n-0);border:1px solid var(--n-100);
border-radius:var(--r-md);box-shadow:var(--sombra-2);overflow:hidden}
.doc__c{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);
flex-wrap:wrap;padding:var(--sp-5) var(--sp-7);border-bottom:1px solid var(--n-100);
background:var(--n-15)}
.doc__c b{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--n-600)}
.doc__c span{font-size:var(--t-nota);color:var(--n-500)}
.doc .tr{margin:0;padding:var(--sp-8) var(--sp-7)}
/* o respiro embaixo da última parada é o do próprio documento, e não o da lista:
somados davam 80px embaixo contra 48 em cima */
.doc .tr__f:last-child .tr__p li{padding-bottom:0}
.doc .tr__muro{margin:var(--sp-7) calc(-1 * var(--sp-7));padding:var(--sp-5) var(--sp-7);
background:var(--acento-tint);border-color:var(--n-100)}
@media(max-width:600px){
.doc__c{padding:var(--sp-4) var(--sp-5)}
.doc .tr{padding:var(--sp-6) var(--sp-5)}
.doc .tr__muro{margin-left:calc(-1 * var(--sp-5));margin-right:calc(-1 * var(--sp-5));
padding-left:var(--sp-5);padding-right:var(--sp-5)}
}
@media(max-width:900px){
.tr__p{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--acento-600);
padding-left:var(--sp-6)}
.tr__f--nos .tr__p{border-left-color:var(--n-300);border-left-style:dashed}
.tr__p li{padding:var(--sp-5) 0}
.tr__p li::before{top:var(--sp-5);left:calc(-1 * var(--sp-6) - 9px)}
.tr__p li.on::before{left:calc(-1 * var(--sp-6) - 8px)}
}
/* ============================================================
04 · O LAÇO DA RECORRÊNCIA
Aqui já moraram um cartão de quatro linhas e um calendário em
grade. Os dois falharam pelo mesmo motivo: tabela mostra
estado, e o assunto do módulo é um gesto. Agora o desenho é o
gesto, em fio fino, com o recorte do produto como origem.
O recorte é a única coisa sólida da peça, e o laço passa por
trás dele: por isso o SVG vem primeiro e a imagem depois, em
posição absoluta.
============================================================ */
.rec{position:relative}
.rec svg{display:block;width:100%;height:auto;overflow:visible}
.rec__t{fill:#C2D0B8;font-size:14px}
.rec__chip{position:absolute;top:1.9%;left:50%;transform:translateX(-50%);
display:block;width:240px;height:auto;border-radius:var(--r-sm);
border:1px solid rgba(243,236,220,.22);box-shadow:0 24px 48px -18px rgba(0,0,0,.8)}
/* o laço é bem mais baixo que a coluna de texto ao lado (372 contra 693), e
.pmod__in alinha os módulos pelo topo por causa dos cartões altos dos
vizinhos. Só esta peça se centra, para o respiro ficar dividido em cima e
embaixo em vez de sobrar tudo no pé. */
.pmod__vis:has(> .rec){align-self:center}
@media(max-width:900px){.rec__chip{width:200px}}
/* ============================================================
05 · A MESMA DOAÇÃO, DOS DOIS JEITOS
Aqui já esteve o extrato do banco ao lado do painel, que
confundia porque os valores apareciam diferentes dos dois
lados, e depois uma grade de três colunas: 88 + 175 + 185 num
cartão de 460, com as frases quebrando em duas linhas e
alturas irregulares.
Agora são dois blocos de metade da largura cada. Cada frase
cabe numa linha, e o assunto vai como rótulo pequeno acima
dela, para o leitor parear os dois lados sem precisar de
grade. Os rótulos de grupo atravessam as duas colunas: quem
age é a mesma pessoa dos dois lados, então a marca é uma só.
============================================================ */
.cmp{padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.cmp__t{margin:0;font-size:var(--t-corpo-g);font-weight:600;color:var(--n-900)}
/* a explicação do código vem ANTES da comparação: ela é usada em quatro células
e antes só aparecia na nota do pé, depois de já ter sido usada. */
.cmp__i{margin:var(--sp-3) 0 var(--sp-5);font-size:var(--t-nota);line-height:20px;color:var(--n-500)}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--sp-5)}
.cmp2__r{font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--n-400);padding-bottom:var(--sp-3);border-bottom:1px solid var(--n-100)}
.cmp2__r--nos{color:var(--acento-600);border-bottom-color:var(--acento-600)}
.cmp2__g{grid-column:1 / -1;margin:var(--sp-5) 0 var(--sp-1);font-size:var(--t-micro);
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-600)}
.cmp2__i{margin:0;padding:var(--sp-4) 0;border-bottom:1px solid var(--n-50);
font-size:var(--t-rotulo);line-height:21px;color:var(--n-500)}
.cmp2__i b{display:block;margin-bottom:2px;font-size:9.5px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--n-300)}
.cmp2__i--nos{color:var(--n-900)}
.cmp2__i--nos b{color:var(--acento-600)}
.cmp .campo__l{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--n-100)}
@media(max-width:620px){
.cmp2{grid-template-columns:1fr}
.cmp2__r{display:none}
.cmp2__i b::after{content:" · sem";color:var(--n-300)}
.cmp2__i--nos b::after{content:" · com";color:var(--acento-600)}
}
/* ============================================================
06 · A LÂMINA
Antes eram duas capturas sobrepostas, e a de cima tapava as
fases 2 e 3, que são o assunto da seção. Pior: as duas foram
tiradas em layouts diferentes do produto, então o mesmo texto
de 15px saía a 12,2px numa e 16,6px na outra.
Agora é uma captura só, recortada rente na lista de fases,
sem o cartão do produto em volta e sem os 99 e 138px de
branco que ele trazia de fábrica. A moldura é o site que
desenha: por isso o título voltou a ser texto vivo numa linha
e o rótulo mora dentro dela, em vez de boiar ao lado.
O cartão de vídeo no pé é DESENHO, não captura. O produto não
tem vídeo de verdade: o .update__media dele é um degradê de
CSS com um play por cima. Fotografar aquilo seria colar uma
mancha morta e chamar de prova. Aqui o site ilustra na
própria linguagem, e ninguém confunde com tela.
============================================================ */
.lam{min-width:0}
/* Esta peça é a única deitada da fileira, e por isso pede coluna mais larga que
as vizinhas: alargar sozinho aumentaria a altura da captura junto, então a
captura foi refeita numa janela de 1800px do produto, onde a mesma lista de
fases ocupa 702x245 em vez de 512x245. Larga e baixa, em vez de quadrada. */
.pmod__in:has(.lam){grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.pmod__vis:has(> .lam){min-width:0}
/* 14px de raio, e não 6: num cartão de 540 o --r-sm dá 1,1% da largura, que é
canto reto. O --r-md é a própria unidade de 14px da marca, e é o raio que os
objetos grandes do site usam.
A borda de 1px existe porque sobre o chão escuro a sombra sozinha não define
aresta: o cartão ficava boiando. */
.lam__f{margin:0;min-width:0;max-width:100%;background:var(--n-0);border-radius:var(--r-md);
border:1px solid rgba(243,236,220,.16);overflow:hidden;
box-shadow:0 26px 52px -26px rgba(0,0,0,.62)}
/* O respiro maior faz duas coisas: tira o cartão do quadrado perfeito, que é a
proporção mais inerte que existe, e dá ao objeto a folga que o resto do site
tem. Cartão apertado lê como barato. */
.lam__cab{padding:var(--sp-6) var(--sp-7) var(--sp-5)}
.lam__r{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--n-500)}
.lam__t{display:block;margin-top:var(--sp-2);font-size:var(--t-bloco);line-height:28px;
font-weight:600;letter-spacing:-.01em;color:var(--n-900)}
.lam__img{display:block;min-width:0;overflow-x:auto;overflow-y:hidden;
border-top:1px solid var(--n-100);border-bottom:1px solid var(--n-100)}
.lam__img img{display:block;width:100%;max-width:730px;height:auto}
.lam__pe{padding:var(--sp-6) var(--sp-7) var(--sp-6)}
.lam__pe__in{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:var(--sp-5);
align-items:start;margin-top:var(--sp-3)}
.lam__fala{margin:0;font-size:var(--t-corpo);line-height:24px;color:var(--n-800)}
.lam__quem{margin:var(--sp-2) 0 0;font-size:var(--t-nota);line-height:19px;color:var(--n-500)}
.lam__quem b{color:var(--n-600);font-weight:600}
/* o cartão de vídeo: desenhado, com a paleta fechada */
.lam__vid{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-sm);
background:linear-gradient(150deg,var(--terra),var(--acento-600))}
.lam__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:34px;height:34px;border-radius:50%;background:var(--n-0);
display:grid;place-items:center}
.lam__play::after{content:"";border-left:11px solid var(--acento-600);
border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.lam__dur{position:absolute;right:7px;bottom:7px;font-size:10.5px;font-weight:600;
color:var(--semente);background:rgba(20,23,15,.55);padding:2px 7px;border-radius:var(--r-xs)}
.lam__nota{margin:var(--sp-6) 0 0;display:flex;gap:var(--sp-3);align-items:baseline;
font-size:var(--t-nota);line-height:20px;color:#C2D0B8}
.lam__nota i{flex:none;width:8px;height:8px;background:rgba(255,255,255,.3);transform:translateY(-1px)}
/* a coluna só chega a 540 com a janela em 1240 (wrap 40+40, gap --sp-10, 1fr 1fr).
Entre 1000 e 1240 a captura encolhia e as pílulas de 11,5px caíam para ~9,6px,
que é abaixo do menor tipo do sistema. O trinco é 1240, não 1000. */
@media(max-width:1240px){
.lam__img img{width:730px;max-width:none}
}
@media(max-width:620px){
.lam__cab,.lam__pe{padding:var(--sp-5)}
.lam__pe__in{grid-template-columns:1fr}
.lam__vid{max-width:200px}
}
/* ============================================================
07 · O FECHAMENTO
O cartão dizia só "exportar", palavra que não promete nada:
PDF e Excel são os dois formatos de verdade. Abaixo do
cabeçalho entrou o período e a contagem, e a tabela ganhou a
coluna de doações e uma linha de total, porque prestação de
contas sem total não presta conta de nada.
O valor recebido é a coluna que o olho procura, então é a
única em negrito e na tinta mais escura; a contagem fica em
tinta secundária para não competir.
============================================================ */
.pv__sai{display:flex;gap:var(--sp-2)}
.pv__sai i{font-style:normal;font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--acento-600);border:1px solid var(--n-100);
border-radius:var(--r-xs);padding:3px 8px}
.fech__per{margin:var(--sp-2) 0 var(--sp-5);font-size:var(--t-nota);color:var(--n-500)}
.fech__t{font-size:var(--t-rotulo)}
.fech__t th{font-size:var(--t-micro);letter-spacing:.1em}
.fech__t td{padding:var(--sp-4) var(--sp-4) var(--sp-4) 0;color:var(--n-700)}
.fech__t td:last-child,.fech__t th:last-child{padding-right:0}
.fech__t .num{font-variant-numeric:tabular-nums lining-nums}
.fech__t td.num{color:var(--n-500)}
.fech__t td.num b{color:var(--n-900);font-weight:600}
/* o total não é mais uma linha da lista: é o fecho dela */
.fech__tot td{border-bottom:0;border-top:1px solid var(--n-200);
padding-top:var(--sp-4);color:var(--n-900);font-weight:600}
.fech__tot td.num{color:var(--n-900)}
.fech__t tr:last-child td{border-bottom:0}
.fech .pv__pronto{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--n-50);
font-size:var(--t-rotulo);color:var(--n-600)}
.pv__pronto{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--n-50);
font-size:var(--t-rotulo);color:var(--n-600)}
.pv__pronto b{color:var(--n-900);font-weight:600}
.pv__pronto + .campo__l{margin-top:var(--sp-3)}
/* ============================================================
08 · O ENCAIXE
Por aqui passaram, e caíram, um cartão de configurações, uma
comparação com organização inventada, a vitrine inteira numa
barra de navegador, uma tira de quatro telas e um provador de
temas. Todas erravam igual: eram captura de tela arrumada,
quando a seção pede conceito.
Este é desenho. A malha da marca preenche a área toda menos
um vão do tamanho de uma marca. A plataforma é o que está em
volta, e o meio fica vazio de propósito: é a única peça do
site em que a ausência é o conteúdo.
============================================================ */
.enc svg{display:block;width:100%;height:auto;overflow:visible}
.enc__t{fill:var(--semente);font-size:19px;font-weight:600;letter-spacing:.01em}
.enc__l{margin:var(--sp-6) 0 0;padding-top:var(--sp-5);
border-top:1px solid rgba(255,255,255,.18);font-size:var(--t-nota);line-height:20px;color:#C2D0B8}
/* o desenho é bem mais baixo que a coluna de texto, e .pmod__in alinha os
módulos pelo topo por causa dos cartões altos dos vizinhos. Esta peça se
centra, como o laço do 04. */
.pmod__vis:has(> .enc){align-self:center}
/* ============================================================
09 · O CELULAR DO AGENTE
Aqui havia uma conversa solta num cartão. Agora é o aparelho
inteiro, desenhado pelo site, com o símbolo de atendimento no
lugar da foto de perfil: é ele que diz que quem responde é o
agente, e não uma pessoa da equipe.
Não é captura, e não podia ser: o produto ainda não tem tela
de agente, e a nota de obra da seção continua pedindo para
confirmar o escopo. Quando existir, o desenho vira print.
============================================================ */
.age{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:var(--sp-6);align-items:center}
/* o align-items acima centra o celular e a lista ENTRE SI. Este centra o bloco
inteiro dentro da coluna, que é bem mais alta: sem ele o aparelho encosta no
topo e sobra um vão embaixo. Mesma regra do laço do 04 e do encaixe do 08. */
.pmod__vis:has(> .age){align-self:center}
.age__tel{position:relative;background:var(--n-0);border-radius:26px;
border:1px solid rgba(243,236,220,.22);box-shadow:0 30px 60px -26px rgba(0,0,0,.75);
padding:var(--sp-6) var(--sp-5) var(--sp-5);overflow:hidden}
.age__ent{position:absolute;top:9px;left:50%;transform:translateX(-50%);
width:56px;height:5px;border-radius:3px;background:var(--n-100)}
.age__cab{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-4);
border-bottom:1px solid var(--n-50)}
.age__av{flex:none;width:36px;height:36px;border-radius:50%;background:var(--acento-600);
color:var(--n-0);display:grid;place-items:center}
.age__id b{display:block;font-size:var(--t-rotulo);color:var(--n-900)}
.age__id em{display:block;font-style:normal;font-size:var(--t-nota);color:var(--acento-600)}
.age__c{display:grid;gap:var(--sp-3);padding:var(--sp-5) 0}
.age__b{margin:0;max-width:88%;font-size:var(--t-nota);line-height:19px;
padding:var(--sp-3) var(--sp-4)}
.age__b--e{justify-self:start;border-radius:var(--r-md) var(--r-md) var(--r-md) 3px}
.age__b--d{justify-self:end;border-radius:var(--r-md) var(--r-md) 3px var(--r-md)}
/* o aparelho é claro dentro de uma seção .ultra, e .ultra p pinta todo
com
a tinta de chão escuro. As bolhas são
: sem isto ficam brancas no branco. */
/* Os dois seletores, e não só .ultra: as seções de módulo usam .chao-campo, e
escrever só .ultra faz a regra nunca casar. O balão do agente é Broto, o
verde médio da paleta, com tinta Terra, que dá 4,99:1. */
.ultra .age__b--e,.chao-campo .age__b--e{background:var(--n-15);color:var(--n-700)}
.ultra .age__b--d,.chao-campo .age__b--d{background:var(--broto);color:var(--terra)}
.age__pe{padding-top:var(--sp-4);border-top:1px solid var(--n-50)}
.age__campo{display:block;padding:var(--sp-3) var(--sp-4);border:1px solid var(--n-100);
border-radius:999px;font-size:var(--t-nota);color:var(--n-300)}
.age__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-6);align-content:center}
.age__l li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--sp-1) var(--sp-4)}
.age__i{grid-row:1 / span 2;width:30px;height:30px;border-radius:50%;
background:rgba(243,236,220,.12);color:var(--semente);display:grid;place-items:center}
.age__i--cheio,.age__i--vazio{width:16px;height:16px;border-radius:0;margin:7px 0 0 7px}
.age__i--cheio{background:var(--semente)}
.age__i--vazio{background:none;border:2px solid rgba(243,236,220,.45)}
.age__l b{font-size:var(--t-rotulo);color:var(--semente)}
.age__l span{font-size:var(--t-nota);line-height:19px;color:#C2D0B8}
@media(max-width:900px){.age{grid-template-columns:1fr;gap:var(--sp-7)}}
/* ============================================================
OS LIMITES COMO CLÁUSULAS
A manchete diz "escritos antes de você perguntar": a lista
assume a forma de documento, com número de cláusula, fio
grosso de abertura e uma linha por limite.
============================================================ */
.clau{margin-top:var(--sp-7);max-width:960px;border-top:2px solid var(--n-900)}
.clau__l{display:grid;grid-template-columns:56px 210px minmax(0,1fr);
gap:var(--sp-2) var(--sp-5);padding:var(--sp-4) 0;
border-bottom:1px solid var(--n-100);align-items:baseline}
.clau__n{font-size:var(--t-nota);font-weight:700;color:var(--acento-600);
font-variant-numeric:tabular-nums}
.clau__t{font-size:var(--t-corpo-g);font-weight:700;color:var(--n-900)}
.clau__d{font-size:var(--t-corpo);line-height:1.55;color:var(--n-600)}
@media(max-width:760px){
.clau__l{grid-template-columns:48px minmax(0,1fr)}
.clau__d{grid-column:2}}
/* ============================================================
A PÁGINA EM OBRA
Duas colunas na capa: o texto à esquerda, o regador à direita.
O desenho usa a unidade quadrada da marca, e a folha é a
própria página, com as linhas encurtando para baixo.
A caixa de alerta que ficava aqui saiu: dizia por escrito o
que o desenho agora mostra, e as duas juntas viravam
redundância com cara de aviso de erro.
A classe é .emobra, e não .obra, porque .alerta.obra já existe
e é outra coisa: a nota interna que não vai ao ar.
============================================================ */
.emobra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--sp-9);align-items:center}
.rega svg{display:block;width:100%;height:auto;overflow:visible}
.rega__l{margin:var(--sp-5) 0 0;padding-top:var(--sp-5);
border-top:1px solid rgba(255,255,255,.18);font-size:var(--t-rotulo);line-height:23px;
color:#C2D0B8;max-width:48ch}
.rega__l b{color:var(--semente);font-weight:600}
@media(max-width:900px){.emobra{grid-template-columns:1fr;gap:var(--sp-8)}}
/* ============================================================
PARA IGREJAS
A página não é catálogo de recurso, é página de decisão: quem
lê quase nunca é quem assina. Por isso a espinha são as três
pessoas (membro, tesouraria, conselho) e a reunião de
aprovação, e não a lista de funcionalidades, que mora em
/plataforma/.
============================================================ */
/* 01 · os três jeitos que a igreja inventa
Eram dois parágrafos longos e três colunas de texto solto. Agora cada saída
tem símbolo próprio (a moeda do código dos centavos, o balão do comprovante
no grupo, o envelope), e o texto que estava na prosa migrou para dentro dos
cartões. */
.jeitos{margin-top:var(--sp-8);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.jeitos__c{padding-top:var(--sp-5);border-top:2px solid var(--acento-600)}
.jeitos__i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
background:var(--acento-tint);color:var(--acento-600)}
.jeitos__i svg{width:22px;height:22px}
.jeitos__t{display:block;margin-top:var(--sp-4);font-size:var(--t-bloco);line-height:26px;min-height:52px;
color:var(--n-900)}
.jeitos__d{display:block;margin-top:var(--sp-3);font-size:var(--t-rotulo);line-height:23px;
color:var(--n-600)}
/* a virada: é o desfecho do bloco, e estava como .nota, em 13px de tinta clara
solta embaixo da primeira coluna. Ou seja, a conclusão pesava menos que as
descrições dos cartões. Agora é tarja, com o quadrado da marca, atravessando
a largura toda. Mesmo recurso da virada entre os dois trilhos na seção 03 da
plataforma. */
.virada{display:flex;align-items:flex-start;gap:var(--sp-4);margin:var(--sp-8) 0 0;
padding:var(--sp-5) var(--sp-6);background:var(--acento-tint);border-radius:var(--r-sm);
font-size:var(--t-corpo-g);line-height:26px;color:var(--acento-600)}
.virada i{flex:none;width:14px;height:14px;background:var(--acento-600);margin-top:6px}
.virada b{color:var(--n-900);font-weight:600}
/* 02 · as três pessoas */
.tres{margin-top:var(--sp-8);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.tres__c{background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-md);
padding:var(--sp-6);box-shadow:var(--sombra-2)}
.tres__r{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--acento-600)}
.tres__t{display:block;margin-top:var(--sp-3);font-size:var(--t-bloco);line-height:26px;
color:var(--n-900);min-height:52px}
.tres__c ul{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-4)}
.tres__c li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:var(--sp-3);
align-items:start;font-size:var(--t-rotulo);line-height:22px;color:var(--n-700)}
.tres__c li::before{content:"";width:10px;height:10px;margin-top:6px;background:var(--acento-600)}
/* 03 · o que a gente leva para a reunião */
.mala{margin-top:var(--sp-7);background:var(--n-0);border:1px solid var(--n-100);
border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sombra-2)}
.mala__cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-5);
flex-wrap:wrap;padding:var(--sp-5) var(--sp-6);background:var(--n-15);
border-bottom:1px solid var(--n-100)}
.mala__cab b{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--n-600)}
.mala__cab span{font-size:var(--t-nota);color:var(--acento-600)}
.mala__l{list-style:none;margin:0;padding:0}
.mala__l li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--sp-2) var(--sp-4);
padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--n-50)}
.mala__l li:first-child{border-top:0}
.mala__l i{grid-row:1 / span 2;width:14px;height:14px;margin-top:5px;background:var(--acento-600)}
.mala__l b{font-size:var(--t-rotulo);color:var(--n-900)}
.mala__l li{font-size:var(--t-rotulo);line-height:22px;color:var(--n-600)}
/* a linha da indicação, no pé do fecho */
.fecho__nota{margin:var(--sp-8) 0 0;padding-top:var(--sp-5);
border-top:1px solid rgba(255,255,255,.18);font-size:var(--t-rotulo);color:#C2D0B8}
@media(max-width:900px){
.jeitos,.tres{grid-template-columns:1fr}
}
/* ============================================================
CONTATO
A página é só a capa: manchete grande à esquerda, formulário
à direita, os dois centrados um contra o outro.
============================================================ */
.ctt{padding-top:var(--sp-9);padding-bottom:var(--sp-10)}
.ctt__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
gap:var(--sp-10);align-items:center;margin-top:var(--sp-7);min-height:520px}
.ctt__esq{max-width:min(100%,600px)}
.ctt.capa.ultra h1{margin-top:var(--sp-5);max-width:15ch;
font-size:clamp(38px,4.7vw,60px);line-height:1.02;letter-spacing:-.022em}
.ctt.capa.ultra .lede{margin-top:var(--sp-5);max-width:44ch;font-size:var(--t-corpo-g)}
/* o e-mail vira um alvo só, com o quadrado da marca na frente */
.ctt__mail{display:inline-flex;align-items:center;gap:var(--sp-4);
margin-top:var(--sp-8);padding:var(--sp-4) var(--sp-5);
border:1px solid rgba(255,255,255,.28);border-radius:var(--r-md);
background:rgba(255,255,255,.05);text-decoration:none;
transition:border-color var(--t),background var(--t)}
.ctt__mail:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.ctt__q{width:14px;height:14px;flex:none;background:var(--broto)}
.ctt__mail__c{display:grid;gap:2px}
.ctt__mail__r{font-size:var(--t-nota);color:#C2D0B8}
.ctt__mail__e{font-size:var(--t-corpo-g);font-weight:600;color:var(--semente)}
.ctt__mail:hover .ctt__mail__e{text-decoration:underline}
/* o cartão ganha cabeça para o formulário não começar solto */
.ctt__card{padding:var(--sp-6)}
.ctt__cab{display:grid;gap:2px;padding-bottom:var(--sp-4);margin-bottom:var(--sp-5);
border-bottom:1px solid var(--n-100)}
.capa.ultra .card .ctt__cab__t{display:block;font-size:var(--t-bloco);font-weight:700;
color:var(--n-900);letter-spacing:-.012em}
.capa.ultra .card .ctt__cab__n{display:block;font-size:var(--t-nota);color:var(--n-500)}
@media(max-width:980px){
.ctt{padding-bottom:var(--sp-9)}
.ctt__g{grid-template-columns:1fr;gap:var(--sp-7);min-height:0;margin-top:var(--sp-6)}
.ctt.capa.ultra h1{font-size:clamp(32px,7vw,42px);max-width:18ch}
.ctt__mail{margin-top:var(--sp-6);width:100%}
}
/* a cabeça da seção de ganhos: manchete à esquerda, e a escada de
unidades da marca ocupando o vazio da direita. O topo em Broto é
o ganho que ainda não aconteceu. */
.ganho__cab{display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:var(--sp-9);align-items:center}
.ganho__des{width:170px;height:auto;color:var(--mata)}
.ganho__des rect{fill:currentColor}
.ganho__des .ganho__des__topo{fill:var(--broto)}
@media(max-width:900px){.ganho__des{display:none}}
/* ============================================================
MÓDULOS ADICIONAIS (para/igrejas)
A gramática dos cartões de Preços, reduzida ao essencial:
o ícone na moldura de fio e o nome. O peso fica no botão.
============================================================ */
.modc{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.modc__i{background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-md);
padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;align-items:center;
text-align:center;gap:var(--sp-4);box-shadow:var(--sombra-1);
transition:transform var(--t),box-shadow var(--t)}
.modc__i:hover{transform:translateY(-3px);box-shadow:var(--sombra-2)}
.modc__ico{display:flex;align-items:center;justify-content:center;flex:none;
width:52px;height:52px;border-radius:50%;border:1px solid var(--n-200);
color:var(--acento-600)}
.modc__ico svg{width:24px;height:24px}
/* o .ultra svg global pinta ícone de creme; dentro do cartão claro a tinta volta a ser verde */
.ultra .modc__i svg,.chao-campo .modc__i svg{color:var(--acento-600)}
.modc__t,.ultra .modc__t{font-size:var(--t-corpo);font-weight:700;line-height:1.3;color:var(--n-900)}
.modc__pe{display:flex;justify-content:center;margin-top:var(--sp-8)}
@media(max-width:1100px){.modc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.modc{grid-template-columns:repeat(2,1fr)}
.modc__i{padding:var(--sp-5) var(--sp-4)}}
/* ============================================================
O HERÓI EM DOIS APARELHOS (a fusão D2)
A mesma fusão da direção D, posta em ordem: rotação zero,
grade de 8px, janela dominante e reta com a captura real
(recorte abaixo da saudação e sem a barra lateral — no
tamanho reduzido ela era só ruído escuro), celular estreito
e reto ancorado à direita. Os pés dos dois aparelhos na
mesma linha de base, os dois rótulos na mesma linha acima.
A notificação tem a MESMA largura do celular, encaixa à
esquerda dele, alinha a base com ele e aponta para a janela
— e pousa sobre o canto vazio da captura (abaixo do quadro
de tarefas), sem cobrir número nem texto de aparelho algum.
Prefixo duo- para não colidir com o base.css.
============================================================ */
/* o palco é o cartão claro do herói (classe previa do base.css):
640×496, tudo dentro em múltiplos de 8 */
/* largura: a coluna mais a sangria do herói, até o teto de 640 —
os ancoradouros internos são à direita, então larguras menores
só encurtam a janela, sem desalinhar celular e notificação */
.duo-palco{position:relative;height:496px;margin-left:auto;z-index:1;
width:min(640px, calc(100% + min(200px, max(0px, (100vw - var(--container)) / 2 - 24px))))}
/* os dois rótulos: mesma linha, mesma altura, mesmo estilo.
Cada um alinha à borda esquerda do seu aparelho. */
.duo-rotulo{position:absolute;top:24px;z-index:2;line-height:16px;
font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--n-500)}
.duo-rotulo--adm{left:24px}
.duo-rotulo--doa{left:calc(100% - 208px)}
/* ---------- a janela do navegador, reta e dominante ---------- */
.duo-janela{position:absolute;left:24px;top:56px;bottom:24px;right:184px;z-index:1;
display:flex;flex-direction:column;
background:var(--n-15);border:1px solid var(--n-100);
border-radius:var(--r-md);overflow:hidden;
box-shadow:0 24px 48px -24px rgba(12,22,10,.35)}
.duo-barra{display:flex;align-items:center;gap:var(--sp-3);height:40px;flex:none;
padding:0 var(--sp-4);border-bottom:1px solid var(--n-100)}
.duo-pontos{display:flex;gap:6px;flex:none}
.duo-pontos i{width:10px;height:10px;border-radius:50%;background:var(--n-200)}
/* espaçador do tamanho dos pontos, para o endereço centralizar */
.duo-barra::after{content:"";flex:none;width:42px}
.duo-end{flex:1;display:flex;justify-content:center;min-width:0}
.duo-end span{display:inline-flex;align-items:center;gap:6px;height:26px;
padding:0 14px;border-radius:999px;background:var(--n-0);
border:1px solid var(--n-100);font-size:var(--t-nota);color:var(--n-600);
white-space:nowrap;overflow:hidden}
.duo-end svg{flex:none;color:var(--n-500)}
/* o recorte da captura real: tudo abaixo da saudação, sem a
barra lateral. Caixa de corte: x 212→1242, y a partir de 148
do arquivo de 1200 — os 42px além da borda direita da imagem
viram margem, pintada com a MESMA cor do fundo da página da
captura, para o celular nunca cobrir número nem texto.
Percentuais sobre a largura útil (1030). */
.duo-corte{flex:1;overflow:hidden;background:#F6F7FB}
.duo-corte img{display:block;width:116.505%;max-width:none;height:auto;
margin-left:-20.583%;margin-top:-14.369%}
/* ---------- o celular, reto e estreito ---------- */
.duo-cel{position:absolute;right:24px;top:56px;bottom:24px;width:184px;z-index:3;
display:flex;flex-direction:column;
background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-lg);
box-shadow:0 24px 48px -20px rgba(12,22,10,.4), 0 2px 6px rgba(12,22,10,.12);
padding:24px 16px 16px;overflow:hidden}
.duo-ent{position:absolute;top:9px;left:50%;transform:translateX(-50%);
width:48px;height:5px;border-radius:3px;background:var(--n-100)}
/* cabeçalho do portal: o quadrado da marca não arredonda */
.duo-cab{display:flex;align-items:center;gap:var(--sp-2);flex:none;
padding-bottom:var(--sp-3);border-bottom:1px solid var(--n-50)}
.duo-logo{flex:none;width:12px;height:12px;background:var(--mata)}
.duo-org b{display:block;font-size:var(--t-nota);font-weight:700;color:var(--n-900);
letter-spacing:-.01em;line-height:1.25}
.duo-org em{display:block;font-style:normal;font-size:10px;font-weight:600;
letter-spacing:.08em;text-transform:uppercase;color:var(--mata);margin-top:1px}
/* a foto do projeto: gradiente da paleta; o selo de etapa alinha
ao canto da foto, 8px para dentro — nada transborda */
.duo-fotoq{position:relative;margin-top:var(--sp-3);flex:none}
.duo-foto{height:112px;border-radius:var(--r-sm);
background:
radial-gradient(130% 95% at 84% 8%, rgba(243,236,220,.30), transparent 52%),
linear-gradient(200deg, transparent 58%, rgba(20,23,15,.42) 100%),
linear-gradient(148deg, var(--g-suave) 6%, var(--mata) 56%, var(--g-fundo) 100%)}
.duo-foto span{position:absolute;left:8px;bottom:8px;
font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--semente);background:rgba(20,23,15,.55);padding:3px 7px;
border-radius:var(--r-xs)}
/* um dos dois únicos lugares onde Ação entra */
.duo-selo{position:absolute;left:8px;top:8px;
background:var(--acao);color:#FFFFFF;font-size:10px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;
border-radius:var(--r-xs)}
.duo-nome{margin-top:var(--sp-3);font-size:15px;font-weight:700;
color:var(--n-900);letter-spacing:-.012em;line-height:1.3}
.duo-valor{margin-top:4px;font-size:var(--d-num);font-weight:700;
letter-spacing:-.02em;color:var(--n-900);line-height:1.05;white-space:nowrap;
font-variant-numeric:tabular-nums lining-nums}
.duo-valor span{display:block;font-size:var(--t-nota);font-weight:500;
color:var(--n-500);letter-spacing:0;margin-top:2px}
/* barra contínua em dois tons da escala: comprovado e recebido */
.duo-prog{margin-top:var(--sp-4);height:8px;border-radius:var(--r-xs);flex:none;
background:var(--n-50);overflow:hidden;display:flex}
.duo-prog i{display:block;height:100%}
.duo-prog__c{width:51%;background:var(--u-comp)}
.duo-prog__r{width:14%;background:var(--u-receb)}
/* o botão primário assenta no pé do aparelho */
.duo-doar{display:flex;align-items:center;justify-content:center;flex:none;
margin-top:auto;height:44px;border-radius:var(--r-sm);
background:var(--acao);color:#FFFFFF;font-size:var(--t-nota);font-weight:600;
text-decoration:none;transition:background var(--t)}
.duo-doar:hover{background:var(--acao-2);color:#FFFFFF}
/* ---------- a notificação, UMA vez ----------
Mesma largura do celular, base alinhada com ele, seta
apontando para a janela. Pousa no canto vazio da captura. */
.duo-noti{position:absolute;right:224px;bottom:24px;width:184px;z-index:2;
display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px var(--sp-2);
align-items:start;
background:var(--n-0);border:1px solid var(--n-100);border-radius:var(--r-md);
padding:var(--sp-3);
box-shadow:0 16px 36px -16px rgba(12,22,10,.35);
animation:duo-chega .55s cubic-bezier(.2,0,.2,1) .5s backwards}
.duo-noti::before{content:"";position:absolute;top:-6px;left:24px;
border-left:6px solid transparent;border-right:6px solid transparent;
border-bottom:6px solid var(--n-0)}
.duo-noti__ic{grid-row:1 / span 2;width:28px;height:28px;border-radius:var(--r-xs);
background:var(--mata);color:var(--n-0);display:grid;place-items:center}
.duo-noti b{font-size:var(--t-nota);font-weight:700;color:var(--n-900);
letter-spacing:-.01em;line-height:16px}
.duo-noti__q{font-size:11px;line-height:14px;color:var(--n-600)}
@keyframes duo-chega{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.duo-noti{animation:none}}
/* coluna estreita e empilhado: a cena vira fluxo dentro do mesmo
cartão — janela, notificação, celular — e nada se sobrepõe */
@media(max-width:1200px){
.duo-palco{height:auto;width:100%;max-width:440px;margin:0 auto;padding:24px;
display:flex;flex-direction:column}
/* no fluxo empilhado cada rótulo abre o seu aparelho: a ordem
visual é rótulo, janela, notificação, rótulo, celular */
.duo-rotulo--adm{order:1}.duo-janela{order:2}.duo-noti{order:3}
.duo-rotulo--doa{order:4}.duo-cel{order:5}
.duo-rotulo{position:static;display:block;margin:0 0 var(--sp-2)}
.duo-rotulo--doa{margin-top:var(--sp-6)}
.duo-janela{position:static;width:auto}
.duo-corte{flex:none;height:auto;aspect-ratio:1030/863}
.duo-noti{position:static;width:auto;max-width:300px;margin:var(--sp-4) auto 0}
.duo-cel{position:static;width:280px;height:auto;margin:var(--sp-2) auto 0}
.duo-foto{height:128px}
.duo-doar{margin-top:var(--sp-5)}
}
@media(max-width:900px){
.duo-palco{margin-top:var(--sp-6)}
}
/* ===== central de ajuda: a tela cai direto no FAQ =====
Síntese da rodada de propostas de 09/09/2026 (site/lab/faq-a..d.html).
Título na voz do site (Archivo na largura normal), cone em três degraus, a malha
da marca semeando atrás do cabeçalho, uma lista só com régua em cima e
embaixo, e o campo verde correndo até o fecho sem emenda. */
.sec--ajuda{padding-top:calc(var(--sec-y) + 16px);padding-bottom:var(--sp-10);overflow:clip}
/* o campo é um só até o fecho: o mesmo degradê horizontal nos dois lados da
emenda, o brilho no alto desta seção e o escurecimento só no pé do fecho */
.sec--ajuda,.sec--ajuda ~ .sec.ultra{background:linear-gradient(90deg,var(--g-claro) 0%,var(--g-fundo) 100%)}
.sec--ajuda::before{background:linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 38%)}
.sec--ajuda ~ .sec.ultra::before{background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.16) 100%)}
.sec--ajuda ~ .sec.ultra{padding-top:0}
.sec--ajuda ~ .sec.ultra > .wrap{border-top:1px solid rgba(243,236,220,.18);padding-top:var(--sec-y)}
/* a malha da marca atrás do cabeçalho, no mesmo gerador da capa de preços,
tingida do verde; a máscara limpa o centro sob o título e apaga o pé */
.ajuda__u{position:absolute;top:0;left:50%;width:2400px;height:460px;margin-left:-1200px;pointer-events:none;z-index:0;
-webkit-mask-image:radial-gradient(900px 260px at 50% 200px, transparent 0 60%, #000 100%),linear-gradient(#000 40%, transparent 78%);
-webkit-mask-composite:source-in;
mask-image:radial-gradient(900px 260px at 50% 200px, transparent 0 60%, #000 100%),linear-gradient(#000 40%, transparent 78%);
mask-composite:intersect}
.ajuda__u i{position:absolute;width:14px;height:14px;border-radius:1px;background:rgba(147,166,141,.16);animation:semear-verde 7s ease-in-out infinite}
@keyframes semear-verde{
0%,6%{background:rgba(147,166,141,.16);transform:scale(.72)}
16%{background:rgba(147,166,141,.38);transform:scale(.88)}
30%{background:rgba(90,146,112,.85);transform:scale(1)}
44%,56%{background:rgba(243,236,220,.62);transform:scale(1)}
78%,100%{background:rgba(147,166,141,.16);transform:scale(.72)}
}
@media(prefers-reduced-motion:reduce){.ajuda__u i{animation:none;background:rgba(147,166,141,.24)}}
/* cabeçalho: o título é o objeto da página; o cone diminui em comprimento,
tamanho e tinta */
.ajuda__cab{text-align:center;margin-bottom:var(--sp-10)}
.ajuda__t{color:var(--semente);font-size:clamp(40px,4vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.02;
font-variation-settings:'wdth' 100;margin:0 auto}
@media(min-width:901px){.ajuda__t{white-space:nowrap}}
.ajuda__lede{margin:22px auto 0;max-width:none}
.ajuda__lede span{display:block;white-space:nowrap}
.ajuda__lede span:nth-child(1){font-size:var(--t-bloco);color:#E4EADB}
.ajuda__lede span:nth-child(2){font-size:var(--t-corpo-g);color:#D3DEC8;margin-top:2px}
.ajuda__lede a{color:var(--semente);text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px;text-decoration-color:rgba(243,236,220,.5);transition:text-decoration-color var(--t)}
.ajuda__lede a:hover{text-decoration-color:var(--semente)}
/* a última linha da lista: a saída de quem não achou, na voz das perguntas */
.ajuda__nao{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-5) 0;
font-size:var(--t-bloco);font-weight:500;letter-spacing:-.008em;line-height:1.35;color:#D3DEC8;transition:color var(--t)}
.ajuda__nao b{font-weight:500;color:var(--semente);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:rgba(243,236,220,.5);transition:text-decoration-color var(--t)}
.ajuda__nao svg{width:24px;height:24px;flex:none;margin-top:2px;color:#C2D0B8;transition:color var(--t),transform .48s cubic-bezier(.16,1,.3,1)}
.ajuda__nao:hover{color:var(--semente)}
.ajuda__nao:hover b{text-decoration-color:var(--semente)}
.ajuda__nao:hover svg{color:var(--semente);transform:translateX(4px)}
.ajuda__nao:focus-visible{outline:2px solid rgba(243,236,220,.8);outline-offset:6px;box-shadow:none;border-radius:0}
/* a lista: régua em cima e embaixo, fio entre as linhas, o "+" do sistema à direita */
.sec--ajuda .faq{border-top:1px solid rgba(243,236,220,.62);border-bottom:1px solid rgba(243,236,220,.62)}
.sec--ajuda .faq details{border-bottom:1px solid rgba(243,236,220,.2);padding:var(--sp-5) 0;scroll-margin-top:calc(88px + var(--sp-6))}
.sec--ajuda .faq summary{font-size:var(--t-bloco);font-weight:500;color:var(--semente);letter-spacing:-.008em;line-height:1.35;gap:var(--sp-6);align-items:flex-start;transition:color var(--t)}
.sec--ajuda .faq summary svg{width:24px;height:24px;color:#C2D0B8;margin-top:2px;stroke-width:1.5;transition:color var(--t),transform .48s cubic-bezier(.16,1,.3,1)}
.sec--ajuda .faq summary:hover{color:var(--n-0)}
.sec--ajuda .faq summary:hover svg{color:var(--semente)}
.sec--ajuda .faq details[open] summary{color:var(--n-0)}
.sec--ajuda .faq details[open] summary svg{color:var(--semente);transform:rotate(45deg)}
.sec--ajuda .faq details p{margin-top:var(--sp-3);font-size:var(--t-corpo-g);line-height:1.62;letter-spacing:.004em;color:#D6DFCB;max-width:60ch}
/* a única cena de movimento: a resposta assenta ao abrir, partindo de estado visível */
.sec--ajuda .faq details[open] p{animation:assentar .5s cubic-bezier(.16,1,.3,1)}
@keyframes assentar{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.sec--ajuda .faq summary:focus-visible{outline:2px solid rgba(243,236,220,.8);outline-offset:6px;box-shadow:none;border-radius:0}
.sec--ajuda .faq details[open]{border-bottom-color:rgba(243,236,220,.45)}
/* quem chega por link vê a linha em que caiu: os dois fios da linha acendem */
.sec--ajuda .faq details:target{border-bottom-color:var(--semente);box-shadow:0 -1px 0 var(--semente)}
.sec--ajuda ::selection{background:var(--semente);color:var(--terra)}
@media(prefers-reduced-motion:reduce){
.sec--ajuda .faq details[open] p{animation:none}
.sec--ajuda .faq summary svg{transition:color var(--t)}
}
/* o fecho da ajuda: o cartão de formulário de /contato/, no campo contínuo */
.ajuda__fecho h2{color:var(--semente);white-space:nowrap}
.ajuda__fecho .ajuda__lede{margin-top:var(--sp-4)}
/* no fecho o cone é só de comprimento: as três linhas no mesmo corpo, com a tinta caindo */
.ajuda__fecho .ajuda__lede span{font-size:var(--t-corpo-g);margin-top:0;line-height:1.55}
/* a primeira linha do fecho é longa: só fica numa linha quando a tela dá conta */
.ajuda__fecho .ajuda__lede span{white-space:normal}
@media(min-width:1280px){.ajuda__fecho .ajuda__lede span{white-space:nowrap}}
.ajuda__opc{font-weight:400;color:var(--n-400)}
/* uma coluna só: o texto centrado em cima e o cartão, mais largo, no meio da página */
.ajuda__fecho .ctt__g{grid-template-columns:minmax(0,1fr);gap:var(--sp-7);margin-top:0;min-height:0;align-items:start}
.ajuda__fecho .ctt__card{width:100%;max-width:640px;margin:0 auto}
.ajuda__fecho .ctt__esq{max-width:none;text-align:center}
.ajuda__fecho h2{margin:0 auto}
.ajuda__fecho .ctt__card{padding:var(--sp-7)}
.ajuda__fecho .card input,.ajuda__fecho .card select{height:48px;font-size:var(--t-corpo)}
.ajuda__fecho .card textarea{font-size:var(--t-corpo)}
/* o cartão é creme como em /contato/: o .ultra escurece cartões e etiquetas, e aqui isso volta */
.ajuda__fecho .card{background:var(--n-15);border:1px solid var(--n-100);color:var(--n-700)}
.ajuda__fecho .card label{color:var(--n-600)}
.ajuda__fecho .card .nota{color:var(--n-400)}
.ajuda__fecho .card .ctt__cab{border-bottom-color:var(--n-100)}
.ajuda__fecho .card .ctt__cab__t{display:block;font-size:var(--t-bloco);font-weight:700;color:var(--n-900);letter-spacing:-.012em}
.ajuda__fecho .card .ctt__cab__n{display:block;font-size:var(--t-nota);color:var(--n-500)}
.ajuda__fecho textarea{resize:vertical;min-height:160px}
@media(max-width:640px){
.sec--ajuda{padding-top:var(--sp-9);padding-bottom:var(--sp-9)}
.ajuda__u{display:none}
.ajuda__cab{margin-bottom:var(--sp-8)}
.ajuda__t{font-size:38px;line-height:1.05;text-wrap:balance}
.ajuda__lede{margin-top:var(--sp-5)}
.ajuda__lede span{white-space:normal}
.ajuda__lede span:nth-child(1){font-size:var(--t-corpo-g)}
.ajuda__lede span:nth-child(2){font-size:var(--t-corpo)}
.sec--ajuda .faq details{padding:var(--sp-4) 0}
.sec--ajuda .faq summary{font-size:var(--t-corpo-g);gap:var(--sp-4)}
.sec--ajuda .faq summary svg,.ajuda__nao svg{width:20px;height:20px;margin-top:1px}
.ajuda__nao{font-size:var(--t-corpo-g);gap:var(--sp-4);padding:var(--sp-4) 0}
.sec--ajuda .faq details p{font-size:var(--t-corpo);max-width:none}
.sec--ajuda ~ .sec.ultra > .wrap{padding-top:var(--sp-9)}
.ajuda__fecho .ctt__card{padding:var(--sp-5)}
.ajuda__fecho h2{white-space:normal}
}