/* Seção: Header */
    /* Header */
    .header {
      position: sticky;
      top: 0;
      z-index: 40;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(10px);
      transition: box-shadow .4s, height .4s
    }

    .header .wrap {
      display: flex;
      align-items: center;
      height: 84px;
      gap: 40px;
      max-width: 1440px;
      transition: height .4s var(--ease)
    }

    .header.scrolled {
      box-shadow: 0 8px 30px rgba(38, 70, 81, .10)
    }

    .header.scrolled .wrap {
      height: 70px
    }

    .logo img {
      height: 50px;
      width: auto;
      transition: height .4s var(--ease)
    }

    .header.scrolled .logo img {
      height: 42px
    }

    .nav {
      display: flex;
      gap: 28px;
      font-family: var(--display);
      font-weight: 500;
      font-size: 15.5px;
      color: var(--petroleo);
      margin-left: auto
    }

    .nav a {
      position: relative;
      padding: 6px 0
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      border-radius: 2px;
      background: var(--laranja);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--ease)
    }

    .nav a:hover::after {
      transform: scaleX(1)
    }

    .header-cta {
      display: flex;
      align-items: center;
      gap: 18px
    }

    .tel {
      font-family: var(--display);
      font-weight: 500;
      font-size: 15px;
      color: var(--petroleo);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .header .btn {
      height: 46px;
      padding: 0 22px;
      font-size: 15px
    }

    .burger {
      display: none
    }

    /* Hero */

/* Mobile */
@container page (max-width: 760px) {
      .header.scrolled .wrap {
        height: 64px;
        gap: 12px
      }

      .logo img,
      .header.scrolled .logo img {
        height: 36px
      }

      .nav,
      .tel,
      .header .btn {
        display: none
      }

      .header-cta {
        margin-left: auto
      }

      .burger {
        display: flex;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--areia);
        align-items: center;
        justify-content: center;
        color: var(--petroleo);
        border: 0
      }

}

/* Menu mobile aberto (burger) */
@container page (max-width: 760px) {
  .header.menu-aberto .nav { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; padding: 12px 20px 20px; gap: 4px; box-shadow: 0 12px 24px rgba(38, 70, 81, .12) }
  .header.menu-aberto .nav a { padding: 10px 0 }
}