/* Cleber DF Águas Claras · 55888 — site de campanha */

:root {
  --navy-950: #051336;
  --navy-900: #081f52;
  --navy-800: #0b2a6b;
  --navy-700: #12398a;
  --blue-600: #1b4fc2;
  --blue-500: #2f6be8;
  --blue-100: #e8efff;
  --blue-50: #f3f6fd;
  --gold-300: #ffd866;
  --gold-400: #ffc72c;
  --gold-500: #f5b100;
  --gold-700: #8a5a00;
  --ink-900: #0b1736;
  --ink-700: #34425f;
  --ink-500: #5d6a86;
  --line: #dde4f0;
  --paper: #f3f6fb;
  --wa: #25d366;
  --ok: #12803f;
  --r-lg: 22px;
  --r: 16px;
  --shadow: 0 18px 40px -22px rgba(8, 31, 82, .35);
  --display: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 32px);
  --header: 68px;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 8px); }
body {
  margin: 0; font-family: var(--body); font-size: 1rem; line-height: 1.6; color: var(--ink-900);
  background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; letter-spacing: -.015em; }
button { font: inherit; color: inherit; }
.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--navy-900); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-box { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--blue-100); color: var(--blue-600); flex: none; }
.ico-box .ico { width: 26px; height: 26px; }
.gold { color: var(--gold-400); }
.t-wa { color: var(--wa); }
.t-ok { color: var(--ok); }

/* ---------- Botões ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn .ico { width: 20px; height: 20px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn-gold { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); color: var(--navy-950); box-shadow: 0 12px 26px -12px rgba(245, 177, 0, .9); }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-line { border-color: var(--line); background: #fff; color: var(--navy-900); }
.btn-line:hover { border-color: var(--navy-800); }
.btn-wa { background: var(--wa); color: #05361b; }
.btn-sm { --h: 42px; padding: 0 18px; font-size: .92rem; }

/* ---------- Cabeçalho ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header); transition: background-color .25s ease, box-shadow .25s ease; }
.site-header.is-solid, .site-header.is-open {
  background: rgba(5, 19, 54, .94); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px);
}
.nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-name { font-family: var(--display); font-weight: 900; font-size: 1.3rem; line-height: .95; letter-spacing: -.02em; }
.brand-name small { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-400); margin-top: 4px; }
.brand-num { font-family: var(--display); font-weight: 900; font-size: .95rem; letter-spacing: .06em; color: var(--navy-950); background: var(--gold-400); padding: 5px 9px; border-radius: 8px; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a:not(.btn) { color: #d9e4ff; text-decoration: none; font-weight: 600; font-size: .94rem; }
.menu a:not(.btn):hover { color: #fff; }
.menu-toggle { display: none; }

@media (max-width: 959px) {
  .menu-toggle {
    display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
  }
  .menu {
    position: fixed; inset: var(--header) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px; background: rgba(5, 19, 54, .98); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 1.05rem; }
  .menu .btn { margin-top: 16px; --h: 50px; font-size: 1rem; }
  .site-header.is-open .menu { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- Início ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding-top: var(--header);
  background:
    radial-gradient(70% 55% at 78% 30%, rgba(47, 107, 232, .5), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(27, 79, 194, .45), transparent 70%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900) 75%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%);
}
/* no celular os prédios ficam atrás da foto; no computador, na base do topo */
.hero-skyline {
  position: absolute; left: 0; right: 0; top: calc(var(--header) + clamp(300px, 52vh, 460px) - 220px);
  width: 100%; height: 220px; object-fit: cover; object-position: bottom; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent);
}
.hero-grid { display: grid; align-items: end; }
.hero-media { position: relative; order: -1; height: clamp(300px, 52vh, 460px); display: flex; justify-content: center; align-items: flex-end; }
.hero-glow {
  position: absolute; left: 50%; bottom: -18%; width: min(560px, 125%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(83, 140, 255, .6), rgba(27, 79, 194, .28) 42%, transparent 66%);
}
.hero-glow::after {
  content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 2px solid rgba(255, 199, 44, .55);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 60%); mask-image: linear-gradient(180deg, #000 30%, transparent 60%);
}
.hero-photo, .part-photo {
  position: relative; height: 100%; width: auto; max-width: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* recorte da pessoa (máscara PNG) + esmaecido na base, sem caixa visível */
.hero-photo {
  -webkit-mask-image: url(../img/cleber-retrato-mask.png), linear-gradient(#000 66%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-image: url(../img/cleber-retrato-mask.png), linear-gradient(#000 66%, transparent 98%);
  mask-composite: intersect;
}
.part-photo { -webkit-mask-image: url(../img/cleber-apontando-mask.png); mask-image: url(../img/cleber-apontando-mask.png); }

.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; margin-top: -118px; padding-bottom: 72px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag {
  font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); color: #e6edff;
  background: rgba(5, 19, 54, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tag-gold { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-950); }
.hero-name { display: flex; flex-direction: column; font-weight: 900; font-size: clamp(3.6rem, 16vw, 6.6rem); line-height: .9; letter-spacing: -.035em; }
.hero-name .nm { display: inline-flex; align-items: flex-start; }
.hero-name .spark { width: .3em; height: .3em; color: var(--gold-400); margin: -.08em 0 0 .04em; }
.hero-name .sub { font-size: .36em; line-height: 1.05; letter-spacing: -.01em; margin-top: .14em; }
.hero-name b { color: var(--gold-400); }
.hero-number { margin-top: 20px; }
.hn-label { display: block; font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #bcd0ff; margin-bottom: 8px; }
.hn-digits { display: flex; gap: 8px; }
.hn-digits i {
  display: grid; place-items: center; font-style: normal;
  width: clamp(52px, 14vw, 76px); height: clamp(64px, 17vw, 92px); border-radius: 12px;
  background: linear-gradient(180deg, #0a2a78, #061a4d); border: 2px solid var(--gold-400);
  color: var(--gold-400); font-family: var(--display); font-weight: 900; font-size: clamp(2.3rem, 9vw, 3.6rem); line-height: 1;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 12px 22px -12px rgba(0, 0, 0, .6);
}
.hero-slogan { font-family: var(--display); font-weight: 800; font-style: italic; font-size: clamp(1.45rem, 5.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.02em; margin-top: 24px; }
.hero-slogan em { color: var(--gold-400); }
.hero-sub { margin-top: 12px; color: #c9d7fb; font-size: 1.05rem; }
.hero-sub strong { color: var(--gold-400); font-weight: 800; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-date {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 9px 16px; border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1.3; color: #dfe8ff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
}
.hero-date .ico { width: 18px; height: 18px; color: var(--gold-400); }
.hero-date b { color: var(--gold-400); }
.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(34px, 6vw, 80px); z-index: 3; }

@media (max-width: 559px) {
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 100%; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; min-height: min(100svh, 880px); }
  .hero-copy { margin-top: 0; padding: 48px 0 128px; align-self: center; }
  .hero-tags { order: -2; }
  .hero-slogan { order: -1; margin: 0 0 22px; font-size: clamp(2rem, 3.1vw, 2.8rem); }
  .hero-media { order: 0; height: min(80vh, 740px); align-self: end; }
  .hero-skyline { top: auto; bottom: 0; height: clamp(170px, 32vh, 300px); -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Compromissos ---------- */
.pillars { background: var(--navy-950); color: #fff; }
.pillars-grid { display: grid; gap: 16px; padding: 22px 0 32px; }
.pillar { display: flex; align-items: center; gap: 14px; }
.pillar .ico { width: 40px; height: 40px; color: #7fa6ff; stroke-width: 1.5; }
.pillar p { font-size: .98rem; line-height: 1.35; color: #dbe5ff; }
.pillar b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--gold-400); }
@media (min-width: 760px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 26px 0 36px; }
  .pillar { padding: 0 26px; border-left: 1px solid rgba(127, 166, 255, .35); }
  .pillar:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Seções ---------- */
.sec { position: relative; padding-block: clamp(64px, 9vw, 112px); }
.sec-paper { background: var(--paper); }
.sec-navy {
  color: #fff;
  background: radial-gradient(60% 50% at 100% 0%, rgba(47, 107, 232, .35), transparent 70%), linear-gradient(180deg, var(--navy-900), var(--navy-950));
}
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--gold-400); }
.sec-navy .eyebrow { color: var(--gold-400); }
.title { font-weight: 900; font-size: clamp(1.9rem, 4.4vw, 3.1rem); color: var(--navy-900); }
.sec-navy .title { color: #fff; }
.title .hl { background: linear-gradient(transparent 60%, rgba(255, 199, 44, .6) 60%); padding: 0 .08em; }
.lead { margin-top: 16px; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--ink-700); max-width: 64ch; }
.sec-navy .lead { color: #c9d7fb; }
.kicker { font-family: var(--display); font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-600); }
.grid3 { display: grid; gap: 16px; }
@media (min-width: 640px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Treine seu voto ---------- */
.vote-grid { display: grid; gap: 30px; grid-template-areas: "head" "urna" "ordem"; }
.vote-head { grid-area: head; }
.vote-urna { grid-area: urna; }
.vote-ordem { grid-area: ordem; }
.vote-head .lead strong { color: var(--navy-900); }
@media (min-width: 1000px) {
  .vote-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "head urna" "ordem urna"; column-gap: 56px; row-gap: 8px; align-items: start; }
}
.ordem-title { font-size: 1rem; font-weight: 800; color: var(--navy-900); margin-bottom: 12px; }
.ordem { display: grid; gap: 8px; }
.ordem li {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
}
.o-n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blue-50); color: var(--ink-500); font-family: var(--display); font-weight: 800; }
.o-c { font-weight: 600; line-height: 1.25; }
.o-c small { display: block; font-size: .8rem; color: var(--gold-700); }
.o-d { font-size: .82rem; font-weight: 600; color: var(--ink-500); }
.ordem .is-cleber { background: var(--navy-800); border-color: var(--navy-800); box-shadow: 0 16px 30px -18px rgba(8, 31, 82, .8); }
.is-cleber .o-n { background: var(--gold-400); color: var(--navy-950); }
.is-cleber .o-c { color: #fff; }
.is-cleber .o-c small { color: var(--gold-300); }
.o-num { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: .08em; color: var(--gold-400); }

/* Guia de digitação */
.urna-guide { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ug-text { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--navy-900); }
.ug-text b { color: var(--blue-600); font-weight: 900; }
.ug-text .g-ok { color: var(--ok); }
.ug-text .g-fix { color: #d05a0d; }
.ug-steps { display: flex; gap: 5px; }
.ug-steps i {
  display: grid; place-items: center; min-width: 30px; height: 34px; padding: 0 6px; border-radius: 8px; font-style: normal;
  font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ink-500); background: #fff; border: 1.5px solid var(--line);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.ug-steps .ug-ok { font-size: .7rem; letter-spacing: .04em; }
.ug-steps i.now { border-color: var(--blue-600); color: var(--blue-600); transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(27, 79, 194, .9); }
.ug-steps i.done { background: var(--navy-800); border-color: var(--navy-800); color: var(--gold-400); }
.ug-steps i.bad { background: #fde8dc; border-color: #f2a37a; color: #b1450b; }
.ug-steps .ug-ok.now, .ug-steps .ug-ok.done { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Urna */
.urna {
  display: grid; gap: 14px; padding: 14px; border-radius: 22px;
  background: linear-gradient(180deg, #f1ede3, #ddd6c5);
  box-shadow: 0 30px 60px -30px rgba(8, 31, 82, .5), inset 0 1px 0 #fff, inset 0 -3px 0 rgba(0, 0, 0, .06);
}
.urna.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.urna-screen {
  position: relative; min-height: 262px; padding: 12px 14px; border-radius: 10px;
  background: #f7f7f2; border: 9px solid #34373b; box-shadow: inset 0 0 0 1px #000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: #111;
}
.us-vote { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-content: start; min-height: 100%; }
.us-main { min-width: 0; }
.us-small { font-size: .72rem; }
.us-cargo { font-size: 1.15rem; font-weight: 700; text-align: center; margin: 8px 0 14px; }
.us-number { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .86rem; }
.us-digits { display: inline-flex; gap: 4px; }
.us-digits i {
  display: grid; place-items: center; width: 26px; height: 34px; font-style: normal;
  border: 1.5px solid #111; background: #fff; font-size: 1.3rem; font-weight: 700;
}
.us-digits i.cur { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { background: #111; } }
.us-info { margin-top: 12px; font-size: .86rem; line-height: 1.5; }
.us-big { margin-top: 14px; font-size: 1rem; font-weight: 700; text-align: center; line-height: 1.25; }
.us-big small { display: block; margin-top: 8px; font-size: .74rem; font-weight: 400; }
.us-photo { width: 70px; text-align: center; animation: pop .25s ease-out; }
.us-photo img { width: 70px; height: 93px; object-fit: cover; border: 1px solid #111; }
.us-photo figcaption { font-size: .55rem; line-height: 1.2; margin-top: 3px; }
.us-foot { grid-column: 1 / -1; margin-top: 14px; padding-top: 6px; border-top: 1.5px solid #111; font-size: .68rem; line-height: 1.4; }
.us-fim { display: grid; place-items: center; min-height: 226px; font-size: 3.8rem; font-weight: 700; letter-spacing: .06em; animation: pop .3s ease-out; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.us-tag { position: absolute; right: 8px; bottom: 5px; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; color: #9a9a92; }
.urna-keys { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; background: #1e2023; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key, .act {
  height: 48px; border: 0; border-radius: 7px; cursor: pointer; touch-action: manipulation;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700;
  box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .06s, box-shadow .06s, filter .15s;
}
.key { background: linear-gradient(180deg, #2f3237, #17181b); color: #fff; font-size: 1.35rem; }
.key:hover, .act:hover { filter: brightness(1.12); }
.key:active, .act:active, .key.pressed { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.key-0 { grid-column: 2; }
.acts { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.act { color: #111; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; }
.act-branco { background: #fafafa; }
.act-corrige { background: #f37a21; }
.act-confirma { background: #22a64a; height: 56px; align-self: end; }
@media (min-width: 600px) {
  .urna { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); padding: 18px; gap: 16px; }
  .urna-screen { min-height: 300px; }
  .acts { grid-template-columns: 1fr 1fr; }
  .act-confirma { grid-column: 1 / -1; }
}
.urna-done {
  margin-top: 16px; padding: 18px; border-radius: var(--r); background: #e7f7ee; border: 1px solid #b7e5c8; color: #0b4a26;
  animation: pop .3s ease-out;
}
.urna-done-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.urna-done-ctas .btn { --h: 46px; font-size: .95rem; }

/* Dicas para o dia */
.dicas { display: grid; gap: 14px; margin-top: clamp(40px, 6vw, 64px); }
@media (min-width: 640px) { .dicas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dicas { grid-template-columns: repeat(4, 1fr); } }
.dica { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.dica .ico-box { width: 44px; height: 44px; border-radius: 12px; }
.dica .ico-box .ico { width: 22px; height: 22px; }
.dica h3 { font-size: 1rem; font-weight: 800; color: var(--navy-900); }
.dica p { margin-top: 4px; font-size: .92rem; line-height: 1.5; color: var(--ink-700); }
.dica a { color: var(--blue-600); font-weight: 700; }
.cola-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- Bloco 01 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: -12px 0 24px; }
.status { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 11px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.2; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-ok { background: #e3f6ea; color: #11743a; }
.st-local { background: #e6eeff; color: #1b4fc2; }
.st-consulta { background: #fff1c7; color: #7a5000; }
.st-projeto { background: #eceff5; color: #4b5670; }
.acoes { display: grid; gap: 16px; }
@media (min-width: 640px) { .acoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .acoes { grid-template-columns: repeat(4, 1fr); } }
.acao {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.acao:hover { border-color: #b9c9ec; box-shadow: var(--shadow); transform: translateY(-3px); }
.acao-top { display: flex; align-items: center; justify-content: space-between; }
.acao-num { font-family: var(--display); font-weight: 900; font-size: 1.7rem; color: #cfd9ee; }
.acao h3 { font-size: 1.16rem; font-weight: 800; color: var(--navy-900); }
.acao p { font-size: .95rem; color: var(--ink-700); }
.acao .acao-local { display: flex; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .86rem; font-weight: 600; color: var(--ink-500); }
.acao-local .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--blue-600); }

.hospital {
  position: relative; overflow: hidden; display: grid; gap: 20px; align-items: center; margin-top: 22px;
  padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(60% 90% at 100% 0%, rgba(47, 107, 232, .45), transparent 70%), linear-gradient(135deg, var(--navy-800), var(--navy-950));
}
.hospital::after { content: "?"; position: absolute; right: 2%; top: -30px; font-family: var(--display); font-weight: 900; font-size: 240px; line-height: 1; color: rgba(255, 199, 44, .1); pointer-events: none; }
.hospital > * { position: relative; z-index: 1; }
.hospital .kicker { color: var(--gold-400); }
.hospital h3 { margin-top: 8px; font-size: clamp(1.35rem, 2.6vw, 1.95rem); font-weight: 900; }
.hospital p:not(.kicker) { margin-top: 10px; color: #c9d7fb; max-width: 60ch; }
@media (min-width: 860px) { .hospital { grid-template-columns: 1fr auto; } }

/* ---------- Bloco 02 ---------- */
.gcard {
  padding: 24px; border-radius: var(--r); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.gcard:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 199, 44, .55); transform: translateY(-3px); }
.gcard .ico-box { background: rgba(255, 199, 44, .13); color: var(--gold-400); }
.gcard h3 { margin-top: 16px; font-size: 1.2rem; font-weight: 800; }
.gcard p { margin-top: 6px; font-size: .96rem; color: #c3d1f5; }

/* ---------- Saúde ---------- */
.split { display: grid; gap: 8px; }
@media (min-width: 1000px) {
  .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
  .split .sec-head { position: sticky; top: calc(var(--header) + 32px); margin: 0; }
}
.stack { display: grid; gap: 12px; }
.srow { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.srow:hover { border-color: #b9c9ec; box-shadow: var(--shadow); }
.srow h3 { font-size: 1.15rem; font-weight: 800; color: var(--navy-900); }
.srow p { margin-top: 4px; color: var(--ink-700); }
.srow .n { margin-left: auto; font-family: var(--display); font-weight: 900; font-size: .9rem; color: #c3cfe8; }

/* ---------- Animais ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .9rem; color: var(--ink-700); }
.chips li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }
.acc { display: grid; gap: 10px; }
@media (min-width: 900px) { .acc { grid-template-columns: 1fr 1fr; align-items: start; } }
.acc-item { border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.acc-item[open] { border-color: #b9c9ec; box-shadow: var(--shadow); }
.acc-item summary {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; line-height: 1.25; color: var(--navy-900);
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary .ico-box { width: 42px; height: 42px; border-radius: 12px; background: #fff4d6; color: var(--gold-700); }
.acc-item summary .ico-box .ico { width: 22px; height: 22px; }
.acc-chev { margin-left: auto; color: var(--ink-500); transition: transform .2s; }
.acc-item[open] .acc-chev { transform: rotate(180deg); }
.acc-item p { padding: 0 18px 18px 72px; color: var(--ink-700); }
@media (max-width: 520px) { .acc-item p { padding-left: 18px; } }

/* ---------- Cidades ---------- */
.tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); font-family: var(--display); font-weight: 800; font-size: .92rem; color: var(--ink-700);
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.tab:hover { border-color: var(--navy-800); color: var(--navy-900); }
.tab[aria-selected="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; box-shadow: 0 10px 20px -12px rgba(8, 31, 82, .8); }
@media (min-width: 1000px) { .tabs { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 2px; } }
.panel { margin-top: 12px; padding: clamp(22px, 4vw, 40px); border-radius: var(--r-lg); background: var(--paper); animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.panel h3 { margin-top: 6px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 900; color: var(--navy-900); }
.checks { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 760px) { .checks { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-700); }
.checks li::before {
  content: ""; flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mandato { margin-top: clamp(44px, 6vw, 72px); }
.title-sm { margin-bottom: 20px; font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 900; color: var(--navy-900); }
.mcard { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.mnum { font-family: var(--display); font-weight: 900; font-size: .85rem; color: var(--navy-950); background: var(--gold-400); border-radius: 8px; padding: 4px 8px; }
.mcard h4 { margin-top: 14px; font-size: 1.12rem; font-weight: 800; color: var(--navy-900); }
.mcard p { margin-top: 6px; font-size: .96rem; color: var(--ink-700); }
.mandato-note { margin-top: 18px; max-width: 80ch; color: var(--ink-700); }

/* ---------- Participe ---------- */
.participe { overflow: hidden; padding-bottom: 0; }
.part-grid { display: grid; gap: 8px; align-items: end; }
.part-copy { padding-bottom: clamp(48px, 7vw, 100px); }
.part-media { position: relative; order: 2; display: flex; justify-content: center; height: clamp(340px, 62vw, 560px); }
.part-media .hero-glow { bottom: -25%; }
.acts-grid { display: grid; gap: 12px; margin-top: 26px; }
@media (min-width: 560px) { .acts-grid { grid-template-columns: 1fr 1fr; } }
.pcard {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r); text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.pcard:hover { background: rgba(255, 255, 255, .1); border-color: var(--gold-400); transform: translateY(-2px); }
.pcard b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.02rem; }
.pcard small { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.35; color: #b8c8f0; }
.pcard .ico-box { width: 48px; height: 48px; background: rgba(255, 199, 44, .14); color: var(--gold-400); }
.pcard .ico-box.wa { background: rgba(37, 211, 102, .16); color: var(--wa); }
@media (min-width: 1000px) {
  .part-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; }
  .part-media { order: 0; height: 640px; }
  .part-copy { align-self: center; padding-block: 40px 110px; }
}

/* ---------- Rodapé ---------- */
.footer { padding: 48px 0 32px; background: var(--navy-950); color: #c3d1f5; border-top: 3px solid var(--gold-400); }
.foot-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.2fr 1fr auto; align-items: start; } }
.foot-brand p { margin-top: 12px; font-size: .95rem; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.foot-nav a { color: #dbe5ff; text-decoration: none; font-weight: 600; font-size: .95rem; }
.foot-nav a:hover { color: #fff; text-decoration: underline; }
.foot-social { display: flex; gap: 10px; }
.soc { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); color: #fff; }
.soc:hover { border-color: var(--gold-400); color: var(--gold-400); }
.foot-legal { display: grid; gap: 4px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; color: #93a6d6; }

/* ---------- Barra fixa no celular ---------- */
.mbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; color: #fff;
  background: rgba(5, 19, 54, .94); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(160%); visibility: hidden; transition: transform .3s ease, visibility .3s;
}
.mbar.is-on { transform: none; visibility: visible; }
.mbar-id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.1; text-decoration: none; }
.mbar-id b { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: .06em; color: var(--gold-400); }
.mbar-id span { font-size: .72rem; color: #c3d1f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar .btn { --h: 44px; padding: 0 16px; font-size: .88rem; }
.mbar-wa { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--wa); color: #05361b; }
@media (max-width: 959px) { .footer { padding-bottom: 110px; } }
@media (min-width: 960px) { .mbar { display: none; } }

/* ---------- Animações ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Cola para imprimir ---------- */
.cola-print { display: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  body > *:not(.cola-print) { display: none !important; }
  .cola-print { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8mm; }
  .cola { break-inside: avoid; padding: 6mm; border: 1.5px dashed #777; border-radius: 4mm; color: #000; font-family: var(--body); }
  .cola-top { font-family: var(--display); font-weight: 900; font-size: 13pt; color: #0b2a6b; }
  .cola-date { font-size: 9.5pt; margin-bottom: 3mm; }
  .cola table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .cola td { padding: 2.2mm 1.5mm; border-bottom: .5pt solid #bbb; vertical-align: middle; }
  .cola td:first-child { width: 6mm; font-weight: 700; color: #555; }
  .cola td:last-child { text-align: right; white-space: nowrap; font-family: var(--display); font-weight: 800; letter-spacing: 1pt; }
  .cola .blank { color: #999; }
  .cola tr.me td { background: #fff3c4; font-weight: 700; }
  .cola tr.me small { display: block; font-weight: 400; font-size: 8pt; }
  .cola .num { font-size: 14pt; color: #0b2a6b; }
  .cola-note { margin-top: 3mm; font-size: 9pt; font-weight: 700; }
  .cola-legal { margin-top: 2mm; font-size: 6.5pt; color: #555; }
}

/* foto do topo (26/09): ocupa a altura toda sem vão acima da cabeça, com zoom e avançando para a direita */
@media (min-width: 960px) {
  .hero-media { height: auto; align-self: stretch; }
  .hero-media .hero-photo { position: absolute; top: 14px; right: 50%; height: calc((100% - 14px) * 1.15); width: auto; transform: translateX(68%); }
}
@media (min-width: 960px) and (max-width: 1099px) { .hero-media .hero-photo { transform: translateX(56%); } }