/* Seção: Hero + reserva */
    .hero {
      position: relative;
      background: var(--laranja)
    }

    .hero-photo {
      height: 640px;
      position: relative;
      overflow: hidden;
      background: var(--petroleo)
    }

    .slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1.4s ease
    }

    .slide.on {
      opacity: 1
    }

    .slide:first-child {
      object-position: 50% 62%
    }

    .hero-dots {
      position: absolute;
      right: 48px;
      top: 32px;
      display: flex;
      gap: 8px;
      z-index: 3
    }

    .hero-dots button {
      width: 28px;
      height: 6px;
      border-radius: 6px;
      border: 0;
      background: rgba(255, 255, 255, .55);
      padding: 0;
      transition: width .4s var(--ease), background .4s
    }

    .hero-dots button.on {
      width: 52px;
      background: #fff
    }

    .hero-wave {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 190px;
      z-index: 2;
      overflow: hidden
    }

    .hero-wave svg {
      position: absolute;
      bottom: 0;
      display: block
    }

    .hw-back {
      width: 200%;
      height: 190px;
      left: 0;
      fill: var(--agua);
      opacity: .9
    }

    .js .hw-back {
      animation: drift 18s linear infinite
    }

    .hw-front {
      width: 200%;
      height: 170px;
      left: 0;
      fill: var(--laranja)
    }

    .js .hw-front {
      animation: drift 30s linear infinite reverse
    }

    @keyframes drift {
      to {
        transform: translateX(-50%)
      }
    }

    .hero-body {
      position: relative;
      z-index: 3;
      margin-top: -150px;
      padding-bottom: 84px
    }

    .hero-body .wrap {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 56px;
      align-items: end;
      max-width: 1360px
    }

    .hero-body .wrap > div:first-child {
      align-self: center;
      padding-top: 120px
    }

    .hero h1 {
      font-size: 72px;
      line-height: 1.0;
      letter-spacing: -0.03em
    }

    .hero .lead {
      color: var(--petroleo);
      margin-top: 22px;
      font-size: 19px
    }

    .book {
      background: #fff;
      border-radius: 28px;
      padding: 28px;
      box-shadow: 0 24px 60px rgba(38, 70, 81, .22)
    }

    .book h2 {
      font-size: 21px;
      margin-bottom: 16px;
      letter-spacing: -0.01em
    }

    .fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .field {
      border: 1.5px solid var(--linha);
      border-radius: 16px;
      padding: 11px 16px;
      transition: border-color .3s, box-shadow .3s
    }

    .field:hover {
      border-color: var(--agua);
      box-shadow: 0 0 0 4px rgba(39, 205, 181, .14)
    }

    .field span {
      display: block;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.2
    }

    .field b {
      display: block;
      font-family: var(--display);
      font-weight: 500;
      font-size: 17px;
      color: var(--petroleo);
      margin-top: 4px
    }

    .field.full {
      grid-column: 1 / -1
    }

    .book-kids {
      margin: 14px 0 0;
      padding: 10px 14px;
      border-radius: 14px;
      background: #E3F8F4;
      color: var(--petroleo);
      font-family: var(--display);
      font-weight: 500;
      font-size: 15px;
      text-align: center
    }

    .book .btn {
      width: 100%;
      margin-top: 14px;
      height: 58px;
      font-size: 17px
    }

    .book-alt {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px 8px;
      margin-top: 14px;
      font-size: 15px;
      text-align: center
    }

    .book-alt a {
      color: var(--petroleo);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px
    }

    /* Facts */
.field input,.field select{all:unset;display:block;width:100%;font-family:var(--display);font-weight:600;color:var(--petroleo);font-size:16px;line-height:1.3;cursor:pointer}
.field input::placeholder{color:#9AA9AE}
.field:focus-within{outline:2px solid var(--agua);outline-offset:2px}
.field.guests{display:flex;gap:10px;align-items:center}
.field.guests label{flex:1}
.field.guests{flex-wrap:wrap}
.field.guests .idades{flex:1}
.field.guests .idades.varias{flex-basis:100%}
.idades-lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.field .idades-lista select:disabled{opacity:.5;cursor:not-allowed}
.field .idades-lista select{all:revert;flex:1 1 80px;min-width:80px;padding:6px 8px;border:1.5px solid var(--linha);border-radius:10px;background:#fff;font-family:var(--display);font-weight:600;font-size:15px;color:var(--petroleo);cursor:pointer}

/* Datas: input nativo invisível por cima; texto formatado "Sex, 14 nov" */
.field-data{position:relative;cursor:pointer}
.field-data .data-exibida{display:block;min-height:1.3em}
.field-data .data-exibida:empty::before{content:'Data';color:#9AA9AE}
.field-data input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

/* Flatpickr com as cores da marca */
.flatpickr-calendar{font-family:var(--corpo);border-radius:16px;box-shadow:0 16px 40px rgba(38,70,81,.18)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--sol);border-color:var(--sol);color:var(--petroleo)}
.flatpickr-day.today{border-color:var(--agua)}
.flatpickr-current-month,.flatpickr-weekday{font-family:var(--display);color:var(--petroleo)}

/* Mobile */
@container page (max-width: 760px) {
      .hero-photo {
        height: 430px
      }

      .hero-dots {
        right: 20px;
        top: 18px
      }

      .hero-wave {
        height: 96px
      }

      .hw-back {
        height: 96px
      }

      .hw-front {
        height: 84px
      }

      .hero-body {
        margin-top: 4px;
        padding-bottom: 48px
      }

      .hero-body .wrap {
        grid-template-columns: 1fr;
        gap: 26px
      }

      .hero-body .wrap > div:first-child {
        padding-top: 0
      }

      .hero h1 {
        font-size: 42px
      }

      .hero .lead {
        font-size: 16.5px;
        margin-top: 14px
      }

      .book {
        padding: 22px;
        border-radius: 24px
      }

}
.field .idades-lista select[hidden]{display:none}