@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  --bg:#F5F1E6;
  --bg-soft:#EAE2CE;
  --ink:#0D0D0D;
  --ink-dim:#615C50;
  --border:#0D0D0D;
  --coral:#FF3B1F;
  --coral-ink:#D62B12;
  --on-coral:#0D0D0D;
  --dark:#0D0D0D;
  --dark-soft:#1A1A1A;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius:0px;
  --radius-sm:0px;
  --f-display:'Anton', 'Archivo Black', sans-serif;
  --f-body:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D0D0D; --bg-soft:#1A1A1A; --ink:#F5F1E6; --ink-dim:#9C978A;
    --border:#F5F1E6; --coral:#FF5A3C; --coral-ink:#FF8266; --on-coral:#0D0D0D;
    --dark:#000000; --dark-soft:#141414;
    --shadow: 6px 6px 0 var(--coral);
    --shadow-sm: 4px 4px 0 var(--coral);
  }
}
:root[data-theme="dark"]{
  --bg:#0D0D0D; --bg-soft:#1A1A1A; --ink:#F5F1E6; --ink-dim:#9C978A;
  --border:#F5F1E6; --coral:#FF5A3C; --coral-ink:#FF8266; --on-coral:#0D0D0D;
  --dark:#000000; --dark-soft:#141414;
  --shadow: 6px 6px 0 var(--coral);
  --shadow-sm: 4px 4px 0 var(--coral);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important; animation:none !important;} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:800; letter-spacing:-.01em; }
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,40px);}
.eyebrow{ display:inline-block; background:var(--ink); color:var(--bg); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:600; font-family:var(--f-mono); padding:5px 10px; }

/* ---------- header ---------- */
header.site{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:3px solid var(--border); }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(20px,4vw,40px); max-width:1180px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.15rem; color:var(--ink); font-family:var(--f-display); text-transform:uppercase; letter-spacing:.01em; }
nav.main-nav{ display:flex; gap:26px; }
nav.main-nav a{ font-size:.86rem; font-weight:700; color:var(--ink-dim); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.04em; }
nav.main-nav a:hover, nav.main-nav a.active{ color:var(--ink); }
.header-actions{ display:flex; align-items:center; gap:12px; }
.lang-toggle{ display:flex; border:2px solid var(--border); font-size:.72rem; font-weight:700; font-family:var(--f-mono); }
.lang-toggle button{ background:transparent; border:0; color:var(--ink-dim); padding:6px 11px; cursor:pointer; }
.lang-toggle button.active{ background:var(--ink); color:var(--bg); }

.nav-panel{ display:flex; align-items:center; gap:26px; }
.nav-toggle{ display:none; background:transparent; border:0; color:var(--ink); padding:6px; cursor:pointer; }
@media (max-width:760px){
  .header-row{ flex-wrap:wrap; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
  .nav-panel{ display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:16px; margin-top:14px; padding-top:14px; border-top:2px solid var(--border); }
  .nav-panel.open{ display:flex; }
  nav.main-nav{ flex-direction:column; gap:16px; }
  .header-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .header-actions .btn{ padding:12px 18px; }
}

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:var(--radius); font-weight:700; font-size:.86rem; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.03em; border:2px solid var(--ink); cursor:pointer; white-space:nowrap; transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform:translate(-3px,-3px); box-shadow:var(--shadow-sm); }
.btn-coral{ background:var(--coral); color:var(--on-coral); border-color:var(--ink); }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.78rem; }
.header-actions .btn{ padding:10px 18px; font-size:.76rem; }

/* ---------- breadcrumb ---------- */
.crumbs{ font-size:.8rem; color:var(--ink-dim); display:flex; gap:8px; align-items:center; margin-bottom:20px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.03em; }
.crumbs a{ color:var(--ink-dim); } .crumbs a:hover{ color:var(--ink); }

/* ---------- gallery ---------- */
.gallery, .gallery-4{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; align-items:stretch; height:clamp(340px, 36vw, 540px); }
.gallery img, .gallery-4 img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery .g-main, .gallery-4 .g-main{ border:3px solid var(--border); overflow:hidden; min-height:0; min-width:0; clip-path:polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
.gallery .g-side, .gallery-4 .g-side{ display:grid; gap:10px; min-height:0; min-width:0; }
.gallery .g-side{ grid-template-rows:1fr 1fr; }
.gallery-4 .g-side{ grid-template-rows:1fr 1fr 1fr; }
.gallery .g-side > div, .gallery-4 .g-side > div{ border:3px solid var(--border); overflow:hidden; min-height:0; }
@media (max-width:760px){
  .gallery, .gallery-4{ grid-template-columns:1fr; height:auto; }
  .gallery .g-side, .gallery-4 .g-side{ grid-auto-flow:column; grid-auto-columns:1fr; grid-template-columns:none; grid-template-rows:1fr; height:150px; }
  .gallery .g-main, .gallery-4 .g-main{ aspect-ratio:16/10; clip-path:polygon(0 0, 100% 0, 100% 92%, 95% 100%, 0 100%); }
}

/* ---------- title / meta ---------- */
.page-head{ margin-top:34px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.doc-num{ font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.6rem); color:var(--coral); line-height:1; }
.page-head h1{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); max-width:22ch; font-family:var(--f-display); text-transform:uppercase; line-height:1.02; }
.badge{ display:inline-flex; align-items:center; padding:5px 12px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-family:var(--f-mono); }
.badge-coral{ background:var(--coral); color:var(--on-coral); }
.meta-row{ display:flex; flex-wrap:wrap; gap:20px; margin-top:18px; padding:16px 0; border-top:2px solid var(--border); border-bottom:2px solid var(--border); }
.meta-item{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-dim); font-family:var(--f-mono); }
.meta-item svg{ color:var(--ink); flex-shrink:0; }
.meta-item b{ color:var(--ink); font-weight:700; }

/* ---------- content layout ---------- */
.layout{ display:grid; grid-template-columns:1fr 340px; gap:48px; margin-top:36px; align-items:start; }
@media (max-width:940px){ .layout{ grid-template-columns:1fr; } }
.block{ margin-bottom:38px; }
.block h2{ font-size:1.3rem; margin-bottom:14px; font-family:var(--f-body); font-weight:800; }
.lede{ color:var(--ink-dim); font-size:1rem; max-width:64ch; }

.checklist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
@media (max-width:520px){ .checklist{ grid-template-columns:1fr; } }
.checklist li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; }
.checklist svg{ flex-shrink:0; margin-top:3px; color:var(--ink); }

.timeline{ list-style:none; margin:0; padding:0; }
.timeline li{ display:flex; gap:16px; padding-bottom:20px; position:relative; }
.timeline li:not(:last-child)::before{ content:""; position:absolute; left:5px; top:20px; bottom:0; width:2px; background:var(--border); }
.timeline .dot{ width:11px; height:11px; background:var(--coral); border:2px solid var(--ink); margin-top:5px; flex-shrink:0; }
.timeline .t-time{ font-size:.74rem; font-weight:700; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; font-family:var(--f-mono); }
.timeline .t-label{ font-size:.94rem; margin-top:3px; }

.note-box{ background:var(--bg-soft); border:2px solid var(--border); padding:16px 18px; font-size:.86rem; color:var(--ink-dim); }

/* ---------- sidebar ---------- */
.sidebar{ position:sticky; top:96px; background:var(--bg); border:3px solid var(--border); padding:24px; box-shadow:var(--shadow); }
.sidebar .price-row{ display:flex; align-items:baseline; gap:8px; }
.sidebar .price{ font-size:2.6rem; font-weight:400; color:var(--coral-ink); font-family:var(--f-display); }
.sidebar .price-unit{ font-size:.8rem; color:var(--ink-dim); font-weight:600; }
.sidebar .price-from{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-dim); font-weight:700; font-family:var(--f-mono); }
.sidebar-divider{ height:2px; background:var(--border); margin:18px 0; }
.side-trust{ display:flex; flex-direction:column; gap:12px; }
.side-trust div{ display:flex; gap:10px; align-items:center; font-size:.84rem; color:var(--ink-dim); }
.side-trust svg{ color:var(--ink); flex-shrink:0; }
.sidebar-cta{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.sidebar small{ display:block; text-align:center; color:var(--ink-dim); font-size:.74rem; margin-top:10px; }

/* ---------- tour cards ---------- */
.tour-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:940px){ .tour-grid{ grid-template-columns:1fr; } }
.tour-card{ border:3px solid var(--ink); background:var(--ink); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease; }
.tour-card:hover{ box-shadow:6px 6px 0 var(--coral); transform:translate(-4px,-4px); }
.tour-card .tc-photo{ aspect-ratio:4/3; overflow:hidden; position:relative; border-bottom:3px solid var(--ink); }
.tour-card .tc-photo img{ width:100%; height:100%; object-fit:cover; }
.tour-card .tc-num{ position:absolute; top:0; left:0; background:var(--coral); color:var(--on-coral); font-family:var(--f-display); font-size:1.3rem; padding:3px 10px 5px; line-height:1; }
.tour-card .tc-badge{ position:absolute; top:0; right:0; }
.tour-card .tc-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; background:var(--ink); }
.tour-card h3{ font-size:1.15rem; color:var(--bg); font-family:var(--f-body); font-weight:800; text-transform:uppercase; }
.tour-card .tc-meta{ font-size:.76rem; color:#9C978A; display:flex; gap:6px; align-items:center; font-family:var(--f-mono); text-transform:uppercase; }
.tour-card .tc-price{ margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; padding-top:12px; border-top:2px solid #333; }
.tour-card .tc-price .amt{ font-weight:400; font-size:1.5rem; color:var(--coral); font-family:var(--f-display); }
.tour-card .tc-price .unit{ font-size:.7rem; color:#9C978A; font-family:var(--f-mono); text-transform:uppercase; }
.tour-card .tc-price .unit:last-child{ color:var(--bg); font-weight:700; }

/* ---------- section generic ---------- */
section{ padding:72px 0; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); margin-top:10px; font-family:var(--f-display); text-transform:uppercase; line-height:1.02; }
.section-head p{ margin-top:14px; color:var(--ink-dim); }
.on-soft{ background:var(--bg-soft); }

/* ---------- group cost calculator ---------- */
.calc-card{ background:var(--bg); border:3px solid var(--border); padding:28px; box-shadow:var(--shadow); margin-bottom:48px; }
.calc-head{ margin-bottom:18px; }
.calc-head h3{ font-size:1.4rem; margin-top:8px; font-family:var(--f-display); text-transform:uppercase; }
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
@media (max-width:520px){ .calc-grid{ grid-template-columns:1fr; } }
.calc-grid select{ font-family:var(--f-body); font-size:.94rem; padding:11px 12px; border:2px solid var(--border); background:var(--bg-soft); color:var(--ink); width:100%; }
.calc-checks{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:22px; }
.calc-checks label{ display:flex; align-items:center; gap:8px; font-size:.9rem; }
.calc-tag{ font-size:.7rem; color:var(--ink-dim); font-weight:700; font-family:var(--f-mono); }
.calc-breakdown{ display:flex; flex-direction:column; gap:8px; padding:16px 0; border-top:2px solid var(--border); border-bottom:2px solid var(--border); margin-bottom:16px; font-size:.9rem; font-family:var(--f-mono); }
.calc-breakdown > div{ display:flex; justify-content:space-between; color:var(--ink-dim); }
.calc-total{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; gap:16px; flex-wrap:wrap; }
.calc-total-amt{ font-size:2.4rem; font-weight:400; color:var(--coral-ink); font-family:var(--f-display); line-height:1; }
.calc-pp{ text-align:right; font-size:.86rem; color:var(--ink-dim); }
.calc-pp #calc-pp-amt{ font-weight:700; color:var(--ink); font-size:1.1rem; font-family:var(--f-mono); }
.calc-disclaimer{ font-size:.78rem; color:var(--ink-dim); }

/* ---------- groups ---------- */
.groups-inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:920px){ .groups-inner{ grid-template-columns:1fr; } }
.groups-points{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.groups-points li{ display:flex; gap:10px; font-size:.94rem; }
.groups-points svg{ flex-shrink:0; color:var(--coral); margin-top:2px; }
.quote-form{ background:var(--bg); border:3px solid var(--border); padding:26px; box-shadow:var(--shadow); }
.field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); font-weight:700; font-family:var(--f-mono); }
.field input, .field textarea{ font-family:var(--f-body); font-size:.94rem; padding:11px 12px; border:2px solid var(--border); background:var(--bg-soft); color:var(--ink); }
.field input:focus, .field textarea:focus{ outline:2px solid var(--coral); outline-offset:1px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .row2{ grid-template-columns:1fr; } }
.checks{ display:flex; flex-wrap:wrap; gap:12px; }
.checks label{ display:flex; align-items:center; gap:6px; font-size:.86rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink); }
.form-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.form-note{ font-size:.76rem; color:var(--ink-dim); margin-top:12px; }

/* ---------- footer ---------- */
footer{ background:var(--dark); color:#C9CFCE; padding-top:56px; border-top:3px solid var(--coral); }
.footer-cta{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--dark-soft); border:2px solid #333; padding:26px 30px; margin-bottom:56px; }
.footer-cta h3{ color:#F4F1E8; font-size:1.4rem; font-family:var(--f-display); text-transform:uppercase; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:28px; } }
.footer-grid h4{ color:#F4F1E8; font-size:.8rem; margin-bottom:14px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.05em; }
.footer-grid .brand{ color:#F4F1E8; }
.footer-tagline{ margin-top:12px; color:#8B9492; font-size:.88rem; max-width:34ch; }
.footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:.88rem; }
.footer-list a:hover{ color:var(--coral); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ width:32px; height:32px; border:2px solid #333; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--coral); color:var(--coral); }
.footer-bottom{ padding:20px 0 26px; border-top:2px solid #232B2D; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.74rem; color:#75807D; font-family:var(--f-mono); }

.float-wa{ position:fixed; right:20px; bottom:20px; z-index:60; display:flex; align-items:center; gap:9px; background:var(--coral); color:var(--on-coral); border:2px solid var(--ink); padding:13px 18px; box-shadow:4px 4px 0 var(--ink); font-weight:700; font-size:.82rem; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.03em; }
.float-wa:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); }
@media (max-width:600px){ .float-wa span{ display:none; } .float-wa{ padding:14px; } }
