@charset "UTF-8";
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

button, input[type=submit], input[type=reset] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

:root {
  --clr-bg: hsl(22, 38%, 96%);
  --clr-primary: hsl(252, 1%, 20%);
  --clr-field-100: hsl(22, 38%, 88%);
  --clr-field-200: hsl(22, 37%, 82%);
  --clr-field-300: hsl(22, 37%, 73%);
  --clr-field-400: hsl(129, 16%, 72%);
  --clr-field-500: hsl(78, 17%, 69%);
  --clr-field-600: hsl(129, 16%, 58%);
  --clr-field-700: hsl(196, 31%, 53%);
  --clr-field-800: hsl(349, 29%, 82%);
  --clr-accent-orange: hsl(33, 100%, 61%);
  --clr-accent-orange-light: hsl(33, 100%, 81%);
  --clr-accent-pink: hsl(342, 100%, 77%);
  --clr-accent-beige: hsl(24, 36%, 82%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-black: hsl(0, 0%, 0%);
  --font-primary: "GT-Haptik", sans-serif;
  --root-font-size: 100%;
  --txt-xs: clamp(0.636rem, 0.573rem + 0.318vw, 0.9rem);
  --txt-s: clamp(0.636rem, 0.573rem + 0.318vw, 1.273rem);
  --txt-m: clamp(0.9rem, 0.81rem + 0.45vw, 1.8rem);
  --txt-l: clamp(1.273rem, 1.146rem + 0.636vw, 2.546rem);
  --txt-xl: clamp(1.8rem, 1.62rem + 0.9vw, 3.6rem);
  --txt-xxl: clamp(2.546rem, 2.291rem + 1.273vw, 5.092rem);
  --h6: clamp(0.636rem, 0.573rem + 0.318vw, 0.9rem);
  --h5: clamp(0.9rem, 0.81rem + 0.45vw, 1.8rem);
  --h4: clamp(1.273rem, 1.146rem + 0.636vw, 2.546rem);
  --h3: clamp(1.8rem, 1.62rem + 0.9vw, 3.6rem);
  --h2: clamp(2.546rem, 2.291rem + 1.273vw, 5.092rem);
  --h1: clamp(3.6rem, 3.24rem + 1.8vw, 7.2rem);
  --fs-big: clamp(5.656rem, 5.09rem + 2.828vw, 11.312rem);
  --fs-bigger: clamp(8rem, 7.2rem + 4vw, 16rem);
  --heading-line-height: 1;
  --txt-line-height: 1.4;
  --space-xs: clamp(0.707rem, 0.636rem + 0.354vw, 1rem);
  --space-s: clamp(0.707rem, 0.636rem + 0.354vw, 1.414rem);
  --space-m: clamp(1rem, 0.9rem + 0.5vw, 2rem);
  --space-l: clamp(1.414rem, 1.273rem + 0.707vw, 2.828rem);
  --space-xl: clamp(2rem, 1.8rem + 1vw, 4rem);
  --space-xxl: clamp(2.828rem, 2.545rem + 1.414vw, 5.656rem);
  --scrollbar-width: 15px;
  --section-space-xs: clamp(1rem, 0.9rem + 0.5vw, 2rem);
  --section-space-s: clamp(1.414rem, 1.273rem + 0.707vw, 2.828rem);
  --section-space-m: clamp(2rem, 1.8rem + 1vw, 4rem);
  --section-space-l: clamp(2.828rem, 2.545rem + 1.414vw, 5.656rem);
  --section-space-xl: clamp(4rem, 3.6rem + 2vw, 8rem);
  --section-space-xxl: clamp(5.656rem, 5.09rem + 2.828vw, 11.312rem);
  --section-padding-x: clamp(1.414rem, 1.273rem + 0.707vw, 2.828rem);
  --paragraph-spacing: 1em;
  --heading-spacing: 1.2em;
  --list-spacing: var(--paragraph-spacing);
  --list-indent-spacing: 2em;
  --list-item-spacing: 0.5em;
  --nested-list-indent-spacing: 1em;
  --flow-spacing: var(--paragraph-spacing);
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: 0.5em;
  --blockquote-spacing: var(--paragraph-spacing);
  --letter-spacing: 0.5px;
  --aspect-ratio-4-3: 4 / 3;
  --aspect-ratio-8-3: 8 / 3;
  --border-radius: var(--txt-l);
  --header-height: 4.05rem;
  --logo-height: calc(var(--logo-height-desktop) - var(--space-s) * 2);
}
@media (min-width: 768px) {
  :root {
    --h6: clamp(0.707rem, 0.636rem + 0.354vw, 1rem);
    --h5: clamp(1rem, 0.9rem + 0.5vw, 2rem);
    --h4: clamp(1.414rem, 1.273rem + 0.707vw, 2.828rem);
    --h3: clamp(2rem, 1.8rem + 1vw, 4rem);
    --h2: clamp(2.828rem, 2.545rem + 1.414vw, 5.656rem);
    --h1: clamp(4rem, 3.6rem + 2vw, 8rem);
    --heading-line-height: 1.2;
    --txt-line-height: 1.4;
  }
}

@font-face {
  font-family: "GT-Haptik";
  src: url("../fonts/GT-Haptik-Regular.woff2") format("woff2"), url("../fonts/GT-Haptik-Regular.woff") format("woff"), url("../fonts/GT-Haptik-Regular.ttf") format("truetype"), url("../fonts/GT-Haptik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT-Haptik";
  src: url("../fonts/GT-Haptik-Bold.woff2") format("woff2"), url("../fonts/GT-Haptik-Bold.woff") format("woff"), url("../fonts/GT-Haptik-Bold.ttf") format("truetype"), url("../fonts/GT-Haptik-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

h6 {
  font-size: var(--h6);
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--heading-line-height);
}

p {
  font-size: var(--txt-m);
  letter-spacing: 0.3px;
  max-inline-size: var(--txt-m-lenght, 75ch);
  line-height: var(--txt-line-height);
}

ul {
  padding-inline-start: var(--space-m);
}

ol {
  padding-inline-start: var(--space-xl);
}

.link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--clr-primary);
}
.legal-text .link {
  border-bottom: 1px solid var(--clr-primary);
}

.fs-small {
  font-size: var(--txt-s);
}

.fs-big {
  font-size: var(--h1);
  margin-block-end: var(--space-xl);
}

.fs-bigger {
  font-size: var(--fs-bigger);
}

a:not(.btn-round):not(.nav_item):not(.logo):not(.block-type-button a):not(.tabs__title) {
  color: var(--clr-primary);
}
a:not(.btn-round):not(.nav_item):not(.logo):not(.block-type-button a):not(.tabs__title):hover {
  border-bottom: 2px solid var(--clr-primary);
}

html {
  font-size: var(--root-font-size);
  --webkit-text-size-adjust: 100%;
  line-height: var(--txt-line-height);
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--header-height-tablet) * 0.75);
}

body {
  min-block-size: 100vh;
  background-color: var(--clr-bg);
  font-family: var(--font-primary);
  font-size: var(--default-font-size, var(--txt-m));
  color: var(--clr-primary);
  display: flex;
  flex-direction: column;
}

header {
  display: grid;
  grid-template-columns: repeat(6, [col-start] 1fr);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  transform: translateY(0);
  transition: transform 0.4s ease-in-out;
}
@media (min-width: 768px) {
  header {
    width: 50%;
    position: fixed;
  }
}
header.header-scroll {
  transform: translateY(0);
  position: fixed;
}
header.header-hidden {
  transform: translateY(-100%);
}
header .logo {
  display: block;
  height: 100%;
}
@media (min-width: 768px) {
  header .logo {
    padding-block: var(--space-s);
  }
}

.wrapper__nav {
  grid-column: col-start 1/span 6;
  aspect-ratio: 6/1;
  background-color: var(--clr-primary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) {
  .wrapper__nav {
    aspect-ratio: 8/1;
    padding-inline: var(--space-m);
  }
}

.container__logo {
  height: 100%;
  width: 100%;
  padding-block: var(--space-s);
  padding-inline: var(--space-m);
}
@media (min-width: 768px) {
  .container__logo {
    padding-block: 0;
    padding-inline: 0;
  }
}
.container__logo img {
  height: 100%;
  width: auto;
}

.main_nav {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: absolute;
  left: 0;
  z-index: -1;
  top: 100%;
  height: 0;
  width: 100%;
  background-color: var(--clr-primary);
  border-top: 1px solid var(--clr-primary);
  transition: height 0.5s cubic-bezier(0.87, 0, 0.13, 1), border-top 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}
.main_nav.is-open {
  border-top: 1px solid var(--clr-bg);
  height: auto;
  height: calc-size(auto, size);
}
.main_nav__footer {
  padding-block-start: var(--space-l);
  padding-block-end: var(--space-m);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media (min-width: 768px) {
  .main_nav__footer {
    display: none;
    visibility: hidden;
  }
}
.main_nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: var(--h3);
  color: var(--clr-bg);
  text-decoration: none;
  padding-inline: var(--space-m);
  padding-block: calc(var(--section-space-xs) * 0.5);
  border-bottom: 1px solid var(--clr-bg);
  opacity: 0;
  transform: translateY(-20px);
  letter-spacing: var(--letter-spacing);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
@media (min-width: 768px) {
  .main_nav a {
    font-size: calc(var(--logo-height) * 0.72);
    padding-block: calc(var(--logo-height) * 0.1);
  }
}
.main_nav .nav_item[aria-label="La finca"] > div:nth-child(2) {
  margin-inline-end: 0.5ch;
}
.main_nav .nav_item[aria-label="Vacaciones activas"] > div:nth-child(10) {
  margin-inline-end: 0.5ch;
}
.main_nav.is-open a {
  opacity: 1;
  transform: translateY(0);
}
.main_nav_toggle {
  height: 100%;
  aspect-ratio: 0.75/1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
  position: absolute;
  right: var(--space-m);
}
@media (min-width: 768px) {
  .main_nav_toggle {
    aspect-ratio: 1/0.75;
    height: 50%;
  }
}
.main_nav_toggle span {
  --bar-height-mobile: 2px;
  --bar-height-tablet: 3px;
  height: var(--bar-height-mobile);
  width: 100%;
  background-color: var(--clr-bg);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s cubic-bezier(0.87, 0, 0.13, 1), background-color 0.3s ease-out;
}
@media (min-width: 768px) {
  .main_nav_toggle span {
    height: var(--bar-height-tablet);
  }
}
.main_nav_toggle span::before, .main_nav_toggle span::after {
  content: "";
  height: var(--bar-height-mobile);
  width: 100%;
  background-color: var(--clr-bg);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.5s cubic-bezier(0.87, 0, 0.13, 1);
}
@media (min-width: 768px) {
  .main_nav_toggle span::before, .main_nav_toggle span::after {
    height: var(--bar-height-tablet);
  }
}
.main_nav_toggle span::before {
  transform: translate(-50%, calc(var(--space-s) * -1.15));
}
@media (min-width: 768px) {
  .main_nav_toggle span::before {
    transform: translate(-50%, calc(var(--logo-height) / -3));
  }
}
.main_nav_toggle span::after {
  transform: translate(-50%, calc(var(--space-s) * 1.15));
}
@media (min-width: 768px) {
  .main_nav_toggle span::after {
    transform: translate(-50%, calc(var(--logo-height) / 3));
  }
}
.main_nav_toggle.is-open span {
  background-color: transparent;
}
.main_nav_toggle.is-open span::before {
  transform: translate(-50%, 0) rotate(45deg);
}
.main_nav_toggle.is-open span::after {
  transform: translate(-50%, 0) rotate(-45deg);
}

.languages {
  position: absolute;
  z-index: 999;
  display: none;
  top: 0;
  right: var(--space-s);
  height: var(--header-height-tablet);
}
@media (min-width: 768px) {
  .languages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.languages__mobile {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 20;
}
.languages__mobile__toggle {
  height: var(--txt-l);
  margin-inline-start: var(--space-m);
  margin-block: var(--section-space-s);
  display: flex;
  flex-direction: row;
  padding-inline-end: var(--space-xs);
}
.languages__mobile__toggle.is-open svg {
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}
.languages__mobile__toggle svg {
  fill: var(--clr-bg);
  width: var(--txt-l);
  transition: transform 0.3s ease-in-out;
}
.languages__mobile__toggle span {
  color: var(--clr-bg);
  font-size: var(--txt-m);
  font-weight: 700;
  text-transform: uppercase;
  margin-inline-start: calc(var(--space-xs) * 0.5);
}
.languages__mobile__menu {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: width 0.3s ease-in-out;
  width: 0;
}
.languages__mobile__menu.is-open {
  transition: width 0.3s ease-in-out;
  width: 100vw;
  background-color: var(--clr-primary);
}
.languages__mobile__menu a {
  color: var(--clr-bg);
  font-size: var(--txt-m);
  letter-spacing: 0;
  padding-inline: var(--space-s);
  border-bottom: none;
}
.languages__mobile__menu a:first-child {
  display: none;
}
@media (min-width: 768px) {
  .languages__mobile {
    display: none;
  }
}
@media (min-width: 768px) {
  .languages__toggle {
    cursor: pointer;
    display: block;
    width: var(--space-l);
    height: 100%;
  }
  .languages__toggle img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    transform: rotate(0deg);
    transition: transform 0.3s ease-in-out;
  }
}
.languages__toggle.is-open img {
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}
.languages__menu {
  display: none;
}
@media (min-width: 768px) {
  .languages__menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 0;
    overflow: hidden;
    position: absolute;
    top: var(--header-height-tablet);
    right: calc(var(--space-s) * -1);
    background-color: var(--clr-bg);
    width: calc(var(--space-xxl) + 2 * var(--space-s));
    transition: height 0.5s cubic-bezier(0.87, 0, 0.13, 1);
  }
  .languages__menu a {
    display: block;
    padding-inline: var(--space-m);
    padding-block: calc(var(--space-xs) * 0.25);
  }
  .languages__menu a:hover {
    border-bottom: 0 !important;
  }
  .languages__menu .active {
    font-weight: 700;
  }
}
.languages__menu.is-open {
  padding-block-start: 0;
  padding-block-end: var(--space-s);
  height: auto;
  height: calc-size(auto, size);
  transition: height 0.5s cubic-bezier(0.87, 0, 0.13, 1);
}

main {
  z-index: 0;
  display: flex;
  flex-direction: column;
  padding-block-start: var(--header-height);
}
@media (min-width: 768px) {
  main {
    padding-block-start: 0;
    flex-grow: 2;
  }
}

.tagline {
  padding-block: 0;
  padding-block: var(--space-s);
  padding-inline: var(--space-m);
  align-self: center;
  grid-column: col-start 7/span 6;
  grid-row: 1/2;
}
@media (min-width: 768px) {
  .tagline {
    padding-block: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
.tagline p {
  font-size: var(--txt-m);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-wrap: balance;
  max-inline-size: 45ch;
}
@media (min-width: 768px) {
  .tagline p {
    font-size: calc(var(--txt-m) * 0.85);
  }
}
.tagline-container {
  display: flex;
  width: 100%;
  z-index: 50;
  background-color: var(--clr-bg);
}
@media (min-width: 768px) {
  .tagline-container {
    aspect-ratio: 16/1;
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
  }
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content 2fr min-content;
  height: calc(100vh - var(--header-height));
  position: relative;
}
@media (min-width: 768px) {
  .hero-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
}
.hero-top {
  display: flex;
  flex-grow: 2;
  overflow: hidden;
  position: relative;
}
.hero-top video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.hero-top img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.hero-top::after {
  content: "";
  display: block;
  width: 70%;
  height: 25%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 15%;
  right: 5%;
}
.hero-overlay {
  position: absolute;
  z-index: 700;
  bottom: 0;
  right: 0;
  height: 90%;
  width: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .hero-overlay {
    left: 60%;
    width: 50%;
    height: 90%;
  }
}
.hero-illustration-overlay {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero-illustration-overlay img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
@media (min-width: 768px) {
  .hero-illustration-overlay {
    height: calc(100% - 8.3333333333vw);
  }
}
.hero-bottom {
  position: relative;
  z-index: 500;
}
.hero-left {
  grid-column: 1/span 6;
  aspect-ratio: 6/1;
  background-color: var(--clr-field-700);
  display: flex;
  align-items: center;
  padding-block-start: var(--space-s);
  padding-block-end: var(--space-xs);
  overflow: hidden;
  position: relative;
}
.hero-left h1,
.hero-left span {
  font-weight: 700;
  line-height: 1;
  font-size: clamp(6rem, 3rem + 12vw, 14rem);
  white-space: nowrap;
  color: var(--clr-bg);
  display: inline-block;
  position: relative;
  will-change: transform;
}
.hero-left:has(.background-image) {
  background-color: unset;
  padding-block: 0;
  aspect-ratio: 6/1;
}
.hero-right {
  grid-column: 1;
  aspect-ratio: 6/1;
  overflow: hidden;
}
@media (min-width: 768px) {
  .hero-right {
    grid-column: 7/span 6;
  }
}
.hero-right:has(h1) h1 {
  font-size: var(--h2);
}
.hero-bottom-left, .hero-bottom-right {
  width: 100%;
}
@media (min-width: 768px) {
  .hero-bottom-left, .hero-bottom-right {
    position: absolute;
    bottom: 0;
    width: 50%;
  }
}
.hero-bottom-left {
  left: 0;
}
.hero-bottom-right {
  right: 0;
}
.hero-bottom-left:has(h1), .hero-bottom-right:has(h1) {
  background-color: var(--clr-bg);
  padding-block: var(--section-space-s);
  padding-inline-start: var(--space-m);
  padding-inline-end: var(--space-l);
}
@media (min-width: 768px) {
  .hero-bottom-left:has(h1), .hero-bottom-right:has(h1) {
    paddgin-block: var(--section-space-m);
    padding-inline-start: var(--space-xl);
    padding-inline-end: var(--space-xxl);
  }
}
.hero-bottom-left:has(h1) h1, .hero-bottom-right:has(h1) h1 {
  font-size: var(--h2);
  margin-block-end: var(--section-space-m);
  text-wrap: pretty;
}
.hero-bottom-left:has(.background-image), .hero-bottom-right:has(.background-image) {
  display: none;
  aspect-ratio: 6/1;
}
@media (min-width: 768px) {
  .hero-bottom-left:has(.background-image), .hero-bottom-right:has(.background-image) {
    aspect-ratio: 6/1;
    display: block;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  background-color: var(--bg-color, var(--clr-bg));
  position: relative;
  overflow: hidden;
}
.grid > * {
  width: 100%;
  height: 100%;
}
.grid > *.span-2 {
  grid-column: span 2;
}
.grid > *.span-3 {
  grid-column: span 3;
}
.grid > *.span-4 {
  grid-column: span 4;
}
.grid > *.span-5 {
  grid-column: span 5;
}
.grid > *.span-6 {
  grid-column: span 6;
}
.grid:not(:first-of-type) {
  z-index: 1;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(12, [col-start] 1fr);
  }
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-overlay);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .overlay-bg {
    background-size: contain;
    background-position: top center;
  }
}

.column {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .column:nth-child(2) .blocks:has(h2):not(:has(.block-type-colorbg-text)) {
    padding-inline-start: var(--space-xl);
  }
}
@media (min-width: 768px) {
  .column:nth-child(2) .colorbg-text {
    padding-inline-start: var(--space-xl);
  }
}
@media (max-width: 768px) {
  .column:has(.blocks):has(.block-type-background-image:first-child) {
    grid-row: 2;
  }
}
@media (min-width: 768px) {
  .column {
    grid-column: span var(--span);
    grid-row: 1/var(--span);
  }
}

.blocks {
  height: 100%;
  position: relative;
}
.blocks > .block {
  width: 100%;
  position: relative;
}
.blocks > .block.block-type-background-image {
  height: 100%;
}
@media (max-width: 768px) {
  .blocks > .block.block-type-background-image {
    aspect-ratio: 1;
  }
}
@media (min-width: 1200px) {
  .blocks > .block.block-type-background-image {
    aspect-ratio: 4/3;
  }
}
.blocks > .block h2 {
  margin-block-end: var(--space-xl);
  text-wrap: pretty;
  -webkit-hyphens: manual;
          hyphens: manual;
}
.blocks > .block h2:has(+ h3) {
  margin-block-end: var(--space-l);
}
.blocks > .block h2:has(+ .fs-large) {
  margin-block-end: var(--section-space-l);
}
.blocks > .block p {
  margin-block-end: var(--space-l);
}
.blocks:has(h2):not(:has(.block-type-colorbg-text)), .blocks:has(> .block-type-text:first-child) {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--section-space-l);
  margin-block-end: var(--section-space-m);
  padding-inline: var(--space-m);
}
@media (min-width: 768px) {
  .blocks:has(h2):not(:has(.block-type-colorbg-text)), .blocks:has(> .block-type-text:first-child) {
    padding-inline-start: var(--space-l);
    padding-inline-end: var(--space-xl);
    margin-block-end: var(--section-space-xl);
  }
}
@media (min-width: 1200px) {
  .blocks:has(h2):not(:has(.block-type-colorbg-text)), .blocks:has(> .block-type-text:first-child) {
    justify-content: center;
  }
}
.blocks:has(.fs-big) {
  padding-inline-end: 0;
}
@media (min-width: 768px) {
  .blocks:has(.fs-big) .fs-big {
    margin-block-end: calc(var(--space-xl) * 1.5);
  }
}
@media (min-width: 768px) {
  .blocks:has(.fs-big) p {
    padding-inline-end: var(--space-xl);
  }
}
.blocks:has(.background-image) {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.blocks .block-type-image, .blocks .block-type-image-css {
  height: 100%;
}
.blocks .block-type-image-css {
  padding-block-end: var(--section-space-l);
}
@media (min-width: 768px) {
  .blocks .block-type-image-css {
    padding-block-end: 0;
  }
}
.blocks .block-type-gallery {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--bg-overlay);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 768px) {
  .blocks .block-type-gallery {
    background-size: unset;
    background-position: top center;
    aspect-ratio: unset;
    height: calc(var(--galleryHeight, 100vh) + 25vh);
    width: 100vw;
  }
}
.blocks .block-type-gallery figure {
  height: 100%;
  width: 100vw;
  transform: scale(0.6);
  overflow: hidden;
}
@media (min-width: 768px) {
  .blocks .block-type-gallery figure {
    height: 90vh;
    width: 93vw;
    position: absolute;
    top: 0;
  }
}
.blocks .block-type-gallery figure picture {
  height: 100%;
  width: 100%;
}
.blocks .block-type-gallery ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blocks .block-type-gallery li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  overflow: hidden;
}
.blocks .block-type-gallery li.is-active {
  opacity: 1;
}
.blocks .block-type-gallery li img {
  width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.blocks .block-type-button {
  width: 100%;
}
@media (min-width: 768px) {
  .blocks .block-type-button {
    width: -moz-fit-content;
    width: fit-content;
  }
}
.blocks .block-type-button:last-child {
  flex-grow: 2;
}
.blocks .block-type-button a {
  display: block;
  padding-block: calc(var(--section-space-xs) * 0.5);
  padding-inline: var(--space-m);
  text-decoration: none;
  font-size: var(--h4);
  font-weight: 600;
  color: var(--clr-primary);
  letter-spacing: var(--letter-spacing);
}
@media (min-width: 768px) {
  .blocks .block-type-button a {
    font-size: var(--h3);
    padding-inline: var(--space-l);
    padding-block: var(--section-space-xs);
    white-space: nowrap;
  }
}
.blocks .block-type-colorbg-text {
  height: 100%;
}
.blocks .block-type-text a {
  text-decoration: none;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--clr-primary);
}
.blocks:has(.block-type-button) {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .blocks:has(.block-type-button) {
    flex-direction: row;
  }
}

.colorbg-text {
  height: 100%;
  padding-block-start: var(--section-space-m);
  padding-block-end: var(--section-space-l);
  padding-inline: var(--space-m);
}
@media (min-width: 768px) {
  .colorbg-text {
    padding-inline-start: var(--space-xl);
    padding-inline-end: calc(var(--space-xxl) * 2.5);
  }
}
.colorbg-text h2 {
  margin-block-end: var(--space-m);
}
.colorbg-text h3 {
  font-weight: 400;
  font-size: var(--txt-l);
  margin-block-end: var(--space-l);
}
.colorbg-text ul {
  padding-inline-start: var(--space-m);
  list-style: none;
}
.colorbg-text ul li {
  position: relative;
  padding-inline-start: calc(var(--space-s) / 1);
  margin-block-end: var(--space-xs);
}
.colorbg-text ul li::before {
  content: "+";
  display: inline-block;
  width: 1em;
  height: 1em;
  position: absolute;
  left: calc(var(--space-s) * -1);
}
.colorbg-text[data-contrast=dark] {
  color: var(--clr-bg);
}
.colorbg-text[data-contrast=light] {
  color: var(--clr-black);
}
.colorbg-text .fs-large {
  font-size: var(--txt-l);
}
.colorbg-text .fs-large ul {
  padding-inline-start: var(--space-m);
}
.colorbg-text .fs-large ul li {
  margin-block-end: var(--space-l);
}

.background-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.background-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

figure {
  height: 100%;
  overflow: hidden;
  margin: 0;
}
figure[data-ratio] {
  aspect-ratio: var(--aspect-ratio);
}
figure[data-ratio] img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
figure[data-ratio=auto] {
  aspect-ratio: var(--w)/var(--h);
  max-width: 100%;
}
figure[data-ratio=auto] img {
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 768px) {
  .skip-gallery {
    position: unset;
    opacity: 0;
    bottom: calc(5vh + 25px);
    right: calc(3vw + 25px);
    width: var(--txt-xxl);
    cursor: pointer;
  }
  .skip-gallery svg {
    transition: fill 0.3s ease-in-out;
    fill: var(--clr-btn, var(--clr-bg));
  }
  .skip-gallery:hover svg {
    transition: fill 0.3s ease-in-out;
    fill: var(--clr-accent-orange);
  }
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.container-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 2;
}

.newsletter {
  grid-column: 1/-1;
  grid-row: 1/2;
  background-color: var(--clr-field-800);
  padding-inline: var(--space-m);
  padding-block-start: var(--section-space-l);
  padding-block-end: var(--section-space-xl);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .newsletter {
    flex-direction: row;
    align-items: center;
    padding-inline: var(--space-xl);
    padding-block-end: var(--section-space-xxl);
  }
}
.newsletter h3 {
  font-size: var(--h2);
  margin-block-end: var(--section-space-m);
  width: 100%;
}
.newsletter h4 {
  font-weight: 400;
  font-size: var(--h3);
  margin-block-end: var(--section-space-s);
}
@media (min-width: 768px) {
  .newsletter h4 {
    margin-block-end: 0;
    margin-inline-end: var(--space-l);
    grid-row: 1;
    grid-column: 1;
  }
}
.newsletter-form {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .newsletter-form {
    display: grid;
    width: 80%;
    grid-template-columns: max-content auto;
    align-items: center;
  }
}
.newsletter-form form {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: var(--space-l);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .newsletter-form form {
    flex-direction: row;
    flex-wrap: nowrap;
    grid-row: 1;
    grid-column: 2;
    padding-block: 0;
    align-items: unset;
  }
}
.newsletter-form form input:not([type=submit]) {
  border: none;
  padding-inline: var(--space-s);
  padding-block: var(--space-xs);
  border-radius: 0.5rem;
  font-size: var(--txt-m);
  flex-grow: 2;
  width: 100%;
}
@media (min-width: 768px) {
  .newsletter-form form input:not([type=submit]) {
    width: unset;
  }
}
@media (min-width: 768px) {
  .newsletter-form form button[type=submit],
  .newsletter-form form input[type=submit] {
    padding-block: var(--space-xs);
  }
}

.legal-text {
  margin-block-start: var(--section-space-m);
}
.legal-text p {
  font-size: var(--txt-s);
  -webkit-hyphens: none;
          hyphens: none;
}
@media (min-width: 768px) {
  .legal-text {
    max-inline-size: 40ch;
  }
}

footer {
  row-gap: var(--section-space-xs);
  margin-block-start: var(--section-space-xl);
  padding-block-end: var(--section-space-l);
  font-weight: 300;
}
@media (min-width: 768px) {
  footer {
    grid-template-rows: auto;
  }
}
footer .footer-logo {
  grid-column: 1;
  padding-inline-start: var(--space-m);
}
footer .footer-logo img {
  width: 60%;
  height: auto;
}
@media (min-width: 768px) {
  footer .footer-logo {
    grid-row: 1;
    grid-column: 1/span 3;
    padding-inline-start: var(--space-xl);
  }
  footer .footer-logo img {
    width: 100%;
  }
}
footer .address {
  padding-inline-start: var(--space-m);
  grid-column: 1;
  margin-block-end: var(--section-space-m);
}
@media (min-width: 768px) {
  footer .address {
    grid-row: 2;
    grid-column: 1/span 5;
    padding-inline-start: var(--space-xl);
  }
}
footer .footer-nav {
  grid-column: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  padding-inline-start: var(--space-m);
  -moz-column-count: 2;
       column-count: 2;
}
footer .footer-nav a {
  color: inherit;
  text-decoration: none;
  display: block;
  border-bottom: 2px solid transparent;
}
footer .footer-nav a:hover {
  border-bottom: none;
}
@media (min-width: 768px) {
  footer .footer-nav {
    grid-row: 2;
    grid-column: 7/span 5;
    -moz-column-gap: var(--space-xl);
         column-gap: var(--space-xl);
    padding-inline-start: 0;
  }
}

.btn-round {
  color: var(--clr-black);
  background-color: var(--clr-accent-orange);
  aspect-ratio: 1;
  padding: var(--space-s);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 900;
  top: calc(50vh - 36px);
  right: 5vw;
  transition: background-color 0.3s ease-in-out;
  text-decoration: none;
}
.btn-round span {
  text-transform: uppercase;
  font-size: var(--txt-s);
  letter-spacing: 0.1em;
  font-weight: 700;
}
@media (min-width: 768px) {
  .btn-round span {
    font-size: var(--txt-m);
  }
}
.btn-round:hover {
  background-color: var(--clr-accent-orange-light);
  transition: background-color 0.3s ease-in-out;
}
@media (min-width: 768px) {
  .btn-round[data-position=top-left] {
    top: calc(var(--space-xxl) * 2.5);
    bottom: unset;
    left: var(--space-xl);
    right: unset;
  }
}
@media (min-width: 768px) {
  .btn-round[data-position=top-right] {
    top: calc(8.3333333333vw + var(--space-xl));
    bottom: unset;
    right: var(--space-xl);
    left: unset;
  }
}
@media (min-width: 768px) {
  .btn-round[data-position=middle-left] {
    top: 50%;
    bottom: unset;
    left: var(--space-xl);
    right: unset;
  }
}
@media (min-width: 768px) {
  .btn-round[data-position=middle-right] {
    top: 50%;
    bottom: unset;
    right: var(--space-xl);
    left: unset;
  }
}
@media (min-width: 768px) {
  .btn-round[data-position=bottom-left] {
    top: unset;
    bottom: calc(8.3333333333vw + var(--space-xl));
    left: var(--space-xl);
    right: unset;
  }
}
@media (min-width: 768px) {
  .btn-round[data-position=bottom-right] {
    top: unset;
    bottom: calc(8.3333333333vw + var(--space-xl));
    right: var(--space-xl);
    left: unset;
  }
}
.btn:visited {
  color: inherit;
}

.accordion {
  margin-block-start: var(--section-space-m);
}
.accordion-item {
  border-bottom: 1px solid var(--clr-primary);
}
.accordion-item:first-child {
  border-top: 1px solid var(--clr-primary);
}
.accordion-item.is-active .accordion-content {
  height: auto;
  max-height: 1000px;
  transition: max-height 0.3s ease-in-out;
}
.accordion-icon {
  display: inline-block;
  width: var(--space-m);
  height: 1px;
  background-color: var(--clr-primary);
  margin-inline-end: var(--space-m);
  position: relative;
}
.accordion-icon:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--clr-primary);
  position: absolute;
  transform: rotate(-90deg);
  transition: transform 0.15s linear;
}
.accordion-header {
  font-size: var(--h4);
  font-weight: 400;
  text-align: left;
  padding-block: calc(var(--space-xs) / 2);
  padding-inline: calc(var(--space-xs) / 2);
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  cursor: pointer;
}
.accordion-header[aria-expanded=true] .accordion-icon:after {
  transform: rotate(0deg);
  transition: transform 0.15s linear;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  padding-inline-start: calc(var(--space-xl) + var(--space-xs) / 2);
  padding-inline-end: var(--space-m);
  padding-block-start: calc(var(--space-xs) / 2);
}

.download {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-block-start: var(--section-space-xs);
}
.download-icon {
  height: var(--txt-xxl);
  width: auto;
  margin-inline-end: var(--space-s);
}

form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: var(--space-xl);
}
form > * {
  width: 100%;
}
@media (min-width: 768px) {
  form {
    row-gap: var(--space-xxl);
  }
}

.field {
  position: relative;
}
.field label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--txt-m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease-in-out;
}
.field input,
.field textarea {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--clr-black);
  padding-inline: 0;
  font-size: var(--txt-m);
}
@media (min-width: 768px) {
  .field input,
  .field textarea {
    width: 80%;
  }
}
.field input:not([type=date]):not(:-moz-placeholder) + label, .field textarea:not([type=date]):not(:-moz-placeholder) + label {
  font-size: var(--txt-s);
  top: 100%;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.field input:not([type=date]):not(:placeholder-shown) + label, .field input.has-value + label, .field input:focus-visible + label,
.field textarea:not([type=date]):not(:placeholder-shown) + label,
.field textarea.has-value + label,
.field textarea:focus-visible + label {
  font-size: var(--txt-s);
  top: 100%;
  transition: all 0.3s ease-in-out;
}
.field input:focus,
.field textarea:focus {
  outline: none;
}

button[type=submit],
input[type=submit] {
  background-color: var(--clr-black);
  color: var(--clr-white);
  border-radius: var(--border-radius);
  padding-block: var(--space-xs);
  padding-inline: var(--space-l);
  font-size: var(--txt-m);
  text-transform: uppercase;
  letter-spacing: 2px;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--clr-primary);
}
@media (min-width: 768px) {
  button[type=submit],
  input[type=submit] {
    padding-block: calc(var(--space-xs) / 3);
    padding-inline: var(--space-m);
    grid-column: 7/span 6;
    grid-row: 9;
    margin-inline-start: calc(var(--space-xl) + 0.5rem);
    align-self: flex-start;
  }
}
button[type=submit][aria-disabled=true],
input[type=submit][aria-disabled=true] {
  cursor: not-allowed;
  border: 1px solid var(--clr-primary);
  background-color: transparent;
  color: var(--clr-primary);
}

.content {
  margin-block-start: var(--header-height);
  padding-inline: var(--space-m);
  padding-block-start: var(--section-space-s);
  padding-block-end: var(--section-space-l);
}
@media (min-width: 768px) {
  .content {
    padding-inline: var(--space-xl);
    padding-block: var(--section-space-l);
    margin-block-start: 0;
  }
  .content:before {
    content: "";
    aspect-ratio: 12/1;
    display: block;
  }
}
.content h1 {
  font-size: var(--h2);
  margin-block-end: var(--space-l);
}
.content h2 {
  font-size: var(--h4);
}
.content h2 + h2 {
  margin-block-start: var(--space-l);
}
.content h2 + p {
  margin-block-start: var(--space-s);
}
.content h3 {
  font-size: var(--h5);
}
.content p {
  --txt-m-length: 65ch;
  max-inline-size: var(--txt-m-length);
  margin-block-end: var(--space-m);
}
.content p + h2 {
  margin-block-start: var(--space-xl);
}
.content ul {
  --txt-m-length: 60ch;
  list-style-type: none;
}
.content ul li {
  position: relative;
  max-inline-size: var(--txt-m-length);
}
.content ul li::before {
  content: "−";
  position: absolute;
  inset-inline-start: calc(var(--space-m) * -1);
}
.content ul + h2 {
  margin-block-start: var(--space-xl);
}

.socials__mobile {
  display: flex;
  flex-direction: row;
  grid-gap: var(--space-l);
  position: absolute;
  left: 27%;
  z-index: 10;
}
.socials__mobile a {
  border-bottom: none;
  text-decoration: none;
  height: var(--txt-l);
  padding: 0;
  aspect-ratio: 1;
}
.socials__mobile a svg {
  width: 100%;
  height: 100%;
  fill: var(--clr-bg);
}
@media (min-width: 768px) {
  .socials__mobile {
    display: none;
    visibility: hidden;
  }
}
.socials__desktop {
  display: none;
  visibility: hidden;
}
@media (min-width: 768px) {
  .socials__desktop {
    visibility: visible;
    grid-column: 12;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    grid-gap: var(--space-s);
  }
  .socials__desktop a {
    border-bottom: none;
    text-decoration: none;
    height: var(--txt-l);
    padding: 0;
    aspect-ratio: 1;
  }
  .socials__desktop a svg {
    width: 100%;
    height: 100%;
    fill: var(--clr-primary);
    transition: fill 0.3s ease-in-out;
  }
  .socials__desktop a:hover svg {
    fill: var(--clr-accent-orange);
    transition: fill 0.3s ease-in-out;
  }
}

/*# sourceMappingURL=style.css.map */