@font-face{font-family:"Agrandir";font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/agrandir-heavy.otf") format("opentype")}
@font-face{font-family:"Syne";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/syne-bold.ttf") format("truetype")}
@font-face{font-family:"Oxygen";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/oxygen-light.ttf") format("truetype")}
@font-face{font-family:"Oxygen";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/oxygen-regular.ttf") format("truetype")}
@font-face{font-family:"Oxygen";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/oxygen-bold.ttf") format("truetype")}
  :root{
    --paper:#FFFFFF; --surface:#FFFFFF; --raise:#F6F2EC; --band:#141019;
    --ink:#181310; --sub:#4C443C; --muted:#6B6258; --hair:#E7E0D4; --hair2:#F1ECE3;
    --orange:#FF7200; --coral:#E8402F; --coral-deep:#C02C1E; --btn-text:#fff;
    --font-display:"Agrandir","Arial Narrow",Arial,sans-serif;
    --font-alt:"Syne","Agrandir",sans-serif;
    --font-body:"Oxygen",ui-sans-serif,system-ui,sans-serif;
    --wrap:1080px;
  }
  /* Dual Experience uses its own accent (matched to the official fact-sheet orange) instead of the site-wide coral */
  body[data-page="dualExperience"]{
    --coral:#EB5D00; --coral-deep:#AD4500;
  }
  /* Triple Thrill uses its own accent (content.json's official per-package "accent" field:
     #F2E200), deepened to a golden yellow for readable contrast with white button text while
     still reading clearly as yellow. */
  body[data-page="tripleThrill"]{
    --coral:#CCAA00; --coral-deep:#A38800;
  }
  /* Ultimate Pass uses its own accent (content.json's official per-package "accent" field:
     #C6B393, tan/gold), deepened to a warm bronze for readable contrast with white button text. */
  body[data-page="ultimatePass"]{
    --coral:#8C744A; --coral-deep:#6B5838;
  }
  /* ATV/UTV are individual tours, not in content.json's "Park Packages" — their accent instead
     comes from sampling the heading color used in each tour's own official fact sheet PDF. */
  body[data-page="utv"]{
    --coral:#C7610F; --coral-deep:#984A0B;
  }
  body[data-page="ebike"]{
    --coral:#815407; --coral-deep:#654205;
  }
  body[data-page="zipline"]{
    --coral:#1F8E47; --coral-deep:#1C7D3E;
  }
  body[data-page="bungee"]{
    --coral:#E33F83; --coral-deep:#C31C61;
  }
  /* Giant Swing accent sampled from its own fact sheet's "SLING SWING" heading color (#E36674),
     deepened slightly to keep white button text readable. */
  body[data-page="giantSwing"]{
    --coral:#DC3F51; --coral-deep:#C42436;
  }
  /* Moon Zipping Fire is a Signature/Seasonal tour, not a core park activity — its accent comes
     from its own fact sheet's "MOON ZIPPING FIRE" heading + "SEASONAL" band color (#690784),
     already dark enough for readable white button text without further deepening. */
  body[data-page="moonZippingFire"]{
    --coral:#690784; --coral-deep:#4A055D;
  }
  /* Animal Sanctuary accent sampled from its own fact sheet's "ANIMAL KINGDOM" heading color (#F9A120). */
  body[data-page="sanctuary"]{
    --coral:#F9A120; --coral-deep:#A66A00;
  }
  /* Camel Ride accent sampled from its own fact sheet's "THE CAMEL QUEST" heading color
     (#F69833) — same "Animal Connection" orange family as Animal Sanctuary, kept vibrant
     with the site's default white button text per Sebastian's call on the Sanctuary page. */
  body[data-page="camel"]{
    --coral:#F69833; --coral-deep:#A25807;
  }
  /* Horseback Ride accent sampled from the CORRECT fact sheet (project's Fact Sheets WCA/Parque
     folder, not the old Downloads bilingual one-pager) — "THE GREAT FANDANGO" heading color
     (#6D341D, a rust/terracotta brown), already high-contrast with white button text. */
  body[data-page="horseback"]{
    --coral:#6D341D; --coral-deep:#592A18;
  }
  /* Wild Bay / Water division accent = royal blue (per WCA brand color reference: Wild Bay is
     "azul rey"), matched to the nav's Water group color #1F6FEB, deepened for accent text. */
  body[data-page="chilenoSnorkel"],
  body[data-page="aquaAdventure"],
  body[data-page="funDay"],
  body[data-page="beachPass"],
  body[data-page="efoil"],
  body[data-page="surfExperience"]{
    --coral:#1F6FEB; --coral-deep:#1360D8;
  }
  /* Sailing / Pursuit of Cortez division accent = cyan (per WCA brand color reference: PoC cyan
     ~#00A6CE). The brand cyan is too light for readable white button text (contrast ~2.9), so
     --coral is deepened to #00829F (~4.5) for buttons/accent while still clearly reading cyan;
     the nav keeps the brighter brand #00A6CE for its hover bar. */
  body[data-page="satori"],
  body[data-page="aura"],
  body[data-page="expeditionCsl"],
  body[data-page="expeditionSjc"]{
    --coral:#00829F; --coral-deep:#006277;
  }
  /* Moon Zipping Fire's hero photo already has its own "WILD CANYON" sign in frame — the default
     hero h1 size doubled up on that and covered too much of the shot, so it's scaled down here. */
  body[data-page="moonZippingFire"] .hero h1{
    font-size:clamp(1.5rem,4.6vw,3.4rem);
  }
  /* Satori hero: the El Arco photo is the point of this page — scale the title down so the shot
     reads (Sebastian's call), same treatment as Moon Zipping / BRP. Aura keeps the default
     (larger) hero title per Sebastian — its people-forward hero reads fine at full size. */
  body[data-page="satori"] .hero h1,
  body[data-page="expeditionCsl"] .hero h1,
  body[data-page="expeditionSjc"] .hero h1{
    font-size:clamp(1.5rem,4.4vw,3.2rem);
  }
  /* BRP page titles ("Signature BRP", "Signature Can-Am UTV", etc.) contain long single words
     ("Signature") that broke mid-word at the default hero h1 size (word-break:break-word had no
     other choice once the word alone was wider than the line) — scaled down site-wide for the
     whole BRP family to prevent this recurring on every Signature product page. */
  body[data-page="signatureAtv"] .hero h1,
  body[data-page="signatureUtv"] .hero h1,
  body[data-page="signatureSeadoo"] .hero h1,
  body[data-page="utvEastCape"] .hero h1{
    font-size:clamp(1.6rem,4.8vw,3.6rem);
  }
  /* The BRP hero tagline is a full sentence, longer than other pages' taglines — the sitewide
     38ch cap plus line-clamp:2 was truncating it with "..." even though there's plenty of room
     to the right at these viewport widths. Widen instead of shortening the copy. */
  body[data-page="signatureAtv"] .hero .tag,
  body[data-page="signatureUtv"] .hero .tag,
  body[data-page="signatureSeadoo"] .hero .tag,
  body[data-page="utvEastCape"] .hero .tag{
    max-width:60ch;
    -webkit-line-clamp:3;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color-scheme:light;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased}
  h1,h2,h3{margin:0}
  .cap{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.015em;line-height:.98;text-wrap:balance}
  .lbl{font-family:var(--font-alt);text-transform:uppercase;font-weight:700;letter-spacing:.14em;font-size:.7rem}
  .wrap{max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
  .accent{color:var(--coral-deep)}
  .tabnum{font-variant-numeric:tabular-nums}

  .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-alt);font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;font-size:.8rem;color:var(--btn-text);background:var(--coral);border:0;border-radius:24px;padding:12px 20px;min-height:44px;cursor:pointer;text-decoration:none;transition:.18s}
  .btn:hover{background:var(--coral-deep)}
  .btn.ghost{background:transparent;color:var(--coral-deep);border:1.5px solid var(--coral)}
  .btn.ghost:hover{background:var(--coral);color:var(--btn-text)}
  .btn.lg{font-size:.92rem;padding:14px 28px}
  .btn:active,.galbtn:active,.lbnav:active,.lbclose:active,.lbdownload:active{transform:scale(.96)}

  /* hero */
  .hero{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.72) 100%)}
  .hero .inner{position:relative;padding:0 22px 54px;max-width:var(--wrap);margin:0 auto;width:100%}
  /* BRP hero-ticker is an absolutely-positioned bottom band (see further below) — it isn't part
     of normal flow, so it doesn't push .inner's content up on its own. Extra bottom padding here
     stops the CTA button from running under the ticker on short/mobile viewports. */
  .hero:has(.hero-ticker) .inner{padding-bottom:74px}
  @media (min-width:600px){ .hero:has(.hero-ticker) .inner{padding-bottom:64px} }
  @media (min-width:900px){ .hero:has(.hero-ticker) .inner{padding-bottom:60px} }
  .hero .ey{color:#ffd9d2}
  .hero h1{font-size:clamp(2rem,6.5vw,5rem);margin:.18em 0 .12em;overflow-wrap:break-word;word-break:break-word}
  .hero .tag{font-family:var(--font-alt);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.8rem,1.9vw,1.05rem);color:#fff;max-width:38ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .hero .cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
  .hero .p{font-size:1.9rem;font-weight:700}
  .hero .p .ex{font-size:.62rem;color:#f4c9c1;text-transform:uppercase;letter-spacing:.1em;border:1px solid rgba(255,255,255,.4);border-radius:20px;padding:2px 7px;margin-left:8px;vertical-align:middle}
  .scrollhint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:.7rem;font-family:var(--font-alt);letter-spacing:.2em;text-transform:uppercase}

  /* ===== BRP Signature Tours =====
     Branding replicated from the LIVE wildcanyon.com.mx/pages/brp-experiences-los-cabos page
     (inspected via the Shopify theme's actual template JSON, not just the rendered screenshot):
     near-black hero, the site's own core orange #FF7200 as the CTA/accent color (BRP's own
     yellow #FFD200 is reserved for BRP-badge-only details), Syne for headings (already used
     site-wide) + Open Sans for body copy (loaded per-page below, not site-wide).
     NOTE: this block must stay AFTER .hero/.hero img above — .brp-powered img etc. tie on
     specificity with ".hero img" and CSS resolves ties by source order, not just specificity. */
  body[data-page="signatureAtv"],
  body[data-page="signatureUtv"],
  body[data-page="signatureSeadoo"],
  body[data-page="utvEastCape"]{
    --coral:#FF7200; --coral-deep:#e06500;
    --font-body:'Open Sans',ui-sans-serif,system-ui,sans-serif;
  }
  body[data-page="signatureAtv"] .hero,
  body[data-page="signatureUtv"] .hero,
  body[data-page="signatureSeadoo"] .hero,
  body[data-page="utvEastCape"] .hero{
    background:#0a0b0c;
  }

  /* Hero topbar: shares .inner's exact centering/padding formula (max-width + auto margins +
     22px side padding) so the badge and GPS align with the eyebrow/h1 below them at every
     viewport width, instead of sitting at a fixed distance from the raw viewport edge. */
  .hero-topbar{position:absolute;top:18px;left:0;right:0;z-index:4;max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}

  /* Hero badge (top-left): BRP Experiences avatar + "Certified Outfitter" label */
  .hero-badge{display:flex;align-items:center;gap:12px}
  .hero-badge img{position:static;width:50px;height:50px;display:block}
  .hero-badge span{font-family:var(--font-alt);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#FFD200;line-height:1.3}

  /* Hero ticker (bottom band): BRP Experiences network stats */
  /* Rotating ticker — one stat visible at a time (matches the live Shopify page), so the band
     stays a single compact line instead of wrapping all 4 stats onto 2+ lines on mobile. */
  .hero-ticker{position:absolute;bottom:0;left:0;right:0;z-index:4;background:rgba(0,0,0,.55);border-top:1px solid rgba(255,210,0,.32);padding:9px 20px;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .hero-ticker .track{display:flex;flex-direction:column;align-items:center;gap:3px}
  .hero-ticker .lbl{font-family:var(--font-alt);font-weight:700;font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#FFD200;white-space:nowrap}
  .hero-ticker .rotator{position:relative;height:15px;width:190px}
  .hero-ticker .item{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-alt);font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;animation:brpTicker 12s infinite}
  .hero-ticker .item::before{content:"";width:4px;height:4px;background:#FFD200;border-radius:50%;flex:none}
  .hero-ticker .item:nth-child(1){animation-delay:0s}
  .hero-ticker .item:nth-child(2){animation-delay:3s}
  .hero-ticker .item:nth-child(3){animation-delay:6s}
  .hero-ticker .item:nth-child(4){animation-delay:9s}
  @keyframes brpTicker{
    0%{opacity:0;transform:translateY(6px)}
    3%,22%{opacity:1;transform:translateY(0)}
    25%,100%{opacity:0;transform:translateY(-6px)}
  }
  @media (prefers-reduced-motion:reduce){
    .hero-ticker .item{animation:none;opacity:0}
    .hero-ticker .item:first-child{opacity:1}
  }
  @media (min-width:600px){
    .hero-ticker .track{flex-direction:row;gap:12px}
    .hero-ticker .rotator{width:210px}
  }

  /* Powered-by lockup: used in hero CTA row + intro section */
  .brp-powered{display:flex;align-items:center;gap:10px;opacity:.85}
  .brp-powered img{position:static;height:34px;width:auto;display:block}
  .brp-powered img.main{height:48px}
  .brp-powered .div{width:1px;height:20px;background:rgba(255,255,255,.3)}
  section .brp-powered .div{background:var(--hair)}
  /* The hero already stacks badge+GPS+eyebrow+h1+tag+2 prices+button above the ticker band —
     on narrow phones that stack is taller than the hero, so the "Powered by" lockup (least
     essential of the group) is hidden there to stop it colliding with the ticker. It still
     shows in the Final CTA section, which has no ticker to collide with. */
  @media (max-width:599px){
    .hero .brp-powered{display:none}
  }

  /* Intro section: light band with stat grid, mirrors the live page's "brp-intro"/"brp-what" pattern */
  .brp-intro .hl{background:#fff0e6;color:#b34d00;border-radius:3px;padding:1px 5px;font-weight:500}
  .brp-intro p{font-size:.92rem;line-height:1.75;color:var(--sub);margin:0 0 16px}
  .brp-intro p:last-child{margin-bottom:0}
  .brp-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
  .brp-stat{background:var(--raise);border:1px solid var(--hair);border-radius:3px;padding:18px 16px;transition:border-color .18s ease,transform .18s ease}
  .brp-stat:hover{border-color:var(--coral);transform:translateY(-2px)}
  .brp-stat-num{font-family:var(--font-alt);font-weight:700;text-transform:uppercase;color:var(--ink);font-size:1.5rem;line-height:1.05;margin-bottom:6px}
  .brp-stat-label{font-size:.72rem;font-weight:500;color:var(--muted);line-height:1.45;margin:0}
  .brp-context{background:var(--band);border-radius:3px;padding:22px 20px}
  .brp-context img{position:static;height:74px;width:auto;display:block;margin:0 0 18px}
  .brp-context p{font-size:.82rem;color:rgba(255,255,255,.72);margin:0;line-height:1.65}
  .brp-hi{color:var(--coral);font-weight:600}
  @media (min-width:600px){
    .brp-stats{gap:14px}
    .brp-stat{padding:22px 20px}
    .brp-stat-num{font-size:1.9rem}
  }

  /* Final CTA dark treatment for BRP pages, matching the live "brp-final" section */
  body[data-page="signatureAtv"] .final,
  body[data-page="signatureUtv"] .final,
  body[data-page="signatureSeadoo"] .final,
  body[data-page="utvEastCape"] .final{
    background:#202223;position:relative;overflow:hidden;
  }
  body[data-page="signatureAtv"] .final::before,
  body[data-page="signatureUtv"] .final::before,
  body[data-page="signatureSeadoo"] .final::before,
  body[data-page="utvEastCape"] .final::before{
    content:"";position:absolute;top:-140px;right:-140px;width:380px;height:380px;background:radial-gradient(circle,rgba(255,114,0,.16) 0%,transparent 65%);pointer-events:none;
  }

  /* facts band */
  .above-fold{min-height:calc(100vh - 120px);display:flex;flex-direction:column}
  .facts{background:var(--band);color:#fff;flex:none}
  .facts .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
  .fact{padding:20px 22px;border-left:1px solid rgba(255,255,255,.1);display:flex;gap:12px;align-items:center}
  .fact:first-child{border-left:0}
  .fact svg{width:22px;height:22px;flex:none;color:var(--orange);stroke:currentColor;fill:none;stroke-width:1.7}
  .fact .k{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;color:#b8ad9f;display:block}
  .fact .v{font-weight:700;font-size:.98rem;line-height:1.15}
  @media (max-width:760px){ .facts .row{grid-template-columns:repeat(2,1fr)} .fact:nth-child(3){border-left:0} }
  .facts-below-fold{display:none}
  @media (max-width:760px){
    .above-fold .fact-more{display:none}
    .facts-below-fold{display:block}
    .facts-below-fold .fact:nth-child(2){border-left:0}
  }

  section{padding-top:34px;padding-bottom:0;scroll-margin-top:76px}
  .eyerow{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .eyerow .lbl{color:var(--coral-deep)}
  .eyerow .line{height:1px;background:var(--hair);flex:1}
  h2.big{font-size:clamp(1.8rem,4.4vw,3rem)}
  .lead{font-size:1.15rem;color:var(--sub);max-width:60ch}

  /* gallery */
  .galfilters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
  .galbtn{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;
    color:var(--sub);background:var(--surface);border:1px solid var(--hair);border-radius:22px;padding:11px 18px;min-height:44px;cursor:pointer;transition:.18s}
  .galbtn:hover{border-color:var(--coral)}
  .galbtn.on{color:var(--btn-text);background:var(--coral);border-color:var(--coral)}
  .galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  .galfig{margin:0;position:relative;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:#111}
  .galfig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .galfig:hover img{transform:scale(1.06)}
  .galfig figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
    background:linear-gradient(180deg,transparent,rgba(0,0,0,.76));display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
  .galcap{font-family:var(--font-display);text-transform:uppercase;color:#fff;font-size:1.02rem;line-height:1}
  .galtag{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;font-weight:700;color:#ffd9d2;white-space:nowrap}
  .galfig.hide{display:none}
  .galfig:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
  .btn:focus-visible,.navtop:focus-visible,.galbtn:focus-visible,.lbclose:focus-visible,.lbnav:focus-visible,.lbdownload:focus-visible,.acc summary:focus-visible,.navpanel a:focus-visible,.nav-logo:focus-visible,.navsearch-input:focus-visible,.lang-toggle:focus-visible,.video-close:focus-visible,.score:focus-visible,a.tbadge:focus-visible{outline:3px solid var(--coral);outline-offset:2px;border-radius:8px}

  /* included — extra bottom padding on whichever section holds it, so the extras photo grid
     never sits flush against the next section's color-block boundary (bit us 3x on this exact
     spot: fixed once per-page with an inline style, which is why it kept regressing — fixing it
     here instead means it applies to every current and future "Included" section automatically). */
  section:has(>.inc){padding-bottom:34px}
  .inc{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  @media (max-width:760px){ .inc{grid-template-columns:1fr;gap:28px} }
  .pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
  .pill{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;background:var(--raise);border:1px solid var(--hair);border-radius:22px;padding:6px 13px 6px 11px;color:var(--sub)}
  .pill svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .extragrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
  .extragrid .galfig{aspect-ratio:1/1}
  .extragrid .galfig figcaption{padding:18px 10px 10px}
  .extragrid .galcap{font-size:.76rem;min-width:0;overflow-wrap:break-word;word-break:break-word}
  @media (max-width:600px){ .extragrid{grid-template-columns:repeat(2,1fr)} }
  
  /* compare */
  .cmp-scroll{overflow-x:auto}
  table.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
  table.cmp th,table.cmp td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--hair)}
  table.cmp thead th{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;letter-spacing:-.01em}
  table.cmp tbody th{text-align:left;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--muted);font-weight:700}
  table.cmp .own{background:color-mix(in srgb,var(--coral) 9%,#fff);border-left:1px solid var(--coral);border-right:1px solid var(--coral)}
  table.cmp thead .own{border-top:1px solid var(--coral);color:var(--coral-deep)}
  table.cmp tfoot .own{border-bottom:1px solid var(--coral)}
  table.cmp .yes{color:var(--coral-deep);font-weight:700}
  table.cmp .no{color:var(--muted)}
  table.cmp .prc{font-weight:700}
  table.cmp thead th a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent}
  table.cmp thead th a:hover,table.cmp thead th a:focus-visible{border-bottom-color:currentColor}

  /* accordion */
  .acc{border-top:1px solid var(--hair)}
  .acc details{border-bottom:1px solid var(--hair)}
  .acc summary{cursor:pointer;list-style:none;padding:16px 2px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:.82rem}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary:hover{color:var(--coral-deep)}
  .acc summary .plus{font-family:var(--font-body);font-weight:400;font-size:1.4rem;color:var(--coral);transition:.2s}
  .acc details[open] summary .plus{transform:rotate(45deg)}
  .acc .body{padding:0 2px 18px;color:var(--sub);font-size:.94rem;max-width:70ch}
  /* the weights & ages table is a data grid, not prose — let it use the full accordion
     width instead of the 70ch reading-width cap, so it doesn't need horizontal scroll */
  .acc .body:has(.wa-tblwrap){max-width:none}

  /* tinted band for "Qué se paga por separado" — same tone as reviews, applied on purpose to just this section */
  .band-raise{background:var(--raise);padding-bottom:48px;margin-top:34px}

  /* location */
  .loc{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
  @media (max-width:760px){ .loc{grid-template-columns:1fr;gap:18px} }
  .loc-map{border-radius:14px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/3}
  .loc-map iframe{width:100%;height:100%;border:0;display:block}
  .loc-facts{display:flex;flex-direction:column;gap:10px}
  .loc-fact{border:1px solid var(--hair);border-radius:12px;padding:12px 16px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .loc-fact .k{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;font-weight:700;color:var(--muted)}
  .loc-fact .v{font-weight:700;font-size:.92rem;text-align:right}
  .loc-facts .btn{justify-content:center;margin-top:4px}

  /* trust badges — real certification logos (IAAPA/FCCA as self-contained lockups already
     carrying their own wordmark, BRP as icon + our own two-line label matching the official
     "BRP Experiences Certified Outfitter" badge layout). Dark band: see comment in the HTML. */
  .tbadges-band{background:var(--paper);padding-top:40px;padding-bottom:40px}
  .tbadges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 36px}
  .tbadge{display:flex;align-items:center;gap:10px}
  a.tbadge{text-decoration:none;color:inherit;border-radius:10px;padding:4px;margin:-4px;transition:.15s}
  a.tbadge:hover{background:color-mix(in srgb,var(--coral) 6%,transparent)}
  .tbadge-img img{display:block;height:40px;width:auto}
  .tbadge-fcca img{height:84px}
  .tbadge-icon{height:44px;width:44px;flex:none;display:block}
  svg.tbadge-icon{color:var(--coral-deep);stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  .tbadge-txt{font-family:var(--font-alt);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;line-height:1.3;color:var(--ink);max-width:9ch}
  .tbadge-txt-wide{max-width:none;white-space:normal}

  /* reviews */
  .rev{background:var(--raise);padding-bottom:48px}
  .rev .inner{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
  @media (max-width:680px){ .rev .inner{grid-template-columns:1fr;gap:18px} }
  .score{text-align:center;display:block;text-decoration:none;color:inherit;border-radius:14px;padding:8px;margin:-8px;transition:.15s}
  .score:hover{background:color-mix(in srgb,var(--coral) 6%,transparent)}
  .score .n{font-family:var(--font-display);font-size:3.6rem;line-height:1}
  .stars{color:var(--orange);font-size:1.1rem;letter-spacing:2px}
  .score .c{font-size:.82rem;color:var(--muted);margin-top:4px;display:flex;align-items:center;justify-content:center;gap:5px}
  .score .c svg{width:14px;height:14px;flex:none}
  .score-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;font-weight:700;color:var(--btn-text);background:var(--coral);border-radius:20px;padding:9px 16px;transition:.15s}
  .score-more svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
  .score:hover .score-more{background:var(--coral-deep)}
  .score:hover .score-more svg{transform:translateX(3px)}
  blockquote{margin:0;font-size:1.15rem;line-height:1.5}
  blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:.82rem;color:var(--muted);font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em}

  /* final cta */
  .final{background:var(--band);color:#fff;text-align:center;scroll-margin-top:76px;padding-bottom:48px}
  .final h2{font-size:clamp(2rem,5vw,3.4rem)}
  .final p{color:#c9bfb2;margin:.4em auto 26px;max-width:44ch}
  .final .p{font-size:1.6rem;font-weight:700;margin-bottom:18px}

  footer{padding:26px 22px;text-align:center;color:var(--muted);font-size:.8rem;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.1em}
  footer a{color:inherit;text-decoration:underline}
  footer a:hover{color:var(--coral-deep)}

  /* weights & ages — desktop table + mobile cards from the same markup (CSS decides which
     shows, no JS resize logic), used both inline (filtered, in "Good to know") and in full
     on the standalone weights-ages.html reference page (data-wa-tabs: Canyon Park / Wild Bay) */
  .wa-legend{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 12px;font-size:.76rem;color:var(--sub)}
  .wa-legend span{display:inline-flex;align-items:center;gap:6px}
  .wa-dot{width:10px;height:10px;border-radius:3px;flex:none}
  .wa-dot-age{background:#fff3e6;border:1px solid #f0c48f}
  .wa-dot-drive{background:var(--raise);border:1px solid var(--hair)}
  .wa-dot-wt{background:#e8f8f0;border:1px solid #a9dcbf}

  .wa-tblwrap{overflow-x:auto;max-width:100%;border:1px solid var(--hair);border-radius:14px}
  table.wa{width:100%;border-collapse:collapse;font-size:.84rem}
  table.wa thead th{background:var(--raise);color:var(--muted);font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-size:.62rem;font-weight:700;padding:10px 14px;text-align:center;border-bottom:1px solid var(--hair);white-space:nowrap;line-height:1.4}
  table.wa thead th:first-child{text-align:left}
  table.wa td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--hair2);vertical-align:middle}
  table.wa td:first-child{text-align:left}
  table.wa tbody tr:last-child td{border-bottom:0}
  table.wa tbody tr:hover td{background:var(--raise)}
  .wa-actname{font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .wa-icon{font-size:1rem;flex:none}
  .wa-rownote{margin-top:4px;font-size:.76rem;color:var(--sub);font-weight:400;white-space:normal;max-width:32ch}

  .wa-badge{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.78rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
  .wa-b-age{background:#fff3e6;color:#a06000;border:1px solid #f0c48f}
  .wa-b-drive{background:var(--raise);color:var(--sub);border:1px solid var(--hair)}
  .wa-b-wt{background:#e8f8f0;color:#1a7a45;border:1px solid #a9dcbf}
  .wa-na{color:var(--muted);font-size:.82rem}

  .wa-cards{display:none}
  .wa-card{border:1px solid var(--hair);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--surface)}
  .wa-card:last-child{margin-bottom:0}
  .wa-card-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;font-size:1rem;display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .wa-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .wa-pill{background:var(--raise);border-radius:8px;padding:8px 10px}
  .wa-pill-label{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:700;color:var(--muted);margin-bottom:4px}
  .wa-pill-value{font-size:.84rem}

  @media (max-width:640px){ .wa-tblwrap{display:none} .wa-cards{display:block} }

  .wa-tabs{display:flex;gap:8px;margin-bottom:14px}
  .wa-tabbtn{flex:1;max-width:200px;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;font-weight:700;
    padding:11px 16px;border-radius:22px;border:1px solid var(--hair);background:var(--surface);color:var(--sub);cursor:pointer;min-height:44px;transition:.15s}
  .wa-tabbtn.on{background:var(--band);color:#fff;border-color:var(--band)}
  .wa-panel{display:none}
  .wa-panel.on{display:block}

  .wa-health{background:var(--raise);border:1px solid var(--hair);border-radius:12px;padding:16px 18px;margin-top:16px}
  .wa-health h3{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.07em;font-size:.66rem;font-weight:700;color:var(--muted);margin-bottom:10px}
  .wa-health ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
  .wa-health li{font-size:.84rem;color:var(--sub);display:flex;gap:8px;line-height:1.5}
  .wa-health .wa-ni{flex:none;font-size:.95rem}

  .wa-more{display:inline-block;margin-top:14px;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--coral-deep);text-decoration:underline}
  body[data-page="weightsAges"]{padding-bottom:0}

  /* lightbox */
  .fees{display:grid;gap:12px;margin-top:6px}
  .fee{border:1px solid var(--hair);border-radius:12px;padding:15px 18px;background:var(--surface);display:flex;gap:16px;align-items:flex-start}
  .fee .txt{flex:1}
  .fee-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;font-size:1.05rem;line-height:1}
  .fee-note{margin:6px 0 0;font-size:.9rem;color:var(--sub)}
  .fee-tag{display:inline-block;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.08em;font-size:.58rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle}
  .fee-tag.req{background:color-mix(in srgb,var(--coral) 14%,#fff);color:var(--coral-deep)}
  .fee-tag.opt{background:var(--hair2);color:var(--muted)}
  .fee-amt{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:1.05rem;text-align:right}
  .fee-amt small{display:block;font-weight:400;font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
  .fee-amt .kid{display:block;font-weight:400;font-size:.78rem;color:var(--muted);margin-top:2px}
  .allinc-card{display:flex;align-items:center;gap:24px;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:28px;margin-top:6px}
  .allinc-badge{flex:none;width:64px;height:64px;border-radius:50%;background:var(--coral);display:grid;place-items:center}
  .allinc-badge svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .allinc-card h2{margin:0 0 8px}
  .allinc-card p{margin:0}
  @media(max-width:640px){.allinc-card{flex-direction:column;text-align:center;padding:24px}}
  /* Elite upgrade panel — solid dark, no photo, gold/bronze accent (same "premium tier" language
     as Ultimate Pass's bronze) so this upsell reads as a distinct VIP moment without competing
     with the page's actual photo hero. */
  .elite-panel{background:var(--band);color:#fff;padding-bottom:48px}
  .elite-badge{display:inline-block;font-family:var(--font-alt);font-weight:700;letter-spacing:.14em;font-size:.68rem;text-transform:uppercase;color:#141019;background:linear-gradient(135deg,#EFD48A,#B8892E);padding:6px 16px;border-radius:20px;margin-bottom:18px}
  .elite-panel .eyerow .lbl{color:#E8C766}
  .elite-panel .eyerow .line{background:rgba(255,255,255,.2)}
  .elite-panel h2{color:#fff}
  .elite-panel .lead{color:rgba(255,255,255,.75)}
  .elite-panel .fee{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  .elite-panel .fee-name{color:#fff}
  .elite-panel .fee-note{color:rgba(255,255,255,.62)}
  .elite-panel .fee-amt{color:#fff}
  .elite-panel .fee-tag.req{background:rgba(232,199,102,.18);color:#E8C766}
  .pricepair{display:flex;align-items:baseline;gap:2px 18px;flex-wrap:wrap}
  .pricepair .amt{font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .pricepair .amt small{font-size:.4em;font-weight:400;opacity:.72;margin-left:5px;text-transform:uppercase;letter-spacing:.06em}
  table.cmp .prc .kid{display:block;font-family:var(--font-body);font-weight:400;font-size:.72rem;color:var(--muted);margin-top:3px;white-space:nowrap}
  .lightbox{position:fixed;inset:0;background:rgba(12,8,5,.93);display:none;align-items:center;justify-content:center;z-index:60;padding:24px}
  .lightbox.open{display:flex}
  .lightbox figure{margin:0;max-width:1040px;width:100%}
  .lightbox img{width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
  .lightbox figcaption{color:#fff;font-family:var(--font-display);text-transform:uppercase;margin-top:12px;text-align:center}
  .lbclose{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font-size:1.6rem;cursor:pointer}
  .lbdownload{position:absolute;top:18px;right:76px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;cursor:pointer;display:grid;place-items:center}
  .lbdownload svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
  .lbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.4);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
  .lbnav:hover,.lbclose:hover,.lbdownload:hover{background:var(--coral);border-color:var(--coral);color:var(--btn-text)}
  .lbprev{left:18px}.lbnext{right:18px}
  @media(max-width:640px){.lbnav{width:44px;height:44px}.lbprev{left:8px}.lbnext{right:8px}}

  /* video modal — vertical (9:16) UGC clips, embedded from YouTube */
  .video-modal{position:fixed;inset:0;background:rgba(12,8,5,.85);display:none;align-items:center;justify-content:center;z-index:75;padding:24px}
  .video-modal.open{display:flex}
  .video-frame{position:relative;width:min(400px,90vw);aspect-ratio:9/16;max-height:85vh;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
  /* landscape variant — triggers can declare data-video-aspect="16:9" (video.js sets this
     class) so widescreen videos fill the modal instead of letterboxing inside the 9:16 frame */
  .video-frame.wide{aspect-ratio:16/9;width:min(1100px,92vw,calc(85vh * 16 / 9))}
  .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .video-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font-size:1.6rem;cursor:pointer;z-index:2}
  .video-close:hover{background:var(--coral);border-color:var(--coral);color:var(--btn-text)}
  @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto} .galfig img{transition:none}}

  /* contact modal */
  .contact-modal{position:fixed;inset:0;background:rgba(12,8,5,.6);display:none;align-items:center;justify-content:center;z-index:70;padding:24px}
  .contact-modal.open{display:flex}
  .contact-card{position:relative;background:var(--surface);border-radius:16px;padding:32px 28px;max-width:380px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25)}
  .contact-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--hair);background:var(--raise);color:var(--ink);font-size:1.3rem;cursor:pointer;display:grid;place-items:center;line-height:1}
  .contact-close:hover{background:var(--coral);border-color:var(--coral);color:var(--btn-text)}
  .contact-eyebrow{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:700;color:var(--coral-deep);margin:0}
  .contact-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.01em;font-size:1.6rem;margin:.15em 0 20px}
  .contact-group{margin-bottom:18px}
  .contact-group:last-child{margin-bottom:0}
  .contact-label{display:block;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:8px}
  .contact-link{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;border:1px solid var(--hair);margin-bottom:6px}
  .contact-link:last-child{margin-bottom:0}
  .contact-link:hover{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 6%,#fff)}
  .contact-link small{font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.68rem;white-space:nowrap}

/* ===== Global site header / mega-menu ===== */
#site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--hair)}
.nav-inner{max-width:none;padding:0 22px;height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.82rem;white-space:nowrap;flex:none}
#site-header.wordmark-tight .nav-word{display:none}
.nav-mark{width:30px;height:30px;flex:none;display:block}
.nav-menu{display:flex;align-items:center;gap:2px;justify-self:center}
.navgroup{position:relative;flex:none}
.navtop{display:inline-flex;align-items:center;gap:4px;background:none;border:0;cursor:pointer;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:.74rem;color:var(--sub);padding:10px 10px;border-radius:8px;white-space:nowrap}
.navtop:hover{color:var(--ink);background:var(--hair2)}
.navtop .chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.chev-wrap{display:inline-flex;transition:transform .2s}
.navpanel{position:absolute;top:100%;left:0;min-width:210px;max-height:calc(100vh - 140px);overflow-y:auto;background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:8px;display:none;flex-direction:column;gap:1px;z-index:5}
.navpanel-bar{height:3px;border-radius:3px;background:var(--accent,var(--coral));margin:2px 8px 6px}
.navpanel a{text-decoration:none;color:var(--ink);font-size:.9rem;padding:8px 12px;border-radius:8px;white-space:nowrap;display:block}
.navpanel a:hover{background:color-mix(in srgb,var(--accent,var(--coral)) 12%,#fff);color:var(--accent,var(--coral-deep))}
.navpanel a[aria-current="page"]{color:var(--accent,var(--coral-deep));font-weight:600}
.navsub+.navsub{margin-top:4px;padding-top:6px;border-top:1px solid var(--hair2)}
.navsub-label{display:block;font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.62rem;color:var(--muted);padding:6px 12px 2px;white-space:nowrap}
/* Last nav group (Sailing) is rightmost — anchor its dropdown to the right so a wide grouped
   panel doesn't overflow past the viewport edge and reads centered under the trigger. */
.navgroup:last-child .navpanel{left:auto;right:0}
@media(min-width:1181px){
  .navpanel-grouped{flex-direction:row;align-items:flex-start;gap:22px;padding:14px 18px}
  .navpanel-grouped .navsub{min-width:150px}
  .navpanel-grouped .navsub+.navsub{margin-top:0;padding-top:0;border-top:0;border-left:1px solid var(--hair2);padding-left:22px}
}
.navgroup.tap .navpanel{display:flex}
.navgroup.tap .chev-wrap{transform:rotate(180deg)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.lang-toggle{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:.72rem;color:var(--sub);background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:7px 12px;cursor:pointer;flex:none}
.lang-toggle:hover{color:var(--ink);background:var(--hair2)}
.navsearch{position:relative;width:190px;flex:none}
.navsearch-input{font-family:var(--font-body);font-size:.8rem;color:var(--ink);background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:7px 14px;width:100%;box-sizing:border-box}
.navsearch-input::placeholder{color:var(--sub)}
.navsearch-results{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;max-width:300px;max-height:60vh;overflow-y:auto;background:#fff;border:1px solid var(--hair);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:6px;z-index:20}
.navsearch-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-decoration:none;color:var(--ink);padding:9px 10px;border-radius:8px;font-size:.86rem}
.navsearch-item-group{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;color:var(--muted);white-space:nowrap}
.navsearch-item:hover,.navsearch-item.active{background:var(--hair2)}
.navsearch-empty{padding:10px 8px;color:var(--muted);font-size:.84rem}
.nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .15s ease}
#site-header.open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#site-header.open .nav-burger span:nth-child(2){opacity:0}
#site-header.open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{display:none}

/* product sub-bar */
.subbar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:9px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-top:1px solid var(--hair);box-shadow:0 -2px 8px rgba(0,0,0,.06)}
#site-header.open + .subbar{visibility:hidden}
body{padding-bottom:76px}
.subbar-inner{max-width:var(--wrap);margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:12px}
@media(max-width:480px){ .subbar-inner{gap:6px;padding:0 14px} }
.subbar .subbar-name{font-family:var(--font-alt);text-transform:uppercase;letter-spacing:.05em;font-weight:700;font-size:.76rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:64px;flex:1 1 90px;max-width:52vw}
@media(max-width:480px){ .subbar .subbar-name{font-size:.62rem;min-width:56px} .subbar .price{font-size:.78rem} }
.subbar .sp{margin-left:auto}
.subbar .price{font-weight:700;font-size:1rem;white-space:nowrap;flex:none}
.subbar .price small{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 1px}
.subbar .btn{white-space:nowrap}
@media(max-width:1180px){ .subbar .btn{font-size:.72rem;padding:9px 14px;min-height:0} }
@media(max-width:480px){ .subbar .btn{font-size:.64rem;padding:8px 10px} }

@media(max-width:1180px){
  .nav-inner{padding:0 14px;gap:8px}
  .nav-menu{position:fixed;top:58px;right:0;bottom:0;left:auto;width:min(340px,85vw);justify-self:auto;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:6px 12px 16px;border-left:1px solid var(--hair);transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;overflow-y:auto;box-shadow:-10px 0 30px rgba(0,0,0,.14);z-index:2}
  #site-header.open .nav-menu{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s}
  #site-header.open .nav-scrim{display:block;position:fixed;inset:58px 0 0 0;background:rgba(0,0,0,.35)}
  .navgroup{width:100%;border-left:3px solid transparent}
  .navgroup.tap{border-left-color:var(--accent,var(--coral))}
  .navtop{width:100%;justify-content:space-between;font-size:.86rem;padding:13px 8px 13px 11px;border-bottom:1px solid var(--hair2)}
  .navpanel{position:static;box-shadow:none;border:0;border-radius:0;padding:2px 8px 8px;min-width:0;max-height:none;overflow-y:visible}
  .navpanel-bar{display:none}
  .navsub-label{font-size:.72rem;letter-spacing:.06em;color:var(--accent,var(--coral-deep));background:color-mix(in srgb,var(--accent,var(--coral)) 10%,#fff);border-radius:6px;padding:5px 10px;margin:10px 0 4px;width:fit-content}
  .nav-burger{display:flex;order:3}
  .nav-logo{order:1}
  .nav-right{order:2}
  .navsearch{display:none}
}

  /* ===================== HOME (index) ===================== */
  /* WCA core-brand orange, deepened to #C2560C for readable white button text (~4.5 contrast). */
  body[data-page="home"]{ --coral:#C2560C; --coral-deep:#9E4405; }
  /* white-outline ghost variant for buttons sitting ON the dark hero photo (the normal .ghost
     uses accent-colored text, unreadable over the image) */
  .btn.ghost-inv{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85); }
  .btn.ghost-inv:hover{ background:rgba(255,255,255,.16); }
  .btn.ghost-inv svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  body[data-page="home"] .hero{ min-height:88vh; }
  body[data-page="home"] .hero h1{ font-size:clamp(2.3rem,7vw,5.4rem); }
  /* The home tagline is a full sentence — the sitewide 38ch cap + line-clamp:2 truncated it
     with "…" (same fix as the BRP pages). */
  body[data-page="home"] .hero .tag{ max-width:60ch; -webkit-line-clamp:3; }
  /* explore-by-division strip (4 image cards under the hero) */
  .divstrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
  @media(max-width:820px){ .divstrip{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:460px){ .divstrip{ gap:10px; } }
  .divcard{ position:relative; display:block; border-radius:16px; overflow:hidden; aspect-ratio:3/4; text-decoration:none; color:#fff; background:#111; border-bottom:4px solid var(--tint,var(--coral)); }
  .divcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .divcard:hover img{ transform:scale(1.06); }
  .divcard .ov{ position:absolute; inset:0; background:linear-gradient(to top,rgba(10,8,6,.86) 12%,rgba(10,8,6,.15) 58%,transparent); }
  .divcard .lab{ position:absolute; left:14px; right:12px; bottom:13px; }
  .divcard .dn{ font-family:var(--font-display); text-transform:uppercase; font-size:1.22rem; line-height:1; letter-spacing:-.01em; }
  .divcard .dt{ display:block; margin-top:6px; font-size:.75rem; color:rgba(255,255,255,.82); line-height:1.3; }
  .divcard .dc{ display:inline-block; margin-top:9px; font-family:var(--font-alt); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.58rem; color:#141019; background:#fff; padding:3px 9px; border-radius:20px; }
  .divcard:focus-visible{ outline:3px solid var(--tint,var(--coral)); outline-offset:2px; }
  /* division section header + product-tile grid */
  .divsec{ scroll-margin-top:76px; padding-top:64px; }
  @media(max-width:600px){ .divsec{ padding-top:48px; } }
  .divhead{ display:flex; align-items:flex-start; gap:14px; margin:0 0 18px; }
  .divhead .bar{ width:5px; align-self:stretch; min-height:46px; border-radius:4px; background:var(--tint,var(--coral)); flex:none; }
  .divhead h2{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.015em; line-height:.95; font-size:clamp(1.7rem,5vw,2.6rem); }
  .divhead p{ margin:5px 0 0; color:var(--sub); font-size:.92rem; max-width:60ch; }
  .divhead .cnt{ font-family:var(--font-alt); font-weight:700; letter-spacing:.06em; color:var(--tint,var(--coral)); }
  .pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
  @media(max-width:520px){ .pgrid{ grid-template-columns:1fr 1fr; gap:11px; } }
  .ptile{ display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:var(--surface); border:1px solid var(--hair); text-decoration:none; color:var(--ink); transition:transform .18s,box-shadow .18s,border-color .18s; }
  .ptile:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,.10); border-color:var(--tint,var(--coral)); }
  .ptile:focus-visible{ outline:3px solid var(--tint,var(--coral)); outline-offset:2px; }
  .ptile-img{ aspect-ratio:4/3; overflow:hidden; background:#111; }
  .ptile-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
  .ptile:hover .ptile-img img{ transform:scale(1.05); }
  .ptile-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:5px; flex:1; }
  .ptile-name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-.01em; font-size:1.02rem; line-height:1.02; overflow-wrap:break-word; }
  /* 2-col mobile grid: the name box is ~130px at 375px wide — single long words ("CATAMARÁN",
     "EXPERIENCE", "SANCTUARY") overflowed the box and got clipped by the tile's overflow:hidden.
     Fluid vw-based size keeps the longest word inside the box down to 320px viewports;
     overflow-wrap above is the last-resort safety net. */
  @media(max-width:520px){ .ptile-name{ font-size:clamp(.72rem,3.5vw,1.02rem); } }
  /* small location sublabel (BRP/Water/Sailing tiles, where the launch point varies) — also keeps
     long names like "Expedition Boat · San José del Cabo" from wrapping to 3 lines on mobile */
  .ptile-loc{ font-family:var(--font-alt); font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.58rem; color:var(--muted); }
  /* pin the price to the tile bottom so prices align across a row even when one tile's
     name wraps to two lines (e.g. "Expedition Boat · San José del Cabo") */
  .ptile-price{ font-size:.95rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:auto; }
  .ptile-price small{ font-family:var(--font-alt); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.58rem; color:var(--muted); margin-right:4px; }