/* ==========================================================================
   VELO — Marketing Digital
   Paleta: o mar visto de cima. Navy da logo + azuis claros + espuma.
   ========================================================================== */

:root{
  /* cor */
  --abissal:#0B2E58;
  --profundo:#14498C;
  --mare:#2E86D6;              /* só para gráficos: onda, traços, checks */
  --rotulo:#1668B8;            /* texto pequeno em azul — passa 4.5:1 no claro */
  --raso:#8CCBF0;
  --espuma:#DCEFFB;
  --bruma:#F2F9FE;
  --branco:#FFFFFF;
  --sol:#FFC24B;
  --texto:#0B2E58;
  --texto-fraco:#4A6785;
  --borda:#CFE6F7;

  /* tipo */
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --corpo:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;

  /* medidas */
  --wrap:1160px;
  --gut:clamp(20px,5vw,40px);
  --mar-h:104px;               /* altura do mar fixo */
  --raio:20px;
  --raio-sm:12px;

  /* ritmo vertical */
  --s-secao:clamp(80px,11vw,140px);

  --sombra:0 2px 4px rgba(11,46,88,.04),0 12px 32px -8px rgba(11,46,88,.12);
  --sombra-alta:0 4px 8px rgba(11,46,88,.06),0 24px 56px -12px rgba(11,46,88,.20);

  /* areia — só o rodapé usa. Do molhado (onde a água acabou de bater, no alto)
     pro seco lá embaixo. */
  --areia-molhada:#BFA179;
  --areia-umida:#CDB28B;
  --areia:#E0CDA8;
  --areia-seca:#EDE0C6;
  --areia-texto:#5A4531;
  --areia-texto-fraco:#7A6449;
}

@media (max-width:640px){ :root{ --mar-h:78px; } }

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

html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--corpo);
  font-size:clamp(16px,.55vw + 14.4px,17px);
  line-height:1.62;
  color:var(--texto);
  background:var(--bruma);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.028em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--mare); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.pular{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--abissal); color:#fff; padding:12px 20px; border-radius:999px;
  font-weight:600; text-decoration:none;
}
.pular:focus{ left:12px; }

/* ==========================================================================
   1. CABEÇALHO
   ========================================================================== */

.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(242,249,254,.82);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.topo.is-preso{ border-bottom-color:var(--borda); background:rgba(242,249,254,.94); }

.topo__in{ display:flex; align-items:center; gap:24px; height:72px; }

.marca{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--abissal); flex:0 0 auto; }
.marca__fin{ width:26px; height:26px; fill:currentColor; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.marca:hover .marca__fin{ transform:translateY(-3px) rotate(-6deg); }
.marca__nome{
  font-family:var(--display); font-weight:800; font-size:26px;
  letter-spacing:-.045em; line-height:1;
}

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  position:relative; text-decoration:none; font-size:15px; font-weight:500;
  color:var(--texto-fraco); padding:9px 14px; border-radius:999px;
  transition:color .2s ease,background .2s ease;
}
.nav a:hover{ color:var(--abissal); background:var(--espuma); }
.nav a.is-atual{ color:var(--abissal); font-weight:600; }
.nav a.is-atual::after{
  content:""; position:absolute; left:50%; bottom:2px; translate:-50% 0;
  width:16px; height:3px; border-radius:2px; background:var(--sol);
}

.topo__cta{ flex:0 0 auto; }

.hamburguer{
  display:none; width:44px; height:44px; margin-left:auto;
  border:1px solid var(--borda); background:var(--branco); border-radius:12px;
  cursor:pointer; padding:0; gap:5px;
  /* align-content:center impede as linhas do grid de esticarem — sem isso as
     barras ficam a 16px do centro e o translateY do "X" não fecha. */
  place-items:center; align-content:center;
}
.hamburguer span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--abissal); transition:transform .3s ease,opacity .2s ease; }

@media (max-width:900px){
  .nav{
    position:fixed; inset:72px 0 auto; margin:0;
    flex-direction:column; gap:0; padding:8px var(--gut) 22px;
    background:rgba(242,249,254,.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--borda);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav.is-aberto{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:14px 4px; font-size:17px; border-radius:0; border-bottom:1px solid var(--borda); }
  .nav a.is-atual::after{ display:none; }
  .topo__cta{ margin-left:auto; }
  .hamburguer{ display:grid; margin-left:0; }
  .hamburguer[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburguer[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .hamburguer[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:480px){
  /* o CTA fica: é a conversão principal. Só encolhe pra caber. */
  .topo .topo__cta{ font-size:13px; padding:9px 14px; }
  .topo__in{ gap:12px; }
}

/* ==========================================================================
   2. BOTÕES E MICRO-ELEMENTOS
   ========================================================================== */

.btn{
  --bg:var(--abissal); --fg:#fff; --bd:var(--abissal);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--corpo); font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; min-height:44px; border-radius:999px;
  border:1.5px solid var(--bd); background:var(--bg); color:var(--fg);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease,background .22s ease,color .22s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(11,46,88,.45); }
.btn:active{ transform:translateY(0) scale(.985); }

/* brilho de sol atravessando o botão no hover */
.btn::after{
  content:""; position:absolute; inset:0 auto 0 -60%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,194,75,.55),transparent);
  transform:skewX(-18deg); transition:left .55s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{ left:120%; }

.btn--primario{ --bg:var(--abissal); --fg:#fff; --bd:var(--abissal); }
.btn--vazado{ --bg:transparent; --fg:var(--abissal); --bd:var(--borda); }
.btn--vazado:hover{ --bd:var(--abissal); background:var(--branco); }
.btn--zap{ --bg:var(--sol); --fg:var(--abissal); --bd:var(--sol); }
.btn--fantasma{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.45); }
.btn--fantasma:hover{ --bd:#fff; background:rgba(255,255,255,.1); }
.btn--lg{ font-size:16px; padding:16px 28px; min-height:52px; }
.btn--sm{ font-size:14px; padding:10px 18px; min-height:40px; }
.btn--bloco{ display:flex; width:100%; margin-top:auto; }

.btn__seta{ width:18px; height:18px; transition:transform .25s ease; }
.btn:hover .btn__seta{ transform:translateX(4px); }
.btn__zap{ width:19px; height:19px; }

.link{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; color:var(--profundo); text-decoration:none;
  border-bottom:2px solid var(--raso); padding-bottom:1px;
  transition:border-color .2s ease,color .2s ease,gap .2s ease;
}
.link:hover{ color:var(--abissal); border-bottom-color:var(--sol); gap:9px; }
.link svg{ width:15px; height:15px; }
.link--claro{ color:var(--sol); border-bottom-color:rgba(255,194,75,.4); }
.link--claro:hover{ color:#fff; border-bottom-color:#fff; }

.rotulo,.olho{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rotulo);
  margin:0 0 18px;
}
.olho span{ opacity:.45; margin-inline:4px; }
.cab--claro .rotulo{ color:var(--raso); }

/* ==========================================================================
   3. HERO
   ========================================================================== */

/* overflow:clip contém o halo (150vw) sem virar contexto de rolagem */
.hero{ position:relative; overflow:clip; padding:clamp(48px,7vw,86px) 0 clamp(60px,9vw,110px); }

/* halo de espuma difuso atrás do hero */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-12%; translate:-50% 0;
  width:min(1400px,150vw); aspect-ratio:1.6/1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(140,203,240,.42),rgba(140,203,240,0) 70%);
}

.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
/* o mascote é o primeiro no HTML (ver comentário lá) — no desktop a grade
   devolve o texto pra esquerda */
.hero__texto{ order:-1; }

.hero__h1{
  font-size:clamp(42px,7.2vw,80px);
  letter-spacing:-.04em;
  margin-bottom:22px;
}

/* o grifo é a onda: risco desenhado à mão sob a frase-chave */
.grifo{ position:relative; display:inline-block; color:var(--mare); white-space:nowrap; }
.grifo__risco{
  position:absolute; left:-1%; bottom:-.16em; width:102%; height:.28em;
  color:var(--sol); overflow:visible;
}
.grifo__risco path{ stroke-dasharray:340; stroke-dashoffset:340; }
.reveal.is-vista .grifo__risco path{ animation:risca .9s .55s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes risca{ to{ stroke-dashoffset:0; } }

.hero__sub{
  font-size:clamp(17px,1.4vw,19px); color:var(--texto-fraco);
  max-width:52ch; margin-bottom:30px;
}

.hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; }

.selos{ display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:var(--texto-fraco); }
.selos li{ display:flex; align-items:baseline; gap:7px; }
.selos strong{ font-family:var(--display); font-size:22px; font-weight:800; color:var(--abissal); letter-spacing:-.03em; }

/* mascote */
.hero__mascote{ position:relative; justify-self:center; max-width:430px; }
.hero__mascote img{
  position:relative; z-index:1; width:100%;
  filter:drop-shadow(0 26px 34px rgba(11,46,88,.22));
  animation:boia 6s ease-in-out infinite;
}
@keyframes boia{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(1.2deg); } }

.mascote__aura{
  position:absolute; z-index:0; inset:8% -6% 6%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.95),rgba(220,239,251,.5) 55%,rgba(220,239,251,0) 72%);
}

.balao{
  position:absolute; z-index:2; left:-13%; top:-1%;
  background:var(--branco); color:var(--abissal);
  font-size:14px; font-weight:600; line-height:1.35;
  padding:11px 15px; border-radius:16px 16px 16px 4px;
  border:2px solid var(--abissal); max-width:180px;
  box-shadow:0 10px 22px -10px rgba(11,46,88,.4);
  animation:boia 6s ease-in-out infinite .3s;
}

/* No celular o mascote saía de cima do texto e comia a primeira tela inteira:
   o título só começava depois de 240px de tubarão. Aqui a grade vira bloco e
   ele passa a flutuar à direita, pequeno, com o título contornando — mesma
   leitura do desktop (texto primeiro, mascote ao lado) num espaço só.

   `shape-outside` faz o texto acompanhar o contorno do bicho em vez da caixa
   retangular, e o `margin` reserva o respiro entre um e outro. */
@media (max-width:900px){
  .hero{ padding-top:clamp(20px,4vw,40px); }
  .hero__grid{ display:block; }
  .hero__texto{ order:0; }
  .hero__mascote{
    float:right;
    width:clamp(96px,27vw,150px); max-width:none;
    margin:0 0 8px clamp(10px,3vw,18px);
    shape-outside:margin-box;
  }
  .balao{ display:none; }
  /* a linha de cima quebra ao lado do mascote: melhor em duas metades
     parecidas do que com "ANÚNCIOS" sozinho embaixo */
  .hero .olho{ text-wrap:balance; letter-spacing:.13em; }
  /* o grifo é nowrap: com o mascote ao lado, o título precisa caber na
     coluna que sobrou sem estourar a linha "na crista da onda" */
  .hero__h1{ font-size:clamp(30px,7.6vw,46px); margin-bottom:18px; }
  .hero__sub{ margin-bottom:24px; }
  /* o texto abaixo do título já passou do mascote: volta a ser corrido */
  .hero__acoes,.selos{ clear:right; }
}

/* ==========================================================================
   4. SEÇÕES E CABEÇALHOS
   ========================================================================== */

.secao{ position:relative; padding-block:var(--s-secao); }
.secao--espuma{ background:var(--espuma); }
.secao--fundo{ background:var(--abissal); color:#fff; }

/* borda de onda cartoon no topo das seções coloridas */
.secao--espuma::before,
.secao--fundo::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:34px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}
/* e a mesma onda invertida embaixo, pra faixa colorida não terminar reta */
.secao--espuma::after,
.secao--fundo::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:34px;
  transform:scaleY(-1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}

.secao--espuma::before,
.secao--espuma::after{ background:var(--espuma); }
.secao--fundo::before,
.secao--fundo::after{ background:var(--abissal); }

.cab{ max-width:44ch; margin-bottom:clamp(38px,5vw,58px); }
.cab h2{ font-size:clamp(30px,4.2vw,48px); margin-bottom:16px; }
.cab__texto{ color:var(--texto-fraco); font-size:17px; }
.cab__texto strong{ color:var(--texto); font-weight:600; }
.cab--linha{
  max-width:none; display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px;
}
.cab--linha h2{ margin-bottom:0; }
.cab--linha .cab__texto{ flex-basis:100%; }
.cab--claro h2{ color:#fff; }
.cab--claro .cab__texto{ color:rgba(255,255,255,.72); }
.cab--claro .cab__texto strong{ color:#fff; font-weight:600; }

/* ==========================================================================
   5. SERVIÇOS
   ========================================================================== */

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:16px; }

.card{
  position:relative; overflow:hidden;
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--raio); padding:26px 24px 28px;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sombra-alta); border-color:var(--raso); }

/* onda que sobe por trás do card no hover */
.card::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg,rgba(220,239,251,.65),rgba(220,239,251,0));
  transition:height .4s cubic-bezier(.4,0,.2,1);
}
.card:hover::before{ height:100%; }

.card > *{ position:relative; }

.card__icone{
  display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px;
  border-radius:14px; background:var(--espuma); color:var(--profundo);
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.card:hover .card__icone{ background:var(--abissal); color:var(--sol); transform:rotate(-6deg); }
.card__icone svg{ width:23px; height:23px; }

.card h3{ font-size:20px; letter-spacing:-.02em; margin-bottom:9px; }
.card p{ font-size:15px; color:var(--texto-fraco); }

/* ==========================================================================
   6. TRABALHOS
   ========================================================================== */

.obras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(24px,3.5vw,44px); }

.obra{ display:flex; flex-direction:column; gap:22px; }

.obra__tela{
  display:block; aspect-ratio:16/11; border-radius:var(--raio); overflow:hidden;
  border:1px solid var(--borda); background:var(--branco);
  box-shadow:var(--sombra); text-decoration:none;
  transition:transform .35s cubic-bezier(.34,1.3,.64,1),box-shadow .35s ease;
}
.obra__tela:hover{ transform:translateY(-6px) scale(1.012); box-shadow:var(--sombra-alta); }

.tela__barra{
  display:flex; align-items:center; gap:6px; height:30px; padding-inline:12px;
  background:#F0F4F8; border-bottom:1px solid var(--borda);
}
.tela__barra i{ width:8px; height:8px; border-radius:50%; background:#CBD6E2; }
.tela__barra em{
  font-family:var(--mono); font-style:normal; font-size:9.5px; color:#8AA0B8;
  margin-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.tela__foto{
  display:block; width:100%; height:calc(100% - 30px);
  object-fit:cover; object-position:top center;
}

.obra__info h3{ font-size:24px; margin-bottom:10px; }
.obra__info p{ color:var(--texto-fraco); font-size:15.5px; margin-bottom:16px; }

/* Depois de `.obra__info p` e com uma classe a mais: senão o rótulo herda o
   corpo do parágrafo e sai destoando dos outros rótulos mono da página. */
.obra__info p.obra__tipo{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rotulo); margin-bottom:8px;
}

.obras__nota{ margin-top:clamp(32px,4vw,48px); color:var(--texto-fraco); font-size:16px; }

/* ==========================================================================
   7. PROCESSO (fundo escuro)
   ========================================================================== */

.rota{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:2px; }

.rota__item{
  position:relative; padding:28px 24px 30px;
  background:rgba(255,255,255,.04);
  border-top:2px solid rgba(140,203,240,.28);
  transition:background .3s ease,border-color .3s ease;
}
.rota__item:first-child{ border-radius:var(--raio-sm) 0 0 var(--raio-sm); }
.rota__item:last-child{ border-radius:0 var(--raio-sm) var(--raio-sm) 0; }
.rota__item:hover{ background:rgba(255,255,255,.09); border-top-color:var(--sol); }

.rota__num{
  display:block; font-family:var(--mono); font-size:13px; font-weight:500;
  color:var(--sol); letter-spacing:.1em; margin-bottom:16px;
}
.rota__item h3{ font-size:21px; color:#fff; margin-bottom:9px; }
.rota__item p{ font-size:15px; color:rgba(255,255,255,.68); }

@media (max-width:640px){
  .rota{ gap:2px; }
  .rota__item,
  .rota__item:first-child,
  .rota__item:last-child{ border-radius:var(--raio-sm); }
}

/* ==========================================================================
   8. PLANOS
   ========================================================================== */

.planos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(275px,100%),1fr)); gap:18px; align-items:stretch; }

.plano{
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--raio); padding:30px 26px 30px;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;
}
.plano:hover{ transform:translateY(-4px); box-shadow:var(--sombra-alta); }

.plano--destaque{
  position:relative; border:2px solid var(--abissal);
  box-shadow:var(--sombra-alta);
}

.plano__fita{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  background:var(--sol); color:var(--abissal);
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; white-space:nowrap;
}

.plano__nome{ font-size:27px; margin-bottom:8px; }
.plano__pitch{ font-size:15px; color:var(--texto-fraco); margin-bottom:20px; min-height:2.9em; }

.plano__preco{ padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--borda); }
.plano__valor{ font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.03em; }

.plano__lista{ display:grid; gap:11px; margin-bottom:28px; font-size:15px; }
.plano__lista li{ position:relative; padding-left:27px; color:var(--texto-fraco); }
.plano__lista li::before{
  content:""; position:absolute; left:0; top:.42em; width:17px; height:9px;
  border-left:2.5px solid var(--mare); border-bottom:2.5px solid var(--mare);
  border-radius:0 0 0 3px; transform:rotate(-45deg) scale(.72); transform-origin:left center;
}
.plano--destaque .plano__lista li::before{ border-color:var(--sol); }

.planos__nota{
  margin-top:26px; font-size:15px; color:var(--texto-fraco);
  max-width:60ch;
}

/* ==========================================================================
   9. CHAMADA FINAL
   ========================================================================== */

.chamada{
  /* gradiente vertical: o topo fica uniforme e casa com a onda do ::before */
  background:linear-gradient(180deg,#0B2E58 0%,#14498C 55%,#1F6FBF 100%);
  color:#fff;
}
.chamada::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:34px;
  background:#0B2E58;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}

.chamada__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(20px,4vw,48px); align-items:center;
}
.chamada h2{ font-size:clamp(32px,4.6vw,52px); color:#fff; margin-bottom:18px; }
.chamada__texto > p{ color:rgba(255,255,255,.76); font-size:17px; max-width:48ch; margin-bottom:30px; }
.chamada__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.chamada__rodape{ font-size:15px; color:rgba(255,255,255,.85); }

.chamada__mascote{ justify-self:center; max-width:240px; }
.chamada__mascote img{ animation:boia 7s ease-in-out infinite; filter:drop-shadow(0 20px 30px rgba(0,0,0,.35)); }

@media (max-width:820px){
  .chamada__grid{ grid-template-columns:1fr; }
  .chamada__mascote{ display:none; }
}

/* ==========================================================================
   10. RODAPÉ — A AREIA
   O rodapé era a mesma água da chamada logo acima: dois blocos navy com a
   mesma fumaça e a mesma lapela de onda, um colado no outro. Agora a página
   termina chegando na praia — o mar fixo lá embaixo passa a lamber areia em
   vez de mais mar.

   A areia é só cor e bolinha, sem imagem nenhuma:
     1. gradiente base — molhada em cima (onde a onda acabou de bater) e seca
        embaixo;
     2. grãos — três camadas de bolinha em `radial-gradient`, duas claras e
        uma escura, cada uma num ladrilho de tamanho diferente. Os tamanhos
        não são múltiplos um do outro de propósito: assim as três nunca
        coincidem e o olho não acha a repetição. A bolinha não tem borda
        dura — vai da cor ao transparente em ~2px. Com borda dura virava
        bolinha de papel de parede; desbotada vira grão.

   Já teve ondulação de maré aqui (linhas passadas num feDisplacementMap) e
   ruído de textura por cima. Ficou com cara de textura de jogo antigo —
   detalhe demais numa faixa que é só rodapé. Bolinha basta.
   ========================================================================== */

.rodape{
  position:relative;
  color:var(--areia-texto);
  background:
    radial-gradient(circle at 30% 34%,rgba(255,255,255,.42) 0,rgba(255,255,255,0) 1.9px) 0 0/26px 22px,
    radial-gradient(circle at 71% 66%,rgba(122,100,73,.19) 0,rgba(122,100,73,0) 2.1px) 0 0/33px 29px,
    radial-gradient(circle at 47% 81%,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 1.6px) 0 0/19px 37px,
    linear-gradient(180deg,
      var(--areia-molhada) 0,
      var(--areia-umida) 30px,
      var(--areia) 150px,
      var(--areia-seca) 100%);
  padding-top:clamp(48px,6vw,72px);
  padding-bottom:calc(var(--mar-h) + 28px);   /* espaço pro mar fixo */
}

/* o texto mora acima do fundo */
.rodape__in,.rodape__fim{ position:relative; z-index:1; }

/* a mesma lapela de onda de antes, agora cor de areia molhada: é a praia
   subindo na água da seção de cima, não mais navy sobre navy */
.rodape::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:34px;
  background:var(--areia-molhada);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}

.rodape__in{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:36px; padding-bottom:34px; }
.rodape__marca p{ font-size:15px; max-width:32ch; margin-top:12px; color:var(--areia-texto-fraco); }
.marca--rodape{ color:var(--abissal); }
.marca--rodape .marca__fin{ fill:var(--profundo); }

.rodape__links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:28px; }
.rodape__links h4{
  font-family:var(--mono); font-weight:500; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--areia-texto-fraco); margin-bottom:14px;
}
.rodape__links a{
  display:block; text-decoration:none; font-size:15px; padding:5px 0;
  color:var(--areia-texto); transition:color .2s ease,padding-left .2s ease;
}
.rodape__links a:hover{ color:var(--abissal); padding-left:5px; }

/* linha de maré: o risco que separa o rodapé do crédito lá embaixo */
.rodape__fim{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding-top:22px; border-top:1px solid rgba(90,69,49,.22);
  font-size:13.5px; color:var(--areia-texto-fraco);
}

@media (max-width:760px){ .rodape__in{ grid-template-columns:1fr; } }

/* ==========================================================================
   11. O MAR — assinatura da marca
   ========================================================================== */

/* O mar vem em duas camadas empilhadas com a boia do WhatsApp no meio:
   ondas de trás (40) · boia (45) · onda da frente e barbatana (50).
   É o que faz a boia parecer meio afundada em vez de colada por cima. */
.mar{
  position:fixed; left:0; right:0; bottom:0;
  height:var(--mar-h); pointer-events:none;
}
.mar--fundo { z-index:40; }
.mar--frente{ z-index:50; filter:drop-shadow(0 -3px 12px rgba(46,134,214,.16)); }
.mar__svg{ display:block; width:100%; height:100%; }

/* a barbatana é o único pedaço do mar que aceita o mouse: dá pra puxar ela
   pra rolar a página. `touch-action:none` impede o dedo de rolar a página
   por baixo do gesto no celular. */
#finPega{ pointer-events:auto; cursor:grab; touch-action:none; }
html.is-puxando-mar #finPega{ cursor:grabbing; }
html.is-puxando-mar{ scroll-behavior:auto; }   /* senão o suave briga com o arrasto */
html.is-puxando-mar body{ user-select:none; }

/* ---------- o WhatsApp boiando na crista ---------- */

/* Fica entre as duas camadas do mar: a onda da frente passa por cima do terço
   de baixo, o rótulo continua acima da linha d'água. O padding de baixo é
   maior de propósito — é o pedaço que fica submerso. O mar é
   pointer-events:none, então o clique atravessa a água normalmente. */
.zap-boia{
  position:fixed; z-index:45;
  right:clamp(14px,3.5vw,32px); bottom:24px;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px 26px 15px; border-radius:999px;
  background:#25D366; color:#06321A; text-decoration:none;
  font-weight:600; font-size:15px; line-height:1;
  box-shadow:0 12px 26px -10px rgba(6,50,26,.75);
  animation:boia 4.6s ease-in-out infinite;
  transition:filter .2s ease;
}
.zap-boia:hover{ filter:brightness(1.07); }
.zap-boia svg{ width:23px; height:23px; flex:0 0 auto; }

/* sobe e desce como boia, com um gingado de onda. O movimento é curto porque
   a própria água já está ondulando por cima dela. */
@keyframes boia{
  0%,100%{ transform:translateY(0) rotate(-2.5deg); }
  50%    { transform:translateY(-7px) rotate(2.5deg); }
}

@media (max-width:560px){
  .zap-boia{ padding:13px 15px 28px; gap:0; }
  .zap-boia__texto{ display:none; }
}

/* ==========================================================================
   12. REVELAÇÃO NO SCROLL
   ========================================================================== */

/* O elemento entra de longe e fora de foco, como coisa emergindo da água.
   O desfoque some junto com o movimento; depois que acabou, o vivo.js marca
   .is-limpo e o filtro sai de vez — filter fica ligado numa camada de
   composição pra sempre e amolece o texto na GPU. */
.reveal{
  opacity:0; transform:translateY(26px) scale(.988);
  filter:blur(7px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),
             transform .8s cubic-bezier(.22,1,.36,1),
             filter .8s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-vista{ opacity:1; transform:none; filter:blur(0); }
.reveal.is-limpo{ filter:none; }

/* Título entra por máscara: a frase é descoberta de baixo pra cima em vez de
   simplesmente aparecer.

   Máscara e não clip-path de propósito. clip-path zera a área do elemento, e
   o IntersectionObserver que dispara o .is-vista passa a enxergar o título
   como fora da tela — ele nunca é revelado e o site fica sem títulos. Máscara
   é efeito de pintura: não mexe na geometria que o observador mede.

   A imagem tem o dobro da altura da caixa: metade transparente em cima,
   metade opaca embaixo. Escorregar a máscara de 0% pra 100% traz a parte
   opaca pra cima do texto. */
h2.reveal,.pl-abre__h1.reveal{
  --mascara:linear-gradient(180deg,transparent 0,transparent 44%,#000 58%,#000 100%);
  -webkit-mask-image:var(--mascara); mask-image:var(--mascara);
  -webkit-mask-size:100% 200%;      mask-size:100% 200%;
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  -webkit-mask-position:0 0;        mask-position:0 0;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
             transform .9s cubic-bezier(.22,1,.36,1),
             filter .9s cubic-bezier(.22,1,.36,1),
             -webkit-mask-position 1.05s cubic-bezier(.22,1,.36,1),
             mask-position 1.05s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--d,0) * 90ms);
}
h2.reveal.is-vista,.pl-abre__h1.reveal.is-vista{
  -webkit-mask-position:0 100%; mask-position:0 100%;
}
/* máscara cumprida, some do caminho */
h2.reveal.is-limpo,.pl-abre__h1.reveal.is-limpo{
  -webkit-mask-image:none; mask-image:none;
}

/* ==========================================================================
   13. MOVIMENTO REDUZIDO
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  h2.reveal,.pl-abre__h1.reveal{ -webkit-mask-image:none; mask-image:none; }
  .grifo__risco path{ stroke-dashoffset:0; }
  .vivo__tela{ opacity:.55; }
  [data-desliza]{ --px:0px !important; }
  .card.is-inclinado,.plano.is-inclinado,.obra__tela.is-inclinado,.avulso.is-inclinado{ transform:none; }
}

/* ==========================================================================
   14. PÁGINA DE PLANOS
   Os três blocos têm peso visual diferente de propósito: site é card branco
   (obra, paga uma vez), mensalidade é faixa clara (o que sustenta o mês) e
   mídia é card fundo (mar aberto, mensalidade cheia).
   ========================================================================== */

/* ---------- abertura ---------- */

.pl-abre{ padding-top:clamp(96px,12vw,132px); padding-bottom:clamp(36px,5vw,56px); }
.pl-abre__grid{
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px); align-items:center;
}
.pl-abre__h1{ font-size:clamp(34px,5.6vw,60px); margin:14px 0 20px; max-width:15ch; }
.pl-abre__texto{ color:var(--texto-fraco); font-size:17px; max-width:56ch; margin-bottom:14px; }
.pl-abre__texto strong{ color:var(--texto); font-weight:600; }

.pl-volta{ color:var(--rotulo); text-decoration:none; border-bottom:1px solid var(--borda); }
.pl-volta:hover{ border-color:var(--rotulo); }

.pl-abre__pulos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pl-pulo{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:9px 16px; border:1px solid var(--borda); border-radius:999px;
  background:var(--branco); text-decoration:none; font-size:14.5px; font-weight:500;
  transition:border-color .2s ease,transform .2s ease;
}
.pl-pulo span{ font-family:var(--mono); font-size:11px; color:var(--rotulo); }
.pl-pulo:hover{ border-color:var(--abissal); transform:translateY(-2px); }

.pl-abre__mascote{ width:clamp(180px,22vw,270px); justify-self:end; }
.pl-abre__mascote img{ width:100%; filter:drop-shadow(0 18px 30px rgba(11,46,88,.18)); }

@media (max-width:840px){
  .pl-abre__grid{ grid-template-columns:1fr; }
  .pl-abre__mascote{ display:none; }
}

.pl-secao{ padding-block:clamp(64px,8vw,104px); }

/* ---------- o mascote apoiado nos cards ---------- */

.planos--com-mascote{ position:relative; }
.planos__mascote{
  position:absolute; right:6px; bottom:100%; z-index:3;
  width:clamp(150px,17vw,212px); margin-bottom:-10px;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 10px 18px rgba(11,46,88,.16));
}

/* O mascote fica pendurado pra fora, acima da borda dos cards. Quando tem
   uma tarja de promoção logo acima, ela precisa ceder a altura dele — senão
   o tubarão senta em cima do relógio. O 0.95 é a proporção da imagem
   (630x600); o resto é folga. */
.planos--com-mascote{
  margin-top:calc(clamp(150px,17vw,212px) * .95 + 6px);
}

@media (max-width:760px){
  .planos__mascote{ display:none; }
  .planos--com-mascote{ margin-top:0; }
}

/* ---------- preço ---------- */

.plano__de{
  display:block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--texto-fraco);
  margin-bottom:4px;
}
.plano__antes{
  display:block; font-size:14.5px; color:var(--texto-fraco);
  text-decoration:line-through; text-decoration-thickness:1.5px; margin-bottom:2px;
}
.plano__periodo{ font-size:15px; color:var(--texto-fraco); margin-left:3px; }
.plano__lista li.plano__herda{ color:var(--texto); font-weight:600; }

/* preço em dois tempos: a criação (uma vez) e a manutenção (todo mês).
   Os dois moram no mesmo card porque são a mesma decisão. */
.plano__duplo{
  display:grid; gap:14px; padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--borda);
}
.plano__linha{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.plano__cifra{ text-align:right; }
.plano__cifra .plano__de{ margin-bottom:2px; }
.plano__etapa{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  line-height:1.4; text-transform:uppercase; color:var(--texto-fraco); max-width:20ch;
}
.plano__valor--menor{ font-size:23px; }

/* o item que resume a manutenção fica separado do resto da lista por um
   tracinho: ele fala do depois, não do que é entregue na obra. */
.plano__lista li.plano__mens{
  margin-top:4px; padding-top:13px;
  border-top:1px dashed var(--borda); font-size:14px;
}
.plano__lista li.plano__mens::before{ top:calc(.42em + 13px); }
.plano--escuro .plano__lista li.plano__mens{ border-top-color:rgba(255,255,255,.22); }

/* ---------- upsell ---------- */

.upsell{
  display:grid; gap:12px; margin-top:14px; padding:16px 18px;
  border-radius:var(--raio-sm); background:var(--espuma);
  border:1px dashed var(--raso);
  animation:upsell-entra .28s cubic-bezier(.22,1,.36,1) both;
}
.upsell[hidden]{ display:none; }          /* grid ignora [hidden] sozinho */

@keyframes upsell-entra{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

.upsell__linha{ font-size:14.5px; line-height:1.5; color:var(--texto); }
.upsell__linha strong{ font-weight:650; }
.upsell__linha b{
  font-family:var(--display); font-weight:800; font-size:17px;
  letter-spacing:-.02em; color:var(--abissal);
}
.upsell__acoes{ display:flex; flex-wrap:wrap; gap:8px; }
.upsell__acoes .btn{ flex:1 1 auto; justify-content:center; }

.upsell--claro{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32); }
.upsell--claro .upsell__linha{ color:rgba(255,255,255,.86); }
.upsell--claro .upsell__linha b{ color:var(--sol); }

/* ---------- o que muda o preço / fora da carta ---------- */

.pl-extras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:18px; margin-top:34px;
}
.pl-extras__bloco{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--raio); padding:24px 26px;
}
.pl-extras__bloco h3{ font-size:19px; margin-bottom:14px; }
.pl-extras__bloco p{ font-size:15px; color:var(--texto-fraco); margin-bottom:12px; }
.pl-extras__bloco ul{ display:grid; gap:12px; }
.pl-extras__bloco li{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px 14px; font-size:15px; color:var(--texto-fraco);
  padding-bottom:12px; border-bottom:1px solid var(--borda);
}
.pl-extras__bloco li:last-child{ padding-bottom:0; border-bottom:0; }
.pl-extras__bloco li em{ font-style:normal; color:var(--rotulo); }
.pl-extras__bloco li b{
  font-family:var(--mono); font-size:15px; color:var(--texto); white-space:nowrap;
}
.pl-extras__bloco li b small{ font-size:12px; color:var(--texto-fraco); }

/* ---------- preço é conversa, não tabela ---------- */

.pl-negocia{
  display:flex; align-items:flex-start; gap:16px; margin-top:26px;
  padding:20px 24px; border-radius:var(--raio);
  background:var(--branco); border:1px dashed var(--raso);
}
.pl-negocia__icone{
  flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--espuma); color:var(--rotulo);
}
.pl-negocia__icone svg{ width:21px; height:21px; }
.pl-negocia h3{ font-size:17px; margin-bottom:6px; }
.pl-negocia p{ font-size:15px; color:var(--texto-fraco); max-width:76ch; }
.pl-negocia strong{ color:var(--texto); font-weight:600; }

@media (max-width:560px){
  .pl-negocia{ flex-direction:column; gap:12px; }
}

/* ---------- como funciona o pagamento ---------- */

.pagto{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));
  gap:16px; margin-bottom:32px;
}
.pagto__item{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--raio); padding:22px 24px 24px;
}
.pagto__item--livre{ border-style:dashed; border-color:var(--raso); background:var(--espuma); }
.pagto__quando{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--rotulo); margin-bottom:9px;
}
.pagto__item h3{ font-size:18px; margin-bottom:8px; }
.pagto__item p{ font-size:14.5px; color:var(--texto-fraco); }
.pagto__item strong{ color:var(--texto); font-weight:600; }

/* ---------- mensalidade ---------- */

/* o card de manutenção não é um plano à parte: ele é a continuação do plano
   de site de mesmo nome, e a etiqueta em cima deixa isso explícito. */
.mens__amarra{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--rotulo); margin-bottom:5px;
}

.mens{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));
  gap:16px; align-items:stretch;
}
.mens__card{
  display:flex; flex-direction:column;
  background:var(--branco); border:1px solid var(--borda);
  border-radius:var(--raio); padding:24px 24px 26px;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1),box-shadow .3s ease;
}
.mens__card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.mens__card--destaque{ border:2px solid var(--abissal); box-shadow:var(--sombra); }

/* flex-end e não baseline: o nome do plano vem embaixo da etiqueta
   "manutenção do plano", e a baseline pegaria a etiqueta, não o nome. */
.mens__topo{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--borda);
}
.mens__topo h3{ font-size:21px; }
.mens__preco{ white-space:nowrap; }
.mens__valor{
  font-family:var(--display); font-size:27px; font-weight:800; letter-spacing:-.03em;
}
.mens__preco small{ font-size:13px; color:var(--texto-fraco); }

.mens__card ul{ display:grid; gap:10px; margin-bottom:22px; font-size:14.5px; }
.mens__card ul li{ position:relative; padding-left:24px; color:var(--texto-fraco); }
.mens__card ul li::before{
  content:""; position:absolute; left:0; top:.45em; width:15px; height:8px;
  border-left:2.5px solid var(--mare); border-bottom:2.5px solid var(--mare);
  border-radius:0 0 0 3px; transform:rotate(-45deg) scale(.72); transform-origin:left center;
}
.mens__card ul li.plano__herda{ color:var(--texto); font-weight:600; }
.mens__card--destaque ul li::before{ border-color:var(--sol); }
.mens__card .btn--bloco{ margin-top:auto; }

/* ---------- selo de lançamento ----------
   Substituiu a tarja com relógio: a promoção continua existindo, mas cabe
   numa linha ao lado do título em vez de comer meia dobra da página. */

.promo-selo{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px;
  background:rgba(255,194,75,.18); border:1px solid rgba(255,194,75,.55);
  color:#8A5B00; font-size:13.5px; line-height:1.35; white-space:nowrap;
}
.promo-selo svg{ width:15px; height:15px; flex:0 0 auto; }
.promo-selo b{ font-weight:600; }
.promo-selo[hidden]{ display:none; }
.promo-selo--claro{ background:rgba(255,194,75,.16); color:var(--sol); }

/* ---------- o aceno pro Instagram ---------- */

.insta-selo{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:14px;
  padding:7px 15px 7px 11px; border-radius:999px;
  background:linear-gradient(100deg,#F58529,#DD2A7B 40%,#8134AF 72%,#515BD4);
  color:#fff; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(221,42,123,.7);
}
.insta-selo svg{ width:15px; height:15px; flex:0 0 auto; }
a.insta-selo:hover{ filter:brightness(1.08); }

/* ---------- cards escuros ----------
   Dois sabores do mesmo card: os planos de site levam foto de mar por trás
   (--mar), os de mídia ficam em vidro sobre o fundo escuro da seção
   (--noite). O que os dois têm em comum mora em --escuro. */

/* sem overflow:hidden aqui — ele cortaria a fita "Mais escolhido", que fica
   pendurada pra fora do card. Quem arredonda a foto é o border-radius:inherit. */
.plano--escuro{
  position:relative; isolation:isolate;
  background:var(--profundo); border:1px solid rgba(255,255,255,.16); color:#fff;
}
.plano--escuro::before{
  content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit;
  background-image:var(--foto,none); background-size:cover; background-position:center;
}
.plano--escuro::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(180deg,rgba(11,46,88,.46) 0%,rgba(11,46,88,.82) 52%,rgba(11,46,88,.94) 100%);
  transition:opacity .5s ease;
}
.plano--escuro:hover::after{ opacity:.87; }   /* a água clareia de leve */

/* 1. sites: raso → correnteza → mar aberto, na mesma ordem dos planos */
.plano--mar[data-fundo="recife"]{   --foto:url(../images/fundo-raso.jpg); }
.plano--mar[data-fundo="alto-mar"]{ --foto:url(../images/fundo-correnteza.jpg); }
.plano--mar[data-fundo="abissal"]{  --foto:url(../images/fundo-alto-mar.jpg); }

/* 2. mídia: sem foto — o próprio mar escuro da seção aparece por baixo, e um
   fio com o degradê do Instagram no topo diz de que rede a gente está falando */
.plano--noite{
  background:
    linear-gradient(90deg,#F58529,#DD2A7B 35%,#8134AF 68%,#515BD4) top/100% 3px no-repeat,
    linear-gradient(165deg,rgba(46,134,214,.40),rgba(20,73,140,.30));
}
.plano--noite::after{
  background:radial-gradient(120% 80% at 76% 0%,rgba(140,203,240,.16),transparent 64%);
}
.plano--noite:hover::after{ opacity:1; filter:brightness(1.6); }
.plano--noite.plano--destaque{
  background:
    linear-gradient(90deg,#F58529,#DD2A7B 35%,#8134AF 68%,#515BD4) top/100% 3px no-repeat,
    linear-gradient(165deg,rgba(255,194,75,.14),rgba(46,134,214,.42) 42%,rgba(20,73,140,.34));
}

.plano--escuro.plano--destaque{ border:2px solid var(--sol); }
.plano--escuro .plano__pitch{ color:rgba(255,255,255,.7); }
.plano--escuro .plano__preco{ border-bottom-color:rgba(255,255,255,.2); }
.plano--escuro .plano__duplo{ border-bottom-color:rgba(255,255,255,.2); }
.plano--escuro .plano__de,
.plano--escuro .plano__etapa{ color:rgba(255,255,255,.66); }
.plano--escuro .plano__antes{ color:rgba(255,255,255,.6); }
.plano--escuro .plano__periodo{ color:rgba(255,255,255,.66); }
.plano--escuro .plano__lista li{ color:rgba(255,255,255,.8); }
.plano--escuro .plano__lista li.plano__herda{ color:#fff; }
.plano--escuro:not(.plano--destaque) .plano__lista li::before{ border-color:var(--raso); }
.plano--escuro:hover{ box-shadow:0 24px 56px -12px rgba(0,0,0,.5); }

.planos__nota--claro{ color:rgba(255,255,255,.66); }

/* ---------- avulsos ---------- */

.avulsos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(390px,100%),1fr));
  gap:0 40px;
}
.avulso{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--borda);
}
.avulso h3{ font-size:17px; margin-bottom:5px; }
.avulso p{ font-size:14.5px; color:var(--texto-fraco); max-width:46ch; }
.avulso__preco{
  font-family:var(--mono); font-size:17px; color:var(--texto);
  white-space:nowrap; padding-top:2px;
}
.avulso__preco small{ font-size:12px; color:var(--texto-fraco); }

/* ==========================================================================
   15. PLANOS NA HOME — prévia com fadeout
   ========================================================================== */

/* o padding-top dá o espaço que a fita "Mais escolhido" precisa pra não ser
   comida pelo overflow:hidden que faz o corte da prévia. */
.planos--teaser{ position:relative; max-height:560px; padding-top:16px; overflow:hidden; }
.planos--teaser::after{
  content:""; position:absolute; inset:auto 0 0 0; height:210px; pointer-events:none;
  background:linear-gradient(180deg,rgba(242,249,254,0) 0%,var(--bruma) 76%);
}
.planos__veja{
  position:relative; z-index:2; display:flex; justify-content:center; margin-top:-46px;
}
@media (max-width:760px){
  .planos--teaser{ max-height:430px; }
  .planos--teaser::after{ height:170px; }
}

/* Os planos de mídia moram numa seção escura na página de planos, então o card
   --noite é translúcido de propósito. Na home a seção é clara: aqui ele precisa
   de uma base sólida por baixo dos mesmos degradês, senão desbota. */
.planos--midia.planos--teaser .plano--noite{
  background:
    linear-gradient(90deg,#F58529,#DD2A7B 35%,#8134AF 68%,#515BD4) top/100% 3px no-repeat,
    linear-gradient(165deg,rgba(46,134,214,.40),rgba(20,73,140,.30)),
    var(--profundo);
}
.planos--midia.planos--teaser .plano--noite.plano--destaque{
  background:
    linear-gradient(90deg,#F58529,#DD2A7B 35%,#8134AF 68%,#515BD4) top/100% 3px no-repeat,
    linear-gradient(165deg,rgba(255,194,75,.14),rgba(46,134,214,.42) 42%,rgba(20,73,140,.34)),
    var(--profundo);
}

/* segundo cabeçalho dentro da mesma seção (planos de Instagram na home) */
.cab--sub{ margin-top:clamp(56px,7vw,84px); }

/* preços alinhados entre os cards: a descrição mais longa tem 5 linhas */
@media (min-width:761px){
  .plano__pitch{ min-height:6.6em; }
}

/* ==========================================================================
   16. COMO O PREÇO FUNCIONA (fim da página de planos)
   ========================================================================== */

.pl-aberto__textos{
  display:grid; gap:14px; max-width:62ch;
}

/* ==========================================================================
   17. VIDRO, PROFUNDIDADE E MOVIMENTO
   A ideia: o site claro continua claro e legível; as faixas escuras deixam
   de ser bloco de tinta e viram água de verdade, com fumaça de fbm rodando
   no WebGL por baixo do texto.
   ========================================================================== */

/* ---------- o shader nas faixas escuras ---------- */

[data-vivo]{ position:relative; isolation:isolate; }

/* tudo que não é a água sobe uma camada */
[data-vivo] > *:not(.vivo){ position:relative; z-index:1; }

/* A água some nos 56px de cima e de baixo: é onde ficam as bordas de onda
   recortadas, que continuam no navy chapado. Sem essa dissolvida daria pra
   ver a emenda entre a fumaça e a lapela da onda. */
.vivo{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
  mask:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
}

/* Opacidade cheia: a água aparece como ela é. O que protege a leitura não é
   apagar a água inteira, é onde o véu abaixo cai. */
.vivo__tela{ display:block; width:100%; height:100%; }

.vivo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,32,60,.6),rgba(6,32,60,.72));
}

/* Nas seções de hero e chamada o texto mora na esquerda e o mascote na
   direita. Então o véu é lateral, não chapado: cobre a coluna do texto e
   abre no lado do mascote, onde a água pode aparecer limpa. É o mesmo truque
   de vídeo de fundo — escurecer só onde precisa ler. */
.hero .vivo::after,
.chamada .vivo::after{
  background:linear-gradient(100deg,
    rgba(4,24,44,.88) 0%,
    rgba(4,24,44,.7) 36%,
    rgba(4,24,44,.26) 66%,
    rgba(4,24,44,0) 100%);
}

/* No celular o texto ocupa a largura toda e o mascote sai de cena: o véu
   volta a ser chapado, senão o fim das linhas cai na água limpa. */
@media (max-width:900px){
  .hero .vivo::after,
  .chamada .vivo::after{
    background:linear-gradient(180deg,rgba(4,24,44,.8),rgba(4,24,44,.66));
  }
}

/* (o rodapé saiu daqui: virou areia, sem água por baixo — ver seção 10) */
/* nos planos de Instagram os cards já cobrem quase tudo */
.secao--fundo .vivo::after{ background:linear-gradient(180deg,rgba(6,32,60,.6),rgba(6,32,60,.7)); }

/* ---------- barra de progresso de leitura ---------- */

.progresso{
  position:fixed; inset:0 0 auto; height:2px; z-index:80;
  pointer-events:none;
}
.progresso i{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--mare),var(--raso) 55%,var(--sol));
}

/* ---------- vidro no cabeçalho ---------- */

.topo{ backdrop-filter:blur(16px) saturate(165%); -webkit-backdrop-filter:blur(16px) saturate(165%); }
.topo.is-preso{
  background:rgba(242,249,254,.74);
  backdrop-filter:blur(24px) saturate(190%);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  box-shadow:0 10px 30px -22px rgba(11,46,88,.55);
}

/* botão fantasma vira vidro de verdade quando está sobre a água */
.btn--fantasma{
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.btn--fantasma:hover{ background:rgba(255,255,255,.18); }

/* ---------- deslize: parallax por variável ---------- */

/* O halo do hero respira e desce mais devagar que o texto. */
.hero::before{
  translate:-50% var(--px,0px);
  animation:respira 19s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(1.09); opacity:.82; }
}

.mascote__aura{ transform:translate3d(0,var(--px,0px),0); }

/* A foto é maior que a moldura de propósito: a sobra é o que permite ela
   escorregar dentro do quadro conforme a página desce. */
.tela__foto{
  transform:scale(1.09) translate3d(0,var(--px,0px),0);
  will-change:transform;
}
/* ...e a sobra de cima invadiria a barra de navegador falsa. A barra sobe
   uma camada e a foto passa por baixo dela, como numa janela de verdade. */
.tela__barra{ position:relative; z-index:1; }

/* ---------- inclinação 3D e brilho no ponteiro ---------- */

[data-inclina]{ transform-style:preserve-3d; }

/* enquanto o mouse está em cima o transform precisa colar no ponteiro:
   a curva elástica do repouso viraria borracha aqui */
.is-inclinado{
  transition:transform .1s linear,box-shadow .3s ease,border-color .3s ease;
}

.card.is-inclinado{
  transform:perspective(1000px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translate3d(0,-6px,0);
  box-shadow:var(--sombra-alta); border-color:var(--raso);
}
.plano.is-inclinado{
  transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translate3d(0,-5px,0);
  box-shadow:var(--sombra-alta);
}
.obra__tela.is-inclinado{
  transform:perspective(1200px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translate3d(0,-6px,0) scale(1.012);
  box-shadow:var(--sombra-alta);
}
.avulso.is-inclinado{
  transform:perspective(900px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) translate3d(0,-3px,0);
}

/* Luz seguindo o ponteiro. No card ela passa POR BAIXO do texto: por cima,
   um claro de 240px em cima de fundo branco apaga a leitura do parágrafo. E é
   azul da marca, não branco — sobre papel branco, branco só lava. */
.card::after{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px circle at var(--bx,50%) var(--by,50%),
    rgba(140,203,240,.5),rgba(140,203,240,0) 62%);
}
.card > *{ z-index:1; }
.card.is-inclinado::after{ opacity:1; }

/* Na moldura do trabalho pode ser reflexo branco mesmo, e por cima: ali
   embaixo é foto, não texto — vira vidro. */
.obra__tela{ position:relative; }
.obra__tela::after{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(300px circle at var(--bx,50%) var(--by,50%),
    rgba(255,255,255,.3),rgba(255,255,255,0) 58%);
}
.obra__tela.is-inclinado::after{ opacity:1; }

/* ---------- números do hero ---------- */

/* largura fixa por dígito: sem isso a linha inteira dança durante a contagem */
.selos strong{ font-variant-numeric:tabular-nums; }

/* ---------- toques finais ---------- */

/* a barbatana da marca ganha um respiro de sombra quando o topo gruda */
.topo.is-preso .marca__fin{ filter:drop-shadow(0 2px 6px rgba(46,134,214,.45)); }

/* ==========================================================================
   18. OS DOIS HEROS NA ÁGUA
   O hero da home e a abertura dos planos deixam de ser bruma e passam a ser
   água aberta. Água em opacidade cheia não convive com texto navy — então o
   texto vira claro. Só os dois topos e as faixas escuras: o miolo do site
   (serviços, planos, trabalhos) continua claro como sempre foi.

   Pra voltar atrás é só apagar este bloco e o `data-vivo` das duas seções.
   ========================================================================== */

.hero,
.pl-abre{
  background:linear-gradient(180deg,#04182C 0%,#0A2A50 62%,#0B2E58 100%);
  color:#fff;
}

/* o halo de espuma virou a própria água */
.hero::before{ display:none; }

.hero .olho,
.pl-abre .rotulo{ color:var(--raso); }

.hero__h1,
.pl-abre__h1{ color:#fff; }

/* Na água, o azul do grifo desaparecia. Ouro é a cor de destaque da marca e
   é o único pedaço colorido do bloco — combina com o risco, que já era ouro. */
.hero .grifo{ color:var(--sol); }

.hero__sub,
.pl-abre__texto{ color:rgba(255,255,255,.82); }
.pl-abre__texto strong{ color:#fff; }

.selos{ color:rgba(255,255,255,.78); }
.selos strong{ color:#fff; }

.pl-volta{ color:var(--raso); border-bottom-color:rgba(140,203,240,.45); }
.pl-volta:hover{ color:#fff; border-bottom-color:#fff; }

/* Botão navy sobre água escura é um buraco. O principal vira ouro e os
   secundários viram vidro. */
.hero__acoes .btn--primario{ --bg:var(--sol); --fg:var(--abissal); --bd:var(--sol); }
.hero__acoes .btn--vazado,
.pl-pulo{
  --bg:rgba(255,255,255,.1); --fg:#fff; --bd:rgba(255,255,255,.42);
  background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
}
.hero__acoes .btn--vazado:hover,
.pl-pulo:hover{
  --bd:#fff;
  background:rgba(255,255,255,.2); border-color:#fff;
}
.pl-pulo span{ color:var(--sol); }

/* A aura era um clarão branco: sobre água escura viraria mancha. Vira uma luz
   azul fria, que ainda separa o mascote do fundo agitado sem chapar nada. */
.mascote__aura{
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(140,203,240,.34),rgba(46,134,214,.14) 55%,rgba(11,46,88,0) 72%);
}

/* sombra do mascote precisa ser mais escura que a água pra existir */
.hero__mascote img{ filter:drop-shadow(0 26px 34px rgba(2,14,28,.55)); }
.pl-abre__mascote img{ filter:drop-shadow(0 18px 30px rgba(2,14,28,.5)); }

/* ---------- cabeçalho antes de grudar ---------- */

/* As duas páginas abrem na água agora, então o cabeçalho nasce escuro e
   translúcido — barra clara sobre água escura parecia colada por cima. Ao
   rolar 8px o main.js põe .is-preso e ele clareia pro estado de sempre, que é
   o que serve pro miolo claro do site. */
/* Sólido, não translúcido: o cabeçalho é sticky, então no topo da página ele
   fica ACIMA do hero e não tem água nenhuma atrás pra borrar — o
   backdrop-filter pegava a bruma do body e devolvia uma barra cinza. Pintando
   ele com a primeira parada do gradiente do hero, cabeçalho e água viram um
   bloco escuro só. */
.topo:not(.is-preso){
  background:#04182C;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.topo:not(.is-preso) .marca{ color:#fff; }
.topo:not(.is-preso) .marca__fin{ fill:var(--raso); }
.topo:not(.is-preso) .topo__cta{ --bg:var(--sol); --fg:var(--abissal); --bd:var(--sol); }
.topo:not(.is-preso) .hamburguer{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.38);
}
.topo:not(.is-preso) .hamburguer span{ background:#fff; }

/* Só no desktop: abaixo de 900px o menu é um painel claro que desce, e clarear
   os links aqui deixaria texto branco sobre fundo branco lá dentro. */
@media (min-width:901px){
  .topo:not(.is-preso) .nav a{ color:rgba(255,255,255,.8); }
  .topo:not(.is-preso) .nav a:hover{ color:#fff; background:rgba(255,255,255,.14); }
  .topo:not(.is-preso) .nav a.is-atual{ color:#fff; }
}

/* Na home, quem desenha a onda entre o hero e o miolo claro é o
   `.secao--espuma::before` da seção de baixo. Aqui embaixo da abertura vem uma
   `.secao` comum, que não tem lapela nenhuma — sem isso o corte entre a água e
   a bruma fica uma linha reta. Então a abertura desenha a própria: a bruma
   sobe em onda por dentro dela. */
.pl-abre::after{
  content:""; position:absolute; z-index:2;
  left:0; right:0; bottom:0; height:34px;
  background:var(--bruma);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V16c10 0 10-11 20-11s10 11 20 11 10-11 20-11 10 11 20 11 10-11 20-11 10 11 20 11v18Z' fill='%23000'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
}

/* ==========================================================================
   19. PÁGINA 404
   Mesma água do hero, mesma grade, mesmos botões — o que muda é o número
   mordido e a altura: a página tem uma tela só, então ela ocupa a tela toda
   em vez de terminar no meio do nada.
   ========================================================================== */

.erro{
  display:flex; align-items:center;
  min-height:100svh;
  /* o mar é fixo na base da janela: sem esse respiro embaixo a última linha
     nasce debaixo d'água */
  padding-block:clamp(90px,12vw,130px) calc(var(--mar-h) + clamp(24px,4vw,48px));
}
.erro > .wrap{ width:100%; }

/* O número é o gráfico da piada: ouro (a cor de destaque da marca, a mesma do
   grifo do hero) com uma mordida arrancada do topo.

   A mordida são três círculos vazados na máscara. `mask-composite:intersect`
   é o que faz as três camadas se somarem como buracos em vez de se anularem
   — em navegador que não suporte, as camadas se unem, a mordida some e o
   número aparece inteiro. Perde a piada, não quebra a página. */
.erro__num{
  font-family:var(--display); font-weight:800;
  font-size:clamp(66px,12vw,132px); line-height:.9;
  letter-spacing:-.055em;
  color:var(--sol);
  margin:2px 0 14px;
  width:max-content; max-width:100%;

  /* raios em `em`: a mordida encolhe junto com o número no celular. Em px
     ela ficava do mesmo tamanho e comia o 404 inteiro na tela pequena. */
  --mordida:
    radial-gradient(circle 0.26em at 44% -6%,transparent 98%,#000 100%),
    radial-gradient(circle 0.2em at 62% -2%,transparent 98%,#000 100%),
    radial-gradient(circle 0.16em at 74% 6%,transparent 98%,#000 100%);
  -webkit-mask-image:var(--mordida);
          mask-image:var(--mordida);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}

.erro__h1{ font-size:clamp(34px,4.6vw,58px); max-width:16ch; }

.erro__nota{ margin-top:26px; font-size:15px; color:rgba(255,255,255,.8); }

/* o balão do mascote cabe aqui porque a coluna dele é mais folgada que na home */
.balao--erro{ left:-16%; top:2%; }

@media (max-width:900px){
  /* o mascote já flutua à direita pela regra do hero; aqui só o número
     acompanha o texto e o balão continua fora */
  .erro__h1{ font-size:clamp(28px,7vw,44px); max-width:none; }
  .erro__num{ font-size:clamp(56px,15vw,96px); }
}