.page-tail {
  --page-tail-content: rgba(247,243,235,.66);
  --page-tail-content-strong: rgba(247,243,235,.94);
  --page-tail-line: rgba(247,243,235,.10);
  --page-tail-footer-text: rgba(247,243,235,.70);
  --page-tail-footer-strong: rgba(247,243,235,.92);
  --page-tail-footer-line: rgba(247,243,235,.07);
  --page-tail-footer-separator: rgba(247,243,235,.18);
  --page-tail-footer-muted: rgba(247,243,235,.46);

  position: relative;
  z-index: 30;
  width: 100%;
  color: var(--page-tail-content);
  background: var(--page-tail-bg, #08090a);
}

.page-tail[data-tail-content-tone="dark"] {
  --page-tail-content: rgba(18,18,18,.64);
  --page-tail-content-strong: rgba(18,18,18,.92);
  --page-tail-line: rgba(18,18,18,.11);
  --page-tail-footer-text: rgba(18,18,18,.66);
  --page-tail-footer-strong: rgba(18,18,18,.92);
  --page-tail-footer-line: rgba(18,18,18,.09);
  --page-tail-footer-separator: rgba(18,18,18,.20);
  --page-tail-footer-muted: rgba(18,18,18,.48);
}

.page-tail--home {
  --page-tail-bg: #08090a;
}

.page-tail--cosmos {
  --page-tail-bg: #06080b;
}

.page-tail--naturae {
  --page-tail-bg: #0e120f;
}

.page-tail--instantes {
  --page-tail-bg: #111111;
}

.page-tail--sonus {
  --page-tail-bg: #070707;
}

.page-tail--acerca {
  --page-tail-bg: #090909;
}

.page-tail--contacto {
  --page-tail-bg: #080808;
}

.page-journey {
  --journey-text: var(--page-tail-content);
  --journey-line: var(--page-tail-line);

  position: relative;
  width: 100%;
  padding: clamp(42px, 5vw, 68px) clamp(24px, 5vw, 72px) 12px;
  color: var(--journey-text);
  background: transparent;
font-family: "Inter", Arial, sans-serif;
}

.page-journey__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 36px;
}

.page-journey__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
  color: inherit;
  text-decoration: none;
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s ease;
}

.page-journey__link:hover,
.page-journey__link:focus-visible {
  color: var(--page-tail-content-strong);
}

.page-journey__link--prev { justify-self: start; }
.page-journey__link--next { justify-self: end; }

.page-journey__arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.page-journey__link--prev:hover .page-journey__arrow,
.page-journey__link--prev:focus-visible .page-journey__arrow {
  transform: translateX(-8px);
}

.page-journey__link--next:hover .page-journey__arrow,
.page-journey__link--next:focus-visible .page-journey__arrow {
  transform: translateX(8px);
}

/* El enlace forma parte del cierre artístico de cada página. */
.back-to-home {
  position: relative;
  z-index: 3;
  margin-top: clamp(34px, 5vh, 62px);
}

.back-to-home__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 178px;
  padding: 0 0 12px;
  color: inherit;
text-decoration: none;
  font: 400 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .25s ease, transform .25s ease;
}

.back-to-home__link:hover,
.back-to-home__link:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
}

/* Última sala horizontal de la Home */
.home-end-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #08090a;
  pointer-events: auto;
}

.home-end-panel__media,
.home-end-panel__shade,
.home-end-panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-end-panel__media {
  z-index: 0;
  overflow: hidden;
  background: #08090a;
}

.home-end-panel__video {
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 900ms ease;
}

.home-end-panel__video.is-ready {
  opacity: 1;
}

.home-end-panel__shade {
  background: rgba(0, 0, 0, .22);
  pointer-events: none;
}

.home-end-panel .page-tail {
  position: relative;
  z-index: 2;
  width: 100%;
  background: linear-gradient(to top, rgba(5, 6, 7, .66), rgba(5, 6, 7, 0));
}

@media (max-width: 760px) {

  #page-journey,
  #page-journey[data-journey-ready="true"],
  .page-journey,
  .page-journey__row {
    display: block;
    width: 100%;
    visibility: visible;
    opacity: 1;
  }

  .page-journey__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .page-journey__link {
    position: relative;
    z-index: 4;
    max-width: 100%;
  }
  .page-journey {
    padding: 34px 20px 9px;
  }

  .page-journey__link {
    gap: 8px;
    font-size: 8px;
    letter-spacing: .10em;
  }

  .back-to-home {
    margin-top: 34px;
  }

  .back-to-home__link {
    min-width: 154px;
    font-size: 8px;
  }

  .home-end-panel {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 100svh;
    aspect-ratio: auto;
    margin: 0;
    align-items: flex-end;
    border-bottom: 0;
    opacity: 1;
    transform: none;
    transition: none;
    background: #08090a;
  }

  .home-end-panel__media {
    display: block;
  }

  .home-end-panel__video {
    object-position: center center;
    transform: scale(1.015);
  }

  .home-end-panel__shade {
    background:
      linear-gradient(to top, rgba(4,5,6,.88) 0%, rgba(4,5,6,.48) 31%, rgba(4,5,6,.12) 62%, rgba(4,5,6,.24) 100%),
      linear-gradient(90deg, rgba(4,5,6,.18), transparent 45%, rgba(4,5,6,.18));
  }

  .home-end-panel .page-tail {
    margin-top: auto;
    background: linear-gradient(to top, rgba(5,6,7,.90), rgba(5,6,7,.54) 58%, rgba(5,6,7,0));
  }

  body.home-end-panel-active .home-header .brand,
  body.home-end-panel-active .home-header .menu-button {
    color: #f4f1eb !important;
  }

  body.home-end-panel-active .home-header .brand-logo {
    filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.24)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-journey__arrow,
  .back-to-home__link,
  .home-end-panel__video {
    transition: none;
  }

  .home-end-panel__video {
    opacity: 0 !important;
  }
}
