/* Paleta da Plataforma Shark (preto profundo + azul), organizada em "capítulos de profundidade":
   cada seção é uma faixa de cor chapada que sobe um tom, do fundo do mar (quase preto) até a superfície (azul). */
:root {
  color-scheme: dark;
  /* profundidades, da mais funda para a superfície; vizinhas sempre diferem em claridade */
  --prof-0: #080808;
  --prof-1: #0a1122;
  --prof-2: #0f1a35;
  --prof-3: #142449;
  --prof-4: #1b2f5e;
  --superficie: #3f6ee8;

  /* uma família de cinzas frios, levemente azulados */
  --tinta: #eef1f7;        /* texto corrido e títulos: tinta cheia */
  --tinta-suave: #a9b4cc;  /* só notas secundárias (legendas, datas) */
  --azul: #3f6ee8;         /* botões e campos de cor */
  --azul-texto: #7a9cf4;   /* azul legível para links e destaques sobre o fundo escuro */
  --veu: #ffffff0a;        /* um degrau de tom sobre qualquer profundidade */

  /* nomes antigos, mantidos para as páginas de Privacidade e Exclusão */
  --fundo: var(--prof-0);
  --cartao: var(--veu);
  --borda: #ffffff14;
  --texto: var(--tinta);
  --forte: var(--tinta);
  --suave: var(--tinta-suave);
  --apagado: var(--tinta-suave);
  --azul-suave: #3f6ee822;

  /* tipografia: as duas letras da plataforma e só cinco tamanhos */
  --titulo: "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --corpo: "Sora", system-ui, sans-serif;
  --t-display: clamp(3.25rem, 7vw, 6rem);
  --t-titulo: clamp(2.5rem, 5.5vw, 5.25rem);
  --t-sub: 1.75rem;
  --t-texto: 1.125rem;
  --t-pequeno: 0.875rem;

  --largura: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--prof-0);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: var(--t-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--azul-texto); }
a:hover { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 800;
  line-height: .95;
  color: var(--tinta);
  margin: 0 0 .45em;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-titulo); }
h3 { font-size: var(--t-sub); line-height: 1; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
.destaque { color: var(--azul-texto); }

.conteudo { max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
section { padding: 120px 0 136px; }

/* capítulos: cada seção na sua profundidade, com borda dura entre elas */
.abertura { background: var(--prof-0); }
#dores { background: var(--prof-1); }
#metodo { background: var(--prof-2); }
#servicos { background: var(--prof-3); }
#quem-somos { background: var(--prof-4); }
#duvidas { background: var(--prof-3); }
.chamada { background: var(--superficie); }
.chamada h2, .chamada .destaque, .chamada .intro { color: #fff; }

.etiqueta {
  display: inline-block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--azul-texto);
  margin-bottom: 14px;
}
.intro { color: var(--tinta); max-width: 62ch; font-size: var(--t-texto); }

/* Cabeçalho */
.topo {
  position: sticky; top: 0; z-index: 10;
  background: var(--prof-0);
}
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--forte); text-decoration: none; font-weight: 700; }
.marca img { height: 34px; width: auto; }
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { color: var(--tinta-suave); text-decoration: none; font-size: var(--t-pequeno); }
/* o botão do menu mantém a letra branca (antes ficava cinza sobre azul, ilegível) */
.menu a.botao { color: #fff; }
.menu a:hover { color: var(--tinta); }
.menu a.botao:hover { color: #fff; }
@media (max-width: 760px) { .menu .some-no-celular { display: none; } }

/* Botões */
.botao {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 10px;
}
.botao:hover { background: #335ed0; color: #fff; }
.botao.pequeno { padding: 9px 16px; font-size: var(--t-pequeno); }
.botao.vazado { background: transparent; border: 1px solid var(--borda); color: var(--forte); }
.botao.vazado:hover { border-color: var(--azul); }

/* Topo da página inicial */
.abertura { padding: 96px 0 88px; border-top: 0; }
.abertura .grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.abertura .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Cartão do Rafa: foto em cima, legenda embaixo com nome, uma frase e o tubarãozinho da marca */
.cartao-rafa { background: var(--prof-1); border: 1px solid var(--borda); border-radius: 18px; overflow: hidden; }
.cartao-rafa { max-width: 440px; justify-self: end; }
.cartao-rafa .foto img { width: 100%; height: auto; aspect-ratio: 1 / 0.92; object-fit: cover; object-position: 50% 20%; }
.cartao-rafa .legenda { position: relative; display: grid; gap: 6px; padding: 20px 22px 18px; font-size: var(--t-pequeno); color: var(--tinta-suave); }
/* os dois números de autoridade, na letra dos títulos */
.cartao-rafa .numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 4px; padding-top: 14px; border-top: 1px solid var(--borda); }
.cartao-rafa .numeros span { display: grid; gap: 2px; line-height: 1.35; }
.cartao-rafa .numeros b { font-family: var(--titulo); font-size: var(--t-sub); font-weight: 800; line-height: 1; color: var(--azul-texto); text-transform: uppercase; }
.cartao-rafa .cardume { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cartao-rafa .cardume a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.cartao-rafa .cardume a:hover { color: var(--azul-texto); }
.cartao-rafa .legenda strong { color: var(--tinta); font-size: 1rem; }
/* a silhueta olha para a esquerda; espelhada no mesmo transform do bote para nadar para a direita */
.cartao-rafa .tubarao { width: 56px; height: 21px; color: var(--azul-texto); transform: scaleX(-1); }
@media (max-width: 860px) { .abertura .grade { grid-template-columns: 1fr; } .abertura { padding-top: 56px; } }

/* Cartões em grade */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 36px; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 26px; }
.cartao h3 { margin-bottom: .35em; }
.cartao p { color: var(--tinta); margin: 0; font-size: var(--t-texto); }
.cartao .numero { font-family: var(--titulo); font-size: var(--t-titulo); font-weight: 800; color: var(--azul); line-height: 1; margin-bottom: 10px; }

/* Fases do trabalho */
.fases { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fases li { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 22px 18px; }
.fases .prazo { color: var(--azul-texto); font-weight: 600; font-size: var(--t-pequeno); letter-spacing: .08em; text-transform: uppercase; }
.fases h3 { margin: 6px 0 .3em; }
.fases p { color: var(--tinta); font-size: var(--t-pequeno); margin: 0; }
.fases li:last-child { background: var(--azul); border-color: var(--azul); }
.fases li:last-child .prazo, .fases li:last-child p { color: #fff; }
@media (max-width: 900px) { .fases { grid-template-columns: 1fr; } }

/* Depoimentos: vídeos em pé; no celular viram uma fileira que desliza para o lado */
#depoimentos { background: var(--prof-2); }
.depoimentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.depoimento { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); background: var(--prof-1); }
.depoimento video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
/* play azul no meio; ao tocar ele some e ficam os controles do navegador. O link do Instagram fica pequeno no pé */
.play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--azul) no-repeat 55% 50% / 24px; box-shadow: 0 10px 30px -6px #3f6ee8aa; transition: transform 200ms var(--ease-out);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 4l14 8-14 8z'/%3E%3C/svg%3E"); }
.play:hover { transform: scale(1.08); }
.tocando .play { display: none; }
.ver-ig { position: absolute; left: 12px; bottom: 12px; color: #fff; font-size: var(--t-pequeno); font-weight: 600; text-decoration: none; text-shadow: 0 1px 6px #000c; }
.ver-ig:hover { color: var(--azul-texto); }
.tocando .ver-ig { display: none; } /* não briga com a barra de controles */
@media (max-width: 900px) {
  .depoimentos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 64%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .depoimento { scroll-snap-align: start; }
}

/* Perguntas */
details { border-bottom: 1px solid var(--borda); padding: 18px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--forte); }
details p { color: var(--tinta); margin: 12px 0 0; max-width: 62ch; }

/* Chamada final */
.chamada { text-align: center; }
.chamada .intro { margin: 0 auto 28px; }
/* na superfície (fundo azul) o botão inverte: branco com letra azul-escura */
.chamada .botao { background: #fff; color: var(--prof-2); }
.chamada .botao:hover { background: var(--tinta); color: var(--prof-2); }

/* Rodapé */
.rodape { background: var(--prof-0); padding: 64px 0 48px; color: var(--tinta-suave); font-size: var(--t-pequeno); }
.rodape .grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.rodape strong { color: var(--tinta); }
.rodape a { color: var(--tinta); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 6px; }
.rodape .final { margin-top: 40px; font-size: var(--t-pequeno); }
@media (max-width: 760px) { .rodape .grade { grid-template-columns: 1fr; } }

/* Páginas de texto (privacidade, exclusão) */
.texto-legal { max-width: 780px; margin: 0 auto; padding: 64px 20px 88px; }
.texto-legal h1 { font-size: var(--t-titulo); }
.texto-legal h2 { font-size: var(--t-sub); margin-top: 1.8em; }
.texto-legal p, .texto-legal li { color: var(--tinta); max-width: 68ch; }
.texto-legal strong { color: var(--forte); }
.texto-legal .atualizado { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.texto-legal .aviso { background: var(--azul-suave); border: 1px solid var(--azul); border-radius: 12px; padding: 18px 20px; margin: 24px 0; }
.texto-legal .aviso p { margin: 0; color: var(--texto); }

/* Dado que ainda falta preencher: amarelo para ninguém publicar sem ver */
.pendente { background: #e5c34a; color: #111; padding: 0 4px; border-radius: 3px; font-weight: 600; }
.grade-cartoes.quatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grade-cartoes.quatro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grade-cartoes.quatro { grid-template-columns: 1fr; } }

/* ===== Efeitos (impacto e navegação) ===== */

/* Cursor de tubarão nos itens clicáveis, igual à plataforma; 3 3 = ponta do focinho */
a[href], summary, button {
  cursor: url("imagens/cursor-tubarao.png") 3 3, pointer;
  cursor: image-set(url("imagens/cursor-tubarao.png") 1x, url("imagens/cursor-tubarao-2x.png") 2x) 3 3, pointer;
}

/* Silhuetas de tubarão: a imagem branca vira máscara e pega a cor do texto */
.silhueta {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--img) center / contain no-repeat;
  mask: var(--img) center / contain no-repeat;
}

/* a faixa inclinada passa um pouco da borda: corta sem criar rolagem para o lado */
html, body { overflow-x: clip; }

/* Curvas de movimento, uma vez para a página toda: --ease-out para tudo que entra ou responde ao mouse;
   --ease-bote passa um pouco do ponto e volta, só no bote do tubarão (follow-through) */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-bote: cubic-bezier(0.34, 1.45, 0.64, 1);
}

.topo { transition: box-shadow 200ms ease, background 200ms ease; }
.topo.rolou { box-shadow: 0 8px 30px #0009; background: #080808f2; }

/* Botões: aperto ao clicar; brilho que passa e seta que anda no mouse */
.botao { position: relative; overflow: hidden; transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background 200ms ease; }
.botao::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, #ffffff55 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 300ms var(--ease-out);
}
.botao .seta { display: inline-block; transition: transform 200ms var(--ease-out); }
.botao:active { transform: scale(0.97); }
.botao.grande { padding: 18px 34px; font-size: var(--t-texto); }

/* Abertura: palavra gigante ao fundo e título que sobe linha a linha */
.abertura { position: relative; overflow: hidden; padding-bottom: 150px; }
.palavra-fundo {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  font-family: var(--titulo); font-weight: 900; font-size: clamp(9rem, 32vw, 30rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px #ffffff10; pointer-events: none; user-select: none; white-space: nowrap;
}
.abertura .grade { position: relative; }
/* mantém a frase do topo em 3 linhas com a escala de letras nova */
.abertura h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
h1 .linha { display: block; overflow: hidden; padding-bottom: .04em; }
h1 .linha > span { display: inline-block; animation: sobe 300ms var(--ease-out) both; }
h1 .linha:nth-child(2) > span { animation-delay: 60ms; }
h1 .linha:nth-child(3) > span { animation-delay: 120ms; }
@keyframes sobe { from { transform: translateY(105%); } }
/* "backwards": depois da entrada a animação sai de cena, para o hover do cartão do Rafa poder subir com transição */
.entra { animation: aparece 300ms 180ms var(--ease-out) backwards; }
.retrato.entra { animation-delay: 120ms; }
@keyframes aparece { from { opacity: 0; transform: translateY(16px); } }

.retrato { margin: 0; }
.cartao-rafa { transition: transform 200ms var(--ease-out), border-color 200ms ease, box-shadow 200ms var(--ease-out); }
.cartao-rafa .foto img { transition: transform 300ms var(--ease-out); }
.cartao-rafa .tubarao { transition: transform 280ms var(--ease-bote); }

/* Linha da água com a barbatana cruzando.
   O nado usa `translate` e o balanço usa `transform`: são propriedades separadas, as duas rodam na placa de vídeo */
.mar { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; color: var(--azul); }
.mar svg { position: absolute; bottom: 0; width: 200%; height: 40px; animation: ondas 9s linear infinite; }
.mar .onda { fill: #0c1426; stroke: #3f6ee866; stroke-width: 1.5; }
@keyframes ondas { to { transform: translateX(-25%); } }
.barbatana-nadando { position: absolute; left: 0; bottom: 22px; width: 54px; height: 60px; color: #cfd8f0;
  animation: nada 16s linear infinite, balanca 2.4s ease-in-out infinite; }
@keyframes nada { from { translate: -80px 0; } to { translate: calc(100vw + 80px) 0; } }
@keyframes balanca { 50% { transform: translateY(5px); } }

/* Faixa azul com os serviços passando (marquee: velocidade constante, para no mouse) */
.faixa { background: var(--azul); overflow: hidden; padding: 14px 0; transform: rotate(-1.2deg); margin: -8px -10px 0; position: relative; z-index: 2; }
.faixa-trilho { display: flex; align-items: center; gap: 28px; width: max-content; animation: corre 30s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa span { font-family: var(--titulo); font-weight: 800; font-size: var(--t-sub); text-transform: uppercase; color: #fff; white-space: nowrap; }
.faixa i { width: 34px; height: 14px; background: #fff; -webkit-mask: url(imagens/tubaroes/tubarao-longo.png) center / contain no-repeat; mask: url(imagens/tubaroes/tubarao-longo.png) center / contain no-repeat; }
@keyframes corre { to { transform: translateX(-50%); } }

/* Aparecer ao rolar (só quando o script roda; sem ele tudo fica visível).
   --atraso faz a sequência entre vizinhos; o script apaga ele depois da entrada, para o mouse responder na hora */
.js .revela { opacity: 0; transform: translateY(16px);
  transition: opacity 300ms var(--ease-out) var(--atraso, 0ms), transform 300ms var(--ease-out) var(--atraso, 0ms); }
.js .revela.visivel { opacity: 1; transform: none; }

/* Cartões: sobem, a borda acende e um brilho azul segue o mouse */
.cartao, .fases li { position: relative; overflow: hidden; isolation: isolate; }
.cartao, .fases li, .js .cartao.revela, .js .fases li.revela {
  transition: opacity 300ms var(--ease-out) var(--atraso, 0ms), transform 200ms var(--ease-out) var(--atraso, 0ms),
    border-color 200ms ease, box-shadow 200ms var(--ease-out);
}
.cartao::before, .fases li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 200ms ease;
  background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), #3f6ee833, transparent 70%);
}

/* Cartões das dores: o tubarão dá o bote, o rastro se desenha e o problema vira a solução */
.dor .trilho { height: 24px; margin-bottom: 18px; transition: transform 200ms var(--ease-out); }
/* a silhueta olha para a esquerda; o bote vai para a direita, então ela é espelhada (`scale`, separado do transform do bote) */
.dor .tubarao { width: 64px; height: 24px; color: var(--azul-texto); scale: -1 1; }
.dor .rastro { height: 2px; width: 48px; background: var(--azul-texto); margin: 0 0 14px; transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease-out); }
.dor .troca { display: grid; }
.dor .troca > p { grid-area: 1 / 1; margin: 0; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), filter 250ms ease; }
.dor .solucao { opacity: 0; transform: translateY(8px); filter: blur(2px); }
.dor .solucao strong { display: block; color: var(--azul-texto); font-size: var(--t-pequeno); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
@keyframes bote { 40% { transform: rotate(8deg); } }


/* Serviços: 3 por linha, índice no canto e linha azul que cresce embaixo */
.grade-cartoes.servicos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grade-cartoes.servicos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grade-cartoes.servicos { grid-template-columns: 1fr; } }
.servicos .indice { position: absolute; top: 18px; right: 22px; font-family: var(--titulo); font-weight: 800; font-size: var(--t-pequeno); color: var(--tinta-suave); transition: color 200ms ease; }
.servicos .cartao::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease-out); }

/* Todos os efeitos de "passar o mouse" só em aparelhos com mouse: no celular o toque deixava a caixa presa no alto */
@media (hover: hover) and (pointer: fine) {
  .botao:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -6px #3f6ee8aa; }
  .botao:hover:active { transform: translateY(-2px) scale(0.97); }
  .botao:hover::after { transform: translateX(120%); }
  .botao.vazado:hover { box-shadow: none; }
  .botao:hover .seta { transform: translateX(4px); }

  .cartao-rafa:hover { transform: translateY(-6px); border-color: #3f6ee8aa; box-shadow: 0 24px 50px -24px #3f6ee8aa; }
  .cartao-rafa:hover .foto img { transform: scale(1.03); }
  .cartao-rafa:hover .tubarao { transform: translateX(10px) scaleX(-1); }

  /* os seletores longos vencem o "transform: none" de quem já entrou na tela (.js .revela.visivel) */
  .cartao:hover, .fases li:hover,
  .js .cartao.revela.visivel:hover, .js .fases li.revela.visivel:hover { transform: translateY(-6px); border-color: #3f6ee8aa; box-shadow: 0 24px 50px -24px #3f6ee8aa; }
  .cartao:hover::before, .fases li:hover::before { opacity: 1; }
  .fases li:last-child:hover { border-color: #fff; }

  .dor:hover .trilho { transform: translateX(calc(100% - 64px)); transition: transform 280ms var(--ease-bote); }
  .dor:hover .tubarao { animation: bote 280ms var(--ease-out); }
  .dor:hover .rastro { transform: scaleX(1); transition-delay: 40ms; }
  .dor:hover .problema { opacity: 0; transform: translateY(-8px); filter: blur(2px); }
  .dor:hover .solucao { opacity: 1; transform: none; filter: none; }

  .servicos .cartao:hover::after { transform: scaleX(1); }
  .servicos .cartao:hover .indice { color: var(--azul-texto); }
}
/* toque (celular): sem "passar o mouse", a solução fica visível embaixo do problema */
@media (hover: none), (pointer: coarse) {
  .dor .troca { display: block; }
  .dor .solucao { opacity: 1; transform: none; filter: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
  .dor .rastro { transform: scaleX(1); }

  /* No celular não existe "passar o mouse": o cartão que está no meio da tela recebe .ativo (efeitos.js)
     e mostra os mesmos efeitos do hover. Sem subir o cartão, para a tela não "pular" enquanto a pessoa rola. */
  .cartao.ativo, .fases li.ativo, .cartao-rafa.ativo { border-color: #3f6ee8aa; box-shadow: 0 24px 50px -24px #3f6ee8aa; }
  .cartao-rafa.ativo .tubarao { transform: translateX(10px) scaleX(-1); }
  .cartao.ativo::before, .fases li.ativo::before { opacity: 1; }
  .fases li:last-child.ativo { border-color: #fff; }
  .dor.ativo .trilho { transform: translateX(calc(100% - 64px)); transition: transform 280ms var(--ease-bote); }
  .dor.ativo .tubarao { animation: bote 280ms var(--ease-out); }
  .servicos .cartao.ativo::after { transform: scaleX(1); }
  .servicos .cartao.ativo .indice { color: var(--azul-texto); }
}

/* Rota das fases: linha que enche e tubarão que nada até o recorde (o script mexe só em transform, direto em cada um) */
.titulo-fases { margin-top: 80px; font-size: var(--t-sub); }
.rota { margin-top: 24px; }
.rota-linha { position: relative; height: 34px; margin: 0 8px 4px; }
.rota-linha::before, .rota-progresso { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; border-radius: 2px; }
.rota-linha::before { background: var(--borda); }
.rota-progresso { background: var(--azul); box-shadow: 0 0 12px var(--azul); transform: scaleX(0); transform-origin: left; }
.rota-tubarao { position: absolute; top: 0; left: 0; width: 90px; height: 34px; color: var(--forte); transform: scaleX(-1); } /* espelhado: nada para a direita (o script mantém o espelho junto do deslocamento) */
.fases { margin-top: 12px; }

/* Quem somos: o tubarão atravessa no ritmo da rolagem e o medidor de profundidade enche */
.quem { position: relative; overflow: hidden; }
.quem .conteudo { position: relative; }
.tubarao-passa { position: absolute; top: 18%; left: 0; width: min(820px, 90vw); aspect-ratio: 1100 / 412; color: #ffffff14;
  transform: translateX(100vw); pointer-events: none; will-change: transform; }
.quem-grade { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .quem-grade { grid-template-columns: 1fr; gap: 40px; } }

.medidor { position: relative; padding-left: 92px; }
.medidor-linha { position: absolute; left: 56px; top: 8px; bottom: 8px; width: 2px; background: var(--borda); overflow: hidden; }
.medidor-enche { position: absolute; inset: 0; background: var(--azul-texto); transform: scaleY(0); transform-origin: top; }
.valor { position: relative; padding: 0 0 56px; }
.valor:last-child { padding-bottom: 0; }
.valor .metros { position: absolute; left: -92px; top: 4px; width: 46px; text-align: right; font-family: var(--titulo); font-weight: 800; color: var(--tinta-suave); transition: color 200ms ease; }
.valor::before { content: ""; position: absolute; left: -41px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--prof-4); border: 2px solid var(--tinta-suave); transition: border-color 200ms ease, background 200ms ease, transform 200ms var(--ease-out); }
.valor h3 { margin: 0 0 .2em; }
.valor p { margin: 0; max-width: 420px; }
/* o texto é descoberto de cima para baixo, como algo surgindo da água */
.valor .corpo { clip-path: inset(0 0 100% 0); transform: translateY(-6px); transition: clip-path 300ms var(--ease-out), transform 300ms var(--ease-out); }
.valor.chegou .corpo { clip-path: inset(0 0 0 0); transform: none; }
.valor.chegou .metros { color: var(--azul-texto); }
.valor.chegou::before { border-color: var(--azul-texto); background: var(--azul-texto); transform: scale(1.15); }
/* sem o script, os valores aparecem normalmente */
html:not(.js) .valor .corpo { clip-path: none; transform: none; }

/* Perguntas: sinal de + que vira x e resposta que entra suave */
details summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; transition: color 200ms ease; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--azul-texto); font-size: 1.5rem; line-height: 1; transition: transform 200ms var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
details summary:hover { color: var(--azul-texto); }
details[open] > p { animation: abre 200ms var(--ease-out); }
@keyframes abre { from { opacity: 0; transform: translateY(-4px); } }

/* Chamada final: tubarão mordendo sobe do fundo */
.chamada { position: relative; overflow: hidden; padding: 120px 0 140px; }
.chamada .gigante { font-size: var(--t-display); }
.chamada .conteudo { position: relative; }
.mordida { position: absolute; left: 50%; bottom: -40px; width: 260px; aspect-ratio: 510 / 454; transform: translateX(-50%); color: #ffffff1f; animation: emerge 6s ease-in-out infinite; }
@keyframes emerge { 50% { transform: translate(-50%, -18px); } }

/* Menos movimento: some tudo que se desloca na tela; ficam os fades curtos que ajudam a entender a página */
@media (prefers-reduced-motion: reduce) {
  .mar svg, .barbatana-nadando, .faixa-trilho, .trilho-logos, .mordida, h1 .linha > span { animation: none; }
  .entra { animation: aparece-fade 200ms ease both; }
  @keyframes aparece-fade { from { opacity: 0; } }
  .js .revela, .js .cartao.revela, .js .fases li.revela { transform: none; transition: opacity 200ms ease var(--atraso, 0ms), border-color 200ms ease; }
  .botao, .botao .seta, .cartao-rafa, .cartao-rafa .foto img, .cartao-rafa .tubarao, .dor .trilho, .dor .rastro, .servicos .cartao::after { transition: none; }
  .botao::after { display: none; }
  .botao:hover, .botao:active, .botao:hover:active, .botao:hover .seta, .cartao-rafa:hover, .cartao-rafa:hover .foto img,
  .cartao:hover, .fases li:hover, .dor:hover .trilho { transform: none; }
  .dor:hover .tubarao, .dor.ativo .tubarao { animation: none; }
  .dor.ativo .trilho { transform: none; }
  .dor .troca > p { transform: none !important; filter: none !important; transition: opacity 200ms ease; }
  .valor .corpo { clip-path: none; transform: none; opacity: 0; transition: opacity 200ms ease; }
  .valor.chegou .corpo { opacity: 1; }
  details[open] > p { animation: aparece-fade 200ms ease; }
}

/* botão flutuante do WhatsApp (03/11/2026): no azul do site, fixo no canto, acima de tudo; entra depois da abertura */
.whats-flutuante {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); color: #fff; box-shadow: 0 10px 30px -8px #3f6ee8aa, 0 0 0 1px #ffffff1f inset;
  transition: transform 200ms ease, box-shadow 200ms ease;
  animation: whats-entra 400ms ease 1.2s backwards;
}
.whats-flutuante:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px -8px #3f6ee8cc, 0 0 0 1px #ffffff2e inset; }
.whats-flutuante:active { transform: scale(0.96); }
.whats-flutuante:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 4px; }
@keyframes whats-entra { from { opacity: 0; transform: translateY(12px) scale(0.9); } }
@media (max-width: 560px) { .whats-flutuante { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .whats-flutuante { animation: none; transition: none; } }

/* Logos dos clientes (03/11/2026): duas fileiras de pílulas (logo redonda + nome) correndo em sentidos opostos
   (a mesma animação `corre`, com o conteúdo duplicado), sumindo nas bordas. Para no mouse. */
.clientes { padding: 72px 0 88px; overflow: hidden; }
.clientes-titulo { margin: 0 16px 32px; text-align: center; font-size: var(--t-pequeno); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.clientes-titulo b { color: var(--tinta); }
.faixa-logos { overflow: hidden; padding: 6px 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.trilho-logos { display: flex; gap: 14px; width: max-content; animation: corre var(--duracao, 60s) linear infinite; }
.trilho-logos.volta { animation-direction: reverse; }
.faixa-logos:hover .trilho-logos { animation-play-state: paused; }
.cliente { display: flex; align-items: center; gap: 14px; flex: none; padding: 8px 26px 8px 8px; border-radius: 999px; background: var(--prof-1); border: 1px solid var(--borda); }
.cliente img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: #ffffff14; }
.cliente b { font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .trilho-logos { animation: none; } }
@media (max-width: 560px) { .cliente img { width: 40px; height: 40px; } .cliente { padding-right: 18px; font-size: var(--t-pequeno); } }

/* A virada (03/11/2026): a sexta-feira parada, em cinza apagado; ao rolar, um círculo azul enche a tela a partir do topo
   (efeitos.js muda --raio) e o painel liga: contador dispara, pedidos chegam, "Plim" pisca */
.virada { padding: 0; background: #101216; }
.virada .parado { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding-top: 120px; padding-bottom: 136px; }
.virada .parado .etiqueta { color: var(--tinta-suave); }
.virada .frase { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--tinta-suave); }
.gestor { position: relative; justify-self: end; width: 100%; max-width: 380px; background: #e6e9ef; color: #3a4150; border-radius: 16px; box-shadow: 0 30px 60px -30px #000; }
.gestor-topo { display: flex; justify-content: space-between; padding: 12px 18px; border-radius: 16px 16px 0 0; background: #6b3d42; color: #fff; font-size: var(--t-pequeno); font-weight: 600; }
.gestor .aberto { letter-spacing: .1em; text-transform: uppercase; }
.gestor p { margin: 0; padding: 44px 24px 48px; text-align: center; font-size: var(--t-pequeno); }
.gestor strong { display: block; font-size: 1.1rem; color: #1b1f29; }
.teia { position: absolute; top: -10px; left: -10px; width: 110px; color: #c3cad8; }

.enchente { background: var(--azul); padding: 120px 0 136px; }
.js .enchente { clip-path: circle(var(--raio, 150%) at 50% 0); }
.enchente .etiqueta, .enchente h2 { color: #fff; }
.enchente .ouvir { display: inline-flex; align-items: center; gap: 8px; border-color: #ffffff66; color: #fff; }
.enchente .ouvir:hover { border-color: #fff; color: #fff; }
.painel { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; margin-top: 36px; }
.bloco { margin: 0; background: var(--prof-2); border: 1px solid #ffffff1f; border-radius: 14px; padding: 24px; }
.contador > span { font-size: var(--t-pequeno); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.contador b { display: block; font-family: var(--titulo); font-weight: 800; font-size: clamp(4rem, 8vw, 6.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 12px; }
.barras i { flex: 1; height: var(--h); background: var(--azul-texto); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 600ms var(--ease-out); }
.ligada .barras i { transform: none; }
.plim { display: grid; align-content: center; gap: 4px; }
.plim span { font-family: var(--titulo); font-weight: 900; font-size: clamp(3rem, 6vw, 5rem); line-height: .9; text-transform: uppercase; color: #ffffff2e; }
.ligada .plim span { animation: plim 1.8s ease-in-out infinite; }
.ligada .plim span:nth-child(2) { animation-delay: 300ms; }
.ligada .plim span:nth-child(3) { animation-delay: 600ms; }
@keyframes plim { 15% { color: #fff; } 40% { color: #ffffff2e; } }
@media (max-width: 860px) {
  .virada .parado { grid-template-columns: 1fr; gap: 40px; padding-top: 88px; padding-bottom: 96px; }
  .gestor { justify-self: start; }
  .enchente { padding: 88px 0 96px; }
  .painel { grid-template-columns: 1fr; }
  .plim { grid-auto-flow: column; justify-content: start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .barras i { transform: none; transition: none; }
  .ligada .plim span { animation: none; }
  .plim span { color: #fff; }
}

/* Números da Shark (03/11/2026): os quatro de autoridade juntos, logo antes dos depoimentos */
.numeros-shark { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.numeros-shark li { background: var(--veu); border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px; font-size: var(--t-pequeno); color: var(--tinta-suave); line-height: 1.35; }
.numeros-shark b.normal { text-transform: none; }
.numeros-shark b { display: block; font-family: var(--titulo); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; color: var(--tinta); text-transform: uppercase; margin-bottom: 4px; }
@media (max-width: 760px) { .numeros-shark { grid-template-columns: repeat(2, 1fr); } }
.chamada .etiqueta { color: #fff; }

/* Método S.H.A.R.K. (03/11/2026): uma faixa por letra; a letra gigante em degradê azul, o texto ao lado */
.letras { display: grid; gap: 16px; margin-top: 36px; }
.letra { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; }
.letra-grande { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(160deg, var(--prof-4), var(--azul));
  font-family: var(--titulo); font-weight: 900; font-size: 8rem; line-height: 1; color: #fff; transition: transform 200ms var(--ease-out); }
.letra .passo { font-size: var(--t-pequeno); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-texto); }
.letra h3 { margin: 6px 0 .4em; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 0; }
.tags li { padding: 4px 12px; border-radius: 999px; background: #3f6ee82e; color: var(--azul-texto); font-size: var(--t-pequeno); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .letra:hover .letra-grande { transform: scale(1.04) rotate(-2deg); } }
@media (max-width: 640px) { .letra { grid-template-columns: 1fr; gap: 18px; } .letra-grande { width: 96px; font-size: 4.5rem; } }
@media (prefers-reduced-motion: reduce) { .letra-grande { transition: none; } .letra:hover .letra-grande { transform: none; } }

/* Gestor vazio (03/11/2026): moto apagada, hora e uma mosca voando à toa pelo cartão (efeitos.js escolhe os pontos) */
.gestor .moto { display: block; width: 44px; margin: 0 auto 14px; color: #b4bac6; }
.gestor p b { color: #1b1f29; }
.gestor .hora { display: block; margin-top: 10px; font-family: ui-monospace, monospace; letter-spacing: .1em; color: #8a91a0; }
.mosca { position: absolute; top: 0; left: 0; width: 22px; height: 22px; fill: #1b1f29; pointer-events: none;
  transform: translate(60px, 120px); transition: transform 600ms cubic-bezier(.45, 0, .25, 1); }
.mosca .asa { fill: #c8d7ebaa; transform-origin: 20px 18px; animation: zumbe 60ms linear infinite alternate; }
.mosca .asa.direita { animation-direction: alternate-reverse; }
@keyframes zumbe { to { transform: scaleY(.4); } }
@media (prefers-reduced-motion: reduce) { .mosca .asa { animation: none; } }

/* Impressora da cozinha (03/11/2026): a comanda sobe pela fenda (translate + clip-path juntos: o que ainda está "dentro"
   fica escondido), espera um pouco e vai para a pilha em --x/--y/--r. A última fica na fenda. */
.impressora-bloco { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; min-height: 360px; }
.papel { position: relative; width: 62%; height: 230px; margin-bottom: -13px; } /* a base do papel entra na fenda */
.comanda { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 16px; background: #f4f1ea; color: #23262d;
  font: 600 11px/1.45 ui-monospace, "Cascadia Mono", Menlo, monospace; text-transform: uppercase; box-shadow: 0 10px 24px -12px #000c;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.comanda b { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.comanda b span { background: #111; color: #fff; padding: 1px 5px; font-size: 10px; }
.comanda ul { list-style: none; padding: 0 0 6px; margin: 0 0 6px; border-bottom: 1px dashed #23262d66; }
.comanda p { margin: 0; }
.comanda .total { display: flex; justify-content: space-between; font-weight: 800; }
.js .comanda { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
.ligada .comanda { animation: imprime 900ms linear both; }
.ligada .comanda:nth-child(2) { animation-delay: 600ms; }
.ligada .comanda:nth-child(3) { animation-delay: 1200ms; }
.ligada .comanda:nth-child(4) { animation-delay: 1800ms; }
@keyframes imprime {
  0% { transform: translateY(100%); clip-path: inset(0 0 100% 0); }
  50%, 66% { transform: none; clip-path: inset(0 0 0 0); animation-timing-function: var(--ease-out); }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: inset(0 0 0 0); }
}
.impressora { position: relative; z-index: 1; width: 100%; max-width: 300px; height: 110px; border-radius: 14px; background: linear-gradient(#2a2f3a, #15181f);
  box-shadow: 0 20px 40px -18px #000, inset 0 1px #ffffff1f; }
.fenda { position: absolute; left: 16%; right: 16%; top: 12px; height: 6px; border-radius: 3px; background: #05070a; }
.led { position: absolute; left: 22px; top: 46px; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; }
.ligada .led { animation: pisca 300ms steps(2) 8; }
@keyframes pisca { 50% { opacity: .25; } }
.marca-imp { position: absolute; left: 40px; top: 42px; font: 600 10px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a91a0; }
.tecla { position: absolute; right: 20px; top: 40px; width: 34px; height: 18px; border-radius: 4px; background: #0c0e12; }
@media (prefers-reduced-motion: reduce) {
  .js .comanda { transform: translate(var(--x), var(--y)) rotate(var(--r)); clip-path: none; }
  .ligada .comanda, .ligada .led { animation: none; }
}