/* =========================
   styles.css (refatorado)
   - sem alteração de funcionalidades
   - duplicatas mescladas, código reorganizado
   ========================= */

/* -------------------------
   VARIÁVEIS GLOBAIS
   ------------------------- */
:root{
  /* cores / paleta */
  --bg: #ffffff;                /* valor final consolidado */
  --paper: #ffffff;
  --card-subtle: rgba(235,238,241,0.86);
  --brand-600: #1c225570;         /* azul corporativo */
  --accent: #000000;
  --text: #111111;
  --muted: #6f6a63;
  --footer-brown: #3A2E2A;
  --cta-bg: #000000;
  --cta-color: #fff;
  --accent-gold: #C79B3A;

  /* espaçamento e larguras */
  --max-width: 1100px;
  --max-w: 1900px;
  --container-max: 1100px;
  --nav-gap: 28px;

  /* hero / tipografia auxiliar */
  --cream: #e7decc;
  --gold: #C79B3A;
  --yellow-base: #D9A31A;
  --hero-min: 570px;
  --hero-max: 1170px;
}

/* -------------------------
   RESET / BASE
   ------------------------- */
*{ box-sizing: border-box; margin:0; padding:0; }
html,body{ height:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: "Bree Serif", serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  overflow-x:hidden !important;
}

/* -------------------------
   UTILITÁRIOS / LAYOUT BASE
   ------------------------- */
.container{ width:90%; max-width:var(--max-width); margin:0 auto;margin-top: 10px;padding: 60px; }
main{ padding:16px 0; }
main>section{ padding-left:16px; padding-right:16px;}

/* -------------------------
   TIPOGRAFIA / HEADINGS
   ------------------------- */
h2, span.a_GcMg{
  display:block;
  font-family:"Forum", serif;
  color:var(--accent);
  margin:20px 0 12px;
  text-align:center;
  line-height:1.05;
  font-weight:700;
}
h2{ font-size:clamp(18px,2.2vw,24px); }
h3,h4{
  font-family:"Forum", serif;
  font-size:clamp(18px,2.2vw,24px);
  font-weight:700;
  color:#000;
  margin-bottom:12px;
}
h4{ text-align:center; margin-bottom:80px; }

/* -------------------------
   NAV / TOP BAR
   ------------------------- */
.top-nav{
  width:100%;
  padding-top: 6px;
  padding-bottom: 6px;
}
.nav-container{
  max-width:var(--max-w);
  margin:0 auto;
  padding: 5px 15px 5px 15px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}
.nav-container .brand{
  justify-content: start;
display: flex;justify-content: space-around;align-items: center;
}
.nav-title{font-family: 'Playfair Display', serif;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  font-size: clamp(12px, 2.2vw, 22px);margin-left: 2px;font-size: 20px;margin-bottom: 2px;}
.navlast{font-family: 'Playfair Display', serif;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;color:var(--navaccent);margin-left: 1px;font-size: 20px;margin-bottom: 2px;}
.brand img{ display:block; height:40px; width:auto; object-fit:contain;filter: contrast(150%);}
@media(max-width: 615px){
.top-nav{padding: 0;}
.nav-container{padding: 5px;}
.nav-title{display: none;}
.nav1-title{display: none;}
.main-nav a, .floating-nav .main-nav a { 
  font-size: clamp(7px, 9px, 11px) !important;
  gap: clamp(4px, 1vw, 12px);
  padding: 6px 6px;
}
.cta{
  font-size: clamp(8px, 10px, 12px) !important;
  padding: clamp(2.5px, 4vw, 6px);
}
.brand img{
  height: clamp(20px,25px,30px) !important;
}
}
@media(max-width: 350px){
.cta{padding: 5px 6px !important;}
}
.brand img.brand--circle{ border-radius:50%; width:40px; height:40px; object-fit:cover;
  border:3px solid rgba(255,255,255,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.25); transition:transform .18s;
}
.main-nav{ justify-self:center; }
.main-nav ul{ display:flex; gap:var(--nav-gap); align-items:center; font-weight:500; font-size:16px; color:var(--muted); }
.main-nav a{ padding:8px 4px; color:var(--text); border-radius:6px; transition:color .18s, transform .08s; }
.main-nav a:hover{ color:var(--cta-bg); transform:translateY(-2px); }
.cta{
  background:var(--cta-bg); color:var(--cta-color);
  padding:10px 20px; border-radius:999px; font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.08); white-space:nowrap;
  transition:transform .12s, box-shadow .12s;

}
.cta:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(0,0,0,0.12); }
.main-nav-link:hover{transform: translateY(-3px);}


/* -------------------------
   float / nav BAR
   ------------------------- */

:root{
  --fg:#fff;
  --bg-dark-1:#0b0b0b;
  --bg-dark-2:#111111;
  --navaccent:#d4af37; /* --gold */
  --pill-max-width: 1620px;
}

/* ===== Floating nav base ===== */
.floating-nav{
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  display:flex;
  justify-content:center;
  z-index:99999;
  pointer-events:none;        /* inativo até .visible */
  opacity:0;
  transition:opacity .34s ease, transform .24s ease;
}

/* quando visível habilita interações */
.floating-nav.visible{
  opacity:1;
  pointer-events:auto;
}

/* estado idle (menos intrusivo) */
.floating-nav.idle{
  opacity:.28;
}

/* ===== Pill container (grid para posição start/center/end) ===== */
/* CORRETO: nav-container (com 'r') */
.floating-nav .nav-container{
  display:grid;
  grid-template-columns: auto 1fr auto; /* start | center | end */
  align-items:center;
  gap:18px;
  width: min(92%, var(--pill-max-width));
  background: linear-gradient(180deg, var(--bg-dark-2), var(--bg-dark-1)); /* preto/escuro */
  color:var(--fg);
  padding:8px 14px;
  border-radius:999px;
  box-shadow: 0 16px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.03);
  border: 3px solid rgba(0,0,0,0.65);
  position:relative;
  overflow:visible;
  transition:box-shadow .24s ease, transform .24s ease;
}


/* remoção segura de pseudo-artefatos externos */
.floating-nav .nav-container::before,
.floating-nav .nav-container::after{ display:none!important; }

/* ===== Brand + title (start) ===== */
.brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:start;
  min-width:0; /* para truncar se necessário */
}

.floating-nav .brand1{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#1b0000;
  padding:6px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  flex-shrink:0;
  overflow:hidden;
}

.floating-nav .brand1 img{ width:100%; height:100%;width: 40px;height: auto; object-fit:cover; display:block; border-radius:50%; }

/* title estilizado (usa clamp) */
.nav1-title{
  font-family: 'Playfair Display', serif;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  font-size: clamp(12px, 2.2vw, 22px);
  color:var(--fg);
  white-space:nowrap;
  margin-bottom: 1px;
}
.nav1-title .navlast1{ color:var(--navaccent); margin-left:6px; }

/* ===== Links (center) ===== */
.floating-nav .main-nav{ justify-self:center; }

/* ul centralizado e responsivo */
.floating-nav .main-nav ul{
  display:flex;
  gap:12px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:center;
  flex-wrap:nowrap; /* evita quebra; reduz via clamp */
}

/* links menores para dar mais comportamento mobile sem hamburger */
.floating-nav .main-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  color: rgba(255,255,255,0.95);
  text-decoration:none;
  font-weight:600;
  font-size: clamp(12px, 1.6vw, 15px);
  border-radius:999px;
  transition: transform .16s ease, color .12s ease, background .12s ease;
  min-height:36px;
}

/* hover e focus */
.floating-nav .main-nav a:hover,
.floating-nav .main-nav a:focus{
  transform:translateY(-3px);
}

/* estado "clicado" transitório */
.floating-nav .nav-link.clicked{
  background:#000;
  padding:8px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.floating-nav .nav-link.clicked:hover{
  background:#000;
  padding:8px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* estado ativo (seção visível) */
.floating-nav .nav-link.active{
  background:#fff;
  color:#000;
  padding:8px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* ===== CTA (end) ===== */
.floating-nav .cta{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:700;
  text-decoration:none;
  padding:8px 14px;
  min-height:40px;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  border:3px solid rgba(0,0,0,0.06);
  transition:transform .12s ease;
}
.floating-nav .cta:hover{ transform:translateY(-3px); }

/* ===== Ajustes finos mobile (apenas redução de gaps/paddings) ===== */
@media (max-width:435px){
  .floating-nav .nav-container{ gap:10px; padding:6px 10px; }
  .floating-nav .main-nav ul{ gap:8px; }
  .floating-nav .brand1{ width:36px; height:36px; padding:5px; }
  .floating-nav .nav1-title{ font-size: clamp(10px, 6vw, 18px); }
  .floating-nav .main-nav a{ padding:5px 6px; font-size: clamp(10px, 2.8vw, 13px);}
  .floating-nav .cta{ padding:7px 10px; min-height:34px; font-size:13px; }
}
@media (max-width:435px){
  .floating-nav .cta{ padding:5px 6px; min-height:24px; font-size:9px; }
}
/* acessibilidade: reduzir movimento se preferido */
@media (prefers-reduced-motion: reduce){
  .floating-nav, .floating-nav *{ transition:none !important; animation:none !important; }
}


/* -------------------------
   HERO
   ------------------------- */
.hero{
  position:relative;
  background:var(--cream);
  min-height:clamp(var(--hero-min),50vh,var(--hero-max));
  display:flex; align-items:center; justify-content:center; overflow:visible;
  padding-bottom:clamp(50px,14vh,190px);
}
.header-inner{ width:100%; max-width:var(--container-max); padding:48px 24px 0; text-align:center; position:relative; z-index:6; }
.scale-icon{filter: invert(10%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(90%); width:clamp(24px,54px,94px); height:clamp(20px,50px,90px); margin:0 auto 10px; display:block; fill:var(--gold); opacity:.95;filter: contrast(140%); }
.hero-title{ font-family:'Playfair Display', serif; font-weight:700; line-height:1; margin-bottom:18px; letter-spacing:-0.02em; font-size:clamp(40px,6.8vw,96px); }
.hero-title .first{ color:var(--text); } .hero-title .last{ color:var(--gold); }
.hero-sub{ font-size:clamp(16px,1.9vw,28px); color:rgba(16,16,16,0.95); max-width:780px; margin:0 auto; line-height:1.45; font-weight:400; }
.hero-cta{
  display:inline-flex; align-items:center; justify-content:center; margin-top:28px;
  background:var(--text); color:#fff; padding:15px 39px; border-radius:28px; text-decoration:none;
  font-weight:600; box-shadow:0 6px 18px rgba(16,16,16,0.18); transition:transform .18s ease, box-shadow .18s ease;
  font-family:'Poppins',sans-serif; font-size:clamp(14px,1.2vw,18px); line-height:1;
}
.hero-cta:hover{ transform:translateY(-4px) !important; box-shadow:0 10px 22px rgba(16,16,16,0.2); }
.hills{ position:absolute; left:0; right:0; bottom:0; width:100%; height:clamp(180px,28vh,360px); min-height:160px; pointer-events:none; z-index:3; transform:translateY(6%); }

/* -------------------------
   INTRO / PORTRAIT / EMBLEM / CAUSAS
   ------------------------- */
.intro{ display:grid; grid-template-columns:1fr 340px; gap:32px; align-items:start; margin-top:10px; padding:60px; border-bottom:1px solid rgba(0,0,0,0.2); }
.intro-text{ text-align:center; -webkit-text-size-adjust:100%; line-height:1.5; font-size:18px; font-weight:500; margin:0 auto; }
.portrait-wrap{ display:flex; justify-content:center; align-items:flex-start; }
.portrait{
  margin-top:25px; width:100%; max-width:340px; height:370px; aspect-ratio:3/4; object-fit:cover;
  border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,0.12); border:6px solid rgba(255,255,255,0.6);
}

/* Emblem + causas */
.emblem-causes{
  display:flex; gap:28px; padding:60px; align-items:center; justify-content:center; margin-top:10px; border-bottom:1px solid rgba(0,0,0,0.2);
}
.emblem-wrap{ display:flex; align-items:flex-start; justify-content:center; padding-right:150px; }
.emblem{ width:100%; max-width:220px; height:auto; object-fit:contain; opacity:.95; }

/* causas / listas */
.causas{ list-style:disc; padding-left:20px; color:var(--text); }
.causas li{ margin:8px 0; font-size:clamp(14px,1.25vw,18px); }

/* -------------------------
   QUOTES / TESTIMONIALS
   ------------------------- */
.testimonials-section{ }
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.quote{
  background: linear-gradient(180deg, rgba(226, 222, 252, 0.274), rgba(255, 251, 225, 0.281));
  padding:18px; border-radius:10px; box-shadow:0 10px 22px rgba(0,0,0,0.06);
  font-size:clamp(16px,1.4vw,20px); font-weight:500; color:var(--muted); line-height:1.4;
  border-left:3px solid var(--brand-600);
}

/* -------------------------
   AREA / MAP
   ------------------------- */
.area-map{
  box-shadow:0 10px 20px rgba(0,0,0,0.1);
  padding:30px; width:100%; height:100%; margin-top:10px; display:flex; align-items:center; border-radius:10px;
}
.area-info{ flex:1; max-width:100%; margin-left:30px; }
.area-info h3{ margin-bottom:8px; }
.area-info ul{ padding-left:18px; margin-top:8px; }
.map-wrap{ max-width:100%; }
.map{
  width:100%; width:640px; height:auto; object-fit:contain;
  border-radius:8px; box-shadow:0 10px 30px rgba(6,18,30,0.06);
  background:linear-gradient(180deg,#f4f6f800,#edeff228);
}

/* map iframe fallback */
.map-iframe{
  width:100%; height:200px; border:none; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.12);
  display:block; background:#eee;
}

/* -------------------------
   FOOTER / CONTACT
   ------------------------- */
.site-footer{
  align-items:center; text-align:center; background:var(--footer-brown); color:#EAF2F8; padding:28px 0; margin-top:36px; font-family:"Bree Serif",serif;
  box-shadow:0 -6px 18px rgba(2,12,24,0.06);
}
.contact-footer{
  display:grid; grid-template-columns:1fr 380px; gap:28px; align-items:center;
  width:90%; max-width:var(--max-width); margin:0 auto;
}
.site-footer .contact-footer{ background:transparent; border-radius:8px; padding:8px; box-shadow:none; }
.contact-col{ padding:6px 0; color:#0b0b0b; }
h5{ font-family:"Forum",serif; margin-bottom:20px; font-size:clamp(24px,3.3vw,30px); font-weight:600; color:rgb(255,255,255); }
.contact-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.contact-list .contact-item, .contact-list a{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:#0b0b0b;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(250,250,250,0.82));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding:10px 12px; border-radius:10px; box-shadow:0 8px 22px rgba(6,18,30,0.06);
  transition: transform .12s ease, box-shadow .12s ease;
}
.contact-list .contact-item:hover, .contact-list a:hover{ transform:translateY(-3px); box-shadow:0 18px 42px rgba(6,18,30,0.09);cursor: text;}
.contact-list .contact-item .icon{ flex-shrink:0; width:20px; height:20px; }
.icon{ width:22px; height:22px; flex:0 0 22px; display:inline-block; fill:currentColor; opacity:0.95; }
.icon-wpp{ width:20px; height:20px; fill:white; }
.contact-list span{ font-size:18px; color:#0b0b0b; }

/* -------------------------
   BACKDROP-FILTER FALLBACK
   ------------------------- */
@supports not (backdrop-filter: blur(4px)){
  .contact-list .contact-item, .quote{
    background: linear-gradient(180deg, rgba(248,249,250,0.95), rgba(243,244,246,0.95));
  }
}

/* -------------------------
   RESPONSIVE (breakpoints consolidados)
   ordem: large -> medium -> small
   ------------------------- */

/* <= 1000px (tablet / médio) */
@media (max-width:1000px){
  .container{ width:100%; }
  .intro{ grid-template-columns:1fr 300px; }
  .quotes{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .quotes .quote:last-child{ grid-column:1 / -1; justify-self:center; max-width:60%; }
  .contact-footer{ grid-template-columns:1fr 320px; }
  .map-iframe{ height:180px; }
  main>section{ margin:44px 0 !important; padding-left:14px !important; padding-right:14px !important; }
  .emblem, .map, .portrait, .quote{ box-sizing:border-box; max-width:100%; min-width:0 !important; }
  .emblem{ width:230px !important; max-width:320px !important; margin-left:auto !important; margin-right:auto !important; }
  .map{ width:500px !important; max-width:640px !important; margin-left:auto !important; margin-right:auto !important; }
}

/* <= 820px (mobile / pequenas telas) */
@media (max-width:820px){
  main>section, .emblem-causes, .area-info, .causas, .map-wrap{ margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; width:100% !important; }
  .intro{ grid-template-columns:1fr; gap:20px; text-align:center; padding-top:6px; display:flex; flex-direction:column; align-items:center; }
  .portrait-wrap{ order:-1 !important; display:flex !important; justify-content:center !important; align-items:center !important; margin:0 !important; padding:0 !important; width:100% !important; min-width:0 !important; }
  .portrait{ width:100% !important; max-width:220px !important; height:auto !important; aspect-ratio:3/4 !important; object-fit:cover !important; display:block !important; margin:0 auto !important; border-radius:6px !important; box-shadow:0 10px 26px rgba(0,0,0,0.10) !important; border:6px solid rgba(255,255,255,0.6) !important; }
  .intro-text{ width:100% !important; max-width:100% !important; text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding-left:12px !important; padding-right:12px !important; }
  .emblem-causes{ grid-template-columns:1fr; gap:18px; align-items:center; text-align:center; padding:12px 10px; margin-top:48px; display:flex !important; flex-direction:column !important; justify-content:center !important; }
  .emblem-wrap{ order:-1 !important; width:100% !important; display:flex !important; justify-content:center !important; padding:0 !important; margin:0 !important; min-width:0 !important; }
  .emblem{ width:100% !important; max-width:250px !important; height:auto !important; object-fit:contain !important; display:block !important; margin:0 auto !important; padding:6px 0 !important; }
  .causas, .area-info ul{
    list-style:disc inside !important; padding-left:0 !important; margin:0 auto 8px auto !important; width:100% !important; max-width:760px !important; text-align:left !important; color:var(--text) !important; line-height:1.45 !important;
    display:flex !important; flex-direction:column !important; gap:16px !important; align-items:flex-start !important;
  }
  .causas li, .area-info ul li{ display:list-item !important; margin:8px 0 !important; padding-left:6px !important; box-sizing:border-box !important; }
  .area-map{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important; padding:12px 10px !important; }
  .area-info{ width:100% !important; max-width:820px !important; order:1 !important; text-align:center !important; }
  .map-wrap{ width:100% !important; max-width:820px !important; flex:0 1 100% !important; min-width:0 !important; order:2 !important; }
  .map, .map-iframe{ width:100% !important; max-width:100% !important; height:auto !important; min-height:180px !important; max-height:420px !important; border-radius:8px !important; object-fit:contain !important; display:block !important; }
  main>section{ margin:42px 0 !important; padding-left:12px !important; padding-right:12px !important; }
}

/* <= 660px */
@media (max-width:660px){
  .causas{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); list-style:disc inside; padding:0; margin:0 auto;
    align-items:start; justify-items:start; width:100%; max-width:760px;
  }
  .causas li{ box-sizing:border-box; margin:0; padding-left:6px; text-align:left; align-self:start; word-break:normal; hyphens:auto; }
  .container, main>section, .contact-footer, .intro > *, .emblem-causes > *, .area-map > *, .quotes > *{ min-width:0 !important; }
  .map, .portrait, .emblem, .quote{ width:100% !important; max-width:100% !important; height:auto !important; }
  .map-wrap{ flex:1 1 100% !important; min-width:0 !important; }
  .intro{ grid-template-columns:1fr minmax(0,280px) !important; gap:12px !important; }
  .emblem-causes{ grid-template-columns:1fr !important; padding:6px 0 !important; }
  .emblem-wrap{ padding-right:0 !important; padding-left:0 !important; justify-content:center; }
  .contact-footer{ grid-template-columns:1fr !important; gap:12px !important; align-items:center; }
  main>section{ margin:36px 0 !important; padding-left:10px !important; padding-right:10px !important; }
  .portrait, .emblem{ max-width:180px !important; }
  .quote{ margin-bottom:12px; }
  /* depoimentos em coluna única */
  .quotes{ grid-template-columns:1fr !important; gap:14px !important; align-items:stretch; }
  .quote{ width:100% !important; margin:0 auto !important; box-sizing:border-box; }
}

/* <= 480px */
@media (max-width:480px){
  .causas{ grid-template-columns:1fr; padding:0 8px; max-width:760px; }
  .portrait{ max-width:260px; aspect-ratio:4/5; border-width:4px !important; width:150px; }
  .container{ width:94%; }
  .footer-inner{ flex-direction:column; text-align:center; gap:10px; }
  .area-map{ flex-direction:column; align-items:center; gap:18px; }
  .map-iframe{ height:170px; margin-bottom:12px; }
  .contact-col{ order:2; }
  .contact-list a{ padding:10px; gap:10px; }
  main>section{ margin:28px 0 !important; padding-left:10px !important; padding-right:10px !important; }
  .intro{ gap:12px !important; }
  .intro-text{ padding-left:10px !important; padding-right:10px !important; }
  .causas{ font-size:14px !important; padding-left:8px !important; padding-right:8px !important; }
  .emblem{ max-width:160px !important; }
}

/* <= 320px */
@media (max-width:320px){
  :root{ --max-width:360px; }
  .container{ width:96%; }
  .portrait{ max-width:200px; border-width:4px; box-shadow:0 8px 18px rgba(0,0,0,0.10); }
  .quotes{ grid-template-columns:1fr; gap:10px; }
  .site-footer{ padding:16px 0; }
  .intro-text p, .causas li{ font-size:13px; }
  main>section{ margin:20px 0 !important; padding-left:8px !important; padding-right:8px !important; }
  .portrait{ max-width:140px !important; }
  .emblem{ max-width:120px !important; }
  .causas{ padding:0 6px; max-width:360px; }
  .causas li{ font-size:13px; padding-left:6px; }
}
/* Tablet / médio */
@media (max-width: 980px) {
  .nav-container { grid-template-columns: auto 1fr auto; gap: clamp(8px, 1vw, 16px);}
  .brand img { height: clamp(34px, 3vw, 44px); }
  .brand img.brand--circle { height: clamp(32px, 2.5vw, 40px); width: auto; }
  .main-nav ul { gap: clamp(10px, 1.5vw, 18px); font-size: clamp(0.85rem, 0.8rem + 0.5vw, 1rem); }
  .main-nav a { font-size: clamp(0.8rem, 0.72rem + 0.4vw, 0.95rem); padding: clamp(6px, 0.8vw, 9px) clamp(8px, 1vw, 12px); }
  .cta { padding: clamp(7px, 1vw, 10px) clamp(12px, 1.8vw, 18px); font-size: clamp(0.82rem, 0.75rem + 0.4vw, 0.95rem); }
  .floating-nav .nav-container { width: min(94%, 760px);}
}

/* Mobile */
@media (max-width: 680px) {
  .nav-container { grid-template-columns: auto 1fr auto; gap: clamp(6px, 1vw, 12px);}
  .brand img { height: clamp(30px, 4vw, 38px); }
  .brand img.brand--circle { height: clamp(30px, 4vw, 36px); width: auto; }
  .main-nav ul { gap: clamp(8px, 1vw, 14px); }
  .main-nav a, .floating-nav .main-nav a { font-size: clamp(0.72rem, 0.66rem + 0.4vw, 0.88rem); padding: 6px clamp(6px, 1vw, 10px); }
  .cta { font-size: clamp(0.75rem, 0.7rem + 0.3vw, 0.9rem); padding: 6px clamp(10px, 1.5vw, 14px); }
  .floating-nav .nav-container { padding: 6px 10px; gap: 10px; width: 92%; }
}

/* Telefones estreitos */
@media (max-width: 420px) {
  .nav-container { gap: 6px;}
  .brand img { height: clamp(28px, 7vw, 34px); }
  .brand img.brand--circle { height: 30px; width:30px; }
  .main-nav ul { gap: clamp(6px, 1vw, 10px); }
  .main-nav a, .floating-nav .main-nav a { font-size: clamp(0.68rem, 0.64rem + 0.3vw, 0.78rem); padding: 6px 6px;}
  .cta { font-size: clamp(0.72rem, 0.68rem + 0.3vw, 0.85rem); padding: 6px 10px; }
  .floating-nav .nav-container { padding: 6px 8px; gap: 8px; width: 96%; }
}
@media(max-width: 350px){
  .main-nav a, .floating-nav .main-nav a { font-size: clamp(0.63rem, 0.61rem + 0.25vw, 0.75rem); padding: 2px 2px !important;}
 .floating-nav .cta{padding: 2px !important;}
}
/* Muito pequeno (360px - 320px) */
@media (max-width: 360px) {
  .nav-container {gap: 4px; }
  .brand img { height: 28px; }
  .brand img.brand--circle { height: 28px; width:28px; }
  .main-nav ul { gap: 6px; }
  .main-nav a, .floating-nav .main-nav a { font-size: clamp(0.62rem, 0.6rem + 0.2vw, 0.72rem); padding: 6px 6px; }
  .cta { font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.76rem); padding: 5px 8px; }
  .floating-nav .nav-container { padding: 5px 6px; gap: 6px; width: 98%; border-radius: 28px; }
}
:root{
  --footer-bg: #ffffff27;    /* faixa inferior clara — altere se quiser */
  --footer-text: #111;
  --footer-accent: #0b6b4f;
  --container-max: 1200px;
}

/* --- estrutura geral --- */
.site-footer{margin-top: 50px; padding: 20px; font-family:Inter, system-ui, sans-serif;color:var(--footer-text);}

/* footer inner (mapa + contatos) */
.footer-inner{display:flex;gap:28px;align-items:flex-start;padding:28px 0;margin-bottom:clamp(10px,15px,20px);}
.footer-left{flex:1;min-width:240px;}
.contact-col{flex:1;min-width:260px;}
.map-wrap{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(10,10,10,.06);}
.map-iframe{width:100%;height:180px;border:0;display:block;}

/* contato list */
.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.contact-item{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.contact-item .icon{width:20px;height:20px;flex:0 0 auto;}
.contact-text{font-size:clamp(14px,2.2vw,18px);}

/* --- faixa inferior (ícones) --- */
.footer-icons {
  background: var(--footer-bg);
  height: auto;
  padding: 0;
  border-top: 1px solid rgba(0,0,0,0.04);
  width: 100%;
}
.footer-icons-inner {
  margin-top: 3px;
  margin-bottom: 7px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* lista */
.social-icons {
  list-style: none;
  padding: 0;
  display: flex;
  gap: clamp(7px, 2vw, 18px);
  align-items: center;
  justify-content: center;
}

/* variável que controla o tamanho base dos ícones — aumente se quiser maiores */
:root {
  --social-size: clamp(32px, 6.5vw, 50px); /* base maior para todos os ícones */
}

/* ícone padrão */
.social-img {
  width: var(--social-size);
  height: var(--social-size);
  display: block;
  object-fit: contain;
  transition: transform .18s ease, filter .18s ease;
  backface-visibility: hidden;
}

.social-icons li.icon-instagram .social-img {
  width: calc(var(--social-size) * 1.30);
  height: calc(var(--social-size) * 1.30);
}

/* hover: volta à cor original */
.social-link:hover .social-img,
.social-link:focus .social-img {
  transform: translateY(-6%) scale(1.06);
  filter: none; /* remove o grayscale/contrast e mostra a cor original */
}

/* hover específico no instagram (fica maior ainda no hover) */
.social-icons li.icon-instagram .social-link:hover .social-img,
.social-icons li.icon-instagram .social-link:focus .social-img {
  transform: translateY(-6%) scale(1.12);
}

/* esconder o ícone de email por padrão (aparece só em width < 500px) */
.icon-email { display: none; }

/* Mostrar email só quando viewport menor que 500px */
@media (max-width: 499px) {
  .icon-email { display: list-item; }
  .social-icons li:nth-child(3){
    margin-left: 0 !important;
  }
}

/* layout responsivo do footer-inner: empilhar em telas pequenas (mantive sua regra) */
@media (max-width: 880px) {
  .footer-inner { flex-direction: column; gap: 18px;align-items:center; width: 100%; }
  .footer-left{width: 100%;}
  .contact-col{width: 80%;}
  .map-iframe { height: 240px; }
}

/* ajustes extras para telas bem pequenas */
@media (max-width: 420px) {
  .footer-inner { padding: 18px 0; }
  .site-footer{padding: 8px;}
  .contact-col{width: 100%;}
  :root { --social-size: clamp(28px, 12vw, 56px); }
  .contact-text { font-size: clamp(13px, 3.6vw, 16px); }
}
/* --- RESET / base para os links do nav --- */
.main-nav a,
.main-nav .main-nav-link {
  display: inline-block;        /* permite transforms/transitions previsíveis */
  padding: 8px 4px;
  color: var(--text);
  border-radius: 6px;
  text-decoration: none;
  transition: transform .18s ease, color .18s ease, box-shadow .12s ease;
  will-change: transform;       /* performance hint */
}

/* --- regra específica para os links principais (use só UM seletor para evitar conflito) --- */
.main-nav .main-nav-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* --- se quiser aplicar a todos os links do nav (mais simples) --- */
.main-nav ul > li > a:hover {
  transform: translateY(-3px);
}

/* --- alternativa quando tiver conflito de especificidade e quiser forçar --- */
/* use apenas se você tiver certeza e não quiser reestruturar seletores */
.main-nav .main-nav-link:hover {
  transform: translateY(-3px) !important;
}

/* --- garantia de encerramento correto de blocos (evite esquecer chaves) --- */
/* seu CSS final deve terminar sem chaves abertas */
:root{
  /* base responsiva das fontes */
  --fs-root: clamp(14px, 1.4vw, 18px);   /* texto normal */
  --fs-nav:  clamp(13px, 1.1vw + 0.1rem, 16px); /* nav links */
  --fs-cta:  clamp(13px, 1.0vw + 0.2rem, 15px); /* botão cta */
  --nav-gap: clamp(8px, 2vw, 20px);
}

/* --- base nav layout (preserve seu grid) --- */
.floating-nav .nav-container { 
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--nav-gap);
}

/* tipografia responsiva */
.floating-nav { font-size: var(--fs-root); }
.floating-nav .main-nav ul { font-size: var(--fs-nav); }
.floating-nav .cta { font-size: var(--fs-cta); }

/* escondemos os .short-text por padrão e mostramos .full-text */
.full-text { display: inline; }
.short-text { display: none; }

/* transições sutis */
.nav1-title,
.nav-link,
.cta {
  transition: opacity .18s ease, transform .12s ease;
}
/* ===== Variáveis / base responsiva ===== */
:root{
  --brand-gap: 0.6rem;
  --brand-shadow: 0 10px 30px rgba(0,0,0,0.08);
  --brand-ease: cubic-bezier(.2,.9,.2,1);
}

/* Keyframes do fade-in suave */
@keyframes brand-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Classe que dispara (ou re-dispara) a animação */
.brand--animate {
  animation: brand-fade-in 1100ms var(--brand-ease) both;
}

/* Hover / focus — subida sutil + leve brilho */
.nav-container .brand:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 1; 
}

/* Respeitar usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  .brand,
  .brand--animate {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
:root{
  --stagger-step: 320ms;      /* intervalo entre itens */
  --stagger-duration: 1560ms;  /* duração de cada animação */
  --stagger-ease: cubic-bezier(.2,.9,.2,1);
  --stagger-translate: 12px;
}

/* Container que controla o stagger */
.header-inner.stagger {
  /* controle visual/posicionamento se precisar */
  display: block;
}

/* Estado inicial dos filhos (pausado) */
.header-inner.stagger > * {
  opacity: 0;
  transform: translateY(var(--stagger-translate));
  will-change: transform, opacity;

  animation-name: fadeInUp;
  animation-duration: var(--stagger-duration);
  animation-timing-function: var(--stagger-ease);
  animation-fill-mode: both;
  animation-play-state: paused; /* só roda quando adicionarmos a classe .stagger--animate */
  /* cada filho recebe --stagger-index via JS; fallback 0 */
  animation-delay: calc(var(--stagger-index, 0) * var(--stagger-step));
}

/* ativa a animação para todos os filhos ao mesmo tempo (com delays individuais) */
.header-inner.stagger.stagger--animate > * {
  animation-play-state: running;
}

/* keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--stagger-translate)) scale(.995);
  }
  60% {
    opacity: 1;
    transform: translateY(calc(var(--stagger-translate) * -0.08)) scale(1.001);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* acessibilidade: prefere menos movimento -> ignora animações */
@media (prefers-reduced-motion: reduce) {
  .header-inner.stagger > * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Mobile: <= 640px — padding reduzido e proporcional */
@media (max-width: 640px) {
  .floating-nav .nav-link,
  .top-nav .main-nav-link {
    padding: 6px 8px;
    font-size: clamp(12px, 3.5vw, 14px);
    border-radius: 8px;
  }

  /* active ainda menor (visual compacto) */
  .floating-nav .nav-link.active,
  .top-nav .main-nav-link.active {
    padding: 4px 5px !important;
    border-radius: 18px;
    box-shadow: none;
  }

  /* se quiser diminuir ainda mais o tamanho do texto dos links ativos em telas estreitas */
  @media (max-height: 540px) {
    .floating-nav .nav-link,
    .top-nav .main-nav-link {
      padding: 5px 6px;
    }
    .top-nav .main-nav-link {
      font-size: clamp(10px, 3vw, 12px) !important;
    }
    .floating-nav .nav-link.active,
    .top-nav .main-nav-link.active {
      padding: 1px 3px !important;
    }
  }
}