/* Bocas del Toro Tours — Caribbean theme (Brand & Build 2026-10-20). Teal sea, mango sun, coral roofs. */
:root{--ink:#0b3442;--paper:#fffaf0;--accent:#ffb347;--accent-ink:#0b3442;--sea:#0e7c86;--coral:#c8402a;--sand:#f6ecd8}
body{background:var(--paper);color:var(--ink)}p{color:#36505a}
body:before{content:"";display:block;height:6px;background:linear-gradient(90deg,#0e7c86 0 40%,#ffb347 40% 70%,#e4572e 70%)}
h1,h2,h3{letter-spacing:-.03em}h1{font-weight:700}h2{font-weight:700}
header{height:84px}.brand{color:var(--ink)}.brand img{border-radius:12px}
nav{gap:22px}nav a{padding:6px 0;border-bottom:2px solid transparent}nav a[aria-current]{border-bottom-color:var(--coral)}
.button{border-radius:999px;min-height:44px;font-size:14px}
:focus-visible{outline:3px solid #c8402a;outline-offset:3px;border-radius:4px}
.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:12px 16px;border-radius:8px;outline:3px solid #c8402a}
.commission-top{font-size:13px;margin-top:10px;padding:10px 14px;background:#e3f4f2;border-left:4px solid var(--sea);border-radius:6px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:16px auto 0;font-size:13px}.crumbs li+li:before{content:"›";margin-right:6px;color:#5a7078}
.crumbs a{display:inline-flex;min-height:24px;align-items:center;text-decoration:underline;text-underline-offset:3px}
.bt-hero{margin:14px 20px 0;display:grid;grid-template-columns:1.05fr .95fr;border-radius:28px;overflow:hidden;background:linear-gradient(155deg,#0b3442 0%,#0e5f6a 55%,#0e7c86 100%);color:#fff;min-height:520px}
.bt-hero .herocopy{padding:64px 7% 56px;max-width:none;position:static}
.bt-hero small{color:#ffd27a;letter-spacing:.18em;font-size:11px;margin-bottom:16px}
.bt-hero h1{font-size:clamp(40px,4.6vw,66px);color:#fff}
.bt-hero p{color:#e6f5f3;font-size:17px;max-width:520px;margin:18px 0 0}
.bt-art{position:relative;min-height:320px}.bt-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-hero :focus-visible{outline-color:#ffd27a}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.button.hero-cta{display:inline-flex;min-height:48px;margin:0;background:#ffb347;color:#0b3442;align-items:center;gap:12px}
.button.hero-cta.alt{background:#fffaf0;color:#0b3442}
.intro{padding:34px 0 22px}.intro h1{font-size:clamp(34px,4vw,56px);max-width:960px}.intro p{font-size:17px;max-width:700px}
.intro .button.hero-cta{background:var(--sea);color:#fff}
.prose{max-width:860px}.prose h2{margin-top:1.6em;font-size:clamp(26px,2.6vw,36px)}.prose h3{font-size:22px;margin-top:1.4em}
.prose a:not(.button){text-decoration:underline;text-underline-offset:3px;color:#0a5f69;overflow-wrap:anywhere}
.prose ul{padding-left:1.2em}.prose li{margin:4px 0}
.deals{display:flex;flex-wrap:wrap;gap:14px 18px;margin:18px 0 26px;padding:16px 18px;background:var(--sand);border-radius:16px;scroll-margin-top:20px}
.deal{display:flex;flex-direction:column;gap:4px}.deal .button{margin:0;background:#ffb347;color:#0b3442}
.via{font-size:12px;color:#4a5f66;padding-left:14px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:16px 0 26px}
.pcard{border:1px solid #d9e6e3;border-radius:16px;padding:18px;background:#fff}.pcard h3{font-size:18px;margin:0 0 12px}.pcard .button{margin:0;background:#ffb347;color:#0b3442}
.menu{min-height:44px;min-width:44px}
footer{background:#0b3442;color:#e8f4f2;margin-top:30px}footer .brand{color:#fff}footer p,footer small{color:#cfe3e0}
.footergrid>div>a:not(.brand){color:#e8f4f2;text-decoration:underline;text-underline-offset:3px}
.fine{color:#cfe3e0;border-top-color:#2b5866}footer :focus-visible{outline-color:#ffd27a}
.footergrid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media(max-width:1100px){.bt-hero{grid-template-columns:1fr 1fr}nav{gap:14px}}
@media(max-width:720px){header{height:72px}.bt-hero{grid-template-columns:1fr;margin:8px 10px 0;min-height:0;border-radius:22px}.bt-hero .herocopy{padding:28px 22px 26px}
.bt-hero h1{font-size:36px}.bt-hero p{font-size:16px;margin-top:12px}.bt-art{min-height:220px}.hero-ctas{margin-top:18px;gap:10px}
.intro{padding:20px 0 16px}.intro h1{font-size:32px}.intro p{font-size:16px}
header nav a{min-height:44px;display:flex;align-items:center}.footergrid{grid-template-columns:1fr 1fr}.footergrid>div>a:not(.brand){min-height:44px;display:flex;align-items:center;margin:0}}
.crumbs{text-align:left}.crumbs ol{justify-content:flex-start;margin-left:0}