/* Passeios em Bombinhas — tokens em :root, mobile-first.
   Todo par de cor de texto foi verificado com bin/contraste nos dois esquemas. */

:root {
  /* Verde escuro da marca: o #25D366 do balão dá só 1.98:1 sobre branco e não
     passa no mínimo de 3:1 para ícone que carrega informação. */
  --whatsapp: #128C7E;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-sm: .875rem;  --text-base: 1rem;   --text-lg: 1.125rem;
  --text-xl: 1.5rem;   --text-2xl: 1.953rem;

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;

  --radius: 14px;
  --radius-sm: 8px;
  --max: 60rem;

  /* claro */
  --bg: #f7fbfc;
  --surface: #ffffff;
  --fg: #0b2027;
  --muted: #4a626c;
  --border: #d5e3e8;
  --border-strong: #7d949d;
  --accent: #0a7a8c;
  --accent-fg: #ffffff;
  --shadow: 0 1px 2px rgb(11 32 39 / .06), 0 8px 24px rgb(11 32 39 / .08);

  /* marcas — só como marcador de quem opera, nunca como botão */
  --brand-piratas: #8f1d1d;
  --brand-submarine: #20684a;

  --sea-1: #cfeaf0;
  --sea-2: #eaf6f8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #06161c;
    --surface: #0e2029;
    --fg: #e8f2f5;
    --muted: #9fb4bc;
    --border: #1c3038;
    --border-strong: #4a6b76;
    --accent: #3fc0d4;
    --accent-fg: #06161c;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .45);

    --whatsapp: #25D366;   /* no escuro o verde vivo rende 8.4:1 */

    --brand-piratas: #e46a6a;
    --brand-submarine: #4fb98a;

    --sea-1: #0d2c37;
    --sea-2: #071b22;
  }
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--space-4); }
.muted { color: var(--muted); }
.small { font-size: var(--text-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- cabeçalho e idioma ---------- */

.site-header {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.langs { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: var(--space-1); }

.lang-btn {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
}
.lang-btn svg { width: 20px; height: 14px; border-radius: 2px; flex: none; }
.lang-btn:hover { color: var(--fg); }
.lang-btn[aria-pressed="true"] {
  color: var(--fg);
  background: var(--surface);
  border-color: var(--border-strong);
}
.lang-code { display: none; }
@media (min-width: 480px) { .lang-code { display: inline; } }

/* ---------- faixa da trilha de passos ---------- */

.stepbar {
  position: relative;
  padding-block: var(--space-4);
  background: radial-gradient(120% 90% at 20% 0%, var(--sea-1), var(--sea-2) 60%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.stepbar::after {
  content: ""; position: absolute; inset: auto 0 -60% 0; height: 120%;
  background: radial-gradient(60% 50% at 50% 50%, rgb(255 255 255 / .35), transparent 70%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }


/* ---------- trilha de passos ---------- */

.stepnav {
  display: flex; gap: var(--space-2); list-style: none;
  margin: 0; padding: 0;
  font-size: var(--text-sm);
}
.stepnav-item {
  flex: 1; padding-top: var(--space-2);
  border-top: 3px solid var(--border);
  color: var(--muted);
}
.stepnav-item.is-done { border-top-color: var(--border-strong); }
.stepnav-item.is-now { border-top-color: var(--accent); color: var(--fg); font-weight: 650; }

.bar { display: flex; align-items: center; gap: var(--space-3); }
.bar:has(.back:not([hidden])) { margin-top: var(--space-6); }

.back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  font: inherit; font-weight: 600; cursor: pointer;
}
.back::before { content: "\2190"; }
.back:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- palco e cards ---------- */

main { padding-bottom: var(--space-16); }

.step { padding-top: var(--space-6); }
@media (prefers-reduced-motion: no-preference) {
  .step { opacity: 0; transform: translateY(10px); }
  .step.is-in { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease; }
}

.step-title { margin: 0 0 var(--space-6); font-size: var(--text-xl); }

.grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }

.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit; text-decoration: none;
  overflow: hidden;
}
.card-media { position: relative; aspect-ratio: 88 / 58; overflow: hidden; background: var(--sea-1); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .card-media img { transition: transform .5s ease; }
  .card:hover .card-media img, .card:focus-visible .card-media img { transform: scale(1.04); }
}
.card[data-operator]::before {
  content: ""; display: block; height: 4px;
  background: var(--brand-submarine);
}
.card[data-operator="piratas"]::before { background: var(--brand-piratas); }

.card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-6); }
.card-op { margin: 0; font-size: var(--text-sm); font-weight: 650; color: var(--muted); }
.card-title { margin: 0; font-size: var(--text-xl); }
.card-desc { margin: 0; color: var(--muted); max-width: 46ch; }
.card:hover .card-title, .card:focus-visible .card-title { color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.chip {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg);
  font-size: var(--text-sm); color: var(--fg);
}

/* ---------- passo 3: reserva ---------- */

.tour-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); }
.tour-op { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 650; color: var(--brand-submarine); }
.tour-head[data-operator="piratas"] .tour-op { color: var(--brand-piratas); }
.tour-title { margin: 0 0 var(--space-4); font-size: clamp(1.6rem, 6vw, var(--text-2xl)); }

.meet { margin-top: var(--space-12); }
.meet-label { margin: 0; font-size: var(--text-sm); color: var(--muted); }
.meet-place { margin: 0 0 var(--space-3); font-weight: 650; }
.meet-box {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--sea-1);
}
.meet-map { width: 100%; height: 100%; border: 0; display: block; }
.meet-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: var(--space-1);
  color: var(--accent); font-size: var(--text-sm); text-underline-offset: 3px;
}
.meet-cta:hover { text-decoration: underline; }

.booking { margin-top: var(--space-8); }
.booking-title { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.booking-help { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); max-width: 60ch; }

/* O widget da Adrena é claro por dentro: o painel fica branco nos dois esquemas
   para o texto preto dele nunca cair sobre fundo escuro. */
.calendar-box {
  background: #ffffff;
  color-scheme: light;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  height: 640px;
}
@media (min-width: 768px) { .calendar-box { height: 720px; } }
.calendar { width: 100%; height: 100%; border: 0; display: block; }

.wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; margin-top: var(--space-4); padding: var(--space-3) var(--space-6);
  border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  font-weight: 650; text-decoration: none;
}
.wa:hover { filter: brightness(1.08); }
.booking .muted { margin: var(--space-2) 0 0; }

/* ---------- saiba mais ---------- */

.more {
  margin-top: var(--space-12);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.more > summary {
  min-height: 48px; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center;
  font-weight: 650; cursor: pointer;
  list-style: none;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "\002B"; margin-left: auto; font-size: var(--text-xl); color: var(--muted); }
.more[open] > summary::after { content: "\2212"; }
.more-body { padding: 0 var(--space-4) var(--space-6); max-width: 65ch; }
.more-body h4 { margin: var(--space-6) 0 var(--space-1); font-size: var(--text-base); }
.more-body p { margin: 0; color: var(--muted); }
.more-body .small { margin-top: var(--space-4); }

/* ---------- vídeo e fotos ---------- */

.media { margin-top: var(--space-12); }

.video {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--sea-1);
  border-radius: var(--radius); overflow: hidden;
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; }
.video-play::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(6 22 28 / .75), rgb(6 22 28 / .1) 60%);
}
.video-icon {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgb(255 255 255 / .92);
  z-index: 1;
}
.video-icon::before {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-left: 20px solid #0b2027;
  border-block: 12px solid transparent;
}
.video-label {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1;
  color: #fff; font-weight: 650; text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
@media (prefers-reduced-motion: no-preference) {
  .video-icon { transition: scale .25s ease; }
  .video-play:hover .video-icon { scale: 1.08; }
}

.gallery-title { margin: var(--space-8) 0 var(--space-4); font-size: var(--text-lg); }
.gallery { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); width: 100%; }

/* ---------- botão flutuante do WhatsApp ---------- */

.fab {
  position: fixed;
  z-index: 20;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--whatsapp);
  box-shadow: var(--shadow);
}
.fab svg { width: 26px; height: 26px; fill: currentColor; }
.fab:hover { border-color: var(--whatsapp); }
@media (prefers-reduced-motion: no-preference) {
  .fab { transition: scale .2s ease, border-color .2s ease; }
  .fab:hover { scale: 1.06; }
}

/* ---------- rodapé ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-8);
  color: var(--muted); font-size: var(--text-sm);
}
.site-footer p { margin: 0 0 var(--space-2); max-width: 60ch; }

.op-links { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-4); }
.op-links li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.op-name { font-weight: 650; color: var(--fg); flex-basis: 100%; }
@media (min-width: 560px) { .op-name { flex-basis: auto; min-width: 12rem; } }
.op-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); text-decoration: none; text-underline-offset: 3px;
}
.op-links a:hover { text-decoration: underline; }

.data-note { margin-top: var(--space-3) !important; max-width: 60ch; }
.data-note a { color: var(--accent); text-underline-offset: 3px; }

noscript .note {
  display: block; margin-top: var(--space-6); padding: var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface);
}