/* Ruta Duna V18.4 — cache-proof premium mobile shell */
@media (max-width: 800px) {
  :root {
    --rd-ink:#072b38;
    --rd-ink-2:#0b3947;
    --rd-accent:#e08a2f;
    --rd-surface:#ffffff;
    --rd-muted:#7a8e95;
    --rd-safe-bottom:env(safe-area-inset-bottom, 0px);
  }

  html { background:#f3f6f6; }
  body {
    background:#f3f6f6 !important;
    padding-bottom:calc(78px + var(--rd-safe-bottom)) !important;
    -webkit-font-smoothing:antialiased;
  }

  /* APP HEADER — unmistakably compact and premium */
  .site-header {
    position:sticky !important;
    top:0 !important;
    z-index:300 !important;
    padding-top:env(safe-area-inset-top,0px) !important;
    background:rgba(255,255,255,.97) !important;
    border:0 !important;
    box-shadow:0 8px 28px rgba(7,43,56,.10) !important;
    -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
    backdrop-filter:blur(24px) saturate(150%) !important;
  }
  .site-header .nav-wrap {
    width:100% !important;
    max-width:none !important;
    min-height:64px !important;
    height:64px !important;
    padding:0 10px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto 44px !important;
    align-items:center !important;
    gap:7px !important;
  }
  .site-header .brand-logo {
    min-width:0 !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
  }
  .site-header .brand-logo img {
    display:block !important;
    width:138px !important;
    max-width:43vw !important;
    height:auto !important;
    max-height:48px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }
  .site-header .header-book-now {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 11px !important;
    border:0 !important;
    border-radius:12px !important;
    background:linear-gradient(135deg,#ed9b45,#ce711b) !important;
    color:#fff !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    text-decoration:none !important;
    box-shadow:0 7px 18px rgba(206,113,27,.25) !important;
    white-space:nowrap !important;
  }
  .site-header .header-book-now .ui-icon { width:14px !important; height:14px !important; }
  .site-header .menu-toggle {
    display:grid !important;
    place-items:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:13px !important;
    background:var(--rd-ink) !important;
    color:#fff !important;
    box-shadow:0 7px 17px rgba(7,43,56,.18) !important;
  }
  .site-header .menu-toggle .ui-icon { width:21px !important; height:21px !important; }

  /* APP DRAWER */
  .main-nav {
    display:flex !important;
    position:fixed !important;
    top:calc(64px + env(safe-area-inset-top,0px)) !important;
    right:0 !important;
    left:auto !important;
    bottom:0 !important;
    width:min(86vw,350px) !important;
    padding:16px 14px calc(96px + var(--rd-safe-bottom)) !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:5px !important;
    background:#fff !important;
    border:0 !important;
    border-radius:24px 0 0 0 !important;
    box-shadow:-24px 0 56px rgba(7,43,56,.20) !important;
    transform:translateX(105%) !important;
    visibility:hidden !important;
    transition:transform .23s ease, visibility .23s ease !important;
    z-index:330 !important;
    overflow:auto !important;
  }
  body.menu-open .main-nav { transform:translateX(0) !important; visibility:visible !important; }
  .main-nav a {
    display:flex !important;
    align-items:center !important;
    min-height:50px !important;
    padding:0 14px !important;
    border-radius:14px !important;
    color:#173d49 !important;
    font-size:14px !important;
    font-weight:850 !important;
    text-decoration:none !important;
  }
  .main-nav a:active { background:#eef3f4 !important; transform:scale(.985); }
  .mobile-nav-backdrop {
    position:fixed !important;
    inset:0 !important;
    display:block !important;
    background:rgba(4,27,38,.42) !important;
    opacity:0 !important;
    visibility:hidden !important;
    transition:opacity .2s ease,visibility .2s ease !important;
    z-index:320 !important;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  body.menu-open .mobile-nav-backdrop { opacity:1 !important; visibility:visible !important; }
  body.menu-open { overflow:hidden !important; }

  /* HOME HERO — image first, no large title on phone */
  body.home-page .marketplace-hero {
    height:270px !important;
    min-height:270px !important;
    margin:0 !important;
    border-radius:0 0 20px 20px !important;
    overflow:hidden !important;
    box-shadow:0 12px 28px rgba(7,43,56,.11) !important;
  }
  body.home-page .marketplace-hero h1 { display:none !important; }
  body.home-page .marketplace-hero .hero-content {
    padding:0 12px 22px !important;
    align-self:end !important;
    max-width:100% !important;
  }
  body.home-page .marketplace-hero .eyebrow {
    display:inline-flex !important;
    margin:0 0 7px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:rgba(6,31,42,.48) !important;
    border:1px solid rgba(255,255,255,.23) !important;
    color:#fff !important;
    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    -webkit-backdrop-filter:blur(10px) !important;
    backdrop-filter:blur(10px) !important;
  }
  body.home-page .marketplace-hero .hero-content > p {
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    max-width:88% !important;
    margin:0 !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1.45 !important;
    font-weight:700 !important;
    text-shadow:0 2px 9px rgba(0,0,0,.26) !important;
  }
  body.home-page .hero-search,
  body.home-page .hero-quick { display:none !important; }
  body.home-page .hero-nav { display:none !important; }
  body.home-page .hero-dots { bottom:8px !important; }

  /* DENSER APP CONTENT */
  .section { padding-top:20px !important; padding-bottom:20px !important; }
  .section-head { margin-bottom:11px !important; }
  .section-head h2 { font-size:20px !important; line-height:1.15 !important; }
  .container { padding-left:10px !important; padding-right:10px !important; }

  /* PREMIUM FOOTER */
  .footer {
    position:relative !important;
    padding:20px 0 calc(106px + var(--rd-safe-bottom)) !important;
    background:linear-gradient(160deg,#051d27 0%,#082f3c 58%,#0d3b49 100%) !important;
    border-radius:22px 22px 0 0 !important;
    color:#fff !important;
    overflow:hidden !important;
    box-shadow:0 -10px 28px rgba(7,43,56,.10) !important;
  }
  .footer .container { position:relative !important; z-index:2 !important; }
  .footer-grid { display:block !important; }
  .footer-brand {
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    align-items:center !important;
    gap:12px !important;
    padding-bottom:14px !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }
  .footer-logo-wrap { width:92px !important; margin:0 !important; }
  .footer-logo-wrap img { width:92px !important; height:auto !important; filter:brightness(0) invert(1) !important; }
  .footer-brand p {
    margin:0 !important;
    color:#d7e2e5 !important;
    font-size:10.5px !important;
    line-height:1.46 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .footer-col:not(.footer-connect) { display:none !important; }
  .footer-col.footer-connect {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
    margin-top:13px !important;
    padding-top:0 !important;
    border:0 !important;
  }
  .footer-connect h4 {
    margin:0 !important;
    color:#9fb4bb !important;
    font-size:8.5px !important;
    text-transform:uppercase !important;
    letter-spacing:.12em !important;
  }
  .footer-langs {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    padding:4px !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.05) !important;
  }
  .footer-langs a {
    display:grid !important;
    place-items:center !important;
    width:44px !important;
    height:31px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
  }
  .footer-langs a.active { background:#fff !important; box-shadow:0 5px 14px rgba(0,0,0,.18) !important; }
  .footer-langs img { width:24px !important; height:16px !important; border-radius:3px !important; }
  .social-icons {
    display:grid !important;
    grid-template-columns:repeat(6,37px) !important;
    justify-content:center !important;
    gap:7px !important;
    margin:0 auto !important;
    max-width:none !important;
  }
  .social-icon {
    display:grid !important;
    place-items:center !important;
    width:37px !important;
    height:37px !important;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.06) !important;
    color:#fff !important;
  }
  .social-icon svg { width:17px !important; height:17px !important; }
  .social-icon.active-link { background:#fff !important; color:var(--rd-ink) !important; }
  .footer-bottom {
    margin-top:13px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    color:#94aab1 !important;
    text-align:center !important;
    font-size:9px !important;
  }

  /* DARK FLOATING TAB BAR — obvious app-level change */
  .app-bottom-nav {
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(7px + var(--rd-safe-bottom)) !important;
    z-index:310 !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    min-height:64px !important;
    padding:5px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:21px !important;
    background:rgba(6,35,45,.97) !important;
    box-shadow:0 16px 38px rgba(7,43,56,.30) !important;
    -webkit-backdrop-filter:blur(22px) saturate(145%) !important;
    backdrop-filter:blur(22px) saturate(145%) !important;
  }
  .app-bottom-nav a {
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:52px !important;
    padding:3px 1px !important;
    border-radius:15px !important;
    color:#a9bbc0 !important;
    background:transparent !important;
    text-decoration:none !important;
    font-weight:850 !important;
  }
  .app-bottom-nav a .ui-icon { width:20px !important; height:20px !important; stroke-width:2.15 !important; }
  .app-bottom-nav a small { color:inherit !important; font-size:8.5px !important; line-height:1 !important; }
  .app-bottom-nav a.active {
    color:#fff !important;
    background:rgba(255,255,255,.11) !important;
  }
  .app-bottom-nav a.active::before {
    content:"" !important;
    position:absolute !important;
    top:3px !important;
    width:18px !important;
    height:3px !important;
    border-radius:999px !important;
    background:var(--rd-accent) !important;
  }
  .app-bottom-nav a:active { transform:scale(.92) !important; }
}

@media (max-width: 390px) {
  .site-header .nav-wrap { padding:0 8px !important; gap:5px !important; grid-template-columns:minmax(0,1fr) auto 42px !important; }
  .site-header .brand-logo img { width:126px !important; max-width:40vw !important; }
  .site-header .header-book-now { padding:0 8px !important; font-size:9.5px !important; }
  .social-icons { grid-template-columns:repeat(6,34px) !important; gap:5px !important; }
  .social-icon { width:34px !important; height:34px !important; }
  .app-bottom-nav { left:6px !important; right:6px !important; }
  .app-bottom-nav a small { font-size:8px !important; }
}

/* Ruta Duna V18.5 — compact footer + native bottom bar + full-height drawer */
@media (max-width:800px) {
  :root{--rd-nav-h:58px;--rd-header-h:60px}

  /* Avoid fixed-child clipping caused by backdrop-filter on some Android browsers. */
  .site-header{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(255,255,255,.985)!important;
  }
  .site-header .nav-wrap{
    height:var(--rd-header-h)!important;
    min-height:var(--rd-header-h)!important;
  }

  /* Full-height app drawer — never clipped to the header. */
  .main-nav{
    position:fixed!important;
    top:calc(var(--rd-header-h) + env(safe-area-inset-top,0px))!important;
    right:0!important;
    bottom:auto!important;
    height:calc(100dvh - var(--rd-header-h) - env(safe-area-inset-top,0px))!important;
    max-height:none!important;
    width:min(84vw,340px)!important;
    padding:12px 12px calc(18px + env(safe-area-inset-bottom,0px))!important;
    border-radius:20px 0 0 0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    z-index:420!important;
  }
  .mobile-nav-backdrop{z-index:410!important}
  .main-nav a{
    min-height:48px!important;
    padding:0 13px!important;
    border-radius:12px!important;
  }

  /* Reserve only the real navigation height, outside the footer. */
  body{
    padding-bottom:calc(var(--rd-nav-h) + env(safe-area-inset-bottom,0px))!important;
  }

  /* Compact footer: no giant empty dark block. */
  .footer{
    padding:16px 0 16px!important;
    min-height:0!important;
    height:auto!important;
    border-radius:18px 18px 0 0!important;
  }
  .footer-grid{min-height:0!important}
  .footer-brand{
    grid-template-columns:104px minmax(0,1fr)!important;
    gap:11px!important;
    padding:0 0 12px!important;
  }
  .footer-logo-wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:104px!important;
    min-width:104px!important;
    height:48px!important;
    margin:0!important;
    padding:5px 8px!important;
    border-radius:12px!important;
    background:#fff!important;
  }
  .footer-logo-wrap img{
    width:90px!important;
    max-height:38px!important;
    filter:none!important;
    opacity:1!important;
  }
  .footer-brand p{
    font-size:10px!important;
    line-height:1.38!important;
    -webkit-line-clamp:3!important;
  }
  .footer-col.footer-connect{
    margin-top:10px!important;
    gap:7px!important;
  }
  .footer-langs{padding:3px!important}
  .footer-langs a{width:41px!important;height:29px!important}
  .social-icons{
    grid-template-columns:repeat(6,34px)!important;
    gap:6px!important;
  }
  .social-icon{width:34px!important;height:34px!important;border-radius:11px!important}
  .footer-bottom{
    margin-top:10px!important;
    padding:9px 0 0!important;
    min-height:0!important;
    font-size:8.5px!important;
    line-height:1.25!important;
  }

  /* Native-sized bottom navigation: edge-to-edge, slim, no oversized floating capsule. */
  .app-bottom-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    min-height:var(--rd-nav-h)!important;
    height:auto!important;
    padding:4px 7px calc(4px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.08)!important;
    border-radius:17px 17px 0 0!important;
    background:rgba(5,35,45,.985)!important;
    box-shadow:0 -8px 24px rgba(5,35,45,.18)!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    z-index:360!important;
  }
  .app-bottom-nav a{
    min-height:50px!important;
    height:50px!important;
    gap:2px!important;
    padding:2px 1px!important;
    border-radius:11px!important;
    color:#aebfc4!important;
  }
  .app-bottom-nav a .ui-icon{
    width:20px!important;
    height:20px!important;
  }
  .app-bottom-nav a small{
    font-size:8.5px!important;
    line-height:1!important;
  }
  .app-bottom-nav a.active{
    color:#fff!important;
    background:rgba(255,255,255,.09)!important;
  }
  .app-bottom-nav a.active:before{
    top:1px!important;
    width:16px!important;
    height:2.5px!important;
  }

  body.menu-open .app-bottom-nav{visibility:hidden!important;opacity:0!important}
}

@media (max-width:390px){
  .footer-brand{grid-template-columns:96px minmax(0,1fr)!important}
  .footer-logo-wrap{width:96px!important;min-width:96px!important}
  .footer-logo-wrap img{width:84px!important}
  .app-bottom-nav{left:0!important;right:0!important}
}


/* V18.6 — premium icon navigation */
@media (max-width:800px){
  .app-bottom-nav a{gap:1px!important}
  .app-bottom-nav .app-nav-icon{
    width:30px!important;height:27px!important;border-radius:10px!important;
    display:grid!important;place-items:center!important;
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.055)!important;
    transition:background .18s ease,transform .18s ease,color .18s ease!important;
  }
  .app-bottom-nav .app-nav-icon .ui-icon{
    width:19px!important;height:19px!important;display:block!important;
  }
  .app-bottom-nav a.active .app-nav-icon{
    background:#fff!important;color:#082533!important;
    border-color:#fff!important;
    box-shadow:0 4px 12px rgba(0,0,0,.12)!important;
  }
  .app-bottom-nav a:active .app-nav-icon{transform:scale(.9)!important}
  .app-bottom-nav a.active:before{display:none!important}

  .main-nav>a{
    display:flex!important;align-items:center!important;gap:12px!important;
  }
  .main-nav>a>.ui-icon{
    width:20px!important;height:20px!important;flex:0 0 20px!important;
    color:#c87420!important;
  }
  .main-nav>a.nav-icon-link>.ui-icon{color:#c87420!important}
}

/* V21.2 — app-style camp cards */
@media(max-width:800px){.camp-choice-section{padding-top:18px!important;padding-bottom:20px!important}.camp-choice-section .container{padding-left:12px!important;padding-right:12px!important}.camp-choice-head{margin-bottom:12px!important}.camp-choice-head p{font-size:.92rem!important;line-height:1.5!important}.camp-choice-card{box-shadow:0 8px 24px rgba(13,42,52,.09)!important}.camp-choice-body .btn{min-height:42px!important;border-radius:12px!important}}