/* =========================================================
SOLTS — Estilos base
Tokens e componentes extraídos do projeto de referência.
========================================================= */
/* ---------- Fontes (Plus Jakarta Sans) ---------- */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-300-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-300-normal.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:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-400-normal.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:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-500-normal.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:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-600-normal.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:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-normal.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:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-800-normal.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-normal.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:"Plus Jakarta Sans";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-700-italic.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-700-italic.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:"Plus Jakarta Sans";font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-ext-800-italic.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:800;font-display:swap;src:url(../fonts/plus-jakarta-sans-latin-800-italic.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}
/* ---------- Tokens de design ---------- */
:root{
--background: 210 20% 98%;
--foreground: 215 40% 12%;
--card: 0 0% 100%;
--card-foreground: 215 40% 12%;
--primary: 208 100% 33%; /* #005DAA */
--primary-foreground: 0 0% 100%;
--secondary: 45 100% 50%;
--secondary-foreground: 215 40% 12%;
--accent: 48 100% 50%; /* #FFCC00 */
--accent-foreground: 208 100% 20%;
--muted: 210 20% 95%;
--muted-foreground: 215 15% 45%;
--border: 210 20% 90%;
--ring: 208 100% 33%;
--radius: 2rem;
--brand-blue: #005DAA;
--brand-yellow: #FFCC00;
--slate-100: #f1f5f9;
--slate-600: #475569;
--slate-700: #334155;
--slate-900: #0f172a;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
--header-h: 80px;
--header-h-scrolled: 64px;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
line-height:1.5;
-webkit-text-size-adjust:100%;
-webkit-tap-highlight-color:transparent;
scroll-behavior:smooth;
}
body{
margin:0;
font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
background-color:hsl(var(--background));
color:hsl(var(--foreground));
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6{font-family:inherit;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* ---------- Layout ---------- */
.container{
width:100%;
max-width:1400px;
margin-inline:auto;
padding-inline:1rem;
}
/* Título display do sistema visual (uso futuro nas seções internas) */
.heading-display{font-weight:800;font-style:italic}
/* Efeito de vidro do cabeçalho */
.glass{
border-bottom:1px solid hsl(var(--border) / .3);
background-color:hsl(var(--card) / .7);
-webkit-backdrop-filter:blur(24px);
backdrop-filter:blur(24px);
}
/* =========================================================
TOPBAR
========================================================= */
.topbar{
display:none;
/* Cor do tema, definida em Configuracoes. Vem de /tema.css; o valor de
reserva vale se aquela folha faltar. O texto e branco com transparencia,
entao a cor escolhida precisa ser escura o bastante para ele ler. */
background-color:var(--tema, hsl(var(--primary)));
color:hsl(var(--primary-foreground) / .8);
font-size:.75rem;
line-height:1rem;
padding-block:.5rem;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between}
.topbar__group{display:flex;align-items:center;gap:1.25rem}
.topbar__group--right{gap:1rem}
.topbar__item{display:flex;align-items:center;gap:.375rem}
.topbar__item svg{flex-shrink:0}
.topbar__divider{width:1px;height:.75rem;background-color:hsl(var(--primary-foreground) / .2)}
.topbar__social{display:flex;align-items:center;gap:.5rem}
.topbar__social a{transition:color .15s ease}
.topbar__social a:hover{color:hsl(var(--secondary))}
@media (min-width:768px){
.topbar{display:block}
}
/* =========================================================
HEADER
========================================================= */
.header{
position:sticky;
top:0;
z-index:50;
height:var(--header-h);
box-shadow:0 1px 4px rgba(0,0,0,.06);
transition:height .3s ease-out, box-shadow .3s ease-out;
}
.header.is-scrolled{
height:var(--header-h-scrolled);
box-shadow:0 4px 28px rgba(0,93,170,.14);
}
.header__inner{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}
.header__logo{display:flex;align-items:center;gap:.75rem;flex-shrink:0;margin-left:1rem}
.header__logo img{
height:64px;
max-height:64px;
width:auto;
object-fit:contain;
transition:height .3s ease-out;
}
.header.is-scrolled .header__logo img{height:46px}
.header__burger{padding:.5rem;color:hsl(var(--foreground));display:inline-flex}
.header__burger .icon-close{display:none}
.header__burger.is-open .icon-menu{display:none}
.header__burger.is-open .icon-close{display:block}
/* ---------- Navegação desktop ---------- */
.nav{display:none;align-items:center;gap:.125rem;margin-left:1rem}
.nav__item{position:relative}
.nav__item-row{display:flex;align-items:center}
/* Hover e item ativo marcam apenas o texto — sem fundo.
A cor e a do tema, definida em Configuracoes: vem de /tema.css, e o
--brand-blue fica de reserva para o caso de aquela folha faltar. */
.nav__link{
padding:.5rem .75rem;
font-size:.875rem;
line-height:1.25rem;
font-weight:600;
color:hsl(var(--foreground));
transition:color .15s ease;
}
.nav__link:hover{color:var(--tema, var(--brand-blue))}
.nav__link.is-active{color:var(--tema, var(--brand-blue))}
.nav__toggle{
padding:.5rem .5rem .5rem 0;
font-size:.875rem;
color:hsl(var(--foreground));
transition:color .15s ease;
}
.nav__toggle:hover{color:var(--tema, var(--brand-blue))}
/* Item da página atual: a seta acompanha a cor do link */
.nav__toggle.is-active{color:var(--tema, var(--brand-blue))}
.nav__chevron{transition:transform .2s ease}
.nav__item.is-open .nav__chevron,
.mobile-nav__group.is-open .nav__chevron{transform:rotate(180deg)}
.nav__item.is-open > .nav__item-row .nav__link--split,
.nav__item.is-open > .nav__item-row .nav__toggle{color:var(--tema, var(--brand-blue))}
/* ---------- Dropdown ---------- */
.dropdown{
position:absolute;
top:100%;
left:0;
padding-top:.5rem;
z-index:50;
display:none;
}
.nav__item.is-open > .dropdown{display:block}
.dropdown__panel{
background-color:#fff;
border:1px solid var(--slate-100);
border-radius:.75rem;
box-shadow:var(--shadow-xl);
padding-block:.5rem;
min-width:220px;
animation:dropdown-in .15s ease-out;
}
@keyframes dropdown-in{from{transform:translateY(-8px)}to{transform:translateY(0)}}
.dropdown__link{
display:block;
padding:.625rem 1.25rem;
font-size:.875rem;
line-height:1.25rem;
font-weight:500;
color:var(--slate-700);
transition:background-color .15s ease, color .15s ease;
}
/* A tinta de fundo tambem segue o tema. Duas declaracoes: navegador que nao
conhece color-mix() ignora a segunda e fica com o cinza neutro, que combina
com qualquer cor escolhida. */
.dropdown__link:hover{
background-color:var(--slate-100);
background-color:color-mix(in srgb, var(--tema, var(--brand-blue)) 6%, transparent);
color:var(--tema, var(--brand-blue));
}
/* ---------- Botão "Doe Agora" ---------- */
.btn-donate{
margin-left:.5rem;
display:flex;
align-items:center;
gap:.375rem;
padding:.5rem 1.25rem;
background-color:var(--brand-yellow);
color:var(--slate-900);
border-radius:.75rem;
font-size:.875rem;
line-height:1.25rem;
font-weight:700;
box-shadow:var(--shadow-sm);
transition:filter .15s ease;
}
.btn-donate:hover{filter:brightness(1.05)}
/* ---------- Busca do topo ---------- */
/* Recolhida, e um quadrado do tamanho do "Doe Agora" ao lado: 2,25rem de altura
sai dos .5rem de padding mais a linha de 1,25rem daquele botao, e o mesmo raio
de .75rem.
Vive DENTRO do `.nav`, e nao ao lado dele: o `.header__inner` alinha a
navegacao inteira a direita, entao o campo crescendo alarga o `.nav` e empurra
os itens do menu para a esquerda. Fora dele, o campo empurraria o logotipo.
A margem e a mesma que o "Doe Agora" ja tinha, para o trio ficar espacado por
igual. */
.busca-topo{
display:flex;
align-items:center;
margin-left:.5rem;
}
/* O quadrado. Silhueta do botao de baixar PDF — anel de 1px por dentro, lupa na
cor do tema —, mas com o fundo BRANCO em repouso: fechado ele convive com o
"Doe Agora" amarelo cheio, e duas placas coloridas lado a lado disputariam a
atencao que e para ser dele.
A cor do tema entra so quando a caixa esta aberta, e nao no hover do proprio
botao: aberta, a busca deixou de ser um detalhe do topo e virou o que a pessoa
esta fazendo — e o botao preenchido e o que diz onde termina a acao. */
.busca-topo__botao{
display:inline-grid;
place-items:center;
flex-shrink:0;
width:2.25rem;
height:2.25rem;
padding:0;
color:var(--tema, hsl(var(--primary)));
background:hsl(var(--card));
border:0;
border-radius:.75rem;
box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tema, hsl(var(--primary))) 16%, transparent);
cursor:pointer;
transition:background-color .25s ease,color .25s ease,box-shadow .25s ease;
}
.busca-topo:hover .busca-topo__botao,
.busca-topo:focus-within .busca-topo__botao{
color:hsl(var(--primary-foreground));
background:var(--tema, hsl(var(--primary)));
box-shadow:0 6px 14px -4px color-mix(in srgb, var(--tema, hsl(var(--primary))) 55%, transparent);
}
/* O anel de foco do teclado fica por fora da placa preenchida, para nao sumir
dentro dela. */
.busca-topo__botao:focus-visible{
outline:2px solid var(--tema, hsl(var(--primary)));
outline-offset:2px;
}
/* A caixa que recorta o campo. E ela que muda de largura — de zero ao aberto —,
e por isso e ela que empurra o menu para a esquerda.
`overflow:hidden` e o que faz o campo SURGIR de tras do botao em vez de
simplesmente aparecer: o campo tem largura fixa e desliza para dentro deste
recorte, entao da esquerda so se ve o pedaco que ja entrou. */
.busca-topo__caixa{
display:block;
width:0;
overflow:hidden;
border-radius:.75rem;
/* .8s. Abaixo disso o campo chega antes de o olho acompanhar a entrada, e o
deslizamento se le como um aparecimento; muito acima, o menu fica andando
de um lado para o outro a cada mouse que passa de raspagem a caminho do
"Doe Agora".
A caixa e o campo compartilham duracao e curva — separados, a borda
esquerda do campo descolaria da borda da caixa no meio do percurso. */
transition:width .8s cubic-bezier(.4, 0, .2, 1),margin .8s cubic-bezier(.4, 0, .2, 1);
}
/* A largura aberta e a MESMA aqui e no campo: a caixa e o recorte, o campo e o
que desliza dentro dela. Diferentes, sobraria um vao de um lado ou o campo
seria cortado do outro. Mexeu numa, mexa na outra. */
.busca-topo:hover .busca-topo__caixa,
.busca-topo:focus-within .busca-topo__caixa{
width:min(13rem, 30vw);
margin-right:.375rem;
}
/* Largura FIXA, e nao 100%: acompanhando a caixa, o campo se esticaria no
lugar, que e o efeito de "aparecer" que se quis evitar. Fixo, ele entra
inteiro, deslizando.
`translateX(100%)` e a posicao de partida: uma largura inteira a direita,
escondido pelo recorte. A cortina sobe da direita para a esquerda ate o zero.
Fechado mas ainda FOCAVEL, de proposito: escondido com `display` ou
`visibility` ele sairia da ordem de tabulacao, e quem navega pelo teclado nao
teria como abrir a caixa. Assim o Tab cai nele, o `:focus-within` dispara e a
caixa se abre no mesmo instante. */
.busca-topo__campo{
width:min(13rem, 30vw);
height:2.25rem;
padding:.375rem .75rem;
border:0;
opacity:0;
transform:translateX(100%);
font-family:inherit;
font-size:.875rem;
color:var(--slate-900);
background:hsl(var(--card));
border-radius:.75rem;
box-shadow:inset 0 0 0 1px hsl(var(--border));
/* A opacidade continua mais curta que o deslizamento, de proposito: o campo
termina de aparecer no comeco do trajeto, e o resto do tempo se ve ele
DESLIZANDO — que e o movimento que se quer mostrar. Igualada aos .8s, ele
entraria translucido ate o fim e o efeito voltaria a ser o de surgir do
nada. */
transition:transform .8s cubic-bezier(.4, 0, .2, 1),opacity .25s ease;
}
.busca-topo:hover .busca-topo__campo,
.busca-topo:focus-within .busca-topo__campo{
transform:translateX(0);
opacity:1;
}
/* O convite, e nao o conteudo: mais claro e um ponto menor que o texto que a
pessoa digita, para nao ser confundido com algo ja preenchido. A cor sai do
mesmo `--muted-foreground` dos textos de apoio do site. */
.busca-topo__campo::placeholder{
font-size:.8125rem;
font-weight:400;
color:hsl(var(--muted-foreground));
opacity:1;
}
/* Anel POR DENTRO, e nao `outline`: a caixa recorta o que passa da borda, e um
contorno desenhado do lado de fora sumiria justamente no campo em foco. */
.busca-topo__campo:focus-visible{
outline:none;
box-shadow:inset 0 0 0 2px var(--tema, hsl(var(--primary)));
}
/* O "x" de limpar que o navegador desenha num `type="search"`.
Ele vem num azul do sistema, que nao tem nada a ver com o tema, e colado no
texto — num termo longo, a ultima letra encosta nele.
Nao da para recolorir o desenho nativo: a saida e apaga-lo (`appearance:none`)
e redesenha-lo. O `mask` recorta um retangulo da cor do tema no formato do X,
entao a cor passa a ser a variavel do tema, como no resto da pagina — e nao um
segundo azul que so aparece quando ha texto digitado.
Vale para os campos de busca do site: o do topo, o da Transparencia e o de
Noticias.
So Chrome e Safari desenham este botao; no Firefox a regra nao encontra nada e
nao ha o que corrigir. */
.busca-topo__campo::-webkit-search-cancel-button,
.consulta-busca__campo::-webkit-search-cancel-button,
.noticias-filtro__campo input[type="search"]::-webkit-search-cancel-button{
-webkit-appearance:none;
appearance:none;
width:.6875rem;
height:.6875rem;
margin-left:.625rem;
cursor:pointer;
background-color:var(--tema, hsl(var(--primary)));
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E");
-webkit-mask-size:contain;
mask-size:contain;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
}
/* Quem pediu menos animacao ve a caixa abrir e fechar sem o deslizamento. */
@media (prefers-reduced-motion:reduce){
.busca-topo__caixa,
.busca-topo__campo{transition:none}
}
@media (min-width:1024px){
.nav{display:flex}
.header__burger{display:none}
}
/* ---------- Navegação mobile ---------- */
.mobile-nav{
display:none;
background-color:#fff;
border-top:1px solid var(--slate-100);
padding:0 1rem 1rem;
max-height:calc(100vh - var(--header-h));
overflow-y:auto;
}
.mobile-nav.is-open{display:block}
.mobile-nav__link{
display:block;
padding-block:.75rem;
font-size:.875rem;
line-height:1.25rem;
font-weight:600;
color:hsl(var(--foreground));
border-bottom:1px solid var(--slate-100);
transition:color .2s ease;
}
.mobile-nav__link:hover{color:var(--tema, var(--brand-blue))}
.mobile-nav__row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--slate-100)}
.mobile-nav__link--flush{flex:1;border-bottom:0}
.mobile-nav__toggle{padding:.75rem;color:hsl(var(--foreground));display:inline-flex}
.mobile-nav__sub{display:none;padding-left:1rem;padding-bottom:.25rem}
.mobile-nav__group.is-open .mobile-nav__sub{display:block}
.mobile-nav__sub a{
display:block;
padding-block:.5rem;
font-size:.875rem;
line-height:1.25rem;
color:var(--slate-600);
transition:color .15s ease;
}
.mobile-nav__sub a:hover{color:var(--tema, var(--brand-blue))}
.mobile-nav__cta{
margin-top:.75rem;
display:block;
text-align:center;
padding:.625rem 1.5rem;
background-color:var(--brand-yellow);
color:var(--slate-900);
border-radius:.75rem;
font-size:.875rem;
line-height:1.25rem;
font-weight:700;
}
@media (min-width:1024px){
.mobile-nav,.mobile-nav.is-open{display:none}
}
/* =========================================================
BANNER / CARROSSEL
========================================================= */
.banner{
position:relative;
width:100%;
overflow:hidden;
background-color:hsl(var(--primary));
}
/* Mantém a altura da seção seguindo a proporção real da arte */
.banner__spacer{width:100%;height:auto;visibility:hidden}
.banner__track{position:absolute;inset:0}
/* Transição "zoom suave": o slide novo entra levemente ampliado e assenta no
tamanho real enquanto surge; o anterior apenas se dissolve por baixo. */
.banner__slide{
position:absolute;
inset:0;
z-index:1;
opacity:0;
transform:scale(1.05);
will-change:opacity,transform;
}
.banner__slide img{width:100%;height:auto;display:block}
.banner__slide a{display:block;width:100%;height:100%}
/* Estado final: visível, no tamanho real e por cima do que está saindo */
.banner__slide.is-active{z-index:2;opacity:1;transform:scale(1)}
/* Entrada: anima de scale(1.05)/opacidade 0 até scale(1)/opacidade 1 */
.banner__slide.is-entering{
transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
/* Saída: permanece no tamanho real e some por baixo */
.banner__slide.is-exiting{
z-index:1;
opacity:0;
transform:scale(1);
transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.banner__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:20;
padding:.75rem;
border-radius:9999px;
background-color:rgba(255,255,255,.1);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
color:#fff;
border:1px solid rgba(255,255,255,.15);
transition:background-color .3s ease, transform .3s ease;
}
.banner__arrow--prev{left:1rem}
.banner__arrow--next{right:1rem}
.banner__arrow:hover{background-color:rgba(255,255,255,.25);transform:translateY(-50%) scale(1.1)}
.banner__arrow:active{transform:translateY(-50%) scale(.95)}
.banner__dots{
position:absolute;
bottom:1rem;
left:50%;
transform:translateX(-50%);
z-index:20;
display:flex;
gap:.5rem;
}
.banner__dot{
height:.375rem;
width:1rem;
border-radius:9999px;
background-color:rgba(255,255,255,.3);
transition:width .5s ease, background-color .5s ease, box-shadow .5s ease;
}
.banner__dot:hover{background-color:rgba(255,255,255,.6)}
.banner__dot.is-active{
width:2.5rem;
background-color:hsl(var(--accent));
box-shadow:0 0 8px rgba(255,204,0,.6);
}
/* Um único slide: esconde os controles de navegação */
.banner.is-single .banner__arrow,
.banner.is-single .banner__dots{display:none}
@media (prefers-reduced-motion:reduce){
.banner__slide,.banner__arrow,.banner__dot,.header,.header__logo img{transition:none !important}
}
/* =========================================================
PÁGINAS INTERNAS
========================================================= */
.page-header{
padding-block:4rem 2.5rem;
background-color:hsl(var(--muted) / .3);
border-bottom:1px solid hsl(var(--border) / .6);
/* folga para o cabeçalho fixo não cobrir o título ao chegar pela âncora */
scroll-margin-top:5rem;
}
.page-header__title{
margin-top:.75rem;
font-size:1.875rem;
line-height:2.25rem;
color:hsl(var(--foreground));
}
.page-header__subtitle{
margin-top:1rem;
max-width:42rem;
font-size:1.125rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
.page-content{padding-block:4rem}
.page-content p{
font-size:1rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
/* ---------- Abertura com imagem ----------
A classe so entra no container quando ha imagem enviada. Sem ela, nenhuma
destas regras alcanca o bloco, e o texto segue ocupando a largura inteira
como sempre ocupou. */
.abertura{
display:grid;
grid-template-columns:1fr;
gap:2.5rem;
/* Uma coluna centrada contra a outra: e o que poe a foto na mesma linha do
texto, e nao pendurada no topo ou na base dele. */
align-items:center;
}
/* O respiro entre paragrafos passa a sair daqui: dentro da coluna eles deixam
de ser filhos diretos de .page-content, onde a regra geral mora. */
.abertura__texto > * + *{margin-top:1.125rem}
/* Mesmo acabamento da foto da home — cantos de 1.5rem e sombra alta — para o
site nao ganhar um segundo jeito de apresentar imagem. O recorte em 3:2
garante a mesma forma seja qual for o arquivo enviado. */
.abertura__figura{
margin:0;
border-radius:1.5rem;
overflow:hidden;
box-shadow:var(--shadow-xl);
}
.abertura__figura img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
@media (min-width:1024px){
/* 1.25fr deixa o texto na casa dos 70 caracteres por linha, que e o intervalo
confortavel de leitura; o teto de 26rem impede a foto de crescer a ponto de
virar o assunto do bloco. */
.abertura{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3.5rem}
/* Encostada na margem direita do container, alinhada com o titulo e o
subtitulo do cabecalho logo acima. */
.abertura__figura{justify-self:end;max-width:26rem}
}
/* Bloco de conteúdo seguinte, destacado do anterior por fundo e filete */
.page-section{
padding-block:4rem;
background-color:hsl(var(--muted) / .3);
border-top:1px solid hsl(var(--border) / .6);
/* folga para o cabeçalho fixo não cobrir o título ao chegar pela âncora */
scroll-margin-top:5rem;
}
/* Alterna o fundo quando duas seções ficam lado a lado */
.page-section--plain{background-color:transparent}
.page-section__title{
font-size:1.5rem;
line-height:2rem;
color:hsl(var(--foreground));
}
.page-section__lead{
margin-top:1rem;
max-width:42rem;
font-size:1.125rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
.page-section__body{margin-top:2rem}
.page-section__body p{
font-size:1rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
@media (min-width:768px){
.page-header{padding-block:5rem 3rem}
.page-header__title{font-size:3rem;line-height:1}
.page-section__title{font-size:2.25rem;line-height:2.5rem}
}
/* =========================================================
QUEM SOMOS (home)
========================================================= */
.section-about{
padding-block:6rem;
background-color:hsl(var(--muted) / .3);
/* folga para o cabeçalho fixo não cobrir o título ao chegar via #quem-somos */
scroll-margin-top:5rem;
}
.about__grid{
display:grid;
grid-template-columns:1fr;
gap:4rem;
align-items:center;
}
/* ---------- Coluna de texto ---------- */
.section-eyebrow{
display:block;
font-size:.875rem;
line-height:1.25rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--brand-yellow);
}
.section-title{
margin-top:.75rem;
font-size:1.875rem;
line-height:2.25rem;
color:hsl(var(--foreground));
}
.about__lead{
margin-top:1.5rem;
font-size:1.125rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
.about__paragraph{
margin-top:1rem;
font-size:1rem;
line-height:1.625;
color:hsl(var(--muted-foreground));
}
/* Botao de destaque do site: "Conheca nossa historia" na home e "Enviar
mensagem" no formulario de contato. Sao os dois unicos usos no site — o
.btn-primary do painel vem do Bootstrap, noutra folha, e nao e afetado. */
.btn-primary{
display:inline-block;
margin-top:2rem;
padding:.875rem 2rem;
/* Cor do tema, definida em Configuracoes. Vem de /tema.css; o valor de
reserva vale se aquela folha faltar. */
background-color:var(--tema, hsl(var(--primary)));
color:hsl(var(--primary-foreground));
font-size:.875rem;
line-height:1.25rem;
font-weight:700;
border-radius:.75rem;
box-shadow:var(--shadow-md);
/* Clareia por filtro, e nao por opacidade sobre o fundo: a cor do tema chega
como hexadecimal, e hexadecimal nao aceita o `/ .9` do hsl(). E o mesmo
recurso que o botao de doacao e o do rodape ja usam. */
transition:filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.05)}
/* ---------- Coluna visual ---------- */
.about__media{display:flex;flex-direction:column;gap:1.25rem}
.about__photo{
position:relative;
margin:0;
border-radius:1.5rem;
overflow:hidden;
box-shadow:var(--shadow-xl);
}
/* Card sempre em 3:2 — a proporção da foto, então ela aparece praticamente
inteira. O object-fit garante o mesmo formato se a imagem for trocada. */
.about__photo img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover}
/* Véu escuro na base, para o texto da legenda ficar legível sobre a foto.
Cor do tema, definida em Configuracoes. Vem de /tema.css em componentes
separados (--tema-rgb), e não como --tema: aqui a cor precisa de
transparência, e não há como aplicar alfa a um hexadecimal já pronto dentro
de um gradiente. O valor de reserva é a cor original do site, para o véu
continuar existindo se aquela folha faltar — sem ele a legenda branca
ficaria ilegível sobre foto clara. */
.about__photo::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(var(--tema-rgb, 0,61,120), .6), transparent);
}
.about__photo-caption{position:absolute;bottom:1rem;left:1.25rem;z-index:1}
.about__photo-title{color:#fff;font-size:.875rem;line-height:1.25rem;font-weight:700}
.about__photo-subtitle{color:rgba(255,255,255,.7);font-size:.75rem;line-height:1rem}
@media (min-width:768px){
.section-title{font-size:3rem;line-height:1}
}
@media (min-width:1024px){
.about__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* =========================================================
RODAPÉ
========================================================= */
.footer{
/* Mesma cor do tema da barra superior: as duas faixas escuras do site
fecham a pagina em cima e embaixo, e devem combinar. */
background-color:var(--tema, hsl(var(--primary)));
color:hsl(var(--primary-foreground));
}
.footer__top{padding-block:4rem}
.footer__grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
.footer__logo{height:3rem;width:auto;object-fit:contain;margin-bottom:1rem;filter:brightness(0) invert(1)}
.footer__text{font-size:.875rem;line-height:1.625;opacity:.7}
.footer__text--strong{opacity:.8;margin-bottom:1.25rem}
.footer__badge{
margin-top:1.25rem;
display:inline-flex;
align-items:center;
gap:.5rem;
border:1px solid hsl(var(--accent) / .3);
background-color:hsl(var(--accent) / .1);
border-radius:9999px;
padding:.375rem .75rem;
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.1em;
color:hsl(var(--accent));
}
.footer__social{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem}
.footer__social a{
width:2.25rem;
height:2.25rem;
border-radius:9999px;
background-color:hsl(var(--primary-foreground) / .1);
display:flex;
align-items:center;
justify-content:center;
transition:background-color .3s ease, color .3s ease;
}
.footer__social a:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.footer__hashtags{
margin-top:1rem;
display:flex;
flex-wrap:wrap;
gap:.5rem;
font-size:11px;
font-weight:700;
opacity:.6;
}
.footer__hashtags span{color:hsl(var(--accent))}
.footer__title{font-size:1.125rem;line-height:1.75rem;font-weight:700;margin-bottom:1rem}
.footer__title--spaced{margin-top:1.75rem;margin-bottom:.75rem}
.footer__list{font-size:.875rem;line-height:1.25rem;opacity:.8;display:flex;flex-direction:column;gap:.625rem}
.footer__list--contact{gap:.75rem}
.footer__list--tight{gap:.5rem}
.footer__list a,
.footer__linkbtn{transition:color .2s ease, opacity .2s ease}
.footer__list a:hover,
.footer__linkbtn:hover{color:hsl(var(--accent));opacity:1}
.footer__list--contact li{display:flex;align-items:center;gap:.5rem}
.footer__icon{color:hsl(var(--accent));flex-shrink:0}
.footer__icon--top{margin-top:.125rem;align-self:flex-start}
.footer__list--contact li:has(.footer__icon--top){align-items:flex-start}
.footer__cta{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.75rem 1.5rem;
background-color:hsl(var(--accent));
color:hsl(var(--accent-foreground));
font-weight:700;
font-size:.875rem;
line-height:1.25rem;
border-radius:.75rem;
box-shadow:var(--shadow-md);
transition:filter .15s ease;
}
.footer__cta:hover{filter:brightness(1.05)}
.footer__cnpj{margin-top:.75rem;font-size:11px;opacity:.5}
.footer__bottom{border-top:1px solid hsl(var(--primary-foreground) / .1);padding-block:1.25rem}
.footer__bottom-inner{
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
gap:.5rem;
text-align:center;
}
.footer__copy{font-size:.875rem;line-height:1.25rem;opacity:.5;display:flex;align-items:center;gap:.25rem}
.footer__heart{color:#f87171}
.footer__legal{font-size:11px;opacity:.4}
@media (min-width:640px){
.footer__bottom-inner{flex-direction:row;text-align:left}
}
@media (min-width:768px){
.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ==========================================================================
FORMULÁRIO DE CONTATO
Acrescentado na Etapa 5. Usa os mesmos tokens do restante do site, para que
o formulário pareça nativo do layout. Só entra em cena quando ligado no
painel; com ele desligado, nada aqui é renderizado.
========================================================================== */
.form-section{padding:4rem 0;background:hsl(var(--background))}
.form-section .page-section__title{margin-bottom:1.5rem}
.form-contato{max-width:52rem}
.form-grid{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:768px){.form-grid{grid-template-columns:1fr 1fr}}
.form-campo{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}
.form-campo label{font-size:.875rem;font-weight:600;color:hsl(var(--foreground))}
.form-campo label span{color:#b42318}
.form-campo input,
.form-campo textarea{
font:inherit;
color:hsl(var(--foreground));
background:hsl(var(--card));
border:1px solid hsl(var(--foreground)/.15);
border-radius:.5rem;
padding:.75rem 1rem;
width:100%;
transition:border-color .2s ease, box-shadow .2s ease;
}
.form-campo textarea{resize:vertical;min-height:9rem}
.form-campo input:focus-visible,
.form-campo textarea:focus-visible{
outline:none;
border-color:hsl(var(--primary));
box-shadow:0 0 0 3px hsl(var(--primary)/.18);
}
.form-campo input[aria-invalid="true"],
.form-campo textarea[aria-invalid="true"]{border-color:#b42318}
.form-consentimento{display:flex;gap:.625rem;align-items:flex-start;margin:.5rem 0 1.5rem}
.form-consentimento input{margin-top:.2rem;width:1rem;height:1rem;flex-shrink:0;accent-color:hsl(var(--primary))}
.form-consentimento label{font-size:.875rem;line-height:1.5;color:hsl(var(--foreground)/.8)}
.form-contato .btn-primary{border:0;cursor:pointer}
.form-aviso{border-radius:.5rem;padding:1rem 1.25rem;margin-bottom:1.5rem;font-size:.9375rem}
.form-aviso--ok{background:hsl(152 45% 95%);color:hsl(152 55% 22%);border:1px solid hsl(152 45% 80%)}
.form-aviso--erro{background:hsl(4 70% 96%);color:#8a1c14;border:1px solid hsl(4 70% 85%)}
.form-aviso ul{margin:.5rem 0 0;padding-left:1.25rem}
/* Campo isca contra robô. Fora da tela, e não display:none — alguns robôs
ignoram campos ocultos, mas preenchem os que "existem". */
.form-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Rotulo visivel apenas para leitor de tela. O site nao tinha um utilitario
desses; e necessario para rotular campos cujo proposito ja esta claro
visualmente pelo contexto. */
.visually-hidden{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
/* Acesso ao painel a partir do rodape. Discreto de proposito: herda o tamanho
e a opacidade da linha legal e so ganha contraste no hover e no foco, para
nao virar mais um item de navegacao aos olhos do visitante. */
.footer__acesso{
text-decoration:none;
opacity:.85;
transition:opacity .2s ease;
}
.footer__acesso:hover,
.footer__acesso:focus-visible{
opacity:1;
text-decoration:underline;
}
@media (prefers-reduced-motion:reduce){
.footer__acesso{transition:none}
}
/* =========================================================
Texto de apresentacao da home vindo do editor
Antes eram dois paragrafos escritos a mao, cada um com a sua classe
(.about__lead e .about__paragraph) carregando o proprio margin-top. Vindo do
editor, saem
sem classe nenhuma e o reset `p{margin:0}` do site os cola.
O espacamento passa a ser responsabilidade do container.
========================================================= */
.about__lead > * + *{margin-top:1rem}
/* Todos os paragrafos com o mesmo corpo. Havia aqui uma regra encolhendo do
segundo em diante, herdada de quando eram dois campos separados no Blade.
Com um campo unico, o editor mostra todos iguais e o site os mostrava
diferentes — o editor deixava de valer como previa do resultado.
*/
/* O editor tambem produz titulos, listas e citacoes. Sem estas regras eles
herdariam o reset do site — lista sem marcador, titulo sem respiro. */
.about__lead h2,
.about__lead h3,
.about__lead h4{
color:hsl(var(--foreground));
font-size:1.125rem;
line-height:1.4;
margin-top:1.5rem;
}
.about__lead ul,
.about__lead ol{
font-size:1rem;
padding-left:1.25rem;
list-style:revert;
}
.about__lead li + li{margin-top:.375rem}
.about__lead blockquote{
font-size:1rem;
padding-left:1rem;
border-left:3px solid hsl(var(--primary) / .3);
}
.about__lead a{color:hsl(var(--primary));text-decoration:underline}
.about__lead strong{color:hsl(var(--foreground))}
/* =========================================================
CONTATO — acabamento
Formulario a esquerda, ocupando a maior parte; dados da entidade num cartao
a direita. A ordem no HTML e a mesma, entao teclado e leitor de tela seguem
a ordem visual.
========================================================= */
/* Os dois blocos viraram UM cartao, dividido ao meio.
Antes eram duas pecas soltas com dois centimetros de vao entre elas, e a
pagina ficava com dois objetos disputando a atencao. Reunidos numa moldura
so — formulario no claro, dados no escuro —, eles se leem como as duas faces
da mesma coisa: escrever para a entidade e saber onde ela esta.
`overflow:hidden` e o que faz o painel escuro respeitar o canto arredondado
da moldura; sem ele o retangulo escuro vazaria pelos cantos.
`gap:0` porque a divisao agora e a propria mudanca de fundo, e nao um vao. */
.contato-layout{
display:grid;
grid-template-columns:1fr;
gap:0;
overflow:hidden;
background:hsl(var(--card));
border:1px solid hsl(var(--border));
border-radius:1.5rem;
box-shadow:var(--shadow-md);
}
/* ---------- Formulario ---------- */
/* O formulario mora num cartao.
Antes ele era um bloco solto ao lado do cartao de dados, e a razao escrita
aqui era evitar duas molduras competindo. O que resolve a competicao nao e
tirar a moldura de um dos dois: e dar PESOS diferentes. O formulario, que e a
acao da pagina, ficou branco e elevado; o cartao de dados, que e consulta,
perdeu a sombra e ganhou fundo apagado. Os dois tem moldura, e ninguem
confunde qual e o principal. */
/* Metade clara da moldura. A borda e a sombra sairam daqui: quem as carrega
agora e o cartao de fora, e mante-las aqui desenharia uma caixa dentro da
outra. */
.contato-formulario{
padding:2rem 1.5rem;
}
@media (min-width:640px){
.contato-formulario{padding:2.5rem}
}
/* Titulo no corpo do texto, nao na fonte de display: ali competia com o titulo
da pagina, logo acima. O tracinho embaixo repete o gesto do cabecalho da
pagina e amarra o cartao ao resto do site. */
.contato-formulario__titulo{
font-size:1.375rem;
line-height:1.3;
font-weight:700;
color:var(--slate-900);
margin:0 0 1.75rem;
}
.contato-formulario__titulo::after{
content:"";
display:block;
width:2.5rem;
height:3px;
margin-top:.875rem;
border-radius:999px;
background:var(--tema, hsl(var(--primary)));
}
.contato-formulario .form-contato{max-width:none}
/* Rotulo em versalete, igual ao do cartao de dados ao lado: as duas colunas
passam a parecer da mesma familia. */
.contato-formulario .form-campo label{
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:hsl(var(--muted-foreground));
}
/* Campo com fundo apagado e sem contorno visivel; ao receber o foco ele fica
branco e ganha o anel do tema. E o que da tato ao formulario: enquanto se
preenche, o campo ativo e o unico claro da coluna. */
/* Campos enxutos: com sete deles empilhados, a altura de antes empurrava o
botao de enviar para fora da tela num notebook. `font-size` junto com o
`padding` — so encolher a caixa em volta de um texto de 16px deixaria o campo
apertado em vez de menor. */
.contato-formulario .form-campo input,
.contato-formulario .form-campo select,
.contato-formulario .form-campo textarea{
padding:.5625rem .875rem;
font-size:.9375rem;
line-height:1.4;
border:1px solid transparent;
border-radius:.75rem;
/* `background-color`, e nao o atalho `background`: o seletor de assunto
desenha a propria seta em `background-image`, e o atalho a apagaria a cada
hover e a cada foco. */
background-color:hsl(var(--muted) / .6);
transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.contato-formulario .form-campo input:hover,
.contato-formulario .form-campo select:hover,
.contato-formulario .form-campo textarea:hover{background-color:hsl(var(--muted))}
/* `:focus`, e nao `:focus-visible`: naquele o navegador decide se o realce
aparece, e para campo de texto a resposta muda conforme o caminho do foco.
Num campo onde se DIGITA, saber onde o texto vai cair nao e preferencia de
navegacao — vale para quem chegou pelo mouse tambem. */
.contato-formulario .form-campo input:focus,
.contato-formulario .form-campo select:focus,
.contato-formulario .form-campo textarea:focus{
outline:0;
background-color:hsl(var(--card));
border-color:var(--tema, hsl(var(--primary)));
box-shadow:0 0 0 4px hsl(var(--muted));
box-shadow:0 0 0 4px color-mix(in srgb, var(--tema, hsl(var(--primary))) 18%, transparent);
}
.contato-formulario .form-campo textarea{min-height:7rem}
/* O seletor de assunto.
`appearance:none` apaga a seta do sistema, que vem em cinza-escuro sobre
fundo proprio e destoa dos campos vizinhos; a seta desenhada aqui e a mesma
do menu do site. Ela vai no `background`, e nao num elemento a parte, porque
`select` nao aceita filho que nao seja `option`.
`data:` no lugar de arquivo: a CSP do site declara `img-src 'self' data:`, e
um SVG de nove bytes uteis nao merece uma requisicao. */
.contato-formulario .form-campo select{
width:100%;
appearance:none;
-webkit-appearance:none;
padding-right:2.25rem;
/* `font-family` e nao o atalho `font`: `select` nao herda a fonte do site
sozinho, mas o atalho zeraria junto o `line-height` da regra de cima — e o
campo ficava 1px mais alto que os vizinhos, o bastante para desalinhar a
linha do formulario. */
font-family:inherit;
font-size:.9375rem;
line-height:1.4;
color:hsl(var(--foreground));
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right .875rem center;
background-size:1.125rem 1.125rem;
}
/* Enquanto nada foi escolhido, o texto fica em tom de apoio — como o
`placeholder` dos outros campos. Escolhido, ele vira texto normal.
`:has()` faz isso sem script; navegador que nao o conhece mostra tudo em
tom normal, que e uma degradacao boa. */
.contato-formulario .form-campo select:has(option[value=""]:checked){
color:hsl(var(--muted-foreground));
}
.contato-formulario .form-campo select option{color:hsl(var(--foreground))}
/* ---------- Escolha do modo de envio ---------- */
/* Dois cartoes-radio no alto do formulario. O radio de verdade continua ali,
escondido: e ele que carrega a escolha no envio, responde ao teclado e e
anunciado pelo leitor de tela. O que se ve e o `label` em volta.
`fieldset` sem borda nem respiro proprio: o navegador desenha os tres por
padrao, e aqui a moldura seria uma caixa a mais dentro do cartao. */
.form-modo{
margin:0 0 1.5rem;
padding:0;
border:0;
}
.form-modo__titulo{
padding:0;
margin:0 0 .625rem;
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:hsl(var(--muted-foreground));
}
/* Lado a lado a partir do tablet; empilhados no celular, onde duas colunas
deixariam os rotulos em duas linhas cada. */
.form-modo__opcoes{display:grid;gap:.625rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){
.form-modo__opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.form-modo__opcao{
display:flex;
align-items:flex-start;
gap:.625rem;
padding:.75rem .875rem;
border:1px solid hsl(var(--border));
border-radius:.75rem;
background:hsl(var(--card));
cursor:pointer;
}
.form-modo__opcao:hover{background:hsl(var(--muted) / .5)}
/* Sem `transition` aqui, e nao por gosto.
O Chrome nao reavalia a transicao quando o que muda e o estado de `:has()`:
com ela, o cartao ficava congelado na cor anterior — clicar no segundo pintava
o PRIMEIRO de verde. Medido: com `transition:none` as duas cores acompanham a
escolha; com ela, ficam trocadas. A troca instantanea tambem responde melhor
num controle de duas opcoes. */
/* O radio some da vista, mas nao da arvore de acessibilidade: `display:none` o
tiraria da ordem de tabulacao e a escolha viraria so-mouse. */
.form-modo__opcao input{
margin:.1875rem 0 0;
width:1rem;
height:1rem;
flex-shrink:0;
accent-color:var(--tema, hsl(var(--primary)));
}
.form-modo__texto{display:flex;flex-direction:column;gap:.125rem;min-width:0}
.form-modo__rotulo{
font-size:.875rem;
font-weight:700;
line-height:1.3;
color:var(--slate-900);
}
.form-modo__ajuda{
font-size:.75rem;
line-height:1.4;
color:hsl(var(--muted-foreground));
}
/* O cartao escolhido se pinta inteiro na cor do tema, com o texto em branco.
`:has()` faz isso sem script; navegador que nao o conhece deixa os dois
iguais, e a marca continua sendo o proprio radio — degradacao boa.
Vence o `:hover` de cima por especificidade: `:has(input:checked)` conta o
argumento mais especifico que ha dentro dele, e um tipo mais uma
pseudo-classe passam da pseudo-classe sozinha. Sem isso, passar o mouse sobre
o escolhido o devolveria ao cinza. */
.form-modo__opcao:has(input:checked){
border-color:var(--tema, hsl(var(--primary)));
background:var(--tema, hsl(var(--primary)));
}
.form-modo__opcao:has(input:checked) .form-modo__rotulo{
color:hsl(var(--primary-foreground));
}
.form-modo__opcao:has(input:checked) .form-modo__ajuda{
color:hsl(var(--primary-foreground) / .75);
}
/* O disco do radio tambem: com `accent-color` no tema, ele sumiria dentro do
cartao que agora tem a mesma cor. */
.form-modo__opcao:has(input:checked) input{
accent-color:hsl(var(--primary-foreground));
}
.form-modo__opcao:has(input:focus-visible){
outline:2px solid var(--tema, hsl(var(--primary)));
outline-offset:2px;
}
/* Escolhido, o contorno de foco sai em branco: no tema sobre o tema ele nao
apareceria, e quem navega por teclado perderia de vista onde esta. */
.form-modo__opcao:has(input:checked):has(input:focus-visible){
outline-color:hsl(var(--primary-foreground));
outline-offset:-4px;
}
/* Aviso de campo, abaixo do proprio campo. `hidden` continua valendo: o
`display:flex` do `.form-campo` venceria o `display:none` do atributo, e o
aviso do e-mail nasceria a vista. */
.contato-formulario .form-erro{
margin:0;
font-size:.75rem;
line-height:1.4;
color:#b42318;
}
.contato-formulario .form-erro[hidden]{display:none}
/* Campo bloqueado: apagado e com o cursor dizendo que ali nao se escreve. Sem
isto ele fica igual aos abertos, e a pessoa tenta digitar. */
.contato-formulario .form-campo input:disabled,
.contato-formulario .form-campo select:disabled{
color:hsl(var(--muted-foreground));
background-color:hsl(var(--muted) / .35);
cursor:not-allowed;
}
.form-contato--anonimo .form-campo:has(input:disabled) label{
color:hsl(var(--muted-foreground) / .7);
}
/* O espaco ENTRE os campos encolhe junto: campos menores com o vao de antes
ficariam soltos, e o formulario continuaria alto do mesmo jeito. */
.contato-formulario .form-campo{
gap:.3125rem;
margin-bottom:.875rem;
}
.contato-formulario .form-grid{gap:.25rem .875rem;margin-bottom:0}
.form-consentimento{
padding:1rem 0 0;
border-top:1px solid hsl(var(--border));
margin:1.25rem 0 1.25rem;
}
/* O botao ocupa a linha no celular — alvo grande e o que se acerta com o
polegar — e encolhe ate o texto a partir do tablet. */
.contato-formulario .btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
width:100%;
padding:.75rem 1.5rem;
font-size:.9375rem;
border-radius:.75rem;
transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
@media (min-width:640px){
.contato-formulario .btn-primary{width:auto}
}
.contato-formulario .btn-primary:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-md);
}
.form-contato__icone{width:1.125rem;height:1.125rem;flex-shrink:0}
@media (prefers-reduced-motion:reduce){
.contato-formulario .form-campo input,
.contato-formulario .form-campo textarea,
.contato-formulario .btn-primary{transition:none}
.contato-formulario .btn-primary:hover{transform:none}
}
/* ---------- Metade escura: os dados da entidade ---------- */
/* Na cor do tema, como o rodape e a barra do topo: sao as faixas escuras que
fecham a pagina, e esta e a terceira delas — o painel nao chega como cor
nova, chega como a cor da casa.
Escuro contra claro resolve a hierarquia sem enfeite: o olho vai primeiro ao
bloco de contraste alto, le os dados em quatro linhas e volta ao formulario,
que e onde ha o que fazer. Antes os dois blocos eram claros e a diferenca
entre eles era uma sombra a mais.
`overflow:hidden` para o brilho decorativo nao vazar do painel. */
.contato-dados{
position:relative;
overflow:hidden;
padding:2rem 1.5rem;
background:var(--tema, hsl(var(--primary)));
color:hsl(var(--primary-foreground));
}
@media (min-width:640px){
.contato-dados{padding:2.5rem}
}
/* Clareado no canto de cima: quebra a chapa de cor sem virar desenho. */
.contato-dados::before{
content:"";
position:absolute;
top:-8rem;
right:-8rem;
width:18rem;
height:18rem;
border-radius:50%;
background:hsl(var(--primary-foreground) / .07);
pointer-events:none;
}
.contato-dados__titulo,
.contato-dados__lista{position:relative}
.contato-dados__titulo{
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:700;
color:hsl(var(--primary-foreground) / .65);
margin:0 0 1.5rem;
}
.contato-dados__lista{margin:0;padding:0;list-style:none}
/* Icone a esquerda e texto a direita, e nao mais uma pilha de rotulos: com
quatro linhas iguais, o simbolo e o que deixa achar o telefone sem ler as
quatro. O `align-items:start` mantem o icone na altura da PRIMEIRA linha
quando o endereco quebra em duas. */
.contato-dados__item{
display:flex;
align-items:flex-start;
gap:.875rem;
padding:1rem 0;
border-bottom:1px solid hsl(var(--primary-foreground) / .14);
}
.contato-dados__item:last-child{border-bottom:0;padding-bottom:0}
.contato-dados__item:first-child{padding-top:0}
.contato-dados__icone{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.25rem;
height:2.25rem;
flex-shrink:0;
border-radius:.75rem;
color:hsl(var(--primary-foreground));
background:hsl(var(--primary-foreground) / .12);
}
.contato-dados__icone svg{width:1.125rem;height:1.125rem}
/* `min-width:0` para o endereco longo poder quebrar: num filho de flex, o
padrao e nao encolher abaixo do conteudo, e a linha estouraria o painel. */
.contato-dados__texto{
display:flex;
flex-direction:column;
gap:.125rem;
min-width:0;
}
.contato-dados__rotulo{
font-size:.6875rem;
text-transform:uppercase;
letter-spacing:.06em;
color:hsl(var(--primary-foreground) / .6);
}
.contato-dados__item a,
.contato-dados__texto span:not(.contato-dados__rotulo){
font-size:.9375rem;
line-height:1.5;
color:hsl(var(--primary-foreground));
overflow-wrap:anywhere;
}
.contato-dados__item a{text-decoration:none;transition:color .15s ease}
.contato-dados__item a:hover{color:hsl(var(--accent));text-decoration:underline}
@media (min-width:900px){
/* Formulario maior: o campo de mensagem precisa de largura. O painel guarda
linhas curtas e se resolve em pouco espaco.
`align-items:stretch` (padrao da grade) e o que faz a coluna escura ir do
topo ao pe da moldura — com `start`, ela pararia na ultima linha de texto e
deixaria um degrau branco embaixo. */
.contato-layout{grid-template-columns:minmax(0,1fr) minmax(0,21rem)}
}
@media (prefers-reduced-motion:reduce){
.contato-dados__item a{transition:none}
}
/* =========================================================
CONTEUDO DAS PAGINAS — acabamento
O visual mora aqui, e nao dentro do conteudo, de proposito: o editor do
painel normaliza o HTML para o esquema dele ao salvar, entao qualquer
escrito no conteudo e desmontado na primeira edicao.
Estilando o que o editor de fato preserva — titulo, paragrafo, lista — o
visual sobrevive a quem edita.
========================================================= */
/* Medida de leitura. Linha de 1300px cansa a varredura; ~70 caracteres e o
intervalo confortavel. */
.page-content > p,
.page-section__body > p,
.page-section__body > ul,
.page-section__body > ol{
max-width:68ch;
}
.page-content > * + *,
.page-section__body > * + *{margin-top:1.125rem}
/* Subtitulo de bloco. Sem caixa, sem fundo: o peso e o espaco ja separam. */
.page-section__body h3,
.page-content h3{
margin-top:2.5rem;
font-size:1.125rem;
line-height:1.4;
font-weight:700;
color:hsl(var(--foreground));
}
.page-section__body > h3:first-child,
.page-content > h3:first-child{margin-top:0}
/* Lista com marcador proprio, no lugar da bolinha que o reset do site remove. */
.page-section__body ul,
.page-content ul{padding-left:0;list-style:none}
.page-section__body ul li,
.page-content ul li{
position:relative;
padding-left:1.5rem;
margin-bottom:.75rem;
line-height:1.7;
}
.page-section__body ul li::before,
.page-content ul li::before{
content:"";
position:absolute;
left:.125rem;
top:.6875rem;
width:.375rem;
height:.375rem;
border-radius:1px;
transform:rotate(45deg);
background:hsl(var(--accent));
}
.page-section__body ol,
.page-content ol{padding-left:1.25rem;list-style:decimal}
.page-section__body a,
.page-content a{color:hsl(var(--primary));text-decoration:underline}
/* ---------- Linha do tempo ----------
Trilho no meio da pagina, com as fichas alternando os lados: a primeira a
direita, a segunda a esquerda, e assim por diante.
Qual ficha cai de que lado sai de :nth-child, e nao de classe impressa no
HTML. Cadastrar, apagar ou reordenar marcos no painel nao desalinha a
alternancia — ela se recalcula sozinha a cada renderizacao.
No celular nao ha dois lados: o trilho encosta na esquerda e todas as fichas
ficam a direita dele. Esta e a forma BASE, e a alternancia so entra a partir
de 768px — que e onde sobra largura para duas colunas de texto sem espremer
nenhuma das duas.
Trilho, medalha e ano saem na cor do tema, definida em Configuracoes. Onde a
cor precisa de transparencia ela passa por color-mix(), porque o tema chega
em hexadecimal; antes de cada uma vai a declaracao de reserva para o
navegador que nao conhecer a funcao. */
#nossa-historia .page-section__body{margin-top:2.75rem}
/* `max-width` proprio, anulando o de 68ch que o corpo da secao impoe aos filhos
diretos. Aquele limite existe para PARAGRAFO — largura de leitura confortavel
—, e aqui o filho direto e a linha inteira: herda-lo encolhia o trilho para
um terco da pagina e o jogava para a esquerda, em vez de centrar. O teto de
58rem continua garantindo que cada ficha nao passe da largura de leitura. */
#nossa-historia .linha-tempo{
position:relative;
max-width:58rem;
margin:0 auto;
padding:0;
list-style:none;
}
/* O trilho esmaece nas duas pontas: assim ele nasce e morre sem corte seco,
em vez de parecer uma linha cortada no meio do desenho. */
#nossa-historia .linha-tempo::before{
content:"";
position:absolute;
top:0;
bottom:0;
left:1.75rem;
width:2px;
background:linear-gradient(hsl(var(--primary) / 0),hsl(var(--primary) / .26) 10%,hsl(var(--primary) / .26) 90%,hsl(var(--primary) / 0));
background:linear-gradient(
transparent,
color-mix(in srgb, var(--tema, hsl(var(--primary))) 26%, transparent) 10%,
color-mix(in srgb, var(--tema, hsl(var(--primary))) 26%, transparent) 90%,
transparent
);
}
/* `grid-row` explicito nos dois filhos. Sem ele, a ficha que pede a coluna 1
cairia para a linha de baixo: o cursor de posicionamento automatico ja teria
passado da coluna 2 ao colocar a medalha, e ele nao volta atras. */
#nossa-historia .linha-tempo__item{
display:grid;
grid-template-columns:3.5rem 1fr;
gap:0 1rem;
align-items:start;
}
#nossa-historia .linha-tempo__item + .linha-tempo__item{margin-top:1.5rem}
/* Medalha sobre o trilho: disco cheio na cor do tema, com o ano dentro.
O anel externo e da cor do FUNDO da pagina, e nao branco: e ele que abre o
vao no trilho para a medalha caber.
O texto sai em branco porque a cor do tema e declarada como escura no painel
— o proprio campo avisa disso, e a barra superior e o rodape do site ja
contam com a mesma premissa. */
#nossa-historia .linha-tempo__marcador{
grid-column:1;
grid-row:1;
display:grid;
place-items:center;
width:3.5rem;
height:3.5rem;
border-radius:50%;
background:var(--tema, hsl(var(--primary)));
box-shadow:0 0 0 5px hsl(var(--background)), 0 6px 16px -8px hsl(var(--primary) / .55);
}
#nossa-historia .linha-tempo__cartao{
grid-column:2;
grid-row:1;
position:relative;
padding:1.25rem 1.375rem;
border-radius:1rem;
background:hsl(var(--card));
border:1px solid hsl(var(--border));
box-shadow:var(--shadow-sm);
transition:transform .25s ease, box-shadow .25s ease;
}
/* Bico apontando para o trilho: um quadrado girado 45 graus, com DUAS bordas
so. Com as quatro, as de dentro apareceriam cruzando a ficha. */
#nossa-historia .linha-tempo__cartao::before{
content:"";
position:absolute;
top:1.375rem;
left:-.4375rem;
width:.75rem;
height:.75rem;
transform:rotate(45deg);
background:hsl(var(--card));
border-left:1px solid hsl(var(--border));
border-bottom:1px solid hsl(var(--border));
}
#nossa-historia .linha-tempo__titulo{
margin:0;
font-size:1.0625rem;
font-weight:700;
line-height:1.35;
color:hsl(var(--foreground));
}
#nossa-historia .linha-tempo__ano{
font-size:.8125rem;
font-weight:700;
letter-spacing:.02em;
color:hsl(var(--primary-foreground));
}
#nossa-historia .linha-tempo__cartao p{
margin-top:.75rem;
font-size:.9375rem;
line-height:1.65;
color:hsl(var(--muted-foreground));
}
@media (hover:hover){
#nossa-historia .linha-tempo__cartao:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
}
/* Dois lados. A grade passa a ter tres colunas — ficha, medalha, ficha — e o
trilho vai para o centro. */
@media (min-width:768px){
#nossa-historia .linha-tempo::before{left:50%;transform:translateX(-50%)}
#nossa-historia .linha-tempo__item{
grid-template-columns:1fr 4.25rem 1fr;
gap:0 1.25rem;
align-items:center;
}
#nossa-historia .linha-tempo__item + .linha-tempo__item{margin-top:2.25rem}
#nossa-historia .linha-tempo__marcador{grid-column:2;justify-self:center}
/* Impar a direita, par a esquerda: o primeiro marco abre pela direita. */
#nossa-historia .linha-tempo__item:nth-child(odd) .linha-tempo__cartao{grid-column:3}
#nossa-historia .linha-tempo__item:nth-child(even) .linha-tempo__cartao{grid-column:1}
/* Com a ficha centrada na altura da medalha, o bico vai para o meio dela —
e nao mais para o alto, como no empilhamento do celular. */
#nossa-historia .linha-tempo__cartao::before{top:calc(50% - .375rem)}
#nossa-historia .linha-tempo__item:nth-child(even) .linha-tempo__cartao::before{
left:auto;
right:-.4375rem;
border-left:0;
border-bottom:0;
border-right:1px solid hsl(var(--border));
border-top:1px solid hsl(var(--border));
}
}
@media (prefers-reduced-motion:reduce){
#nossa-historia .linha-tempo__cartao{transition:none}
#nossa-historia .linha-tempo__cartao:hover{transform:none}
}
/* ---------- Diretoria ----------
Um cartao por cargo, em grade. Era tabela, e a tabela servia enquanto o que
se lia era uma linha por vez: cargo, nome, mandato. Com a foto ganhando
tamanho, o retrato passou a ser o que se ve primeiro, e retrato pede cartao.
A LARGURA depende de quantos sao, e a classe carrega a contagem porque o CSS
nao sabe contar filhos:
ate tres a grade encolhe ate o conteudo (`width:fit-content`) e as colunas
`1fr` repartem esse espaco em partes iguais. E o que faz todos os
cartoes ficarem do tamanho do MAIOR nome, em vez de cada um do
seu tamanho — `max-content` por coluna daria larguras diferentes.
quatro ou a grade volta a ocupar a linha inteira, dividida em quatro. Do
mais quinto em diante a grade quebra sozinha: sao quatro COLUNAS, e
nao quatro cartoes.
A subida e em degraus, e nao direto ao numero final: quatro colunas numa tela
de 576px deixariam cada cartao com pouco mais de 80px de largura util. */
/* O titulo acompanha os cartoes: os dois centrados na pagina.
Com a grade encolhida ate o conteudo — o caso de ate tres cargos —, um titulo
encostado a esquerda ficaria solto, apontando para um bloco que nao comeca
ali. Centrar os dois faz o conjunto ter um eixo so.
Por classe, e nao pelo id como em `#nossa-historia`: o id desta secao virou
a ancora editavel no painel, e uma regra presa a ele deixaria de valer no
dia em que alguem trocasse o nome da ancora — sem erro, so o alinhamento
sumindo. */
.secao-diretoria{text-align:center}
/* Folga para o cabecalho fixo nao cobrir o titulo de quem chega pela ancora,
como ja fazem `.page-header` e `.page-section`. E o que faz a ancora servir
de fato: sem isso o menu rola ate o bloco e o cabecalho tapa a primeira
linha dele. */
.secao-ancorada{scroll-margin-top:5rem}
.diretoria{
display:grid;
gap:1.5rem;
margin-top:1.5rem;
margin-inline:auto;
padding:0;
list-style:none;
grid-template-columns:minmax(0,18rem);
/* Encolhe ate o conteudo; `max-width` impede que o nome mais longo estoure a
largura da pagina no celular. */
width:fit-content;
max-width:100%;
}
@media (min-width:576px){
.diretoria--2,
.diretoria--3,
.diretoria--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:768px){
.diretoria--3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1024px){
/* Quatro ou mais: a linha inteira, em quatro partes iguais. `width:auto`
desfaz o encolhimento, que e o que segura os grupos de ate tres. */
.diretoria--4{
width:auto;
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
/* Escopado sob `.diretoria` de proposito: as listas do corpo da pagina recuam o
texto e desenham um losango amarelo no `::before` de cada item. Contam
primeiro as classes, e com duas contra uma estas regras vencem. Sem isto o
losango aparecia no canto de cada cartao. */
/* O filete da esquerda sai na cor do tema, definida em Configuracoes. E o unico
traco de cor do cartao: com o contorno cinza sozinho, quatro cartoes lado a
lado liam como quatro caixas vazias.
Vai na BORDA, e nao num `::before`: aquele pseudo-elemento ja e usado logo
abaixo para apagar o marcador que as listas do site desenham, e dar dois
papeis a ele deixaria as duas coisas presas uma na outra.
A borda mais grossa a esquerda desloca o conteudo 1,5px do centro real do
cartao. Fica abaixo do perceptivel, e compensar com padding assimetrico
custaria mais leitura do que vale. */
.diretoria .diretoria__cartao{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:.5rem;
height:100%;
margin:0;
padding:1.75rem 1.25rem;
text-align:center;
/* Mesma superficie dos cartoes dos conselhos: as duas grades ficam na mesma
pagina, e fundos diferentes fariam parecer conteudo de naturezas
diferentes. */
background:hsl(var(--card));
border:1px solid hsl(var(--border));
/* O filete sai no amarelo do botao "Doe Agora", pelo mesmo token: a cor da
marca fica declarada num lugar so, e mudar o botao leva os cartoes junto.
Aqui e o unico traco de cor, e por isso ele nao acompanha a Cor do tema
como o dos conselhos. */
border-left:4px solid var(--brand-yellow);
border-radius:1rem;
box-shadow:var(--shadow-sm);
}
.diretoria .diretoria__cartao::before{content:none}
/* O retrato e a primeira coisa que se ve, e por isso cresceu de 48 para 96px.
`object-fit:cover` preenche o circulo e recorta o excedente, em vez de
achatar o rosto: a foto vem do painel em qualquer proporcao. */
.diretoria__retrato{
flex-shrink:0;
display:block;
width:6rem;
height:6rem;
margin-bottom:.5rem;
border-radius:50%;
object-fit:cover;
background:hsl(var(--muted));
}
/* Sem foto enviada, o mesmo circulo com um icone generico ao centro: nada no
lugar encolheria o cartao e desalinharia a linha inteira. */
.diretoria__retrato--vazio{
display:flex;
align-items:center;
justify-content:center;
color:hsl(var(--muted-foreground));
}
.diretoria .diretoria__nome{
margin:0;
font-size:1.0625rem;
font-weight:700;
line-height:1.3;
color:hsl(var(--foreground));
}
/* O cargo em cinza escuro. Era a cor do tema, e num cartao que ja tem filete
amarelo o texto colorido virava um terceiro tom competindo com o nome — que e
o que se le primeiro. O peso da fonte continua distinguindo cargo de mandato. */
.diretoria .diretoria__cargo{
margin:0;
font-size:.9375rem;
font-weight:600;
line-height:1.3;
color:var(--slate-700);
}
/* O mandato e o dado de apoio: menor, em tom secundario e com digitos de mesma
largura, para os anos de um cartao alinharem com os do vizinho. */
.diretoria .diretoria__mandato{
margin:0;
font-size:.8125rem;
line-height:1.3;
color:hsl(var(--muted-foreground));
font-variant-numeric:tabular-nums;
}
/* ---------- Conselhos ----------
Cartao, e nao tabela: sao so nomes, e uma tabela de coluna unica pediria um
titulo de coluna dizendo "Nome" — que o titulo da secao ja diz.
Quantas colunas a linha tem vem do HTML, na classe `--1`, `--2` ou `--3`: o
CSS nao sabe contar filhos, e `auto-fit` daria quatro colunas numa tela larga
com quatro cartoes — que e justamente o que nao se quer. Fixando a
quantidade, o quarto cartao quebra sozinho para a linha de baixo.
A subida e em degraus: duas colunas a partir do tablet, tres so no desktop.
Espremer tres cartoes em 768px deixaria cada um com ~230px, e nome como
"Lucia Angela Aguirra Del Rio Daniel" quebraria em tres linhas ao lado do
icone. `--1` nao aparece aqui de proposito: uma coluna e o padrao.
`align-items:start` porque as listas tem tamanhos diferentes — sem isto o
cartao curto esticaria ate a altura do vizinho, com um vao vazio no fim.
O respiro em relacao a diretoria fica no CONJUNTO, e nao em cada cartao: com
`margin-top` em cada um, o segundo da linha tambem o receberia e os dois
desceriam o dobro quando empilhassem. */
/* O respiro entre os blocos fica na SECAO, e nao na grade: entre o titulo e os
cartoes o intervalo e curto, como em "Diretoria".
Pela RELACAO entre duas secoes, e nao por classe de cada uma: o espaco existe
entre um bloco e o anterior, e nao dentro de nenhum dos dois. Assim o
primeiro bloco da pagina nunca ganha um respiro solto no alto — antes, com a
regra em `#conselhos`, uma pagina sem diretoria cadastrada comecava com 56px
de vazio.
Por classe tambem porque o id destas secoes virou a ancora editavel no
painel: uma regra presa a ele deixaria de valer no dia em que alguem
trocasse o nome da ancora, sem erro nenhum aparecer. */
.secao-ancorada + .secao-ancorada{margin-top:3.5rem}
/* Sem `align-items:start`: os cartoes de uma linha esticam ate a altura do mais
alto. Com listas de tamanhos diferentes — um conselho de dois membros ao lado
de um de cinco —, o mais curto terminava no meio da altura do vizinho e a
linha ficava escalonada. */
.conselhos{
display:grid;
gap:2rem;
margin-top:1.5rem;
}
@media (min-width:768px){
/* Um conselho so ocupa METADE da linha: a grade tem duas colunas mesmo com um
cartao, e ele fica na primeira. Sozinho e esticado de ponta a ponta, o
cartao vira uma faixa com meia duzia de nomes espalhados. */
.conselhos--1,
.conselhos--2,
.conselhos--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
.conselhos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Sem filete colorido: o que distingue um conselho do outro e o titulo, e uma
linha de tres cartoes lado a lado com a mesma cor na borda nao separava nada
— so repetia. Quem carrega a cor na pagina e a diretoria.
Com a borda igual nos quatro lados, o `padding` volta a ser um valor so: o
`calc` de antes existia apenas para descontar os 3px que a borda mais grossa
acrescentava a esquerda. */
.conselho{
padding:1.75rem;
background:hsl(var(--card));
border:1px solid hsl(var(--border));
border-radius:1rem;
box-shadow:var(--shadow-sm);
}
/* Escopado sob `.conselho`, e nao so pela classe do titulo.
`.page-content h3` — a regra generica dos subtitulos do site — tem um TIPO a
mais que `.conselho__titulo`, e por isso vencia: entrava com `margin-top` de
2,5rem e com o proprio tamanho de fonte. O resultado era 68px entre a borda
de cima e o titulo contra 28px na esquerda, e a fonte menor do que esta
declarada aqui. Com duas classes, estas regras ganham. */
.conselho .conselho__titulo{
margin:0 0 1.25rem;
font-size:1.375rem;
}
/* Coluna unica sempre: com o cartao em meia largura, duas colunas apertariam os
nomes contra o icone do vizinho. */
.conselho__lista{
display:grid;
gap:.75rem;
margin:0;
padding:0;
list-style:none;
}
/* Escopado sob `.conselho` de proposito. As listas do corpo da pagina ja tem
estilo proprio — `.page-content ul li` recua o texto e desenha um losango
amarelo no `::before` —, e aquele seletor tem UM tipo a mais que este. Contam
primeiro as classes: com duas contra uma, estas regras vencem.
Sem isto o losango entrava como primeiro filho do flex e aparecia um segundo
marcador antes do disco do icone. */
.conselho .conselho__item{
display:flex;
align-items:center;
gap:.75rem;
padding-left:0;
/* Menor que o corpo da pagina: e uma lista de nomes, nao texto de leitura. */
font-size:.9375rem;
line-height:1.4;
color:hsl(var(--foreground));
}
.conselho .conselho__item::before{content:none}
/* Disco cinza com o icone dentro. Em cinza, e nao na cor do tema: numa lista de
dez nomes seriam dez discos coloridos, e o que importa ali e o nome. O filete
do cartao ja carrega a cor da secao.
`flex-shrink:0` porque nome comprido espremeria o circulo ate virar oval. */
.conselho__icone{
flex-shrink:0;
display:grid;
place-items:center;
width:2rem;
height:2rem;
border-radius:50%;
color:hsl(var(--muted-foreground));
background:hsl(var(--muted));
}
/* ---------- Documentos institucionais ----------
Um cartao por documento, em grade de ate QUATRO por linha. A grade e fixa e
alinhada a esquerda: com dois documentos, eles ocupam as duas primeiras
colunas e o resto da linha fica vazio — o cartao mantem o tamanho em vez de
esticar, que e o que a proporcao 1:1 exige.
A subida e em degraus: um no celular, dois, tres e so entao quatro. */
/* O respiro em relacao aos conselhos vem de `.secao-ancorada + .secao-ancorada`,
la em cima: e a mesma distancia entre quaisquer dois blocos da pagina. */
.documentos{
display:grid;
gap:1.5rem;
margin-top:1.5rem;
padding:0;
list-style:none;
grid-template-columns:minmax(0,1fr);
}
@media (min-width:576px){
.documentos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
.documentos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
.documentos{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* `aspect-ratio:1` da o quadrado pedido. `min-height` porque proporcao sozinha
nao impede o conteudo de transbordar: numa coluna estreita o cartao cresce
alem do quadrado em vez de cortar o texto.
Escopado sob `.documentos` de proposito: as listas do corpo da pagina recuam
o texto e desenham um losango amarelo no `::before` de cada item, e aquele
seletor tem um TIPO a mais que este. Contam primeiro as classes. */
.documentos .documento{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:.625rem;
aspect-ratio:1;
min-height:15rem;
margin:0;
padding:1.5rem;
text-align:left;
background:hsl(var(--card));
/* Sem filete colorido: o documento e material de consulta, e a cor da marca
fica reservada as pecas que pedem atencao. */
border:1px solid hsl(var(--border));
border-radius:1rem;
box-shadow:var(--shadow-sm);
overflow:hidden;
}
.documentos .documento::before{content:none}
/* Icone em cinza, e nao na cor do tema: o que o visitante procura aqui e o
titulo do documento. O icone diz "isto e um arquivo" e nao precisa de mais. */
.documento__icone{
flex-shrink:0;
display:grid;
place-items:center;
width:3rem;
height:3rem;
border-radius:.875rem;
color:hsl(var(--muted-foreground));
background:hsl(var(--muted));
}
.documentos .documento__titulo{
margin:0;
font-size:1.0625rem;
font-weight:700;
line-height:1.3;
color:hsl(var(--foreground));
}
/* Cortada em tres linhas: com proporcao fixa, uma descricao longa empurraria os
botoes para fora do cartao. O texto inteiro continua no painel. */
.documentos .documento__descricao{
margin:0;
font-size:.875rem;
line-height:1.5;
color:hsl(var(--muted-foreground));
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
line-clamp:3;
overflow:hidden;
}
/* `margin-top:auto` cola as acoes no pe do cartao: com descricoes de tamanhos
diferentes, os botoes ficariam em alturas diferentes de um cartao para o
outro. */
.documento__acoes{
display:flex;
flex-wrap:wrap;
gap:.5rem;
margin-top:auto;
padding-top:.25rem;
}
/* Escopado sob `.documentos`, e nao so pela classe do botao.
`.page-content a` — a regra dos links do corpo da pagina — tem um TIPO a mais
que `.documento__botao`, e por isso vencia: o texto saia no azul primario com
sublinhado, e "Visualizar" ficava azul sobre verde escuro. Contam primeiro as
classes; com duas contra uma, estas regras ganham. */
.documentos .documento__botao{
display:inline-flex;
align-items:center;
gap:.375rem;
padding:.4375rem .875rem;
border-radius:.625rem;
font-size:.8125rem;
font-weight:700;
line-height:1.2;
text-decoration:none;
/* Cinza, e nao a cor do tema. Uma pagina com uma dezena de documentos teria
uma dezena de botoes coloridos disputando com o "Doe Agora" do topo, que e
a acao que o site de fato quer destacar. */
color:#fff;
background:var(--slate-600);
transition:background-color .15s ease;
}
.documentos .documento__botao:hover{background:var(--slate-700)}
/* O tamanho do icone vem daqui, e nao de width/height na marcacao: assim ele
acompanha os dois botoes de uma vez. `flex-shrink:0` porque o botao e flex —
sem isso o icone seria o primeiro a ser espremido num cartao estreito. */
.documentos .documento__botao-icone{
width:1rem;
height:1rem;
flex-shrink:0;
}
/* Baixar e a acao de apoio: mesma forma, sem o preenchimento, para que
"Visualizar" continue sendo o que o olho encontra primeiro.
A borda repete o cinza do fundo do "Visualizar", e nao o cinza claro das
bordas do cartao: assim os dois botoes se leem como um par — um cheio, um
vazado, mesma cor — em vez de um botao e um contorno solto. */
.documentos .documento__botao--apoio{
color:var(--slate-700);
background:transparent;
box-shadow:inset 0 0 0 1.5px var(--slate-600);
}
.documentos .documento__botao--apoio:hover{background:var(--slate-100)}
/* ---------- Visor de documento ----------------------------------------
O PDF abre aqui, sobre a propria pagina. Nova aba tirava o visitante do
site por causa de um anexo de duas paginas, e no celular costuma virar
uma aba orfa que ninguem fecha. */
.visor{
position:fixed;
inset:0;
z-index:200;
display:flex;
align-items:center;
justify-content:center;
padding:1.25rem;
}
/* `hidden` sozinho vale `display:block`, e `display:flex` acima o venceria:
sem esta linha o visor nasceria aberto e vazio. */
.visor[hidden]{display:none}
.visor__fundo{position:absolute;inset:0;background:rgba(15,23,42,.6)}
.visor__caixa{
position:relative;
display:flex;
flex-direction:column;
width:min(60rem,100%);
height:min(90vh,100%);
overflow:hidden;
background:hsl(var(--card));
border-radius:1rem;
box-shadow:0 1.5rem 3rem rgba(15,23,42,.35);
}
.visor__topo{
display:flex;
align-items:center;
gap:1rem;
padding:1rem 1.25rem;
border-bottom:1px solid hsl(var(--border));
}
.visor .visor__titulo{
flex:1;
min-width:0;
margin:0;
font-size:1.0625rem;
font-weight:700;
color:var(--slate-900);
}
.visor .visor__fechar{
display:inline-flex;
align-items:center;
justify-content:center;
width:2.25rem;
height:2.25rem;
padding:0;
color:var(--slate-600);
background:transparent;
border:0;
border-radius:.625rem;
cursor:pointer;
transition:background-color .15s ease;
}
.visor .visor__fechar:hover{background:var(--slate-100)}
/* `flex:1` com `min-height:0`: sem o segundo, o quadro cresce ate o tamanho
do PDF e empurra o rodape para fora da caixa. */
.visor__quadro{flex:1;min-height:0;width:100%;border:0}
.visor__rodape{
padding:.75rem 1.25rem;
text-align:right;
border-top:1px solid hsl(var(--border));
}
.visor .visor__externo{
font-size:.8125rem;
font-weight:700;
color:var(--slate-700);
text-decoration:none;
}
.visor .visor__externo:hover{text-decoration:underline}
/* Trava a rolagem do fundo enquanto o visor esta aberto: rolar a pagina por
tras de um documento aberto so faz perder o lugar onde se estava. */
body.tem-visor{overflow:hidden}
/* =========================================================
NAVEGACAO — rotulo em uma linha so
========================================================= */
/* O painel do submenu nasce com `min-width:220px`, o que deixa 180px de texto
depois do respiro lateral. "Documentos Institucionais" mede exatamente 180px
contando o espaco entre as palavras, e por isso quebrava em duas linhas — o
item ficava com 60px de altura no meio de vizinhos de 40px.
Aumentar a largura minima so adiaria o problema para o proximo rotulo longo:
com `nowrap` e o painel absoluto, ele passa a crescer conforme o conteudo, e
o rotulo cadastrado no painel manda na largura.
Escopado por duas classes de proposito: `.dropdown__link` sozinho tem a mesma
forca da regra original la em cima, e o desempate por ordem de arquivo e
frouxo demais para uma folha que so cresce.
Vale para o menu do topo e para o submenu. O menu do celular fica de fora: la
o rotulo tem a largura da tela inteira e nao quebra, e `nowrap` num aparelho
estreito trocaria a quebra de linha por rolagem lateral, que e pior. */
.nav .nav__link,
.nav .nav__toggle,
.dropdown__panel .dropdown__link{white-space:nowrap}
/* =========================================================
FAQ — sanfona de perguntas
========================================================= */
/* Uma pilha, e nao uma grade: pergunta e resposta se leem de cima para baixo, e
duas colunas fariam o texto pular de lado a cada item aberto. */
.faq{
display:flex;
flex-direction:column;
gap:.75rem;
margin:0;
padding:0;
list-style:none;
}
/* Escopado sob `.faq`, e nao so pela classe do item.
`.page-content ul li` — a regra generica dos itens de lista do corpo da
pagina — traz TRES coisas que nao servem aqui, e a de `::before` era so a
mais visivel:
- o losango amarelo, que apareceria colado a pergunta;
- `padding-left:1.5rem`, que empurrava o cartao 24px para dentro: a sanfona
comecava desalinhada da margem do cabecalho, que e a mesma do `.container`;
- `margin-bottom:.75rem`, que somava ao `gap` da pilha e dobrava o intervalo
entre um cartao e o seguinte.
`.faq .faq__item` tem duas classes contra uma classe e dois tipos daquela —
e classe pesa mais que tipo, entao esta ganha. */
.faq .faq__item{
padding-left:0;
margin-bottom:0;
}
.faq .faq__item::before{content:none}
.faq__bloco{
overflow:hidden;
background:hsl(var(--card));
border:1px solid hsl(var(--border));
border-radius:1rem;
box-shadow:var(--shadow-sm);
}
/* `list-style:none` mais o `::-webkit-details-marker`: o triangulo padrao do
`summary` aparece por caminhos diferentes conforme o navegador, e a seta
propria ja diz o mesmo do lado certo. */
.faq .faq__pergunta{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
padding:1.125rem 1.5rem;
font-size:1rem;
font-weight:700;
line-height:1.45;
color:var(--slate-900);
cursor:pointer;
list-style:none;
transition:background-color .15s ease;
}
.faq .faq__pergunta::-webkit-details-marker{display:none}
.faq .faq__pergunta:hover{background:var(--slate-100)}
/* O foco do teclado fica no `summary`, que e o que recebe Enter e Espaco:
escondido, a sanfona seria intransitavel sem mouse. */
.faq .faq__pergunta:focus-visible{
outline:2px solid var(--tema, hsl(var(--primary)));
outline-offset:-2px;
}
.faq__seta{
width:1.25rem;
height:1.25rem;
flex-shrink:0;
color:hsl(var(--muted-foreground));
transition:transform .2s ease;
}
.faq__bloco[open] .faq__seta{transform:rotate(180deg)}
/* Respiro igual em cima e embaixo, no mesmo valor do sumario: o texto fica
centrado na faixa que se abre. Antes o `padding-top` era zero — a resposta
encostava na pergunta e sobrava vao so por baixo dela. */
.faq .faq__resposta{
margin:0;
padding:1.125rem 1.5rem;
font-size:.9375rem;
line-height:1.7;
color:var(--slate-700);
/* A resposta vem de um `textarea`: as quebras de linha que quem edita digitou
sao parte do texto, e sem isto virariam um paragrafo unico. */
white-space:pre-line;
}
@media (prefers-reduced-motion:reduce){
.faq__seta{transition:none}
}
/* =========================================================
SIC — pedido, acompanhamento e relatorio
========================================================= */
/* Uma coluna so: estas telas nao tem o cartao de dados ao lado, e o formulario
sozinho esticado ate 1100px daria linhas longas demais para ler. */
.contato-layout--simples{
grid-template-columns:minmax(0,1fr);
max-width:46rem;
margin-inline:auto;
}
@media (min-width:900px){
.contato-layout--simples{grid-template-columns:minmax(0,1fr)}
}
/* Blocos do formulario: `fieldset` sem a moldura que o navegador desenha — a
legenda ja diz onde um grupo comeca. */
.form-bloco{
margin:0 0 1.5rem;
padding:0;
border:0;
}
.form-bloco__titulo{
padding:0;
margin:0 0 .875rem;
font-size:.6875rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
color:hsl(var(--muted-foreground));
}
.form-nota{
margin:1rem 0 0;
font-size:.75rem;
line-height:1.5;
color:hsl(var(--muted-foreground));
}
/* O botao que e link. `.btn-primary` foi desenhado para `