/* ==========================================================================
   Fjelvik — site chrome + shared components
   header · menu · footer · section heads · destination tiles · tour cards ·
   chips · toast · reveal
   ========================================================================== */

/* Header ------------------------------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto;
  /* Encima del panel móvil para que el burger abra/cierre siempre */
  z-index: 230;
  width: 100%;
  padding-block: 1.4rem;
  color: var(--snow);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.header[data-header="photo"] { position: fixed; }
/* Scrim so nav links stay legible over any photograph, bright rock included */
.header[data-header="photo"]::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 10, 8, .55), rgba(6, 10, 8, 0));
  transition: opacity var(--dur) var(--ease);
}
.header[data-header="photo"].is-scrolled::before { opacity: 0; }
.header__inner { position: relative; z-index: 2; }
.header[data-header="photo"].is-scrolled,
.header[data-header="solid"] {
  background: rgba(243, 244, 241, .96);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--pine);
  box-shadow: 0 1px 0 var(--fog-deep);
}
.header[data-header="photo"].is-scrolled { padding-block: .8rem; }
/* Páginas internas: siempre fijo y visible (nunca sticky) */
.header[data-header="solid"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #f3f4f1;
  color: var(--pine);
}

.header__inner { display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; }
.brand__mark { width: 30px; height: 30px; }
.brand__word {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.55rem; letter-spacing: -.035em; line-height: 1;
}

/* Desktop bar nav */
.site-nav--bar {
  display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem);
  flex-wrap: nowrap; margin: 0; padding: 0; list-style: none;
}
.site-nav--bar a {
  position: relative; padding-block: .4rem;
  font-size: var(--text-md); font-weight: 400;
  white-space: nowrap;
}
.site-nav--bar a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.site-nav--bar a:hover::after,
.site-nav--bar a[aria-current="page"]::after { transform: scaleX(1); }

.header__tools { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

/* Theme toggle (mismo control Uiverse del admin) */
.themeToggle {
  color: currentColor;
  width: 2.65em;
  display: block;
  flex-shrink: 0;
}
.st-sunMoonThemeToggleBtn {
  position: relative;
  cursor: pointer;
  display: block;
}
.st-sunMoonThemeToggleBtn .themeToggleInput {
  opacity: 0;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  cursor: pointer;
}
.st-sunMoonThemeToggleBtn svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  transform: rotate(40deg);
}
.st-sunMoonThemeToggleBtn svg .sunMoon {
  transform-origin: center center;
  transition: inherit;
  transform: scale(1);
}
.st-sunMoonThemeToggleBtn svg .sunRay {
  transform-origin: center center;
  transform: scale(0);
}
.st-sunMoonThemeToggleBtn svg mask > circle {
  transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
  transform: translate(0px, 0px);
}
.st-sunMoonThemeToggleBtn svg .sunRay2 { animation-delay: 0.05s !important; }
.st-sunMoonThemeToggleBtn svg .sunRay3 { animation-delay: 0.1s !important; }
.st-sunMoonThemeToggleBtn svg .sunRay4 { animation-delay: 0.17s !important; }
.st-sunMoonThemeToggleBtn svg .sunRay5 { animation-delay: 0.29s !important; }
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg {
  transform: rotate(90deg);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg mask > circle {
  transform: translate(16px, -3px);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunMoon {
  transform: scale(0.55);
}
.st-sunMoonThemeToggleBtn .themeToggleInput:checked + svg .sunRay {
  animation: showRaySite 0.4s ease 0s 1 forwards;
}
@keyframes showRaySite {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

.header__theme {
  color: var(--snow);
}
.header[data-header="solid"] .header__theme,
.header.is-scrolled .header__theme {
  color: var(--pine);
}
html[data-theme="dark"] .header[data-header="photo"].is-scrolled,
html[data-theme="dark"] .header[data-header="solid"] {
  background: rgba(15, 20, 18, .94);
  box-shadow: 0 1px 0 var(--fog-deep);
}
html[data-theme="dark"] .header[data-header="solid"] {
  background: #0f1412;
}

.header__signin {
  min-height: 46px; padding-inline: 1.6rem;
  border-color: currentColor; color: inherit; background: transparent;
}
.header__signin:hover { background: var(--snow); color: var(--pine); border-color: var(--snow); }
.header[data-header="solid"] .header__signin:hover,
.header.is-scrolled .header__signin:hover { background: var(--pine); color: var(--snow); border-color: var(--pine); }

.burger {
  display: none; position: relative; z-index: 220;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; color: inherit;
}
.burger span {
  position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child  { top: 26px; }
.menu-open .burger { color: var(--pine); border-color: var(--pine); }
.menu-open .burger span:first-child { top: 22px; transform: rotate(45deg); }
.menu-open .burger span:last-child  { top: 22px; transform: rotate(-45deg); }
.menu-open .brand { position: relative; z-index: 220; }
.menu-open .header__theme { color: var(--pine); }
.menu-open .header[data-header="photo"] {
  background: var(--fog);
  color: var(--pine);
  box-shadow: none;
}
.menu-open .header[data-header="photo"]::before { opacity: 0; }
.menu-open .header[data-header="photo"] .brand__logo {
  filter: brightness(0);
}
html[data-theme="dark"] .menu-open .header[data-header="photo"] {
  background: var(--fog);
  color: var(--pine);
}
html[data-theme="dark"] .menu-open .header[data-header="photo"] .brand__logo {
  filter: brightness(0) invert(1);
}

/* Mobile full-screen panel (sibling of header) */
.site-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  padding: 6.5rem clamp(1.25rem, 5vw, 3rem) 3rem;
  background: var(--fog);
  color: var(--pine);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Cerrado: nunca intercepta clics (evita que tape el burger) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s 220ms;
}
.site-nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s 0s;
}
.site-nav-panel[hidden] {
  display: flex !important; /* usamos .is-open; hidden solo como fallback a11y */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.site-nav-panel a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--pine) !important;
  text-decoration: none;
  max-width: 100%;
}
.site-nav-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
.site-nav-panel__cta {
  display: inline-flex !important;
  margin-top: 1.5rem;
  padding: .9rem 1.6rem;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  background: var(--pine) !important;
  color: var(--fog) !important;
  border-radius: var(--r-pill);
  border: 1px solid var(--pine);
}

@media (max-width: 960px) {
  .burger { display: inline-block; }
  .header__signin { display: none; }
  .brand { margin-right: 0; }
  .header__inner { width: 100%; }
  .site-nav--bar { display: none !important; }
  body.menu-open { overflow: hidden; touch-action: none; }
}

@media (min-width: 961px) {
  .site-nav-panel,
  .site-nav-panel.is-open,
  .site-nav-panel[hidden] {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Section heads ----------------------------------------------------------- */
.shead { display: grid; gap: 1rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.shead--center { justify-items: center; text-align: center; }
.shead--split {
  grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem;
}
.shead h2 { font-size: var(--text-2xl); max-width: 22ch; }
.shead p:not(.label) { max-width: 52ch; color: var(--pine-mute); font-size: var(--text-md); }
@media (max-width: 720px) { .shead--split { grid-template-columns: minmax(0, 1fr); } }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 500; color: var(--pine); white-space: nowrap;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translate(3px, -3px); }

/* Destination tile -------------------------------------------------------- */
.dtile {
  position: relative; display: block; overflow: hidden;
  min-height: 0; height: 100%; border-radius: var(--r-md);
  color: var(--snow); background: var(--pine);
  isolation: isolate;
}
.dtile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform 900ms var(--ease);
}
.dtile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 12, 10, .72) 0%, rgba(8, 12, 10, .1) 48%, rgba(8, 12, 10, 0) 70%);
}
.dtile:hover img { transform: scale(1.05); }
.dtile__meta { position: absolute; left: 1.25rem; bottom: 1.1rem; right: 1.25rem; display: grid; gap: .15rem; }
.dtile__name { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -.02em; line-height: 1.2; }
.dtile__place { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--text-xs); color: var(--snow-soft); }
.dtile__place svg { width: 13px; height: 13px; }
.dtile__count {
  position: absolute; top: 1rem; right: 1rem;
  padding: .35rem .7rem; border-radius: var(--r-pill);
  background: rgba(8, 12, 10, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em;
}

/* Tour card --------------------------------------------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
@media (max-width: 1024px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .tgrid { grid-template-columns: minmax(0, 1fr); } }

.tcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tcard__media { position: relative; margin: .6rem .6rem 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.tcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.tcard:hover .tcard__media img { transform: scale(1.05); }
.tcard__kind {
  position: absolute; top: .8rem; left: .8rem;
  padding: .35rem .75rem; border-radius: var(--r-pill);
  background: var(--glacier-hi); color: var(--pine);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .04em;
}
.tcard__body { display: grid; gap: .55rem; padding: 1.1rem 1.35rem 1.35rem; flex: 1; }
.tcard__place { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-sm); color: var(--pine-mute); }
.tcard__place svg { width: 15px; height: 15px; }
.tcard__name { font-size: var(--text-lg); line-height: 1.2; }
.tcard__name a::after { content: ""; position: absolute; inset: 0; }
.tcard__facts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: var(--text-sm); color: var(--pine-soft); }
.tcard__facts span { display: inline-flex; align-items: center; gap: .35rem; }
.tcard__facts svg { width: 15px; height: 15px; }
.tcard__rating svg { color: var(--pine); }
.tcard__rating small { color: var(--pine-mute); font-size: inherit; }
.tcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--fog-deep);
}
.tcard__price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--pine); letter-spacing: -.02em; }
.tcard__price small { font-family: var(--font-body); font-size: var(--text-xs); color: var(--pine-mute); letter-spacing: 0; margin-right: .2rem; }
.tcard__go {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--glacier); color: var(--pine);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur) var(--ease);
}
.tcard__go svg { width: 18px; height: 18px; }
.tcard:hover .tcard__go { background: var(--pine); color: var(--snow); transform: rotate(45deg); }

/* Chips ------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  min-height: 42px; padding: 0 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--paper); color: var(--pine);
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--pine); }
.chip[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--snow); }

/* Page hero for pages without a photo top --------------------------------- */
.phead { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.phead h1 { font-size: var(--text-hero); max-width: 16ch; }
.phead p:not(.label) { margin-top: 1.1rem; max-width: 56ch; font-size: var(--text-md); color: var(--pine-mute); }
.phead .label { margin-bottom: 1rem; }

/* Footer ------------------------------------------------------------------ */
.footer {
  background: var(--pine-night); color: rgba(255, 255, 255, .72);
  padding-top: clamp(3.5rem, 3rem + 3vw, 6rem); overflow: hidden;
}
.footer a:hover { color: var(--snow); }
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer__title { font-family: var(--font-display); color: var(--snow); font-size: var(--text-xl); letter-spacing: -.025em; line-height: 1.15; }
.footer__sub { margin-top: .75rem; max-width: 42ch; }
.subscribe { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; max-width: 460px; }
.subscribe input {
  flex: 1 1 220px; min-height: 50px; padding: 0 1.2rem;
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: var(--snow);
}
.subscribe input::placeholder { color: rgba(255, 255, 255, .5); }
.subscribe input:focus { outline: none; border-color: var(--glacier); }
.subscribe .form-note { flex-basis: 100%; min-height: 1.4em; font-size: var(--text-sm); color: var(--glacier); }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.footer__h { color: rgba(255, 255, 255, .5); margin-bottom: 1rem; }
.footer__cols li + li { margin-top: .55rem; }
.footer address { font-style: normal; line-height: 1.9; }
.footer__word {
  margin: .05em 0 0; padding-bottom: .12em; text-align: center;
  font-family: var(--font-display); font-weight: 600; line-height: 1.05;
  font-size: calc((min(100vw, var(--container)) - 2 * var(--gutter)) / 3.7);
  /* Solid colour, not rgba: overlapping glyphs double-paint translucent ink. */
  letter-spacing: -.04em; color: #18221F;
  user-select: none;
}
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--text-sm);
}
.footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Toast ------------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 90;
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2rem);
  padding: .9rem 1.3rem; border-radius: var(--r-pill);
  background: var(--pine); color: var(--snow); font-size: var(--text-sm);
  box-shadow: var(--shadow-lift);
}

/* Form note + invalid ----------------------------------------------------- */
.form-note { font-size: var(--text-sm); color: var(--pine-soft); min-height: 1.4em; }
.is-invalid, .input:has(.is-invalid) { border-color: #B3261E !important; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12) !important; }

/* Reveal (only when JS has opted in and motion is allowed) ---------------- */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }