:root{
  --cacao-950:#2B1B12;
  --cacao-800:#4A2E1C;
  --sand-100:#FBF6EC;
  --sand-300:#F1E4CD;
  --sand-400:#E7D4B3;
  --moss-600:#46583E;
  --moss-700:#374631;
  --gold-500:#C1892F;
  --gold-600:#A8752A;
  --clay-700:#8C4A2F;
  --orange-600:#B8551A;
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand-300);
  color:var(--cacao-950);
  font-family:'Work Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--cacao-950);
  margin:0 0 0.5em 0;
  line-height:1.15;
}
p{margin:0 0 1em 0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.max{max-width:var(--max); margin:0 auto; padding:0 24px;}
ul{padding-left:1.2em;}
li{margin-bottom:0.4em;}
:focus-visible{outline:3px solid var(--gold-600); outline-offset:2px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,246,236,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--sand-400);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.logo{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.3rem;
  text-decoration:none; color:var(--cacao-950);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.logo img{flex:none; width:40px; height:40px; border-radius:6px;}
.main-nav{display:flex; align-items:center; gap:22px;}
.main-nav a{
  text-decoration:none; font-weight:500; font-size:0.98rem;
  color:var(--cacao-800); padding:6px 2px; border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{border-color:var(--gold-500); color:var(--cacao-950);}
.nav-cta{
  background:var(--gold-500); color:var(--sand-100) !important;
  padding:10px 20px !important; border-radius:999px; border-bottom:none !important;
  font-weight:600 !important;
}
.nav-cta:hover{background:var(--gold-600); border-color:transparent !important;}
.lang-toggle{
  background:transparent; border:1px solid var(--cacao-800); color:var(--cacao-800);
  border-radius:999px; padding:8px 16px; font-family:inherit; font-weight:600; font-size:0.88rem;
  cursor:pointer; white-space:nowrap;
}
.lang-toggle:hover{background:var(--cacao-950); color:var(--sand-100); border-color:var(--cacao-950);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--cacao-800); border-radius:6px;
  width:40px; height:36px; font-size:1.2rem; color:var(--cacao-800); cursor:pointer;
}

@media (max-width:900px){
  .main-nav{
    position:fixed; inset:69px 0 auto 0; background:var(--sand-100);
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 18px;
    border-bottom:1px solid var(--sand-400);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .main-nav a{width:100%; padding:12px 0; border-bottom:1px solid var(--sand-400);}
  .nav-cta{margin-top:10px; text-align:center;}
  .lang-toggle{margin-top:10px; width:100%;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:88px 0 96px;
  background:
    radial-gradient(60% 90% at 82% 12%, rgba(193,137,47,0.20), transparent 60%),
    radial-gradient(70% 80% at 8% 100%, rgba(70,88,62,0.22), transparent 65%),
    var(--sand-300);
}
.hero-inner{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
}
.hero-eyebrow{ font-size:0.95rem; color:var(--moss-700); font-weight:600; margin-bottom:14px; }
.hero h1{font-size:clamp(2.2rem, 4vw, 3.4rem); max-width:14ch;}
.hero p.lead{font-size:1.15rem; max-width:46ch; color:var(--cacao-800);}
.hero-ctas{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:1rem; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--gold-500); color:var(--sand-100);}
.btn-primary:hover{background:var(--gold-600);}
.btn-outline{background:transparent; border-color:var(--cacao-800); color:var(--cacao-800);}
.btn-outline:hover{background:var(--cacao-950); color:var(--sand-100); border-color:var(--cacao-950);}
.btn-whatsapp{background:var(--moss-600); color:var(--sand-100);}
.btn-whatsapp:hover{background:var(--moss-700);}

.hero-photo{
  position:relative; aspect-ratio:1/1; border-radius:2px; overflow:hidden;
  background:var(--sand-400); border:1px solid var(--sand-400);
  box-shadow:0 24px 48px -24px rgba(43,27,18,0.45);
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center;}

@media (max-width:900px){
  .hero{padding:28px 0 56px;}
  .hero-inner{grid-template-columns:1fr; gap:28px;}
  .hero-photo{order:-1; aspect-ratio:4/3;}
  .hero-photo img{object-position:center;}
  .hero h1{max-width:none;}
}
@media (max-width:520px){
  .hero-inner, .header-inner, .max{padding-left:16px; padding-right:16px;}
  .hero-photo{margin:0 -16px; border:none; box-shadow:none;}
  .hero p.lead{font-size:1.05rem;}
  .hero-ctas .btn{flex:1; justify-content:center; padding:13px 18px;}
}

/* ---------- Intro strip ---------- */
.intro-strip{background:var(--cacao-950); color:var(--sand-100); padding:34px 0;}
.intro-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.intro-item{display:flex; gap:14px; align-items:flex-start;}
.intro-item svg{flex:none; margin-top:2px; color:var(--gold-500);}
.intro-item h4{color:var(--sand-100); font-size:1rem; margin-bottom:2px;}
.intro-item p{color:var(--sand-400); margin:0; font-size:0.9rem;}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.intro-grid{grid-template-columns:1fr;}}

/* ---------- Section shell ---------- */
section.block{padding:84px 0;}
.block-head{max-width:60ch; margin-bottom:44px;}
.block-head h1, .block-head h2{font-size:clamp(1.8rem, 3vw, 2.4rem);}
.block-head p{color:var(--cacao-800); font-size:1.05rem;}

/* ---------- Gallery ---------- */
.gallery-filters{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.filter-btn{
  padding:8px 18px; border-radius:999px; border:1px solid var(--cacao-800);
  background:transparent; color:var(--cacao-800); font-family:inherit; font-size:0.9rem;
  cursor:pointer; font-weight:500;
}
.filter-btn.active{background:var(--cacao-950); color:var(--sand-100); border-color:var(--cacao-950);}
.gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:150px; gap:14px;}
.gallery-tile{
  position:relative; border-radius:2px; overflow:hidden; padding:0; margin:0;
  background:var(--sand-400); border:none; cursor:zoom-in; font:inherit;
  display:flex; align-items:flex-end;
}
.gallery-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.gallery-tile:hover img{transform:scale(1.04);}
.gallery-tile.big{grid-column:span 2; grid-row:span 2;}
.gallery-tile span{
  position:relative; margin:10px;
  font-size:0.78rem; color:var(--cacao-800); background:rgba(251,246,236,0.9);
  padding:5px 9px; border-radius:4px; font-weight:600;
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(26,16,10,0.94);
  display:flex; align-items:center; justify-content:center; padding:56px 64px;
}
.lightbox[hidden]{display:none;}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; max-height:100%;}
.lightbox img{max-width:100%; max-height:calc(100vh - 140px); object-fit:contain; border-radius:2px;}
.lightbox figcaption{color:var(--sand-300); font-size:0.92rem; text-align:center;}
.lb-btn{
  position:absolute; background:rgba(251,246,236,0.12); color:var(--sand-100);
  border:1px solid rgba(251,246,236,0.25); border-radius:50%;
  width:46px; height:46px; font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lb-btn:hover{background:rgba(251,246,236,0.25);}
.lb-close{top:14px; right:14px; font-size:1.1rem;}
.lb-prev{left:12px; top:50%; transform:translateY(-50%);}
.lb-next{right:12px; top:50%; transform:translateY(-50%);}
@media (max-width:600px){
  .lightbox{padding:60px 8px 80px;}
  .lb-prev, .lb-next{top:auto; bottom:16px; transform:none;}
  .lb-prev{left:calc(50% - 58px);}
  .lb-next{right:calc(50% - 58px);}
}
@media (max-width:800px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px;}
  .gallery-tile.big{grid-column:span 2; grid-row:span 1;}
}

/* ---------- Recommendations (accordion) ---------- */
.recs-layout{display:grid; grid-template-columns:1fr; gap:0;}
details.acc{ border-top:1px solid var(--sand-400); }
details.acc:last-of-type{border-bottom:1px solid var(--sand-400);}
details.acc summary{
  list-style:none; cursor:pointer; padding:20px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.2rem;
}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary .plus{
  flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--cacao-800);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--cacao-800);
  transition:transform .18s ease;
}
details.acc[open] summary .plus{transform:rotate(45deg);}
.acc-body{padding:0 4px 26px; color:var(--cacao-800); max-width:70ch;}
.acc-body h5{margin:0 0 6px; font-family:'Work Sans',sans-serif; font-weight:700; color:var(--cacao-950); font-size:0.98rem;}
.acc-body .sub{margin-top:16px;}

.attractions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.attraction-card{
  border:1px solid var(--sand-400); background:var(--sand-100); padding:18px;
  display:flex; gap:12px; align-items:flex-start;
  text-decoration:none; color:var(--cacao-950);
  transition:border-color .15s ease, transform .15s ease;
}
a.attraction-card:hover{border-color:var(--gold-500); transform:translateY(-2px);}
.attraction-card svg{flex:none; color:var(--clay-700); margin-top:2px;}
.attraction-card span{font-weight:600; font-size:0.95rem;}
.attraction-card small{
  display:flex; align-items:center; gap:5px; margin-top:6px;
  font-weight:600; font-size:0.8rem; color:var(--moss-600);
}
.attraction-card small .pin{margin:0; color:var(--moss-600);}
a.attraction-card:hover small{text-decoration:underline;}
@media (max-width:800px){.attractions-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.attractions-grid{grid-template-columns:1fr;}}

/* ---------- Tours ---------- */
.tours-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.tour-card{
  background:var(--sand-100); border:1px solid var(--sand-400); position:relative;
  padding:26px 24px 24px; scroll-margin-top:96px;
}
.tour-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--gold-500);
}
.tour-card h3{font-size:1.35rem; margin:2px 0 6px;}
.tour-card .price{
  align-self:flex-start; margin-bottom:12px; padding:4px 14px; border-radius:999px;
  font-family:'Fraunces', serif; font-size:1.25rem; font-weight:700; color:var(--orange-600);
  background:rgba(184,85,26,0.10);
}
.tour-card .price-note{ font-size:0.8rem; color:var(--cacao-800); margin:-6px 0 12px; }
.tour-card{display:flex; flex-direction:column;}
.tour-card > .btn:last-child{margin-top:auto;}
.tour-card .intro-text{margin-bottom:14px;}

.tours-more{
  margin-top:28px; padding:28px 30px;
  background:var(--cacao-950); color:var(--sand-100);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.tours-more:empty{display:none;}
.tours-more h3{color:var(--sand-100); font-size:1.4rem; margin-bottom:4px;}
.tours-more p{color:var(--sand-400); margin:0;}
@media (max-width:600px){
  .tours-more{padding:24px 20px;}
  .tours-more .btn{width:100%; justify-content:center;}
}
.tour-card .intro-text{color:var(--cacao-800); font-size:0.96rem;}
.tour-meta{ border-top:1px dashed var(--sand-400); padding-top:12px; margin-top:6px; }
.tour-meta div{ display:flex; gap:8px; font-size:0.83rem; margin-bottom:6px; }
.tour-meta b{ font-weight:700; min-width:96px; flex:none; color:var(--cacao-950); }
.tour-meta span{ color:var(--cacao-800); }
.book-row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.book-row label{ display:flex; flex-direction:column; font-size:0.78rem; font-weight:600; color:var(--cacao-800); gap:4px; flex:1; min-width:110px; }
.book-row select, .book-row input{
  font-family:inherit; padding:9px 10px; border:1px solid var(--sand-400); border-radius:4px;
  background:var(--sand-100); font-size:0.92rem; color:var(--cacao-950); width:100%;
}
.tour-card .btn{width:100%; justify-content:center; margin-top:14px; font-size:0.94rem; padding:11px 18px;}
@media (max-width:800px){.tours-grid{grid-template-columns:1fr;}}

/* ---------- Booking banner ---------- */
.booking-banner{ background:var(--moss-600); color:var(--sand-100); padding:70px 0; text-align:center; }
.booking-banner h2{color:var(--sand-100);}
.booking-banner p{color:var(--sand-400); max-width:52ch; margin:0 auto 26px;}
.booking-banner .btn-primary{background:var(--gold-500);}

/* ---------- Footer ---------- */
footer{background:var(--cacao-950); color:var(--sand-400); padding:54px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px;}
footer h4{color:var(--sand-100); font-family:'Work Sans',sans-serif; font-weight:700; font-size:0.95rem; margin-bottom:12px;}
footer a{text-decoration:none; color:var(--sand-400);}
footer a:hover{color:var(--sand-100);}
.footer-bottom{
  max-width:var(--max); margin:40px auto 0; padding:20px 24px 0; border-top:1px solid rgba(255,255,255,0.12);
  font-size:0.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;}}

/* ---------- Floating WhatsApp ---------- */
.float-wa{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:var(--moss-600); color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* ---------- Small phones ---------- */
@media (max-width:520px){
  section.block{padding:60px 0;}
  .block-head{margin-bottom:28px;}
  .tour-card{padding:22px 18px 20px;}
  .float-wa{width:52px; height:52px; bottom:16px; right:16px;}
}