:root {
  /* Azul-marinho e verde derivados da logo enviada. Verde de interface suavizado para evitar excesso de brilho. */
  color-scheme: light;
  --navy: #1f2d59;
  --navy-deep: #172342;
  --green-logo: #99ca3c;
  --green-muted: #789849;
  --green-pale: #eef3e8;
  --ink: #252a32;
  --muted: #6f747a;
  --line: #e7e9e6;
  --paper: #ffffff;
  --surface: #fafbf9;
  --font-sans: "Poppins", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--surface); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--surface); }
a { color: inherit; }
.page-frame { position: relative; display: flex; width: min(100% - 40px, 1440px); min-height: calc(100vh - 40px); flex-direction: column; margin: 20px auto; padding: 0 clamp(24px, 6.2vw, 88px); overflow: hidden; border: 1px solid #eceeeb; background: var(--paper); box-shadow: 0 14px 60px rgba(27,39,37,.035); }
.page-frame::before { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--navy); content: ""; }
.page-frame::after { position: absolute; z-index: 0; right: -190px; bottom: 8%; width: 460px; height: 460px; border: 1px solid rgba(153,202,60,.13); border-radius: 50%; content: ""; pointer-events: none; }
.site-header, .main-content, .site-footer { position: relative; z-index: 1; }
.site-header { display: flex; min-height: 120px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: min(270px, 37vw); height: auto; object-fit: contain; }
.maintenance-status { display: inline-flex; align-items: center; gap: 9px; color: #59616b; font-size: 11px; font-weight: 600; letter-spacing: .045em; }
.status-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green-muted); box-shadow: 0 0 0 4px var(--green-pale); }
.main-content { display: grid; flex: 1; place-items: center; padding: 72px 0 82px; }
.message { width: min(100%, 620px); text-align: center; }
.eyebrow { margin: 0 0 23px; color: var(--green-muted); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { padding: 0 8px; color: #b2b9b1; }
h1 { margin: 0; color: var(--navy); font-size: clamp(49px, 7.3vw, 78px); font-weight: 600; letter-spacing: -.065em; line-height: 1.01; }
h1 span { color: var(--navy-deep); }
.accent-rule { display: block; width: 43px; height: 3px; margin: 25px auto 0; background: var(--green-logo); }
.description { max-width: 460px; margin: 22px auto 0; color: #5f656c; font-size: 16px; line-height: 1.7; }
.contact-intro { margin: 22px 0 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.button { display: inline-flex; min-width: 164px; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border: 1px solid transparent; border-radius: 3px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--green-muted); outline-offset: 4px; }
.button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.button-primary { color: #fff; background: var(--navy); }
.button-primary:hover { background: #2b3d70; }
.button-primary .arrow { width: 15px; height: 15px; margin-left: 3px; }
.button-secondary { border-color: #d7dbd4; color: var(--navy); background: #fff; }
.button-secondary:hover { border-color: var(--green-muted); color: var(--navy-deep); background: #f8faf6; }
.contact-details { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 25px; color: #727880; font-size: 12px; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { color: var(--navy); }
.contact-details > span { width: 3px; height: 3px; border-radius: 50%; background: var(--green-muted); }
.site-footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); color: #777d82; font-size: 10px; }
.site-footer > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.site-footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--green-muted); }
@media (max-width: 620px) {
  .page-frame { width: min(100% - 20px, 1440px); min-height: calc(100vh - 20px); margin: 10px auto; padding: 0 22px; }
  .site-header { min-height: 94px; }
  .brand-logo { width: min(220px, 48vw); }
  .maintenance-status { gap: 7px; font-size: 9px; }
  .main-content { padding: 60px 0 65px; }
  .eyebrow { font-size: 9px; }
  h1 { font-size: clamp(48px, 12vw, 67px); }
  .description { max-width: 380px; font-size: 15px; }
  .actions { flex-direction: column; align-items: stretch; width: min(100%, 340px); margin-right: auto; margin-left: auto; }
  .button { min-height: 50px; }
  .site-footer { align-items: center; flex-direction: column; justify-content: center; gap: 7px; padding: 13px 0; text-align: center; }
}
@media (max-width: 390px) {
  .page-frame { padding: 0 17px; }
  .site-header { gap: 10px; }
  .brand-logo { width: 46vw; }
  .maintenance-status { font-size: 8px; }
  .contact-details { flex-direction: column; gap: 8px; }
  .contact-details > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
