:root {
      --azul-profundo: #062c56;
      --azul-logo: #0b3d70;
      --azul-ceu: #39a9e8;
      --verde-floresta: #2f7d32;
      --dourado: #f6b51b;
      --branco: #ffffff;
      --texto: #102a43;
      --sombra: 0 10px 30px rgba(6, 44, 86, 0.16);
    }

    body.dark-mode {
      --branco: #102a43;
      --texto: #e6f4ff;
      --azul-profundo: #d9efff;
      --azul-logo: #75c8f2;
      --sombra: 0 10px 30px rgba(0, 0, 0, 0.3);
      background: #071a2c;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
      background: #f5fbff;
      color: var(--texto);
      transition: background 0.45s ease, color 0.45s ease;
    }

    header,
    .service-option,
    .carousel,
    .whatsapp-link {
      transition: background-color 0.45s ease, border-color 0.45s ease,
        color 0.45s ease, box-shadow 0.45s ease;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--branco);
      box-shadow: 0 8px 24px rgba(6, 44, 86, 0.12);
    }
        
    header::before {
      content: "";
      display: block;
      height: 5px;
      background: linear-gradient(90deg, #062c56, #39a9e8, #2f7d32, #f6b51b);
    }

    header > section {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    header > section:first-child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 92px;
    }

    header > section:first-child > div:first-child {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    header img {
      display: block;
      width: 76px;
      height: 76px;
      object-fit: contain;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.05;
    }

    .brand-text strong {
      color: var(--azul-profundo);
      font-size: 1.15rem;
      letter-spacing: 0.03em;
    }

    .brand-text span {
      margin-top: 6px;
      color: var(--verde-floresta);
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .theme-toggle,
    .menu-toggle {
      border: 1px solid #b9d2e3;
      cursor: pointer;
      font: inherit;
      font-weight: 700;
    }

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border-radius: 999px;
      background: transparent;
      color: var(--azul-profundo);
      font-size: 0.85rem;
      padding: 8px 12px;
    }

    .menu-toggle {
      display: none;
      border-radius: 10px;
      background: var(--azul-profundo);
      color: var(--branco);
      font-size: 1.35rem;
      padding: 8px 11px;
    }

    header > section:nth-child(2) {
      border-top: 1px solid #e1edf4;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 58px;
    }

    nav ul {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    nav a {
      position: relative;
      display: inline-block;
      color: var(--azul-profundo);
      font-size: 0.94rem;
      font-weight: 700;
      padding: 20px 0;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    nav a::after {
      position: absolute;
      right: 0;
      bottom: 11px;
      left: 0;
      height: 3px;
      border-radius: 3px;
      background: var(--dourado);
      content: "";
      transform: scaleX(0);
      transition: transform 0.2s ease;
    }

    nav a:hover,
    nav a:focus-visible {
      color: var(--azul-ceu);
    }

    nav a:hover::after,
    nav a:focus-visible::after {
      transform: scaleX(1);
    }
    .cta {
      border-radius: 999px;
      background: var(--dourado);
      color: #15314b !important;
      padding: 12px 20px !important;
      box-shadow: 0 5px 12px rgba(246, 181, 27, 0.25);
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .cta::after {
      display: none;
    }

    .cta:hover,
    .cta:focus-visible {
      background: #ffc83d;
      color: #102a43 !important;
      transform: translateY(-2px);
    }


    main {
      width: min(1080px, calc(100% - 40px));
      margin: 0 auto;
      padding: 64px 0 80px;
    }

    .intro {
      max-width: 780px;
      margin: 0 auto 42px;
      text-align: center;
    }

    .eyebrow {
      color: var(--verde-floresta);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    h1 {
      margin-top: 10px;
      color: var(--azul-profundo);
      font-size: clamp(2.2rem, 5vw, 4rem);
      line-height: 1.05;
    }

    .intro p {
      margin-top: 18px;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .about-panel {
      border: 1px solid var(--borda);
      border-radius: 22px;
      background: var(--branco);
      box-shadow: var(--sombra);
      padding: clamp(24px, 5vw, 48px);
    }

    .about-panel h2 {
      color: var(--azul-profundo);
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      line-height: 1.15;
    }

    .about-panel p {
      margin-top: 16px;
    }

    .services {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 30px;
    }

    .service-card {
      border: 1px solid var(--borda);
      border-radius: 16px;
      background: var(--fundo);
      padding: 24px;
    }

    .service-card:hover {
      box-shadow: 0 12px 28px rgba(6, 44, 86, 0.12);
      transform: translateY(-4px);
    }

    .service-card h3 {
      color: var(--azul-logo);
      font-size: 1.25rem;
    }

    .service-card p {
      margin-top: 9px;
      color: var(--muted);
      font-size: 0.96rem;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 30px;
    }

    .value {
      border-top: 3px solid var(--dourado);
      padding: 14px 4px 0;
    }

    .value strong {
      display: block;
      color: var(--azul-profundo);
    }

    .value span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .whatsapp-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  margin-top: 25px;

  border-radius: 999px;

  background: #25d366;

  color: #ffffff;

  font-weight: 800;

  padding: 13px 20px;

  text-decoration: none;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}


.whatsapp-link:hover,
.whatsapp-link:focus-visible {
  background: #1ebe5d;

  transform: translateY(-3px);
}


.whatsapp-link img {
  width: 20px;
  height: 20px;
}

    @media (max-width: 760px) {
      header > section { width: min(100% - 28px, 1180px); }
      header > section:first-child { min-height: 78px; }
      header img { width: 60px; height: 60px; }
      .brand-text strong { font-size: 1rem; }
      .brand-text span,
      .theme-label { display: none; }
      .theme-toggle { width: 38px; height: 38px; justify-content: center; padding: 0; }
      .menu-toggle { display: inline-flex; }
      header > section:nth-child(2) { display: none; }
      header > section:nth-child(2).open { display: block; }
      nav, nav ul { align-items: stretch; flex-direction: column; }
      nav ul { gap: 0; padding: 8px 0 14px; }
      nav a { display: block; padding: 12px 4px; }
      .cta { margin: 8px 0 14px; text-align: center; }
      main { width: min(100% - 28px, 1080px); padding-top: 42px; }
      .services, .values { grid-template-columns: 1fr; }
    }