/* balaio — site institucional Gerado a partir do design system balaio (claude.ai/design). Tokens abaixo espelham _ds/tokens/*.css; os valores de cor foram fixados para o claro (a mesma decisao tomada no arquivo .dc.html original). */ /* Fontes auto-hospedadas em /assets/fonts (nao via Google Fonts) para evitar o hop extra ate fonts.gstatic.com e o layout shift do troca-de-fonte tardio. Cada arquivo e uma fonte variavel (subset latin, cobre acentuacao pt-BR); os no de cada pagina buscam o arquivo em paralelo com este CSS para o @font-face já achar o download pronto. */ @font-face{ font-family:"Big Shoulders Display"; font-style:normal; font-weight:400 800; font-display:swap; src:url("/assets/fonts/big-shoulders-display-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Martian Mono"; font-style:normal; font-weight:400 600; font-display:swap; src:url("/assets/fonts/martian-mono-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ /* paleta bruta */ --balaio-tinta:#0F0F0E; --balaio-tinta-80:#2A2A26; --balaio-tinta-60:#57564E; --balaio-palha:#F5F1E8; --balaio-palha-alta:#FBF8F2; --balaio-palha-baixa:#EDE7DA; --balaio-fibra:#D9CDB4; --balaio-fibra-clara:#E8E0CF; --balaio-fibra-escura:#B9A986; --balaio-indigo:#173A52; --balaio-indigo-fundo:#0C2436; --balaio-indigo-claro:#2E6285; --balaio-barro:#E0522A; --balaio-barro-escuro:#A93718; --balaio-barro-fundo:#2A0F06; --balaio-mato:#2F6B4F; --balaio-ocre:#C98A1F; --balaio-tijolo:#9B1C2E; --balaio-mato-tint:#DCE8E1; --balaio-ocre-tint:#F4E7CD; --balaio-tijolo-tint:#EFD6DA; /* papeis semanticos — fixados no claro para o site institucional */ --surface:#F5F1E8; --surface-alta:#FBF8F2; --surface-baixa:#EDE7DA; --surface-inversa:#0F0F0E; --surface-estrutura:#173A52; --surface-acento:#E0522A; --texto:#0F0F0E; --texto-suave:#2A2A26; --texto-fraco:#57564E; --texto-inverso:#F5F1E8; --texto-estrutura:#173A52; --texto-acento:#A93718; --sobre-acento:#2A0F06; --sobre-estrutura:#F5F1E8; --linha:#D9CDB4; --linha-suave:#E8E0CF; --linha-forte:#B9A986; --foco:#2E6285; --ok:#2F6B4F; --erro:#9B1C2E; --ok-tint:#DCE8E1; /* tipografia */ --fonte-display:"Big Shoulders Display","Big Shoulders",sans-serif; --fonte-texto:"Instrument Sans",system-ui,sans-serif; --fonte-mono:"Martian Mono",ui-monospace,monospace; --t-rotulo:.6875rem; --ls-rotulo:-.03em; --lh-rotulo:1.2; --medida:62ch; /* espacamento */ --e-1:.25rem; --e-2:.5rem; --e-3:1rem; --e-4:1.5rem; --e-5:2.5rem; --e-6:4rem; --e-7:6rem; --largura-conteudo:1080px; --respiro-lateral:1.5rem; --altura-secao:5rem; /* raio — zero e pilula sao proibidos na marca */ --r-celula:20px; --r-controle:10px; --r-tag:6px; /* movimento — nada acima de 400ms, sem bounce/rotacao/parallax */ --dur:180ms; --dur-superficie:220ms; --ease:cubic-bezier(0.2,0,0,1); } @media (max-height:720px){ :root{ --altura-secao:3.5rem; } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; animation-iteration-count:1!important; } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } html,body{ margin:0; padding:0; } body{ background:var(--surface); color:var(--texto); font-family:var(--fonte-texto); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:var(--texto-estrutura); text-decoration:none; } a:hover{ color:var(--texto); } :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--foco); outline-offset:2px; } .rotulo{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); line-height:var(--lh-rotulo); text-transform:uppercase; } .container{ max-width:var(--largura-conteudo); margin:0 auto; padding-left:var(--respiro-lateral); padding-right:var(--respiro-lateral); } /* ---------- cabecalho ---------- */ .cabecalho{ display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap; padding-top:var(--e-4); padding-bottom:var(--e-4); } .cabecalho__marca{ display:flex; align-items:center; } .cabecalho__nav{ display:flex; align-items:center; gap:var(--e-4); flex-wrap:wrap; } .cabecalho__nav a{ color:var(--texto-fraco); padding:10px 4px; } .cabecalho__nav a:hover{ color:var(--texto); } .cabecalho__espaco{ flex:1; min-width:0; } /* ---------- marca (svg lockup / simbolo) ---------- */ .marca{ display:block; height:24px; width:auto; min-width:90px; fill:var(--texto); } .marca--tinta{ fill:var(--texto); } .marca--palha{ fill:var(--texto-inverso); } /* ---------- botao ---------- */ .btn{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); line-height:var(--lh-rotulo); letter-spacing:var(--ls-rotulo); text-transform:uppercase; border-radius:var(--r-controle); padding:14px 24px; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2); text-decoration:none; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active{ transform:translateY(1px); } .btn-primario{ background:var(--surface-acento); color:var(--sobre-acento); } .btn-primario:hover{ background:var(--balaio-barro-escuro); color:var(--balaio-palha); } .btn-secundario{ background:transparent; color:var(--texto); box-shadow:inset 0 0 0 1.5px var(--linha-forte); } .btn-secundario:hover{ background:var(--balaio-fibra-clara); color:var(--texto); } .btn-fantasma{ background:transparent; color:var(--texto-estrutura); padding:14px 4px; } .btn-fantasma:hover{ text-decoration:underline; } .btn-fantasma--claro{ color:var(--texto-inverso); } .btn--largura-total{ width:100%; } /* ---------- hero ---------- */ .hero{ padding-top:var(--e-6); padding-bottom:var(--e-7); } .hero__conteudo{ display:flex; flex-direction:column; gap:var(--e-4); } .hero__elegibilidade{ color:var(--texto-estrutura); } .hero__titulo{ margin:0; font-family:var(--fonte-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:1; font-size:clamp(2.75rem,10vw,6.5rem); max-width:20ch; text-wrap:balance; } .hero__texto{ margin:0; font-size:clamp(1rem,2.6vw,1.25rem); line-height:1.6; color:var(--texto-suave); max-width:56ch; text-wrap:pretty; } .hero__acoes{ display:flex; gap:var(--e-3); align-items:center; flex-wrap:wrap; margin-top:var(--e-2); } /* ---------- metrica ---------- */ .metricas{ padding-bottom:var(--e-7); display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--e-4); align-items:stretch; } .metrica{ border-radius:var(--r-celula); padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-1); background:var(--surface-inversa); } .metrica--estrutura{ background:var(--surface-estrutura); } .metrica__valor{ font-family:var(--fonte-display); font-size:56px; line-height:.86; letter-spacing:.01em; font-weight:800; text-transform:uppercase; color:var(--texto-inverso); } .metrica--estrutura .metrica__valor{ color:var(--sobre-estrutura); } .metrica__rotulo{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); line-height:var(--lh-rotulo); letter-spacing:var(--ls-rotulo); text-transform:uppercase; color:var(--balaio-fibra); } .metrica__nota{ font-family:var(--fonte-texto); font-size:.875rem; line-height:1.55; color:var(--balaio-fibra-escura); margin-top:var(--e-1); } /* ---------- secoes gerais ---------- */ .secao{ padding:var(--e-7) 0; } .secao--baixa{ background:var(--surface-baixa); } .secao--estrutura{ background:var(--surface-estrutura); } .secao__cabecalho{ display:flex; flex-direction:column; gap:var(--e-3); margin-bottom:var(--e-5); } .secao__eyebrow{ color:var(--texto-estrutura); } .secao__eyebrow--clara{ color:var(--balaio-fibra); } .secao__titulo{ margin:0; font-family:var(--fonte-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.9; font-size:clamp(2rem,6vw,3.25rem); } .secao__titulo--clara{ color:var(--texto-inverso); } .secao__texto{ margin:0; font-size:1.0625rem; line-height:1.65; color:var(--texto-suave); max-width:60ch; text-wrap:pretty; } .secao__texto--clara{ color:var(--balaio-fibra); } /* ---------- celula (card) ---------- */ .malha{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--e-4); align-items:stretch; } .celula{ border-radius:var(--r-celula); padding:var(--e-4); box-sizing:border-box; display:flex; flex-direction:column; gap:var(--e-2); height:100%; background:var(--surface-alta); color:var(--texto); text-decoration:none; transition:transform var(--dur-superficie) var(--ease), background var(--dur-superficie) var(--ease); } a.celula:hover, .celula--interativa:hover{ background:var(--balaio-fibra-clara); transform:translateY(-8px); } .celula--viva{ background:var(--surface-estrutura); color:var(--sobre-estrutura); } .celula--viva:hover{ background:var(--balaio-indigo-fundo); } .celula--viva .celula__titulo{ color:var(--sobre-estrutura); } .celula--viva .celula__texto{ color:var(--balaio-fibra); } .celula--aberta{ background:transparent; color:var(--texto-fraco); border:1.5px dashed var(--linha-forte); align-items:center; justify-content:center; min-height:180px; text-align:center; } .celula__titulo{ margin:.5rem 0 0; font-size:1.25rem; font-weight:600; } .celula__texto{ margin:0; font-size:.9375rem; line-height:1.55; color:var(--texto-suave); } /* ---------- tag ---------- */ .tag{ display:inline-flex; align-items:center; align-self:flex-start; font-family:var(--fonte-mono); font-size:10px; line-height:var(--lh-rotulo); letter-spacing:var(--ls-rotulo); text-transform:uppercase; padding:6px 10px; border-radius:var(--r-tag); } .tag--padrao{ background:var(--surface-estrutura); color:var(--sobre-estrutura); } .tag--neutra{ background:var(--linha); color:var(--texto); } /* ---------- processo (numerado) ---------- */ .processo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--e-5); align-items:start; } .processo__coluna{ display:flex; flex-direction:column; gap:var(--e-4); } .processo__lista{ display:flex; flex-direction:column; gap:var(--e-4); } .processo__item{ display:flex; gap:var(--e-3); align-items:baseline; } .processo__numero{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); color:var(--balaio-fibra-escura); } .processo__conteudo{ display:flex; flex-direction:column; gap:.25rem; } .processo__conteudo-titulo{ font-size:1.0625rem; font-weight:500; color:var(--texto-inverso); } .processo__conteudo-texto{ font-size:.9375rem; line-height:1.5; color:var(--balaio-fibra-escura); } /* ---------- parceiros / tags em grupo ---------- */ .parceiros{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--e-4); align-items:stretch; } .parceiros__grupo{ display:flex; flex-direction:column; gap:var(--e-3); } .parceiros__grupo-titulo{ color:var(--texto-fraco); } .parceiros__tags{ display:flex; flex-wrap:wrap; gap:var(--e-2); } /* ---------- contato ---------- */ .contato{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--e-5); align-items:start; } .contato__coluna{ display:flex; flex-direction:column; gap:var(--e-4); } .contato__acoes{ display:flex; flex-direction:column; gap:var(--e-3); align-items:flex-start; } .contato__email{ font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:var(--ls-rotulo); color:var(--texto-estrutura); } .contato__horario{ display:flex; flex-direction:column; gap:.25rem; font-size:.9375rem; color:var(--texto-fraco); } .contato__cartao{ background:var(--surface-alta); border-radius:20px; padding:var(--e-4); } /* ---------- campo (form field) ---------- */ .formulario{ display:flex; flex-direction:column; gap:var(--e-4); } .campo{ display:flex; flex-direction:column; gap:var(--e-2); } .campo__rotulo{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); line-height:var(--lh-rotulo); text-transform:uppercase; color:var(--texto-estrutura); } .campo__controle{ width:100%; box-sizing:border-box; font-family:var(--fonte-texto); font-size:15px; line-height:1.4; color:var(--texto); background:var(--surface); border-radius:var(--r-controle); padding:12px 14px; border:1.5px solid var(--linha); outline:none; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); resize:vertical; font-family:var(--fonte-texto); } .campo__controle:focus{ border-color:var(--texto-estrutura); outline:2px solid var(--foco); outline-offset:2px; } .campo--erro .campo__controle{ border-color:var(--erro); } .campo__ajuda{ font-family:var(--fonte-texto); font-size:.875rem; line-height:1.55; color:var(--texto-fraco); } .campo--erro .campo__ajuda{ color:var(--erro); } /* ---------- alerta ---------- */ .alerta{ background:var(--ok-tint); color:var(--ok); border-radius:var(--r-celula); padding:var(--e-4); display:flex; flex-direction:column; gap:var(--e-2); } .alerta__titulo{ font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); line-height:var(--lh-rotulo); text-transform:uppercase; } .alerta__texto{ font-family:var(--fonte-texto); font-size:1rem; line-height:1.65; max-width:var(--medida); } .oculto{ display:none; } /* ---------- rodape ---------- */ .rodape{ background:var(--balaio-tinta); padding:var(--e-6) 0 var(--e-5); } .rodape__conteudo{ display:flex; flex-direction:column; gap:var(--e-4); } .rodape__malha{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--e-4); align-items:stretch; } .rodape__contato{ display:flex; flex-direction:column; gap:var(--e-2); font-family:var(--fonte-mono); font-size:.75rem; letter-spacing:var(--ls-rotulo); } .rodape__contato a{ color:var(--balaio-fibra); padding:8px 2px; } .rodape__nav{ display:flex; flex-direction:column; gap:var(--e-2); font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); text-transform:uppercase; } .rodape__nav a{ color:var(--balaio-fibra-escura); padding:8px 2px; } .rodape__legenda{ font-family:var(--fonte-mono); font-size:10px; letter-spacing:var(--ls-rotulo); text-transform:uppercase; color:var(--balaio-fibra-escura); } /* ---------- link dentro da celula (cards de servico) ---------- */ .celula__link{ margin-top:auto; padding-top:var(--e-3); font-family:var(--fonte-mono); font-size:var(--t-rotulo); letter-spacing:var(--ls-rotulo); text-transform:uppercase; color:var(--texto-estrutura); } .celula__link::after{ content:" →"; } .celula--viva .celula__link{ color:var(--balaio-fibra); } /* ---------- faq (details/summary) ---------- */ .faq{ display:flex; flex-direction:column; gap:var(--e-2); max-width:var(--medida); } .faq__item{ background:var(--surface-alta); border-radius:var(--r-celula); padding:var(--e-3) var(--e-4); transition:background var(--dur-superficie) var(--ease); } .faq__item[open]{ background:var(--balaio-fibra-clara); } .faq__pergunta{ cursor:pointer; font-size:1.0625rem; font-weight:600; line-height:1.4; color:var(--texto); list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e-3); } .faq__pergunta::-webkit-details-marker{ display:none; } .faq__pergunta::after{ content:"+"; font-family:var(--fonte-mono); font-size:1.25rem; line-height:1; color:var(--texto-estrutura); flex:none; transition:transform var(--dur) var(--ease); } .faq__item[open] .faq__pergunta::after{ content:"–"; } .faq__resposta{ padding-top:var(--e-3); } .faq__resposta p{ margin:0; font-size:1rem; line-height:1.65; color:var(--texto-suave); } /* ---------- hero das paginas de servico ---------- */ .servico-hero{ padding-top:var(--e-5); padding-bottom:var(--e-6); } .servico-hero__conteudo{ display:flex; flex-direction:column; gap:var(--e-4); padding-bottom:var(--e-5); } .servico-hero__titulo{ margin:0; font-family:var(--fonte-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.95; font-size:clamp(2.25rem,7vw,4.5rem); max-width:18ch; text-wrap:balance; } .servico-hero__texto{ margin:0; font-size:clamp(1rem,2.4vw,1.1875rem); line-height:1.65; color:var(--texto-suave); max-width:58ch; text-wrap:pretty; } /* ---------- conteudo corrido (prosa) ---------- */ .prosa{ max-width:var(--medida); display:flex; flex-direction:column; gap:var(--e-3); } .prosa p{ margin:0; font-size:1.0625rem; line-height:1.7; color:var(--texto-suave); text-wrap:pretty; } .prosa h3{ margin:var(--e-3) 0 0; font-size:1.25rem; font-weight:600; color:var(--texto); } /* ---------- lista de entregaveis ---------- */ .lista{ display:flex; flex-direction:column; gap:var(--e-3); margin:0; padding:0; list-style:none; max-width:var(--medida); } .lista li{ display:flex; gap:var(--e-3); align-items:flex-start; font-size:1.0625rem; line-height:1.6; color:var(--texto-suave); } .lista li::before{ content:"—"; font-family:var(--fonte-mono); color:var(--texto-estrutura); flex:none; line-height:1.6; } .lista--clara li{ color:var(--balaio-fibra); } .lista--clara li::before{ color:var(--balaio-fibra-escura); } /* ---------- cta final ---------- */ .cta{ background:var(--surface-estrutura); padding:var(--e-6) 0; } .cta__conteudo{ display:flex; flex-direction:column; gap:var(--e-4); align-items:flex-start; padding-bottom:var(--e-5); } .cta__titulo{ margin:0; font-family:var(--fonte-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em; line-height:.9; font-size:clamp(1.75rem,5vw,2.75rem); color:var(--texto-inverso); max-width:20ch; } .cta__texto{ margin:0; font-size:1.0625rem; line-height:1.65; color:var(--balaio-fibra); max-width:52ch; } .cta__acoes{ display:flex; gap:var(--e-3); flex-wrap:wrap; align-items:center; } /* ---------- outros servicos (links cruzados) ---------- */ .servicos-relacionados{ display:flex; flex-wrap:wrap; gap:var(--e-2); } .servicos-relacionados a{ font-family:var(--fonte-mono); font-size:10px; letter-spacing:var(--ls-rotulo); text-transform:uppercase; padding:6px 10px; border-radius:var(--r-tag); background:var(--linha); color:var(--texto); } .servicos-relacionados a:hover{ background:var(--linha-forte); }