/* ─────────────────────────────────────────────────────────────────
   Abrigo Araucária — Design System v2.0
   Paleta, tipografia e tokens oficiais da marca
   ───────────────────────────────────────────────────────────────── */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* 1 ─ Design Tokens */
:root {
  /* Cores oficiais */
  --aa-orange:   #F57C1F;   /* ação, CTAs, destaques */
  --aa-orange-d: #D96B18;   /* hover do laranja */
  --aa-orange-lt:#FEF3E8;   /* fundo laranja claro */

  --aa-green:    #1B5E3A;   /* verde institucional */
  --aa-green-d:  #154D2F;   /* hover/footer */
  --aa-green-lt: #E8F4EE;   /* fundo verde claro */

  --aa-olive:    #6B8F6F;   /* apoio, estados positivos */
  --aa-beige:    #EADFCF;   /* cards, blocos informativos */
  --aa-graphite: #2D2D2D;   /* texto principal */
  --aa-offwhite: #F9F7F2;   /* fundo das páginas */
  --aa-white:    #FFFFFF;

  /* Cores funcionais */
  --aa-success:    #2E7D4F;
  --aa-warning:    #D98217;
  --aa-danger:     #C8403A;
  --aa-info:       #3D6F8E;
  --aa-success-bg: #EAF5EE;
  --aa-warning-bg: #FFF3E2;
  --aa-danger-bg:  #FDECEA;
  --aa-info-bg:    #EAF2F7;

  /* Aliases usados no CSS (compatibilidade com código existente) */
  --p:    var(--aa-orange);
  --p-d:  var(--aa-orange-d);
  --p-lt: var(--aa-orange-lt);
  --nv:   var(--aa-green);
  --bg:   var(--aa-offwhite);
  --srf:  var(--aa-white);

  --border:   rgba(45,45,45,.12);
  --border-d: rgba(45,45,45,.20);

  --t1: var(--aa-graphite);  /* #2D2D2D */
  --t2: #4A4A4A;
  --t3: #6b7280;
  --t4: #9ca3af;

  /* Tipo de abrigo */
  --church-c:#16a34a;  --church-bg:#dcfce7;
  --school-c:#2563eb;  --school-bg:#dbeafe;
  --comp-c:  #ea580c;  --comp-bg:  #ffedd5;
  --assoc-c: #9333ea;  --assoc-bg: #f3e8ff;
  --house-c: #ca8a04;  --house-bg: #fef9c3;
  --other-c: #4b5563;  --other-bg: #f3f4f6;

  /* Raios */
  --r:    8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-f:  999px;

  /* Sombras (design system) */
  --sh:    0 1px 2px  rgba(45,45,45,.05);
  --sh-md: 0 8px 24px rgba(45,45,45,.08);
  --sh-lg: 0 16px 40px rgba(45,45,45,.10);

  /* Tipografia */
  --font-heading: "Montserrat", "Inter", Arial, sans-serif;
  --font:         "Inter", Arial, sans-serif;
}

/* 2 ─ Reset */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: var(--font);
  background:  var(--bg);
  color:       var(--t1);
  line-height: 1.55;
  font-size:   15px;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 68px;
}
@media(min-width:640px){ body{ padding-bottom:0 } }
a { color:var(--p); text-decoration:none }
img { display:block; max-width:100% }

/* Focus visível — design system §71 */
:focus-visible {
  outline: 3px solid rgba(245,124,31,.45);
  outline-offset: 2px;
}

/* 3 ─ Icon sizes */
.icon   { display:inline-block; width:20px; height:20px; vertical-align:middle; flex-shrink:0 }
.icon-xs{ display:inline-block; width:14px; height:14px; vertical-align:middle; flex-shrink:0 }
.icon-sm{ display:inline-block; width:16px; height:16px; vertical-align:middle; flex-shrink:0 }
.icon-lg{ display:inline-block; width:22px; height:22px; vertical-align:middle; flex-shrink:0 }

/* 3b ─ Clima bar */
#clima-bar {
  display:flex; align-items:center; justify-content:center;
  gap:8px; flex-wrap:wrap;
  padding:6px 16px;
  background: var(--aa-green);
  color: rgba(255,255,255,.85);
  font-size:12px; font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cb-ico   { font-size:16px; line-height:1 }
.cb-temp  { font-size:14px; font-weight:700; color:#fff }
.cb-cond  { color:rgba(255,255,255,.72) }
.cb-sep   { color:rgba(255,255,255,.25); font-size:10px }
.cb-vento { color:rgba(255,255,255,.62) }
.cb-loc   { color:rgba(255,255,255,.5); font-size:11px }

/* 4 ─ Alert banner */
#alerta-banner {
  display:none; align-items:center; justify-content:center;
  gap:8px; padding:9px 16px;
  font-size:13px; font-weight:600; letter-spacing:.1px;
  text-align:center; position:relative; z-index:100;
}
#alerta-banner.n1{ display:flex; background:#D98217; color:#fff }
#alerta-banner.n2{ display:flex; background:#C8403A; color:#fff }
#alerta-banner.n3{ display:flex; background:#C8403A; color:#fff; animation:abp 1.2s ease-in-out infinite }
@keyframes abp{ 0%,100%{opacity:1} 50%{opacity:.78} }

/* Map search overlay */
.map-wrap { position:relative }
.map-search {
  position:absolute; top:12px; left:12px; right:12px;
  z-index:1000; pointer-events:none;
}
.ms-bar {
  background:#fff; border-radius:14px;
  box-shadow:0 2px 20px rgba(45,45,45,.18);
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; pointer-events:all;
}
.ms-bar > svg { color:var(--t3); flex-shrink:0 }
.ms-bar input {
  flex:1; border:none; outline:none;
  font-size:15px; color:var(--t1);
  background:transparent; font-family:var(--font);
}
.ms-bar input::placeholder { color:var(--t4) }
.ms-clear {
  background:none; border:none; cursor:pointer;
  color:var(--t3); padding:2px; line-height:1;
  display:flex; align-items:center; pointer-events:all;
}
.ms-clear:hover { color:var(--t1) }
.ms-chips {
  display:flex; gap:6px; overflow-x:auto; margin-top:8px;
  padding-bottom:2px; pointer-events:all;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ms-chips::-webkit-scrollbar { display:none }
.mf {
  background:#fff; border:none; border-radius:var(--r-f);
  padding:6px 13px; font-size:12px; font-weight:600;
  color:var(--t2); cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 6px rgba(45,45,45,.12);
  transition:background .15s, color .15s, transform .1s;
  font-family: var(--font-heading);
}
.mf:active { transform:scale(.95) }
.mf.ativo { background:var(--p); color:#fff; box-shadow:0 2px 8px rgba(245,124,31,.35) }
.mf:hover:not(.ativo) { background:#f5f5f5 }

/* 5 ─ Header */
header {
  background: var(--srf);
  border-bottom: 1px solid var(--border);
  padding: 0 16px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:900;
}
@media(min-width:640px){ header{ padding:0 24px } }
.logo { display:flex; align-items:center; gap:10px }
nav.d-nav { display:none }
@media(min-width:640px){ nav.d-nav{ display:flex; align-items:center; gap:4px } }
nav.d-nav a {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 12px; font-size:13px; font-weight:600;
  color:var(--t3); border-radius:var(--r);
  transition:.15s; font-family:var(--font);
}
nav.d-nav a:hover { background:var(--bg); color:var(--t1) }
nav.d-nav a.np {
  background:var(--p); color:#fff; font-weight:700;
  font-family:var(--font-heading);
}
nav.d-nav a.np:hover { background:var(--p-d) }

/* 6 ─ Bottom nav (mobile only) */
.bottom-nav {
  display:flex; position:fixed; bottom:0; left:0; right:0;
  background:var(--srf); border-top:1px solid var(--border);
  z-index:900; padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(min-width:640px){ .bottom-nav{ display:none } }
.bn-a {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; padding:8px 4px;
  color:var(--t4); font-size:10px; font-weight:700;
  letter-spacing:.2px; text-decoration:none!important;
  min-height:56px; transition:color .15s;
  font-family:var(--font);
}
.bn-a:hover, .bn-a.on { color:var(--p) }

/* 7 ─ Hero (mantido para compatibilidade) */
.hero { background:var(--nv); padding:44px 20px 48px; text-align:center }
@media(min-width:640px){ .hero{ padding:68px 24px 76px } }
.hero-inner { max-width:540px; margin:0 auto }
.hero h1 {
  font-size:30px; font-weight:800; color:#fff;
  line-height:1.1; letter-spacing:-.7px; margin-bottom:12px;
  font-family:var(--font-heading);
}
@media(min-width:480px){ .hero h1{ font-size:40px; letter-spacing:-1.1px } }
@media(min-width:640px){ .hero h1{ font-size:50px; letter-spacing:-1.4px } }
.hero h1 em { color:var(--p); font-style:normal }
.hero-sub {
  font-size:15px; color:rgba(255,255,255,.62); line-height:1.7;
  margin-bottom:28px; max-width:420px;
  margin-left:auto; margin-right:auto;
}
.hero-btns {
  display:flex; gap:10px; justify-content:center;
  flex-wrap:wrap; margin-bottom:32px;
}

/* 8 ─ Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:11px 20px; border-radius:var(--r);
  font-size:14px; font-weight:700;
  font-family:var(--font-heading);
  border:1.5px solid transparent; cursor:pointer;
  transition:.15s; text-decoration:none!important;
  white-space:nowrap; line-height:1; min-height:44px;
}
.btn-p   { background:var(--p);  color:#fff;  border-color:var(--p) }
.btn-p:hover { background:var(--p-d); border-color:var(--p-d) }
.btn-gwh { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.24) }
.btn-gwh:hover { background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.38) }
.btn-o   { background:transparent; color:var(--aa-green); border-color:var(--aa-green) }
.btn-o:hover { background:var(--aa-green-lt) }
.btn-g   { background:transparent; color:var(--t2); border-color:var(--border-d) }
.btn-g:hover { background:var(--bg) }
.btn-grn { background:#25D366; color:#fff; border-color:#25D366 }
.btn-grn:hover { background:#1eb95a }
.btn-full{ width:100% }
.btn-sm  { padding:7px 14px; font-size:13px; min-height:38px }

/* Admin action buttons */
.btn-ok {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:var(--r);
  font-size:12px; font-weight:700; cursor:pointer;
  border:none; background:var(--aa-success); color:#fff;
  font-family:var(--font-heading); min-height:36px;
}
.btn-ok:hover { background:#1B6B3A }
.btn-no {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:var(--r);
  font-size:12px; font-weight:700; cursor:pointer;
  border:none; background:var(--aa-danger); color:#fff;
  font-family:var(--font-heading); min-height:36px;
}
.btn-no:hover { background:#A8302A }
.btn-inline {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 12px; border-radius:var(--r);
  font-size:12px; font-weight:600; cursor:pointer;
  border:1px solid var(--border-d); background:var(--srf);
  font-family:var(--font); color:var(--t2); transition:.15s;
}
.btn-inline:hover { background:var(--bg) }

/* 9 ─ Map */
#map { height:640px; width:100%; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }

/* 10 ─ Section */
.section { padding:20px 16px }
@media(min-width:640px){ .section{ padding:28px 24px } }
.section-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:16px; gap:12px;
}
.section-ttl {
  display:flex; align-items:center; gap:8px;
  font-size:17px; font-weight:700; color:var(--t1);
  font-family:var(--font-heading);
}
.badge {
  background:var(--p); color:#fff;
  font-size:11px; font-weight:700; padding:2px 9px;
  border-radius:var(--r-f); min-width:26px; text-align:center;
  font-family:var(--font-heading);
}

/* 11 ─ Shelter cards */
.shelter-grid { display:grid; grid-template-columns:1fr; gap:10px }
@media(min-width:500px){ .shelter-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:860px){ .shelter-grid{ grid-template-columns:1fr 1fr 1fr } }
.sc {
  background:var(--srf); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:14px; cursor:pointer;
  display:flex; gap:12px; align-items:flex-start;
  transition:box-shadow .2s, transform .15s; position:relative;
}
.sc::after {
  content:''; position:absolute; left:0; top:12px; bottom:12px;
  width:3px; border-radius:0 3px 3px 0;
}
.sc:hover { box-shadow:var(--sh-md); transform:translateY(-1px) }
.sc:active{ transform:scale(.99) }
.sc-church::after  { background:var(--church-c) }
.sc-school::after  { background:var(--school-c) }
.sc-company::after { background:var(--comp-c) }
.sc-assoc::after   { background:var(--assoc-c) }
.sc-house::after   { background:var(--house-c) }
.sc-other::after   { background:var(--other-c) }
.sc-ico {
  width:44px; height:44px; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-left:6px;
}
.sc-church  .sc-ico { background:var(--church-bg); color:var(--church-c) }
.sc-school  .sc-ico { background:var(--school-bg); color:var(--school-c) }
.sc-company .sc-ico { background:var(--comp-bg);   color:var(--comp-c) }
.sc-assoc   .sc-ico { background:var(--assoc-bg);  color:var(--assoc-c) }
.sc-house   .sc-ico { background:var(--house-bg);  color:var(--house-c) }
.sc-other   .sc-ico { background:var(--other-bg);  color:var(--other-c) }
.sc-body { flex:1; min-width:0 }
.sc-name {
  font-size:14px; font-weight:700; color:var(--t1);
  line-height:1.3; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--font-heading);
}
.sc-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--t3); margin-bottom:8px }
.sc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px }
.sc-tag {
  background:var(--bg); color:var(--t3);
  border:1px solid var(--border);
  font-size:11px; font-weight:500;
  padding:2px 8px; border-radius:var(--r-f);
}
.sc-phone { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--t2) }
.empty-state { padding:48px 20px; text-align:center }
.empty-state .ei { font-size:36px; display:block; margin-bottom:10px }
.empty-state p { color:var(--t4); font-size:14px }

/* 12 ─ Info section */
.info-sec { background:var(--nv); padding:36px 16px }
@media(min-width:640px){ .info-sec{ padding:52px 24px } }
.info-sec-ttl {
  text-align:center; font-size:11px; font-weight:700;
  color:rgba(255,255,255,.35); letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:20px;
  font-family:var(--font-heading);
}
.info-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-width:760px; margin:0 auto;
}
@media(min-width:640px){ .info-grid{ grid-template-columns:repeat(4,1fr); gap:14px } }
.ic {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-xl); padding:18px 14px; text-align:center;
}
.ic-ico {
  width:44px; height:44px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; color:rgba(255,255,255,.7);
}
.ic h3 { font-size:13px; font-weight:700; color:rgba(255,255,255,.88); margin-bottom:5px; font-family:var(--font-heading) }
.ic p  { font-size:12px; color:rgba(255,255,255,.42); line-height:1.6 }
.ic a  { color:#6ee7a0; font-weight:700 }
.ic a.tel { color:#fbbf74 }

/* 13 ─ Footer */
footer {
  background: var(--aa-green-d);
  padding:18px 16px; text-align:center;
  font-size:12px; color:rgba(255,255,255,.32);
  border-top:1px solid rgba(255,255,255,.06);
}
footer a { color:rgba(255,255,255,.45) }

/* 14 ─ Page hero */
.page-hero { background:var(--nv); padding:32px 20px 26px; text-align:center }
.page-hero-ico {
  width:52px; height:52px; border-radius:var(--r-xl);
  background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 12px; color:var(--p);
}
.page-hero h2 {
  font-size:22px; font-weight:800; color:#fff;
  letter-spacing:-.4px; font-family:var(--font-heading);
}
.page-hero p { font-size:14px; color:rgba(255,255,255,.52); margin-top:6px }

/* 15 ─ Tabs */
.tabs-nav {
  display:flex; background:var(--srf); border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tabs-nav::-webkit-scrollbar { display:none }
.tab-btn {
  flex:1; min-width:110px; display:flex; align-items:center;
  justify-content:center; gap:6px; padding:13px 12px;
  font-size:13px; font-weight:600; color:var(--t4);
  background:none; border:none; border-bottom:2.5px solid transparent;
  margin-bottom:-1px; cursor:pointer; white-space:nowrap;
  font-family:var(--font-heading); min-height:52px; transition:color .15s;
}
.tab-btn.ativo { color:var(--p); border-bottom-color:var(--p) }

/* 16 ─ Form wrap */
.form-wrap { max-width:520px; margin:0 auto; padding:24px 16px 32px }
@media(min-width:640px){ .form-wrap{ padding:32px 24px 40px } }

/* 17 ─ Form elements */
.fg { margin-bottom:18px }
.fl {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--t2); margin-bottom:7px;
  font-family:var(--font);
}
.fl .req { color:var(--aa-danger) }
.fc {
  width:100%; padding:11px 13px;
  border:1.5px solid var(--border-d); border-radius:var(--r);
  font-size:14px; color:var(--t1); background:var(--srf);
  font-family:var(--font); transition:border-color .15s, box-shadow .15s;
  line-height:1.5; min-height:44px;
}
.fc:focus {
  outline:none; border-color:var(--aa-green);
  box-shadow:0 0 0 3px rgba(27,94,58,.12);
}
.fh { font-size:12px; color:var(--t4); margin-top:5px }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media(max-width:400px){ .row2{ grid-template-columns:1fr } }

/* Checkbox list */
.cl { display:flex; flex-direction:column; gap:8px }
.ci {
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--t2); cursor:pointer;
  padding:11px 14px; border:1.5px solid var(--border);
  border-radius:var(--r); transition:border-color .15s, background .15s;
}
.ci:has(input:checked){ border-color:var(--p); background:var(--p-lt); color:var(--p-d) }
.ci input[type=checkbox]{
  width:18px; height:18px; accent-color:var(--p); flex-shrink:0; cursor:pointer;
}

/* Msg boxes */
.msg-box {
  margin-top:14px; padding:12px 16px;
  border-radius:var(--r); font-size:14px; font-weight:500; display:none;
}
.msg-box.ok   { background:var(--aa-success-bg); border:1px solid #86efac; color:var(--aa-success) }
.msg-box.erro { background:var(--aa-danger-bg);  border:1px solid #fca5a5; color:var(--aa-danger) }

/* WPP callout */
.wpp-callout {
  margin-top:20px; padding:14px 16px;
  background:var(--aa-success-bg); border:1px solid #86efac;
  border-radius:var(--r-lg);
}
.wpp-callout p:first-child { font-size:13px; font-weight:700; color:var(--aa-success); margin-bottom:4px }
.wpp-callout p:last-child  { font-size:13px; color:var(--t3); line-height:1.5 }

/* 18 ─ Admin */
#admin-panel { display:none; padding:20px 16px; max-width:900px; margin:0 auto }
@media(min-width:640px){ #admin-panel{ padding:28px 24px } }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px }
@media(min-width:640px){ .stats-grid{ grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px } }
.stat-card {
  background:var(--srf); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:20px 16px; text-align:center;
}
.stat-card .num {
  font-size:32px; font-weight:800; color:var(--aa-green);
  line-height:1; font-family:var(--font-heading);
}
.stat-card .lbl { font-size:12px; color:var(--t4); margin-top:6px; font-weight:500 }

.card { background:var(--srf); border:1px solid var(--border); border-radius:var(--r-xl); margin-bottom:14px; overflow:hidden }
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px;
  background:var(--bg); border-bottom:1px solid var(--border);
  font-size:14px; font-weight:700; color:var(--t1);
  font-family:var(--font-heading);
}
.card-body { padding:18px 16px }

.nivel-btns { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.nivel-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--r);
  font-size:13px; font-weight:700; border:1.5px solid;
  cursor:pointer; font-family:var(--font-heading); transition:.15s; min-height:44px;
}
.nivel-btn.n0 { background:var(--aa-success-bg); color:var(--aa-success); border-color:#86efac }
.nivel-btn.n1 { background:var(--aa-warning-bg); color:var(--aa-warning); border-color:#fcd34d }
.nivel-btn.n2 { background:var(--aa-danger-bg);  color:var(--aa-danger);  border-color:#fdba74 }
.nivel-btn.n3 { background:var(--aa-danger-bg);  color:var(--aa-danger);  border-color:#fca5a5 }
.nivel-btn.ativo.n0 { background:var(--aa-success); color:#fff; border-color:var(--aa-success); box-shadow:0 0 0 3px rgba(46,125,79,.2) }
.nivel-btn.ativo.n1 { background:var(--aa-warning); color:#fff; border-color:var(--aa-warning); box-shadow:0 0 0 3px rgba(217,130,23,.2) }
.nivel-btn.ativo.n2 { background:var(--aa-danger);  color:#fff; border-color:var(--aa-danger);  box-shadow:0 0 0 3px rgba(200,64,58,.2) }
.nivel-btn.ativo.n3 { background:var(--aa-danger);  color:#fff; border-color:var(--aa-danger);  box-shadow:0 0 0 3px rgba(200,64,58,.2) }

/* Admin form compat */
.form-group { margin-bottom:18px }
.form-group label {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--t2); margin-bottom:7px;
}
.form-group input,
.form-group textarea,
.form-group select {
  width:100%; padding:11px 13px;
  border:1.5px solid var(--border-d); border-radius:var(--r);
  font-size:14px; color:var(--t1); background:var(--srf);
  font-family:var(--font); transition:border-color .15s; line-height:1.5; min-height:44px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline:none; border-color:var(--aa-green);
  box-shadow:0 0 0 3px rgba(27,94,58,.12);
}
.form-group .hint { font-size:12px; color:var(--t4); margin-top:5px }
.pending-item { padding:14px 16px; border-bottom:1px solid var(--border) }
.pending-item:last-child { border-bottom:none }
.pi-name { font-weight:700; font-size:14px; color:var(--t1); font-family:var(--font-heading) }
.pi-info { font-size:13px; color:var(--t3); margin-top:5px; line-height:1.6 }
.pi-acts { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }

/* WPP dots */
.wpp-row  { display:flex; align-items:center; gap:10px }
.dot      { width:9px; height:9px; border-radius:50%; flex-shrink:0 }
.dot.verde   { background:var(--aa-success); box-shadow:0 0 0 3px var(--aa-success-bg) }
.dot.amarelo { background:var(--aa-warning); box-shadow:0 0 0 3px var(--aa-warning-bg) }
.dot.vermelho{ background:var(--aa-danger);  box-shadow:0 0 0 3px var(--aa-danger-bg) }
.wpp-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
#qr-container { text-align:center; margin-top:20px; display:none }
#qr-img { max-width:220px; margin:0 auto; border-radius:var(--r-lg); border:1px solid var(--border) }

/* Logo imagem */
.logo-img { height:38px; width:auto; display:block }
@media(min-width:640px){ .logo-img{ height:44px } }
.logo a { display:flex; align-items:center; gap:6px; text-decoration:none }

/* ── Sobre page ─────────────────────────────────────────────────── */
.sobre-hero {
  background: linear-gradient(155deg, var(--aa-green) 0%, #245F42 100%);
  padding:56px 24px 60px; text-align:center;
}
.sobre-hero h1 {
  font-size:clamp(28px,5vw,46px); font-weight:800; color:#fff;
  line-height:1.1; letter-spacing:-.6px; margin-bottom:14px;
  font-family:var(--font-heading);
}
.sobre-hero h1 em { color:var(--p); font-style:normal }
.sobre-hero p { font-size:16px; color:rgba(255,255,255,.65); max-width:520px; margin:0 auto; line-height:1.7 }

.sobre-section { max-width:840px; margin:0 auto; padding:40px 20px }
@media(min-width:640px){ .sobre-section{ padding:56px 32px } }
.sobre-section h2 {
  font-size:22px; font-weight:800; color:var(--aa-green);
  margin-bottom:16px; font-family:var(--font-heading);
}
.sobre-section p { font-size:15px; color:var(--t2); line-height:1.75; margin-bottom:14px }

.pilares-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px }
@media(min-width:640px){ .pilares-grid{ grid-template-columns:repeat(3,1fr) } }
.pilar-card {
  background:var(--srf); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:20px 16px;
}
.pilar-card .pi-ico { font-size:28px; margin-bottom:10px }
.pilar-card h3 {
  font-size:14px; font-weight:700; color:var(--aa-green);
  margin-bottom:6px; font-family:var(--font-heading);
}
.pilar-card p { font-size:13px; color:var(--t3); line-height:1.6 }

.tech-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px }
@media(min-width:500px){ .tech-grid{ grid-template-columns:1fr 1fr } }
.tech-item {
  display:flex; align-items:center; gap:12px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px 16px;
}
.tech-item .ti-ico { font-size:22px; flex-shrink:0 }
.tech-item strong { display:block; font-size:13px; font-weight:700; color:var(--t1); font-family:var(--font-heading) }
.tech-item span   { font-size:12px; color:var(--t3) }

.sobre-cta {
  background: linear-gradient(135deg, var(--aa-green) 0%, #245F42 100%);
  padding:48px 24px; text-align:center;
}
.sobre-cta h2 {
  font-size:24px; font-weight:800; color:#fff;
  margin-bottom:10px; font-family:var(--font-heading);
}
.sobre-cta p { font-size:15px; color:rgba(255,255,255,.65); margin-bottom:24px }
.sobre-cta .btn-p {
  background:var(--p); border-color:var(--p);
  font-size:15px; padding:14px 28px;
}

/* ── Animações ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}