:root{
  --ink:#12181f;
  --paper:#ffffff;
  --grey:#e9ebee;
  --accent:#1c6f7a;
  --orange:#F5821F;
  --wa:#25D366;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Comfortaa', sans-serif; color:var(--ink); background:var(--paper); line-height:1.5;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:400;}
.skip-link:focus{left:12px; top:12px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}

/* Header */
header{
  position:fixed; top:16px; left:16px; right:16px; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:0px 40px;
  background:rgba(255,255,255,0.40);
  border-radius:20px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease, top 0.25s ease;
}
header a, header button{color:var(--ink);}
.logo{display:flex; align-items:center;}
.logo img{height:80px; width:auto;}
nav.primary{display:flex; align-items:center; gap:36px;}
nav.primary > a, .dropdown > button{font-size:0.95rem; font-weight:500; background:none; border:none; cursor:pointer; font-family:inherit; display:flex; align-items:center; gap:6px; color:inherit;}
.dropdown{position:relative;}
.dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:14px; min-width:220px; opacity:0; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease;
}
.dropdown-panel-inner{
  background:#fff; color:var(--ink); border-radius:8px; box-shadow:0 18px 40px -12px rgba(0,0,0,0.22);
  padding:10px;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.dropdown-panel a{display:block; padding:10px 14px; border-radius:6px; font-size:0.94rem; font-weight:500;}
.dropdown-panel a:hover{background:var(--grey);}
.header-socials{display:flex; align-items:center; gap:16px; padding-left:32px; margin-left:4px; border-left:1px solid rgba(18,24,31,0.15);}
.header-socials a{display:flex; color:inherit; opacity:0.75; transition:opacity 0.18s ease;}
.header-socials a:hover{opacity:1;}
.header-socials svg{width:25px; height:25px;}
.menu-btn{display:none; background:none; border:none; cursor:pointer;}

/* Mobile nav */
.mobile-panel{
  position:fixed; inset:0; background:#fff; z-index:300;
  padding:100px 32px 40px; display:flex; flex-direction:column; gap:4px;
  transform:translateX(100%); transition:transform 0.3s ease;
}
.mobile-panel.open{transform:translateX(0);}
.mobile-panel a, .mobile-panel .m-sub a{display:block; padding:14px 0; font-size:1.3rem; font-weight:600; border-bottom:1px solid var(--grey); color:var(--ink);}
.mobile-panel .m-sub{padding-left:16px;}
.mobile-panel .m-sub a{font-size:1.05rem; font-weight:500; border-bottom:none; padding:10px 0; color:#556;}
.mobile-close{position:absolute; top:26px; right:28px; background:none; border:none; font-size:1.6rem; cursor:pointer;}

/* Promo sections (home) */
.promo{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden;
}
.promo-bg{position:absolute; inset:0; background-size:cover; background-position:center; background-image:var(--bg-desktop);}
.promo-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,24,31,0.35) 0%, rgba(18,24,31,0.65) 100%);}
.promo-content{position:relative; z-index:2; max-width:640px; padding:0 32px;}
.promo h2{font-size:2em; font-weight:800; letter-spacing:-0.01em; line-height:1.08;}
.promo p{margin-top:16px; font-size:1.15rem; color:rgba(255,255,255,0.88);}
.promo-cta{
  margin-top:30px; display:inline-flex; align-items:center; gap:10px;
  background:var(--orange); color:#fff; padding:14px 30px; border-radius:100px;
  border:1.5px solid #fff;
  font-weight:600; font-size:0.96rem; transition:transform 0.18s ease, background 0.18s ease;
}
.promo-cta:hover{transform:translateY(-2px); background:#d96c15; color:#fff;}

/* Hero slider (home) */
.hero-slider{position:relative; height:100vh; overflow:hidden;}
.hero-slider .slide{
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:220px;
  text-align:center; color:#fff; opacity:0; visibility:hidden; transition:opacity 1s ease;
}
.hero-slider .slide.is-active{opacity:1; visibility:visible; z-index:1;}
.hero-slider .slide .promo-bg{transform:scale(1.06); transition:transform 8s ease;}
.hero-slider .slide.is-active .promo-bg{transform:scale(1);}
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.14); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background 0.2s ease;
}
.hero-arrow:hover{background:rgba(255,255,255,0.3);}
.hero-arrow.prev{left:20px;}
.hero-arrow.next{right:20px;}
.hero-dots{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px;}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.4); border:none; padding:0;
  cursor:pointer; transition:background 0.2s ease, transform 0.2s ease;
}
.hero-dots button.is-active{background:#fff; transform:scale(1.35);}
@media (max-width: 640px){
  .hero-arrow{width:38px; height:38px;}
  .hero-arrow.prev{left:10px;}
  .hero-arrow.next{right:10px;}
}

/* Sub-page banner hero (photo banner with top text, e.g. Puerto Tablas campaigns) */
.sub-hero-banner{
  min-height:60vh; display:flex; align-items:flex-start; justify-content:center;
  padding:150px 24px 40px; background-size:cover; background-repeat:no-repeat;
  background-position:center bottom; background-image:var(--bg-desktop);
}
.sub-hero-banner-content{text-align:center; max-width:720px; text-shadow:1px 1px 0px #fff;}
.sub-hero-banner-content h1{
  font-size:clamp(1.1rem, 2.6vw, 1.5rem); font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; line-height:1.3; color:var(--ink);
}
.sub-hero-banner-content .tagline{margin-top:8px; font-size:1.05rem; color:#33404d;}

.center-logo-row{display:flex; justify-content:center; padding:36px 0 6px;}

/* Photo grid gallery */
.gallery-heading{text-align:center; font-size:clamp(1.5rem, 3vw, 2rem); font-weight:800; margin-bottom:32px;}
.photo-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.photo-grid div{aspect-ratio:1; border-radius:20px; background-size:cover; background-position:center; background-color:var(--grey); cursor:pointer; transition:transform 0.2s ease;}
.photo-grid div:hover, .gallery-grid > div:hover{transform:scale(1.02);}
.gallery-grid > div{cursor:pointer; transition:transform 0.2s ease;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(10,14,18,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:88vw; max-height:82vh; object-fit:contain; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.lightbox-close{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.12); color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,0.25);}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-arrow:hover{background:rgba(255,255,255,0.25);}
.lightbox-arrow.prev{left:24px;}
.lightbox-arrow.next{right:24px;}
@media (max-width:640px){
  .lightbox-arrow{width:38px; height:38px;}
  .lightbox-arrow.prev{left:10px;}
  .lightbox-arrow.next{right:10px;}
  .lightbox-close{top:14px; right:14px;}
}
@media (max-width: 860px){
  .photo-grid{grid-template-columns:repeat(2, 1fr);}
}

/* Sub-page hero */
.sub-hero{
  position:relative; min-height:70vh; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; padding:130px 0 60px; background-size:cover; background-position:center; overflow:hidden;
}
.sub-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,24,31,0.25) 0%, rgba(18,24,31,0.88) 100%);}
.breadcrumb{position:relative; z-index:2; padding:0 40px; margin-bottom:auto;}
.breadcrumb a{font-size:0.92rem; color:rgba(255,255,255,0.75); display:inline-flex; align-items:center; gap:8px;}
.breadcrumb a:hover{color:#fff;}
.sub-hero-content{position:relative; z-index:2; padding:0 40px;}
.chip{
  display:inline-block; font-size:0.8rem; font-weight:600;
  padding:6px 14px; border-radius:100px; background:var(--accent); color:#fff; margin-bottom:18px;
}
.sub-hero h1{font-size:clamp(2.2rem, 5.5vw, 3.6rem); font-weight:800; letter-spacing:-0.01em; max-width:18ch; line-height:1.08;}
.sub-hero .tagline{margin-top:14px; font-size:1.1rem; color:rgba(255,255,255,0.82); max-width:44ch;}

/* Content sections */
section.info{padding:90px 0;}
.lead-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
.lead-grid h2{font-size:clamp(1.8rem, 3vw, 2.3rem); color:var(--accent); max-width:12ch;}
.lead-grid p{font-size:1.05rem; color:#465061; max-width:56ch; margin-bottom:16px;}
.facts{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.fact{border:1.5px solid var(--grey); border-radius:100px; padding:9px 16px; font-size:0.86rem; color:var(--ink); font-weight:500;}
.cta-row{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.info-lists{display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:64px; padding-top:56px; border-top:1px solid var(--grey);}
.info-lists h3{font-size:1.25rem; font-weight:700; color:var(--accent); margin-bottom:18px;}
.info-lists ul{list-style:none; display:flex; flex-direction:column; gap:12px;}
.info-lists li{position:relative; padding-left:30px; font-size:1rem; color:#465061; line-height:1.5;}
.info-lists li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;}
@media (max-width: 860px){
  .info-lists{grid-template-columns:1fr; gap:36px;}
}
.btn{
  background:var(--accent); color:#fff; padding:15px 28px; border-radius:100px; font-weight:600; font-size:0.96rem;
  display:inline-flex; align-items:center; gap:10px; transition:transform 0.18s ease, background 0.18s ease;
}
.btn:hover{transform:translateY(-2px); background:#154f57;}
.btn.alt{background:transparent; border:1.5px solid var(--grey); color:var(--ink);}
.btn.alt:hover{background:var(--grey);}

/* Gallery */
.gallery{padding-top:0;}
.gallery-grid{display:grid; grid-template-columns:1.3fr 1fr; grid-auto-rows:220px; gap:14px;}
.gallery-grid div{border-radius:6px; background-size:cover; background-position:center; background-color:var(--grey);}
.g-a{grid-row:span 2;}

/* Related activities */
.related{background:var(--ink); color:#fff; padding:90px 0;}
.related .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px;}
.related h2{font-size:clamp(1.8rem, 3vw, 2.4rem); max-width:16ch; font-weight:800;}
.related-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;}
.related-tile{
  border-radius:6px; padding:22px; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center; background-color:#1c2b3d; transition:transform 0.18s ease;
}
.related-tile:hover{transform:translateY(-3px);}
.related-tile h3{font-size:1.1rem; font-weight:700;}

/* WhatsApp floating button */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:56px; height:56px; border-radius:50%; background:var(--wa);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px -6px rgba(0,0,0,0.35);
  transition:transform 0.18s ease;
}
.wa-float:hover{transform:scale(1.08);}

/* Footer */
footer{background:var(--ink); color:#fff; padding:36px 0 22px;}
.foot-wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
.foot-grid > div:first-child{text-align:center; display:flex; flex-direction:column;}
.foot-logo{display:flex; justify-content:center;}
.foot-logo img{height:150px; filter:brightness(0) invert(1);}
.foot-grid h4{font-size:0.82rem; color:rgba(255,255,255,0.5); margin-bottom:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
.foot-grid p, .foot-grid a{display:block; margin-bottom:10px; font-size:0.98rem; color:rgba(255,255,255,0.88);}
.foot-grid a:hover{color:#fff; text-decoration:underline;}
.foot-socials{display:flex; justify-content:center; gap:12px; margin-top:auto;}
.foot-socials a{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
}
.foot-socials a:hover{background:var(--accent);}
.foot-bottom{margin-top:26px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; color:rgba(255,255,255,0.45);}

@media (max-width: 860px){
  nav.primary{display:none;}
  .menu-btn{display:block;}
  .foot-grid{grid-template-columns:1fr; gap:26px;}
  .lead-grid{grid-template-columns:1fr; gap:32px;}
  .gallery-grid{grid-template-columns:1fr; grid-auto-rows:200px;}
  .g-a{grid-row:span 1;}
  .related-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 640px){
  .sub-hero-banner{min-height:38vh; padding:110px 20px 28px; background-image:var(--bg-mobile, var(--bg-desktop));}
  .sub-hero-banner-content .tagline{font-size:0.95rem;}
  section.info{padding:36px 0;}
  .center-logo-row{padding:10px 0 6px;}
  .center-logo-row img{height:110px !important;}
  .hero-slider .promo-bg{background-image:var(--bg-mobile, var(--bg-desktop));}
  .hero-slider .slide{align-items:flex-start; padding-top:130px;}
  header{background:rgba(255,255,255,0.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
}