/* ══════════════════════════════════════════════════════════════════════════
   TRILHAS DO MAR · folha de estilo única
   Tudo em tokens. Não escreva cor nem medida solta no corpo do arquivo.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* marca: o verde vivo da logo */
  --lime:        #5fb733;
  --lime-strong: #6ecb3c;              /* o verde no toque, um passo mais claro */
  --lime-deep:   #3d7a1c;              /* texto sobre fundo claro: 5:1 */
  --lime-ink:    #07230a;              /* texto sobre o verde: 6.6:1 */
  --lime-veil:   rgba(95,183,51,.16);
  --lime-line:   rgba(95,183,51,.40);

  /* mar */
  --abyss:  #04161b;
  --deep:   #072830;
  --teal:   #0e3c45;
  --teal-2: #14555f;

  /* claro */
  --foam: #f7f9f5;
  --sand: #ece7dc;
  --card: #ffffff;

  /* tinta */
  --ink:      #08171a;
  --ink-soft: #2c4045;
  --muted:    #5e7377;
  --on-dark:      #eef4f1;
  --on-dark-soft: #a9c0c3;

  /* linhas */
  --line-dark:  rgba(255,255,255,.13);
  --line-light: rgba(8,23,26,.11);

  /* raio contido, sem bolha */
  --r-1: 8px;  --r-2: 12px;  --r-3: 18px;  --r-4: 26px;  --r-pill: 999px;

  /* sombra sóbria, sem glow */
  --sh-1: 0 1px 2px rgba(6,26,30,.06), 0 10px 26px -14px rgba(6,26,30,.20);
  --sh-2: 0 2px 5px rgba(6,26,30,.07), 0 28px 56px -28px rgba(6,26,30,.32);
  --sh-lift: 0 3px 8px rgba(6,26,30,.09), 0 40px 70px -34px rgba(6,26,30,.40);

  /* tipografia */
  --ff-display: "Bricolage Grotesque", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.09rem, .98rem + .5vw, 1.32rem);
  --fs-h3:      clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 2.6vw, 3.9rem);
  --fs-h1:      clamp(2.6rem, min(1.7rem + 4.4vw, 9.2vh), 5.6rem);

  /* ritmo */
  --gap:   clamp(1rem, .7rem + 1vw, 1.6rem);
  --sec-y: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --wrap:  1240px;

  /* movimento */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;  --t: .35s;  --t-slow: .7s;
  --header-h: 74px;
  --wave-h: clamp(76px, 9vw, 150px);
}

/* ─── RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); }
body{
  font-family:var(--ff-text); font-size:var(--fs-body); line-height:1.62;
  color:var(--ink); background:var(--foam);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--ff-display); font-weight:800; line-height:1.02; letter-spacing:-.025em; }
em{ font-style:normal; color:var(--lime-deep); }
ul,ol{ list-style:none; padding:0; }
::selection{ background:var(--lime); color:var(--lime-ink); }

:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; border-radius:var(--r-1); }

.skip-link{
  position:fixed; left:12px; top:-100px; z-index:200;
  background:var(--lime); color:var(--lime-ink); padding:.7rem 1.1rem;
  border-radius:var(--r-1); font-weight:600; transition:top var(--t-fast);
}
.skip-link:focus{ top:12px; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

/* ─── ANIMAÇÃO DE ENTRADA ──────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.reveal.in{ opacity:1; transform:none; }

/* ─── BARRA DE PROGRESSO ───────────────────────────────────────────────── */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  background:transparent; pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:var(--lime); box-shadow:0 0 12px var(--lime-veil);
  transition:width .1s linear;
}

/* ─── BOTÕES ───────────────────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--lime); --btn-fg:var(--lime-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.5rem;
  font-family:var(--ff-display); font-weight:600; font-size:1rem; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-pill); cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t-fast);
  white-space:nowrap;
}
.btn .ico{ width:20px; height:20px; fill:currentColor; flex:none; }
.btn::after{                                  /* brilho de varredura no hover */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .75s var(--ease-out);
}
.btn:hover::after{ transform:translateX(120%); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn-primary{ background:var(--lime); color:var(--lime-ink); box-shadow:0 2px 10px rgba(4,22,27,.28); }
.btn-primary:hover{ background:var(--lime-strong); }

.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-light); }
.btn-outline:hover{ background:var(--ink); color:var(--foam); border-color:var(--ink); }

.btn-ghost{ background:rgba(255,255,255,.07); color:var(--on-dark); border-color:var(--line-dark); backdrop-filter:blur(8px); }
.btn-ghost:hover{ background:rgba(255,255,255,.14); }

.btn-sm{ min-height:42px; padding:.55rem 1.1rem; font-size:.94rem; }
.btn-lg{ min-height:56px; padding:1rem 1.9rem; font-size:1.08rem; }
.btn-xl{ min-height:66px; padding:1.15rem 2.5rem; font-size:1.22rem; }

/* ─── CABEÇALHOS DE SEÇÃO ──────────────────────────────────────────────── */

.sec-head{ max-width:62ch; margin-inline:auto; text-align:center; margin-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem); }
.sec-head h2{ font-size:var(--fs-h2); margin:0; }
.sec-head .sec-sub{ margin-top:1.1rem; color:var(--muted); font-size:var(--fs-lead); }
.sec-head-left{ margin-inline:0; text-align:left; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ═════════════════════════════════════════════════════════════════════════ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:110;
  transition:background var(--t) var(--ease), box-shadow var(--t), transform var(--t) var(--ease);
}
.header-in{
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  height:var(--header-h);
}
.site-header.stuck{
  background:rgba(4,22,27,.82); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line-dark);
}
.site-header.hide{ transform:translateY(-100%); }
.site-header.menu-aberto{ background:var(--abyss); backdrop-filter:none; border-bottom:1px solid var(--line-dark); transform:none !important; }

.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.brand-mark{ width:auto; height:46px; flex:none; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--ff-display); font-weight:800; font-size:1.12rem; letter-spacing:-.03em; color:var(--on-dark); }
.brand-text small{ font-size:.72rem; color:var(--on-dark-soft); letter-spacing:.04em; }

.nav{ display:flex; gap:clamp(1rem,2vw,2rem); }
.nav a{
  position:relative; font-size:.97rem; font-weight:500; color:var(--on-dark-soft);
  padding:.35rem 0; transition:color var(--t-fast);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--lime); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t) var(--ease);
}
.nav a:hover,.nav a.atual{ color:var(--on-dark); }
.nav a.atual::after{ transform:scaleX(1); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav-toggle{
  display:none; width:44px; height:44px; background:transparent;
  border:1px solid var(--line-dark); border-radius:var(--r-1);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--on-dark); border-radius:2px; transition:transform var(--t) var(--ease), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.menu-mobile{
  display:none; flex-direction:column; gap:.25rem;
  position:fixed; inset:var(--header-h) 0 0 0; z-index:109;
  padding:1.25rem 1.5rem calc(1.75rem + env(safe-area-inset-bottom));
  background:var(--abyss); overflow-y:auto; overscroll-behavior:contain;
  animation:menuEntra .22s var(--ease-out);
}
@keyframes menuEntra{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.menu-mobile[hidden]{ display:none; }
.menu-mobile a:not(.btn){ color:var(--on-dark); padding:1rem .25rem; font-size:1.1rem; border-bottom:1px solid var(--line-dark); }
.menu-mobile .btn{ margin-top:1.4rem; justify-content:center; }

/* ══════════════════════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 2rem) 0 calc(var(--wave-h) + clamp(1.6rem,1rem + 2.4vw,3.2rem));
  background:var(--abyss); color:var(--on-dark); overflow:hidden;
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-photo{
  position:absolute; inset:-8% 0 0; background-size:cover; background-position:center 46%;
  will-change:transform;
}
/* placeholder de água enquanto não há foto */
.hero-photo:not(.has-photo){
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(20,85,95,.85), transparent 62%),
    radial-gradient(90% 60% at 18% 8%, rgba(95,183,51,.10), transparent 60%),
    linear-gradient(180deg, #0a3038 0%, #062229 55%, #04161b 100%);
}
.hero-photo:not(.has-photo)::after{
  content:""; position:absolute; inset:0; opacity:.45;
  background:repeating-linear-gradient(103deg, rgba(255,255,255,.045) 0 2px, transparent 2px 9px);
  mask-image:linear-gradient(180deg, transparent 8%, #000 55%, transparent 96%);
  animation:drift 22s linear infinite;
}
@keyframes drift{ to{ background-position:520px 0; } }

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,22,27,.30) 0%, rgba(4,22,27,.02) 26%,
                            rgba(4,22,27,.58) 62%, rgba(4,22,27,.88) 96%),
    linear-gradient(96deg, rgba(4,22,27,.80) 0%, rgba(4,22,27,.30) 48%, transparent 78%);
}


/* ─── ONDAS DO MAR ──────────────────────────────────────────────────────
   Três camadas deslizando em velocidades e sentidos diferentes, cada uma
   com período que divide o deslocamento, então o laço fecha sem salto visível.
   A camada da frente é opaca e faz a emenda com a seção seguinte.        */
.hero-waves,.cta-waves{
  position:absolute; left:0; right:0; bottom:-1px; height:var(--wave-h);
  overflow:hidden; pointer-events:none;
}
.cta-waves{ bottom:auto; top:-1px; transform:scaleY(-1); }
.wv{ position:absolute; left:0; bottom:0; width:200%; max-width:none; height:100%; overflow:visible; }
.wv path{ animation:marola 7.5s var(--ease) infinite alternate; }
.wv-c{ fill:rgba(247,249,245,.12); animation:mare 27s linear infinite; }
.wv-a{ fill:rgba(247,249,245,.26); animation:mare 17s linear infinite reverse; }
.wv-b{ fill:var(--foam);           animation:mare 11s linear infinite; }
.cta-waves .wv-a{ fill:rgba(236,231,220,.34); }
.cta-waves .wv-b{ fill:var(--sand); }
@keyframes mare{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marola{ from{ transform:translateY(3px); } to{ transform:translateY(-4px); } }

.hero-in{ position:relative; }
.hero-title{ font-size:var(--fs-h1); margin:1.1rem 0 0; max-width:16ch;
  text-shadow:0 2px 28px rgba(4,22,27,.55), 0 1px 4px rgba(4,22,27,.45); }
.hero-title .line{ display:block; overflow:hidden; }
.hero-title em{
  color:var(--lime);
  background-image:linear-gradient(rgba(95,183,51,.34), rgba(95,183,51,.34));
  background-repeat:no-repeat; background-position:0 94%; background-size:0% .085em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  animation:underline 1.1s .9s var(--ease-out) forwards;
}
@keyframes underline{ to{ background-size:100% .085em; } }

.hero-sub{
  margin-top:1.3rem; max-width:56ch; font-size:var(--fs-lead);
  text-shadow:0 1px 16px rgba(4,22,27,.7), 0 1px 3px rgba(4,22,27,.5);
  color:var(--on-dark-soft); --d:120ms;
}
.hero-sub strong{ color:var(--on-dark); font-weight:600; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem; --d:220ms; }



/* ══════════════════════════════════════════════════════════════════════════
   TICKER
   ═════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PASSEIOS + MAPA
   ═════════════════════════════════════════════════════════════════════════ */
.tours{ padding:var(--sec-y) 0; background:var(--foam); position:relative; }
.tours::before{                                  /* textura de areia bem sutil */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(60% 40% at 50% 0%, rgba(14,60,69,.05), transparent 70%);
}
.tours-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(1.5rem,3vw,3.2rem); align-items:start; position:relative;
}
.tours-list{ display:flex; flex-direction:column; gap:var(--gap); }

/* ─── card de passeio ──────────────────────────────────────────────────── */
.tour{
  position:relative; background:var(--card); border:1px solid var(--line-light);
  border-radius:var(--r-4); overflow:hidden; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t);
  transform-style:preserve-3d;
}
.tour::before{                                   /* filete limão que cresce na seleção */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:3;
  background:var(--lime); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t) var(--ease-out);
}
.tour:hover,.tour:focus-visible{ transform:translateY(-4px); box-shadow:var(--sh-lift); border-color:var(--lime-line); }
.tour.is-active{ box-shadow:var(--sh-lift); border-color:var(--lime-line); }
.tour:not(.is-active){ opacity:.72; }
.tour:not(.is-active):hover{ opacity:1; }
.tour:hover::before,.tour:focus-visible::before,.tour.is-active::before{ transform:scaleY(1); }

.tour-flag{
  position:absolute; top:1rem; left:1rem; z-index:4;
  background:var(--lime); color:var(--lime-ink);
  font-family:var(--ff-display); font-size:.74rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:var(--r-pill);
}
.tour-flag.flag-eco{ background:var(--deep); color:var(--lime); }

.tour-photo{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  position:relative; overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out);
}
.tour:hover .tour-photo{ transform:scale(1.035); }
.tour-photo:not(.has-photo){
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(20,85,95,.9), transparent 65%),
    linear-gradient(160deg, #0d3a44 0%, #08262d 60%, #061e24 100%);
}
.tour-photo:not(.has-photo)::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,.05) 0 2px, transparent 2px 10px);
}
.ph-tag{
  position:absolute; inset:auto .8rem .8rem auto; z-index:2;
  font-family:var(--ff-text); font-size:.7rem; letter-spacing:.06em;
  color:var(--on-dark-soft); background:rgba(4,22,27,.6);
  border:1px solid var(--line-dark); border-radius:var(--r-1);
  padding:.28rem .55rem; backdrop-filter:blur(6px);
}

.tour-body{ padding:clamp(1.3rem,1rem + 1vw,2rem); display:flex; flex-direction:column; gap:.8rem; }
.tour-route{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--ff-display); font-size:.82rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
}
.tour-route b{ font-weight:600; color:var(--ink-soft); }
.tour-route .arw{ width:24px; height:8px; fill:none; stroke:var(--lime-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tour h3{ font-size:var(--fs-h3); }
.tour-body > p{ color:var(--muted); }
.tour-body > p b{ color:var(--ink-soft); font-weight:600; }

.tour-facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.tour-facts li{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; color:var(--ink-soft);
  background:var(--foam); border:1px solid var(--line-light);
  border-radius:var(--r-pill); padding:.35rem .8rem;
}
.tour-facts li.fato-alerta{ background:#fff6e0; border-color:#f0dca8; color:#7a5400; }
.tour-facts li.fato-alerta svg{ stroke:#b07d08; }
.tour-facts svg{ width:15px; height:15px; fill:none; stroke:var(--lime-deep); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }

.tour-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:.6rem; padding-top:1.1rem; border-top:1px solid var(--line-light);
}
.price{ display:flex; flex-direction:column; gap:.1rem; font-size:.82rem; color:var(--muted); line-height:1.3; }
.price .p-main{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.price .p-alt{ font-size:.86rem; color:var(--muted); }
.price .p-alt b{ font-family:var(--ff-text); font-size:.92rem; font-weight:600; letter-spacing:0; color:var(--ink); }
.price .p-main b{ font-family:var(--ff-display); font-size:1.75rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; }
.price small{ font-size:.78rem; color:var(--muted); }
.price.is-open{ font-family:var(--ff-display); font-size:1.15rem; font-weight:600; color:var(--ink); }

.tour.is-hero .tour-photo{ aspect-ratio:16/9; }
.tour.is-hero h3{ font-size:clamp(1.55rem,1.25rem + 1.1vw,2.1rem); }
.tour.is-hero .price .p-main b{ font-size:2.1rem; }

/* ─── painel do mapa ───────────────────────────────────────────────────── */
.map-panel{ position:sticky; top:calc(var(--header-h) + 18px); }
.map-card{
  background:var(--deep); border:1px solid var(--line-dark); border-radius:var(--r-4);
  overflow:hidden; box-shadow:var(--sh-2); color:var(--on-dark);
}
.map-head{ padding:1.15rem 1.35rem .9rem; border-bottom:1px solid var(--line-dark); }
.map-title{
  font-family:var(--ff-display); font-weight:800; font-size:1.18rem;
  letter-spacing:-.02em; margin-top:0; color:var(--on-dark);
  transition:opacity var(--t-fast);
}
.map-title.swap{ opacity:0; }
.map-facts{ display:flex; gap:1.4rem; margin-top:.85rem; flex-wrap:wrap; transition:opacity var(--t-fast); }
.map-facts.swap{ opacity:0; }
.map-facts li{ display:flex; flex-direction:column; line-height:1.15; }
.map-facts b{ font-family:var(--ff-display); font-size:1.28rem; font-weight:800; letter-spacing:-.03em; color:var(--lime); }
.map-facts span{ font-size:.76rem; color:var(--on-dark-soft); margin-top:.2rem; }

.map{ width:100%; height:auto; max-height:min(66vh,640px); display:block; margin-inline:auto; }
.map-grid path{ stroke:rgba(255,255,255,.05); stroke-width:1; fill:none; }
.land{ fill:#16352a; }
.land-line{ fill:none; stroke:rgba(95,183,51,.34); stroke-width:1.4; stroke-linejoin:round; }
.land{ stroke:rgba(95,183,51,.40); stroke-width:1.2; stroke-linejoin:round; }
.isle path{ fill:#16352a; stroke:rgba(95,183,51,.22); stroke-width:1.2; }
.isle{ transition:opacity var(--t); }

.route{
  fill:none; stroke:rgba(95,183,51,.22); stroke-width:2;
  stroke-dasharray:5 7; stroke-linecap:round;
  transition:stroke var(--t), stroke-width var(--t), opacity var(--t);
}
.route.on{
  stroke:var(--lime); stroke-width:3.2; stroke-dasharray:none;
  filter:drop-shadow(0 0 6px rgba(95,183,51,.35));
}
.route.draw{ animation:drawRoute 1.35s var(--ease-out) forwards; }
@keyframes drawRoute{
  from{ stroke-dashoffset:var(--len); stroke-dasharray:var(--len); }
  to{   stroke-dashoffset:0;          stroke-dasharray:var(--len); }
}

.boat{ fill:var(--lime); opacity:0; transition:opacity var(--t); }
.boat.on{ opacity:1; }

.pin circle{ fill:var(--lime); stroke:var(--deep); stroke-width:2.5; }
.pin .halo{ fill:none; stroke:var(--lime); stroke-width:1.5; opacity:0; }
.pin text{
  font-family:var(--ff-text); font-size:13px; font-weight:500;
  fill:var(--on-dark-soft); paint-order:stroke; stroke:rgba(4,22,27,.85); stroke-width:3.5;
  transition:fill var(--t);
}
.pin.on circle{ fill:var(--lime); }
.pin.on text{ fill:var(--on-dark); font-weight:600; }
.pin.on .halo{ opacity:1; animation:ping 1.9s var(--ease) infinite; }
@keyframes ping{ 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(3.2); opacity:0; } }
.pin:not(.on) circle:first-of-type{ fill:rgba(95,183,51,.45); }

.map-scale path,.map-north path{ fill:none; stroke:var(--on-dark-soft); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.65; }
.map-scale text,.map-north text{ font-family:var(--ff-text); font-size:12px; fill:var(--on-dark-soft); opacity:.8; }
.map-mar{
  font-family:var(--ff-text); font-size:13px; font-weight:500;
  letter-spacing:.42em; fill:var(--on-dark-soft); opacity:.28;
  text-transform:uppercase; pointer-events:none;
}
.map-north text{ font-family:var(--ff-display); font-weight:800; font-size:13px; }

.map-note{ padding:.9rem 1.35rem 1.2rem; font-size:.78rem; color:var(--on-dark-soft); border-top:1px solid var(--line-dark); }
.map-note a{ color:var(--on-dark-soft); text-decoration:underline; text-underline-offset:2px; }
.map-note a:hover{ color:var(--lime); }

/* ══════════════════════════════════════════════════════════════════════════
   COOPERATIVA
   ═════════════════════════════════════════════════════════════════════════ */
.coop{ position:relative; padding:var(--sec-y) 0; background:var(--abyss); color:var(--on-dark); overflow:hidden; }
.coop-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 88% 12%, rgba(20,85,95,.55), transparent 65%),
    radial-gradient(50% 45% at 6% 88%, rgba(95,183,51,.07), transparent 70%);
}
.coop-in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.coop h2{ font-size:var(--fs-h2); margin:0 0 1.4rem; max-width:14ch; }
.coop h2 em{ color:var(--lime); }
.coop .lead{ font-size:var(--fs-lead); color:var(--on-dark); }
.coop-copy > p{ color:var(--on-dark-soft); margin-bottom:1rem; max-width:56ch; }

.coop-points{ display:grid; gap:1.1rem; margin-top:2.2rem; }
.coop-points li{ display:flex; gap:1rem; align-items:flex-start; }
.coop-points svg{
  width:40px; height:40px; flex:none; padding:9px;
  fill:none; stroke:var(--lime); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  background:var(--lime-veil); border:1px solid var(--lime-line); border-radius:var(--r-2);
}
.coop-points b{ display:block; font-family:var(--ff-display); font-size:1.06rem; font-weight:600; letter-spacing:-.015em; }
.coop-points span{ display:block; color:var(--on-dark-soft); font-size:.95rem; margin-top:.18rem; }

.coop-media{ position:relative; }
.coop-photo{
  aspect-ratio:4/3; border-radius:var(--r-4); overflow:hidden;
  background-size:cover; background-position:center;
  border:0; outline:0; position:relative;
}
.coop-photo:not(.has-photo){ border:1px solid var(--line-dark); }
.coop-photo:not(.has-photo){
  background:
    radial-gradient(80% 60% at 40% 25%, rgba(20,85,95,.85), transparent 70%),
    linear-gradient(170deg, #0e3c45 0%, #072830 65%, #04161b 100%);
}
.coop-photo:not(.has-photo)::after{
  content:""; position:absolute; inset:0; opacity:.4;
  background:repeating-linear-gradient(98deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px);
}
.coop-cap{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  background:rgba(4,22,27,.78); backdrop-filter:blur(12px);
  border:1px solid var(--line-dark); border-radius:var(--r-2);
  padding:.8rem 1rem; display:flex; flex-direction:column;
}
.coop-cap b{ font-family:var(--ff-display); font-size:.98rem; font-weight:600; }
.coop-cap span{ font-size:.8rem; color:var(--on-dark-soft); }

/* ══════════════════════════════════════════════════════════════════════════
   DEPOIMENTOS
   ═════════════════════════════════════════════════════════════════════════ */
.reviews{ padding:var(--sec-y) 0; background:var(--sand); overflow:hidden; }
.rating{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; }
.rating .stars{ color:var(--lime-deep); font-size:1.2rem; letter-spacing:.12em; }
.rating b{ font-family:var(--ff-display); font-size:1.5rem; font-weight:800; letter-spacing:-.03em; }
.rating small{ color:var(--muted); font-size:.88rem; }

.reviews-rail{
  display:flex; gap:var(--gap); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:max(1.25rem,(100vw - var(--wrap))/2);
  padding:.5rem max(1.25rem,(100vw - var(--wrap))/2) 1.5rem;
  scrollbar-width:none;
}
.reviews-rail::-webkit-scrollbar{ display:none; }
.reviews-track{ display:flex; gap:var(--gap); }

.review{
  scroll-snap-align:start; flex:0 0 min(400px, 82vw);
  background:var(--card); border:1px solid var(--line-light); border-radius:var(--r-4);
  padding:clamp(1.4rem,1.1rem + .8vw,2rem); display:flex; flex-direction:column; gap:.9rem;
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.review:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.review .quote{ width:30px; height:30px; fill:var(--lime); opacity:.85; }
.review p{ color:var(--ink-soft); font-size:1.03rem; flex:1; }
.review .r-stars{ color:var(--lime-deep); letter-spacing:.1em; font-size:.95rem; }
.review-foot{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding-top:.9rem; border-top:1px solid var(--line-light); }
.review-av{
  width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden;
  display:grid; place-items:center; background:var(--deep);
  background-size:cover; background-position:center;
}

.review-who{ display:flex; flex-direction:column; line-height:1.3; flex:1 1 0; min-width:0; }
.review-who b{ font-size:.97rem; font-weight:600; }
.review-who span{ font-size:.79rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }




.reviews-foot{ display:flex; justify-content:center; margin-top:.5rem; }
.rail-ctrl{ display:flex; gap:.6rem; }
.rail-btn{
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line-light); display:grid; place-items:center;
  transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.rail-btn svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rail-btn:hover{ background:var(--ink); border-color:var(--ink); transform:translateY(-2px); }
.rail-btn:hover svg{ stroke:var(--foam); }
.rail-btn[disabled]{ opacity:.35; cursor:not-allowed; transform:none; }

/* ══════════════════════════════════════════════════════════════════════════
   COMO FUNCIONA
   ═════════════════════════════════════════════════════════════════════════ */
.how{ padding:var(--sec-y) 0; background:var(--foam); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); counter-reset:s; }
.steps li{
  position:relative; padding:clamp(1.6rem,1.2rem + 1vw,2.4rem);
  background:var(--card); border:1px solid var(--line-light); border-radius:var(--r-4);
  box-shadow:var(--sh-1); overflow:hidden;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.steps li:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.steps li::after{                                 /* linha que liga os passos */
  content:""; position:absolute; top:2.9rem; right:-50%; width:100%; height:1px;
  background:repeating-linear-gradient(90deg, var(--lime-line) 0 6px, transparent 6px 12px);
}
.steps li:last-child::after{ display:none; }
.step-n{
  display:grid; place-items:center; width:54px; height:54px; border-radius:var(--r-2);
  background:var(--lime); color:var(--lime-ink);
  font-family:var(--ff-display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em;
  margin-bottom:1.1rem; position:relative; z-index:1;
}
.steps h3{ font-size:1.22rem; margin-bottom:.5rem; }
.steps p{ color:var(--muted); font-size:.98rem; }

.how-note{
  display:flex; align-items:flex-start; gap:.8rem; margin-top:var(--gap);
  padding:1.1rem 1.3rem; background:var(--lime-veil);
  border:1px solid var(--lime-line); border-radius:var(--r-3);
  color:var(--ink-soft); font-size:.97rem;
}
.how-note svg{ width:22px; height:22px; flex:none; fill:none; stroke:var(--lime-deep); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ══════════════════════════════════════════════════════════════════════════
   FAQ
   ═════════════════════════════════════════════════════════════════════════ */
.faq{ padding:var(--sec-y) 0; background:var(--sand); }
.faq-in{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.faq .sec-head{ position:sticky; top:calc(var(--header-h) + 24px); margin-bottom:0; }
.faq .sec-head .btn{ margin-top:1.6rem; }

.faq-list{ display:flex; flex-direction:column; }
.faq-list details{ border-bottom:1px solid var(--line-light); }
.faq-list summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem .2rem; cursor:pointer; list-style:none;
  font-family:var(--ff-display); font-size:1.09rem; font-weight:600; letter-spacing:-.015em;
  transition:color var(--t-fast);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:""; width:13px; height:13px; flex:none;
  border-right:2px solid var(--lime-deep); border-bottom:2px solid var(--lime-deep);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform var(--t) var(--ease);
}
.faq-list details[open] summary{ color:var(--lime-deep); }
.faq-list details[open] summary::after{ transform:rotate(-135deg) translate(-4px,-4px); }
.faq-list details > div{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t) var(--ease-out);
}
.faq-list details[open] > div{ grid-template-rows:1fr; }
.faq-list details > div > p{ overflow:hidden; color:var(--muted); padding-right:2.5rem; }
.faq-list details[open] > div > p{ padding-bottom:1.3rem; }

/* ══════════════════════════════════════════════════════════════════════════
   CTA FINAL
   ═════════════════════════════════════════════════════════════════════════ */
.cta{ position:relative; padding:calc(var(--sec-y) + 3rem) 0 var(--sec-y); background:var(--abyss); color:var(--on-dark); overflow:hidden; text-align:center; }
.cta-bg{ position:absolute; inset:0; }
.cta-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(20,85,95,.6), transparent 70%),
    radial-gradient(40% 40% at 50% 20%, rgba(95,183,51,.09), transparent 70%);
}
.cta-in{ position:relative; display:flex; flex-direction:column; align-items:center; }
.cta h2{ font-size:var(--fs-h2); margin:0 0 1.2rem; max-width:18ch; }
.cta h2 em{ color:var(--lime); white-space:nowrap; }
.cta .lead{ font-size:var(--fs-lead); color:var(--on-dark-soft); max-width:48ch; }
.cta .btn-xl{ margin-top:2.4rem; }
.cta-alt{ margin-top:1.6rem; font-size:.94rem; color:var(--on-dark-soft); }
.cta-alt a{ color:var(--lime); border-bottom:1px solid var(--lime-line); }
.cta-alt a:hover{ border-bottom-color:var(--lime); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═════════════════════════════════════════════════════════════════════════ */
.site-footer{ background:var(--ink); color:var(--on-dark); padding:clamp(3rem,2rem + 4vw,5rem) 0 2rem; }
.footer-in{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,4vw,4rem); }
.footer-brand p{ color:var(--on-dark-soft); font-size:.94rem; margin-top:1.1rem; max-width:38ch; }
.site-footer h3{ font-family:var(--ff-display); font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); margin-bottom:1.1rem; }
.footer-nav{ display:flex; flex-direction:column; gap:.6rem; }
.footer-nav a{ color:var(--on-dark-soft); font-size:.94rem; transition:color var(--t-fast), transform var(--t-fast); }
.footer-nav a:hover{ color:var(--lime); transform:translateX(3px); }

.f-link{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--ff-display); font-weight:600; font-size:1.12rem; color:var(--lime); }
.f-link svg{ width:20px; height:20px; fill:currentColor; }
.f-link:hover{ text-decoration:underline; text-underline-offset:4px; }
.f-addr{ color:var(--on-dark-soft); font-size:.9rem; margin-top:.9rem; }

.socials{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.socials a{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--line-dark); border-radius:var(--r-pill);
  padding:.5rem .9rem; font-size:.87rem; color:var(--on-dark-soft);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.socials svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.socials a:hover{ background:var(--lime); color:var(--lime-ink); border-color:var(--lime); transform:translateY(-2px); }

.f-credit{ font-size:.76rem; color:var(--on-dark-soft); opacity:.75; margin-top:.4rem; }
.footer-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,2rem + 2vw,4rem); padding-top:1.6rem;
  border-top:1px solid var(--line-dark); font-size:.83rem; color:var(--on-dark-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   WHATSAPP FLUTUANTE
   ═════════════════════════════════════════════════════════════════════════ */
.wa-float{
  position:fixed; right:clamp(1rem,2vw,1.8rem); bottom:clamp(1rem,2vw,1.8rem); z-index:115;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--lime); color:var(--lime-ink);
  font-family:var(--ff-display); font-weight:600; font-size:1rem;
  padding:.9rem 1.3rem; border-radius:var(--r-pill);
  box-shadow:var(--sh-lift);
  opacity:0; transform:translateY(18px) scale(.94); pointer-events:none;
  transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), background var(--t-fast);
}
.wa-float.show{ opacity:1; transform:none; pointer-events:auto; }
.wa-float:hover{ background:var(--lime-strong); }
.wa-float svg{ width:24px; height:24px; fill:currentColor; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--lime); animation:halo 2.8s var(--ease) infinite;
}
@keyframes halo{ 0%{ transform:scale(1); opacity:.7; } 70%,100%{ transform:scale(1.28); opacity:0; } }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVO · três formas do mesmo layout
   Presença estrutural em px real (imune a zoom/fonte grande).
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .tours-grid{ grid-template-columns:1fr; }
  .map-panel{ position:static; order:-1; }
  .map-card{ max-width:640px; margin-inline:auto; }
  .map-head,.map-note{ display:none; }        /* os detalhes já estão no card do passeio */
  .map{ max-height:none; }
  /* com o quadro recortado, escala e rosa dos ventos entram junto */
  .map-scale{ transform:translate(78px,-20px); }
  .map-north{ transform:translate(-26px,48px); }
  .route{ stroke:rgba(95,183,51,.42); stroke-width:2.6; }   /* todos os trajetos legíveis */
  .route.on{ stroke-width:3.6; }
  .pin circle{ stroke-width:2.8; }
  .pin text{ font-size:14px; stroke-width:4; }
  .tour:not(.is-active){ opacity:1; }          /* sem mapa acompanhando, não faz sentido apagar */
  .coop-in{ grid-template-columns:1fr; }
  .coop-media{ max-width:560px; }
  .faq-in{ grid-template-columns:1fr; }
  .faq .sec-head{ position:static; }
  .footer-in{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:1000px){
  .nav{ display:none; }
  .nav-toggle{ display:flex; }
  .menu-mobile{ display:flex; }
  .steps{ grid-template-columns:1fr; }
  .steps li::after{ display:none; }
}
@media (max-width:760px){
  :root{ --header-h:66px; --fs-h1:clamp(2rem, 9.7vw, 3.2rem); }
  /* na tela estreita o texto ocupa toda a largura e cai sobre a parte clara
     da foto: o véu lateral não serve, precisa escurecer a metade de baixo */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(4,22,27,.22) 0%, rgba(4,22,27,.02) 20%,
      rgba(4,22,27,.56) 34%, rgba(4,22,27,.84) 48%,
      rgba(4,22,27,.92) 68%, rgba(4,22,27,.96) 100%);
  }
  .hero-sub{ color:var(--on-dark); }
  .header-cta{ display:none; }
  .hero{ min-height:92svh; align-items:flex-end; }
  .hero-title{ max-width:none; }
  .hero-cta .btn{ width:100%; }
    .tour-foot{ flex-direction:column; align-items:stretch; }
  .tour-foot .btn{ width:100%; }
  .footer-in{ grid-template-columns:1fr; }
  .wa-float span{ display:none; }
  .wa-float{ padding:1rem; }
  .reviews-foot{ justify-content:center; }
}

/* ─── MOVIMENTO REDUZIDO ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-title em::after{ transform:scaleX(1); }
}

/* ─── IMPRESSÃO ────────────────────────────────────────────────────────── */
@media print{
  .site-header,.wa-float,.scroll-progress,.hero-waves,.cta-waves{ display:none !important; }
  body{ background:#fff; color:#000; }
  .hero,.coop,.cta,.site-footer{ background:#fff !important; color:#000 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A TRAVESSIA · cena animada
   Cada camada desliza em velocidade própria (o que está perto passa mais
   rápido). Todo laço fecha em -50% de um padrão duplicado, então não há
   salto. Nada de vídeo: é SVG e CSS, carrega na hora e acompanha a tela.
   ═════════════════════════════════════════════════════════════════════════ */
.crossing{ position:relative; background:var(--sand); color:var(--on-dark); overflow:hidden; line-height:0; }
.scene{
  position:relative; display:block; width:100%;
  height:clamp(320px, 42vw, 560px);
  overflow:hidden; isolation:isolate; line-height:0;
}
/* o último pixel da cena deixava vazar a cor do mar na emenda com a seção
   seguinte; esta faixa fecha por cima de todas as camadas */
.scene::after{
  content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:5px;
  background:var(--sand); z-index:6; pointer-events:none;
}
.scene .layer{ position:absolute; left:0; bottom:0; width:200%; max-width:none; }
.scene .layer svg{ width:100%; height:100%; display:block; }

/* céu e sol */
.sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg, #06202a 0%, #114b59 30%, #2f7d82 52%, #55a096 68%, #24636b 86%, #103f49 100%);
}
.sun{
  position:absolute; right:14%; top:16%; width:clamp(48px,6vw,86px); aspect-ratio:1;
  border-radius:50%; background:#f7fbe4;
  box-shadow:0 0 70px 26px rgba(247,251,228,.28);
  animation:subir 26s ease-in-out infinite alternate;
}
@keyframes subir{ to{ transform:translateY(-14%); } }

/* camadas de paisagem: quanto mais perto, mais rápido */
.scene .clouds    { height:18%; bottom:auto; top:9%; opacity:.16; animation:desliza 120s linear infinite; }
.scene .hills-far { height:46%; bottom:27%; animation:desliza 68s linear infinite; }
.scene .hills-near{ height:38%; bottom:24%; animation:desliza 44s linear infinite; }
.scene .isles     { height:13%; bottom:24%; animation:desliza 28s linear infinite; }
.clouds ellipse{ fill:#dfeae4; }
.hills-far  path{ fill:#2a6a68; }
.hills-near path{ fill:#123c45; }
.isles      path{ fill:#0a2a30; }
@keyframes desliza{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* mar em três camadas, a da frente na cor da seção seguinte */
.sea{ height:30%; }
.sea svg path{ fill:currentColor; }
.sea-3{ color:#13565f; bottom:10%; height:32%; animation:desliza 19s linear infinite; }
.sea-2{ color:#0b3a45; bottom:5%; height:27%; z-index:2; animation:desliza 13s linear infinite reverse; }
.sea-1{ color:var(--sand); bottom:-2%; height:24%; z-index:3; animation:desliza 9s linear infinite; }

/* o barco fica parado no quadro e balança: quem passa é o mundo */
.boat-wrap{
  position:absolute; left:50%; bottom:14%; z-index:2;
  width:clamp(180px, 23vw, 330px); translate:-50% 0;
  animation:jogar 4.6s ease-in-out infinite alternate;
  transform-origin:50% 90%;
}
@keyframes jogar{
  from{ transform:translateY(0) rotate(-1.8deg); }
  to  { transform:translateY(-6px) rotate(1.8deg); }
}
.boat-side{ width:100%; height:auto; overflow:visible; }
/* cor do bote: laranja como o da foto. Para o cinza, troque .tubo por #98a4a7
   e .tubo-luz por #c3ccce. */
.boat-side .tubo{ fill:none; stroke:#e8702a; stroke-width:18; }
.boat-side .tubo-luz{ fill:none; stroke:#f4a06b; stroke-width:3.5; stroke-linecap:round; opacity:.5; }
.boat-side .casco{ fill:#eef1ea; }
.boat-side .casco-sombra{ fill:#c4cdc2; }
.boat-side .motor{ fill:#18282c; }
.boat-side .cabo{ fill:none; stroke:#f7faf4; stroke-width:1.5; stroke-linecap:round; opacity:.55; }
.wake{
  position:absolute; left:-30%; bottom:4%; width:70%; height:9px;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), transparent 72%);
  filter:blur(1px); animation:rastro 2.1s ease-out infinite;
}
@keyframes rastro{ from{ opacity:.75; transform:scaleX(.6); } to{ opacity:0; transform:scaleX(1.25) translateX(-14%); } }

/* gaivotas cruzando o quadro */
.gull{
  position:absolute; width:clamp(26px,3vw,46px); height:auto; z-index:4;
  fill:none; stroke:#eef5ee; stroke-width:1.8; stroke-linecap:round;
  opacity:.85;
}
.gull path{ animation:asa 1.1s ease-in-out infinite alternate; transform-origin:50% 75%; }
@keyframes asa{ to{ transform:scaleY(.55); } }
.g1{ top:18%; animation:voar 21s linear infinite; }
.g2{ top:30%; animation:voar 28s linear infinite 6s; }
.g3{ top:12%; animation:voar 34s linear infinite 13s; }
@keyframes voar{
  from{ transform:translateX(106vw); } to{ transform:translateX(-14vw); }
}

/* paradas da travessia, logo abaixo da cena */
@media (max-width:760px){
  .scene{ height:clamp(240px, 58vw, 340px); }
}
@media (prefers-reduced-motion:reduce){
  .scene .layer,.boat-wrap,.gull,.wake,.sun,.gull path{ animation:none !important; }
  .wake{ opacity:.4; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GALERIA
   ═════════════════════════════════════════════════════════════════════════ */
.page-galeria{ background:var(--foam); }
.gal-head{
  background:var(--abyss); color:var(--on-dark);
  padding:calc(var(--header-h) + clamp(3.5rem,3rem + 4vw,6rem)) 0 clamp(2.5rem,2rem + 3vw,4rem);
}
.gal-head h1{ font-size:var(--fs-h2); max-width:18ch; }
.gal-head h1 em{ color:var(--lime); }
.gal-head p{ margin-top:1rem; color:var(--on-dark-soft); font-size:var(--fs-lead); max-width:52ch; }

.gal{ padding:clamp(2rem,1.5rem + 3vw,3.5rem) 0 var(--sec-y); }

.gal-filtros{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:clamp(1.4rem,1rem + 1.5vw,2.2rem); }
.gal-filtro{
  min-height:42px; padding:.5rem 1.05rem; cursor:pointer;
  font-family:var(--ff-display); font-weight:600; font-size:.94rem;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line-light); border-radius:var(--r-pill);
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.gal-filtro:hover{ border-color:var(--lime-line); transform:translateY(-2px); }
.gal-filtro.on{ background:var(--ink); color:var(--foam); border-color:var(--ink); }

.gal-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows:220px;
}
.gal-item{
  position:relative; padding:0; cursor:pointer; overflow:hidden;
  border:1px solid transparent; border-radius:var(--r-3); background:var(--deep);
  grid-row:span 1;
  opacity:0; transform:translate3d(0,22px,0);
  transition:opacity .7s var(--ease-out) var(--d,0ms), transform .7s var(--ease-out) var(--d,0ms),
             box-shadow var(--t) var(--ease), border-color var(--t);
}
.gal-item.in{ opacity:1; transform:none; }
.gal-item.alto{ grid-row:span 2; }
.gal-item.largo{ grid-column:span 2; }
.gal-item img,.gal-item video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t-slow) var(--ease-out), filter var(--t);
}
.gal-item:hover{ box-shadow:var(--sh-lift); border-color:var(--lime-line); }
.gal-item:empty{ border-color:var(--line-light); }
.gal-item:hover img,.gal-item:hover video{ transform:scale(1.045); }
.gal-play{
  position:absolute; inset:auto auto 12px 12px; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--lime); color:var(--lime-ink); pointer-events:none;
}
.gal-play svg{ width:18px; height:18px; fill:currentColor; margin-left:2px; }
.gal-legenda{
  position:absolute; inset:auto 0 0 0; padding:2.2rem .9rem .8rem; text-align:left;
  font-size:.86rem; color:#fff;
  background:linear-gradient(transparent, rgba(4,22,27,.82));
  opacity:0; transition:opacity var(--t);
}
.gal-item:hover .gal-legenda,.gal-item:focus-visible .gal-legenda{ opacity:1; }

.gal-vazio{
  text-align:center; max-width:46ch; margin:clamp(2rem,4vw,4rem) auto;
  padding:clamp(2rem,1.5rem + 2vw,3rem);
  border:1px dashed var(--line-light); border-radius:var(--r-4); background:var(--card);
}
.gal-vazio svg{
  width:46px; height:46px; margin:0 auto 1.1rem;
  fill:none; stroke:var(--lime-deep); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.gal-vazio h2{ font-size:1.5rem; }
.gal-vazio p{ margin-top:.7rem; color:var(--muted); }
.gal-vazio-cta{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem; }

/* ─── visor em tela cheia ──────────────────────────────────────────────── */
.visor{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(3,15,19,.94); backdrop-filter:blur(10px); padding:clamp(1rem,4vw,3rem);
  animation:surge .28s var(--ease-out);
}
.visor[hidden]{ display:none; }
@keyframes surge{ from{ opacity:0; } to{ opacity:1; } }
.visor-palco{ max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; gap:.9rem; margin:0; }
.visor-palco img,.visor-palco video{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:var(--r-3); box-shadow:var(--sh-lift); margin-inline:auto;
}
.visor-palco figcaption{ color:var(--on-dark-soft); font-size:.92rem; text-align:center; }
.visor-fechar,.visor-nav{
  position:absolute; width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; background:rgba(255,255,255,.08);
  border:1px solid var(--line-dark); color:var(--on-dark);
  transition:background var(--t-fast), transform var(--t-fast);
}
.visor-fechar svg,.visor-nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.visor-fechar:hover,.visor-nav:hover{ background:var(--lime); color:var(--lime-ink); transform:scale(1.06); }
.visor-fechar{ top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem); }
.visor-ant{ left:clamp(.5rem,2vw,1.6rem); top:50%; translate:0 -50%; }
.visor-prox{ right:clamp(.5rem,2vw,1.6rem); top:50%; translate:0 -50%; }

@media (max-width:760px){
  /* na tela estreita: nome inteiro numa linha e o trajeto quebra em vez de truncar */
  .review-who span{ white-space:normal; overflow:visible; }
  
  .gal-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); grid-auto-rows:150px; }
  .gal-item.largo{ grid-column:span 2; }
  .visor-ant,.visor-prox{ top:auto; bottom:clamp(.8rem,3vw,1.6rem); translate:0 0; }
  .visor-palco img,.visor-palco video{ max-height:64vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SELETOR DE IDIOMA
   ═════════════════════════════════════════════════════════════════════════ */
.lang{ position:relative; flex:none; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  min-height:42px; padding:.45rem .7rem;
  font-family:var(--ff-display); font-weight:600; font-size:.92rem;
  color:var(--on-dark-soft); background:transparent;
  border:1px solid var(--line-dark); border-radius:var(--r-pill);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.lang-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lang-btn .lang-seta{ width:13px; height:13px; transition:transform var(--t-fast); }
.lang-btn[aria-expanded="true"] .lang-seta{ transform:rotate(180deg); }
.lang-btn:hover{ color:var(--on-dark); border-color:var(--lime-line); background:rgba(255,255,255,.05); }

.lang-lista{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:120;
  min-width:172px; padding:.35rem; margin:0;
  background:var(--deep); border:1px solid var(--line-dark); border-radius:var(--r-2);
  box-shadow:var(--sh-2); animation:menuEntra .18s var(--ease-out);
}
.lang-lista[hidden]{ display:none; }
.lang-lista button{
  display:flex; align-items:center; gap:.6rem; width:100%; cursor:pointer;
  padding:.6rem .7rem; text-align:left; font-size:.94rem;
  color:var(--on-dark-soft); background:transparent; border:0; border-radius:var(--r-1);
  transition:background var(--t-fast), color var(--t-fast);
}
.lang-lista button b{
  font-family:var(--ff-display); font-size:.78rem; letter-spacing:.06em;
  color:var(--lime); min-width:22px;
}
.lang-lista button:hover{ background:rgba(255,255,255,.07); color:var(--on-dark); }
.lang-lista button[aria-selected="true"]{ background:var(--lime-veil); color:var(--on-dark); }

/* no menu do celular o seletor fica em linha, sem popover flutuando */
.lang-mob{ margin-bottom:.5rem; }
.lang-mob .lang-btn{ width:100%; justify-content:space-between; min-height:48px; font-size:1rem; }
.lang-mob .lang-lista{ position:static; width:100%; margin-top:.4rem; box-shadow:none; }

@media (max-width:1000px){ .site-header .lang{ display:none; } }
@media (min-width:1001px){ .lang-mob{ display:none; } }

/* tarja do depoimento de exemplo (era texto no CSS, virou elemento para traduzir) */


/* ══════════════════════════════════════════════════════════════════════════
   VÍDEO DA TRAVESSIA
   O arquivo só é baixado quando a seção chega perto da tela: até lá o que
   aparece é o pôster, que pesa pouco mais de 90 KB.
   ═════════════════════════════════════════════════════════════════════════ */
.filme{ background:var(--abyss); color:var(--on-dark); padding:var(--sec-y) 0 0; overflow:hidden; }
.filme-copy{ max-width:52ch; padding-bottom:clamp(1.6rem,1.2rem + 2vw,2.6rem); }
.filme-copy h2{ font-size:var(--fs-h2); }
.filme-copy h2 em{ color:var(--lime); }
.filme-copy p{ margin-top:.9rem; color:var(--on-dark-soft); font-size:var(--fs-lead); }

.filme-palco{
  position:relative; margin:0; width:100%; line-height:0;
  background:var(--deep); aspect-ratio:16/9; max-height:74vh; overflow:hidden;
}
.filme-video{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:760px){
  .filme-palco{ aspect-ratio:4/3; max-height:64vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AJUSTE DE IDENTIDADE (2026-10-17)
   A marca é verde-lima sobre mar escuro. As seções de reviews, "como
   funciona" e FAQ vinham em areia clara e liam como cinza logo abaixo do
   vídeo. Aqui elas passam pro mar escuro; os cards brancos carregam o texto
   e ganham contraste. O vídeo da travessia fica puramente decorativo: sem
   player, sem controle nativo em nenhuma hipótese.
   ══════════════════════════════════════════════════════════════════════════ */

/* vídeo decorativo — nunca interativo, nenhum chrome de player; leve realce
   de cor pra não lavar no sol a pino (o frame do meio-dia vinha dessaturado) */
.filme-video{ pointer-events:none; filter:saturate(1.12) contrast(1.03); }
.filme-video::-webkit-media-controls,
.filme-video::-webkit-media-controls-enclosure,
.filme-video::-webkit-media-controls-panel{ display:none !important; -webkit-appearance:none; }

/* o em dos títulos usa verde-escuro (p/ fundo claro); no mar, sobe pro lima */
.reviews .sec-head h2 em,
.how .sec-head h2 em,
.faq .sec-head h2 em{ color:var(--lime); }

/* reviews → painel do mar, cards brancos sobressaem */
.reviews{ background:var(--deep); color:var(--on-dark); }
.reviews .sec-head h2,
.reviews .rating b{ color:var(--on-dark); }
.reviews .sec-head .sec-sub{ color:var(--on-dark-soft); }
.reviews .rating .stars{ color:var(--lime); }
.reviews .rating small{ color:var(--on-dark-soft); }
.reviews .rail-btn{ border-color:var(--line-dark); }
.reviews .rail-btn svg{ stroke:var(--on-dark); }
.reviews .rail-btn:hover{ background:var(--lime); border-color:var(--lime); }
.reviews .rail-btn:hover svg{ stroke:var(--lime-ink); }

/* como funciona → mar; cards brancos mantêm o texto escuro */
.how{ background:var(--abyss); color:var(--on-dark); }
.how .sec-head h2{ color:var(--on-dark); }
.how .sec-head .sec-sub{ color:var(--on-dark-soft); }
.how-note{ color:var(--on-dark); }
/* o color:on-dark da seção vazava pros cards brancos (título ficava branco no
   branco). Aqui o texto dentro dos cards volta pro escuro. */
.how .steps li{ color:var(--ink); }
.how .steps p{ color:var(--muted); }
/* a linha tracejada que "ligava" os passos poluía — fora */
.how .steps li::after{ display:none; }
.reviews .review{ color:var(--ink-soft); }
.reviews .review-who b{ color:var(--ink); }

/* FAQ → mar; aqui o texto fica direto no fundo, então todos os tons sobem */
.faq{ background:var(--abyss); color:var(--on-dark); }
.faq .sec-head h2{ color:var(--on-dark); }
.faq .sec-head .sec-sub{ color:var(--on-dark-soft); }
.faq-list details{ border-bottom-color:var(--line-dark); }
.faq-list summary{ color:var(--on-dark); }
.faq-list summary::after{ border-right-color:var(--lime); border-bottom-color:var(--lime); }
.faq-list details[open] summary{ color:var(--lime); }
.faq-list details > div > p{ color:var(--on-dark-soft); }