*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Action button colors unified */
:root {
  --action-btn-bg: #c45a3c;
  --action-btn-hover: #9e5b4a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("img/SantPere.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

/* Layout */

.page-overlay {
  position: relative;
  width: 100%;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  overflow: hidden;
}

/* Base Layout (Mobile) */

.app-title {
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.5rem;
  /* larger title */
  line-height: 1.15;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.apps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 14px;
  overflow-y: visible;
  overflow-x: hidden;
  flex: 1 1 auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 22px;
  padding-bottom: 18px;
  overscroll-behavior: contain;
}

.main-header,
.main-footer {
  flex: 0 0 auto;
}

/* Desktop: align the main card to the right side */
@media (min-width: 720px) {
  .page-overlay {
    justify-content: center;
    /* Center the content */
    padding-right: 12px;
    /* Reset padding */
  }

  /* Make the card transparent and full width layout */
  .main-card {
    max-width: 1300px;
    /* Wider container to allow bigger buttons */
    background: transparent;
    box-shadow: none;
    padding: 20px 40px;
  }

  /* Header and Footer need their own background/backdrop for readability since card is transparent */
  .main-header {
    background: rgba(255, 248, 239, 0.45);
    padding: 12px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    margin: 0 auto 70px;
    /* Center horizontally with more bottom space */
    max-width: 600px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .main-footer {
    background: rgba(255, 248, 239, 0.45);
    padding: 12px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    margin: 70px auto 0;
    max-width: 600px;
    width: 100%;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Split buttons into two columns */
  .apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns */
    grid-template-rows: auto auto auto;
    /* Three rows */
    grid-auto-flow: row;
    /* Fill rows first (Indrets left, Cròniques right) */
    gap: 20px;
    /* Vertical gap between buttons */
    column-gap: 300px;
    /* HUGE gap in the middle for the image */
    padding-top: 70px;
    padding-bottom: 70px;
    overflow: visible;
    flex: 0 0 auto;
    /* Don't stretch indefinitely */
  }

  .app-card {
    min-height: 220px;
    /* Much taller buttons */
    max-width: 100%;
    /* Let them fill the grid column */
    margin: 0 auto;
    /* Center in their grid cells */
    width: 100%;
  }
}

/* Header */

.main-header {
  text-align: center;
  margin-bottom: 8px;
  /* slightly reduced so header sits more centered inside balanced padding */
}

.main-title {
  margin: 0;
  font-family: "Cinzel Decorative", cursive;
  font-size: 2.3rem;
  /* increased for visibility */
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
  color: #804033;
  /* Darker brown used in other apps headers */
}

.main-subtitle {
  margin: 6px 0 0;
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.15rem;
  color: #555;
  font-weight: 400;
}

/* App cards */

.app-card {
  position: relative;
  width: 100%;
  border: 2px solid rgba(255, 248, 239, 0.85);
  /* Brighter border */
  padding: 0;
  border-radius: 12px;
  /* Slightly more rounded */
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  background-color: #b38d6f;
  min-height: 170px;
  /* taller buttons to show more image (increased slightly) */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 248, 239, 0.2);
  /* Stronger shadow and subtle glow */
  transition: transform 220ms cubic-bezier(.2, .9, .2, 1), box-shadow 220ms cubic-bezier(.2, .9, .2, 1), filter 220ms;
  /* smooth transitions */
  transform-origin: center top;
  /* keep scaling anchored so cards lift upward instead of overflowing sideways */
  will-change: transform;
  /* hint for smoother animations */
}

/* add a background image layer behind the overlay and content */
.app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: contrast(0.95) saturate(0.95);
  transition: transform 220ms cubic-bezier(.2, .9, .2, 1);
  /* subtle parallax-ish movement on hover */
}

/* overlay on images kept but lightened so more image shows */
.app-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(65, 41, 27, 0.62),
      rgba(65, 41, 27, 0.32),
      rgba(65, 41, 27, 0.12));
  z-index: 1;
  transition: background 220ms cubic-bezier(.2, .9, .2, 1), opacity 220ms;
}

/* app content */

.app-card-content {
  position: relative;
  padding: 16px 14px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 2;
  transition: transform 220ms cubic-bezier(.2, .9, .2, 1);
}

/* Hover / focus effects: raise, intensify shadow, show subtle image shift and lighten overlay */
@media (hover: hover) {

  .app-card:hover,
  .app-card:focus {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 35px 65px rgba(0, 0, 0, 0.95), 0 0 30px rgba(255, 248, 239, 0.3);
    outline: none;
  }
}

.app-card:focus-visible {
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.34), 0 6px 12px rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  transform: translateY(-3px);
}

/* Subtle image move and overlay fade on hover for clarity */
.app-card:hover::before,
.app-card:focus::before {
  transform: scale(1.03) translateY(-3px);
}

.app-card:hover::after,
.app-card:focus::after {
  background: linear-gradient(to right,
      rgba(65, 41, 27, 0.44),
      rgba(65, 41, 27, 0.22),
      rgba(65, 41, 27, 0.08));
  opacity: 0.98;
}

/* Touch feedback */

.app-card:active {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 28px 52px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Specific backgrounds */

.app-croniques::before {
  background-image: url("img/croniques.png");
  background-position: center 20%;
  /* moved slightly lower so more of the upper part of the image is visible */
}

.app-1904::before {
  background-image: url("img/1904.jpg");
  background-position: center 65%;
  /* moved opposite (slightly lower) to reveal more of the bottom part */
}

.app-camins::before {
  background-image: url("img/camins.png");
}

.app-indrets::before {
  background-image: url("img/indrets-btn.png");
  background-position: center;
}

.app-murals::before {
  background-image: url("https://www.fcart.org/murals/img/murals.png");
  background-position: center;
}

/* Footer */

.main-footer {
  text-align: center;
  margin-top: 6px;
  position: relative;
  padding-bottom: 36px;
  /* space for share/info buttons on small screens */
  /* NEW: center logo and keep footer content in a single horizontal row so buttons can align */
  display: flex;
  align-items: center;
  /* vertically center logo and allow buttons to align to it */
  justify-content: center;
  /* center the logo in the footer */
  gap: 8px;
  /* reduced gap so items are slightly closer */

  /* CHANGED: use column layout so group text sits above the logo and logo is slightly lower */
  flex-direction: column;
  padding-top: 6px;
  /* reduced top padding to bring logo/text a bit closer */
  padding-bottom: 8px;
  /* REDUCED bottom padding to tighten spacing around buttons (was 12px) */
  min-height: 92px;
  /* REDUCED height to tighten spacing (was 110px) */
}

.group-text {
  font-family: "Merriweather", serif;
  font-size: 1rem;
  font-style: italic;
  color: #4e3a2b;
  opacity: 0.9;
  margin: 0 0 6px;
  line-height: 1.6;
}

/* Logo - rounded with border like reference */
.logo-link {
  display: block;
  /* ensure the logo is treated as a block so margin auto centers it */
  margin: 6px auto 0;
  /* REDUCED top margin so logo sits closer to the group text and buttons */
  transition: transform 180ms cubic-bezier(.2, .9, .2, 1), box-shadow 180ms ease;
  z-index: 10;
  /* ensure logo sits above the backdrop and behind buttons' hit area */
}

.logo-image {
  height: 46px;
  /* REDUCED slightly to make spacing tighter (was 50px on base; desktop variant increases it) */
  width: auto;
  border-radius: 8px;
  border: 1px solid rgba(124, 74, 51, 0.5);
  /* thinner, lighter border */
  background: #fff;
  padding: 4px 6px;
  transition: transform 180ms cubic-bezier(.2, .9, .2, 1), box-shadow 180ms ease, filter 180ms ease;
}

/* NEW: align info and share vertically centered with the logo */
.info-button {
  position: absolute;
  top: calc(50% + 4px);
  transform: translateY(-50%);
  right: 10px;
  /* moved slightly closer to logo area (was 14px) */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--action-btn-bg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  font-size: 0;
  line-height: 0;
  transition: transform 160ms cubic-bezier(.2, .9, .2, 1), box-shadow 160ms ease, background 160ms ease;
  /* tightened duration */
}

.info-button img {
  width: 120%;
  height: 120%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
}

@media (hover: hover) {

  .info-button:hover,
  .info-button:focus-visible {
    /* preserve vertical centering (translateY(-50%)) and apply the same subtle lift as app cards */
    transform: translateY(calc(-50% - 3px)) scale(1.01);
    /* reduced lift from 6px to 3px */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    background: var(--action-btn-hover);
    outline: none;
  }
}

.info-button:active {
  /* give lift feedback on mobile since hover is disabled */
  transform: translateY(calc(-50% - 4px)) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* Info modal */

.info-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.info-modal.open {
  display: flex;
}

.info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.info-panel {
  position: relative;
  z-index: 1001;
  max-width: 500px;
  /* Increased from 320px */
  width: 90%;
  margin: 0 20px;
  padding: 24px 24px 22px;
  /* Increased padding */
  background: rgba(255, 248, 239, 0.98);
  /* Slightly more opaque */
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.info-title {
  margin: 0 0 12px;
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.6rem;
  /* Increased size */
  text-transform: none;
  /* Removed uppercase to match other headers style */
  letter-spacing: 0.02em;
  color: #804033;
  /* Consistent header color */
  font-weight: 700;
  text-align: center;
}

.info-text {
  margin: 0;
  font-size: 1.05rem;
  /* Increased from 0.85rem */
  line-height: 1.5;
  color: #333;
  /* Darker for better readability */
}

.info-close {
  position: absolute;
  top: 6px;
  right: 9px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #7c5a42;
}

/* Touch feedback */

.app-card:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}



/* Mobile styles and overrides consolidated to avoid duplication */
/* Mobile override: keep info button inside the card flow and aligned with footer/logo */
@media (max-width: 720px) {
  body {
    overflow: auto;
    /* enable page scrolling on mobile so content below the fold can be reached */
    min-height: 100dvh;
    /* ensure body is at least viewport height */
  }

  /* limit card height to viewport and allow internal scrolling for its content */
  .main-card {
    max-height: calc(100dvh - 12px);
    /* accommodate padding and dynamic viewport UI - expanded for more reach */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
    /* NEW: push content toward the bottom so available space at the bottom is used */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 8px;
    /* reduce top padding so content shifts downward */
  }

  /* small tweak to page-overlay so the centered layout still works while allowing scroll */
  .page-overlay {
    align-items: flex-start;
    padding-top: 10px;
    /* reduced top padding to give the card more vertical space */
    padding-bottom: 4px;
    /* REDUCED from 12px to push content further down */
  }

  /* Ensure title and subtitle always stay on one line on mobile by preventing wrap
     and by scaling the font size responsively to fit the width. Also clip with ellipsis
     if the available width is extremely constrained. */
  .main-header .main-title,
  .mobile-entry-content .main-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: block;
    width: 100%;
    line-height: 1.2;
  }

  /* responsive sizing: never wrap, grow/shrink with viewport but stay within readable bounds */
  .main-header .main-title,
  .mobile-entry-content .main-title {
    font-size: clamp(1.05rem, 6.6vw, 1.9rem);
    /* adjusts with viewport but stays single-line */
  }

  .main-header .main-subtitle,
  /* allow the overlay subtitle to wrap (up to two lines) instead of forcing a single-line ellipsis */
  .mobile-entry-content .main-subtitle,
  .main-header .main-subtitle {
    font-size: clamp(0.85rem, 3.8vw, 1.1rem);
    background: rgba(255, 248, 239, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    color: #4e3729;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* NEW: give the apps container extra bottom padding so cards can extend visually into the bottom area,
     and reduce top padding so the list sits lower in the card. This opens the buttons vertically more. */
  .apps {
    padding-top: 12px;
    /* reduced top padding so apps sit lower */
    padding-bottom: 20px;
    /* REDUCED from 42px to bring cards lower */
    gap: 12px;
  }

  /* Make each app-card taller on mobile so the "apertura" / visible area of buttons is larger */
  .app-card {
    min-height: 155px;
    /* REDUCED from 188px to show portion of 3rd card and signal scrollability */
  }

  /* Ensure header and footer spacing adjust nicely with new alignment */
  .main-header {
    margin-bottom: 6px;
  }

  .main-footer {
    padding-bottom: 12px;
    /* REDUCED from 36px to bring content down */
    position: relative;
  }

  /* Increase app card text sizes on mobile so content is more legible */

  /* Increase app card text sizes on mobile so content is more legible */
  .app-title {
    font-size: 1.25rem;
    /* larger title on mobile */
    line-height: 1.15;
  }

  .app-text {
    font-size: 0.95rem;
    /* larger body text for clarity */
    line-height: 1.3;
  }

  /* Mobile entry overlay: show and hide main card handling */
  .mobile-entry-overlay {
    display: flex;
  }

  .main-card.mobile-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  /* Mobile very small screens tweaks */
  @media (max-width: 360px) {
    .main-title {
      font-size: 1.6rem;
    }

    .main-subtitle {
      font-size: 0.95rem;
    }

    .app-title {
      font-size: 1.05rem;
    }

    .app-text {
      font-size: 0.76rem;
    }

    .app-card {
      min-height: 168px;
      /* keep the small-screen increase consistent but slightly reduced */
    }

    .info-button {
      right: 10px;
      bottom: 0px;
      width: 50px;
      height: 50px;
    }

    .logo-image {
      height: 50px;
    }

    .share-btn {
      left: 10px;
      bottom: 0px;
    }
  }
}

/* Coming soon diagonal badge for disabled buttons */
.coming-soon-badge {
  position: absolute;
  z-index: 1;
  /* Lowered from 8 to be behind content (z-index 2) */
  left: -18%;
  top: 42%;
  width: 140%;
  display: block;
  text-align: center;
  pointer-events: none;
  /* don't capture clicks */
  transform: rotate(-20deg);
  color: rgba(62, 31, 18, 0.95);
  /* increased opacity for better contrast */
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.5rem;
  /* Increased further from 1.2rem */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  /* subtle highlight slightly more visible */
  background: rgba(255, 220, 160, 0.75);
  /* increased opacity for better visibility against backgrounds */
  padding: 8px 0;
  border-radius: 6px;
  border: 1px solid rgba(92, 48, 28, 0.15);
  /* slightly more defined border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* added subtle shadow for pop */
}

/* slightly larger badge on small screens for legibility */
@media (max-width: 720px) {
  .coming-soon-badge {
    font-size: 1.05rem;
    top: 46%;
    left: -16%;
  }
}

/* Share button: positioned to the left of the info button, same size and hover behaviour */
.share-btn {
  position: absolute;
  top: calc(50% + 4px);
  transform: translateY(-50%);
  left: 14px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--action-btn-bg);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  transition: transform 160ms cubic-bezier(.2, .9, .2, 1), box-shadow 160ms ease, background 160ms ease;
  /* tightened duration */
}

/* hover / focus matches info-button style */
@media (hover: hover) {

  .share-btn:hover,
  .share-btn:focus-visible {
    /* preserve vertical centering (translateY(-50%)) and apply a subtle, consistent lift */
    transform: translateY(calc(-50% - 3px)) scale(1.01);
    /* reduced lift to match info button */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    background: var(--action-btn-hover);
    outline: none;
  }
}

.share-btn:active {
  /* give lift feedback on mobile since hover is disabled */
  transform: translateY(calc(-50% - 4px)) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

/* icon sizing */
.share-icon {
  width: 58%;
  height: 58%;
  display: block;
  stroke: #fff;
  fill: none;
}

/* Mobile entry overlay: cover full viewport and show a centered Enter button */
.mobile-entry-overlay {
  display: none;
  /* default hidden on desktop */
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.22);
  /* subtle dim so background image is visible */
  /* remove blur so the background image remains sharp on the entry screen */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* content wrapper inside the overlay */
.mobile-entry-content {
  text-align: center;
  color: #fff;
  max-width: 92%;
  transform: translateY(12vh);
  /* moved down significantly so title/subtitle sit lower on-screen */
  /* lift the content a bit so the translucent window sits slightly higher on screen */
  /* transform: translateY(-4vh); */
  /* removed older negative translate */
  /* NEW: use flex column so we can push the button lower on screen */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  /* occupy most of the viewport so button can be positioned nearer the bottom */
  box-sizing: border-box;

  /* FIX: ensure content cannot be clipped on small viewports */
  overflow: visible;
  /* use symmetric inline padding to ensure equal left/right margins on all devices */
  padding-inline: 4vw;
  /* transform: translateY(-2vh); */
  /* removed older duplicate transform */
}

/* reuse main title/subtitle styles but tuned for overlay contrast */
.mobile-entry-content .main-title {
  margin: 0 0 8px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  font-size: 1.55rem;
  letter-spacing: 0.04em;

  /* FIX: allow the title to wrap onto multiple lines if needed */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  /* rely on .mobile-entry-text symmetric padding to provide equal margins */
}

/* remove extra bottom margin on subtitle and rely on container padding for symmetric spacing */
.mobile-entry-content .main-subtitle {
  margin: 0;
  /* allow wrapping and multiple lines for mobile overlay subtitle */
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.28;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  /* allow wrapping */
  overflow: visible;
  text-overflow: clip;
}

/* new wrapper to give a single translucent window behind title+subtitle */
.mobile-entry-text {
  display: inline-flex;
  /* changed to flex to control spacing */
  flex-direction: column;
  gap: 8px;
  /* consistent gap between title and subtitle */
  background: rgba(0, 0, 0, 0.38);
  /* use symmetric padding so the visual window is centered equally left and right */
  padding: 18px 4vw;
  border-radius: 10px;
  box-sizing: border-box;
  max-width: 100%;
  text-align: center;

  /* FIX: make sure the text window uses full available width so the title doesn't wrap or get clipped */
  width: 100%;
  overflow: visible;
}

/* Entry button style (kept, but ensure it sits below title) */
.mobile-entry-button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  padding: 8px 14px;
  /* tightened padding so button size fits label better */
  font-family: inherit;
  font-size: 1.05rem;
  border-radius: 10px;
  background: var(--action-btn-bg);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
  cursor: pointer;
  transform: translateY(0);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  width: auto;
  /* let the button size itself to the text */
  min-width: 96px;
  /* reduced min-width so it hugs the "Entrar" label more closely */
  text-align: center;
  /* NEW: push the button to the lower area of the overlay */
  /* raise the Entrar button so it sits higher on mobile screens */
  /* margin-top: 55vh; moved closer to title */
  margin-top: 45vh;
  /* moved up so the button is visibly closer to the title/subtitle */
  margin-bottom: 6vh;
  /* small gap from the bottom of the viewport */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* nicer tap feel on mobile */
  will-change: transform, box-shadow;
}

/* Hover / focus / active states for Entrar button */
.mobile-entry-button:hover,
.mobile-entry-button:focus {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
  background: var(--action-btn-hover);
  outline: none;
}

.mobile-entry-button:active {
  transform: translateY(0) scale(0.995);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

/* Mobile-specific: show overlay and hide main-card on small screens initially */
@media (max-width: 720px) {
  .mobile-entry-overlay {
    display: flex;
  }

  /* hide main card visually (keeps it in DOM for accessibility) until user enters */
  .main-card.mobile-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
  }

  /* tune overlay title sizes on smaller devices */
  .mobile-entry-content .main-title {
    font-size: 1.45rem;
  }

  .mobile-entry-content .main-subtitle {
    font-size: 0.92rem;
  }

  .info-button {
    width: 40px;
    height: 40px;
  }

  .share-btn {
    width: 40px;
    height: 40px;
  }

  /* tighten footer spacing so buttons and logo sit closer to the bottom */
  .main-footer {
    min-height: 56px;
    /* significantly reduced to bring content down */
    padding-top: 2px;
    /* small top padding so text isn't flush against the card */
    padding-bottom: 2px;
    /* REDUCED from 6px */
    gap: 6px;
    /* reduce gap between items */
  }

  /* nudge footer children downward: increase top margin on the logo and group text to push them lower */
  .group-text {
    margin: 4px 0 2px;
    font-size: clamp(0.5rem, 3.2vw, 0.85rem);
    /* Slightly smaller on tiny screens */
    white-space: nowrap;
    color: #4e3729;
    background: rgba(255, 248, 239, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: auto;
    max-width: 98%;
    box-sizing: border-box;
  }

  .logo-link {
    margin: 4px auto 2px;
    /* reduced top and bottom margin */
    transition: transform 180ms cubic-bezier(.2, .9, .2, 1), box-shadow 180ms ease;
  }

  .logo-image {
    height: 38px;
    /* keep logo compact so it fits within reduced footer */
  }

  /* bring floating buttons slightly lower relative to the footer */
  .info-button,
  .share-btn,
  .contact-btn {
    top: 72%;
    /* Pushed even lower as requested */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 12;
  }

  .info-button {
    right: 14px;
  }

  .share-btn {
    left: 14px;
  }

  .contact-btn {
    left: 64px;
    /* 14px + 40px + 10px gap */
  }
}

/* Mobile override block near bottom adjusted earlier; no redundant repeats here */

/* Mobile override block for very small screens moved inside the main mobile media query */

/* subtle hover/focus for logo (very mild) */
.logo-link:hover .logo-image,
.logo-link:focus .logo-image {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.12);
  filter: brightness(1.02);
  outline: none;
}

/* when overlay is dismissed, keep it hidden */
.mobile-entry-overlay.hidden {
  display: none !important;
}

/* --- NEW: Desktop-specific overflow and sizing fixes to eliminate unexpected vertical scroll --- */
@media (min-width: 721px) {

  /* ensure desktop never shows vertical scroll */
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  /* keep the page overlay exactly viewport-height and remove extra vertical padding that could push content out */
  .page-overlay {
    height: 100dvh;
    padding-top: 12px;
    padding-bottom: 12px;
    overflow: hidden;
  }

  /* tighten the card's max-height to account for the page padding so it never exceeds the viewport */
  .main-card {
    max-height: calc(100dvh - 24px);
    /* match overlay vertical padding to avoid overflow */
    overflow: visible;
    /* keep hover lifts visible */
  }

  /* Adjust desktop positions: lower the floating action buttons slightly and raise/enlarge the logo */
  .info-button {
    top: 54%;
    /* moved slightly higher to sit nearer the logo (was 58%) */
    transform: translateY(-50%);
    right: 12px;
    /* slightly closer */
  }

  .share-btn {
    top: 54%;
    /* moved higher to match info button (was 58%) */
    transform: translateY(-50%);
    left: 12px;
    /* slightly closer */
  }

  .logo-link {
    margin-top: 4px;
    /* raise the logo a bit by reducing top margin while keeping it lower under text */
  }

  .logo-image {
    height: 52px;
    /* slightly reduced from 56px to keep compact spacing on desktop */
  }
}

@media (max-width: 720px) {
  .main-footer {
    min-height: auto;
    padding-bottom: 2px;
  }
}



/* Contact button: positioned between share and info, matching style */
.contact-btn {
  position: absolute;
  top: 54%;
  /* Match desktop info/share */
  transform: translateY(-50%);
  left: 74px;
  /* 14px (left start) + 48px (share width) + 12px (gap) */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--action-btn-bg);
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  font-size: 0;
  line-height: 0;
  transition: transform 160ms cubic-bezier(.2, .9, .2, 1), box-shadow 160ms ease, background 160ms ease;
}

@media (hover: hover) {

  .contact-btn:hover,
  .contact-btn:focus-visible {
    transform: translateY(calc(-50% - 3px)) scale(1.01);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
    background: var(--action-btn-hover);
    outline: none;
  }
}

.contact-btn:active {
  /* give lift feedback on mobile since hover is disabled */
  transform: translateY(calc(-50% - 4px)) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.contact-icon {
  width: 56%;
  height: 56%;
  display: block;
  stroke: #fff;
  fill: none;
}

/* Contact modal: matches info modal style */
.contact-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.contact-modal.open {
  display: flex;
}

.contact-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.contact-panel {
  position: relative;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  margin: 0 20px;
  padding: 24px 24px 22px;
  background: rgba(255, 248, 239, 0.98);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.contact-title {
  margin: 0 0 12px;
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.6rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #804033;
  font-weight: 700;
  text-align: center;
}

.contact-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #333;
}

.contact-close {
  position: absolute;
  top: 6px;
  right: 9px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #7c5a42;
}

.contact-email-display {
  background: #ece3d3;
  padding: 10px;
  border-radius: 6px;
  font-family: monospace;
  margin-top: 5px;
  display: inline-block;
}

/* Properament modal: matches info and contact modal styles */
.properament-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.properament-modal.open {
  display: flex;
}

.properament-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.properament-panel {
  position: relative;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  margin: 0 20px;
  padding: 32px 24px;
  background: rgba(255, 248, 239, 0.98);
  border-radius: 16px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.4);
  text-align: center;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.properament-title {
  margin: 0 0 16px;
  font-family: "Cinzel Decorative", cursive;
  font-size: 1.8rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #804033;
  font-weight: 700;
}

.properament-text {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333;
}

.properament-close {
  position: absolute;
  top: 6px;
  right: 9px;
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #7c5a42;
}

/* Mobile adjustments for contact button */
@media (max-width: 720px) {
  .contact-btn {
    top: 72%;
    /* Match mobile info/share */
    transform: translateY(-50%);
    left: 64px;
    /* 14px + 40px + 10px gap */
    width: 40px;
    height: 40px;
  }

  .contact-icon {
    width: 68%;
    height: 68%;
  }
}

@media (max-width: 360px) {
  .contact-btn {
    left: 70px;
    /* 10px + 50px + 10px gap */
    width: 50px;
    height: 50px;
  }
}