/* =====================================================
   FEATHERS IN THE MIST
   MAIN STYLESHEET
   ===================================================== */


/* =====================================================
   VARIABLES
   ===================================================== */

:root {
  --olive: #4b5320;
  --olive-light: #717941;
  --forest: #182016;
  --forest-2: #222b1c;
  --cream: #f2eee4;
  --paper: #faf7ef;
  --ink: #202218;
  --muted: #aab096;
  --line: rgba(255,255,255,.16);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
}


/* =====================================================
   RESET / GLOBAL
   ===================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--forest);
  color: #fff;

  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;

  overflow-x: hidden;
}


/* Bloquear página detrás del menú móvil */

body.menu-open {
  overflow: hidden !important;
}


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


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


.container {
  width: min(1180px, calc(100% - 48px));
  margin: auto;
}


.relative {
  position: relative;
  z-index: 2;
}


/* =====================================================
   TEXTURE
   ===================================================== */

.noise {
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 99;

  opacity: .035;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}


/* =====================================================
   HEADER
   ===================================================== */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 94px;

  padding: 0 4vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 50;

  transition: .45s ease;

  border-bottom: 1px solid transparent;
}


/* Header después de hacer scroll */

.site-header.scrolled {
  height: 74px;

  background: rgba(22,29,18,.82);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom-color: rgba(255,255,255,.08);
}


/* =====================================================
   LOGO
   ===================================================== */

.brand {
  width: 180px;

  position: relative;
  z-index: 52;
}


.brand img {
  width: 100%;
  height: 70px;

  object-fit: contain;
  object-position: left center;

  filter: brightness(1.15);
}


/* =====================================================
   DESKTOP NAVIGATION
   ===================================================== */

.main-nav {
  display: flex;
  align-items: center;

  gap: 31px;

  text-transform: uppercase;

  font-size: 11px;
  letter-spacing: .17em;
  font-weight: 500;
}


.main-nav > a {
  opacity: .83;

  transition: .25s;
}


.main-nav > a:hover {
  opacity: 1;
}


.nav-cta {
  padding: 13px 18px;

  border:
    1px solid rgba(223,226,190,.45);

  background:
    rgba(75,83,32,.48);
}


/* =====================================================
   MOBILE MENU BUTTON
   ===================================================== */

.menu-toggle {
  display: none;

  background: none;
  border: 0;

  width: 40px;
  height: 40px;

  position: relative;

  cursor: pointer;

  z-index: 52;
}


.menu-toggle span {
  position: absolute;

  left: 8px;

  width: 24px;
  height: 1px;

  background: white;

  transition: .3s;
}


.menu-toggle span:first-child {
  top: 15px;
}


.menu-toggle span:last-child {
  top: 24px;
}


/* =====================================================
   PARALLAX
   ===================================================== */

.parallax-section {
  position: relative;
  overflow: hidden;
}


.parallax-bg {
  position: absolute;

  inset: -12%;

  background-size: cover;
  background-position: center;

  will-change: transform;
}


/* =====================================================
   GENERAL OVERLAY
   ===================================================== */

.overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(9,13,7,.82) 0%,
      rgba(9,13,7,.54) 42%,
      rgba(9,13,7,.1) 72%,
      rgba(9,13,7,.28) 100%
    );
}


/* =====================================================
   HERO
   ===================================================== */

.hero {
  height: 100svh;
  min-height: 740px;

  display: flex;
  align-items: center;
}


.hero-bg {
  background-image:
    url('assets/bg-hero.png');
}


.hero-content {
  position: relative;

  z-index: 2;

  padding-top: 70px;
}


/* =====================================================
   EYEBROW
   ===================================================== */

.eyebrow {
  margin: 0 0 24px;

  text-transform: uppercase;

  letter-spacing: .25em;

  font-size: 11px;
  font-weight: 500;

  color: #d8dfae;
}


.eyebrow.dark {
  color: var(--olive);
}


.eyebrow.center {
  text-align: center;
}


/* =====================================================
   TITLES
   ===================================================== */

.hero h1,
.section-title,
h2 {
  font-family: var(--serif);

  font-weight: 400;

  letter-spacing: .01em;
}


.hero h1 {
  max-width: 820px;

  margin: 0 0 34px;

  font-size:
    clamp(58px, 7vw, 105px);

  line-height: .84;

  text-transform: uppercase;
}


.hero-copy {
  max-width: 560px;

  color: #e7eadf;

  font-size: 16px;
}


/* =====================================================
   HERO ACTIONS
   ===================================================== */

.hero-actions {
  display: flex;
  align-items: center;

  gap: 32px;

  margin-top: 34px;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 16px 23px;

  text-transform: uppercase;

  letter-spacing: .15em;

  font-size: 10px;
  font-weight: 600;

  border: 0;

  cursor: pointer;

  transition: .3s;
}


.btn-primary {
  background: var(--olive);

  color: white;
}


.btn-primary:hover {
  background: #626b2b;

  transform: translateY(-2px);
}


/* =====================================================
   TEXT LINKS
   ===================================================== */

.text-link {
  text-transform: uppercase;

  font-size: 10px;
  font-weight: 500;

  letter-spacing: .14em;
}


.text-link span {
  margin-left: 8px;
}


/* =====================================================
   SCROLL CUE
   ===================================================== */

.scroll-cue {
  position: absolute;

  z-index: 2;

  bottom: 28px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .2em;
}


.scroll-cue span {
  display: block;

  width: 18px;
  height: 28px;

  border:
    1px solid rgba(255,255,255,.55);

  border-radius: 20px;

  position: relative;
}


.scroll-cue span::after {
  content: "";

  position: absolute;

  width: 2px;
  height: 5px;

  background: white;

  left: 7px;
  top: 5px;

  border-radius: 2px;

  animation:
    scroll 1.6s infinite;
}


@keyframes scroll {

  0% {
    opacity: 0;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }

}


/* =====================================================
   LIGHT SECTIONS
   ===================================================== */

.section-light,
.section-cream {
  color: var(--ink);

  background: var(--paper);
}


/* =====================================================
   INTRO
   ===================================================== */

.intro {
  padding: 110px 0;
}


.split {
  display: grid;

  grid-template-columns:
    .85fr 1.35fr;

  gap: 80px;

  align-items: center;
}


.intro-copy h2,
.birds-copy h2,
.plan-copy h2 {
  margin: 0 0 26px;

  font-size:
    clamp(54px, 6vw, 82px);

  line-height: .9;

  text-transform: uppercase;
}


.rule {
  width: 50px;
  height: 1px;

  margin: 28px 0;

  background: var(--olive);
}


.intro-copy p {
  max-width: 520px;

  color: #55594d;
}


.accent-copy {
  color: var(--ink) !important;
}


/* =====================================================
   INTRO IMAGE
   ===================================================== */

.parallax-window {
  height: 560px;

  position: relative;

  overflow: hidden;
}


.intro-bg {
  background-image:
    linear-gradient(
      90deg,
      rgba(250,247,239,.15),
      transparent
    ),
    url('assets/home1.png');
}


/* =====================================================
   DARK SECTIONS
   ===================================================== */

.section-dark {
  background: var(--forest);

  color: #fff;
}


/* =====================================================
   EXPERIENCE
   ===================================================== */

.experience {
  padding: 110px 0 120px;
}


.section-title {
  max-width: 100%;

  margin: 0 auto 55px;

  text-align: center;

  font-size:
    clamp(42px, 5vw, 66px);

  line-height: 1;
}


.dark-title {
  color: var(--ink);
}


.experience-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 19px;
}


.feature-card {
  text-align: center;
}


.feature-image {
  height: 280px;

  margin-bottom: 24px;

  background-size: cover;
  background-position: center;

  filter:
    saturate(.82)
    contrast(1.02);
}


.feature-image.birding {
  background-image:
    url('assets/birding.png');
}


.feature-image.photography {
  background-image:
    url('assets/photography.png');
}


.feature-image.culture {
  background-image:
    url('assets/culture.png');
}


.feature-image.food {
  background-image:
    url('assets/food.png');
}


.feature-index {
  font-family: var(--serif);

  color: #aeb674;

  font-size: 30px;
}


.feature-card h3 {
  margin: 5px 0 9px;

  font-family: var(--serif);

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: .12em;

  font-size: 23px;
}


.feature-card p {
  padding: 0 8px;

  color: #bfc5b4;

  font-size: 12px;
  line-height: 1.75;
}


/* =====================================================
   ALL INCLUSIVE
   ===================================================== */

.section-cream {
  background: var(--cream);
}


.inclusive {
  padding: 90px 0 100px;
}


.inclusive-grid {
  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  margin-top: 55px;
}


.included {
  padding: 0 22px;

  text-align: center;

  border-right:
    1px solid rgba(38,42,28,.12);
}


.included:last-child {
  border-right: 0;
}


.included span {
  font-family: var(--serif);

  font-size: 28px;

  color: var(--olive);
}


.included h3 {
  margin: 9px 0 13px;

  font-family: var(--serif);

  font-weight: 500;

  font-size: 20px;

  line-height: 1.1;
}


.included p {
  color: #6d7166;

  font-size: 11px;

  line-height: 1.65;
}


/* =====================================================
   JOURNEYS
   ===================================================== */

.journeys {
  padding: 110px 0 125px;
}


.journeys-bg {
  background-image:
    url('https://images.unsplash.com/photo-1473445361085-b9a07f55608b?auto=format&fit=crop&w=2200&q=85');

  opacity: .28;
}


.section-overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      rgba(13,18,10,.78),
      rgba(13,18,10,.9)
    );
}


.journey-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 23px;
}


.journey-card {
  position: relative;

  overflow: hidden;

  background:
    rgba(15,20,12,.78);

  border:
    1px solid rgba(255,255,255,.13);

  transition: .35s;
}


.journey-card:hover {
  transform: translateY(-7px);

  border-color:
    rgba(190,199,129,.42);
}


.journey-image {
  height: 310px;

  background-size: cover;
  background-position: center;

  transition:
    transform .7s;
}


.journey-card:hover .journey-image {
  transform: scale(1.04);
}


.journey-1 {
  background-image:
    url('assets/escape.png');
}


.journey-2 {
  background-image:
    url('assets/mist.png');
}


.journey-3 {
  background-image:
    url('assets/cr.png');
}


.journey-body {
  padding: 28px 27px 31px;
}


.duration {
  color: #aeb674;

  font-size: 10px;

  letter-spacing: .15em;

  text-transform: uppercase;
}


.journey-body h3 {
  margin: 7px 0 13px;

  font-family: var(--serif);

  font-weight: 400;

  font-size: 28px;

  text-transform: uppercase;
}


.journey-body p {
  min-height: 60px;

  color: #b9beaf;

  font-size: 12px;
}


.journey-body a {
  display: inline-block;

  margin-top: 10px;

  color: #d9df9b;

  font-size: 10px;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.tag {
  position: absolute;

  z-index: 3;

  right: 15px;
  top: 15px;

  padding: 7px 10px;

  background: var(--olive);

  font-size: 8px;

  letter-spacing: .14em;

  text-transform: uppercase;
}


/* =====================================================
   BIRDS
   ===================================================== */

.birds {
  padding: 120px 0;
}


.birds-layout {
  display: grid;

  grid-template-columns:
    .8fr 1.3fr;

  gap: 80px;

  align-items: center;
}


.birds-copy p {
  color: #5f6357;
}


.dark-link {
  color: var(--olive);
}


.birds-collage {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  grid-template-rows:
    260px 260px;

  gap: 14px;
}


.bird-panel {
  background-size: cover;

  background-position: center;
}


.bird-a {
  grid-row: span 2;

  background-image:
    url('assets/quetzal.png');
}


.bird-b {
  background-image:
    url('assets/humming.png');
}


.bird-c {
  background-image:
    url('assets/silky.png');
}


/* =====================================================
   STORY
   ===================================================== */

.story {
  min-height: 720px;

  display: flex;

  align-items: center;
}


.story-bg {
  background-image:
    url('assets/base.png');
}


.story-content {
  position: relative;

  z-index: 2;
}


.story-content h2 {
  max-width: 830px;

  margin: 0 0 30px;

  font-size:
    clamp(52px, 6vw, 86px);

  line-height: .94;
}


.story-content p {
  max-width: 660px;

  color: #e4e7dd;
}


/* =====================================================
   PLAN YOUR JOURNEY
   ===================================================== */

.plan {
  padding: 110px 0;
}


.plan-grid {
  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  gap: 100px;

  align-items: start;
}


.plan-copy p {
  color: #64685d;
}


/* =====================================================
   FORM
   ===================================================== */

.journey-form {
  display: grid;

  gap: 18px;

  padding: 38px;

  background: #fff;

  border:
    1px solid rgba(39,43,28,.12);

  box-shadow:
    0 30px 70px
    rgba(53,54,38,.09);
}


.field-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 17px;
}


label {
  color: #5c6054;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: .14em;

  text-transform: uppercase;
}


input,
select,
textarea {
  width: 100%;

  margin-top: 8px;

  padding: 11px 2px;

  border: 0;

  border-bottom:
    1px solid #ced0c7;

  border-radius: 0;

  background: #fff;

  color: #202218;

  font:
    400 14px
    var(--sans);

  outline: none;
}


textarea {
  padding: 14px;

  border:
    1px solid #d5d7ce;

  resize: vertical;
}


input:focus,
select:focus,
textarea:focus {
  border-color:
    var(--olive);
}


.form-button {
  justify-self: start;

  margin-top: 6px;
}


.form-note {
  margin: 0;

  color: #8b8e84;

  font-size: 10px;
}


/* =====================================================
   FOOTER
   ===================================================== */

footer {
  padding: 65px 0 28px;

  background: #151b12;
}


.footer-grid {
  display: grid;

  grid-template-columns:
    1.4fr .7fr 1fr .8fr;

  gap: 60px;
}


.footer-brand img {
  width: 220px;
  height: 110px;

  object-fit: contain;
  object-position: left center;
}


.footer-title {
  margin-bottom: 14px;

  color: #c5ca9d;

  font-size: 10px;

  letter-spacing: .17em;

  text-transform: uppercase;
}


footer a,
footer span {
  display: block;

  margin: 7px 0;

  color: #aeb3a7;

  font-size: 12px;
}


.footer-bottom {
  display: flex;

  justify-content: space-between;

  margin-top: 42px;

  padding-top: 22px;

  border-top:
    1px solid rgba(255,255,255,.08);
}


/* =====================================================
   REVEAL ANIMATION
   ===================================================== */

.reveal {
  opacity: 0;

  transform:
    translateY(34px);

  transition:
    opacity .9s
      cubic-bezier(.2,.75,.25,1),
    transform .9s
      cubic-bezier(.2,.75,.25,1);
}


.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 980px) {

  .experience-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .inclusive-grid {
    grid-template-columns:
      repeat(3, 1fr);

    row-gap: 38px;
  }


  .included:nth-child(3) {
    border-right: 0;
  }


  .journey-grid {
    grid-template-columns: 1fr;
  }


  .journey-image {
    height: 420px;
  }


  .split,
  .birds-layout,
  .plan-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }


  .parallax-window {
    height: 480px;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 780px) {


  /* ---------------------------------
     PAGE
     --------------------------------- */

  .container {
    width:
      min(
        calc(100% - 32px),
        1180px
      );
  }


  /* ---------------------------------
     HEADER
     --------------------------------- */

  .site-header {
    height: 76px;

    padding:
      env(safe-area-inset-top)
      16px
      0;

    transition:
      height .35s ease,
      background .35s ease,
      border-color .35s ease;
  }


  .site-header.scrolled {
    height: 76px;
  }


  /* ---------------------------------
     LOGO
     --------------------------------- */

  .brand {
    width: 145px;
  }


  .brand img {
    height: 64px;
  }


  /* ---------------------------------
     HAMBURGER
     --------------------------------- */

  .menu-toggle {
    display: block;
  }


  /* ---------------------------------
     MOBILE NAVIGATION
     --------------------------------- */

  .main-nav {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;

    height: 100dvh !important;
    min-height: 100dvh !important;

    padding:
      calc(115px + env(safe-area-inset-top))
      28px
      calc(50px + env(safe-area-inset-bottom))
      28px !important;

    display: flex !important;

    flex-direction: column;

    justify-content:
      flex-start !important;

    align-items: center;

    gap: 24px;

    background:
      linear-gradient(
        180deg,
        rgba(20,27,16,.995) 0%,
        rgba(12,17,10,1) 100%
      ) !important;

    backdrop-filter:
      blur(16px);

    -webkit-backdrop-filter:
      blur(16px);

    overflow-y: auto;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;

    z-index: 51;

    transform:
      translateY(-100%);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
      transform .45s ease,
      opacity .35s ease,
      visibility .35s ease;
  }


  /* ---------------------------------
     OPEN MENU
     --------------------------------- */

  body.menu-open .main-nav {
    transform:
      translateY(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }


  /*
     Mantener logo y botón
     encima del panel del menú
  */

  body.menu-open .site-header {
    position: fixed !important;

    top: 0 !important;
    left: 0;
    right: 0;

    width: 100%;

    height:
      calc(
        94px +
        env(safe-area-inset-top)
      ) !important;

    padding:
      env(safe-area-inset-top)
      16px
      0;

    background:
      transparent !important;

    backdrop-filter: none;

    -webkit-backdrop-filter:
      none;

    border-bottom-color:
      transparent;

    z-index: 52;
  }


  body.menu-open .brand,
  body.menu-open .menu-toggle {
    position: relative;

    z-index: 53;
  }


  /* ---------------------------------
     MENU LINKS
     --------------------------------- */

  .main-nav > a {
    flex-shrink: 0;

    opacity: 1;

    font-family:
      var(--serif);

    font-size: 24px;

    font-weight: 400;

    line-height: 1.2;

    letter-spacing: .08em;

    text-align: center;
  }


  /* ---------------------------------
     MOBILE CTA
     --------------------------------- */

  .main-nav .nav-cta {
    width:
      min(100%, 430px);

    margin-top: 8px;

    padding: 17px 22px;

    border:
      1px solid
      rgba(200,207,147,.55);

    background:
      rgba(75,83,32,.25);

    font-family:
      var(--sans);

    font-size: 11px;

    letter-spacing: .14em;
  }


  /* ---------------------------------
     X ANIMATION
     --------------------------------- */

  body.menu-open
  .menu-toggle
  span:first-child {

    top: 20px;

    transform:
      rotate(45deg);
  }


  body.menu-open
  .menu-toggle
  span:last-child {

    top: 20px;

    transform:
      rotate(-45deg);
  }


  /* ---------------------------------
     HERO
     --------------------------------- */

  .hero {
    min-height: 720px;
  }


  /*
     Priorizar la zona derecha
     donde está el quetzal
  */

  .hero-bg {
    background-position:
      73% center !important;
  }


  .hero-content {
    padding-top: 90px;
    padding-bottom: 75px;
  }


  .hero h1 {
    max-width: 94%;

    font-size:
      clamp(48px, 14vw, 76px);
  }


  .hero-copy {
    max-width: 90%;

    font-size: 14px;
  }


  .hero-actions {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }


  /*
     Overlay ligeramente
     más fuerte en móvil
  */

  .hero .overlay {
    background:
      linear-gradient(
        90deg,
        rgba(9,13,7,.80) 0%,
        rgba(9,13,7,.62) 50%,
        rgba(9,13,7,.20) 100%
      );
  }


  /* ---------------------------------
     MAIN SECTIONS
     --------------------------------- */

  .intro,
  .experience,
  .birds,
  .plan {
    padding: 85px 0;
  }


  /* ---------------------------------
     EXPERIENCE
     --------------------------------- */

  .experience-grid {
    grid-template-columns: 1fr;
  }


  .feature-image {
    height: 380px;
  }


  /* ---------------------------------
     ALL INCLUSIVE
     --------------------------------- */

  .inclusive-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .included,
  .included:nth-child(3) {

    border-right: 0;

    border-bottom:
      1px solid
      rgba(38,42,28,.1);

    padding-bottom: 28px;
  }


  /* ---------------------------------
     BIRDS
     --------------------------------- */

  .birds-collage {
    grid-template-rows:
      210px 210px;
  }


  /* ---------------------------------
     JOURNEYS
     --------------------------------- */

  .journey-image {
    height: 300px;
  }


  /* ---------------------------------
     FORM
     --------------------------------- */

  .field-row {
    grid-template-columns: 1fr;
  }


  /* ---------------------------------
     FOOTER
     --------------------------------- */

  .footer-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-bottom {
    flex-direction: column;

    gap: 12px;
  }

}


/* =====================================================
   VERY SMALL MOBILE DEVICES
   ===================================================== */

@media (max-width: 430px) {

  .main-nav {
    gap: 20px;

    padding-top:
      calc(
        105px +
        env(safe-area-inset-top)
      ) !important;
  }


  .main-nav > a {
    font-size: 21px;
  }


  .main-nav .nav-cta {
    padding: 15px 18px;

    font-size: 10px;
  }


  .hero h1 {
    font-size:
      clamp(44px, 13vw, 62px);
  }


  .feature-image {
    height: 330px;
  }


  .inclusive-grid {
    grid-template-columns: 1fr;
  }


  .birds-collage {
    grid-template-columns: 1fr;

    grid-template-rows:
      390px 230px 230px;
  }


  .bird-a {
    grid-row: auto;
  }


  .footer-grid {
    grid-template-columns: 1fr;
  }

}