/* ============================================================
   APAS Itapetininga — Design System v4 ("Saúde")
   Verde da marca #008c3c · superfícies claras e arejadas
   Tipografia: Plus Jakarta Sans
   ============================================================ */

:root {
  /* Marca */
  --g:          #008c3c;
  --g-hover:    #00732f;
  --g-mid:      #19a855;
  --g-light:    #4cc77f;
  --g-dark:     #05502b;
  --g-deep:     #03311b;
  --g-pale:     #e8f6ee;
  --g-faint:    #f3faf6;
  --g-border:   rgba(0,140,60,0.16);
  --mint:       #d4f1e1;

  /* Apoio (usado com parcimônia) */
  --sky:        #0e7fc0;
  --sky-pale:   #e7f3fb;
  --sun:        #f2b705;
  --rose:       #e0475b;

  /* Superfícies */
  --bg:         #f4f7f5;
  --surface:    #ffffff;
  --surface2:   #f6f9f7;
  --surface3:   #edf2ef;
  --border:     #e2e9e5;
  --border-md:  #cbd7d0;

  /* Texto */
  --txt:        #0f2a1d;
  --txt2:       #4a6356;
  --txt3:       #7f998b;

  --footer-bg:  #03311b;

  --font:       'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(15,42,29,.04), 0 4px 14px rgba(15,42,29,.05);
  --shadow-md:  0 2px 6px rgba(15,42,29,.05), 0 14px 34px rgba(15,42,29,.08);
  --shadow-lg:  0 30px 70px -20px rgba(3,49,27,.28);
  --shadow-g:   0 10px 24px -8px rgba(0,140,60,.45);
  --transition: 0.2s cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--txt); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { letter-spacing: -0.02em; }
::selection { background: var(--mint); color: var(--g-deep); }
:focus-visible { outline: 3px solid rgba(0,140,60,.35); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.container   { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.text-center { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-48 { margin-top: 48px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.w-full { width: 100%; }
.p-0 { padding: 0 !important; }
.overflow-hidden { overflow: hidden; }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--g-pale); border: 1px solid var(--g-border);
  color: var(--g); font-size: 12px; font-weight: 700;
  letter-spacing: .2px;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.eyebrow-dot { width: 7px; height: 7px; background: var(--g); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,140,60,.18); animation: blink 2.4s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.45} }

.section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g); font-weight: 700; margin-bottom: 10px; }
.section-label::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--g); }
.section-title { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; color: var(--txt); letter-spacing: -1px; line-height: 1.12; }
.section-sub { font-size: 16px; color: var(--txt2); max-width: 560px; margin-top: 12px; line-height: 1.7; }
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }

.title-bar { width: 40px; height: 4px; background: var(--g); border-radius: 4px; margin: 10px 0 20px; }
.title-bar-center { margin: 10px auto 20px; }

.slogan-text {
  font-size: 15px; color: var(--txt2); font-style: italic;
  line-height: 1.6; border-left: 3px solid var(--g);
  padding-left: 14px; margin: 14px 0 20px;
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--g); color: #fff;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 700; border: none; line-height: 1.2;
  box-shadow: var(--shadow-g);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover { background: var(--g-hover); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(0,140,60,.55); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--g); padding: 13px 24px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  border: 1.5px solid var(--g-border); background: var(--surface);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-outline:hover { background: var(--g-pale); border-color: var(--g); transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--txt); padding: 13px 24px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600; line-height: 1.2;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn-ghost:hover { border-color: var(--g); color: var(--g); transform: translateY(-2px); }

.btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; color: var(--g-dark);
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 700; border: none; line-height: 1.2;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.4); }

.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(255,255,255,.1); color: #fff;
  padding: 13px 24px; border-radius: var(--radius-pill);
  font-size: 14.5px; font-weight: 600; line-height: 1.2;
  border: 1.5px solid rgba(255,255,255,.28);
  transition: background var(--transition), transform var(--transition);
}
.btn-glass:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 8px;
  background: #dc2626; color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; border: none;
  transition: background var(--transition);
}
.btn-danger:hover { background: #b91c1c; }

.btn-wpp-top {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 4px 14px; border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  transition: background .2s;
}
.btn-wpp-top:hover { background: rgba(255,255,255,.16); }
.btn-wpp-top i { font-size: 14px; color: #4ade80; }

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar { background: var(--g-deep); padding: 7px 0; color: rgba(255,255,255,.8); }
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 16px; }
.top-contacts { display: flex; align-items: center; }
.top-contact-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.78);
  text-decoration: none; padding: 0 14px; transition: color .2s;
}
.top-contact-item:first-child { padding-left: 0; }
.top-contact-item:hover { color: #fff; }
.top-contact-item i { font-size: 12px; color: var(--g-light); }
.top-sep { width: 1px; height: 12px; background: rgba(255,255,255,.18); flex-shrink: 0; }
.top-right { display: flex; align-items: center; gap: 14px; }
.top-ans { font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.6); letter-spacing: .3px; }
.top-ans strong { color: #fff; font-weight: 700; }
@media (max-width: 768px) { .top-bar { display: none; } }

/* HEADER — estilos completos em header.php */

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: transparent; border-bottom: none;
  padding: 0; font-size: 13px; position: relative; z-index: 3;
}
.breadcrumb-inner { display: flex; align-items: center; gap: 8px; color: var(--txt3); padding-top: 14px; padding-bottom: 14px; }
.breadcrumb-inner a { color: var(--g); font-weight: 600; }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-inner i { font-size: 10px; }
.breadcrumb-inner span { color: var(--txt2); font-weight: 500; }

/* ============================================================
   PAGE HERO / INST HERO (banners internos)
   ============================================================ */
.page-hero, .inst-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(76,199,127,.45), transparent 60%),
    radial-gradient(600px 400px at -5% 110%, rgba(0,140,60,.55), transparent 60%),
    linear-gradient(135deg, var(--g-deep) 0%, var(--g-dark) 45%, #007a35 100%);
  padding: 64px 0 96px;
  margin: 0 16px; border-radius: var(--radius-xl);
}
.page-hero::before, .inst-hero::before {
  content: ''; position: absolute; width: 520px; height: 520px; right: -140px; top: -180px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.02);
  background: none; height: 520px; left: auto;
  pointer-events: none;
}
.page-hero::after, .inst-hero::after {
  content: ''; position: absolute; left: 6%; bottom: -70px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero .eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #fff; }
.page-hero .eyebrow-dot { background: var(--g-light); box-shadow: 0 0 0 3px rgba(76,199,127,.25); }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; color: #fff; letter-spacing: -1.5px; margin: 16px 0 12px; line-height: 1.06; }
.page-hero p  { font-size: 16.5px; color: rgba(255,255,255,0.8); max-width: 560px; line-height: 1.7; }

/* ============================================================
   HOME HERO (legado — mantido para compatibilidade)
   ============================================================ */
.home-hero { background: var(--surface); padding: 56px 0 0; position: relative; overflow: hidden; }
.home-hero-stripe { display: none; }
.home-hero-inner { display: flex; gap: 40px; align-items: flex-end; }
.hero-text { flex: 1; padding-bottom: 56px; }
.hero-text h1 { font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -1.6px; color: var(--txt); margin: 18px 0 18px; }
.hero-text h1 em { font-style: normal; color: var(--g); }
.hero-text .hero-desc { font-size: 16px; color: var(--txt2); line-height: 1.7; margin-bottom: 32px; max-width: 520px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats { display: flex; flex-direction: column; gap: 10px; padding-bottom: 32px; flex-shrink: 0; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 22px; min-width: 150px; box-shadow: var(--shadow-sm); }
.stat-card .num { font-size: 26px; font-weight: 800; color: var(--g); line-height: 1; }
.stat-card .lbl { font-size: 11px; color: var(--txt3); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }

/* ============================================================
   QUICK BAR (acesso rápido)
   ============================================================ */
.quick-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.quick-item {
  background: var(--surface); padding: 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none; color: inherit;
}
.quick-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--g-border); }
.quick-item:hover .qi-title { color: var(--g); }
.qi-icon {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--g-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--g); flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.quick-item:hover .qi-icon { background: var(--g); color: #fff; }
.qi-title { font-size: 14.5px; font-weight: 700; color: var(--txt); transition: color var(--transition); line-height: 1.3; }
.qi-sub   { font-size: 12.5px; color: var(--txt3); margin-top: 2px; }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip { background: var(--g); padding: 28px 0; }
.stats-strip-inner { display: grid; grid-template-columns: repeat(4,1fr); }
.ss-item { text-align: center; padding: 0 20px; }
.ss-item + .ss-item { border-left: 1px solid rgba(255,255,255,0.15); }
.ss-num { font-size: 36px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -1px; }
.ss-lbl { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 6px; font-weight: 500; }

/* ============================================================
   NEWS / CARDS
   ============================================================ */
.news-section { padding: 88px 0; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }

.news-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer; height: 100%; overflow: hidden; word-break: break-word; overflow-wrap: break-word;
}
.news-card:hover { transform: translateY(-4px); border-color: var(--g-border); box-shadow: var(--shadow-md); }
.news-card.featured { border-color: var(--g-border); }
.news-cover { margin: -24px -24px 20px; overflow: hidden; aspect-ratio: 16/9; background: var(--g-pale); }
.news-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.news-card:hover .news-cover img { transform: scale(1.05); }

.news-tag {
  display: inline-flex; align-self: flex-start; background: var(--g-pale); color: var(--g);
  font-size: 11.5px; font-weight: 700;
  padding: 4px 11px; border-radius: var(--radius-pill); margin-bottom: 12px;
}
.news-card h3 { font-size: 17px; font-weight: 700; color: var(--txt); line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.featured h3 { font-size: 17px; }
.news-card p  { font-size: 14px; color: var(--txt2); line-height: 1.6; margin-bottom: 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta    { font-size: 12.5px; color: var(--txt3); display: flex; align-items: center; gap: 6px; margin-top: auto; }
.news-foot    { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.news-foot .news-meta { margin-top: 0; }
.link-read    { display: inline-flex; align-items: center; gap: 6px; color: var(--g); font-size: 13.5px; font-weight: 700; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); transition: gap var(--transition); }
.news-foot .link-read { margin: 0; padding: 0; border: none; }
.news-card:hover .link-read, .link-read:hover { gap: 10px; }
.see-all-link { font-size: 14px; color: var(--g); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--g-pale); transition: gap var(--transition), background var(--transition); }
.see-all-link:hover { gap: 12px; background: var(--mint); }

/* ============================================================
   CLEAN CARDS (internos)
   ============================================================ */
.clean-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 32px; box-shadow: var(--shadow-sm);
}
.clean-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-section { padding: 0 0 88px; }
.cta-strip {
  position: relative; overflow: hidden;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(76,199,127,.35), transparent 60%),
    linear-gradient(120deg, var(--g-deep), var(--g-dark) 60%, #00743a);
  border-radius: var(--radius-xl);
  padding: 52px 56px; display: flex;
  justify-content: space-between; align-items: center; gap: 28px;
  color: #fff;
}
.cta-strip::after { content: ''; position: absolute; right: -60px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 50px rgba(255,255,255,.03); pointer-events: none; }
.cta-strip > * { position: relative; z-index: 1; }
.cta-strip h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; color: #fff; letter-spacing: -1px; margin-bottom: 8px; line-height: 1.15; }
.cta-strip p  { font-size: 16px; color: rgba(255,255,255,.78); max-width: 520px; }
.cta-actions  { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.cta-strip .btn-primary { background: #fff; color: var(--g-dark); box-shadow: none; }
.cta-strip .btn-primary:hover { background: var(--g-pale); }
.cta-strip .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.cta-strip .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.5); }

/* ============================================================
   TABS (planos)
   ============================================================ */
.tabs-section { padding: 0 0 72px; margin-top: -44px; position: relative; z-index: 5; }
.tab-menu {
  display: flex; gap: 6px; margin-bottom: 28px; flex-wrap: wrap;
  background: var(--surface); padding: 8px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); box-shadow: var(--shadow-md); width: fit-content; max-width: 100%;
}
.tab-btn {
  background: none; border: none; color: var(--txt2);
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  cursor: pointer; position: relative; display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill);
  transition: color var(--transition), background var(--transition);
}
.tab-btn i { font-size: 15px; }
.tab-btn:hover { color: var(--txt); background: var(--surface3); }
.tab-btn.active { color: #fff; background: var(--g); box-shadow: var(--shadow-g); }
.tab-btn.active::after { display: none; }
.tab-content { display: none; animation: fadeUp .35s; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   TABELAS
   ============================================================ */
.rules-table { width: 100%; border-collapse: collapse; }
.rules-table td { padding: 13px 10px; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--txt2); }
.rules-table tr:last-child td { border-bottom: none; }
.td-days { font-weight: 700; color: var(--g); width: 95px; }
.td-perc { font-weight: 800; color: var(--g); width: 60px; font-size: 15px; }
.td-perc.red { color: #dc2626; }
.td-perc.zero { color: var(--g); }
.row-highlight td { background: var(--g-faint); }

.price-table { width: 100%; border-collapse: collapse; }
.price-table th { text-align: left; padding: 10px; color: var(--txt3); border-bottom: 2px solid var(--border); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.price-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--txt2); }
.price-table td:nth-child(2) { text-align: right; font-weight: 700; color: var(--txt); }
.price-table tr.highlight td { background: var(--g-faint); }
.price-table tr:last-child td { border-bottom: none; }

/* ============================================================
   SIMULADOR
   ============================================================ */
.sim-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; background: var(--surface2); padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.sim-tag { font-weight: 700; font-size: 13px; color: var(--txt); width: 100px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.sim-tag.dep { color: var(--txt2); font-weight: 500; }
.sim-tag i { color: var(--g); font-size: 14px; }
.sim-sel { flex: 1; padding: 9px 12px; border: 1px solid var(--border-md); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--txt); background: var(--surface); outline: none; }
.sim-sel:focus { border-color: var(--g); box-shadow: 0 0 0 4px rgba(0,140,60,.12); }
.btn-rem { background: #fee2e2; color: #dc2626; border: none; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.btn-add { width: 100%; background: none; border: 1.5px dashed var(--border-md); color: var(--txt2); padding: 12px; border-radius: var(--radius-md); font-weight: 600; font-size: 13.5px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--transition); }
.btn-add:hover { border-color: var(--g); color: var(--g); background: var(--g-faint); }
.resume-box { background: var(--g-faint); border: 1px solid var(--g-border); border-radius: var(--radius-md); padding: 20px; margin-top: 18px; }
.res-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--txt2); }
.res-total { border-top: 1px solid var(--g-border); margin-top: 8px; padding-top: 12px; font-size: 17px; font-weight: 800; color: var(--txt); }
.res-total strong { color: var(--g); }

/* ============================================================
   ALERTAS
   ============================================================ */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; }
.alert-info    { background: var(--g-faint); border: 1px solid var(--g-border); color: var(--txt2); }
.alert-info i  { color: var(--g); margin-top: 3px; }
.alert-warn    { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.alert-warn i  { color: #d97706; margin-top: 3px; }
.alert-success { background: var(--g-faint); border: 1px solid var(--g-border); color: var(--txt); }
.alert-success i { color: var(--g); font-size: 20px; margin-top: 1px; }
.alert-error   { background: #fff5f5; border: 1px solid #fecaca; color: #7f1d1d; }
.alert-error i { color: #dc2626; font-size: 20px; margin-top: 1px; }
.alert-limit   { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--g); padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--txt); }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.city-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.city-pill { background: var(--surface2); border: 1px solid var(--border); color: var(--txt2); padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; }
.city-pill.hl { background: var(--g); color: #fff; border-color: var(--g); font-weight: 700; }

/* ============================================================
   FEATURE LIST / DOC LIST
   ============================================================ */
.feature-list { list-style: none; }
.feature-list li { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--txt2); display: flex; align-items: center; gap: 10px; }
.feature-list li:last-child { border-bottom: none; }
.feature-list li i { color: var(--g); background: var(--g-pale); width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }

.doc-list { list-style: none; }
.doc-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--txt2); border-bottom: 1px solid var(--border); }
.doc-list li:last-child { border-bottom: none; }
.doc-list li i { color: var(--g); margin-top: 3px; flex-shrink: 0; }

/* ============================================================
   PORTAIS (serviços)
   ============================================================ */
.portal-section { padding: 0 0 72px; }
.portal-section-top { margin-top: -52px; position: relative; z-index: 10; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px;
  display: flex; gap: 20px; align-items: flex-start;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.portal-card:hover { box-shadow: var(--shadow-lg); border-color: var(--g-border); transform: translateY(-3px); }
.portal-card.dark { background: linear-gradient(135deg, var(--g-deep), var(--g-dark)); border-color: transparent; }
.pi-box { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 23px; flex-shrink: 0; }
.pi-green { background: var(--g); color: #fff; box-shadow: var(--shadow-g); }
.pi-gray  { background: var(--g-pale); color: var(--g); }
.pi-white { background: rgba(255,255,255,0.12); color: #fff; }
.pc-title { font-size: 18px; font-weight: 800; color: var(--txt); margin-bottom: 8px; }
.portal-card.dark .pc-title { color: #fff; }
.pc-desc  { font-size: 14px; color: var(--txt2); line-height: 1.6; margin-bottom: 20px; }
.portal-card.dark .pc-desc { color: rgba(255,255,255,0.7); }
.pc-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-actions .btn-primary, .pc-actions .btn-ghost { padding: 11px 20px; font-size: 13.5px; }
.portal-card.dark .btn-primary { background: #fff !important; color: var(--g-dark); box-shadow: none; }
.badge-new {
  position: absolute; top: 18px; right: 18px;
  background: var(--sun); color: #3d2e00; font-size: 11px; font-weight: 800;
  padding: 4px 12px; border-radius: var(--radius-pill);
  transform: none; letter-spacing: .3px;
}
.link-muted { font-size: 13px; color: var(--txt3); text-decoration: underline; text-underline-offset: 3px; }
.link-muted:hover { color: var(--g); }

/* ============================================================
   CONTATO
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; padding: 56px 0; }
.form-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface2); }
.f-tab-btn { flex: 1; background: none; border: none; padding: 16px; font-size: 14px; font-weight: 600; color: var(--txt3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; transition: all var(--transition); }
.f-tab-btn:hover { color: var(--txt2); background: var(--surface); }
.f-tab-btn.active { color: var(--g); background: var(--surface); box-shadow: inset 0 -2px 0 var(--g); }
.form-body { padding: 30px 32px; }
.input-group { margin-bottom: 16px; }
.input-row { display: flex; gap: 14px; }
.input-row .input-group { flex: 1; }
.form-field { width: 100%; padding: 13px 15px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 14.5px; color: var(--txt); background: var(--surface2); outline: none; font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.form-field:focus { border-color: var(--g); background: var(--surface); box-shadow: 0 0 0 4px rgba(0,140,60,.1); }

.urgency-card { background: var(--surface); border: 1px solid #fecaca; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.urgency-head { background: linear-gradient(120deg, #c81e3a, #e0475b); color: #fff; padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.urgency-head i { font-size: 22px; animation: pulse-icon 1.5s infinite; }
@keyframes pulse-icon { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
.urgency-head h3 { font-size: 16px; font-weight: 800; }
.urgency-body { padding: 22px; }
.phone-block { background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--txt3); border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; text-decoration: none; display: block; transition: border-color var(--transition); }
.phone-block:hover { border-left-color: var(--g); }
.phone-block.red { border-left-color: #dc2626; background: #fff5f5; }
.phone-block span { font-size: 12px; color: var(--txt3); display: block; margin-bottom: 4px; }
.phone-block strong { font-size: 16px; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.phone-block.red strong { color: #dc2626; }
.urgency-rules { border-top: 1px dashed #fecaca; padding-top: 14px; margin-top: 4px; }
.urgency-rules p { font-size: 13px; color: var(--txt2); margin-bottom: 8px; display: flex; gap: 8px; }
.urgency-rules i { color: #dc2626; margin-top: 2px; flex-shrink: 0; }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin-top: 16px; }
.map-wrap iframe { display: block; }

/* Quick contact cards */
.contact-quick-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; background: none; }
.cq-card { background: var(--surface); padding: 28px 22px; text-align: center; text-decoration: none; color: inherit; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition); }
.cq-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cq-icon { width: 54px; height: 54px; border-radius: 18px; background: var(--g-pale); display: flex; align-items: center; justify-content: center; font-size: 21px; color: var(--g); margin: 0 auto 14px; transition: all var(--transition); }
.cq-card:hover .cq-icon { background: var(--g); color: #fff; }
.cq-title { font-size: 15px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.cq-val   { font-size: 14px; color: var(--txt2); font-weight: 600; margin-bottom: 2px; }
.cq-sub   { font-size: 12.5px; color: var(--txt3); }

/* ============================================================
   INSTITUCIONAL
   ============================================================ */
.history-section { padding: 72px 0; }
.history-text p { font-size: 15.5px; color: var(--txt2); line-height: 1.85; margin-bottom: 18px; }
.legal-box { background: var(--g-faint); border: 1px solid var(--g-border); border-radius: var(--radius-lg); padding: 22px 26px; margin-top: 32px; }
.legal-box ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legal-box li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--txt); }
.legal-box li i { color: var(--g); font-size: 16px; width: 20px; flex-shrink: 0; }

.mvv-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
.mvv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.mvv-card { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 36px 28px; text-align: center; transition: transform var(--transition), box-shadow var(--transition); }
.mvv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mvv-icon { width: 68px; height: 68px; border-radius: 22px; background: var(--g); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 20px; box-shadow: var(--shadow-g); }
.mvv-card h3 { font-size: 18px; font-weight: 800; color: var(--txt); margin-bottom: 12px; }
.mvv-card p  { font-size: 14px; color: var(--txt2); line-height: 1.7; }
.values-list { list-style: none; text-align: left; margin-top: 12px; }
.values-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 14px; color: var(--txt2); border-bottom: 1px solid var(--border); }
.values-list li:last-child { border-bottom: none; }
.values-list li i { color: var(--g); font-size: 14px; }

.board-section { padding: 72px 0; }
.board-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.board-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 18px; text-align: center; width: 210px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.board-card:hover { border-color: var(--g-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.board-avatar { width: 60px; height: 60px; background: var(--g-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--g); margin: 0 auto 12px; }
.board-card h4 { font-size: 14px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }
.board-card span { font-size: 12px; color: var(--g); font-weight: 600; }

/* ============================================================
   NOTÍCIA INDIVIDUAL
   ============================================================ */
.noticia-wrap { max-width: 780px; margin: 0 auto; padding: 56px 24px; }
.noticia-wrap h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; color: var(--txt); letter-spacing: -1px; line-height: 1.15; margin-bottom: 14px; }
.noticia-meta-bar { display: flex; align-items: center; gap: 8px; color: var(--txt3); font-size: 13.5px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.noticia-meta-bar i { color: var(--g); }
.noticia-body { font-size: 16.5px; color: var(--txt2); line-height: 1.85; }
.noticia-body p { margin-bottom: 18px; }

/* ============================================================
   HELP BOX
   ============================================================ */
.help-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 32px; display: flex; gap: 22px; align-items: flex-start; box-shadow: var(--shadow-sm); }
.help-box-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--g-pale); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--g); flex-shrink: 0; }
.help-box h3 { font-size: 18px; font-weight: 800; color: var(--txt); margin-bottom: 8px; }
.help-box p  { font-size: 14.5px; color: var(--txt2); line-height: 1.65; }
.help-contacts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.help-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--txt2); background: var(--surface2); padding: 8px 16px; border-radius: var(--radius-pill); border: 1px solid var(--border); }
.help-chip i { color: var(--g); }

/* ============================================================
   RODAPÉ (base — estilos completos em footer.php)
   ============================================================ */
footer { background: var(--footer-bg); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--g-light); font-weight: 700; margin-bottom: 16px; }

/* ============================================================
   WHATSAPP FLUTUANTE + VOLTAR AO TOPO
   ============================================================ */
.wpp-float {
  position: fixed; bottom: 24px; right: 22px; z-index: 900;
  background: #25d366; color: #fff;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; text-decoration: none;
  box-shadow: 0 10px 26px -6px rgba(37,211,102,.6);
  transition: transform var(--transition);
}
.wpp-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wppRing 2.4s infinite; }
@keyframes wppRing { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }
.wpp-float:hover { transform: scale(1.08); }
.wpp-float .wpp-tip {
  position: absolute; right: 68px;
  background: var(--txt); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-pill); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.wpp-float:hover .wpp-tip { opacity: 1; }

.back-top {
  position: fixed; bottom: 96px; right: 28px; z-index: 900;
  background: var(--surface); color: var(--txt); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--border); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.back-top.show { opacity: 1; pointer-events: auto; }
.back-top:hover { background: var(--g); color: #fff; border-color: var(--g); }

/* ============================================================
   CARD TYPOGRAPHY UTILITIES (standardized)
   ============================================================ */
.card-title { font-size: 18px; font-weight: 800; color: var(--txt); margin-bottom: 14px; display: flex; align-items: center; }
.card-desc  { font-size: 14.5px; color: var(--txt2); line-height: 1.65; margin-bottom: 16px; }
.card-hint  { font-size: 13px; color: var(--txt3); margin-bottom: 16px; line-height: 1.55; }

/* ============================================================
   HERO PADRÃO (institucional / planos / serviços)
   ============================================================ */
.inst-hero { text-align: center; }
.inst-hero-bg, .inst-hero-dots { display: none; }
.inst-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.inst-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 22px; backdrop-filter: blur(4px); }
.inst-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-light); box-shadow: 0 0 0 3px rgba(76,199,127,.25); animation: inst-pulse 2s infinite; flex-shrink: 0; }
@keyframes inst-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:.7} }
.inst-hero-h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; color: #fff; letter-spacing: -2px; line-height: 1.05; margin: 0 0 18px; }
.inst-hero-em { position: relative; display: inline-block; color: #8ee6b2; }
.inst-hero-em::after { display: none; }
.inst-hero-sub { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 600px; margin: 0 auto 32px; text-align: center; }
.inst-hero-chips { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.inst-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }
.inst-chip i { font-size: 14px; color: #8ee6b2; }

/* ============================================================
   APP APAS — Serviços Online / Home
   ============================================================ */
/* ── Seção do aplicativo ── */
.appx { padding: 88px 0; background: var(--surface); }
.appx-card { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  padding: 64px 64px 56px; border-radius: 36px; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, #f3faf6 0%, #e6f5ec 55%, #d9f0e3 100%); border: 1px solid #d6ebdf; }
.appx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.appx-bg span { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.appx-bg span:first-child { width: 620px; height: 620px; right: -160px; top: -180px; border: 70px solid rgba(0,140,60,.06); }
.appx-bg span:last-child { width: 300px; height: 300px; left: -120px; bottom: -150px; background: radial-gradient(circle, rgba(0,140,60,.09), transparent 70%); }
.appx-text h2 { font-size: clamp(30px, 3.5vw, 44px); font-weight: 800; color: var(--g-deep); letter-spacing: -1.2px; line-height: 1.08; margin: 18px 0 16px; }
.appx-hl { display: block; background: linear-gradient(90deg, var(--g) 0%, #2fb468 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.appx-desc { font-size: 16.5px; color: var(--txt2); line-height: 1.7; max-width: 500px; margin-bottom: 28px; }
.appx-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 30px; padding: 0; }
.appx-feat { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid transparent;
  background: rgba(255,255,255,.55); text-align: left; cursor: pointer; font: inherit; color: var(--txt); transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.appx-feat:hover, .appx-feat.on { background: #fff; border-color: #cfe7d9; box-shadow: 0 10px 24px -14px rgba(3,49,27,.35); transform: translateY(-2px); }
.appx-feat i { width: 40px; height: 40px; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: linear-gradient(145deg, var(--g) 0%, #12a352 100%); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,140,60,.6); }
.appx-feat span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.appx-feat strong { font-size: 14px; font-weight: 700; }
.appx-feat small { font-size: 12px; color: var(--txt3); margin-top: 1px; }
.appx-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.appx-store { display: inline-flex; align-items: center; gap: 11px; min-width: 172px; padding: 11px 20px 11px 16px; border-radius: 15px; text-decoration: none;
  background: var(--g-deep); color: #fff; box-shadow: 0 12px 26px -14px rgba(3,49,27,.8); transition: transform .25s, background .25s, box-shadow .25s; }
.appx-store:hover { background: var(--g); transform: translateY(-3px); box-shadow: 0 18px 30px -14px rgba(0,140,60,.7); }
.appx-store i { font-size: 26px; width: 28px; text-align: center; }
.appx-store span { display: flex; flex-direction: column; line-height: 1.15; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
.appx-store small { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: .2px; }
.appx-note { margin-top: 16px; font-size: 13px; color: var(--txt3); display: flex; align-items: center; gap: 8px; }
.appx-note i { color: var(--g); }

.appx-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; perspective: 1200px; }
.appx-glow { position: absolute; left: 50%; top: 44%; width: 440px; height: 440px; transform: translate(-50%,-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(0,140,60,.28) 0%, rgba(0,140,60,.08) 45%, transparent 70%); filter: blur(10px); pointer-events: none; }
.appx-phone { position: relative; z-index: 1; width: 286px; padding: 12px; border-radius: 54px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.3,1);
  background: linear-gradient(150deg, #3b423e 0%, #1a1e1c 35%, #0b0d0c 70%, #2a302c 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 5px #0a0c0b, 0 2px 0 1px rgba(255,255,255,.05),
              0 50px 80px -30px rgba(3,49,27,.55), 0 30px 40px -25px rgba(0,0,0,.45); animation: appxFlutua 7s ease-in-out infinite; }
.appx-btn { position: absolute; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #121513, #3a403c); }
.appx-btn-a { left: -3px; top: 112px; height: 30px; }
.appx-btn-b { left: -3px; top: 160px; height: 54px; }
.appx-btn-c { right: -3px; top: 150px; height: 80px; background: linear-gradient(270deg, #121513, #3a403c); }
.appx-screen { position: relative; aspect-ratio: 758 / 1600; border-radius: 43px; overflow: hidden; background: #f2f4f3; }
.appx-island { position: absolute; top: 9px; left: 50%; width: 82px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #000; z-index: 4;
  box-shadow: inset -12px 0 0 -8px #1b2a3a; }
.appx-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.03);
  opacity: 0; transform-origin: top center; transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.appx-shot.on { opacity: 1; transform: scale(1.015); }
.appx-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.06) 100%); }

.appx-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 11px 16px 11px 11px; border-radius: 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 18px 40px -18px rgba(3,49,27,.45); white-space: nowrap; }
.appx-float span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.appx-float strong { font-size: 13px; font-weight: 700; color: var(--g-deep); }
.appx-float small { font-size: 11.5px; color: var(--txt3); }
.appx-f-ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: var(--g-pale); color: var(--g); }
.appx-f-ico.ok { background: var(--g); color: #fff; }
.appx-f1 { top: 14%; right: calc(50% + 104px); animation: appxFlutua 6s ease-in-out infinite -2s; }
.appx-f2 { top: 60%; left: calc(50% + 104px); animation: appxFlutua 6.5s ease-in-out infinite -4s; }
@keyframes appxFlutua { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

.appx-tabs { position: relative; z-index: 1; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.75);
  border: 1px solid #d3e9dc; box-shadow: 0 10px 24px -16px rgba(3,49,27,.4); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.appx-tabs::-webkit-scrollbar { display: none; }
.appx-tab { position: relative; overflow: hidden; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 0; border-radius: 999px;
  background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--txt2); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.appx-tab i { font-size: 12.5px; }
.appx-tab:hover { color: var(--g); }
.appx-tab.on { background: var(--g); color: #fff; box-shadow: 0 6px 14px -6px rgba(0,140,60,.7); }
.appx-tab em { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255,255,255,.55); }
.appx-tab.run em { animation: appxProg var(--appx-dur, 4000ms) linear forwards; }
@keyframes appxProg { to { width: 100%; } }

@media (max-width: 1100px) { .appx-card { padding: 52px 36px 48px; gap: 24px; } .appx-float small { display: none; } }
@media (max-width: 960px) {
  .appx { padding: 64px 0; }
  .appx-card { grid-template-columns: 1fr; padding: 48px 32px 40px; gap: 40px; }
  .appx-stage { order: -1; }
  .appx-desc { max-width: 100%; }
}
@media (max-width: 620px) {
  .appx { padding: 40px 0; }
  .appx-card { padding: 36px 18px 28px; border-radius: 28px; }
  .appx-phone { width: 236px; padding: 10px; border-radius: 46px; }
  .appx-screen { border-radius: 37px; }
  .appx-island { width: 68px; height: 20px; top: 8px; }
  .appx-float { padding: 8px 12px 8px 8px; border-radius: 14px; gap: 8px; }
  .appx-float small { display: none; }
  .appx-f-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .appx-float { display: none; }
  .appx-feats { grid-template-columns: 1fr; }
  .appx-tab span { display: none; } .appx-tab.on span { display: inline; }
  .appx-stores { flex-direction: column; } .appx-store { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .appx-phone, .appx-float { animation: none; } .appx-shot { transition: opacity .2s; } }

/* ============================================================
   MEDIDOR IDSS
   ============================================================ */
.idss-score-block { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); padding:40px 40px 34px; text-align:center; margin-bottom:40px; box-shadow:var(--shadow-sm); }
.idss-score-label { font-size:18px; font-weight:800; color:var(--g); margin-bottom:24px; letter-spacing:-.2px; }
.idss-score-label span { color:var(--txt2); font-weight:600; }
.idss-meter-wrap { display:inline-block; width:100%; max-width:440px; }
.idss-meter-scale { display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--txt2); margin-bottom:4px; padding:0 2px; }
.idss-meter-bar { position:relative; height:22px; border-radius:11px; overflow:visible; background:linear-gradient(to right,#d32f2f 0%,#e53935 10%,#f44336 18%,#ff7043 26%,#ff9800 34%,#ffc107 44%,#d4e157 56%,#8bc34a 68%,#4caf50 80%,#2e7d32 100%); box-shadow:inset 0 2px 4px rgba(0,0,0,.15); }
.idss-meter-marker { position:absolute; top:-6px; transform:translateX(-50%); }
.idss-marker-arrow { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:14px solid #333; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.idss-meter-value { font-size:24px; font-weight:800; color:var(--txt); margin-top:10px; letter-spacing:-.5px; }
.idss-dims-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.4px; color:var(--txt3); margin:32px 0 16px; text-align:left; }
.idss-dims-grid { display:flex; flex-direction:column; gap:12px; }
.idss-dim-card { display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 22px; }
.idss-dim-header { display:flex; align-items:flex-start; gap:14px; flex:1; min-width:200px; }
.idss-dim-num { display:none; }
.idss-dim-name { font-size:14px; font-weight:700; color:var(--txt); margin-bottom:4px; }
.idss-dim-desc { font-size:13px; color:var(--txt2); line-height:1.55; }
.idss-mini-meter-wrap { width:220px; flex-shrink:0; text-align:right; }
.idss-mini-scale { display:flex; justify-content:space-between; font-size:11px; font-weight:700; color:var(--txt2); margin-bottom:3px; padding:0 2px; text-align:left; }
.idss-mini-bar { position:relative; height:16px; border-radius:8px; overflow:visible; background:linear-gradient(to right,#d32f2f 0%,#e53935 10%,#f44336 18%,#ff7043 26%,#ff9800 34%,#ffc107 44%,#d4e157 56%,#8bc34a 68%,#4caf50 80%,#2e7d32 100%); box-shadow:inset 0 2px 3px rgba(0,0,0,.15); }
.idss-mini-marker { position:absolute; top:-5px; transform:translateX(-50%); }
.idss-mini-value { font-size:15px; font-weight:800; color:var(--txt); margin-top:6px; text-align:center; }
@media (max-width:640px) { .idss-dim-card{flex-direction:column;align-items:flex-start} .idss-mini-meter-wrap{width:100%} }

/* ============================================================
   ANIMAÇÃO DE ENTRADA (scroll reveal)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 960px) {
  .home-hero-inner { flex-direction: column; align-items: flex-start; padding-bottom: 40px; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; width: 100%; padding-bottom: 0; }
  .stat-card { flex: 1; min-width: 120px; }
  .clean-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .mvv-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip-inner { grid-template-columns: repeat(2,1fr); gap: 1px; }
  .tab-menu { border-radius: var(--radius-lg); width: 100%; }
  .tab-btn { flex: 1 1 auto; justify-content: center; }
}


@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .hero-text h1 { font-size: 32px; letter-spacing: -1px; }
  .hero-text .hero-desc { font-size: 15px; }
  .page-hero, .inst-hero { margin: 0 10px; border-radius: 22px; padding: 44px 0 76px; }
  .quick-bar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-quick-grid { grid-template-columns: 1fr; }
  .cta-strip { flex-direction: column; align-items: flex-start; padding: 36px 26px; border-radius: 24px; }
  .cta-actions { width: 100%; }
  .cta-actions a { flex: 1 1 auto; }
  .form-body { padding: 22px; }
  .input-row { flex-direction: column; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .news-section { padding: 60px 0; }

  .help-box { flex-direction: column; padding: 24px; }
  .help-contacts { flex-direction: column; align-items: stretch; }

  .wpp-float { bottom: 16px; right: 14px; width: 54px; height: 54px; font-size: 25px; }
  .back-top  { bottom: 82px; right: 19px; }
  .wpp-float .wpp-tip { display: none; }

  .board-card { width: calc(50% - 9px); }
  .portal-card { padding: 24px; flex-direction: column; gap: 16px; }
  .clean-card { padding: 24px 22px; }
  .inst-hero-chips { flex-direction: column; align-items: center; }
  .inst-chip { width: 100%; max-width: 320px; justify-content: center; }
  .tab-menu { border-radius: 20px; }
  .tab-btn { padding: 11px 14px; font-size: 13.5px; width: 100%; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .hero-text h1 { font-size: 29px; }
  .stat-card { min-width: calc(50% - 5px); }
  .stats-strip-inner { grid-template-columns: 1fr 1fr; }
  .board-card { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-actions a { justify-content: center; }
  .quick-bar { grid-template-columns: 1fr; }
}

/* ============================================================
   MODO NOTURNO
   ============================================================ */
body.dark-mode {
  --bg: #07130d; --surface: #0e1f16; --surface2: #132a1e; --surface3: #183325;
  --border: #1f3a2b; --border-md: #2a4d3a;
  --txt: #ecf5ef; --txt2: #a3bcae; --txt3: #6f8c7c;
  --g-pale: rgba(76,199,127,.12); --g-faint: rgba(76,199,127,.06); --g-border: rgba(76,199,127,.25);
  --mint: rgba(76,199,127,.18);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 12px 30px rgba(0,0,0,.35);
  background-color: var(--bg); color-scheme: dark;
}
body.dark-mode header { background: rgba(14,31,22,.88); }
body.dark-mode .eyebrow, body.dark-mode .section-label, body.dark-mode .see-all-link,
body.dark-mode .news-tag, body.dark-mode .link-read, body.dark-mode .qi-icon { color: var(--g-light); }
body.dark-mode .btn-outline { background: transparent; color: var(--g-light); }
body.dark-mode .breadcrumb-inner a { color: var(--g-light); }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 { color: var(--txt); }
body.dark-mode p { color: var(--txt2); }
body.dark-mode .page-hero h1, body.dark-mode .inst-hero-h1, body.dark-mode .cta-strip h2 { color: #fff; }
body.dark-mode .page-hero p, body.dark-mode .inst-hero-sub, body.dark-mode .cta-strip p { color: rgba(255,255,255,.75); }
body.dark-mode .cta-strip .btn-primary { color: var(--g-deep); }
body.dark-mode .form-field, body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--surface2) !important; border-color: var(--border-md) !important; color: var(--txt) !important; }
body.dark-mode label { color: var(--txt2) !important; }
body.dark-mode .clean-card, body.dark-mode .news-card, body.dark-mode .card, body.dark-mode .card-admin, body.dark-mode .cfg-card,
body.dark-mode .an-form-card, body.dark-mode .an-list-card, body.dark-mode .form-card, body.dark-mode .contact-form,
body.dark-mode .wizard-card, body.dark-mode .pp-content, body.dark-mode .pp-dpo-section, body.dark-mode .pp-nav { background: var(--surface) !important; border-color: var(--border) !important; }
body.dark-mode .an-table th { background: var(--surface3) !important; color: var(--txt2) !important; border-color: var(--border) !important; }
body.dark-mode .an-table td { border-color: var(--border) !important; color: var(--txt) !important; }
body.dark-mode .an-table tr:hover td { background: var(--surface3) !important; }
body.dark-mode .msg-block, body.dark-mode .dpo-aviso { background: var(--surface3) !important; border-color: var(--border) !important; color: var(--txt2) !important; }
body.dark-mode .pp-nav-list a { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--txt2) !important; }
body.dark-mode .pp-dpo-info, body.dark-mode .dpo-info-row { border-color: var(--border) !important; }
body.dark-mode .step-option { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--txt) !important; }
body.dark-mode .step-option.selected { border-color: var(--g) !important; background: rgba(0,140,60,.15) !important; }
body.dark-mode .phone-block.red { background: rgba(220,38,38,.08); }
body.dark-mode .alert-warn { background: rgba(242,183,5,.08); border-color: rgba(242,183,5,.3); color: #f5d77a; }
body.dark-mode .store-btn { background: #ecf5ef; color: var(--g-deep); }
body.dark-mode .store-btn span small { color: rgba(3,49,27,.6); }
body.dark-mode .appx-card { background: linear-gradient(135deg, #10251a 0%, #0c1f15 100%); border-color: rgba(255,255,255,.08); }
body.dark-mode .appx-text h2 { color: #fff; }
body.dark-mode .appx-feat { background: rgba(255,255,255,.04); color: #e6f2ea; }
body.dark-mode .appx-feat:hover, body.dark-mode .appx-feat.on { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
body.dark-mode .appx-store { background: #ecf5ef; color: var(--g-deep); } body.dark-mode .appx-store small { color: rgba(3,49,27,.6); }
body.dark-mode .appx-float, body.dark-mode .appx-tabs { background: rgba(16,37,26,.9); border-color: rgba(255,255,255,.1); }
body.dark-mode .appx-float strong { color: #fff; } body.dark-mode .appx-tab { color: #b9d3c4; }
body.dark-mode .tab-btn.active { color: #fff; }