/* Landing do Pesca Potiguar: a página é a tela do mapa do jogo. Os tokens, os cartões de papel
   do HUD, o sonar e a cortina de nuvens são os mesmos de src/world/world.css. */
:root {
  --ink: #16263a;
  --ink-2: #2d3e57;
  --paper: #fff6e3;
  --paper-2: #f4ead3;
  --wood: #8b5a2b;
  --wood-hi: #c08a52;
  --wood-lo: #5e3a1b;
  --sun: #ffd35c;
  --coral: #e8632a;
  --sea: #1f9fcf;
  --sea-deep: #0f4f9a;
  --sea-night: #0b3b74;
  --good: #1f6e3a;
  --gold-ink: #7a4f00;
  --px: 4px;
  --shadow: 4px 4px 0 rgba(22, 38, 58, .45);
  --ui: 'Pixelify Sans', ui-monospace, monospace;
  --logo: 'Press Start 2P', ui-monospace, monospace;
  --gap: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-color: var(--sun) var(--sea-night); }
body {
  margin: 0; background: var(--sea-deep); color: var(--ink); font-family: var(--ui); font-size: 17px; line-height: 1.4;
  -webkit-font-smoothing: none;
  /* mar em pixels: traços claros soltos, como os riscos de vento do mapa */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150' shape-rendering='crispEdges'%3E%3Cg fill='%23bfe6f5'%3E%3Crect x='18' y='22' width='26' height='3' opacity='.22'/%3E%3Crect x='132' y='58' width='40' height='3' opacity='.16'/%3E%3Crect x='70' y='104' width='18' height='3' opacity='.2'/%3E%3Crect x='176' y='128' width='22' height='3' opacity='.14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 150px;
}
::selection { background: var(--sun); color: var(--ink); }
img { image-rendering: pixelated; }
a { color: var(--sea-deep); text-underline-offset: 3px; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
kbd { font-family: var(--logo); font-size: .7em; }

/* cartão do HUD: papel, borda de tinta e a sombra em bloco do jogo */
.card { background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- a tela do mapa */
.tela { position: relative; min-height: 100svh; min-height: max(100svh, 640px); overflow: hidden; background: var(--sea) url('../../assets/landing/mapa-capa.webp') center / cover; }
.mar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; image-rendering: pixelated; transition: opacity .45s; }
.mar-video.dip { opacity: .35; }
.mar { position: absolute; inset: 0; z-index: 1; cursor: crosshair; }
/* o mapa afunda no mar fundo em degraus de pixel (com uma fileira pontilhada no meio), sem corte seco */
.tela::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; z-index: 1; pointer-events: none;
  background:
    repeating-conic-gradient(rgba(15, 79, 154, .3) 0 25%, transparent 0 50%) 0 32px / 8px 8px repeat-x,
    repeating-conic-gradient(rgba(15, 79, 154, .6) 0 25%, transparent 0 50%) 0 72px / 8px 8px repeat-x,
    repeating-conic-gradient(rgba(15, 79, 154, .85) 0 25%, transparent 0 50%) 0 112px / 8px 8px repeat-x,
    repeating-conic-gradient(var(--sea-deep) 0 25%, transparent 0 50%) 0 152px / 8px 8px repeat-x,
    linear-gradient(transparent 0 40px, rgba(15, 79, 154, .25) 40px 80px, rgba(15, 79, 154, .5) 80px 120px, rgba(15, 79, 154, .78) 120px 160px, var(--sea-deep) 160px);
}
.mar:focus-visible { outline-offset: -8px; }
.tela > :not(.mar-video):not(.mar) { z-index: 2; }

/* logo do jogo: letras com contorno de tinta, balançando como na tela de login */
.logo-bloco { position: absolute; top: 24px; left: 24px; display: grid; gap: 16px; justify-items: start; width: min(440px, calc(100vw - 48px)); pointer-events: none; }
.logo-bloco > * { pointer-events: auto; }
.logo { font-family: var(--logo); font-weight: 400; line-height: 1.12; }
.logo .row { display: block; white-space: nowrap; }
.logo b {
  display: inline-block; font-size: clamp(24px, 3vw, 40px); color: var(--paper);
  text-shadow: 0 var(--px) 0 var(--ink), var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink), var(--px) calc(var(--px) * 2) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink);
  animation: bob 2.6s ease-in-out infinite;
}
.logo .big b { font-size: clamp(30px, 4.3vw, 56px); color: var(--sun); }
.logo b:nth-child(2) { animation-delay: .12s; } .logo b:nth-child(3) { animation-delay: .24s; } .logo b:nth-child(4) { animation-delay: .36s; }
.logo b:nth-child(5) { animation-delay: .48s; } .logo b:nth-child(6) { animation-delay: .6s; } .logo b:nth-child(7) { animation-delay: .72s; } .logo b:nth-child(8) { animation-delay: .84s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.who { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px 12px 10px; }
.avatar { flex: none; width: 48px; height: 48px; object-fit: contain; padding: 4px; background: var(--sea); border: 3px solid var(--ink); }
.who-name { font-weight: 700; font-size: 18px; }
.who-pitch { margin-top: 4px; font-size: 16px; max-width: 34ch; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 15px; }

.quest { width: 262px; padding: 8px 12px 10px; }
.quest-head { display: flex; gap: 6px; align-items: center; font-size: 16px; }
.quest-who { margin: 2px 0 6px; font-size: 13px; color: var(--ink-2); }
.quest-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.quest-goals li { display: flex; gap: 6px; align-items: baseline; font-size: 14px; line-height: 1.3; }
.quest-goals li::before { content: ''; flex: none; width: 10px; height: 10px; translate: 0 1px; background: #fff; border: 2px solid var(--ink); }
.quest-goals li span { flex: 1; }
.quest-goals li b { flex: none; font-size: 13px; }
.quest-note { margin-top: 6px; font-size: 13px; color: var(--ink-2); }

/* cartão de navegação: minimapa como índice e a biruta do HUD */
.nav { position: absolute; top: 24px; right: 24px; width: 222px; padding: 6px; }
.mini { display: block; border: 2px solid var(--ink); line-height: 0; }
.mini img { width: 100%; height: auto; }
.navrow { display: flex; justify-content: space-between; padding: 5px 2px 0; font-size: 13px; }
.north { font-weight: 700; color: var(--coral); }
.wind { display: flex; gap: 8px; align-items: center; padding: 6px 2px 0; }
.wind-dial { flex: none; width: 70px; height: 70px; }
.wd-sea { fill: var(--sea-deep); stroke: var(--ink); stroke-width: 3; }
.wd-hole { fill: #2a78c4; }
.wd-nogo { fill: #d6452f; } .wd-reach { fill: #3fae4f; } .wd-run { fill: #e0a800; }
.wd-letter { font: 700 10px/1 var(--ui); fill: var(--paper); text-anchor: middle; dominant-baseline: central; }
.wd-letter.n { fill: var(--sun); }
.wd-boat { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.wd-sock { transform-origin: 0 0; animation: biruta 1.9s ease-in-out infinite; }
.wd-sock polygon { stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; }
.wd-sock .red { fill: #e8452f; } .wd-sock .white { fill: var(--paper); }
@keyframes biruta { 0%, 100% { rotate: -5deg; } 45% { rotate: 6deg; } 70% { rotate: -2deg; } }
.wd-pole { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.wind-info { display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.wind-info b { font-size: 14px; white-space: nowrap; }
.wind-info .reach { font-weight: 700; color: var(--good); }
.wind-info small { font-size: 12px; color: var(--ink-2); }
.index { list-style: none; margin: 8px 0 0; padding: 8px 2px 2px; border-top: 2px dashed #d9c9a3; display: grid; gap: 4px; }
.index a { font-weight: 700; font-size: 14px; }

/* painel do pesqueiro, como quando a jangada chega perto da boia */
.spot { position: absolute; left: 50%; bottom: 18px; width: min(430px, calc(100vw - 32px)); translate: -50% 0; padding: 12px 14px 14px; }
.spot-head { display: flex; gap: 10px; align-items: center; }
.pin { font-size: 26px; }
.spot h2 { font-size: 20px; }
#spot-depth { font-size: 13px; color: var(--ink-2); }
.spot-desc { margin: 8px 0; font-size: 15px; }
.spot-hint { display: none; margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.spot-fish { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 13px; font-weight: 600; background: #d8f3f8; border: 2px solid var(--ink); }
.chip img { height: 14px; }
.chip.soon { color: var(--ink-2); background: var(--paper-2); }

.help { position: absolute; left: 24px; bottom: 18px; padding: 8px 12px; font-size: 14px; }
.help .touch { display: none; }
@media (hover: none) { .help .mouse { display: none; } .help .touch { display: inline; } }

/* botão de madeira do jogo (START) */
.start {
  position: relative; display: inline-block; cursor: pointer; border: var(--px) solid var(--ink); color: var(--paper); text-decoration: none;
  background: var(--wood); box-shadow: 0 6px 0 var(--ink), inset 0 var(--px) 0 var(--wood-hi), inset 0 calc(var(--px) * -2) 0 var(--wood-lo);
  font-family: var(--logo); font-size: 22px; letter-spacing: .08em; text-shadow: 3px 3px 0 var(--wood-lo);
  transition: transform .08s, box-shadow .08s;
}
.start span { display: block; padding: 18px 44px 16px; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0, 0, 0, .12) 46px 50px); }
.start::before, .start::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; background: var(--sun); box-shadow: 0 0 0 3px var(--ink); }
.start::before { left: 12px; } .start::after { right: 12px; }
.start:hover { background: #9c6734; }
.start:active { transform: translateY(6px); box-shadow: 0 0 0 var(--ink), inset 0 var(--px) 0 var(--wood-hi), inset 0 calc(var(--px) * -2) 0 var(--wood-lo); }
.start.small { display: block; width: 100%; text-align: center; font-size: 14px; }
.start.small span { padding: 12px 10px 10px; }

/* o sonar do jogo, escrito JOGAR, sempre à mão */
.sonar {
  position: fixed; right: 24px; bottom: 24px; z-index: 20; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%;
  color: var(--ink); text-decoration: none; font-family: var(--logo); font-size: 15px; letter-spacing: .04em;
  border: var(--px) solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  background: radial-gradient(circle, #bff7ff 0 30%, #5fd4e8 31% 60%, #2aa7c9 61%);
  transition: transform .08s, box-shadow .08s;
}
.sonar::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid #bff7ff; animation: ping 1.8s ease-out infinite; pointer-events: none; }
.sonar span { text-shadow: 2px 2px 0 #bff7ff; }
.sonar:hover { background: radial-gradient(circle, #e3fcff 0 30%, #7fe0f0 31% 60%, #3bb6d6 61%); }
.sonar:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
@keyframes ping { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* o ping do sonar onde o mar foi clicado */
.ping { position: fixed; left: 0; top: 0; z-index: 30; width: 0; height: 0; pointer-events: none; }
.ping i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 4px solid #bff7ff; opacity: 0; }
.ping.on i { animation: ping-mar 1s cubic-bezier(.2, .7, .3, 1) forwards; }
.ping.on i:nth-child(2) { animation-delay: .18s; } .ping.on i:nth-child(3) { animation-delay: .36s; }
@keyframes ping-mar { from { transform: scale(.1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* ---------------------------------------------------------------- seções: folhas de papel sobre o mar */
main { display: grid; gap: 96px; padding: 96px 24px 72px; max-width: 1180px; margin: 0 auto; }
.pixel-title { font-family: var(--logo); font-weight: 400; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.35; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); text-wrap: balance; }
.sheet .pixel-title, .carta .pixel-title { color: var(--ink); text-shadow: none; }
.lead { margin-top: 14px; max-width: 58ch; font-size: 19px; color: #eaf6ff; }

/* um dia no mar: o trailer em pé acompanha as quatro telas */
.dia { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 48px; align-items: start; }
.dia-trailer { align-self: stretch; }
/* só o vídeo fica preso ao rolar, ao lado das quatro telas */
.trailer { position: sticky; top: 24px; margin: 22px 0 0; padding: 8px; background: var(--ink); }
.trailer-tela { position: relative; display: grid; justify-items: center; }
/* preso na tela ao rolar: nunca mais alto que a janela, nem em notebook de tela baixa */
.trailer video { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 110px); aspect-ratio: 9 / 16; background: var(--sea-night); }
.play-trailer { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; width: auto; white-space: nowrap; }
.play-trailer[hidden] { display: none; }
.play-trailer > span { display: flex; gap: 10px; align-items: center; justify-content: center; }
.play-trailer b { font-weight: inherit; }
.tri { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--paper); filter: drop-shadow(2px 2px 0 var(--wood-lo)); }
.trailer figcaption { padding: 8px 4px 2px; font-size: 14px; color: var(--paper); }
.dia-telas { list-style: none; margin: 0; padding: 44px 0 0; display: grid; gap: 64px; }
.tela-passo { position: relative; }
.print { position: relative; }
.relogio { position: absolute; left: 0; bottom: calc(100% + 10px); padding: 3px 9px; font-size: 14px; font-weight: 700; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.tela-passo img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); box-shadow: 8px 10px 0 rgba(8, 26, 52, .45); image-rendering: auto; }
.passo { position: relative; width: min(380px, 88%); margin: -64px 0 0 auto; padding: 12px 16px 14px; }
.tela-passo:nth-child(even) .passo { margin-left: 0; margin-right: auto; }
.passo h3 { margin: 0 0 6px; font-family: var(--logo); font-weight: 400; font-size: 16px; }
.passo p { font-size: 16px; }

/* diário: a mesma folha do jogo, com as abas */
.sheet { padding: 22px 24px 26px; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sheet-head b { font-size: 17px; color: var(--ink-2); }
.tabs { display: flex; gap: 8px; margin: 16px 0 6px; }
.tabs [role="tab"] { padding: 6px 12px; cursor: pointer; font: 700 16px var(--ui); color: var(--ink); background: #e9e1cf; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tabs [role="tab"][aria-selected="true"] { background: var(--sun); }
.tabs [role="tab"]:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }
.nota { margin: 10px 0 14px; max-width: 70ch; font-size: 16px; color: var(--ink-2); }
.dex, .lendas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dex { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.dex li { display: grid; justify-items: start; align-content: start; gap: 3px; padding: 8px 10px 10px; background: #fff; border: 3px solid var(--ink); }
.dex img { height: 34px; max-width: 100%; object-fit: contain; }
.dex li.raro { background: var(--paper-2); }
.dex li.raro img { filter: brightness(0) opacity(.35); }
.dex b { font-size: 15px; }
.dex small { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.dex small.tags { color: var(--gold-ink); }
.lendas { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lendas li { display: grid; gap: 6px; align-content: start; padding: 12px 14px 14px; color: var(--paper); background: var(--ink); border: 3px solid var(--sun); }
.lendas img { height: 40px; justify-self: start; object-fit: contain; filter: brightness(0) invert(.85) sepia(1) saturate(4) hue-rotate(5deg); }
.lendas b { font-family: var(--logo); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--sun); }
.lendas q { font-size: 15px; line-height: 1.35; }
.lendas small { font-size: 13px; color: #ffe9b0; }

/* o litoral: a carta com os portos */
.litoral { display: grid; gap: 22px; }
.carta { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; padding: 14px; }
.carta-mapa { position: relative; align-self: start; border: 3px solid var(--ink); line-height: 0; }
.carta-mapa img { width: 100%; height: auto; }
.marco { position: absolute; display: grid; place-items: center; width: 18px; height: 18px; translate: -50% -50%; font: 700 11px/1 var(--ui); color: var(--paper); background: var(--coral); box-shadow: 0 0 0 2px var(--ink); }
.marco.pesqueiro { width: 9px; height: 9px; background: var(--sun); }
.rotulo { position: absolute; left: 22px; top: 50%; translate: 0 -50%; white-space: nowrap; font: 700 13px/1 var(--ui); color: #fff; text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 2px 2px 0 var(--ink); }
.marco.esq .rotulo { left: auto; right: 22px; }
.marco.cima .rotulo { left: 50%; top: -12px; translate: -50% -50%; }
.marco.baixo .rotulo { left: 50%; top: 30px; translate: -50% -50%; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; font-size: 14px; color: var(--ink-2); }
.legenda span { display: inline-flex; gap: 8px; align-items: center; }
.marco-ico { display: inline-grid; place-items: center; width: 18px; height: 18px; font: 700 11px/1 var(--ui); font-style: normal; color: var(--paper); background: var(--coral); box-shadow: 0 0 0 2px var(--ink); }
.marco-ico.pesqueiro { width: 10px; height: 10px; background: var(--sun); }
.carta-col { align-self: start; }
.portos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.portos li { display: grid; gap: 1px; padding: 6px 10px 8px; background: #fff; border: 2px solid var(--ink); }
.portos b { display: flex; gap: 8px; align-items: center; font-size: 16px; }
.portos .n { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; font-size: 12px; color: var(--paper); background: var(--coral); border: 2px solid var(--ink); }
.portos small { font-size: 13px; color: var(--ink-2); }
.portos .paga { color: var(--gold-ink); font-weight: 700; }

/* calendário: os doze meses como a linha de evento do HUD */
.calendario { display: grid; gap: 0; }
.meses { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.meses li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; align-content: start; padding: 10px 12px 12px; background: var(--paper); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.meses .lado { display: grid; gap: 6px; justify-items: center; align-content: start; grid-row: span 3; }
.meses .icone { font-size: 22px; line-height: 1; }
.meses .mes { font-family: var(--logo); font-size: 10px; color: var(--ink-2); }
.meses .ev { font-weight: 700; font-size: 16px; line-height: 1.3; }
.meses .desc { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.meses .defeso { justify-self: start; padding: 1px 6px; font-size: 12px; font-weight: 700; color: var(--paper); background: #b0391f; }

/* biruta compacta no canto do celular e no fechamento */
.biruta-mini { display: none; }
.biruta-mini, .biruta-fim { padding: 4px; line-height: 0; }
.biruta-mini svg { width: 54px; height: 54px; }
.biruta-fim svg { width: 84px; height: 84px; }
.zarpar-vento { display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* fechamento */
.zarpar { display: grid; justify-items: center; gap: 18px; padding: 24px 0 8px; text-align: center; }
.zarpar p { max-width: 52ch; font-size: 18px; color: #eaf6ff; }
.zarpar .start { margin-top: 8px; }
.rodape { padding: 22px 24px 150px; text-align: center; font-size: 14px; color: #bfe0f5; }

/* cortina de nuvens do jogo, na hora de zarpar */
#wipe { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
#wipe i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 60%, #e3f1fb 61%); transform: translateX(-140vw) scale(.6); visibility: hidden;
}
#wipe.cover { pointer-events: auto; }
#wipe.cover i { visibility: visible; animation: cloud-in .7s cubic-bezier(.5, 0, .3, 1) var(--d) forwards; }
@keyframes cloud-in { from { transform: translateX(-140vw) scale(.6); } to { transform: none; } }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1100px) {
  .quest { display: none; }
  .dia { grid-template-columns: 1fr; }
  .dia-trailer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); column-gap: 28px; align-items: start; }
  .dia-trailer .trailer { position: static; grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .carta { grid-template-columns: 1fr; }
  .portos { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .logo-bloco { top: 14px; left: 12px; width: calc(100vw - 24px); gap: 10px; }
  .logo b { --px: 3px; font-size: 22px; }
  .logo .big b { font-size: 30px; }
  .who { padding: 8px 10px 10px 8px; }
  .avatar { width: 40px; height: 40px; }
  .who-name { font-size: 16px; }
  .who-pitch { font-size: 15px; }
  .nav, .help { display: none; }
  .spot { bottom: 118px; padding: 10px 12px 12px; }
  .spot-desc { display: none; }
  .spot-hint { display: block; }
  .sonar { right: 14px; bottom: 14px; width: 92px; height: 92px; font-size: 13px; }
  main { gap: 72px; padding: 64px 14px 56px; }
  .lead { font-size: 17px; }
  .dia-trailer { display: grid; grid-template-columns: 1fr; }
  .dia-trailer .trailer { grid-column: auto; grid-row: auto; width: min(300px, 100%); justify-self: center; margin-top: 18px; }
  .dia-telas { gap: 44px; }
  .passo, .tela-passo:nth-child(even) .passo { width: auto; margin: -28px 10px 0; }
  .sheet { padding: 16px 12px 18px; }
  .dex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .meses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rotulo, .marco.pesqueiro { display: none; }
  .marco.porto { width: 15px; height: 15px; font-size: 10px; translate: calc(-50% + var(--dx, 0px)) calc(-50% + var(--dy, 0px)); }
  .marco.porto[style*="--dx"]::after { content: ''; position: absolute; left: calc(50% - var(--dx) - 2px); top: calc(50% - var(--dy, 0px) - 2px); width: 4px; height: 4px; background: var(--ink); }
  .play-trailer .longo { display: none; }
  .play-trailer > span { padding: 10px 30px 8px; }
  .legenda span:last-child { display: none; }
  .biruta-mini { display: block; position: absolute; top: 14px; right: 12px; }
  .logo-bloco { width: calc(100vw - 24px); }
  .logo .row:first-child { max-width: calc(100vw - 110px); }
  .rodape { padding-bottom: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo b, .sonar::after, .wd-sock { animation: none; }
  .mar-video { display: none; }
  .ping.on i { animation: none; }
}