/* ═══════════════════════════════════════════════════════════════
   Rezende Engenharia — folha comum · v20260815
   Topo unificado, seção do Instagram e Área do Cliente.

   Regra de ouro deste arquivo: NÃO redefinir variáveis do
   style.css. Tudo aqui usa prefixo --rz-, para nunca mudar cor
   de outro elemento sem querer. Carregue SEMPRE depois do
   style.css.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --rz-forest:#0E3D2F; --rz-forest-2:#155743; --rz-canopy:#2E7D5B; --rz-canopy-d:#1F6647;
  --rz-lime:#52C9A0; --rz-gold:#C9A227; --rz-gold-soft:#F4ECC9;
  --rz-paper:#F4F7F4; --rz-paper-2:#E9F0EA;
  --rz-ink:#16211B; --rz-muted:#5B6D63; --rz-card:#fff;
  --rz-line:#DCE6DD; --rz-line-2:#C7D8CC;
  --rz-wa:#25D366; --rz-wa-d:#1EA855;
  --rz-shadow:0 14px 40px rgba(14,61,47,.10);
  --rz-shadow-sm:0 4px 16px rgba(14,61,47,.07);
  --rz-font:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* .wrap não existe no style.css das páginas antigas; sem isto a
   barra vaza para fora da tela. Foi assim que o Notícias quebrou. */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* Âncoras: o cabeçalho é fixo, então o título precisa parar
   abaixo dele — senão o #ambiental cai atrás da barra. */
[id]{scroll-margin-top:92px}

/* ══════════════════ TICKER ══════════════════ */
.tk{background:#0A2E23;border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden;display:none}
.tk.on{display:block}
.tk-row{display:flex;align-items:stretch}
.tk-tag{background:var(--rz-lime);color:#06251B;font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;white-space:nowrap;display:flex;align-items:center;gap:6px;flex:none}
.tk-dot{width:6px;height:6px;border-radius:50%;background:#06251B;animation:tkp 2s infinite}
@keyframes tkp{0%,100%{opacity:1}50%{opacity:.3}}
.tk-mask{overflow:hidden;flex:1;position:relative}
.tk-track{display:inline-flex;white-space:nowrap;animation:tkr 42s linear infinite;padding:9px 0}
.tk-mask:hover .tk-track{animation-play-state:paused}
@keyframes tkr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk-i{display:inline-flex;align-items:center;gap:7px;padding:0 26px;font-size:.78rem;font-weight:600;color:#DFF3E8;border-right:1px solid rgba(255,255,255,.12)}
.tk-i b{font-weight:700;color:#fff}
.tk-i .l{color:#8FCBAF;font-weight:500;font-size:.72rem}
.tk-i .up{color:#6EE7A8}.tk-i .dn{color:#FF8B8B}
/* o ticker antigo, de valores escritos à mão, fica fora do ar */
.ticker-wrap{display:none!important}

/* ══════════════════ TOPO ══════════════════ */
#site-header{position:sticky;top:0;z-index:60;background:rgba(244,247,244,.88);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--rz-line);transition:.25s}
#site-header.scrolled{background:rgba(255,255,255,.96);box-shadow:var(--rz-shadow-sm)}
#site-header .nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px;transition:.25s}
#site-header.scrolled .nav{height:60px}
#site-header .nav-esq{display:flex;align-items:center;gap:14px;flex:none}
#site-header .nav-logo img{height:38px;width:auto}

/* Canto da equipe — discreto, na ponta oposta ao botão de contato,
   para ninguém clicar por engano achando que é atendimento. */
#site-header .nav-eq{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;
  color:var(--rz-muted);border:1px solid var(--rz-line);border-radius:8px;padding:6px 11px;
  background:transparent;transition:.18s;white-space:nowrap;text-decoration:none}
#site-header .nav-eq svg{width:13px;height:13px;opacity:.7}
#site-header .nav-eq:hover{color:var(--rz-forest);border-color:var(--rz-line-2);background:var(--rz-paper-2)}

#site-header .menu{display:flex;align-items:center;gap:1px;margin-left:auto}
#site-header .menu a{padding:9px 11px;border-radius:9px;font-size:.88rem;font-weight:500;color:#22322A;transition:.16s;text-decoration:none;white-space:nowrap}
#site-header .menu a:hover{background:var(--rz-paper-2);color:var(--rz-forest)}
/* O style.css pinta o item ativo de verde-claro. Fixamos aqui o
   mesmo tom do hover, para as seis páginas ficarem iguais. */
#site-header .menu a.active{color:var(--rz-forest);font-weight:600;background:var(--rz-paper-2)}
#site-header .menu .menu-painel,#site-header .menu .menu-eq{display:none}

/* Área do Cliente: é um acesso, não uma página de leitura.
   Ganha contorno para se separar dos itens de navegação. */
#site-header .menu .menu-cliente{display:inline-flex;align-items:center;gap:6px;margin-left:8px;
  border:1px solid var(--rz-line-2);border-radius:9px;padding:8px 12px;
  font-weight:600;font-size:.84rem;color:var(--rz-canopy-d)}
#site-header .menu .menu-cliente svg{width:14px;height:14px}
#site-header .menu .menu-cliente:hover{background:var(--rz-paper-2);border-color:var(--rz-canopy);color:var(--rz-forest)}

/* O Painel e o WhatsApp têm formatos diferentes de propósito:
   um é contorno escuro, o outro é pílula verde cheia. */
#site-header .nav-actions{display:flex;align-items:center;gap:12px;flex:none;padding-left:18px;border-left:1px solid var(--rz-line)}
#site-header .nav-painel{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.86rem;
  color:var(--rz-forest);border:1.5px solid var(--rz-forest);border-radius:10px;padding:9px 15px;
  background:transparent;transition:.18s;white-space:nowrap;text-decoration:none}
#site-header .nav-painel svg{width:15px;height:15px}
#site-header .nav-painel:hover{background:var(--rz-forest);color:#fff;transform:translateY(-1px)}
#site-header .nav-wa{background:var(--rz-wa);color:#fff;font-weight:600;padding:10px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;box-shadow:0 2px 10px rgba(37,211,102,.32);white-space:nowrap;transition:.18s;text-decoration:none}
#site-header .nav-wa:hover{background:var(--rz-wa-d);color:#fff;transform:translateY(-1px)}
#site-header .menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--rz-forest)}
#site-header .menu-toggle svg{width:26px;height:26px}
/* resquícios do topo antigo, caso sobre algum */
#site-header .nav-boletim-btn,#site-header .nav-wa-btn,#site-header .nav-intranet{display:none!important}

/* Com seis itens no menu a barra fica apertada antes dos 760px
   antigos. A gaveta passa a entrar em 960px. */
@media(max-width:1080px){
  #site-header .menu a{padding:8px 9px;font-size:.84rem}
  #site-header .nav-painel span{display:none}
  #site-header .nav-painel{padding:9px 11px}
}
@media(max-width:960px){
  #site-header .menu{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;padding:14px 22px 22px;gap:3px;border-bottom:1px solid var(--rz-line);box-shadow:var(--rz-shadow);transform:translateY(-135%);transition:.28s;margin-left:0;z-index:70;max-height:calc(100vh - 70px);overflow-y:auto}
  #site-header .menu.open{transform:none}
  #site-header .menu a{padding:14px 10px;border-bottom:1px solid var(--rz-line-2);font-size:.95rem}
  #site-header .menu .menu-cliente{margin:12px 0 0;justify-content:center;padding:14px;border:1.5px solid var(--rz-canopy);border-radius:10px;font-size:.95rem}
  #site-header .menu .menu-painel{display:block;margin-top:10px;background:var(--rz-forest);color:#fff;border-radius:10px;text-align:center;font-weight:700;border-bottom:0}
  #site-header .menu .menu-painel:hover{background:var(--rz-canopy-d);color:#fff}
  #site-header .menu .menu-eq{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--rz-line);border-bottom:0;font-size:.82rem;color:var(--rz-muted);text-align:center}
  #site-header .nav-esq .nav-eq{display:none}
  #site-header .nav-actions .nav-painel{display:none}
  #site-header .nav-actions{border-left:0;padding-left:0;margin-left:auto;gap:6px}
  #site-header .nav-wa{padding:9px 15px;font-size:.85rem}
  #site-header .menu-toggle{display:block}
}
@media(max-width:430px){
  #site-header .nav-wa span{display:none}
  #site-header .nav-wa{padding:11px;border-radius:50%}
}

/* ══════════════════ BOTÃO FLUTUANTE ══════════════════
   Só entra em cena depois que o topo sai da tela. Enquanto o
   botão grande está à vista, dois botões iguais só disputam
   atenção. No celular não aparece: a barra já leva o WhatsApp. */
body .wa-fab-wrap{position:fixed;bottom:26px;right:22px;z-index:99;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.94);
  transition:opacity .3s,transform .3s,visibility .3s}
body .wa-fab-wrap.mostra{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){ body .wa-fab-wrap{display:none} }

/* ══════════════════ INSTAGRAM ══════════════════ */
.rz-ig{padding:62px 0;background:var(--rz-paper-2);font-family:var(--rz-font)}
.rz-ig-head{max-width:640px;margin:0 0 28px}
.rz-ig-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rz-canopy)}
.rz-ig-eyebrow::before{content:"";width:26px;height:2px;background:var(--rz-gold);border-radius:2px}
.rz-ig-head h2{font-family:var(--rz-font);font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:800;color:var(--rz-ink);margin:11px 0 0;letter-spacing:-.02em;line-height:1.15}
.rz-ig-head p{color:var(--rz-muted);margin:12px 0 0;font-size:1rem;line-height:1.6}

.rz-ig-perfis{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.rz-ig-card{background:var(--rz-card);border:1px solid var(--rz-line);border-radius:16px;padding:22px;display:flex;gap:16px;align-items:flex-start;transition:.2s;text-decoration:none}
.rz-ig-card:hover{transform:translateY(-3px);box-shadow:var(--rz-shadow);border-color:var(--rz-line-2)}
.rz-ig-av{width:58px;height:58px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);padding:2.5px}
.rz-ig-av i{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-style:normal;font-weight:800;font-size:1.05rem;color:var(--rz-forest);letter-spacing:-.02em}
.rz-ig-av img{width:78%;height:auto}
.rz-ig-info{flex:1;min-width:0}
.rz-ig-user{font-size:1rem;font-weight:700;color:var(--rz-ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rz-ig-user svg{width:15px;height:15px;color:#E1306C;flex:none}
.rz-ig-nome{font-size:.82rem;color:var(--rz-muted);margin-top:1px}
.rz-ig-desc{font-size:.88rem;color:var(--rz-muted);margin:9px 0 0;line-height:1.55}
.rz-ig-btn{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:.84rem;font-weight:600;
  color:#fff;background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7);padding:8px 15px;border-radius:999px}
.rz-ig-card:hover .rz-ig-btn{filter:brightness(1.06)}

/* Grade de publicações. Nasce vazia: só aparece quando houver
   post configurado em assets/js/rz-instagram.js. */
.rz-ig-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.rz-ig-posts:empty{display:none}
.rz-ig-posts blockquote.instagram-media{margin:0!important;min-width:0!important;width:100%!important}
.rz-ig-nota{font-size:.82rem;color:var(--rz-muted);margin:16px 0 0}
/* O style.css dá margin-top:60px ao rodapé. Como a seção do
   Instagram encosta nele, essa margem abria uma faixa clara
   entre os dois. */
.rz-ig + footer{margin-top:0}

@media(max-width:860px){
  .rz-ig-perfis{grid-template-columns:1fr}
  .rz-ig-posts{grid-template-columns:1fr}
  .rz-ig{padding:46px 0}
}

/* ══════════════════ ÁREA DO CLIENTE ══════════════════ */
.rz-cli-hero{position:relative;overflow:hidden;color:#fff;font-family:var(--rz-font);
  background:radial-gradient(ellipse at 78% 18%,rgba(82,201,160,.20) 0%,transparent 55%),
             linear-gradient(150deg,#0B3226 0%,#0E3D2F 42%,#155743 100%);padding:66px 0 58px}
.rz-cli-hero h1{font-family:var(--rz-font);font-size:clamp(2rem,4.6vw,3rem);font-weight:800;color:#fff;margin:20px 0 0;letter-spacing:-.02em;line-height:1.14}
.rz-cli-hero p{color:rgba(255,255,255,.86);font-size:1.05rem;margin:18px 0 0;max-width:600px;line-height:1.65}
.rz-cli-tag{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rz-gold-soft);background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.36);padding:7px 15px;border-radius:999px}
.rz-cli-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.rz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--rz-font);font-weight:600;font-size:.98rem;
  padding:15px 26px;border-radius:12px;cursor:pointer;transition:.2s;border:0;text-decoration:none}
.rz-btn svg{width:19px;height:19px;flex:none}
.rz-btn--wa{background:var(--rz-wa);color:#fff;box-shadow:0 6px 22px rgba(37,211,102,.34)}
.rz-btn--wa:hover{background:var(--rz-wa-d);color:#fff;transform:translateY(-2px)}
.rz-btn--gold{background:var(--rz-gold);color:#3A2E08}
.rz-btn--gold:hover{background:#D8B234;transform:translateY(-2px);color:#3A2E08}
.rz-btn--ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.30)}
.rz-btn--ghost:hover{background:rgba(255,255,255,.18);color:#fff}

.rz-cli-sec{padding:58px 0;font-family:var(--rz-font);background:var(--rz-paper)}
.rz-cli-sec--alt{background:var(--rz-paper-2)}
.rz-cli-sec h2{font-family:var(--rz-font);font-size:clamp(1.45rem,3vw,1.95rem);font-weight:800;color:var(--rz-ink);letter-spacing:-.02em;margin:10px 0 0}
.rz-cli-sec > .wrap > p{color:var(--rz-muted);font-size:1rem;margin:12px 0 0;max-width:640px;line-height:1.65}
.rz-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.rz-card{background:var(--rz-card);border:1px solid var(--rz-line);border-radius:14px;padding:22px 20px}
.rz-card .ic{font-size:1.5rem}
.rz-card h3{font-family:var(--rz-font);font-size:1rem;font-weight:700;color:var(--rz-forest);margin:10px 0 6px}
.rz-card p{font-size:.89rem;color:var(--rz-muted);margin:0;line-height:1.55}

.rz-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;counter-reset:p}
.rz-passo{background:var(--rz-card);border:1px solid var(--rz-line);border-left:3px solid var(--rz-canopy);border-radius:12px;padding:24px 20px 22px;position:relative}
.rz-passo::before{counter-increment:p;content:counter(p);position:absolute;top:-13px;left:18px;width:28px;height:28px;border-radius:50%;
  background:var(--rz-forest);color:#fff;font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.rz-passo h3{font-family:var(--rz-font);font-size:.98rem;font-weight:700;color:var(--rz-forest);margin:0 0 6px}
.rz-passo p{font-size:.89rem;color:var(--rz-muted);margin:0;line-height:1.55}

.rz-aviso{display:flex;gap:14px;align-items:flex-start;background:#FFF8E6;border:1px solid #EBD9A4;border-radius:14px;padding:20px 22px;margin-top:28px}
.rz-aviso .ic{font-size:1.3rem;line-height:1.2}
.rz-aviso h3{font-family:var(--rz-font);font-size:.98rem;font-weight:700;color:#6B5410;margin:0 0 6px}
.rz-aviso p{font-size:.89rem;color:#6B5410;margin:0;line-height:1.6}

@media(max-width:980px){ .rz-cards{grid-template-columns:repeat(2,1fr)} .rz-passos{grid-template-columns:1fr} }
@media(max-width:600px){ .rz-cards{grid-template-columns:1fr} .rz-btn{width:100%} }

/* ══════════════════ RODAPÉ — linha legal ══════════════════ */
.rz-legal{line-height:1.75;font-size:.8rem}
.rz-legal b{font-weight:600}
.rz-legal span{display:block}