/* Base: tokens, tipografia, botões, ondas, reveal */
    :root {
      --sol: #FFBE30;
      --petroleo: #264651;
      --laranja: #FF8F3D;
      --areia: #F3E8CC;
      --agua: #27CDB5;
      --tinta: #1D3640;
      --texto: #3C5560;
      --linha: #E8DFC8;
      --display: 'Outfit', Arial, sans-serif;
      --corpo: 'Cairo', Arial, sans-serif;
      --branco: #fff;
      --ease: cubic-bezier(.2, .8, .2, 1);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    /* Sem rolagem horizontal (clip não quebra o header/barra fixos, ao contrário de hidden) */
    html,
    body {
      overflow-x: clip;
      max-width: 100%
    }

    body {
      margin: 0;
      background: #fff;
      color: var(--texto);
      font-family: var(--corpo);
      font-size: 17px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased
    }

    img {
      display: block;
      max-width: 100%
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font: inherit;
      cursor: pointer
    }

    .page {
      container-type: inline-size;
      container-name: page;
      width: 100%;
      background: #fff;
      overflow: hidden;
      position: relative
    }

    .wrap {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      color: var(--petroleo);
      margin: 0;
      letter-spacing: -0.02em;
      font-weight: 600
    }

    h2 {
      font-size: 42px;
      line-height: 1.08
    }

    h1,
    h2,
    h3 {
      text-wrap: balance
    }

    h3 {
      font-size: 21px;
      line-height: 1.2
    }

    p {
      margin: 0
    }

    .lead {
      font-size: 18px;
      line-height: 1.6;
      max-width: 560px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      height: 54px;
      padding: 0 26px;
      border-radius: 999px;
      font-family: var(--display);
      font-weight: 600;
      font-size: 16px;
      white-space: nowrap;
      border: 0;
      transition: background .3s, color .3s, box-shadow .3s, transform .35s var(--ease)
    }

    .btn-primary {
      background: var(--sol);
      color: var(--petroleo)
    }

    .btn-primary:hover {
      background: color-mix(in srgb, var(--sol) 88%, #000);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--sol) 35%, transparent)
    }

    .btn-dark {
      background: var(--petroleo);
      color: #fff
    }

    .btn-dark:hover {
      background: #1B3640
    }

    .btn-ghost {
      background: transparent;
      color: var(--petroleo);
      box-shadow: inset 0 0 0 2px var(--petroleo)
    }

    .btn-ghost:hover {
      background: var(--petroleo);
      color: #fff
    }

    .btn-sol {
      background: var(--sol);
      color: var(--petroleo)
    }

    .btn-sol:hover {
      background: #FFD266
    }

    .btn .arr {
      transition: transform .35s var(--ease)
    }

    .btn:hover .arr {
      transform: translateX(4px)
    }

    .ico {
      width: 22px;
      height: 22px;
      flex: none
    }

    :focus-visible {
      outline: 3px solid var(--agua);
      outline-offset: 3px
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    /* Waves between sections */
    .sec {
      position: relative
    }

    .wv {
      position: absolute;
      left: 0;
      top: -1px;
      width: 100%;
      height: 84px;
      fill: currentColor;
      pointer-events: none;
      z-index: 2;
      display: block
    }

    .wv.flip {
      transform: scaleX(-1)
    }

    .wv.s {
      height: 56px
    }

    /* Scroll reveal (only when JS is on) */
    .js .rv {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
      transition-delay: var(--d, 0s)
    }

    .js .rv.in {
      opacity: 1;
      transform: none
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important
      }

      .js .rv {
        opacity: 1;
        transform: none
      }
    }



/* Onda na base da seção */
.wv.bot { top: auto; bottom: -1px; transform: scaleY(-1) }
.wv.bot.flip { transform: scale(-1, -1) }

/* Onda animada no topo da seção (.wvm; .wvm-r = sentido inverso) */
.wvm { position: absolute; left: 0; top: -1px; width: 100%; height: 84px; overflow: hidden; z-index: 2; pointer-events: none }
.wvm svg { display: block; width: 200%; height: 100%; fill: currentColor }
.js .wvm svg { animation: drift-onda 24s linear infinite }
.js .wvm.wvm-r svg { animation-duration: 32s; animation-direction: reverse }
@keyframes drift-onda { to { transform: translateX(-50%) } }
@container page (max-width: 760px) { .wvm { height: 40px } }

/* Animações de ícones (spin, sway, flow, bob) */
    .js .spin {
      animation: spin 22s linear infinite
    }

    .js .sway {
      animation: sway 3.2s ease-in-out infinite
    }

    .js .flow {
      stroke-dasharray: 3 4;
      animation: flow 1.4s linear infinite
    }

    .js .bob {
      animation: bob 2.8s ease-in-out infinite
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    @keyframes sway {
      50% {
        transform: translateX(3px)
      }
    }

    @keyframes flow {
      to {
        stroke-dashoffset: -14
      }
    }

    @keyframes bob {
      50% {
        transform: translateY(-3px)
      }
    }

    .spin,
    .sway,
    .bob {
      transform-origin: center;
      transform-box: fill-box
    }

/* Mobile */
@container page (max-width: 760px) {
      .wrap {
        padding: 0 20px
      }

      h2 {
        font-size: 31px
      }

      .lead {
        font-size: 16.5px
      }

      .wv {
        height: 40px
      }

      .wv.s {
        height: 30px
      }

}