/* I9 Horários — Design System da página de entrada | outubro 2026
 * Elementos persistentes: .site-header, .main-stage, .site-footer.
 * Área substituível pela aplicação: #view-host.
 * Alterações em horários/planejador não devem duplicar cabeçalho nem rodapé.
 */
:root {
  --cor-primaria: #1c5454;
  --cor-secundaria: #308f8f;
  --cor-texto: #244549;
  --cor-texto-secundario: #59787b;
  --cor-borda: #d6e6e3;
  --cor-tinta-suave: #95bcb6;
  --cor-branco: #fff;
  --cor-fundo-final: #e7f3f0;
  --largura-max: 1050px;
  --cabecalho-padding: clamp(18px, 3vw, 28px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; }
.container { width: min(calc(100% - 44px), var(--largura-max)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 99; top: 8px; left: 8px;
  transform: translateY(-180%); padding: 10px 14px;
  color: var(--cor-primaria); background: #fff; border: 2px solid var(--cor-primaria);
  border-radius: 8px;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: 3px; }

/* Estrutura permanente. Uma view substitui só #view-host. */
.app-shell { min-height: 100svh; display: flex; flex-direction: column; }
.main-stage { display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0; }
.view-host { position: relative; z-index: 1; background: #fff; }

/* Cabeçalho institucional: Prefeitura no primeiro plano, secretaria em segundo. */
.site-header { flex: 0 0 auto; background: var(--cor-primaria); color: #fff; }
.header-inner {
  padding-block: var(--cabecalho-padding) clamp(19px, 3vw, 28px);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 15px;
}
.municipal-identity {
  display: inline-flex; align-items: center; gap: clamp(13px, 2vw, 19px);
  color: #fff; text-decoration: none; border-radius: 7px;
  max-width: 100%;
}
.crest-frame {
  display: grid; place-items: center;
  width: 81px; min-width: 81px; height: 91px;
}
.crest {
  display: block; width: 76px; max-height: 89px;
  height: auto; object-fit: contain;
  filter: drop-shadow(1px 0 #fff) drop-shadow(-1px 0 #fff)
          drop-shadow(0 1px #fff) drop-shadow(0 -1px #fff)
          drop-shadow(0 0 2px rgba(255,255,255,.34));
}
.municipal-wordmark { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.municipal-overline {
  color: #fff; font-size: clamp(.86rem, 1.5vw, 1.06rem);
  font-weight: 600; letter-spacing: .105em; line-height: 1.28;
}
.municipal-name {
  display: block; color: #fff;
  font-size: clamp(1.58rem, 3vw, 2.45rem); line-height: 1.06;
  font-weight: 840; letter-spacing: .025em;
}
.municipal-identity:hover .municipal-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.header-attribution {
  margin: 0;
  padding-left: 4px;
  color: rgba(255,255,255,.65);
  font-size: clamp(.65rem, 1.05vw, .77rem);
  font-weight: 500; line-height: 1.6; letter-spacing: .14em;
  text-transform: uppercase;
}

/* Home – narrativa informativa, microanimação discreta à direita. */
.home-view { padding-block: clamp(34px, 5vw, 74px) clamp(22px, 3.5vw, 40px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(175px, 24vw, 260px);
  gap: clamp(14px, 5vw, 68px);
  align-items: center;
}
.hero-copy { min-width: 0; }
.eyebrow {
  color: var(--cor-secundaria); margin: 0 0 12px;
  font-size: clamp(.72rem, 1.3vw, .9rem); font-weight: 800;
  letter-spacing: .1em;
}
.home-view h1 {
  margin: 0 0 18px; max-width: 13ch;
  color: var(--cor-primaria);
  font-size: clamp(2.1rem, 4.8vw, 3.75rem);
  line-height: 1.07; letter-spacing: -.05em;
}
.lead {
  max-width: 51ch; margin: 0;
  color: var(--cor-texto-secundario);
  font-size: clamp(.98rem, 1.7vw, 1.17rem);
  line-height: 1.58;
}
.motion-wrapper { width: 100%; justify-self: end; pointer-events: none; line-height: 0; }
.motion-video {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  object-fit: contain; background: #fff; border: 0;
}

/* Campo de busca + CTAs */
.actions-area { margin-top: clamp(12px, 2vw, 22px); width: min(100%, 780px); }
.search-form {
  display: flex; align-items: stretch; padding: 7px; gap: 8px;
  border: 1px solid var(--cor-borda);
  border-radius: 20px; background: #fff;
  box-shadow: 0 15px 37px rgba(28,84,84,.055);
}
.search-form:focus-within { border-color: var(--cor-secundaria); }
.search-form input {
  flex: 1; min-width: 0; border: 0; outline: none;
  padding: 13px 17px; border-radius: 12px; color: var(--cor-texto); background: transparent;
}
.search-form input::placeholder { color: #728387; opacity: 1; }
.search-form input:focus-visible { outline: 2px solid var(--cor-secundaria); }
.search-button {
  border: 0; border-radius: 14px; padding: 12px 27px;
  flex-shrink: 0; cursor: pointer; color: #fff;
  background: var(--cor-primaria); font-weight: 750;
  transition: background .2s ease;
}
.search-button:hover { background: var(--cor-secundaria); }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 20px; }
.action-button {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 60px; gap: 14px; padding: 12px 18px;
  border: 2px solid var(--cor-primaria); border-radius: 16px;
  font-weight: 780; text-decoration: none; text-align: center;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.action-button:hover { transform: translateY(-2px); }
.action-button span { font-size: 1.12em; }
.action-primary { color: #fff; background: var(--cor-primaria); }
.action-primary:hover { background: var(--cor-secundaria); border-color: var(--cor-secundaria); }
.action-secondary { color: var(--cor-primaria); background: #fff; }
.action-secondary:hover { background: #eaf4f2; }

/* O degradê começa imediatamente após a seção de botões. */
.ambient-spacer {
  flex: 1 0 auto;
  min-height: clamp(110px, 13vh, 220px);
  background: linear-gradient(180deg,
    #fff 0%,
    #fcfefd 16%,
    #f7fbfa 45%,
    #eef7f4 75%,
    var(--cor-fundo-final) 100%);
}
/* O rodapé continua o degradê da área central, sem textos institucionais. */
.site-footer {
  position: relative; flex: 0 0 auto;
  height: clamp(120px, 14vw, 190px);
  background: var(--cor-fundo-final);
  overflow: hidden;
}
.city-skyline {
  position: absolute; inset: auto auto 0 50%; transform: translateX(-50%);
  display: block; height: 100%; width: max(100%, 960px);
  object-fit: fill; pointer-events: none; user-select: none;
}
.i9-signature {
  position: absolute; left: 50%; bottom: clamp(12px, 2vw, 25px);
  transform: translateX(-50%);
  font-size: clamp(.77rem, 1.2vw, .96rem);
  font-weight: 850; letter-spacing: .045em;
  color: var(--cor-primaria); opacity: .18;
  pointer-events: none; user-select: none; white-space: nowrap;
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 36px), var(--largura-max)); }
  .header-inner { gap: 11px; padding-block: 20px 18px; }
  .crest-frame { width: 62px; min-width: 62px; height: 74px; }
  .crest { width: 60px; max-height: 72px; }
  .municipal-overline { font-size: .79rem; letter-spacing: .11em; }
  .municipal-name { font-size: clamp(1.29rem, 5.25vw, 1.95rem); }
  .header-attribution { font-size: .62rem; letter-spacing: .085em; padding: 0; opacity: .86; }
  .home-view { padding-block: 34px 26px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) clamp(112px, 31vw, 186px); gap: 7px; }
  .eyebrow { font-size: .64rem; margin-bottom: 9px; letter-spacing: .085em; }
  .home-view h1 { font-size: clamp(1.66rem, 6.45vw, 2.65rem); margin-bottom: 11px; }
  .lead { font-size: clamp(.81rem, 2.5vw, 1rem); line-height: 1.48; }
  .actions-area { margin-top: 24px; }
  .search-form { border-radius: 16px; padding: 5px; }
  .search-form input { padding: 12px; font-size: .95rem; }
  .search-button { padding-inline: 18px; border-radius: 12px; }
  .quick-actions { gap: 11px; margin-top: 15px; }
  .action-button { min-height: 54px; border-radius: 13px; padding: 10px; font-size: .89rem; }
  .ambient-spacer { min-height: 130px; }
  .site-footer { height: 150px; }
  .i9-signature { opacity: .17; bottom: 16px; }
}
@media (max-width: 380px) {
  .container { width: min(calc(100% - 28px), var(--largura-max)); }
  .header-attribution { font-size: .57rem; letter-spacing: .055em; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 105px; }
  .lead { font-size: .78rem; }
  .search-button { padding-inline: 12px; }
  .quick-actions { grid-template-columns: 1fr; }
  .action-button { min-height: 49px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}