/* ====== Seção 1: Carta Náutica ====== */
.sec-nautica{
  padding: 18px 0 8px;
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(44,107,114,.18), transparent 60%),
    radial-gradient(700px 420px at 100% 10%, rgba(217,182,111,.08), transparent 65%);
  position: relative;
  overflow: clip;
}
.sec-nautica .sec-head{
  margin-bottom: 12px;
}
.sec-nautica .sec-head h2{
  font-family: "Noto Serif", serif;
  margin: 0 0 6px 0;
  font-size: clamp(1.1rem, .9rem + 1.4vw, 1.6rem);
}
.sec-nautica .lead{
  margin: 0;
  color: #e7e1d4;
  max-width: 72ch;
}

/* Mosaico com rotas e rosa-dos-ventos */
.nautica-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;
}

/* Cartões fotográficos não "cartão comum" — com legenda tipo etiqueta */
.nav-card{
  grid-column: span 4;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  padding: 12px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s;
  will-change: transform;
}
.nav-card:hover{
  transform: translateY(-3px);
  border-color: rgba(217,182,111,.32);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.nav-card figcaption{
  margin-top: 8px; font-size: .95rem; color: #e9e6dc;
}
.nav-card figcaption strong{
  display: block; color: var(--gold); letter-spacing: .2px;
}

/* Rotas (linhas tracejadas animadas) */
.rota{
  position: absolute; pointer-events: none;
  height: 0; border-top: 2px dashed rgba(217,182,111,.45);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.2));
  animation: ondas 4s linear infinite;
}
@keyframes ondas{
  from{ background-position: 0 0; }
  to{ background-position: 40px 0; }
}
/* Trajetos curvos em camadas */
.rota-a{
  top: 24%; left: 6%; width: 60%;
  transform: rotate(6deg);
}
.rota-b{
  top: 62%; right: 2%; width: 54%;
  transform: rotate(-11deg);
}

/* Rosa-dos-ventos */
.rosa-dos-ventos{
  position: absolute; right: 2%; top: -18px;
  width: 92px; aspect-ratio: 1/1; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(217,182,111,.22) 0 25%, transparent 25% 50%, rgba(217,182,111,.22) 50% 75%, transparent 75% 100%),
    radial-gradient(closest-side, rgba(255,255,255,.05), rgba(0,0,0,.35));
  border: 1px solid rgba(217,182,111,.28);
  box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 18px rgba(217,182,111,.18);
  animation: girar 20s linear infinite;
}
@keyframes girar{
  to{ transform: rotate(360deg); }
}

/* Texto corrido abaixo do mosaico */
.nautica-texto{
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(217,182,111,.12);
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* ====== Responsivo ====== */
@media (max-width: 1024px){
  .nav-card{ grid-column: span 6; }
  .rosa-dos-ventos{ right: 3%; top: -8px; width: 80px; }
}
@media (max-width: 720px){
  .nautica-grid{ gap: 12px; }
  .nav-card{ grid-column: 1 / -1; }
  .rota-a{ top: 20%; left: 4%; width: 74%; }
  .rota-b{ top: 78%; right: 4%; width: 70%; }
}
@media (max-width: 400px){
  .rosa-dos-ventos{ display: none; }
}
/* --- PATCH: аккуратные линии и слои --- */

/* сетка — создаём слой */
.nautica-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 18px;

  /* мягкое «окно»: линии исчезают к низу, чтобы не заходили на текстовый блок */
  -webkit-mask-image: linear-gradient(#000 0 78%, transparent 95%);
          mask-image: linear-gradient(#000 0 78%, transparent 95%);
}

/* карточки всегда над линиями и с более плотным фоном */
.nav-card{
  position: relative;
  z-index: 2;
  background: rgba(14,19,32,.88);            /* раньше было очень прозрачно — линии просвечивали */
  border: 1px solid rgba(217,182,111,.16);
  padding: 12px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s;
}
.nav-card:hover{
  transform: translateY(-3px);
  border-color: rgba(217,182,111,.32);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

/* линии всегда ПОЗАДИ карточек */
.rota{
  position: absolute;
  z-index: 1;                 /* ниже .nav-card (z-index:2) */
  pointer-events: none;
  height: 0;
  border-top: 2px dashed rgba(217,182,111,.35);
  opacity: .55;               /* мягче */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
  animation: ondas 6s linear infinite;
  /* лёгкое затухание краёв линии */
  -webkit-mask-image: radial-gradient(120% 100% at 10% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 10% 50%, #000 60%, transparent 100%);
}

/* новая траектория — проходит между карточками, не по тексту */
.rota-a{
  top: 18%;
  left: 10%;
  width: 44%;
  transform: rotate(4deg);
}
.rota-b{
  top: 52%;
  right: 12%;
  width: 36%;
  transform: rotate(-7deg);
}

/* роза ветров — тоже за карточками и приглушена */
.rosa-dos-ventos{
  position: absolute;
  right: 2%;
  top: -18px;
  z-index: 1;                 /* под .nav-card */
  width: 92px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(217,182,111,.18) 0 25%, transparent 25% 50%, rgba(217,182,111,.18) 50% 75%, transparent 75% 100%),
    radial-gradient(closest-side, rgba(255,255,255,.04), rgba(0,0,0,.35));
  border: 1px solid rgba(217,182,111,.22);
  box-shadow: inset 0 0 14px rgba(0,0,0,.35), 0 0 12px rgba(217,182,111,.15);
  animation: girar 20s linear infinite;
}

/* адаптив: на узких экранах линии исчезают, чтобы ничего не «резало» текст */
@media (max-width: 900px){
  .rota{ opacity: .4; }
}
@media (max-width: 720px){
  .rota{ display: none; }
  .rosa-dos-ventos{ right: 3%; top: -8px; width: 80px; }
}
/* ====== SEÇÃO 2 — Ventos e Correntes ====== */
.sec-ventos{
  padding: 20px 0 8px;
  background:
    radial-gradient(600px 260px at 0% 10%, rgba(143,180,201,.08), transparent 60%),
    radial-gradient(600px 260px at 100% 20%, rgba(44,107,114,.12), transparent 65%);
}

/* faixa com setas animadas */
.vento-board{
  position: relative;
  height: 90px;
  margin: 10px 0 6px;
  border: 1px dashed rgba(217,182,111,.18);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  overflow: hidden;
}
.seta{
  position: absolute; inset: 0 auto auto 0;
  width: 80px; height: 2px; background: rgba(217,182,111,.45);
  transform-origin: left center;
}
.seta::after{
  content: ""; position: absolute; right: -8px; top: -3px;
  border: 4px solid transparent; border-left-color: rgba(217,182,111,.7);
}
.s1{ top: 26px; left: 2%; transform: rotate(6deg); animation: drift 8s linear infinite; }
.s2{ top: 42px; left: 18%; transform: rotate(3deg); animation: drift 9s linear infinite .4s; }
.s3{ top: 58px; left: 38%; transform: rotate(-2deg); animation: drift 10s linear infinite .8s; }
.s4{ top: 32px; left: 64%; transform: rotate(-5deg); animation: drift 11s linear infinite 1.1s; }

@keyframes drift{
  0%{ transform: translateX(-40px) rotate(var(--r,0deg)); opacity: .1; }
  20%{ opacity: .55; }
  100%{ transform: translateX(700px) rotate(var(--r,0deg)); opacity: 0; }
}

.vento-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, 1fr);
}
.vento-item{
  grid-column: span 4;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  border-radius: var(--radius-xl);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), border-color .25s;
}
.vento-item:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); }
.vento-item figcaption{ margin-top: 8px; color: #e9e6dc; }

.vento-notas{
  margin-top: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(217,182,111,.12);
  padding: 14px 16px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

/* ====== SEÇÃO 3 — Oficinas ====== */
.sec-oficinas{ padding: 22px 0 10px; }
.oficina-wrap{
  display: grid; gap: 18px;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  background:
    repeating-linear-gradient(90deg, rgba(217,182,111,.08) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(217,182,111,.12);
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.lab-steps{
  list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px dashed rgba(217,182,111,.25);
}
.lab-steps li{ margin: 0 0 14px 0; position: relative; padding-left: 14px; }
.lab-steps li::before{
  content: counter(step); counter-increment: step;
  position: absolute; left: -30px; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--gold), #7c5a22);
  color: #0e1320; display: grid; place-content: center; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.lab-steps h3{ margin: 0 0 4px; font-family: "Noto Serif", serif; font-size: 1.05rem; }
.lab-steps p{ margin: 0; color: #e7e1d4; }

.fig-stack{
  display: grid; gap: 10px;
}
.fig-stack figure{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  border-radius: 14px;
  padding: 10px;
  transform: rotate(var(--rot, -1deg));
  transition: transform .25s var(--easing), box-shadow .25s;
}
.fig-stack figure:hover{ transform: rotate(0deg) translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.fig-stack figcaption{ margin-top: 6px; color: #e9e6dc; }

.cordame-nota{
  margin-top: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(217,182,111,.25);
  padding: 10px 12px;
  color: #efe9db;
}

/* ====== SEÇÃO 4 — Primeiras Costas (timeline horizontal) ====== */
.sec-costas{ padding: 20px 0 6px; }
.costas-head{
  display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px;
}
.snap-btn{
  appearance: none; border: 1px solid rgba(217,182,111,.35);
  background: rgba(255,255,255,.03); color: var(--gold);
  border-radius: 10px; width: 36px; height: 32px; cursor: pointer;
  transition: background .2s, transform .2s;
}
.snap-btn:hover{ background: rgba(217,182,111,.12); transform: translateY(-1px); }

.costas-track{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(310px, 80%);
  gap: 14px; padding-bottom: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border: 1px solid rgba(217,182,111,.12);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.marco{ scroll-snap-align: start; }
.marco figure{
  margin: 0; padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  border-radius: 14px;
}
.marco figcaption{ margin-top: 8px; color: #e9e6dc; }
.costas-nota{ margin-top: 10px; color: #e7e1d4; }

/* ====== Responsivo (s2-s4) ====== */
@media (max-width: 1024px){
  .vento-item{ grid-column: span 6; }
  .oficina-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .vento-item{ grid-column: 1 / -1; }
  .vento-board{ height: 70px; }
  .costas-track{ grid-auto-columns: 85%; }
}
/* === SEÇÃO 3 — Oficinas (фикс нумерации и полосы) === */
.lab-steps{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;                /* чуть больше, чтобы текст не лип к линии */
  counter-reset: step 0;              /* <- сброс счётчика: теперь 1,2,3 */
}

/* рисуем «канат» отдельным псевдо-элементом, выровненным по центру кружков */
.lab-steps::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -19px;                        /* центр под кружком: -30 + 11px радиус */
  width: 0;
  border-left: 2px dashed rgba(217,182,111,.25);
  border-radius: 2px;
}

.lab-steps li{
  counter-increment: step;            /* <- инкремент на каждом пункте */
  margin: 0 0 14px 0;
  position: relative;
  padding-left: 14px;
}

.lab-steps li::before{
  content: counter(step);             /* <- теперь 1, 2, 3 */
  position: absolute;
  left: -30px; top: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, var(--gold), #7c5a22);
  color: #0e1320; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  /* аккуратнее визуально */
  font-variant-numeric: tabular-nums;
}
/* === SEÇÃO 3 — Oficinas: ровный канат и 1–2–3 === */
.lab-steps{
  /* размеры маркера в одном месте — всё выровняется автоматически */
  --bullet-size: 22px;
  --bullet-left: -30px;                       /* позиция кружка относительно текста */
  --bullet-r: calc(var(--bullet-size) / 2);

  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 calc(28px + 2px);            /* запас под линию */
  counter-reset: step 0;                      /* стартуем с 1 */
}

/* вертикальная «верёвка» строго через центр кружков */
.lab-steps::before{
  content: "";
  position: absolute;
  left: calc(var(--bullet-left) + var(--bullet-r));
  top: var(--bullet-r);                        /* начинается от центра 1-го кружка */
  bottom: var(--bullet-r);                     /* заканчивается в центре последнего */
  border-left: 2px dashed rgba(217,182,111,.25);
}

.lab-steps li{
  position: relative;
  margin: 0 0 14px 0;
  padding-left: 14px;
  counter-increment: step;                     /* ← единственный инкремент */
}

.lab-steps li::before{
  content: counter(step);                      /* 1, 2, 3... */
  counter-increment: none;                     /* ← гасим старое правило, если было */
  position: absolute;
  left: var(--bullet-left);
  top: 0;
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, var(--gold), #7c5a22);
  color: #0e1320;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
}

/* ====== SEÇÃO 5 — Além do Bojador (scoped) ====== */
.sec-bojador{ padding: 22px 0 10px; }

.bojador-mapa{
  position: relative;
  height: 120px;
  margin: 6px 0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015));
  border: 1px solid rgba(217,182,111,.12);
  border-radius: 14px;
  overflow: hidden;
}

/* ondas – только внутри карты */
.bojador-mapa .onda{
  position: absolute; left: -20%; right: -20%;
  height: 2px; background: rgba(143,180,201,.18);
}
.bojador-mapa .o1{ top: 34px; animation: wave 7s linear infinite; }
.bojador-mapa .o2{ top: 60px; animation: wave 8.5s linear infinite .5s; }
.bojador-mapa .o3{ top: 86px; animation: wave 10s linear infinite 1s; }
@keyframes wave{ to{ transform: translateX(20%); } }

/* МЕТКИ — СТРОГО внутри карты, чтобы не трогать .sec-costas .marco */
.bojador-mapa .marco{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 6px rgba(217,182,111,.15);
}
.bojador-mapa .m1{ left: 18%; top: 44px; }
.bojador-mapa .m2{ left: 44%; top: 68px; }
.bojador-mapa .m3{ left: 74%; top: 48px; }

/* траектории — тоже только внутри карты */
.bojador-mapa .trajeto{
  position: absolute; height: 0;
  border-top: 2px dashed rgba(217,182,111,.35); pointer-events: none;
}
.bojador-mapa .t1{ left: 18%; top: 48px; width: 28%; transform: rotate(8deg); }
.bojador-mapa .t2{ left: 46%; top: 72px; width: 30%; transform: rotate(-12deg); }

/* остальное из секции 5 остаётся без изменений */

/* ====== SEÇÃO 6 — Ilhas-Escala ====== */
.sec-ilhas{ padding: 22px 0 10px; }
.ilhas-wrap{
  display: grid; gap: 16px; grid-template-columns: 1.1fr .9fr;
  border: 1px solid rgba(217,182,111,.12);
  border-radius: var(--radius-xl);
  padding: 14px; box-shadow: var(--shadow-sm);
  background:
    radial-gradient(400px 160px at 20% -10%, rgba(217,182,111,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.ilha header{
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.ilha h3{ margin: 0; font-family: "Noto Serif", serif; }
.selo{
  font-size: .75rem; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(217,182,111,.35); color: var(--gold);
  background: rgba(217,182,111,.12);
}
.ilha figure{
  margin: 0 0 10px; padding: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  border-radius: 12px;
  transition: transform .25s var(--easing), box-shadow .25s;
}
.ilha figure:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.ilhas-nota{
  margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(217,182,111,.25);
  border-radius: 12px; color: #efe9db;
}

/* ====== SEÇÃO 7 — Diário de Bordo ====== */
.sec-diario{ padding: 22px 0 8px; }
.diario-grid{
  display: grid; gap: 16px; grid-template-columns: 1fr .6fr; align-items: start;
}
.glossario{ display: grid; gap: 10px; }
.g-item{
  border: 1px solid rgba(217,182,111,.16);
  border-radius: 12px; padding: 8px 10px;
  background: rgba(255,255,255,.03);
  transition: border-color .25s, transform .25s;
}
.g-item[open]{ border-color: rgba(217,182,111,.28); transform: translateY(-2px); }
.g-item summary{
  cursor: pointer; list-style: none; outline: none;
}
.g-item summary::-webkit-details-marker{ display: none; }
.g-item summary::after{
  content: "▾"; float: right; opacity: .7; transition: transform .25s;
}
.g-item[open] summary::after{ transform: rotate(180deg); }
.g-item p{ margin: 6px 0 0; color: #e9e6dc; }

.diario-fotos{ display: grid; gap: 10px; }
.diario-fotos figure{
  margin: 0; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(217,182,111,.16);
}

/* ====== Responsivo (s5-s7) ====== */
@media (max-width: 1024px){
  .boj-item{ grid-column: span 6; }
  .ilhas-wrap{ grid-template-columns: 1fr; }
  .diario-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .boj-item{ grid-column: 1 / -1; }
  .bojador-mapa{ height: 100px; }
}
/* ===== PATCH: Секция 5 — чистые полосы и траектории ===== */

/* аккуратные «полосы моря» вместо .onda */
.sec-bojador .bojador-mapa{
  --sea-stripe: rgba(143,180,201,.11);
  position: relative;
}
.sec-bojador .bojador-mapa::before{
  content: "";
  position: absolute;
  inset: 6px;                      /* отступы внутри рамки */
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 18px,
      var(--sea-stripe) 18px 20px
    );
  opacity: .6;
  pointer-events: none;
}
/* старые «волны» убираем */
.sec-bojador .bojador-mapa .onda{ display: none; }

/* траектории — ниже маркеров, с затуханием у краёв */
.sec-bojador .bojador-mapa .trajeto{
  z-index: 1;
  position: absolute;
  height: 0;
  border-top: 2px dashed rgba(217,182,111,.33);
  pointer-events: none;
  /* не доходить до скруглений */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 20px, #000 40px calc(100% - 40px), transparent calc(100% - 20px));
          mask-image: linear-gradient(90deg, transparent 0 20px, #000 40px calc(100% - 40px), transparent calc(100% - 20px));
}

/* маркеры — выше линий */
.sec-bojador .bojador-mapa .marco{
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(217,182,111,.15), inset 0 0 12px rgba(217,182,111,.12);
}

/* новые, более мягкие траектории */
.sec-bojador .bojador-mapa .t1{ left: 16%; top: 54px; width: 40%; transform: rotate(-8deg); }
.sec-bojador .bojador-mapa .t2{ left: 42%; top: 80px; width: 44%; transform: rotate(12deg); }

/* мобильная чистота */
@media (max-width: 720px){
  .sec-bojador .bojador-mapa::before{ opacity: .4; }
  .sec-bojador .bojador-mapa .trajeto{ display: none; }
}
/* ====== SEÇÃO 8 — Cartas & Regimentos ====== */
.sec-cartas{ padding: 22px 0 10px; }
.s8-doc-track{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(310px, 80%);
  gap: 14px; padding: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  border: 1px solid rgba(217,182,111,.12); border-radius: 16px;
  background:
    radial-gradient(400px 160px at 10% -10%, rgba(217,182,111,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.s8-doc{ scroll-snap-align: start; position: relative; }
.s8-doc header{ display: flex; justify-content: flex-end; }
.s8-selo{
  font-size: .75rem; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(217,182,111,.35); color: var(--gold); background: rgba(217,182,111,.12);
}
.s8-doc figure{
  margin: 6px 0 0; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(217,182,111,.16);
  box-shadow: var(--shadow-sm); transition: transform .25s var(--easing), box-shadow .25s;
}
.s8-doc:hover figure{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.s8-nota{
  margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(217,182,111,.25);
  border-radius: 12px; color: #efe9db;
}

/* ====== SEÇÃO 9 — Ritmo de Bordo ====== */
.sec-ritmo{ padding: 22px 0 10px; }
.s9-grid{ display: grid; gap: 18px; grid-template-columns: 1.05fr .75fr; align-items: start; }
.s9-vigias{
  --dot: 10px; --r: calc(var(--dot)/2);
  position: relative; list-style: none; margin: 0; padding-left: 26px; counter-reset: v 0;
}
.s9-vigias::before{
  content: ""; position: absolute; left: calc(-2px + 26px - 14px);
  top: var(--r); bottom: var(--r); border-left: 2px dashed rgba(217,182,111,.25);
}
.s9-vigias li{ counter-increment: v; margin: 0 0 16px 0; position: relative; }
.s9-vigias li::before{
  content: counter(v);
  position: absolute; left: -26px; top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: radial-gradient(circle at 30% 30%, var(--gold), #7c5a22);
  color: #0e1320; font-weight: 700; font-size: .85rem; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.s9-vigias h3{ margin: 0 0 4px; font-family: "Noto Serif", serif; }
.s9-vigias p{ margin: 0; color: #e7e1d4; }
.s9-fotos{ display: grid; gap: 10px; }
.s9-fotos figure{
  margin: 0; padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(217,182,111,.16);
  transition: transform .25s var(--easing), box-shadow .25s;
}
.s9-fotos figure:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.35); }

/* ====== SEÇÃO 10 — Padrões de Estrelas ====== */
.sec-estrelas{ padding: 22px 0 10px; position: relative; }
.s10-cosmos{
  position: relative; height: 140px; margin: 6px 0 12px;
  border: 1px solid rgba(217,182,111,.12); border-radius: 14px;
  background: radial-gradient(600px 220px at 85% -40%, rgba(143,180,201,.08), transparent 60%);
  overflow: hidden;
}
.s10-star{
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6);
  opacity: .9; animation: twinkle 2.8s ease-in-out infinite;
}
.s10-star.a{ left: 18%; top: 36%; animation-delay: .2s; }
.s10-star.b{ left: 46%; top: 54%; animation-delay: .6s; }
.s10-star.c{ left: 78%; top: 28%; animation-delay: 1s; }
@keyframes twinkle{ 0%,100%{ transform: scale(.9); opacity:.7;} 50%{ transform: scale(1.15); opacity:1; } }

.s10-line{
  position: absolute; height: 0; border-top: 2px dashed rgba(217,182,111,.35);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
          mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
}
.s10-line.l1{ left: 18%; top: 40%; width: 30%; transform: rotate(8deg); }
.s10-line.l2{ left: 48%; top: 48%; width: 34%; transform: rotate(-12deg); }

.s10-grid{ display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.s10-item{
  grid-column: span 4; background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16); border-radius: var(--radius-xl);
  padding: 12px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), border-color .25s;
}
.s10-item:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); }
.s10-nota{
  margin-top: 10px; border: 1px dashed rgba(217,182,111,.25); border-radius: 12px;
  padding: 10px 12px; color: #efe9db; background: rgba(255,255,255,.02);
}
.s10-nota summary{ cursor: pointer; }

/* ====== Responsivo (s8–s10) ====== */
@media (max-width: 1024px){
  .s9-grid{ grid-template-columns: 1fr; }
  .s10-item{ grid-column: span 6; }
}
@media (max-width: 720px){
  .s8-doc-track{ grid-auto-columns: 85%; }
  .s10-item{ grid-column: 1 / -1; }
  .s10-cosmos{ height: 110px; }
}
/* ====== SEÇÃO 11 — Capitães & Tripulações ====== */
.sec-capitaes{ padding: 22px 0 10px; }
.s11-depoimentos{
  display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr);
}
.s11-card{
  grid-column: span 4;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(217,182,111,.16);
  border-radius: var(--radius-xl);
  padding: 12px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), box-shadow .25s, border-color .25s;
}
.s11-card:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.s11-fig{
  width: 100%; display: grid; place-items: center; margin: 0 0 8px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}
.s11-card h3{ margin: 0 0 4px; font-family: "Noto Serif", serif; }
.s11-card p{ margin: 0; color: #e9e6dc; }

/* ====== SEÇÃO 12 — Tipos de Embarcação ====== */
.sec-tipos{ padding: 22px 0 10px; }
.s12-quadros{
  display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); align-items: start;
}
.s12-item{
  grid-column: span 4;
  border: 1px solid rgba(217,182,111,.16); border-radius: 16px; padding: 12px;
  background:
    radial-gradient(400px 160px at 0% -10%, rgba(217,182,111,.06), transparent 60%),
    rgba(255,255,255,.03);
  transition: transform .25s var(--easing), border-color .25s;
}
.s12-item:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); }
.s12-item header{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.s12-item header small{ opacity:.8; border:1px solid rgba(217,182,111,.35); padding:2px 8px; border-radius:999px; color:var(--gold); }
.s12-item figure{ margin:0 0 8px; padding:10px; background: rgba(255,255,255,.03); border:1px solid rgba(217,182,111,.16); border-radius:12px; }
.s12-lista{ margin:0; padding-left: 18px; color:#e7e1d4; }
.s12-lista li{ margin: 4px 0; }

/* ====== SEÇÃO 13 — Escalas Africanas ====== */
.sec-escalas{ padding: 22px 0 10px; }
.s13-mapa{
  position: relative; height: 110px; margin: 6px 0 12px;
  border: 1px solid rgba(217,182,111,.12); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.015));
}
.s13-mar{
  position: absolute; inset: 8px; border-radius: 12px;
  background:
    radial-gradient(600px 200px at 15% 20%, rgba(143,180,201,.12), transparent 60%),
    repeating-linear-gradient(to bottom, transparent 0 16px, rgba(143,180,201,.11) 16px 18px);
  opacity: .7;
}
.s13-pin{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 6px rgba(217,182,111,.15);
}
.s13-pin.p1{ left: 36%; top: 48%; }
.s13-pin.p2{ left: 56%; top: 56%; }
.s13-traj{
  position:absolute; left: 36%; top: 52%; width: 20%;
  height: 0; border-top: 2px dashed rgba(217,182,111,.33);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
          mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
  transform: rotate(8deg);
}
.s13-grid{ display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.s13-item{
  grid-column: span 6;
  background: rgba(255,255,255,.03); border: 1px solid rgba(217,182,111,.16);
  border-radius: var(--radius-xl); padding: 12px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--easing), border-color .25s;
}
.s13-item:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); }
.s13-nota{
  margin-top: 10px; padding: 10px 12px; border: 1px dashed rgba(217,182,111,.25);
  border-radius: 12px; color: #efe9db;
}

/* ====== Responsivo (s11–s13) ====== */
@media (max-width: 1024px){
  .s11-card{ grid-column: span 6; }
  .s12-item{ grid-column: span 6; }
  .s13-item{ grid-column: span 12; }
}
@media (max-width: 720px){
  .s11-card, .s12-item{ grid-column: 1 / -1; }
  .s13-mapa{ height: 96px; }
}
/* ====== SEÇÃO 14 — Crónica (timeline horizontal, sem imagens) ====== */
.sec-cronica{ padding: 22px 0 10px; }
.cron-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;
}
.cron-label{ font-size:.9rem; opacity:.8; }
.cron-ctrls{ display:flex; gap:8px; }

.cron-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(300px, 80%);
  gap:14px; padding:12px;
  border:1px solid rgba(217,182,111,.12); border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
  position:relative;
}
.cron-rail::before{
  content:""; position:absolute; left:12px; right:12px; top:44px;
  border-top:2px dashed rgba(217,182,111,.25);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
          mask-image: linear-gradient(90deg, transparent 0 16px, #000 16px calc(100% - 16px), transparent calc(100% - 16px));
}
.cron-step{
  scroll-snap-align:start;
  position:relative; padding:14px 12px 12px 12px;
  background: rgba(255,255,255,.03); border:1px solid rgba(217,182,111,.16);
  border-radius:12px; transition:transform .25s var(--easing), border-color .25s;
}
.cron-step::before{
  /* pino da linha do tempo */
  content:""; position:absolute; left:12px; top:34px; width:10px; height:10px; border-radius:50%;
  background: var(--gold); box-shadow: 0 0 0 6px rgba(217,182,111,.15);
}
.cron-step:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); }
.cron-step h3{ margin:0 0 6px; font-family:"Noto Serif", serif; }
.cron-step p{ margin:0 0 8px; color:#e7e1d4; }
.cron-link{
  display:inline-block; font-size:.85rem; color: var(--gold); text-decoration:none;
  border:1px solid rgba(217,182,111,.35); padding:4px 8px; border-radius:999px;
}
.cron-link:hover{ background: rgba(217,182,111,.12); }

@media (max-width:720px){
  .cron-rail{ grid-auto-columns:85%; }
}

/* ====== SEÇÃO 15 — Passagens (cards de navegação, sem imagens) ====== */
.sec-passagens{ padding: 22px 0 20px; }
.pass-grid{
  display:grid; gap:16px; grid-template-columns:repeat(12,1fr);
}
.pass-card{
  grid-column: span 4;
  position:relative; overflow:hidden; text-decoration:none;
  border:1px solid rgba(217,182,111,.16); border-radius:16px;
  background: rgba(255,255,255,.03);
  transition: transform .25s var(--easing), box-shadow .25s, border-color .25s;
  color:#e9e6dc;
}
.pass-card::before{
  /* medaglione decorativo */
  content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%;
  background:
    conic-gradient(from 0deg, rgba(217,182,111,.18) 0 25%, transparent 25% 50%, rgba(217,182,111,.18) 50% 75%, transparent 75% 100%),
    radial-gradient(closest-side, rgba(255,255,255,.04), rgba(0,0,0,.35));
  border:1px solid rgba(217,182,111,.22);
  filter: blur(.2px);
  opacity:.7;
}
.pass-card:hover{ transform: translateY(-3px); border-color: rgba(217,182,111,.28); box-shadow: 0 16px 36px rgba(0,0,0,.35); }

.pass-inner{ padding:14px 16px 18px; position:relative; z-index:1; }
.pass-inner h3{ margin:0 0 6px; font-family:"Noto Serif", serif; }
.pass-inner p{ margin:0 0 10px; color:#e7e1d4; }
.pass-cta{
  display:inline-block; font-size:.9rem; color: var(--gold);
  border:1px solid rgba(217,182,111,.35); border-radius:999px; padding:6px 10px;
}
.pass-cta:hover{ background: rgba(217,182,111,.12); }

/* variações de matiz apenas сom gradientes sutis */
.pass-arq{ background: linear-gradient(180deg, rgba(139,160,190,.06), rgba(255,255,255,.03)); }
.pass-vinhos{ background: linear-gradient(180deg, rgba(160,120,120,.08), rgba(255,255,255,.03)); }
.pass-coz{ background: linear-gradient(180deg, rgba(150,170,120,.08), rgba(255,255,255,.03)); }

@media (max-width:1024px){
  .pass-card{ grid-column: span 6; }
}
@media (max-width:720px){
  .pass-card{ grid-column: 1 / -1; }
}
/* ===== PATCH — Seção 14: линия не перекрывает текст ===== */

/* отключаем общую линию по всему треку */
.cron-rail{ list-style: none; }         /* убираем 1., 2., 3. */
.cron-rail::before{ content: none; }    /* не рисуем глобальную пунктирную полосу */

/* линия рисуется в каждой карточке под h3 */
.cron-step{ padding: 16px 12px 12px; position: relative; }
.cron-step h3{
  margin: 0 0 6px;
  font-family: "Noto Serif", serif;
  position: relative;
  padding-bottom: 10px;                 /* место под линию */
}
.cron-step h3::after{
  content: "";
  position: absolute;
  left: 34px;                           /* не заходим на «пин» слева */
  right: 12px;
  bottom: 0;
  border-top: 2px dashed rgba(217,182,111,.25);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 8px, #000 8px calc(100% - 8px), transparent calc(100% - 0px));
          mask-image: linear-gradient(90deg, transparent 0 8px, #000 8px calc(100% - 8px), transparent calc(100% - 0px));
}

/* «пин» выравниваем по новой линии (под заголовком) */
.cron-step::before{
  left: 16px;
  top: calc(18px + 0.6em);              /* центр по линии под h3 */
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(217,182,111,.15);
}

/* мелкая подстройка на узких экранах */
@media (max-width: 720px){
  .cron-step h3::after{ left: 30px; }
}