/* Del Munhoz Pescados — cores tiradas da logo e da camisa da equipe (03/11/2026) */
:root {
  --marinho: #04152e;      /* fundo da logo */
  --marinho-2: #0a2a5a;    /* azul-escuro da fita da logo */
  --azul: #0458b0;         /* anel azul da logo: botão do WhatsApp (pedido do Giovani: azul, não verde) */
  --azul-forte: #0a6ad1;
  --azul-claro: #e8f1fb;
  --dourado: #f3ca54;      /* estrelas da logo */
  --dourado-escuro: #b37218;
  --espuma: #f6f9fd;       /* fundo claro, com respiro */
  --texto: #0f1d33;
  --cinza: #56677d;
  --linha: #dce6f2;
  --topo: 64px;
  --marca: "Cinzel", Georgia, "Times New Roman", serif;
  --corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mao: "Kaushan Script", "Brush Script MT", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--corpo); font-size: 1rem; line-height: 1.55; color: var(--texto);
  background: var(--espuma); overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.junto { white-space: nowrap; }
.dentro { width: min(1120px, 100% - 32px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px; border: 2px solid transparent; border-radius: 999px;
  font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn-whats { background: var(--azul); color: #fff; box-shadow: 0 10px 24px rgba(4, 88, 176, .32); }
.btn-whats:hover { background: var(--azul-forte); box-shadow: 0 14px 28px rgba(4, 88, 176, .4); }
.btn-claro { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.btn-linha { background: #fff; color: var(--marinho-2); border-color: var(--linha); }
.btn-linha:hover { border-color: var(--azul); color: var(--azul); }
.btn-insta { background: var(--marinho); color: #fff; }
.btn-insta:hover { background: var(--marinho-2); }
/* no fundo marinho o botão azul ganha um contorno claro pra não sumir */
.abertura .btn-whats, .atacado .btn-whats { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 14px 30px rgba(0, 0, 0, .35); }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--topo);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, calc((100% - 1120px) / 2));
  color: #fff; background: transparent; transition: background-color .3s, box-shadow .3s;
}
.topo.solido { background: rgba(4, 21, 46, .96); box-shadow: 0 6px 22px rgba(0, 0, 0, .2); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca img { width: 42px; }
.marca span { font-family: var(--marca); font-size: 1.02rem; font-weight: 900; line-height: 1.05; letter-spacing: .02em; }
.marca em { font-style: normal; color: var(--dourado); }
.topo-links { display: flex; align-items: center; gap: 2px; }
.topo-links a { padding: 9px 14px; border-radius: 999px; color: #fff; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.topo-links a:hover { background: rgba(255, 255, 255, .1); }
.topo-links .topo-insta { display: grid; place-items: center; padding: 9px; }

/* ---------- Abertura curta ---------- */
.abertura {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(var(--topo) + 32px) 0 110px;
  background:
    radial-gradient(110% 80% at 15% 0%, #0f3b78 0%, rgba(15, 59, 120, 0) 60%),
    radial-gradient(90% 70% at 100% 100%, #0a2a5a 0%, rgba(10, 42, 90, 0) 70%),
    var(--marinho);
}
.abertura-dentro { position: relative; z-index: 1; display: grid; justify-items: center; gap: 22px; width: min(1120px, 100% - 32px); margin-inline: auto; text-align: center; }
.abertura-logo { width: 136px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .45)); }
.selo-novo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
  background: rgba(243, 202, 84, .12); border: 1px solid rgba(243, 202, 84, .5); color: var(--dourado);
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.abertura h1 {
  margin-top: 16px; font-family: var(--marca); font-size: clamp(1.75rem, 6.6vw, 3.4rem); font-weight: 900;
  line-height: 1.12; letter-spacing: .01em; text-wrap: balance;
}
.linha-fina { max-width: 44ch; margin: 16px auto 0; color: #c7d6ea; font-size: clamp(1rem, 2.8vw, 1.15rem); }
.botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.abertura-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; color: #c7d6ea; font-size: .92rem; }
.abertura-info li { display: inline-flex; align-items: center; gap: 8px; }
.abertura-info svg { flex: none; color: var(--dourado); }
.abertura-onda { position: absolute; left: 0; bottom: -1px; width: 200%; max-width: none; height: 64px; }
.abertura-onda .onda-longe { fill: rgba(232, 241, 251, .16); }
.abertura-onda .onda-perto { fill: var(--espuma); }
/* enquanto a onda da abertura está na frente, a logo e o texto esperam (o script.js anima quando ela sobe) */
.com-intro .abertura-logo, .com-intro .abertura-texto > * { opacity: 0; }

/* ---------- Títulos das seções ---------- */
.chapeu { font-family: var(--mao); font-size: 1.35rem; line-height: 1.1; color: var(--azul); }
h2 {
  margin-top: 6px; font-family: var(--marca); font-size: clamp(1.65rem, 5.2vw, 2.6rem); font-weight: 900;
  line-height: 1.15; color: var(--marinho); text-wrap: balance;
}
.sub { max-width: 58ch; margin-top: 12px; color: var(--cinza); }

/* ---------- Catálogo ---------- */
.catalogo { padding: 56px 0 8px; scroll-margin-top: var(--topo); }
.catalogo-topo { text-align: center; }
.catalogo-topo .sub { margin-inline: auto; }
.atalhos {
  position: sticky; top: var(--topo); z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-top: 28px; padding: 12px max(16px, calc((100% - 1120px) / 2));
  background: rgba(246, 249, 253, .97); /* sem desfoque: o blur por trás pesa a rolagem no celular */
  border-block: 1px solid var(--linha);
}
.atalhos::-webkit-scrollbar { display: none; }
.atalhos a {
  flex: none; padding: 9px 18px; border: 1px solid var(--linha); border-radius: 999px; background: #fff;
  color: var(--marinho-2); font-size: .92rem; font-weight: 700; text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.atalhos a:hover { border-color: var(--azul); color: var(--azul); }
.atalhos a[aria-current="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }

.categoria { padding: 26px 0 44px; scroll-margin-top: calc(var(--topo) + 60px); }

/* Faixa de mar: a linha da água em cima, bolhas subindo e o bicho atravessando (fundo-mar.js) */
.mar { --meio: 69px; --sobe: -80px; position: relative; height: 118px; overflow: hidden; }
.mar::before { content: ""; position: absolute; inset: 20px 0 0; background: linear-gradient(180deg, rgba(4, 88, 176, .08), rgba(4, 88, 176, 0) 85%); }
.mar-linha { position: absolute; left: 0; top: 12px; width: 200%; max-width: none; height: 16px; overflow: visible; }
.mar-linha path { fill: none; stroke: rgba(4, 88, 176, .32); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bolha {
  position: absolute; bottom: 10px; width: 10px; height: 10px; border-radius: 50%; opacity: .55;
  border: 1.5px solid rgba(4, 88, 176, .4);
  background: radial-gradient(circle at 32% 30%, #fff 0 22%, rgba(255, 255, 255, .2) 45%, rgba(4, 88, 176, .06) 70%);
}
.bolha:nth-of-type(1) { left: 9%; }
.bolha:nth-of-type(2) { left: 27%; width: 7px; height: 7px; }
.bolha:nth-of-type(3) { left: 52%; width: 12px; height: 12px; }
.bolha:nth-of-type(4) { left: 71%; width: 8px; height: 8px; }
.bolha:nth-of-type(5) { left: 88%; width: 11px; height: 11px; }
/* parado (sem animação): no meio da faixa. Animado: o GSAP leva de uma borda à outra */
.bicho { position: absolute; left: calc(50% - var(--w) / 2); top: calc(var(--meio) - var(--h) / 2); width: var(--w); height: var(--h); max-width: none; overflow: visible; }
.mar-anima .bicho { left: 0; will-change: transform; }
.mar-anima.vivo .mar-linha, .abertura-onda { will-change: transform; }
/* bolhas: sobem em loop enquanto a faixa está na tela */
.mar-anima .bolha { opacity: 0; }
.mar-anima.vivo .bolha { animation: bolha 2.6s ease-in infinite; will-change: transform, opacity; }
.mar-anima.vivo .bolha:nth-of-type(2) { animation-duration: 2.2s; animation-delay: -.6s; }
.mar-anima.vivo .bolha:nth-of-type(3) { animation-duration: 3s; animation-delay: -1.3s; }
.mar-anima.vivo .bolha:nth-of-type(4) { animation-duration: 2.4s; animation-delay: -1.9s; }
.mar-anima.vivo .bolha:nth-of-type(5) { animation-duration: 2.8s; animation-delay: -.3s; }
@keyframes bolha {
  0% { transform: translateY(18px); opacity: 0; }
  15%, 75% { opacity: .9; }
  100% { transform: translateY(var(--sobe)); opacity: 0; }
}
.bicho-lula { --w: 160px; --h: 71px; }
.bicho-camarao { --w: 124px; --h: 82px; }
.bicho-tilapia { --w: 150px; --h: 84px; }
.bicho-siri { --w: 112px; --h: 75px; top: auto; bottom: 4px; }
.bicho-cardume { --w: 180px; --h: 81px; }

/* mexidas do corpo: só com a faixa na tela */
.mar-anima.vivo .mar-linha { animation: mar-anda 10s linear infinite; }
.tilapia-rabo { transform-box: view-box; transform-origin: 38px 45px; }
.tilapia-nadadeira { transform-box: view-box; transform-origin: 112px 50px; }
.vivo .tilapia-rabo { animation: rabo .42s ease-in-out infinite alternate; }
.vivo .tilapia-nadadeira { animation: nadadeira .55s ease-in-out infinite alternate; }
.braco { transform-box: view-box; transform-origin: 110px 40px; }
.vivo .braco { animation: braco .9s ease-in-out infinite alternate; }
.vivo .braco:nth-child(2n) { animation-delay: -.45s; }
.vivo .braco:nth-child(3n) { animation-duration: 1.1s; }
.vivo .bicho-lula { animation: lula-pulsa 1s ease-in-out infinite; }
.camarao-cauda { transform-box: view-box; transform-origin: 124px 90px; }
.vivo .camarao-cauda { animation: cauda .5s ease-in-out infinite alternate; }
.camarao-patas path { transform-box: fill-box; transform-origin: 50% 0; }
.vivo .camarao-patas path { animation: pata .32s ease-in-out infinite alternate; }
.vivo .camarao-patas path:nth-child(2n) { animation-delay: -.16s; }
.camarao-antenas { transform-box: view-box; transform-origin: 26px 48px; }
.vivo .camarao-antenas { animation: antena 1.6s ease-in-out infinite alternate; }
.siri-pernas-e { transform-box: view-box; transform-origin: 46px 60px; }
.siri-pernas-d { transform-box: view-box; transform-origin: 104px 60px; }
.vivo .siri-pernas-e { animation: perna-e .3s ease-in-out infinite alternate; }
.vivo .siri-pernas-d { animation: perna-d .3s ease-in-out infinite alternate; }
.vivo .siri-garras { animation: garras 1.2s ease-in-out infinite alternate; }
.vivo .bicho-siri { animation: siri-anda .3s ease-in-out infinite alternate; }
.peixinho { transform-box: fill-box; transform-origin: 50% 50%; }
.vivo .peixinho { animation: peixinho .7s ease-in-out infinite alternate; }
.vivo .peixinho:nth-child(2) { animation-delay: -.2s; }
.vivo .peixinho:nth-child(3) { animation-delay: -.45s; }
.vivo .peixinho:nth-child(4) { animation-duration: .55s; animation-delay: -.1s; }
@keyframes mar-anda { to { transform: translateX(-50%); } }
@keyframes rabo { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes nadadeira { from { transform: rotate(-12deg); } to { transform: rotate(16deg); } }
@keyframes braco { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes lula-pulsa { 0%, 100% { scale: 1 1; } 35% { scale: .9 1.08; } }
@keyframes cauda { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes pata { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
@keyframes antena { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes perna-e { from { transform: rotate(-8deg); } to { transform: rotate(6deg); } }
@keyframes perna-d { from { transform: rotate(6deg); } to { transform: rotate(-8deg); } }
@keyframes garras { to { transform: translateY(-3px); } }
@keyframes siri-anda { to { translate: 0 -2px; } }
@keyframes peixinho { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(3px) rotate(3deg); } }

.cat-cabeca { display: grid; gap: 6px; margin: 6px 0 26px; }
.cat-num { font-family: var(--marca); font-size: .95rem; font-weight: 700; letter-spacing: .12em; color: var(--dourado-escuro); }
.cat-cabeca h3 { font-family: var(--marca); font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 900; line-height: 1.1; color: var(--marinho); }
.cat-cabeca h3::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--dourado); }
.cat-cabeca p:last-child { color: var(--cinza); font-size: 1.02rem; }

.cat-grade { display: grid; gap: 22px; }
.produto {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--linha); border-radius: 24px;
  box-shadow: 0 18px 40px rgba(10, 42, 90, .07);
}
.produto-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--azul-claro); }
.produto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.produto:hover .produto-foto img { transform: scale(1.045); }
.selo-gelo {
  position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--azul);
  font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(4, 21, 46, .16);
}
.produto-info { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 22px 24px; }
.produto h4 { font-size: 1.32rem; font-weight: 800; line-height: 1.2; color: var(--marinho); }
.produto-frase { font-family: var(--mao); font-size: 1.12rem; line-height: 1.3; color: var(--azul); }
.produto-itens { display: grid; gap: 7px; color: #3b4c63; font-size: .95rem; }
.produto-itens li { display: flex; align-items: flex-start; gap: 9px; }
.produto-itens li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .6em; border-radius: 50%; background: var(--dourado); }
.produto-pe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--linha);
}
.produto-preco { font-weight: 700; color: var(--marinho-2); }
.produto-pe .btn { flex: 1 1 210px; }

.tambem-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  border: 1.5px solid var(--linha); border-radius: 999px; background: #fff;
  color: var(--marinho-2); font-weight: 700; text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.chip svg { color: var(--azul); }
.chip:hover { border-color: var(--azul); color: var(--azul); transform: translateY(-2px); }
.tambem-mais { margin-top: 18px; color: var(--cinza); }

/* ---------- Tudo congelado ---------- */
.congelado { padding: 72px 0; text-align: center; background: linear-gradient(180deg, var(--espuma) 0%, var(--azul-claro) 100%); }
.congelado-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.congelado-lista li {
  display: grid; justify-items: center; align-content: start; gap: 4px; padding: 26px 14px;
  border-radius: 22px; background: #fff; color: var(--cinza); font-size: .95rem; line-height: 1.4;
  box-shadow: 0 12px 30px rgba(10, 42, 90, .06);
}
.congelado-lista strong { font-size: 1.08rem; color: var(--marinho); }
.icone {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%;
  background: var(--marinho); color: var(--dourado); box-shadow: 0 0 0 6px rgba(4, 88, 176, .1);
}

/* ---------- Atacado e varejo ---------- */
.atacado {
  padding: 64px 0; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, #0f3b78 0%, rgba(15, 59, 120, 0) 60%), var(--marinho);
}
.atacado .chapeu { color: var(--dourado); }
.atacado h2 { color: #fff; }
.atacado p:not(.chapeu) { max-width: 46ch; margin-top: 12px; color: #c7d6ea; }
.atacado-dentro { display: grid; gap: 26px; }
.atacado-dentro .btn { justify-self: start; }

/* ---------- Avaliações ---------- */
.avaliacoes { padding: 72px 0; text-align: center; background: #fff; scroll-margin-top: var(--topo); }
.avaliacoes-lista { display: grid; gap: 16px; margin: 30px 0; text-align: left; }
.avaliacao { display: grid; gap: 10px; padding: 24px; border: 1px solid var(--linha); border-radius: 22px; background: var(--espuma); }
.avaliacao-quem { color: var(--cinza); font-size: .9rem; font-weight: 600; }
.estrelas { display: inline-flex; gap: 3px; color: var(--dourado); }
.avaliacoes-vazio { max-width: 580px; margin: 30px auto; padding: 32px 24px; border: 1.5px dashed rgba(4, 88, 176, .35); border-radius: 26px; background: var(--espuma); }
.vazio-titulo {
  margin: 14px 0 8px; font-family: var(--marca); font-size: clamp(1.15rem, 3.6vw, 1.4rem); font-weight: 900;
  line-height: 1.25; color: var(--marinho); text-wrap: balance;
}
.avaliacoes-vazio p:last-child { color: var(--cinza); }

/* ---------- Instagram ---------- */
.instagram { padding: 72px 0; text-align: center; }
.instagram .sub { margin-inline: auto; }
.instagram .sub a { color: var(--azul); font-weight: 700; text-decoration: none; }
.insta-grade {
  display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 12px;
  margin: 30px -16px 28px; padding: 4px 16px 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.insta-grade::-webkit-scrollbar { display: none; }
.insta-grade li { scroll-snap-align: center; }
.insta-grade a { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; box-shadow: 0 12px 26px rgba(10, 42, 90, .12); }
.insta-grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.insta-grade a:hover img { transform: scale(1.05); }

/* ---------- Onde estamos ---------- */
.onde { padding: 72px 0 80px; scroll-margin-top: var(--topo); }
.onde .selo-novo { color: #8f5a12; background: rgba(243, 202, 84, .2); border-color: rgba(179, 114, 24, .35); }
.onde h2 { margin-top: 14px; }
.onde-dentro { display: grid; gap: 30px; }
.onde-foto { margin-top: 22px; overflow: hidden; border-radius: 22px; box-shadow: 0 16px 36px rgba(10, 42, 90, .12); }
.onde-foto img { width: 100%; }
.onde-info { display: grid; gap: 14px; margin-top: 24px; }
.onde-info li { display: flex; align-items: flex-start; gap: 12px; color: var(--marinho-2); font-weight: 600; }
.onde-info svg { flex: none; margin-top: 1px; color: var(--azul); }
.onde .botoes { justify-content: flex-start; }
.mapa { width: 100%; height: 100%; min-height: 380px; border: 0; border-radius: 24px; background: var(--azul-claro); box-shadow: 0 16px 36px rgba(10, 42, 90, .1); }

/* ---------- Rodapé e WhatsApp flutuante ---------- */
.rodape { padding: 44px 0 110px; background: var(--marinho); color: #b9c9de; font-size: .95rem; }
.rodape-dentro { display: grid; justify-items: center; gap: 16px; text-align: center; }
.rodape .marca img { width: 54px; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.rodape-links a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; }
.rodape-links a:hover { color: var(--dourado); }

.whats-flutuante {
  position: fixed; right: 18px; bottom: 18px; z-index: 25;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--azul); color: #fff;
  box-shadow: 0 0 0 4px #fff, 0 12px 28px rgba(4, 88, 176, .45);
  transition: opacity .35s, transform .35s, background-color .2s;
}
.whats-flutuante:hover { background: var(--azul-forte); }
.whats-flutuante.escondido { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- Abertura da onda (intro.js) ---------- */
.intro { display: none; }
.com-intro body { overflow: hidden; }
.com-intro .intro {
  position: fixed; inset: 0; z-index: 100; display: block; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 45%, #0e3266 0%, var(--marinho) 75%);
}
.intro.saindo { transform: translateY(-100%); transition: transform .75s cubic-bezier(.7, 0, .25, 1); }
.intro-palco {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center;
  gap: clamp(10px, 2.2vh, 20px); padding: 16px; text-align: center;
}
.intro-selo {
  width: clamp(84px, 15vh, 140px); opacity: 0; transform: scale(.5) rotate(-15deg);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5));
  transition: opacity .45s, transform .7s cubic-bezier(.2, 1.5, .4, 1);
}
.intro-selo.mostra { opacity: 1; transform: none; }
.intro-nome {
  display: grid; font-family: var(--marca); font-size: clamp(2.3rem, 9.5vw, 7rem); font-weight: 900;
  line-height: 1; letter-spacing: .03em; text-transform: uppercase;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #e9b847 0%, #f3ca54 30%, #fff6d0 48%, #f3ca54 66%, #d9a23a 100%);
  background-size: 300% 100%; background-position: 100% 0;
  clip-path: inset(-50% 100% -50% -10%); /* escondido até a onda passar */
}
.intro-nome.brilha { animation: brilho-molhado 1.1s ease-out forwards; filter: drop-shadow(0 0 22px rgba(243, 202, 84, .4)); }
@keyframes brilho-molhado { from { background-position: 100% 0; } to { background-position: 0 0; } }
.intro-lema {
  color: #c7d6ea; font-size: clamp(.72rem, 2.4vw, 1rem); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; transform: translateY(10px); transition: opacity .5s .15s, transform .5s .15s;
}
.intro-lema.mostra { opacity: 1; transform: none; }
.intro-mar { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; transition: opacity .3s; }
.onda-espuma { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.onda-espuma.fina { stroke: rgba(214, 236, 255, .55); stroke-width: 2.2; }
.intro-gotas { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .3s; }
.intro-gotas i {
  position: absolute; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 35% 35%, #fff 0 30%, rgba(196, 228, 255, .85) 60%, rgba(196, 228, 255, 0) 72%);
}
.intro-gotas b { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(214, 236, 255, .35) 40%, rgba(214, 236, 255, 0) 68%); }
.intro-pular {
  position: absolute; right: 16px; bottom: 18px; z-index: 4; padding: 8px 18px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(4, 21, 46, .4);
  color: #fff; font-size: .85rem; font-weight: 700;
}
.intro-pular:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Celular ---------- */
@media (max-width: 639px) {
  :root { --topo: 58px; }
  .topo-links a:not(.topo-insta) { display: none; }
  .marca img { width: 38px; }
  .marca span { font-size: .95rem; }
  .abertura { padding: calc(var(--topo) + 22px) 0 92px; }
  .abertura-logo { width: 104px; }
  .mar { --meio: 62px; --sobe: -66px; height: 104px; }
  .bicho-lula { --w: 128px; --h: 57px; }
  .bicho-camarao { --w: 100px; --h: 66px; }
  .bicho-tilapia { --w: 122px; --h: 69px; }
  .bicho-siri { --w: 92px; --h: 61px; }
  .bicho-cardume { --w: 150px; --h: 68px; }
  .produto-info { padding: 20px 18px 22px; }
}
@media (max-width: 559px) {
  .abertura .botoes .btn, .onde .botoes .btn { flex: 1 1 100%; }
  .atacado-dentro .btn { justify-self: stretch; }
}

/* ---------- PC ---------- */
@media (min-width: 760px) {
  .atalhos { justify-content: center; }
  .cat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .cat-grade.um-so { grid-template-columns: 1fr; }
  .um-so .produto { flex-direction: row; }
  .um-so .produto-foto { flex: 1.15; min-height: 340px; aspect-ratio: auto; }
  .um-so .produto-info { flex: 1; justify-content: center; padding: 34px; }
  .um-so .produto-pe { margin-top: 8px; }
  .avaliacoes-lista { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .insta-grade {
    grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
    max-width: 860px; margin: 34px auto 30px; padding: 0; overflow: visible;
  }
}
@media (min-width: 860px) {
  .congelado-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .atacado-dentro { grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
}
@media (min-width: 900px) {
  .abertura { padding-bottom: 130px; }
  .abertura-dentro { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 56px; text-align: left; }
  .abertura-logo { width: 280px; }
  .linha-fina { margin-left: 0; }
  .abertura .botoes, .abertura-info { justify-content: flex-start; }
  .onde-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; }
  .mar { --meio: 88px; --sobe: -112px; height: 150px; }
  .bicho-lula { --w: 210px; --h: 93px; }
  .bicho-camarao { --w: 160px; --h: 105px; }
  .bicho-tilapia { --w: 200px; --h: 112px; }
  .bicho-siri { --w: 146px; --h: 97px; }
  .bicho-cardume { --w: 240px; --h: 108px; }
}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .abertura-onda { animation: mar-anda 18s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}