:root{
  --bosque:#1f4436;
  --bosque-2:#2d5c48;
  --bosque-deep:#122019;
  --dorado:#dba62c;
  --dorado-2:#f0cd6e;
  --crema:#faf6ea;
  --crema-2:#f1e6c8;
  --whats:#25d366;
  --peligro:#c1503f;

  --bg: var(--crema);
  --surface: #fffaf0;
  --ink: #1c2a20;
  --ink-soft: #5a6b5c;
  --line: rgba(28,42,32,0.14);
  --accent: var(--bosque);
  --band-ink: var(--crema);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: var(--bosque-deep); --surface:#1b3327;
    --ink:#f6f1dd; --ink-soft:#b9c9b8; --line: rgba(246,241,221,0.14);
    --accent: var(--dorado); --band-ink: var(--crema);
  }
}
:root[data-theme="dark"]{
  --bg: var(--bosque-deep); --surface:#1b3327;
  --ink:#f6f1dd; --ink-soft:#b9c9b8; --line: rgba(246,241,221,0.14);
  --accent: var(--dorado); --band-ink: var(--crema);
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-inline: max(16px, calc((100vw - 1080px)/2));
}
h1,h2,h3{ font-family:'Baloo 2',system-ui,sans-serif; text-wrap:balance; margin:0; }
p{ margin:0; }
a{ color:inherit; }
button{ font-family:inherit; }
.container{ max-width:1080px; margin-inline:auto; }
.eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
section{ padding-block: clamp(48px, 8vw, 96px); }

.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:14px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif; font-weight:700; font-size:1.05rem; }
.brand-logo{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid var(--dorado); }
.hero-logo{ width:clamp(64px,7vw,84px); height:clamp(64px,7vw,84px); border-radius:50%; object-fit:cover; border:3px solid var(--dorado); box-shadow:0 8px 18px rgba(18,32,25,.24); }
.nav-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--whats); color:#04210f; font-weight:700; font-size:.88rem; padding:9px 16px; border-radius:100px; text-decoration:none; white-space:nowrap; }

.hero{ position:relative; padding-block: clamp(40px,9vw,88px) clamp(32px,6vw,56px); overflow:hidden; border-radius:0 0 28px 28px; min-height:440px; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-scrim{ position:absolute; inset:0; z-index:0; background:linear-gradient(105deg, rgba(10,20,15,.88) 0%, rgba(10,20,15,.72) 38%, rgba(10,20,15,.35) 68%, rgba(10,20,15,.15) 100%); }
.topo{ position:absolute; inset:0; opacity:.25; pointer-events:none; z-index:0; }
.hero-inner{ position:relative; z-index:1; display:grid; gap:22px; max-width:640px; }
.hero-top .eyebrow{ color:var(--dorado-2); }
.hero h1{ font-size:clamp(2.3rem, 6vw, 3.6rem); line-height:1.02; color:var(--crema); }
.hero h1 em{ font-style:normal; color:var(--dorado-2); }
.hero p.lede{ font-size:1.08rem; color:color-mix(in srgb, var(--crema) 82%, transparent); max-width:52ch; line-height:1.55; }
.hero .stat-row{ color:color-mix(in srgb, var(--crema) 78%, transparent); }
.hero .stat-row b{ color:var(--crema); }
.hero .btn-ghost{ border-color:color-mix(in srgb, var(--crema) 45%, transparent); color:var(--crema); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:100px; font-weight:700; font-size:.98rem; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-whats{ background:var(--whats); color:#04210f; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-sm{ padding:8px 14px; font-size:.85rem; }
.btn svg{ flex:none; }
.stat-row{ display:flex; flex-wrap:wrap; gap:22px; margin-top:8px; font-size:.9rem; color:var(--ink-soft); }
.stat-row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.stat-dot{ opacity:.5; }

.band{ background:var(--bosque); color:var(--band-ink); border-radius:24px; padding:clamp(28px,5vw,44px); display:grid; gap:18px; grid-template-columns:1.3fr 1fr; align-items:center; }
.band h2{ font-size:clamp(1.4rem,3vw,1.9rem); color:var(--band-ink); }
.band p{ color:color-mix(in srgb, var(--band-ink) 82%, transparent); line-height:1.6; }
.band-badge{ justify-self:end; display:grid; place-items:center; width:118px; height:118px; border-radius:50%; border:2px solid var(--dorado); text-align:center; line-height:1.1; }
.band-badge b{ font-size:2rem; font-family:'Baloo 2',sans-serif; color:var(--dorado-2); }
.band-badge span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
@media (max-width:720px){ .band{ grid-template-columns:1fr; } .band-badge{ justify-self:start; } }

.sec-head{ display:grid; gap:10px; margin-bottom:clamp(24px,4vw,36px); max-width:60ch; }
.sec-head h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); }
.sec-head p{ color:var(--ink-soft); line-height:1.55; }

.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px; display:grid; gap:12px; align-content:start; position:relative; }
.card.soon{ border-style:dashed; border-color:color-mix(in srgb, var(--dorado) 55%, var(--line)); }
.soon-badge{ position:absolute; top:14px; right:14px; background:var(--dorado); color:#3a2a0d; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:100px; }
.xmas-banner{ margin-top:16px; background:linear-gradient(135deg,#122019,#1f4436 60%,#8a1f2b); border-radius:20px; padding:26px 28px; color:#f5f1e3; }
.xmas-banner h3{ font-size:1.3rem; margin:4px 0 8px; }
.xmas-banner p{ color:color-mix(in srgb, #f5f1e3 85%, transparent); max-width:60ch; }
.card svg{ color:var(--accent); }
.card h3{ font-size:1.05rem; }
.card p{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; }

.gallery-note{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft); border:1px dashed var(--line); padding:8px 14px; border-radius:100px; margin-bottom:20px; }
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:110px; gap:10px; }
.tile{ position:relative; border-radius:14px; overflow:hidden; display:flex; align-items:flex-end; padding:12px; color:#f5f1e3; font-size:.8rem; font-weight:700; }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), transparent 60%); }
.tile span{ position:relative; z-index:1; }
.tile-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile.g1{ grid-column:span 3; grid-row:span 2; background: radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.2), transparent 60%), linear-gradient(160deg,#122019,#1f4436 40%,#2d5c48 72%,#dba62c); }
.tile.g2{ grid-column:span 3; grid-row:span 1; background:linear-gradient(135deg,#5c3d1e,#8a5a34 60%,#dba62c); }
.tile.g3{ grid-column:span 3; grid-row:span 1; background:linear-gradient(135deg,#16332a,#2d5c48 65%,#6fae8e); }
.tile.g4{ grid-column:span 2; grid-row:span 1; background:linear-gradient(135deg,#1f4436,#0d1a15); }
.tile.g5{ grid-column:span 2; grid-row:span 1; background:linear-gradient(135deg,#dba62c,#f0cd6e); }
.tile.g6{ grid-column:span 2; grid-row:span 1; background:linear-gradient(135deg,#4a3420,#8a5a34); }
.tile.g7{ grid-column:span 3; grid-row:span 1; background:linear-gradient(135deg,#16332a,#2d5c48 65%,#6fae8e); }
.tile.g8{ grid-column:span 3; grid-row:span 1; background:linear-gradient(135deg,#122019,#1f4436 40%,#2d5c48 72%); }
@media (max-width:720px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:120px; } .tile.g1{ grid-column:span 2; grid-row:span 2; } .tile.g2,.tile.g3,.tile.g4,.tile.g5,.tile.g6,.tile.g7,.tile.g8{ grid-column:span 1; grid-row:span 1; } }

.moments-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.moment-card{ border-radius:20px; padding:26px; min-height:170px; display:grid; align-content:end; gap:10px; color:#f5f1e3; position:relative; overflow:hidden; }
.moment-card p{ font-family:'Baloo 2',sans-serif; font-size:1.05rem; line-height:1.35; position:relative; z-index:1; }
.moment-tag{ font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; position:relative; z-index:1; }
.moment-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.5), transparent 65%); }
.mc1{ background:linear-gradient(145deg,#0c5a56,#1f4436 55%,#dba62c); }
.mc2{ background:linear-gradient(145deg,#122019,#1f4436 60%,#2d5c48); }
.mc3{ background:linear-gradient(145deg,#5c3d1e,#8a5a34 55%,#dba62c); }
.mc4{ background:linear-gradient(145deg,#1f4436,#dba62c); }

.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.plan{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px; display:grid; gap:14px; align-content:start; }
.plan h3{ font-size:1.25rem; }
.plan ul{ margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
.plan .price-note{ font-size:.85rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:12px; }

.cabins-grid{ display:grid; gap:20px; }
.cabin-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; display:grid; gap:14px; }
.cabin-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cabin-head h3{ font-size:1.15rem; }
.cabin-cap{ font-size:.82rem; color:var(--ink-soft); }
.cal-legend{ display:flex; gap:16px; font-size:.8rem; color:var(--ink-soft); align-items:center; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; }
.dot-free{ background:var(--accent); }
.dot-blocked{ background:var(--peligro); }
.cal-two-months{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .cal-two-months{ grid-template-columns:1fr; } }
.cal-month-head{ font-family:'Baloo 2',sans-serif; font-weight:700; font-size:.95rem; margin-bottom:8px; text-transform:capitalize; }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); font-size:.7rem; color:var(--ink-soft); text-align:center; margin-bottom:4px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day{ aspect-ratio:1; border-radius:8px; border:1px solid transparent; background:none; font:inherit; font-size:.78rem; cursor:pointer; color:var(--ink); }
.cal-day--empty{ visibility:hidden; cursor:default; }
.cal-day--past{ color:var(--ink-soft); opacity:.35; cursor:default; }
.cal-day--free{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
.cal-day--free:hover{ background:color-mix(in srgb, var(--accent) 22%, transparent); }
.cal-day--blocked{ background:color-mix(in srgb, var(--peligro) 16%, transparent); color:var(--peligro); cursor:not-allowed; }
.cal-day--sel{ background:var(--accent); color:var(--band-ink); font-weight:700; }
.editing .cal-day--free, .editing .cal-day--blocked{ outline:1px dashed var(--dorado); }
.price-note{ font-size:.85rem; color:var(--ink-soft); }

.selection-bar{ position:sticky; bottom:12px; margin-top:16px; background:var(--bosque); color:var(--crema); border-radius:16px; padding:14px 18px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.book-form{ display:grid; gap:10px; width:100%; }
.book-form-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.book-input{ flex:1; min-width:140px; font:inherit; padding:9px 14px; border-radius:100px; border:1px solid color-mix(in srgb, var(--crema) 40%, transparent); background:color-mix(in srgb, var(--crema) 12%, transparent); color:var(--crema); }
.book-input::placeholder{ color:color-mix(in srgb, var(--crema) 65%, transparent); }
.book-status{ font-size:.82rem; }

.events-list{ display:grid; gap:14px; }
.event-card{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; align-items:flex-start; }
.event-date{ flex:none; width:64px; text-align:center; font-family:'Baloo 2',sans-serif; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:10px; padding:8px 4px; font-size:.85rem; }
.events-empty{ color:var(--ink-soft); }

.merch-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.merch-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px; display:grid; gap:8px; justify-items:center; text-align:center; }
.merch-art{ width:100%; max-width:160px; aspect-ratio:1; }
.merch-card h3{ font-size:.95rem; }
.merch-photo{ width:100%; border-radius:20px; border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.12); display:block; }
.merch-caption{ text-align:center; margin-top:12px; font-size:.85rem; color:var(--ink-soft); }

.llegar{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch; }
.llegar-info{ display:grid; gap:16px; align-content:start; }
.addr{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; display:grid; gap:6px; }
.addr b{ font-size:1.05rem; }
.addr span{ color:var(--ink-soft); font-size:.92rem; font-variant-numeric:tabular-nums; }
.map-frame{ border-radius:20px; border:1px solid var(--line); background: linear-gradient(180deg, transparent 60%, rgba(31,68,54,.16)), var(--surface); min-height:260px; position:relative; overflow:hidden; display:grid; place-items:center; }
.map-frame svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.pin{ position:relative; display:grid; place-items:center; gap:10px; text-align:center; }
.pin-dot{ width:20px; height:20px; border-radius:50%; background:var(--dorado); border:4px solid var(--surface); box-shadow:0 0 0 3px var(--dorado); }
@media (max-width:820px){ .llegar{ grid-template-columns:1fr; } }

.rules{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.rule{ display:grid; gap:8px; }
.rule h3{ font-size:1rem; }
.rule p{ color:var(--ink-soft); font-size:.9rem; line-height:1.55; }

footer{ padding-block:40px 90px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; color:var(--ink-soft); font-size:.86rem; }
.social{ display:flex; gap:14px; align-items:center; }
.social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); text-decoration:none; }

.float-whats{ position:fixed; right:18px; bottom:18px; z-index:50; display:inline-flex; align-items:center; gap:9px; background:var(--whats); color:#04210f; padding:13px 18px; border-radius:100px; font-weight:700; font-size:.9rem; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25); }
@media (max-width:520px){ .float-whats span{ display:none; } .float-whats{ padding:14px; } }

.chat-fab{ position:fixed; right:18px; bottom:82px; z-index:50; background:var(--bosque); color:var(--crema); border:2px solid var(--dorado); border-radius:100px; padding:9px 16px 9px 10px; font-weight:700; font-size:.86rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.chat-fab-logo{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--crema); }
.chat-fab-badge{ position:absolute; top:-5px; right:-5px; background:var(--peligro); color:#fff; font-size:.68rem; font-weight:800; line-height:1; min-width:19px; height:19px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 0 0 2px var(--bg); }
@media (prefers-reduced-motion:no-preference){
  .chat-fab{ animation: dino-bounce 3.2s ease-in-out infinite; }
  .chat-fab:hover{ animation-play-state:paused; }
  @keyframes dino-bounce{ 0%,80%,100%{ transform:translateY(0); } 88%{ transform:translateY(-6px); } 94%{ transform:translateY(0); } }
}
@media (max-width:520px){ .chat-fab span{ display:none; } .chat-fab{ padding:9px; } }
.chat-panel{ position:fixed; right:18px; bottom:150px; z-index:55; width:min(340px,88vw); max-height:min(60vh,520px); background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.25); display:flex; flex-direction:column; overflow:hidden; }
.chat-head{ background:var(--bosque); color:var(--crema); padding:12px 16px; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-family:'Baloo 2',sans-serif; }
.chat-head span{ display:inline-flex; align-items:center; gap:8px; }
.chat-head-logo{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.chat-head button{ background:none; border:none; color:var(--crema); font-size:1.1rem; cursor:pointer; }
#chat-body{ flex:1; overflow-y:auto; padding:14px; display:grid; gap:8px; align-content:start; }
.chat-msg{ padding:9px 12px; border-radius:12px; font-size:.86rem; line-height:1.4; max-width:85%; }
.chat-msg--bot{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.chat-msg--user{ background:var(--dorado); color:#3a2a0d; margin-left:auto; }
.chat-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; }
.chat-quick button{ font-size:.75rem; padding:6px 10px; border-radius:100px; border:1px solid var(--line); background:var(--bg); cursor:pointer; color:var(--ink); }
.chat-input-row{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
.chat-input-row input{ flex:1; font:inherit; padding:9px 11px; border-radius:100px; border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.chat-input-row button{ background:var(--bosque); color:var(--crema); border:none; border-radius:100px; padding:9px 16px; font-weight:700; cursor:pointer; }
.chat-foot-link{ text-align:center; font-size:.78rem; padding:0 14px 12px; }

[data-reveal]{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion:no-preference){ [data-reveal]{ opacity:0; transform:translateY(14px); } [data-reveal].is-in{ opacity:1; transform:none; } }

/* admin.html specific */
.admin-wrap{ max-width:720px; margin:0 auto; padding:32px 16px 80px; display:grid; gap:24px; }
.admin-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; display:grid; gap:12px; }
.admin-card label{ display:grid; gap:4px; font-size:.85rem; color:var(--ink-soft); }
.admin-card input, .admin-card textarea{ font:inherit; padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); width:100%; }
.admin-event-row{ display:grid; grid-template-columns:120px 1fr 1fr auto; gap:6px; align-items:center; }
.admin-event-row button{ border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:1rem; }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.json-out{ width:100%; min-height:220px; font-family:ui-monospace,monospace; font-size:.78rem; }
