/* ═══════════════════════════════════════════════════════════════════════
   style.css — SAAE Bom Jesus da Lapa  ·  v3.0
   Arquitetura: mobile-first · Bootstrap 5 base · Custom properties
   Paleta: Azul (#0B3C78) + Verde (#059669) + Laranja (#D97706)
   Tipografia: Plus Jakarta Sans (corpo/UI) + Lora (display/títulos)
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   01 · TOKENS / DESIGN SYSTEM
────────────────────────────────────────────────────────────────────── */
:root {
  /* Paleta Azul — cor principal */
  --blue-950: #040F20;
  --blue-900: #071C3F;
  --blue-800: #0B2D5F;
  --blue-700: #0B3C78;   /* ← primária */
  --blue-600: #0F4F9E;
  --blue-500: #1A6BC4;
  --blue-400: #3B87D8;
  --blue-300: #6DAAE8;
  --blue-200: #A8CEF4;
  --blue-100: #D6E9FB;
  --blue-50:  #EBF4FD;

  /* Paleta Verde — apoio / sucesso */
  --green-700: #065F46;
  --green-600: #047857;
  --green-500: #059669;  /* ← apoio verde */
  --green-400: #34D399;
  --green-100: #D1FAE5;
  --green-50:  #ECFDF5;

  /* Paleta Laranja — apoio / alerta */
  --orange-700: #B45309;
  --orange-600: #D97706;  /* ← apoio laranja */
  --orange-400: #FBBF24;
  --orange-100: #FEF3C7;
  --orange-50:  #FFFBEB;

  /* Perigo */
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  /* Neutros */
  --gray-950: #0A0F1A;
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #F9FAFB;
  --white:    #FFFFFF;

  /* Texto */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);

  /* Bordas */
  --border-color:   var(--gray-200);
  --border-radius-sm:  6px;
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  --border-radius-xl: 24px;
  --border-radius-2xl:32px;

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(11,60,120,.05);
  --shadow-sm: 0 1px 4px rgba(11,60,120,.07), 0 2px 8px rgba(11,60,120,.05);
  --shadow-md: 0 2px 8px rgba(11,60,120,.09), 0 6px 20px rgba(11,60,120,.07);
  --shadow-lg: 0 4px 16px rgba(11,60,120,.12), 0 12px 32px rgba(11,60,120,.09);
  --shadow-xl: 0 8px 28px rgba(11,60,120,.15), 0 20px 48px rgba(11,60,120,.10);
  --shadow-blue: 0 4px 20px rgba(15,79,158,.30);
  --shadow-green:0 4px 16px rgba(5,150,105,.25);

  /* Transições */
  --ease-out:   cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tr-fast: .14s var(--ease-out);
  --tr-base: .22s var(--ease-out);
  --tr-slow: .38s var(--ease-out);

  /* Tipografia */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-size-base: 16px;

  /* Espaçamento (8pt) */
  --sp-1: 4px; --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;--sp-6: 24px; --sp-8: 32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px; --sp-20:80px; --sp-24:96px;
}

/* Alto contraste */
[data-theme="hc"] {
  --blue-700: #002A6B;
  --blue-50:  #D0E3FF;
  --gray-900: #000000;
  --gray-600: #222222;
  --gray-200: #888888;
  --gray-50:  #FFFFFF;
  --border-color: #555555;
}

/* ──────────────────────────────────────────────────────────────────────
   02 · RESET & BASE
────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }
img { max-width: 100%; height: auto; display: block; }

/* Skip link */
.skip-link {
  position: absolute; top: -200%; left: var(--sp-4);
  z-index: 9999;
  background: var(--blue-700); color: var(--white);
  font-size: 14px; font-weight: 600;
  padding: var(--sp-3) var(--sp-6);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  transition: top var(--tr-fast);
}
.skip-link:focus { top: 0; outline: 3px solid var(--orange-400); }

/* Foco visível */
:focus-visible {
  outline: 2.5px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: var(--border-radius-sm);
}

/* ──────────────────────────────────────────────────────────────────────
   03 · TOPBAR
────────────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--blue-950);
  height: auto;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 6px 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.topbar-contact {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.topbar-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color var(--tr-fast);
  white-space: nowrap;
}
.topbar-item:hover { color: rgba(255,255,255,.9); }
.topbar-item--static { pointer-events: none; }
.topbar-item--link {
  padding: 3px 8px;
  border-radius: var(--border-radius-sm);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.topbar-item--link:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}

.topbar-divider {
  width: 1px; height: 14px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

.topbar-nav {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Controles de acessibilidade (topbar) */
.topbar-acc {
  display: flex; align-items: center; gap: 3px;
  margin-left: var(--sp-2);
}
.acc-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.45);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--tr-fast);
  display: inline-flex; align-items: center;
}
.acc-btn:hover {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border-color: rgba(255,255,255,.3);
}

@media (max-width: 768px) {
  .topbar-contact { gap: var(--sp-3); }
  .topbar-item span { display: none; }
  .topbar-item i { font-size: 14px; }
  .topbar-item--static { display: none; }
  .topbar-divider { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   04 · HEADER / NAVBAR
────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-color);
  transition: box-shadow var(--tr-base);
}
.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(11,60,120,.10);
}

.navbar-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--sp-4);
}

/* Marca / Logo */
.brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; flex-shrink: 0;
}
.brand--small .brand-mark { width: 38px; height: 38px; font-size: 17px; }
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--blue-700), var(--blue-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--white);
  box-shadow: var(--shadow-blue);
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-body);
  font-size: 18px; font-weight: 800;
  color: var(--blue-800);
  letter-spacing: -.02em;
}
.brand-sub { font-size: 10.5px; color: var(--text-muted); }

/* Menu desktop */
.nav-menu {
  display: none;
  list-style: none;
  gap: 2px;
  align-items: center;
  margin: 0; padding: 0;
}
@media (min-width: 1100px) { .nav-menu { display: flex; } }

.nav-link {
  font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary);
  padding: 7px 11px;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--tr-fast);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: 2px; left: 11px; right: 11px;
  height: 2px; border-radius: 1px;
  background: var(--blue-600);
  transform: scaleX(0);
  transition: transform var(--tr-base);
}
.nav-link:hover { color: var(--blue-700); background: var(--blue-50); }
.nav-link--active {
  color: var(--blue-700);
  background: var(--blue-50);
}
.nav-link--active::after,
.nav-link:hover::after { transform: scaleX(1); }

/* Ações do header */
.header-actions {
  display: flex; align-items: center; gap: var(--sp-3);
}

.btn-segunda-via {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--blue-700); color: var(--white);
  font-size: 13.5px; font-weight: 700;
  padding: 9px 18px;
  border-radius: var(--border-radius-md);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-blue);
  transition: all var(--tr-base);
}
.btn-segunda-via:hover {
  background: var(--blue-600);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-emergencia {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--red-600); color: var(--white);
  font-size: 13.5px; font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--border-radius-md);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(220,38,38,.28);
  transition: all var(--tr-base);
}
.btn-emergencia:hover {
  background: #B91C1C; color: var(--white);
  transform: translateY(-1px);
}

/* Toggle mobile */
.menu-toggle {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  padding: 8px;
  transition: border-color var(--tr-fast);
  flex-shrink: 0;
}
@media (min-width: 1100px) { .menu-toggle { display: none; } }
.menu-toggle:hover { border-color: var(--blue-400); }
.toggle-bar {
  display: block; width: 100%; height: 2px;
  background: var(--gray-700); border-radius: 2px;
  transition: transform var(--tr-base), opacity var(--tr-fast);
}
.menu-toggle[aria-expanded="true"] .toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Drawer mobile */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 600;
  display: none;
}
.mobile-drawer.open { display: block; }

.drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(4,15,32,.6);
  backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer-panel {
  position: absolute; top: 0; right: 0;
  width: min(340px, 92vw);
  height: 100%;
  background: var(--white);
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-6) var(--sp-10);
  display: flex; flex-direction: column; gap: var(--sp-5);
  box-shadow: var(--shadow-xl);
  animation: slideInRight .25s var(--ease-out);
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: none; } }

.drawer-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-color);
}
.drawer-close {
  background: transparent;
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  width: 36px; height: 36px;
  border-radius: var(--border-radius-sm);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tr-fast);
}
.drawer-close:hover { border-color: var(--red-600); color: var(--red-600); }

.drawer-menu { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.drawer-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px var(--sp-4);
  border-radius: var(--border-radius-md);
  font-size: 15px; font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  transition: all var(--tr-fast);
}
.drawer-link i { font-size: 17px; color: var(--blue-400); }
.drawer-link:hover { background: var(--blue-50); color: var(--blue-700); }
.drawer-link--active { background: var(--blue-50); color: var(--blue-700); font-weight: 700; }

.drawer-ctas { display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer-contact { display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer-contact-item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13.5px; color: var(--text-muted);
  text-decoration: none;
}
.drawer-contact-item i { color: var(--blue-500); font-size: 14px; }
.drawer-contact-item:hover { color: var(--blue-700); }

/* ──────────────────────────────────────────────────────────────────────
   05 · SEÇÕES — BASE COMPARTILHADA
────────────────────────────────────────────────────────────────────── */
.section-pad { padding: var(--sp-20) 0; }
.section-pad--tinted { background: var(--gray-50); }

.section-head { margin-bottom: var(--sp-12); }
.section-head--split {
  display: flex; align-items: flex-end;
  justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.section-eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-3);
}
.section-eyebrow--light { color: #7EC8F5; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 600;
  color: var(--gray-900);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.section-title--light { color: var(--white); }

.section-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin-top: var(--sp-3);
}

.btn-ver-todas {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700;
  color: var(--blue-600); text-decoration: none;
  white-space: nowrap;
  transition: gap var(--tr-fast), color var(--tr-fast);
}
.btn-ver-todas:hover { gap: 10px; color: var(--blue-700); }

/* ──────────────────────────────────────────────────────────────────────
   06 · HERO
────────────────────────────────────────────────────────────────────── */
.hero-section {
  background: var(--blue-800);
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0 0;
}

/* Elementos decorativos */
.hero-mesh { position: absolute; inset: 0; pointer-events: none; }
.mesh-circle {
  position: absolute; border-radius: 50%;
}
.mesh-c1 {
  width: 700px; height: 700px;
  top: -250px; right: -150px;
  background: radial-gradient(circle, rgba(59,135,216,.15) 0%, transparent 65%);
}
.mesh-c2 {
  width: 400px; height: 400px;
  bottom: 0; left: -80px;
  background: radial-gradient(circle, rgba(5,150,105,.10) 0%, transparent 70%);
}
.mesh-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Linha de destaque verde no topo */
.hero-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--green-500) 0%, var(--blue-400) 50%, var(--orange-600) 100%);
  z-index: 2;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  position: relative; z-index: 1;
  padding-bottom: var(--sp-16);
}
@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-16);
    align-items: center;
    padding-bottom: var(--sp-20);
  }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: var(--sp-5);
}
.hero-eyebrow i { font-size: 14px; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 58px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: var(--sp-5);
}
.hero-title em {
  color: var(--orange-400);
  font-style: italic;
}

.hero-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  color: rgba(255,255,255,.65);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: var(--sp-8);
}

/* CTAs hero */
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.cta-primary {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: var(--green-500); color: var(--white);
  font-size: 15px; font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--border-radius-md);
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-green);
  transition: all var(--tr-base);
}
.cta-primary:hover {
  background: var(--green-600); color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(5,150,105,.35);
}
.cta-primary--solid {
  background: var(--blue-500);
  box-shadow: var(--shadow-blue);
}
.cta-primary--solid:hover { background: var(--blue-600); }

.cta-secondary {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  background: rgba(255,255,255,.1); color: var(--white);
  font-size: 15px; font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--border-radius-md);
  border: 1.5px solid rgba(255,255,255,.25);
  text-decoration: none; white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all var(--tr-base);
}
.cta-secondary:hover {
  background: rgba(255,255,255,.2);
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}

/* Status chips */
.hero-status {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.8);
  white-space: nowrap;
}
.status-ok i { color: var(--green-400); }
.status-link {
  text-decoration: none;
  transition: background var(--tr-fast);
}
.status-link:hover { background: rgba(255,255,255,.15); }

/* Cards de estatísticas */
.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (min-width: 480px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--border-radius-lg);
  padding: var(--sp-5) var(--sp-5);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: var(--sp-4);
  transition: background var(--tr-fast);
}
.stat-card:hover { background: rgba(255,255,255,.12); }

.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--blue-300);
  flex-shrink: 0;
}
.stat-icon--green { color: var(--green-400); }
.stat-icon--orange { color: var(--orange-400); }

.stat-body { display: flex; flex-direction: column; }
.stat-val {
  font-family: var(--font-body);
  font-size: 24px; font-weight: 800;
  color: var(--white); line-height: 1.1;
}
.stat-unit { font-size: 16px; color: var(--white); font-weight: 700; }
.stat-label { font-size: 12px; color: rgba(255,255,255,.5); }

/* ──────────────────────────────────────────────────────────────────────
   07 · SERVIÇOS
────────────────────────────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: all var(--tr-base);
}
.service-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
  transition: transform var(--tr-base);
}
.service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--blue-200);
}
.service-card:hover::after { transform: scaleX(1); }

/* Card destaque */
.service-card--featured {
  border-color: var(--blue-300);
  background: linear-gradient(150deg, var(--blue-50) 0%, rgba(255,255,255,1) 100%);
}
.service-card--featured::after {
  background: linear-gradient(90deg, var(--green-500), var(--blue-500));
  transform: scaleX(1);
}

/* Ícone */
.svc-icon-wrap {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: var(--sp-2);
  transition: transform var(--tr-base);
}
.service-card:hover .svc-icon-wrap { transform: scale(1.08) rotate(-3deg); }

.svc-icon--blue   { background: var(--blue-50);   border: 1.5px solid var(--blue-200);  color: var(--blue-700); }
.svc-icon--green  { background: var(--green-50);   border: 1.5px solid var(--green-100); color: var(--green-600); }
.svc-icon--orange { background: var(--orange-50);  border: 1.5px solid var(--orange-100);color: var(--orange-700); }

.svc-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--green-700);
  background: var(--green-100);
  border: 1px solid var(--green-100);
  padding: 3px 10px;
  border-radius: 100px;
}
.svc-title {
  font-size: 17px; font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
}
.svc-desc {
  font-size: 14px; color: var(--text-secondary);
  line-height: 1.6; flex: 1;
}
.svc-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700;
  color: var(--blue-600); text-decoration: none;
  margin-top: var(--sp-2);
  transition: gap var(--tr-fast), color var(--tr-fast);
}
.svc-link:hover { gap: 10px; color: var(--blue-700); }

/* ──────────────────────────────────────────────────────────────────────
   08 · NOTÍCIAS
────────────────────────────────────────────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 640px)  { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .news-card--featured {
    grid-column: span 2;
  }
  .news-card--featured .news-thumb { height: 280px; }
}

.news-card {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: all var(--tr-base);
}
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--blue-200); }

.news-thumb {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--blue-50);
  display: flex; align-items: center; justify-content: center;
}
.news-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}
.news-card:hover .news-img { transform: scale(1.05); }
.news-img-fallback {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-size: 56px; color: var(--gray-300);
}

/* Shimmer lazy */
.news-img:not([src]),
.news-img[src=""] {
  background: linear-gradient(90deg,var(--gray-200) 25%,var(--gray-100) 50%,var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.news-cat {
  position: absolute; top: 12px; right: 12px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 100px;
}
.news-cat--obras    { background: var(--blue-700);   color: var(--white); }
.news-cat--qualidade{ background: var(--green-600);   color: var(--white); }
.news-cat--social   { background: var(--orange-600);  color: var(--white); }
.news-cat--avisos   { background: var(--red-600);     color: var(--white); }

.news-date {
  position: absolute; bottom: 12px; left: 12px;
  font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,.55);
  color: var(--white);
  padding: 3px 10px;
  border-radius: 100px;
  backdrop-filter: blur(6px);
}

.news-body { padding: var(--sp-6) var(--sp-6) var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.news-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--gray-900); line-height: 1.35;
}
.news-title a { color: inherit; text-decoration: none; transition: color var(--tr-fast); }
.news-title a:hover { color: var(--blue-700); }
.news-resumo { font-size: 14px; color: var(--text-secondary); line-height: 1.6; flex: 1; }
.news-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 700; color: var(--blue-600);
  text-decoration: none; margin-top: var(--sp-2);
  transition: gap var(--tr-fast);
}
.news-link:hover { gap: 10px; }

/* ──────────────────────────────────────────────────────────────────────
   09 · COMUNICADOS
────────────────────────────────────────────────────────────────────── */
.comunicados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px)  { .comunicados-grid { grid-template-columns: repeat(2, 1fr); } }

.comunicado-card {
  border-radius: var(--border-radius-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: flex-start; gap: var(--sp-4);
  border: 1.5px solid;
  transition: all var(--tr-base);
}
.comunicado-card:hover { transform: translateX(4px); }

.comunicado-card--urgente {
  background: var(--red-50); border-color: #FECACA;
}
.comunicado-card--manutencao {
  background: var(--blue-50); border-color: var(--blue-200);
}
.comunicado-card--campanha {
  background: var(--green-50); border-color: var(--green-100);
}
.comunicado-card--aviso {
  background: var(--orange-50); border-color: var(--orange-100);
}

.com-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.comunicado-card--urgente    .com-icon { background: var(--red-100);     color: var(--red-600); }
.comunicado-card--manutencao .com-icon { background: var(--blue-100);    color: var(--blue-700); }
.comunicado-card--campanha   .com-icon { background: var(--green-100);   color: var(--green-700); }
.comunicado-card--aviso      .com-icon { background: var(--orange-100);  color: var(--orange-700); }

.com-body { flex: 1; }
.com-header {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-2); flex-wrap: wrap;
}
.com-tipo {
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 100px;
}
.com-tipo--urgente    { background: var(--red-100);    color: var(--red-600); }
.com-tipo--manutencao { background: var(--blue-100);   color: var(--blue-700); }
.com-tipo--campanha   { background: var(--green-100);  color: var(--green-700); }
.com-tipo--aviso      { background: var(--orange-100); color: var(--orange-700); }

.com-data  { font-size: 11.5px; color: var(--text-muted); }
.com-titulo {
  font-size: 15px; font-weight: 700;
  color: var(--gray-900); line-height: 1.35;
  margin-bottom: var(--sp-2);
}
.com-texto { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────────────
   10 · DIÁRIO OFICIAL
────────────────────────────────────────────────────────────────────── */
.diario-wrap {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.diario-list { display: flex; flex-direction: column; }

.diario-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border-color);
  transition: background var(--tr-fast);
}
.diario-item:last-child { border-bottom: none; }
.diario-item:hover { background: var(--gray-50); }

@media (min-width: 768px) {
  .diario-item {
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
}

.diario-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
}
.diario-tipo {
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 100px;
}
.diario-tipo--portaria   { background: var(--blue-50);   color: var(--blue-700); }
.diario-tipo--licitação  { background: var(--orange-50); color: var(--orange-700); }
.diario-tipo--resolução  { background: var(--green-50);  color: var(--green-700); }
.diario-tipo--contrato   { background: var(--gray-100);  color: var(--gray-700); }
.diario-tipo--decreto    { background: var(--red-50);    color: var(--red-600); }

.diario-data { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.diario-num  { font-size: 12px; color: var(--text-muted); }

.diario-titulo {
  font-size: 14.5px; font-weight: 600;
  color: var(--gray-800); line-height: 1.4;
}

.diario-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: 700;
  color: var(--white);
  background: var(--blue-700);
  padding: 8px 16px;
  border-radius: var(--border-radius-sm);
  text-decoration: none; white-space: nowrap;
  transition: all var(--tr-fast);
}
.diario-btn:hover { background: var(--blue-600); color: var(--white); }

/* ──────────────────────────────────────────────────────────────────────
   11 · QUALIDADE DA ÁGUA
────────────────────────────────────────────────────────────────────── */
.section-quality {
  background: var(--blue-800);
  padding: var(--sp-20) 0;
  position: relative; overflow: hidden;
}
.section-quality::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.quality-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  position: relative; z-index: 1;
  align-items: center;
}
@media (min-width: 1024px) {
  .quality-inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-20); }
}

.quality-desc { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: var(--sp-6); }

.quality-params { display: flex; flex-direction: column; gap: var(--sp-4); }
.qp-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--border-radius-md);
  padding: var(--sp-4) var(--sp-5);
}
.qp-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }
.qp-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.qp-value { font-size: 16px; font-weight: 800; color: var(--green-400); }
.qp-bar {
  width: 100%; height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px; overflow: hidden; margin-bottom: var(--sp-2);
}
.qp-fill {
  height: 100%; width: var(--w);
  background: linear-gradient(90deg, var(--blue-400), var(--green-400));
  border-radius: 3px;
  transition: width 1s var(--ease-out);
}
.qp-ref { font-size: 11.5px; color: rgba(255,255,255,.35); }

/* Visual badge de qualidade */
.quality-visual { display: flex; flex-direction: column; align-items: center; gap: var(--sp-10); }
.qv-badge-wrap {
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.qv-badge {
  position: relative; z-index: 2;
  width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green-600), var(--blue-600));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--white); text-align: center;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 0 48px rgba(5,150,105,.35);
}
.qv-badge i { font-size: 30px; margin-bottom: 5px; }

.qv-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(5,150,105,.25);
  animation: ringPulse 3s ease-in-out infinite;
}
.qv-ring-1 { inset: 8px;   animation-delay: 0s; }
.qv-ring-2 { inset: -16px; animation-delay: .7s; }
.qv-ring-3 { inset: -38px; animation-delay: 1.4s; }
@keyframes ringPulse {
  0%,100% { opacity: .6; transform: scale(1); }
  50%      { opacity: .15; transform: scale(1.02); }
}

.qv-stats { display: flex; gap: var(--sp-8); }
.qvs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.qvs-val  { font-size: 34px; font-weight: 800; color: var(--green-400); line-height: 1; }
.qvs-unit { font-size: 18px; color: var(--green-400); font-weight: 700; }
.qvs-label{ font-size: 11px; color: rgba(255,255,255,.4); }

/* ──────────────────────────────────────────────────────────────────────
   12 · TRANSPARÊNCIA
────────────────────────────────────────────────────────────────────── */
.transp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}
@media (min-width: 640px)  { .transp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .transp-grid { grid-template-columns: repeat(4, 1fr); } }

.transp-card {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-xl);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: all var(--tr-base);
}
.transp-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--blue-200);
}

.tc-icon-wrap {
  width: 50px; height: 50px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: transform var(--tr-base);
}
.transp-card:hover .tc-icon-wrap { transform: scale(1.08) rotate(-3deg); }

.tc-icon--blue   { background: var(--blue-50);   border: 1.5px solid var(--blue-200);  color: var(--blue-700); }
.tc-icon--green  { background: var(--green-50);   border: 1.5px solid var(--green-100); color: var(--green-600); }
.tc-icon--orange { background: var(--orange-50);  border: 1.5px solid var(--orange-100);color: var(--orange-700); }

.tc-titulo { font-size: 17px; font-weight: 700; color: var(--gray-900); }
.tc-desc   { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.tc-link   { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--blue-600); text-decoration: none; transition: gap var(--tr-fast); }
.tc-link:hover { gap: 10px; }

/* Estatísticas de transparência */
.transp-stats {
  background: var(--blue-800);
  border-radius: var(--border-radius-xl);
  padding: var(--sp-10) var(--sp-8);
  display: flex; flex-wrap: wrap;
  justify-content: space-around;
  gap: var(--sp-6);
}
.ts-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ts-val  { font-size: 40px; font-weight: 800; color: var(--green-400); line-height: 1; }
.ts-unit { font-size: 22px; color: var(--green-400); font-weight: 700; }
.ts-label{ font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
.ts-sep  { width: 1px; height: 60px; background: rgba(255,255,255,.1); align-self: center; }
@media (max-width: 640px) { .ts-sep { display: none; } }

/* ──────────────────────────────────────────────────────────────────────
   13 · OUVIDORIA
────────────────────────────────────────────────────────────────────── */
.ouvidoria-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 992px) { .ouvidoria-layout { grid-template-columns: 1fr 1.1fr; } }

.ouv-benefits {
  list-style: none; display: flex; flex-direction: column;
  gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-7);
}
.ouv-benefits li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 15px; color: var(--text-secondary); font-weight: 500;
}
.ouv-benefits li i { color: var(--blue-600); font-size: 18px; flex-shrink: 0; }

.ouv-canais { display: flex; flex-direction: column; gap: var(--sp-3); }
.canal-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--gray-50);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-md);
  text-decoration: none; color: var(--gray-900);
  transition: all var(--tr-fast);
}
.canal-item:hover { border-color: var(--blue-300); background: var(--blue-50); }
.canal-item i { font-size: 24px; color: var(--blue-600); flex-shrink: 0; }
.canal-item strong { display: block; font-size: 15px; font-weight: 700; color: var(--gray-900); }
.canal-item span   { font-size: 13px; color: var(--text-muted); }

/* Form wrapper */
.ouv-form-wrap {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-2xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
}
@media (min-width: 640px) { .ouv-form-wrap { padding: var(--sp-10); } }

/* Step indicator */
.step-indicator { display: flex; align-items: center; margin-bottom: var(--sp-8); }
.si-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; }
.si-num  {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gray-200); color: var(--text-muted);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tr-base);
}
.si-lbl  { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.si-step.active .si-num { background: var(--blue-700); color: var(--white); }
.si-step.active .si-lbl { color: var(--blue-700); font-weight: 700; }
.si-step.done   .si-num { background: var(--green-500); color: var(--white); }
.si-bar { flex: 1; height: 2px; background: var(--gray-200); margin: 0 var(--sp-2) 20px; transition: background var(--tr-base); }
.si-bar.done { background: var(--green-500); }

/* Inputs */
.form-panel { border: none; padding: 0; }
.form-label-custom {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--gray-700); margin-bottom: 6px;
}
.char-count-lbl { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.form-input-custom {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px; color: var(--gray-900);
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
  appearance: none; resize: vertical;
}
.form-input-custom::placeholder { color: var(--gray-400); }
.form-input-custom:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(26,107,196,.15);
}
.form-input-custom.is-invalid { border-color: var(--red-600); }
.form-input-custom.is-valid   { border-color: var(--green-500); }

.form-err { font-size: 12px; color: var(--red-600); margin-top: 4px; display: none; }
.form-err.show { display: block; }

.form-check-custom {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: 14px; color: var(--text-secondary); cursor: pointer;
}
.form-check-custom input[type="checkbox"] { margin-top: 3px; accent-color: var(--blue-700); flex-shrink: 0; }
.form-check-custom a { color: var(--blue-600); }

/* Botões do form */
.btn-form-next {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--blue-700); color: var(--white);
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  padding: 14px 24px;
  border-radius: var(--border-radius-md); border: none; cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: all var(--tr-base);
}
.btn-form-next:hover { background: var(--blue-600); transform: translateY(-1px); }

.btn-form-back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  padding: 14px 20px;
  border-radius: var(--border-radius-md);
  border: 1.5px solid var(--border-color);
  cursor: pointer;
  transition: all var(--tr-fast);
  flex-shrink: 0;
}
.btn-form-back:hover { border-color: var(--blue-400); color: var(--blue-700); }

.form-review {
  background: var(--gray-50); border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--sp-5) var(--sp-6);
  font-size: 14px; line-height: 1.8;
}
.form-review-row { display: flex; gap: var(--sp-3); }
.form-review-key { font-weight: 700; color: var(--text-secondary); min-width: 100px; flex-shrink: 0; }

.form-success {
  text-align: center; padding: var(--sp-12) var(--sp-6);
}
.form-success i { font-size: 56px; color: var(--green-500); display: block; margin-bottom: var(--sp-4); }
.form-success h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--gray-900); margin-bottom: var(--sp-3); }
.form-success p  { color: var(--text-secondary); }

/* ──────────────────────────────────────────────────────────────────────
   14 · APLICATIVO
────────────────────────────────────────────────────────────────────── */
.section-app {
  background: var(--blue-900);
  padding: var(--sp-20) 0;
  position: relative; overflow: hidden;
}
.section-app::before {
  content: '';
  position: absolute; top: -120px; right: -60px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(5,150,105,.1) 0%, transparent 70%);
  pointer-events: none;
}

.app-inner {
  display: flex; align-items: center;
  gap: var(--sp-16); flex-wrap: wrap;
  position: relative; z-index: 1;
}

/* Mockup do phone */
.app-phone-mock { flex-shrink: 0; }
.phone-frame {
  width: 120px; height: 220px;
  border-radius: 24px;
  border: 2px solid rgba(255,255,255,.15);
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xl);
  animation: float 4s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.phone-screen { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.phone-ico { font-size: 36px; color: var(--green-400); }
.phone-screen span { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); }

/* Conteúdo */
.app-content { flex: 1; min-width: 260px; }
.app-desc { font-size: 16px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: var(--sp-6); }

.store-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.store-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 20px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  transition: all var(--tr-fast);
}
.store-btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.store-btn i { font-size: 22px; color: rgba(255,255,255,.75); }
.store-sub  { display: block; font-size: 9.5px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em; }
.store-name { display: block; font-size: 14px; font-weight: 700; color: var(--white); }
.store-btn--wa { background: rgba(37,211,102,.12); border-color: rgba(37,211,102,.25); }
.store-btn--wa i { color: #4ADE80; }

.app-ratings { display: flex; align-items: center; gap: var(--sp-3); }
.rating-stars { color: var(--orange-400); font-size: 18px; }
.rating-text  { font-size: 14px; color: rgba(255,255,255,.5); }

/* ──────────────────────────────────────────────────────────────────────
   15 · CONTATO
────────────────────────────────────────────────────────────────────── */
.contato-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 900px) {
  .contato-layout { grid-template-columns: 1fr 1.4fr; }
}

.contato-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.contato-card {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xs);
  transition: all var(--tr-fast);
}
.contato-card:hover { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.contato-card i { font-size: 22px; color: var(--blue-600); flex-shrink: 0; margin-top: 2px; }
.contato-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.contato-card span, .contato-card a {
  display: block; font-size: 14px; color: var(--text-secondary);
  text-decoration: none;
}
.contato-card a:hover { color: var(--blue-700); }

.contato-mapa {
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  min-height: 340px;
  position: relative;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}
.mapa-overlay {
  position: absolute; bottom: var(--sp-4); left: var(--sp-4);
}
.mapa-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--white); color: var(--blue-700);
  font-size: 13px; font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: all var(--tr-fast);
}
.mapa-btn:hover { background: var(--blue-700); color: var(--white); }

/* ──────────────────────────────────────────────────────────────────────
   16 · RODAPÉ
────────────────────────────────────────────────────────────────────── */
/* Faixa de emergência */
.footer-emergency-bar {
  background: var(--red-600);
  padding: var(--sp-3) 0;
}
.febar-inner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3);
}
.febar-text {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 14px; color: rgba(255,255,255,.9); font-weight: 500;
}
.febar-text i { font-size: 18px; }
.febar-wa {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(255,255,255,.2); color: var(--white);
  font-size: 13px; font-weight: 700;
  padding: 7px 16px; border-radius: 100px;
  text-decoration: none;
  transition: background var(--tr-fast);
}
.febar-wa:hover { background: rgba(255,255,255,.35); color: var(--white); }

/* Corpo do footer */
.footer-body { background: var(--blue-900); padding: var(--sp-16) 0 var(--sp-10); }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } }

.footer-brand { display: flex; flex-direction: column; gap: var(--sp-5); }
.footer-brand .brand-mark { background: rgba(255,255,255,.1); box-shadow: none; }
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-sub  { color: rgba(255,255,255,.4); }

.footer-about {
  font-size: 14px; color: rgba(255,255,255,.5);
  line-height: 1.7;
}
.footer-social { display: flex; gap: var(--sp-2); }
.social-btn {
  width: 38px; height: 38px;
  border-radius: var(--border-radius-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; text-decoration: none;
  transition: all var(--tr-fast);
}
.social-btn:hover { background: rgba(255,255,255,.18); color: var(--white); border-color: rgba(255,255,255,.3); }

.footer-col-title {
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: var(--sp-4);
}
.footer-link {
  display: block; font-size: 14px;
  color: rgba(255,255,255,.55); text-decoration: none;
  margin-bottom: var(--sp-3);
  transition: color var(--tr-fast), padding-left var(--tr-fast);
}
.footer-link:hover { color: var(--white); padding-left: var(--sp-2); }

.footer-address { font-style: normal; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: 14px; color: rgba(255,255,255,.55);
}
.footer-contact-item i { color: var(--green-400); flex-shrink: 0; margin-top: 2px; }
.footer-contact-item a { color: rgba(255,255,255,.55); text-decoration: none; transition: color var(--tr-fast); }
.footer-contact-item a:hover { color: var(--white); }

/* Bottom bar */
.footer-bottom {
  background: var(--blue-950);
  padding: var(--sp-5) 0;
}
.footer-bottom-inner {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer-copy { font-size: 12.5px; color: rgba(255,255,255,.3); }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-bottom-link {
  font-size: 12.5px; color: rgba(255,255,255,.35);
  text-decoration: none; transition: color var(--tr-fast);
}
.footer-bottom-link:hover { color: rgba(255,255,255,.7); }

.footer-acc { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.acc-pill {
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.4);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 100px;
  cursor: pointer; transition: all var(--tr-fast);
  display: inline-flex; align-items: center; gap: 4px;
}
.acc-pill:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ──────────────────────────────────────────────────────────────────────
   17 · ELEMENTOS FLUTUANTES
────────────────────────────────────────────────────────────────────── */
.fab-whatsapp {
  position: fixed; bottom: 28px; right: 28px; z-index: 400;
  display: flex; align-items: center; gap: var(--sp-2);
  background: #25D366; color: var(--white);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700;
  padding: 13px 20px;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: all var(--tr-base);
  animation: fabFloat 3.5s ease-in-out infinite;
}
@keyframes fabFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.fab-whatsapp i { font-size: 22px; }
.fab-whatsapp:hover { background: #1DA851; color: var(--white); transform: scale(1.06) !important; animation: none; }
@media (max-width: 480px) {
  .fab-whatsapp { padding: 15px; border-radius: 50%; }
  .fab-label { display: none; }
}

.scroll-top-btn {
  position: fixed; bottom: 28px; left: 28px; z-index: 400;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue-700); color: var(--white);
  border: none; cursor: pointer; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--tr-base);
  opacity: 0; pointer-events: none;
}
.scroll-top-btn:not([hidden]) { opacity: 1; pointer-events: auto; }
.scroll-top-btn:hover { background: var(--blue-600); transform: translateY(-3px); }

/* Cookie consent */
.cookie-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--blue-950);
  border-top: 3px solid var(--green-500);
  animation: slideUp .3s var(--ease-out);
}
.cookie-consent[hidden] { display: none; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:none} }

.cookie-inner {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  max-width: 1400px; margin: 0 auto;
  justify-content: space-between;
}
.cookie-text strong {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 14px; color: var(--white); margin-bottom: 3px;
}
.cookie-text p { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; }
.cookie-text a { color: var(--green-400); }
.cookie-text { flex: 1; min-width: 220px; }
.cookie-actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }

.btn-cookie-reject, .btn-cookie-accept {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  padding: 10px 20px; border-radius: var(--border-radius-md);
  border: none; cursor: pointer; transition: all var(--tr-fast);
}
.btn-cookie-reject { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.btn-cookie-reject:hover { background: rgba(255,255,255,.2); }
.btn-cookie-accept { background: var(--green-500); color: var(--white); }
.btn-cookie-accept:hover { background: var(--green-600); }

/* ──────────────────────────────────────────────────────────────────────
   18 · ANIMAÇÕES SCROLL REVEAL
────────────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }