:root {
  --orange: #ffae00;
  --orange-deep: #ff8a00;
  --blue: #039bd3;
  --blue-deep: #0078bd;
  --green: #00783f;
  --ink: #fff;
  --shadow: 0 8px 0 rgba(112, 65, 0, 0.24);
  --font: termina, Termina, Montserrat, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--orange); background-image: url("../assets/images/atualizacao/background-textura-laranja-body.webp"); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--ink); font-family: var(--font); }
img { display: block; max-width: 100%; }
a { color: inherit; }
.page-shell { width: 100%; margin: 0 auto; overflow: hidden; background: transparent; }
.section { position: relative; padding-inline: clamp(24px, 8vw, 154px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.brand-bar { height: clamp(52px, 4.8vw, 92px); display: grid; place-items: center; background: #00743d; position: relative; z-index: 20; }
.brand-bar img { width: clamp(170px, 19vw, 368px); }

.hero { position: relative; background: transparent; }
.hero__picture { display: block; }
.hero__banner { width: 100%; height: auto; }
.hero__hotspot { position: absolute; z-index: 2; left: 4.5%; top: 61%; width: 29%; height: 15%; border-radius: 999px; }
.hero__hotspot:focus-visible { outline: 5px solid #fff; outline-offset: 5px; }
.image-cta { display: block; width: max-content; transition: transform 180ms ease, filter 180ms ease; }
.image-cta:hover, .image-cta:focus-visible { transform: scale(1.045) rotate(-1deg); filter: brightness(1.06); }
.orange-area { position: relative; isolation: isolate; margin-top: -2px; background: transparent; }
.orange-area::before, .orange-area::after { content: none; }
.orange-area > .section { z-index: 1; }
.orange-area h2, .blue-area h2 { margin: 0; font-size: clamp(40px, 4.2vw, 80px); line-height: 1; letter-spacing: -.045em; text-shadow: var(--shadow); }
.title-line { display: block; }

.freedom { z-index: 5; min-height: clamp(700px, 52vw, 1000px); display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 5%; padding-top: clamp(60px, 5vw, 96px); }
.freedom__visual { position: relative; min-height: 620px; display: grid; place-items: center; }
.freedom__complete { width: min(43vw, 823px); }
.organic-frame { overflow: hidden; position: relative; box-shadow: 0 18px 0 rgba(69, 41, 118, .45); }
.organic-frame img { width: 100%; height: 100%; object-fit: cover; }
.organic-frame--purple { width: min(38vw, 730px); aspect-ratio: 1.18; border: 18px solid #8a1ba2; border-radius: 45% 55% 48% 52% / 55% 44% 56% 45%; transform: rotate(-8deg); }
.organic-frame--purple img { transform: rotate(8deg) scale(1.17); }
.freedom__sun { position: absolute; width: clamp(120px, 12vw, 230px); right: -1%; top: 0; }
.freedom__goggles { position: absolute; width: clamp(140px, 14vw, 270px); left: -3%; bottom: 0; transform: rotate(-8deg); }
.freedom__content h2 { max-width: 820px; font-size: clamp(38px, 3.35vw, 64px); }
.freedom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 38px); margin-top: clamp(38px, 4vw, 75px); }
.freedom__grid img { width: 100%; }

.parks { padding-top: clamp(45px, 3.5vw, 68px); }
.parks__intro { display: grid; grid-template-columns: 1fr .55fr; align-items: center; max-width: 1500px; margin: 0 auto; }
.parks__intro h2 { font-size: clamp(50px, 5vw, 96px); }
.parks__intro p { width: min(900px, 75%); font-size: clamp(18px, 1.62vw, 31px); font-weight: 700; line-height: 1.35; }
.parks__intro > img { width: min(31vw, 510px); justify-self: center; filter: drop-shadow(0 15px 0 rgba(181, 70, 0, .23)); }
.park-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: clamp(38px, 3vw, 58px) auto 0; max-width: 1845px; align-items: end; }
.park-card { position: relative; min-height: 0; padding: 0; background: transparent; }
.park-card > a { display: block; border: 0; padding: 0; border-radius: 0; box-shadow: none; transition: transform 180ms ease, filter 180ms ease; }
.park-card > a:hover, .park-card > a:focus-visible { transform: translateY(-8px); filter: brightness(1.04); outline: none; }
.park-card > a:focus-visible img { filter: drop-shadow(0 0 8px #fff); }
.park-card img { width: 100%; height: auto; }

.boat { min-height: 0; padding: clamp(28px, 2vw, 42px) clamp(24px, 2.75vw, 53px); }
.boat__complete { width: min(100%, 1814px); margin: 0 auto; }

.benefits { padding-top: clamp(48px, 3.5vw, 68px); padding-bottom: clamp(140px, 11vw, 215px); }
.benefits h2 { text-align: center; }
.benefits__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 76px) 9%; max-width: 1500px; margin: clamp(48px, 4.5vw, 86px) auto 0; }
.benefit { display: grid; grid-template-columns: clamp(105px, 10vw, 195px) 1fr; gap: clamp(18px, 2vw, 38px); align-items: center; }
.benefit img { width: 100%; }
.benefit h3 { margin: 0 0 8px; font-size: clamp(22px, 1.75vw, 34px); line-height: 1.08; }
.benefit p { margin: 0; font-size: clamp(15px, 1.2vw, 23px); font-weight: 700; line-height: 1.25; }
.benefits__cta { width: clamp(380px, 42vw, 780px); margin: clamp(42px, 4.5vw, 86px) auto 0; }

.blue-area { position: relative; isolation: isolate; margin-top: -38px; background: transparent; }
.blue-area::before { content: ""; position: absolute; z-index: 0; inset: 0 0 auto; width: 100%; aspect-ratio: 1920 / 1644; background: url("../assets/images/atualizacao/fundo-azul-mascara-onda.webp") top center / 100% 100% no-repeat; }
.blue-area::after { content: ""; position: absolute; z-index: 0; inset: min(68vw, 1300px) 0 0; background: #099bd1 url("../assets/images/background-03.webp") center / cover; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 280px); mask-image: linear-gradient(to bottom, transparent, #000 280px); }
.blue-area > .section { z-index: 1; }
.reasons { min-height: clamp(820px, 57vw, 1090px); padding-top: 450px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 7%; }
.reasons__visual { position: relative; min-height: 670px; display: grid; place-items: center; }
.reasons__complete { width: min(47vw, 916px); }
.organic-frame--green { width: min(42vw, 800px); aspect-ratio: 1.52; border: 18px solid #00a431; border-radius: 53% 47% 50% 50% / 46% 54% 46% 54%; transform: rotate(4deg); box-shadow: 0 18px 0 rgba(0,87,98,.45); }
.organic-frame--green img { transform: rotate(-4deg) scale(1.1); }
.reasons__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(24px, 2.5vw, 48px); }
.reasons__list li { position: relative; padding-left: clamp(70px, 7vw, 125px); display: grid; }
.reasons__list li::before { content: ""; position: absolute; left: 0; top: -.2em; width: clamp(48px, 5vw, 88px); aspect-ratio: 1; background: url("../assets/images/palm-bullet.png") center / contain no-repeat; }
.reasons__list strong { font-size: clamp(22px, 2vw, 39px); line-height: 1.08; }
.reasons__list span { font-size: clamp(15px, 1.2vw, 23px); font-weight: 700; margin-top: 7px; }

.contact { min-height: clamp(850px, 61vw, 1170px); padding-top: clamp(65px, 6vw, 115px); padding-right: 0; display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 5%; }
.contact__content { align-self: start; padding-top: 9%; }
.contact h2 { font-size: clamp(38px, 3.75vw, 72px); }
.contact h3 { margin: clamp(42px, 4vw, 76px) 0 clamp(26px, 2.5vw, 46px); font-size: clamp(32px, 2.7vw, 52px); }

@media (min-width: 901px) {
  .freedom__content .title-line, .contact .title-line { white-space: nowrap; }
}
.contact address { display: grid; gap: 24px; font-style: normal; }
.contact address a { display: flex; align-items: center; gap: 18px; text-decoration: none; font-size: clamp(15px, 1.4vw, 27px); font-weight: 700; }
.contact address img { width: clamp(36px, 3.3vw, 62px); }
.contact__cta { width: clamp(330px, 38vw, 690px); margin-top: clamp(55px, 6vw, 110px); }
.contact__visual { position: relative; height: 100%; min-height: 820px; display: grid; place-items: center end; }
.contact__complete { width: min(47vw, 890px); margin-left: auto; }

footer { position: relative; z-index: 5; min-height: 245px; display: grid; place-items: center; padding: 50px clamp(40px, 8vw, 155px); background: linear-gradient(120deg, #ff9c00, #ffb600); }
footer p { margin: 0; max-width: 1600px; font-size: clamp(11px, .82vw, 16px); line-height: 1.35; font-weight: 700; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 700ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__hotspot { left: 4%; top: 60%; width: 31%; height: 18%; }
  .freedom, .reasons, .contact { grid-template-columns: 1fr; }
  .freedom { padding-top: 90px; padding-bottom: 90px; }
  .freedom__visual { min-height: 470px; }
  .freedom__complete { width: min(88vw, 680px); }
  .organic-frame--purple { width: min(88vw, 620px); }
  .freedom__content { text-align: center; }
  .freedom__content h2 { margin-inline: auto; }
  .parks { padding-bottom: 70px; }
  .park-grid { grid-template-columns: 1fr; max-width: 540px; row-gap: 54px; }
  .park-card { min-height: 0; }
  .boat { min-height: 0; padding-block: 65px; }
  .benefits__grid { grid-template-columns: 1fr; }
  .benefits { padding-top: 70px; padding-bottom: 180px; }
  .reasons { padding-top: 165px; padding-bottom: 90px; }
  .reasons__visual { min-height: 0; padding-block: 50px; }
  .reasons__complete { width: min(88vw, 760px); }
  .reasons__list { padding-bottom: 110px; }
  .contact { padding-top: 90px; padding-bottom: 80px; }
  .contact__content { padding-top: 0; }
  .contact__visual { min-height: 0; padding-block: 50px; }
  .contact__complete { width: min(92vw, 760px); }
}

@media (max-width: 560px) {
  .hero { min-height: 0; }
  .orange-area h2, .blue-area h2 { font-size: 28px; line-height: 1.04; overflow-wrap: normal; }
  .title-line { white-space: nowrap; }
  .freedom { min-height: 0; padding-top: 85px; padding-bottom: 100px; row-gap: 48px; }
  .freedom__content h2 { font-size: 22px; line-height: 1.05; }
  .freedom__content, .parks__intro, .benefits, .reasons__list, .contact__content { min-width: 0; }
  .freedom__grid, .freedom__grid img { min-width: 0; width: 100%; }
  .benefit h3, .reasons__list strong, .contact h3 { overflow-wrap: anywhere; }
  .freedom__visual { min-height: 0; }
  .freedom__sun { width: 100px; }
  .freedom__goggles { width: 120px; }
  .freedom__grid { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; }
  .parks { padding-top: 75px; padding-bottom: 90px; }
  .parks__intro { grid-template-columns: 1fr; row-gap: 42px; }
  .parks__intro h2 { font-size: 28px; line-height: 1.02; }
  .parks__intro p { width: 100%; }
  .parks__intro > img { width: min(70vw, 350px); }
  .park-grid { margin-top: 65px; row-gap: 62px; }
  .park-card { min-height: 0; }
  .boat { min-height: 0; padding: 80px 12px; }
  .benefit { grid-template-columns: 90px 1fr; }
  .benefits { padding-top: 80px; padding-bottom: 185px; }
  .benefits h2 { font-size: 22px; line-height: 1.05; }
  .benefits__grid { margin-top: 70px; gap: 54px; }
  .benefits__cta { width: 95%; }
  .reasons { min-height: 0; padding-top: 180px; padding-bottom: 110px; row-gap: 55px; }
  .reasons__visual { min-height: 0; padding-block: 35px; }
  .reasons__list { gap: 30px; padding-bottom: 50px; }
  .reasons__list li { padding-left: 66px; }
  .reasons__list strong { font-size: 17px; line-height: 1.12; }
  .reasons__list span { font-size: 12px; }
  .contact { padding-top: 100px; padding-bottom: 90px; row-gap: 65px; }
  .contact h2 { font-size: 25px; line-height: 1.04; }
  .contact address { gap: 16px; }
  .contact address a { font-size: 12px; gap: 8px; word-break: break-all; }
  .contact__cta { width: 95%; }
  .contact__visual { min-height: 0; }
  footer { min-height: 220px; padding-inline: 24px; }
}

@media (max-width: 768px) {
  .hero__hotspot { left: 8%; top: 65%; width: 45%; height: 13%; }
  .blue-area::before { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; background-size: cover; background-position: top center; }
  .blue-area::after { content: none; display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .image-cta { transition: none; }
}