:root{
    /* dark forest sections (nav, hero, footer) */
    --bg:#141f19;
    --surface:#1a2820;
    --surface-2:#213026;
    --surface-3:#27362b;
    --text:#f4f7ef;
    --text-muted:#a7bba7;
    --line:rgba(244,247,239,0.16);

    /* light paper sections (activities, about) */
    --paper:#f7f7f2;
    --paper-2:#eef0e9;
    --ink:#1c281f;
    --ink-muted:#5f6b5a;
    --line-light:rgba(19,37,27,0.1);

    /* shared accent: muted sage green, toned down */
    --accent:#7fa05c;
    --accent-deep:#546b3c;
    --accent-ink:#16240f;

    --shadow: 0 20px 50px rgba(0,0,0,0.35);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Barlow',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}

  h1,h2,h3{
    font-family:'Anton',system-ui,sans-serif;
    font-weight:400;
    text-transform:uppercase;
    line-height:0.98;
    letter-spacing:0.5px;
    text-wrap:balance;
    margin:0;
  }

  .eyebrow{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.22em;
    font-size:0.78rem;
    color:var(--accent);
    display:inline-flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:2px;
    background:var(--accent);
    display:inline-block;
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding-inline:24px;
  }

  a{color:inherit;}

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky;
    top:0;
    z-index:40;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    transition:top .3s ease, box-shadow .3s ease;
  }
  header.site-nav.nav-scrolled{
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
  }
  /* Sliding this via `top` rather than `transform` is deliberate: a
     transform on this header would make it the containing block for its
     position:fixed floating-cta button (once that button detaches into its
     own bottom-right pill past the hero), dragging the pill along with the
     header instead of leaving it floating independently. */
  header.site-nav.nav-hidden{
    top:-110px;
  }
  .nav-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-block:14px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .brand img{
    width:46px;height:46px;border-radius:50%;
    border:2px solid var(--accent);
    object-fit:cover;
  }
  .brand-name{
    font-family:'Anton',sans-serif;
    font-size:1.05rem;
    letter-spacing:0.03em;
    line-height:1;
  }
  .brand-name span{
    display:block;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:0.62rem;
    letter-spacing:0.28em;
    color:var(--accent);
    margin-top:3px;
  }
  nav.main-menu{
    display:flex;
    gap:28px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.86rem;
  }
  nav.main-menu a{
    text-decoration:none;
    color:var(--text-muted);
    position:relative;
    padding-block:4px;
  }
  nav.main-menu a.current{color:var(--text);}
  nav.main-menu a.current::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-2px;
    height:2px;
    background:var(--accent);
  }
  .nav-cta{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.82rem;
    background:var(--accent);
    color:var(--accent-ink);
    padding:10px 18px;
    border-radius:2px;
    text-decoration:none;
    white-space:nowrap;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
    transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease;
  }
  /* Floating state: added by JS once the visitor scrolls past the hero */
  .nav-cta.nav-cta--floating{
    position:fixed;
    top:auto;
    bottom:24px;
    right:24px;
    z-index:40;
    box-shadow:0 10px 26px rgba(22,36,15,0.28);
    transform:translateY(0);
    opacity:1;
  }
  .nav-cta.nav-cta--floating.nav-cta--hidden{
    transform:translateY(140%);
    opacity:0;
    pointer-events:none;
  }
  .mobile-cta{display:none;}
  .lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.78rem;
  }
  .lang-switch ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;}
  .lang-switch li{display:flex;align-items:center;}
  .lang-switch a{
    color:var(--text-muted);
    text-decoration:none;
    padding:4px 6px;
    border-radius:2px;
  }
  .lang-switch li.lang-item-current a,
  .lang-switch a:hover{
    color:var(--text);
    background:var(--surface-2);
  }
  .lang-switch img{display:none;}
  .menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:38px;height:38px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:3px;
    cursor:pointer;
    flex:0 0 auto;
  }
  .menu-toggle span{
    display:block;
    width:18px;height:2px;
    background:var(--text);
    transition:transform .2s ease, opacity .2s ease;
  }
  .site-nav.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .site-nav.nav-open .menu-toggle span:nth-child(2){opacity:0;}
  .site-nav.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:
      linear-gradient(90deg, rgba(9,15,12,0.38) 0%, rgba(9,15,12,0.16) 55%, rgba(9,15,12,0) 100%),
      linear-gradient(180deg, rgba(9,20,14,0.05) 0%, rgba(9,19,14,0.35) 78%, var(--bg) 100%),
      url('../../uploads/mohican-mockup/hero_bg.jpg') center 30%/cover no-repeat, var(--bg);
    padding-block: 88px 96px;
    overflow:hidden;
  }
  .hero-media{
    position:absolute;
    top:0; right:0;
    width:58%;
    height:100%;
    z-index:0;
    clip-path:polygon(28% 0, 100% 0, 100% 100%, 8% 100%);
  }
  .hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 18%;
    display:block;
  }
  .hero-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(20,31,25,0.75) 14%, rgba(20,31,25,0.25) 32%, rgba(20,31,25,0) 48%);
    z-index:2;
  }
  .hero-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(9,20,14,0) 58%, var(--bg) 100%);
    z-index:2;
  }
  .hero .wrap.hero-grid{
    position:relative;
    z-index:1;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:end;
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    margin-top:18px;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--accent);
  }
  .hero p.lede{
    font-size:1.05rem;
    color:var(--text-muted);
    max-width:46ch;
    margin-top:20px;
    line-height:1.55;
  }
  .hero-ctas{
    display:flex;
    gap:14px;
    margin-top:34px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.92rem;
    padding:15px 28px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border-radius:2px;
  }
  .btn-primary{
    background:var(--accent);
    color:var(--accent-ink);
    clip-path: polygon(0 0, 100% 0, 100% 78%, 94% 100%, 0 100%);
  }
  .btn-ghost{
    border:1.5px solid var(--line);
    color:var(--text);
  }
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

  .stat-card{
    background:rgba(13,20,17,0.72);
    border:1px solid var(--line);
    backdrop-filter:blur(6px);
    padding:26px;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  .stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .stat-row:last-child{border-bottom:none;padding-bottom:0;}
  .stat-num{
    font-family:'Anton',sans-serif;
    font-size:1.9rem;
    color:var(--accent);
    line-height:1;
  }
  .stat-label{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.72rem;
    color:var(--text-muted);
    text-align:right;
  }

  /* ---------- ACTIVITIES (light paper section) ---------- */
  .section{
    position:relative;
    padding-block:96px;
    background:var(--paper);
    color:var(--ink);
  }
  /* Soft decorative circle-lines, same idea as the "Quienes somos" band, so
     every light section shares one consistent texture instead of a flat
     color jump between them. Position/opacity varies a bit per section so
     it doesn't feel like a repeated stamp. */
  #actividades{
    padding-block-start:32px;
    background-image:
      radial-gradient(circle at 88% 12%, rgba(127,160,92,0.07), transparent 40%),
      repeating-radial-gradient(circle at 6% 82%, transparent 0 30px, rgba(19,37,27,0.035) 31px, transparent 32px, transparent 62px);
  }
  .momentos{
    background-image:
      radial-gradient(circle at 10% 18%, rgba(127,160,92,0.08), transparent 40%),
      repeating-radial-gradient(circle at 92% 70%, transparent 0 30px, rgba(19,37,27,0.035) 31px, transparent 32px, transparent 62px);
  }
  .section .eyebrow{color:var(--accent-deep);}
  .section .eyebrow::before{background:var(--accent-deep);}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(2rem,4vw,2.9rem);margin-top:14px;max-width:14ch;color:var(--ink);}
  .section-head p{color:var(--ink-muted);max-width:38ch;font-size:0.98rem;line-height:1.55;}

  .cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
  }
  .cards-2{grid-template-columns:repeat(2,1fr);}
  .card{
    background:#ffffff;
    border:1px solid var(--line-light);
    overflow:hidden;
    position:relative;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 100%, 0 100%);
  }
  a.card{display:block;text-decoration:none;color:inherit;transition:box-shadow .2s ease, transform .2s ease;}
  a.card:hover{box-shadow:0 18px 34px rgba(20,31,25,0.18);transform:translateY(-2px);}
  .card-cta{
    display:inline-block;
    margin-top:14px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.78rem;
    color:var(--accent-deep);
  }
  .card-media{
    aspect-ratio:4/3;
    overflow:hidden;
    position:relative;
  }
  .card-media img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease;
  }
  .card:hover .card-media img{transform:scale(1.06);}
  .card-tag{
    position:absolute;
    top:14px;left:14px;
    background:var(--accent);
    color:var(--accent-ink);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.7rem;
    padding:5px 10px;
  }
  .card-body{padding:24px;}
  .card-body h3{font-size:1.35rem;margin-bottom:10px;color:var(--ink);}
  .card-body p{color:var(--ink-muted);font-size:0.92rem;line-height:1.55;}
  .card-body .meta{
    display:flex;
    gap:14px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line-light);
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.7rem;
    color:var(--accent-deep);
  }

  /* ---------- VIDEO SHOWCASE ---------- */
  .video-showcase{
    position:relative;
    background-color:var(--paper);
    background-image:
      radial-gradient(circle at 14% 22%, rgba(127,160,92,0.07), transparent 40%),
      repeating-radial-gradient(circle at 90% 78%, transparent 0 30px, rgba(19,37,27,0.035) 31px, transparent 32px, transparent 62px);
    padding-block:36px 40px;
    color:var(--ink);
  }
  .video-showcase .eyebrow{color:var(--accent-deep);}
  .video-showcase .eyebrow::before{background:var(--accent-deep);}
  .video-showcase .section-head h2{color:var(--ink);}
  .video-showcase .section-head p{color:var(--ink-muted);}
  .video-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
  }
  .video-frame iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
    border:0;
  }
  .video-placeholder{
    position:absolute;inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    text-align:center;
    padding:24px;
    color:var(--accent);
  }
  .video-placeholder p{
    color:var(--text-muted);
    max-width:34ch;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.86rem;
  }
  .video-frame-vertical{
    aspect-ratio:9/16;
    flex:0 0 auto;
    width:min(280px, 78vw);
    scroll-snap-align:center;
    box-shadow:0 24px 50px rgba(0,0,0,0.4);
  }
  .video-frame-vertical video{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    background:#000;
  }
  .video-showcase .momentos-note{color:var(--ink-muted);margin-top:18px;}
  .video-carousel-wrap{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .video-carousel{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:4px 4px 10px;
    flex:1 1 auto;
    scrollbar-width:thin;
  }
  .vcarousel-btn{
    flex:0 0 auto;
    width:42px;height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--surface-2);
    color:var(--text);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:border-color .15s ease, color .15s ease;
  }
  .vcarousel-btn:hover{border-color:var(--accent);color:var(--accent);}
  .video-showcase .vcarousel-btn{background:#ffffff;color:var(--ink);border-color:var(--line-light);}
  .video-showcase .vcarousel-btn:hover{border-color:var(--accent-deep);color:var(--accent-deep);}
  .video-showcase .video-frame{background:var(--paper-2);border-color:var(--line-light);}
  .video-showcase .video-frame-vertical{box-shadow:0 24px 50px rgba(28,40,31,0.18);}

  /* ---------- MOMENTOS MOHICAN (real photo gallery) ---------- */
  .momentos{background-color:var(--paper-2);position:relative;padding-block-start:32px;}
  .momentos-tags{display:flex;gap:10px;flex-wrap:wrap;}
  .route-tag{
    appearance:none;
    -webkit-appearance:none;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.72rem;
    color:var(--accent-deep);
    background:#ffffff;
    border:1px solid var(--line-light);
    padding:7px 14px;
    white-space:nowrap;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .route-tag:hover{border-color:var(--accent);}
  .route-tag.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .gallery-item.is-hidden{display:none;}
  .momentos-empty{
    text-align:center;
    color:var(--ink-muted);
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.82rem;
    padding:32px 0;
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:170px;
    gap:14px;
  }
  .gallery-item{
    position:relative;
    overflow:hidden;
    margin:0;
    border-radius:3px;
    background:var(--surface-3);
  }
  .gallery-item.span-tall{grid-row:span 2;}
  .gallery-item img{
    width:100%;height:100%;object-fit:cover;
    display:block;
    transition:transform .5s ease;
  }
  .gallery-item:hover img{transform:scale(1.06);}
  .gallery-item figcaption{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:24px 12px 10px;
    background:linear-gradient(180deg, rgba(10,15,10,0) 0%, rgba(8,12,8,0.78) 100%);
    color:#f4f7ef;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    font-size:0.82rem;
  }
  .momentos-note{
    margin-top:22px;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.7rem;
    color:var(--ink-muted);
    text-align:center;
  }

  /* ---------- ABOUT / TOPO BAND (light paper, softer tint) ---------- */
  .band{
    position:relative;
    padding-block:40px;
    background:var(--paper-2);
    color:var(--ink);
    background-image:
      radial-gradient(circle at 15% 20%, rgba(127,160,92,0.08), transparent 42%),
      repeating-radial-gradient(circle at 80% 60%, transparent 0 34px, rgba(19,37,27,0.04) 35px, transparent 36px, transparent 70px);
    border-top:1px solid var(--line-light);
    border-bottom:1px solid var(--line-light);
  }
  .band-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    align-items:center;
  }
  .band-grid img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    clip-path: polygon(8% 0, 100% 0, 100% 92%, 92% 100%, 0 100%, 0 8%);
    border:1px solid var(--line-light);
  }
  .band h2{font-size:clamp(2rem,4vw,2.7rem);color:var(--ink);}
  .band p{color:var(--ink-muted);font-size:1rem;line-height:1.65;margin-top:18px;max-width:52ch;}
  .band .eyebrow{color:var(--accent-deep);}
  .band .eyebrow::before{background:var(--accent-deep);}
  .band .signature{
    margin-top:28px;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.78rem;
    color:var(--accent-deep);
  }

  /* ---------- REVIEWS (dark, floating popup-style cards) ---------- */
  .reviews{
    background:var(--bg);
    padding-block:88px 100px;
    overflow:hidden;
  }
  .reviews .section-head{margin-bottom:40px;}
  .reviews .section-head h2{color:var(--text);}
  .reviews .reviews-note{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.72rem;
    color:var(--text-muted);
    border:1px dashed var(--line);
    padding:6px 12px;
  }
  .reviews-track-wrap{
    width:100%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .reviews-track{
    display:flex;
    gap:20px;
    width:max-content;
    padding-inline:24px;
    animation: reviews-scroll 34s linear infinite;
  }
  .reviews-track-wrap:hover .reviews-track{animation-play-state:paused;}
  @keyframes reviews-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  @media (prefers-reduced-motion: reduce){
    .reviews-track{animation:none;}
  }

  /* ---------- PARTNERS (aseguradora + aliados, light bar) ---------- */
  .partners{
    position:relative;
    background-color:var(--paper-2);
    background-image:
      radial-gradient(circle at 50% 50%, rgba(127,160,92,0.07), transparent 46%),
      repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, rgba(19,37,27,0.03) 31px, transparent 32px, transparent 62px);
    padding-block:56px;
    border-block:1px solid var(--line-light);
  }
  .partners-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
  }
  .partners-col{
    text-align:center;
  }
  .partners-col h3{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:var(--accent-deep);
    margin-bottom:24px;
  }
  .partners-logos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
  }
  .partners-logos img{
    height:64px;
    width:auto;
    max-width:180px;
    object-fit:contain;
    display:block;
  }
  .partners-logos img.logo-badge{height:76px;}
  .mascot-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .mascot-badge img{height:94px;max-width:150px;filter:drop-shadow(0 6px 10px rgba(22,36,15,0.16));}
  @media (max-width:760px){
    .partners{padding-block:44px;}
    .partners-grid{grid-template-columns:1fr;gap:36px;}
    .partners-logos img{height:52px;}
    .partners-logos img.logo-badge{height:64px;}
    .mascot-badge img{height:64px;max-width:100px;}
  }

  .review-card{
    flex:0 0 auto;
    width:300px;
    background:#ffffff;
    color:var(--ink);
    border-radius:14px;
    padding:22px 22px 20px;
    box-shadow:0 22px 40px rgba(0,0,0,0.35), 0 2px 0 rgba(0,0,0,0.04);
    transform:rotate(var(--tilt,0deg));
  }
  .review-card:nth-child(4n+1){--tilt:-1.4deg;}
  .review-card:nth-child(4n+2){--tilt:1deg;}
  .review-card:nth-child(4n+3){--tilt:-0.6deg;}
  .review-card:nth-child(4n+4){--tilt:1.6deg;}
  .review-card-bar{
    display:flex;
    gap:6px;
    margin-bottom:14px;
  }
  .review-card-bar span{
    width:9px;height:9px;border-radius:50%;
    background:var(--line-light);
  }
  .review-card-bar span:nth-child(1){background:#e5605a;}
  .review-card-bar span:nth-child(2){background:#eab64e;}
  .review-card-bar span:nth-child(3){background:var(--accent);}
  .stars{
    color:var(--accent-deep);
    letter-spacing:2px;
    font-size:0.9rem;
    margin-bottom:10px;
  }
  .review-card .quote{
    font-size:0.94rem;
    line-height:1.55;
    color:var(--ink);
    min-height:5.6em;
  }
  .reviewer{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line-light);
  }
  .reviewer .avatar{
    width:34px;height:34px;border-radius:50%;
    background:var(--accent);
    color:var(--accent-ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:0.78rem;
    flex:0 0 auto;
  }
  .reviewer strong{display:block;font-size:0.86rem;}
  .reviewer small{display:block;color:var(--ink-muted);font-size:0.76rem;}

  /* ---------- CTA STRIP ---------- */
  .cta-strip{
    background:var(--accent);
    color:var(--accent-ink);
    padding-block:44px;
  }
  .cta-strip .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
  }
  .cta-strip h2{font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--accent-ink);}
  .cta-strip .btn-ghost{border-color:rgba(42,14,2,0.4);color:var(--accent-ink);}
  .cta-strip .btn-ghost:hover{border-color:var(--accent-ink);}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--bg);
    padding-block:64px 32px;
    border-top:1px solid var(--line);
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px;
  }
  .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .footer-brand img{width:44px;height:44px;border-radius:50%;border:2px solid var(--accent);object-fit:cover;}
  footer h4{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:0.78rem;
    color:var(--accent);
    margin-bottom:16px;
  }
  footer p, footer li{color:var(--text-muted);font-size:0.92rem;line-height:1.7;}
  footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
  footer a{text-decoration:none;}
  footer a:hover{color:var(--accent);}
  .socials{display:flex;gap:12px;margin-top:18px;}
  .socials a{
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-muted);
    transition:border-color .15s,color .15s;
  }
  .socials a svg{display:block;}
  .socials a:hover{border-color:var(--accent);color:var(--accent);}
  .foot-bottom{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.7rem;
    color:var(--text-muted);
  }

  .note-banner{
    background:var(--surface-3);
    border-bottom:1px dashed var(--line);
    color:var(--text-muted);
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.72rem;
    text-align:center;
    padding:10px 16px;
  }
  .note-banner strong{color:var(--accent);}

  @media (max-width: 900px){
    .nav-cta{display:none;}
    .lang-switch{font-size:0.72rem;gap:4px;}
    .menu-toggle{display:flex;}
    nav.main-menu{
      position:absolute;
      top:100%;left:0;right:0;
      flex-direction:column;
      gap:0;
      background:var(--surface);
      border-bottom:1px solid var(--line);
      box-shadow:0 16px 32px rgba(0,0,0,0.35);
      max-height:0;
      overflow:hidden;
      opacity:0;
      transition:max-height .25s ease, opacity .2s ease;
    }
    .site-nav.nav-open nav.main-menu{
      max-height:420px;
      opacity:1;
    }
    nav.main-menu a{
      padding:16px 24px;
      border-bottom:1px solid var(--line);
      width:100%;
    }
    nav.main-menu a.current::after{display:none;}
    .mobile-cta{
      display:block;
      margin:16px 24px;
      width:calc(100% - 48px);
      text-align:center;
      background:var(--accent);
      color:var(--accent-ink);
      font-family:'Barlow Condensed',sans-serif;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.06em;
      padding:12px 18px;
      border-radius:2px;
      border-bottom:none;
    }
    .hero-grid{grid-template-columns:1fr;}
    .hero-media{display:none;}
    .cards{grid-template-columns:1fr;}
    .band-grid{grid-template-columns:1fr;}
    .band-grid img{order:-1;aspect-ratio:16/10;}
    .footer-grid{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;}
  }

  @media (max-width: 480px){
    .nav-inner{padding-block:10px;}
    .brand-name{font-size:0.92rem;}
    .brand img{width:38px;height:38px;}
    .hero{padding-block:56px 64px;}
    .stat-card{padding:18px;}
    .footer-grid{gap:28px;}
    .review-card{width:78vw;max-width:280px;}
    .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px;}
    .gallery-item.span-tall{grid-row:span 2;}
  }

  /* ---------- ACTIVITY DETAIL PAGES (Nilo / Melgar route pages) ---------- */
  .activity-hero{
    position:relative;
    height:min(56vw, 420px);
    min-height:280px;
    display:flex;
    align-items:flex-end;
  }
  .activity-hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .activity-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(9,15,12,0.15) 0%, rgba(9,15,12,0.78) 100%);
  }
  .activity-hero-content{
    position:relative;
    z-index:2;
    padding-block:32px 40px;
    color:#fff;
  }
  .activity-hero-content .card-tag{position:static;display:inline-flex;margin-bottom:14px;}
  .activity-hero-content h1{
    font-family:'Anton',sans-serif;
    font-size:clamp(2rem,5vw,3.2rem);
    text-transform:uppercase;
    line-height:1.02;
  }
  .activity-detail{
    position:relative;
    background-color:var(--paper);
    background-image:
      radial-gradient(circle at 92% 10%, rgba(127,160,92,0.07), transparent 40%),
      repeating-radial-gradient(circle at 4% 86%, transparent 0 30px, rgba(19,37,27,0.035) 31px, transparent 32px, transparent 62px);
    padding-block:64px 80px;
  }
  .activity-detail-grid{
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:56px;
    align-items:start;
  }
  .activity-detail h2{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:1.6rem;
    color:var(--accent-deep);
    margin-bottom:14px;
  }
  .activity-detail p{color:var(--ink-muted);line-height:1.7;margin-bottom:28px;max-width:60ch;}
  .activity-detail p.route-tagline{
    color:var(--accent-deep);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.04em;
    line-height:1.5;
    border-left:3px solid var(--accent);
    padding-left:18px;
    margin:8px 0 32px;
  }
  .activity-detail p.route-tagline strong{
    font-family:'Anton',sans-serif;
    font-weight:400;
    letter-spacing:0.02em;
    display:block;
    margin-bottom:6px;
    color:var(--ink);
  }
  .itinerary-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:14px;}
  .itinerary-list li{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding-bottom:14px;
    border-bottom:1px solid var(--line-light);
    color:var(--ink);
  }
  .itinerary-list li:last-child{border-bottom:none;padding-bottom:0;}
  .itinerary-list .step-num{
    flex:none;
    width:28px;height:28px;
    border-radius:50%;
    background:var(--accent);
    color:var(--accent-ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:0.85rem;
  }
  .price-card{
    background:var(--paper-2);
    border:1px solid var(--line-light);
    border-radius:4px;
    padding:28px;
    text-align:center;
  }
  .price-card .price-label{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:0.8rem;
    color:var(--accent-deep);
    display:block;
    margin-bottom:8px;
  }
  .price-card .price-value{
    font-family:'Anton',sans-serif;
    font-size:2rem;
    color:var(--ink);
    display:block;
    margin-bottom:20px;
  }
  .price-card .btn{width:100%;justify-content:center;display:flex;}
  @media (max-width:760px){
    .activity-detail-grid{grid-template-columns:1fr;gap:36px;}
  }

  /* ---------- WOOCOMMERCE SINGLE PRODUCT PAGE (single-product.php) ---------- */
  .price-card .price-value .woocommerce-Price-amount{
    font-family:'Anton',sans-serif;
    font-size:2rem;
    color:var(--ink);
  }
  .price-card .price-value del .woocommerce-Price-amount{
    font-size:1.1rem;
    color:var(--ink-muted);
    opacity:0.7;
  }
  .price-card .price-value ins{text-decoration:none;}
  .price-card form.cart{
    margin:0 0 14px !important;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    align-items:stretch;
  }
  .price-card form.cart .quantity{
    margin:0 !important;
    flex:none;
  }
  .price-card form.cart .quantity .qty{
    width:72px;
    height:52px;
    text-align:center;
    border:1.5px solid var(--line-light) !important;
    border-radius:2px;
    background:var(--paper) !important;
    color:var(--ink) !important;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    -moz-appearance:textfield;
  }
  .price-card form.cart .single_add_to_cart_button{
    font-family:'Barlow Condensed',sans-serif !important;
    font-weight:700 !important;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.92rem !important;
    line-height:1.2;
    padding:15px 28px !important;
    height:52px;
    border:none !important;
    border-radius:0 !important;
    cursor:pointer;
    background:var(--accent) !important;
    color:var(--accent-ink) !important;
    clip-path: polygon(0 0, 100% 0, 100% 78%, 94% 100%, 0 100%);
    flex:1 1 auto;
    min-width:180px;
    box-shadow:none !important;
    text-decoration:none !important;
  }
  .price-card form.cart .single_add_to_cart_button:hover,
  .price-card form.cart .single_add_to_cart_button:focus{
    background:var(--accent-deep) !important;
    color:var(--accent-ink) !important;
  }
  .price-card p.stock{
    font-family:'Barlow Condensed',sans-serif;
    font-size:0.85rem;
    color:var(--ink-muted);
    margin:0 0 10px;
    width:100%;
  }
  /* .btn-ghost elsewhere sits on dark backgrounds (hero, cta-strip) where
     var(--text) (near-white) reads fine; both of these sit on light paper
     backgrounds instead (.activity-detail text column, and the price-card,
     wherever it lives - route pages and the product page's top grid alike),
     so they need dark text/border instead. */
  .activity-detail .btn-ghost,
  .price-card .btn-ghost{
    border:1.5px solid var(--line-light);
    color:var(--ink);
  }
  .activity-detail .btn-ghost:hover,
  .price-card .btn-ghost:hover{
    border-color:var(--accent-deep);
    color:var(--accent-deep);
  }
  .woocommerce-product-short-description{
    color:var(--ink-muted);
    line-height:1.7;
  }
  .woocommerce-product-short-description p{margin-bottom:16px;}
  /* Any text before the first "✦ HEADING" line (intro/tagline) stays as a
     plain full-width paragraph, not boxed. */
  .woocommerce-product-short-description > p{max-width:70ch;}
  /* mockup-site.js groups each "✦ HEADING" paragraph together with the
     paragraphs that follow it (until the next heading) into a .desc-card, all
     inside .desc-grid - a responsive grid of boxed sections (like the
     colombia.travel destination cards) instead of one long linear column, so
     the description fills the available width instead of leaving space next
     to it unused. */
  .desc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:20px;
    margin-top:8px;
  }
  .desc-card{
    background:var(--paper-2);
    border:1px solid var(--line-light);
    border-radius:6px;
    padding:28px clamp(18px,3vw,32px);
  }
  .desc-card p{margin-bottom:14px;}
  .desc-card p:last-child{margin-bottom:0;}
  .desc-card .desc-heading{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:1.05rem;
    color:var(--accent-deep);
    margin-top:0;
    margin-bottom:14px;
  }

  /* ---------- PRODUCT TITLE BAR + GALLERY (MercadoLibre-style layout) ---------- */
  .product-title-bar{
    background:var(--surface);
    padding-block:26px;
    border-bottom:1px solid var(--line);
  }
  .product-title-bar .card-tag{position:static;display:inline-flex;margin-bottom:10px;}
  .product-title-bar h1{
    font-family:'Anton',sans-serif;
    font-size:clamp(1.6rem,3.6vw,2.4rem);
    text-transform:uppercase;
    color:var(--text);
    line-height:1.05;
  }
  .product-main{
    background-color:var(--paper);
    padding-block:40px 56px;
  }
  .product-main-grid{
    display:grid;
    grid-template-columns:1.3fr 0.9fr;
    gap:40px;
    align-items:start;
  }
  /* min-width:0 is the fix for the price card getting pushed off-screen:
     without it, a grid item won't shrink below the intrinsic width of its
     content (here, a horizontally-scrolling thumbnail row), so it blows out
     past its 1.3fr share and shoves the price column out with it. */
  .product-gallery{min-width:0;}
  /* The description section (.activity-detail below) is intentionally its
     own full-width block, separate from this gallery/price grid - the price
     card stays fixed next to the photos, it doesn't follow the description
     down the page. */
  .activity-detail .woocommerce-product-short-description{
    max-width:none;
  }
  .product-gallery-main{
    aspect-ratio:4/3;
    background:var(--paper-2);
    border:1px solid var(--line-light);
    border-radius:4px;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .product-gallery-main img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .product-gallery-empty{
    color:var(--ink-muted);
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-size:0.9rem;
  }
  .product-gallery-thumbs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    margin-top:12px;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .pgallery-thumb{
    flex:0 0 auto;
    width:68px;height:68px;
    padding:0;
    border-radius:3px;
    overflow:hidden;
    border:2px solid transparent;
    background:var(--paper-2);
    cursor:pointer;
    opacity:0.7;
    transition:opacity .15s ease, border-color .15s ease;
  }
  .pgallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .pgallery-thumb:hover{opacity:1;}
  .pgallery-thumb.is-active{opacity:1;border-color:var(--accent-deep);}
  .product-price-col{min-width:0;}
  @media (min-width:761px){
    .product-price-col{position:sticky;top:100px;}
  }
  @media (max-width:760px){
    .product-main-grid{grid-template-columns:1fr;gap:24px;}
  }
  .woocommerce-error, .woocommerce-message, .woocommerce-info{
    list-style:none;
    background:var(--paper-2);
    border-left:3px solid var(--accent);
    padding:14px 18px;
    margin:0 0 24px;
    font-family:'Barlow',sans-serif;
    font-size:0.92rem;
    color:var(--ink);
  }