/* Base */
:root{--bg:#0b0b0b;--fg:#e8e8e8;--muted:#bdbdbd;--acc:#242424}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.55 Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:#d8d8d8;text-decoration:none}
a:hover{color:#fff}
.h2{font-size:28px;margin:0 0 14px}
.section{padding:48px 20px}
.container{max-width:1100px;margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,11,11,.92);backdrop-filter:blur(6px);border-bottom:1px solid #151515}
.nav{display:flex;gap:18px;align-items:center;padding:10px 16px;flex-wrap:wrap}
.site-header .nav a,.site-header .nav-btn{font-size:15px;font-weight:500;line-height:1;padding:10px 12px;color:#bfbfbf}
.nav-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;font:inherit;color:#bfbfbf;cursor:pointer}
.nav-btn:hover,.site-header .nav a:hover{color:#fff;background:#161616;border-radius:8px}

/* Merch dropdown */
.nav-merch{position:relative;display:inline-flex;align-items:center}
.nav-menu{position:absolute;right:0;top:110%;background:#0f0f0f;border:1px solid #242424;border-radius:12px;padding:8px;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:none;visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;z-index:40;pointer-events:none}
.nav-menu.show{display:block;visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
.nav-menu .nav-menu-item{width:100%;text-align:left;padding:10px 12px;border-radius:8px;background:transparent;border:1px solid transparent;color:#e8e8e8;cursor:pointer;font-size:14px;line-height:1}
.nav-menu .nav-menu-item:hover{background:#151515}
.nav-menu .sep{height:1px;background:#242424;margin:6px 2px}

/* ScrollHero */
.scroll-hero-wrap{height:200vh;}
.scroll-hero.sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#0b0b0b}
.scroll-hero .hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;transition:opacity .3s ease, transform .3s ease}
.scroll-hero .bg-coffee{background-image:url('assets/hero/coffee.jpg'); opacity:1; transform:scale(1.02)}
.scroll-hero .bg-drink {background-image:url('assets/hero/drink.jpg');  opacity:0; transform:scale(1.02)}
.scroll-hero .hero-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(70vw,680px);opacity:0;filter:drop-shadow(0 10px 30px rgba(0,0,0,.45))}
.scroll-hero .tag-coffee{opacity:1}

/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border:1px solid var(--acc);border-radius:999px;color:var(--muted);cursor:pointer}
.chip.active,.chip:hover{color:#fff;border-color:#3a3a3a;background:#141414}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{display:flex;flex-direction:column;border:1px solid #1a1a1a;border-radius:14px;padding:12px;background:#111}
.card .prod-img{width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#0d0d0d center/cover no-repeat;border:1px solid #1b1b1b;box-shadow:0 6px 18px rgba(0,0,0,.25) inset;margin-bottom:10px}
.card .title{font-weight:600}
.card .meta{color:var(--muted);font-size:12px}
.card .price{margin-top:6px}
.card .actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:10px;border:1px solid #2a2a2a;background:#171717;color:#e8e8e8;cursor:pointer}
.btn.primary{background:#e8e8e8;color:#0b0b0b;border-color:#e8e8e8}
.btn.outline{background:transparent}
.btn:hover{filter:brightness(1.05)}

/* Cart */
.cart-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #242424;background:#0f0f0f;border-radius:10px}
.cart-btn .cart-count{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;border-radius:999px;background:#e8e8e8;color:#0b0b0b;font-size:12px;padding:0 6px}
.cart-drawer{position:fixed;inset:0;z-index:60;display:none;pointer-events:none}
.cart-drawer.show{display:block;pointer-events:auto}
.cart-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s ease;z-index:1}
.cart-drawer.show .cart-backdrop{opacity:1}
.cart-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,92vw);background:#0f0f0f;border-left:1px solid #242424;box-shadow:-20px 0 60px rgba(0,0,0,.35);transform:translateX(12px);opacity:.98;display:flex;flex-direction:column;transition:transform .2s ease;z-index:2}
.cart-drawer.show .cart-panel{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #1a1a1a}
.cart-items{padding:12px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;border:1px solid #1a1a1a;border-radius:12px;padding:10px;background:#111}
.cart-thumb{width:64px;height:64px;border-radius:10px;background:#0b0b0b center/cover no-repeat;border:1px solid #1b1b1b}
.cart-meta{display:flex;flex-direction:column;gap:4px}
.qty{display:inline-flex;align-items:center;border:1px solid #2a2a2a;border-radius:8px;overflow:hidden}
.qty button{background:transparent;border:0;color:#e8e8e8;padding:6px 10px;cursor:pointer}
.qty input{width:40px;background:#0f0f0f;border:0;text-align:center;color:#e8e8e8;padding:6px 2px}
.remove-btn{background:transparent;border:1px dashed #2a2a2a;color:#bdbdbd;border-radius:8px;padding:6px 10px;cursor:pointer}
.remove-btn:hover{border-style:solid;color:#fff}
.cart-foot{border-top:1px solid #1a1a1a;padding:14px;display:flex;flex-direction:column;gap:12px}
.cart-actions{display:flex;gap:10px;justify-content:space-between}
.icon-btn{background:transparent;border:1px solid #2a2a2a;border-radius:8px;color:#e8e8e8;padding:6px 10px;cursor:pointer}

/* Instagram */
.insta-wrap{max-width:1000px;margin:0 auto;border:1px solid #1a1a1a;border-radius:16px;overflow:hidden;background:#0f0f0f}
.insta-wrap iframe{display:block;width:100%;height:1020px}
@media (max-width:640px){.insta-wrap iframe{height:380px}}
.insta-cta{display:flex;justify-content:center;margin-top:12px}
.insta-cta .btn{border:1px solid #242424;background:#111;color:#e8e8e8}
.insta-cta .btn:hover{background:#161616}

/* Front Desk */
.fd-form{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.fd-row{display:flex;gap:12px;flex-wrap:wrap}
.fd-row label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}
.fd-row input{background:#0f0f0f;border:1px solid #242424;color:#e8e8e8;border-radius:10px;padding:10px}
.fd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* Utilities */
html.no-scroll, body.no-scroll { overflow: hidden; }
.muted{color:#bdbdbd}
.mini{font-size:12px}


/* v27 — Brand logo, Reviews & Maps */
.brand{display:inline-flex;align-items:center;margin-right:6px}
.brand-logo{height:44px; width:auto; image-rendering:auto; filter:none}
@media (max-width:640px){ .brand-logo{ height:36px; } }

.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.review-card{border:1px solid #1a1a1a;background:#111;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.stars{color:#ffd166;font-size:14px;letter-spacing:1px}
.review-meta{display:flex;justify-content:space-between;color:#bdbdbd;font-size:12px}
.review-text{color:#e8e8e8;font-size:14px}

.map-wrap{border:1px solid #1a1a1a;border-radius:16px;overflow:hidden;background:#0f0f0f}


/* v28 — Eventos mobile-friendly */
.events-scroller{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media (max-width: 640px){
  .events-scroller{display:flex;gap:12px;overflow:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .events-card{min-width:78vw;scroll-snap-align:center}
}
.events-card{border:1px solid #1a1a1a;background:#111;border-radius:14px;overflow:hidden;cursor:pointer;transition:transform .12s ease, filter .12s ease}
.events-card:hover{transform:translateY(-2px);filter:brightness(1.02)}
.events-poster{width:100%;aspect-ratio:9/16;background:#0b0b0b center/cover no-repeat}
.events-body{padding:10px;display:flex;flex-direction:column;gap:6px}
.events-title{font-weight:700}
.events-meta{color:#bdbdbd;font-size:12px}


/* v30 — Booking embed responsive */
.h3{font-size:20px;margin:0 0 8px}
.booking-embed{border:1px solid #1a1a1a;border-radius:16px;overflow:hidden;background:#0f0f0f}
.booking-embed iframe{display:block;width:100%;height:clamp(560px, 80vh, 1000px);border:0}
@media (max-width:640px){
  .booking-embed iframe{height:82vh}
}


/* v31 — Hotel CTA only */
#hotel .fd-actions{display:flex;gap:10px;flex-wrap:wrap}

/* IG tablet */
@media (max-width:1024px){.insta-wrap iframe{height:760px}}

/* Merch inline add feedback */
.qty-chip{display:none;align-items:center;justify-content:center;margin-left:8px;padding:2px 8px;border:1px solid #242424;border-radius:999px;font-size:12px;background:#0f0f0f;color:#e8e8e8}
.btn.add.added{opacity:.85;transform:scale(0.98)}

/* --- Toast mini --- */
#toast-root{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:9999}
.toast{opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease;background:#111;border:1px solid #242424;border-radius:12px;padding:10px 12px;min-width:180px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.toast.in{opacity:1;transform:translateY(0)}
.toast-title{color:#e8e8e8;font-weight:600;font-size:14px}
.toast-sub{color:#bdbdbd;font-size:12px;margin-top:2px}

/* --- Badge bump --- */
#cart-count.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:scale(1)}30%{transform:scale(1.2)}60%{transform:scale(0.92)}100%{transform:scale(1)}}

/* Lang switch */
.nav .spacer{margin-left:auto}
.lang-switch{display:flex;gap:6px;align-items:center}
.lang-switch .lang-btn{font-size:12px;padding:6px 8px;border:1px solid #242424;background:#111;color:#e8e8e8;border-radius:8px;line-height:1}
.lang-switch .lang-btn.active{background:#1a1a1a;color:#fff;border-color:#2a2a2a}

/* Lang switch flags */
.lang-switch .lang-btn{display:inline-flex;gap:6px;align-items:center}
.lang-switch .flag{display:inline-flex;width:16px;height:12px;overflow:hidden;border-radius:2px;box-shadow:0 0 0 1px #222 inset}
.lang-switch .lang-label{font-weight:600;letter-spacing:.4px}

/* Fix: ensure language buttons are clickable and above menus */
.lang-switch{position:relative;z-index:100}
.lang-switch .lang-btn{cursor:pointer;user-select:none}

.merch-card .carousel{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:#0f0f0f}
.merch-card .track{display:flex;height:100%;width:100%;transition:transform .35s ease}
.merch-card .slide{min-width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.merch-card .slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.merch-card .nav{position:absolute;top:50%;transform:translateY(-50%);border:none;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);padding:6px 8px;border-radius:10px;cursor:pointer}
.merch-card .nav.prev{left:8px}.merch-card .nav.next{right:8px}
.merch-card .dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:6px}
.merch-card .dot{width:6px;height:6px;border-radius:50%;background:#6a6a6a;opacity:.7}
.merch-card .dot.active{background:#e6e6e6;opacity:1}



/* --- Top hero with video under the headline --- */
.top-hero {
  position: relative;
  padding: 6rem 1rem 2rem;
  display: grid;
  place-items: center;
  background: transparent;
}
.top-hero .hero-inner {
  width: min(1100px, 92vw);
  display: grid;
  gap: 1.25rem;
}
.hero-title {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  line-height: 1.1;
  text-align: center;
  font-weight: 700;
}
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-video .yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Hide any previous hero if it remains in the DOM */
section#hero, .scroll-hero, .hero-wrapper { display: none !important; }



/* --- Full-bleed hero video (no borders/no shadow) --- */
:root { --header-h: 88px; } /* ajusta si tu header mide distinto */
.top-hero { padding: 0; margin: 0; }
.top-hero .hero-inner { width: 100vw; max-width: 100vw; gap: 0; }
.hero-video {
  position: relative;
  width: 100vw;
  height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.hero-video .yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Eliminar cualquier hero previo, por si quedó algo */
section#hero, .scroll-hero, .hero-wrapper { display: none !important; }



/* ===== Split Header (SOMOS-style) ===== */
:root { --header-h: 88px; --nav-bg: rgba(0,0,0,0.5); --nav-blur: 8px; }

.split-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(var(--nav-blur));
  background: var(--nav-bg);
}
.split-header .nav-wrap {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: min(1200px, 94vw);
  margin: 0 auto;
}
.split-header .nav-left,
.split-header .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.split-header .nav-left { justify-content: flex-start; }
.split-header .nav-right { justify-content: flex-end; }
.split-header .brand {
  display: grid;
  place-items: center;
  transform: translateY(2px);
}
.split-header .brand-logo {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.split-header .nav-link {
  font-weight: 600;
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 999px;
  transition: background .2s ease;
}
.split-header .nav-link:hover { background: rgba(255,255,255,.08); }
.nav-toggle {
  display: none;
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; line-height: 1; padding: .35rem .6rem;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}
/* Drawer mobile */
.nav-drawer {
  position: fixed;
  top: var(--header-h); left: 0; right: 0;
  background: rgba(0,0,0,.9);
  backdrop-filter: blur(6px);
  display: grid;
  gap: .75rem;
  padding: 1rem;
  transform: translateY(-100%);
  transition: transform .25s ease;
  z-index: 49;
}
.nav-drawer.show { transform: translateY(0); }
.nav-drawer .nav-link { padding: .75rem 1rem; border-radius: 12px; }
@media (max-width: 980px){
  .split-header .nav-left, .split-header .nav-right { display: none; }
  .split-header .nav-wrap { grid-template-columns: 1fr auto 1fr; }
  .nav-toggle { display: block; }
}
/* Ensure page content starts below header */
body { padding-top: var(--header-h); }



/* === Polished header (solid) === */
:root { --header-h: 84px; }
@media (max-width: 980px){ :root { --header-h: 64px; } }

.split-header {
  background: #0a0a0a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.split-header .brand-logo {
  height: 54px;
}
@media (max-width: 980px){
  .split-header .brand-logo { height: 44px; }
}

/* === Full-bleed hero video (cover) === */
.top-hero { padding: 0; margin: 0; }
.top-hero .hero-video {
  position: relative;
  width: 100vw;
  height: calc(100vh - var(--header-h));
  margin-top: var(--header-h);
  overflow: hidden;
  background: #000;
  z-index: 1;
}
.top-hero .yt-frame {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none; /* no clicks stop scroll */
}

/* Vertical BOOK NOW pill */
.book-now-cta{
  position: fixed;
  left: 10px;
  top: 50vh;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: #ffffff;
  color: #000;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .5rem .4rem;
  border-radius: 10px;
  text-decoration: none;
  z-index: 60;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .2s ease;
}
.book-now-cta:hover{ transform: translateY(-50%) scale(1.04); box-shadow: 0 12px 26px rgba(0,0,0,.32); }

/* Ensure page content starts below header; hero already accounts for margin-top */
body { padding-top: 0 !important; }



/* === Header/DRAWR bugfixes === */
.split-header { border-radius: 0 !important; }
.split-header .nav-wrap,
.split-header nav,
.split-header .brand { background: transparent !important; box-shadow: none !important; }

/* Desktop: ensure menus visible */
@media (min-width: 981px){
  .split-header .nav-left,
  .split-header .nav-right { display: flex !important; }
  .nav-toggle { display: none !important; }
}

/* Drawer hidden properly when closed */
.nav-drawer{
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
  border-radius: 0;
}
.nav-drawer.show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Remove any stray bar styles that look like a rounded pill at top */
.nav-drawer, .split-header .nav-wrap {
  border-radius: 0 !important;
}

/* Avoid duplicate top spacing */
body { margin-top: 0 !important; }



/* === Floating Chat + Popup (v1) === */
.cart-btn{display:inline-flex;align-items:center;gap:6px;background:#111;border:1px solid #1a1a1a;padding:8px 10px;border-radius:999px;color:#eee;cursor:pointer}
.cart-btn .cart-count{display:inline-block;min-width:18px;height:18px;line-height:18px;font-size:12px;border-radius:9px;background:#00d084;color:#111;text-align:center;padding:0 6px;margin-left:4px}
.chat-fab{position:fixed;right:16px;bottom:20px;background:#fff;color:#111;border:1px solid #dcdcdc;border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 30px rgba(0,0,0,.18);font-weight:600;text-decoration:none;z-index:9999}
.chat-fab .chat-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#111}
.chat-fab:hover{transform:translateY(-1px)}
/* popup */
.popup-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:9998;padding:16px}
.popup-backdrop.show{display:flex}
.popup-card{background:#ffcf2e;color:#111;max-width:520px;width:100%;border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);position:relative}
.popup-card h3{margin:0 0 8px 0}
.popup-close{position:absolute;top:8px;right:8px}
.popup-card .form-row{margin:8px 0}
.popup-card input{width:100%;padding:10px;border-radius:10px;border:1px solid #111;background:#fff;color:#111}
.popup-card .mini{font-size:12px;margin-top:8px}
@media (max-width:480px){ .chat-fab{bottom:14px;right:12px;padding:9px 12px} }

/* Override: move chat to left */
.chat-fab{left:16px;right:auto}


/* --- Lodge gallery & booking modal --- */
.lodge-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin:14px 0 22px}
.lodge-gallery-item{display:block;border:0;padding:0;background:transparent;cursor:pointer}
.lodge-gallery img{width:100%;height:280px;object-fit:cover;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:transform .18s ease}
.lodge-gallery-item:hover img{transform:scale(1.01)}

.booking-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:9999;padding:18px}
.booking-modal.open{display:flex}
.booking-modal__dialog{position:relative;width:min(100%, 960px)}
.booking-modal__close{position:absolute;top:-12px;right:-12px;border:0;border-radius:999px;width:40px;height:40px;font-size:22px;font-weight:700;line-height:40px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
#booking-frame{width:min(96vw, 960px);height:min(85vh, 760px);border:0;border-radius:12px;background:#fff}
/* --- End lodge gallery --- */


/* Hide Book Now while cart is open */
body.no-scroll .book-now-cta{display:none !important;}


/* === Surf Forecast row (image left + widget right) === */
.sf-row{display:flex;gap:32px;align-items:center;justify-content:center;flex-wrap:wrap;padding:32px 16px;}
.sf-row .sf-left-image{max-width:620px;width:46vw;height:auto;display:block;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.25);}
.sf-row .surf-fc-i{min-width:320px;}
/* Make widget expand nicely */
.sf-row .wf-width-cont{flex:1;min-width:360px;max-width:920px;}
@media (min-width:1280px){
  .sf-row .sf-left-image{max-width:720px;width:48vw;}
}
@media (max-width: 768px){
  .sf-row .sf-left-image{width:60vw;max-width:540px;}
}

/* Make widget expand nicely */
.sf-row .wf-width-cont{flex:1;min-width:320px;max-width:840px;}
@media (max-width: 768px){
  .sf-row .sf-left-image{width:60vw;max-width:480px;}
}