/* LP de aplicação · Perto Marketing Digital
   Marca: turquesa #7EBEB6, preto, branco, Inter. Preto sobre turquesa é a assinatura.
   Grade de 8: todo espaçamento, raio e tamanho de caixa é múltiplo de 8 (tokens --e*). */

:root {
  --turquesa: #7EBEB6;
  --turquesa-claro: #A9D6D0;
  --turquesa-fundo: #E9F4F2;
  --preto: #0A0A0A;
  --preto-2: #141414;
  --preto-3: #1E1E1E;
  --branco: #FFFFFF;
  --papel: #F5F5F3;
  --cinza: #6B6B6B;
  --linha: rgba(10, 10, 10, .10);
  --linha-escura: rgba(255, 255, 255, .10);

  /* espaçamento (8pt) */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 32px; --e5: 40px;
  --e6: 48px; --e8: 64px; --e10: 80px; --e12: 96px; --e16: 128px;
  /* raios */
  --r1: 8px; --r2: 16px; --r3: 24px; --r4: 32px;

  --largura: 1232px;
  --gutter: var(--e2);
  --suave: cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 600px) { :root { --gutter: var(--e4); } }
@media (min-width: 1024px) { :root { --gutter: var(--e5); } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--e10); }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--branco); color: var(--preto);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--turquesa); color: var(--preto); }

.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--e12) 0; position: relative; }
@media (min-width: 1024px) { section { padding: var(--e16) 0; } }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; }
h1 { font-size: clamp(48px, 7.6vw, 104px); }
h2 { font-size: clamp(32px, 4.4vw, 56px); max-width: 18ch; }
h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.rotulo {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--e3);
}
.rotulo::before { content: ""; width: var(--e3); height: 2px; background: currentColor; opacity: .5; }
.lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 52ch; }
.cabeca { margin-bottom: var(--e8); }

/* Caixas: a base de tudo */
.box {
  border-radius: var(--r3); background: var(--branco);
  border: 1px solid var(--linha); position: relative; overflow: hidden;
}

/* Brilho que segue o mouse dentro da caixa (fx.js define --x/--y) */
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(126, 190, 182, .22), transparent 60%);
  opacity: 0; transition: opacity .4s var(--suave);
}
.spot:hover::after { opacity: 1; }

/* Logo: o SVG oficial vira máscara e herda a cor do texto */
.logo {
  display: block; width: 120px; aspect-ratio: 444.83 / 230.26; background: currentColor;
  -webkit-mask: url(/assets/perto-logo.svg) no-repeat center / contain;
  mask: url(/assets/perto-logo.svg) no-repeat center / contain;
}

/* Botões */
.botao {
  --fundo: var(--turquesa); --tinta: var(--preto);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e1);
  height: var(--e8); padding: 0 var(--e4); border-radius: var(--r2); border: 0;
  background: var(--fundo); color: var(--tinta);
  font: 700 16px/1 "Inter", sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .4s var(--suave), box-shadow .4s var(--suave), color .3s;
}
.botao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--branco);
  transform: translateY(101%); transition: transform .5s var(--suave);
}
.botao:hover::before { transform: none; }
.botao:hover { box-shadow: 0 16px 40px -16px rgba(126, 190, 182, .7); }
.botao svg { width: var(--e2); height: var(--e2); transition: transform .4s var(--suave); }
.botao:hover svg { transform: translateX(4px); }
.botao.escuro { --fundo: var(--preto); --tinta: var(--branco); }
.botao.escuro::before { background: var(--turquesa); }
.botao.escuro:hover { color: var(--preto); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .5); }
.botao.pequeno { height: var(--e6); padding: 0 var(--e3); font-size: 14px; border-radius: var(--r1); }
.botao:disabled { opacity: .6; cursor: wait; }
.link-seta {
  font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: var(--e1);
  height: var(--e8); color: rgba(255, 255, 255, .8); transition: color .3s, gap .3s var(--suave);
}
.link-seta::after { content: "↓"; }
.link-seta:hover { color: var(--turquesa); gap: var(--e2); }

/* Cursor seguidor (só com mouse) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: var(--e5); height: var(--e5); margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1.5px solid var(--turquesa); opacity: 0;
  transition: width .3s var(--suave), height .3s var(--suave), margin .3s var(--suave), opacity .3s, background .3s;
  mix-blend-mode: difference;
}
.cursor.ativo { opacity: 1; }
.cursor.sobre { width: var(--e10); height: var(--e10); margin: -40px 0 0 -40px; background: rgba(126, 190, 182, .25); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* Topo (vira vidro ao rolar) */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; padding: var(--e2) 0; transition: padding .4s var(--suave); }
.topo .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  height: var(--e8); padding-left: var(--e3); padding-right: var(--e1);
  border-radius: var(--r2); color: var(--branco);
  transition: background .4s, backdrop-filter .4s, border-color .4s, max-width .4s var(--suave);
  border: 1px solid transparent; max-width: var(--largura);
}
.topo.rolou { padding: var(--e1) 0; }
.topo.rolou .wrap {
  background: rgba(10, 10, 10, .86); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); border-color: var(--linha-escura);
  max-width: calc(var(--largura) - var(--e10));
}
.topo .logo { width: 96px; }
.topo nav { display: flex; gap: var(--e4); }
.topo nav a { font-size: 14px; font-weight: 500; text-decoration: none; opacity: .7; transition: opacity .3s; }
.topo nav a:hover { opacity: 1; }

/* Hero */
.hero {
  background: var(--preto); color: var(--branco); overflow: hidden;
  padding: calc(var(--e16) + var(--e2)) 0 0; min-height: min(100vh, 1024px); display: flex; flex-direction: column;
}
.hero-grade {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: var(--e8) var(--e8);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}
.hero-luz {
  position: absolute; width: 720px; height: 720px; border-radius: 50%; pointer-events: none;
  left: var(--mx, 70%); top: var(--my, 30%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(126, 190, 182, .28), transparent 65%);
  filter: blur(24px); transition: left 1.2s var(--suave), top 1.2s var(--suave);
}
.hero .grade {
  position: relative; flex: 1; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--e8); align-items: center; padding-bottom: var(--e10);
}
.pilula {
  display: inline-flex; align-items: center; gap: var(--e1); height: var(--e4); padding: 0 var(--e2);
  border-radius: var(--r4); border: 1px solid var(--linha-escura); background: rgba(255, 255, 255, .04);
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .8); margin-bottom: var(--e4);
}
.pilula i, .ponto-vivo {
  width: var(--e1); height: var(--e1); border-radius: 50%; background: var(--turquesa);
  box-shadow: 0 0 0 0 rgba(126, 190, 182, .6); animation: pulso 2s infinite;
}
@keyframes pulso { 70% { box-shadow: 0 0 0 var(--e1) rgba(126, 190, 182, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 190, 182, 0); } }
.titulo-anim .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.titulo-anim .linha > span { display: inline-block; transform: translateY(110%); animation: sobe 1s var(--suave) forwards; }
.titulo-anim .linha:nth-child(2) > span { animation-delay: .12s; }
.titulo-anim em { font-style: normal; color: var(--turquesa); }
@keyframes sobe { to { transform: none; } }
.hero .sub, .hero .lead, .hero .acoes, .hero .nota, .pilula { opacity: 0; animation: aparece .9s var(--suave) forwards; }
.pilula { animation-delay: 0s; }
.hero .sub { animation-delay: .35s; }
.hero .lead { animation-delay: .45s; }
.hero .acoes { animation-delay: .55s; }
.hero .nota { animation-delay: .65s; }
@keyframes aparece { from { opacity: 0; transform: translateY(var(--e2)); } to { opacity: 1; transform: none; } }
.hero .sub { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin: var(--e4) 0 var(--e2); max-width: 26ch; }
.hero .lead { color: rgba(255, 255, 255, .66); }
.acoes { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e5); }
.hero .nota { margin-top: var(--e3); font-size: 13px; color: rgba(255, 255, 255, .45); max-width: 44ch; }

.palco { position: relative; perspective: 1200px; opacity: 0; animation: aparece 1.1s .3s var(--suave) forwards; }
.foto-hero {
  position: relative; border-radius: var(--r4); overflow: hidden; aspect-ratio: 4 / 5;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .6s var(--suave);
  box-shadow: 0 48px 96px -32px rgba(0, 0, 0, .8), 0 0 0 1px var(--linha-escura);
}
.foto-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transform: scale(1.04); }
.foto-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, .55)),
              radial-gradient(400px circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .14), transparent 60%);
}
.chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2); border-radius: var(--r2);
  background: rgba(20, 20, 20, .72); border: 1px solid var(--linha-escura);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-size: 13px; color: rgba(255, 255, 255, .75); line-height: 1.35;
  transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .8s var(--suave);
  animation: flutua 6s ease-in-out infinite;
}
.chip strong { color: var(--branco); display: block; font-size: 14px; }
.chip-icone { width: var(--e5); height: var(--e5); border-radius: var(--r1); background: var(--turquesa); color: var(--preto); display: grid; place-items: center; flex: none; }
.chip-icone svg { width: 20px; height: 20px; }
.chip-a { left: calc(var(--e5) * -1); top: var(--e8); }
.chip-b { right: calc(var(--e3) * -1); top: 46%; flex-direction: column; align-items: flex-start; gap: 0; background: var(--turquesa); color: var(--preto); border: 0; animation-delay: -2s; }
.chip-numero { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: var(--e1); max-width: 7ch; }
.chip-d { left: calc(var(--e5) * -1); top: 27%; flex-direction: column; align-items: flex-start; gap: var(--e1); animation-delay: -3s; }
.chip-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turquesa); }
.chip-d ul { list-style: none; display: grid; gap: 4px; }
.chip-d li { display: flex; align-items: center; gap: var(--e1); font-size: 14px; font-weight: 600; color: var(--branco); }
.chip-d li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--turquesa); }
.chip-c { left: var(--e3); bottom: var(--e3); gap: var(--e1); animation-delay: -4s; }
.chip-c strong { display: inline; color: var(--turquesa); font-size: 13px; }
@keyframes flutua { 50% { margin-top: calc(var(--e1) * -1); } }

.faixa-setores { position: relative; border-top: 1px solid var(--linha-escura); padding: var(--e3) 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.trilho { display: flex; gap: var(--e6); width: max-content; animation: corre 40s linear infinite; }
.faixa-setores:hover .trilho { animation-play-state: paused; }
.trilho span { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .5); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e6); }
.trilho span::after { content: "✦"; color: var(--turquesa); font-size: 12px; }
@keyframes corre { to { transform: translateX(-50%); } }

/* Revelar ao rolar */
.js .revela { opacity: 0; transform: translateY(var(--e4)); transition: opacity .9s var(--suave), transform .9s var(--suave); transition-delay: calc(var(--ordem, 0) * 80ms); }
.js .revela.visivel { opacity: 1; transform: none; }
.revela.pronto { transition-delay: 0s; }

/* Números */
.numeros { background: var(--papel); padding: var(--e12) 0; }
.contexto { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--e5); max-width: 28ch; }
.bento-numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); }
.bento-numeros .box { padding: var(--e4); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .9s var(--suave), transform .5s var(--suave), border-color .3s; }
.bento-numeros .box:hover { transform: translateY(calc(var(--e1) * -1)); border-color: var(--turquesa); }
.bento-numeros strong { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.bento-numeros strong .unidade { display: block; font-size: .62em; letter-spacing: -0.03em; margin-top: 4px; }
.bento-numeros strong small { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--cinza); margin-bottom: 4px; }
.bento-numeros .box > span { font-size: 15px; color: var(--cinza); font-weight: 500; max-width: 20ch; }
.bento-numeros .destaque { background: var(--preto); color: var(--branco); border-color: var(--preto); }
.bento-numeros .destaque strong { color: var(--turquesa); }
.bento-numeros .destaque > span { color: rgba(255, 255, 255, .6); }

/* Dor */
.dor .cabeca h2 { max-width: 20ch; }
.dor .cabeca .lead { margin-top: var(--e3); color: #3a3a3a; }
.riscado { position: relative; white-space: nowrap; }
.riscado::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .1em; background: var(--turquesa);
  transform: scaleX(0); transform-origin: left; transition: transform 1s .4s var(--suave); border-radius: var(--r1);
}
.revela.visivel .riscado::after { transform: scaleX(1); }
.dor-grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--e2); }
.conversa { background: var(--papel); border: 0; padding: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }
.conversa-topo { display: flex; align-items: center; gap: var(--e2); padding-bottom: var(--e2); border-bottom: 1px solid var(--linha); margin-bottom: var(--e1); }
.conversa-topo strong { display: block; font-size: 15px; }
.conversa-topo span { font-size: 13px; color: var(--cinza); }
.avatar { width: var(--e5); height: var(--e5); border-radius: 50%; background: var(--preto); color: var(--turquesa); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.bolha, .anexo {
  align-self: flex-start; max-width: 88%; padding: var(--e2) var(--e3); border-radius: var(--r2) var(--r2) var(--r2) var(--r1);
  background: var(--branco); font-weight: 500; font-size: 16px; line-height: 1.45; position: relative;
  box-shadow: 0 1px 0 var(--linha);
  transform-origin: left bottom;
  transition: opacity .6s var(--suave), transform .6s var(--suave), background .3s;
  transition-delay: calc(var(--i) * 180ms + 200ms);
}
.bolha:nth-of-type(even) { align-self: flex-end; border-radius: var(--r2) var(--r2) var(--r1) var(--r2); transform-origin: right bottom; }
.bolha time { display: block; text-align: right; font-size: 11px; color: var(--cinza); margin-top: 4px; font-weight: 500; }
.bolha:nth-of-type(even) { background: #CFE8E4; }
.bolha:nth-of-type(even) time { color: #4A7C76; }
.bolha:hover { background: var(--turquesa-fundo); }
.bolha:nth-of-type(even):hover { background: #BCDFDA; }
.js .conversa:not(.visivel) .bolha, .js .conversa:not(.visivel) .anexo { opacity: 0; transform: translateY(var(--e2)) scale(.96); }
.anexo { display: flex; align-items: center; gap: var(--e2); background: var(--branco); border: 1px dashed rgba(10, 10, 10, .2); box-shadow: none; }
.anexo svg { width: var(--e3); height: var(--e3); color: #C0392B; flex: none; }
.anexo strong { display: block; font-size: 14px; text-decoration: line-through; text-decoration-color: #C0392B; }
.anexo span { font-size: 13px; color: var(--cinza); }

.distancia { background: var(--preto); color: var(--branco); border: 0; padding: var(--e4); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e4); --p: 0; }
.dist-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e2); }
.distancia .rotulo { color: rgba(255, 255, 255, .55); margin: 0; }
.distancia .rotulo::before { display: none; }
.medidor { flex: none; height: var(--e4); padding: 0 var(--e2); border-radius: var(--r4); display: inline-flex; align-items: center; gap: 2px; background: var(--preto-3); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); transition: background .4s, color .4s; }
.medidor b { font-size: 14px; color: var(--branco); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; margin-right: 2px; }
.distancia.perto .medidor { background: var(--turquesa); color: var(--preto); }
.distancia.perto .medidor b { color: var(--preto); }
.regua { position: relative; display: flex; align-items: center; gap: var(--e2); padding-bottom: var(--e3); }
.no { position: relative; flex: none; width: var(--e6); height: var(--e6); border-radius: 50%; display: grid; place-items: center; }
.no > span:not(.mini-logo) { position: absolute; top: calc(100% + var(--e1)); white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.voce { background: var(--branco); }
.voce::before { content: ""; width: var(--e2); height: var(--e2); border-radius: 50%; background: var(--preto); }
.voce span { left: 0; color: rgba(255, 255, 255, .8); }
.trilha { flex: 0 0 auto; width: calc((100% - 144px) * (1 - var(--p) * .72)); transition: width .2s linear; height: 2px; position: relative; background-image: linear-gradient(90deg, rgba(255, 255, 255, .35) 50%, transparent 50%); background-size: var(--e2) 2px; }
.trilha i { position: absolute; inset: 0; background: var(--turquesa); transform-origin: right; transform: scaleX(var(--p)); }
.agencia {
  background: var(--preto-3); border: 1px solid var(--linha-escura);
  transition: background .4s, border-color .4s, width .5s var(--suave), height .5s var(--suave);
}
.agencia::before { content: "?"; font-size: 18px; font-weight: 800; color: rgba(255, 255, 255, .35); }
.agencia::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--turquesa); opacity: 0; }
.agencia span { right: 0; color: rgba(255, 255, 255, .55); }
.mini-logo { display: none; width: 34px; aspect-ratio: 444.83 / 230.26; background: var(--preto);
  -webkit-mask: url(/assets/perto-logo.svg) no-repeat center / contain; mask: url(/assets/perto-logo.svg) no-repeat center / contain; }
.distancia.perto .agencia { background: var(--turquesa); border-color: var(--turquesa); width: var(--e8); height: var(--e8); }
.distancia.perto .agencia::before { display: none; }
.distancia.perto .mini-logo { display: block; animation: aparece .5s var(--suave); }
.distancia.perto .agencia::after { animation: chega 1.6s var(--suave) 2; }
@keyframes chega { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }
.distancia .nome-perto, .distancia .valor-perto { display: none; }
.distancia.perto .nome-longe, .distancia.perto .valor-longe { display: none; }
.distancia.perto .nome-perto, .distancia.perto .valor-perto { display: block; }
.distancia.perto .nome-perto { color: var(--turquesa); }
.leitura strong { font-size: clamp(56px, 6vw, 88px); font-weight: 800; letter-spacing: -0.05em; line-height: .9; display: block; color: rgba(255, 255, 255, .25); }
.leitura .valor-perto { color: var(--turquesa); animation: aparece .6s var(--suave); }
.sinais { list-style: none; display: grid; gap: var(--e1); }
.sinais li { display: flex; align-items: center; gap: var(--e2); padding: var(--e2); border-radius: var(--r2); background: var(--preto-2); border: 1px solid var(--linha-escura); font-size: 15px; font-weight: 500; transition: background .5s, border-color .5s; perspective: 400px; }
.sinal { flex: none; width: var(--e3); height: var(--e3); border-radius: 50%; display: grid; place-items: center; background: rgba(229, 72, 77, .16); color: #E5484D; font-size: 12px; font-weight: 800; transition: transform .6s var(--suave), background .4s, color .4s; }
.sinal::before { content: "✕"; }
.frase { position: relative; display: grid; overflow: hidden; }
.frase > span { grid-area: 1 / 1; transition: transform .6s var(--suave), opacity .4s; }
.frase .longe { color: rgba(255, 255, 255, .55); }
.frase .perto { transform: translateY(110%); opacity: 0; }
.sinais li.virou { background: rgba(126, 190, 182, .1); border-color: rgba(126, 190, 182, .35); }
.sinais li.virou .sinal { background: var(--turquesa); color: var(--preto); transform: rotateY(360deg); }
.sinais li.virou .sinal::before { content: "✓"; }
.sinais li.virou .longe { transform: translateY(-110%); opacity: 0; }
.sinais li.virou .perto { transform: none; opacity: 1; }

/* Pilares */
.pilares { background: var(--preto); color: var(--branco); }
.pilares .rotulo { color: var(--turquesa); }
.pilares .cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; }
.pilares .cabeca > p { color: rgba(255, 255, 255, .6); max-width: 40ch; }
.bento-pilares { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: var(--e2); }
.pilar { background: var(--preto-2); border-color: var(--linha-escura); display: flex; flex-direction: column; transition: opacity .9s var(--suave), transform .6s var(--suave), border-color .4s; }
.pilar:hover { transform: translateY(calc(var(--e1) * -1)); border-color: rgba(126, 190, 182, .4); }
.pilar.grande { grid-row: span 2; }
.pilar .midia { overflow: hidden; aspect-ratio: 16 / 10; }
.pilar.grande .midia { aspect-ratio: auto; flex: 1; min-height: 320px; }
.pilar img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave), filter .6s; filter: grayscale(.25) brightness(.9); }
.pilar:hover img { transform: scale(1.06); filter: none; }
.pilar .corpo { padding: var(--e4); }
.pilar .num { display: inline-grid; place-items: center; width: var(--e5); height: var(--e5); border-radius: var(--r1); background: rgba(126, 190, 182, .14); color: var(--turquesa); font-size: 13px; font-weight: 800; margin-bottom: var(--e3); }
.pilar h3 { font-size: 24px; }
.pilar p { color: rgba(255, 255, 255, .62); margin-top: var(--e1); }

/* Cases */
.bento-cases { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.case { padding: var(--e5); display: flex; flex-direction: column; gap: var(--e3); transition: opacity .9s var(--suave), transform .6s var(--suave), box-shadow .6s var(--suave); }
.case:hover { box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .35); }
.case.turquesa { background: var(--turquesa); border: 0; }
.case.escuro { background: var(--preto); color: var(--branco); border: 0; }
.case.claro { background: var(--papel); border: 0; }
.case .tag { display: inline-flex; align-items: center; height: var(--e4); padding: 0 var(--e2); border-radius: var(--r4); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; align-self: flex-start; background: rgba(10, 10, 10, .08); }
.case.escuro .tag { background: rgba(126, 190, 182, .16); color: var(--turquesa); }
.case h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.case dl { display: grid; gap: var(--e2); margin-top: auto; }
.case dl div { padding-top: var(--e2); border-top: 1px solid rgba(10, 10, 10, .14); }
.case.escuro dl div { border-color: var(--linha-escura); }
.case dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; opacity: .6; }
.case dd { font-size: 15px; line-height: 1.5; }
.case.escuro dd { color: rgba(255, 255, 255, .75); }
.agenda { display: grid; gap: var(--e2); background: var(--preto); color: var(--branco); border-radius: var(--r2); padding: var(--e2) var(--e3); }
.ano { display: grid; grid-template-columns: var(--e6) 1fr; gap: 4px var(--e2); align-items: center; }
.ano-nome { font-size: 15px; font-weight: 800; color: var(--turquesa); }
.agenda .meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.agenda .meses i {
  aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center; font-style: normal;
  font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .35); background: var(--preto-3);
  transition: background .5s var(--suave), color .5s, transform .5s var(--suave);
}
.case.visivel .agenda .meses i:not(.livre) { background: var(--turquesa); color: var(--preto); transition-delay: calc(var(--k, 0) * 60ms + 300ms); }
.agenda .meses i.livre { background: transparent; border: 1px dashed rgba(255, 255, 255, .25); }
.agenda .meses i:hover { transform: translateY(-4px); }
.selo-lotado, .selo-livre { grid-column: 2; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .55); }
.selo-lotado::before { content: "● "; color: var(--turquesa); }
.rec { top: calc(12% + var(--e1)); left: var(--e2); display: inline-flex; align-items: center; gap: 6px; }
.rec i { width: var(--e1); height: var(--e1); border-radius: 50%; background: #E5484D; animation: pisca 1.2s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.formato { bottom: calc(12% + var(--e1)); right: var(--e2); padding: 4px var(--e1); border-radius: 4px; background: rgba(10, 10, 10, .6); }
.anos { display: flex; align-items: baseline; gap: var(--e1); }
.anos span { font-size: clamp(80px, 8vw, 120px); font-weight: 800; letter-spacing: -0.06em; line-height: .9; color: var(--turquesa); }
.anos small { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .6); }

.cta-meio { margin: var(--e2) 0 var(--e10); padding: var(--e4) var(--e5); background: var(--turquesa-fundo); border: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.cta-meio p { font-size: clamp(20px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }

.lista-setores { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e2); }
.setor { padding: var(--e4); transition: opacity .9s var(--suave), transform .5s var(--suave), border-color .4s, background .4s, color .4s; }
.setor::before {
  content: "→"; position: absolute; top: var(--e3); right: var(--e3); z-index: 1;
  width: var(--e5); height: var(--e5); border-radius: 50%; display: grid; place-items: center;
  background: var(--turquesa); color: var(--preto); font-weight: 800;
  opacity: 0; transform: translate(-8px, 8px) rotate(-45deg); transition: opacity .4s, transform .5s var(--suave);
}
.setor:hover { transform: translateY(calc(var(--e1) * -1)); background: var(--preto); border-color: var(--preto); color: var(--branco); box-shadow: 0 32px 64px -32px rgba(0, 0, 0, .5); }
.setor:hover::before { opacity: 1; transform: rotate(-45deg); }
.setor .icone { width: var(--e6); height: var(--e6); border-radius: var(--r2); background: var(--papel); display: grid; place-items: center; margin-bottom: var(--e3); transition: background .4s, color .4s, transform .6s var(--suave); }
.setor .icone svg { width: var(--e3); height: var(--e3); }
.setor .icone svg * { stroke-dasharray: 160; stroke-dashoffset: 0; }
.js .setor:not(.visivel) .icone svg * { stroke-dashoffset: 160; }
.setor.visivel .icone svg * { transition: stroke-dashoffset 1.6s var(--suave) .3s; }
.setor:hover .icone { background: var(--turquesa); color: var(--preto); transform: rotate(-8deg) scale(1.08); }
.setor p { color: #4a4a4a; margin-top: var(--e1); font-size: 15px; transition: color .4s; }
.setor:hover p { color: rgba(255, 255, 255, .65); }

/* Processo */
.processo { background: var(--papel); }
.processo .grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--e8); align-items: start; }
.processo .fixo { position: sticky; top: var(--e12); }
.processo .apoio { margin-top: var(--e3); color: #3a3a3a; max-width: 40ch; }
.foto-lado { margin-top: var(--e5); aspect-ratio: 4 / 5; max-height: 480px; border: 0; }
.foto-lado img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.passos { list-style: none; display: grid; gap: var(--e2); position: relative; }
.passos::before { content: ""; position: absolute; left: calc(var(--e4) + var(--e3) - 1px); top: var(--e5); bottom: var(--e5); width: 2px; background: var(--linha); }
.passos::after { content: ""; position: absolute; left: calc(var(--e4) + var(--e3) - 1px); top: var(--e5); width: 2px; height: calc((100% - var(--e10)) * var(--prog, 0)); background: var(--turquesa); }
.passo { display: grid; grid-template-columns: var(--e6) 1fr; gap: var(--e3); padding: var(--e4); align-items: start; transition: opacity .9s var(--suave), transform .5s var(--suave), border-color .3s, box-shadow .5s; }
.passo:hover { transform: translateX(var(--e1)); border-color: var(--turquesa); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .25); }
.passo .n { position: relative; z-index: 1; width: var(--e6); height: var(--e6); border-radius: 50%; background: var(--preto); color: var(--turquesa); display: grid; place-items: center; font-weight: 800; font-size: 15px; transition: background .4s, color .4s; }
.passo.ativo .n { background: var(--turquesa); color: var(--preto); }
.passo p { color: #4a4a4a; margin-top: var(--e1); }

/* Filtro */
.filtro-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.filtro .coluna { padding: var(--e5); border: 0; }
.filtro .sim { background: var(--turquesa); }
.filtro .nao { background: var(--papel); }
.js .filtro .sim:not(.visivel) { transform: translateX(calc(var(--e4) * -1)); }
.js .filtro .nao:not(.visivel) { transform: translateX(var(--e4)); }
.filtro h3 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); font-size: 22px; }
.marca-sim, .marca-nao { width: var(--e5); height: var(--e5); border-radius: 50%; display: grid; place-items: center; font-size: 16px; flex: none; }
.marca-sim { background: var(--preto); color: var(--turquesa); }
.marca-nao { background: var(--branco); color: var(--preto); border: 1px solid var(--linha); }
.filtro ul { list-style: none; display: grid; gap: var(--e1); }
.filtro li {
  position: relative; display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3); border-radius: var(--r2); font-weight: 500;
  transition: transform .5s var(--suave), background .3s, color .6s, opacity .6s var(--suave);
  transition-delay: calc(var(--i, 0) * 140ms + 400ms);
}
.filtro .pronto li, .filtro .pronto .t::after { transition-delay: 0s; }
.filtro li::before {
  content: ""; flex: none; width: var(--e3); height: var(--e3); border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  transition: transform .5s var(--suave); transition-delay: inherit;
}
.filtro .sim li { background: rgba(255, 255, 255, .35); }
.filtro .sim li::before { content: "✓"; background: var(--preto); color: var(--turquesa); }
.js .filtro .sim:not(.visivel) li { opacity: 0; transform: translateY(var(--e1)); }
.js .filtro .sim:not(.visivel) li::before { transform: scale(0); }
.filtro .sim li:hover { transform: translateX(var(--e1)); background: rgba(255, 255, 255, .65); }
.filtro .nao li { background: var(--branco); color: #999; }
.filtro .nao li::before { content: "✕"; background: var(--papel); color: var(--cinza); }
.filtro .nao .t { position: relative; }
.filtro .nao .t::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 55%; height: 2px;
  background: rgba(10, 10, 10, .35); transform-origin: left; transition: transform .7s var(--suave); transition-delay: calc(var(--i, 0) * 140ms + 600ms);
}
.js .filtro .nao:not(.visivel) li { color: #333; }
.js .filtro .nao:not(.visivel) .t::after { transform: scaleX(0); }
.filtro .nao li:hover { transform: translateX(var(--e1)); color: #333; }
.filtro .nao li:hover .t::after { transform: scaleX(0); transition-delay: 0s; }
.sublinha { position: relative; white-space: nowrap; isolation: isolate; }
.sublinha::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .14em; z-index: -1;
  background: var(--turquesa); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1s .3s var(--suave);
}
.revela.visivel .sublinha::after { transform: scaleX(1); }
.condicoes { margin-top: var(--e2); background: var(--preto); color: var(--branco); border: 0; padding: var(--e4) var(--e5); display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.condicoes .valor span { display: block; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); margin-bottom: 4px; }
.condicoes .valor strong { font-size: clamp(36px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; color: var(--turquesa); line-height: 1; }
.condicoes .valor small { font-size: .45em; font-weight: 700; color: rgba(255, 255, 255, .6); letter-spacing: 0; margin-left: 4px; }

/* Aplicação */
.aplicacao { background: var(--preto); color: var(--branco); overflow: hidden; }
.aplicacao .hero-luz { left: 15%; top: 30%; }
.aplicacao .grade { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--e8); align-items: start; }
.aplicacao .rotulo { color: var(--turquesa); }
.aplicacao .intro > p { color: rgba(255, 255, 255, .66); margin-top: var(--e3); }
.garantias { list-style: none; display: grid; gap: var(--e1); margin-top: var(--e5); }
.garantias li { display: flex; align-items: center; gap: var(--e2); padding: var(--e2); border-radius: var(--r2); background: rgba(255, 255, 255, .04); border: 1px solid var(--linha-escura); font-weight: 500; font-size: 15px; }
.garantias span { width: var(--e4); height: var(--e4); border-radius: var(--r1); background: var(--turquesa); color: var(--preto); display: grid; place-items: center; font-size: 13px; font-weight: 800; flex: none; }
.aplicacao .atendimento { margin-top: var(--e4); font-size: 14px; color: rgba(255, 255, 255, .55); }
.aplicacao .atendimento strong { color: var(--branco); }

form { background: var(--branco); color: var(--preto); border-radius: var(--r4); padding: var(--e5); box-shadow: 0 48px 96px -48px rgba(126, 190, 182, .45); }
.etapa-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--cinza); font-weight: 600; margin-bottom: var(--e1); }
.barra { height: var(--e1); background: var(--papel); border-radius: var(--r1); margin-bottom: var(--e4); overflow: hidden; }
.barra i { display: block; height: 100%; width: 50%; background: var(--turquesa); border-radius: var(--r1); transition: width .6s var(--suave); }
fieldset { border: 0; display: none; }
fieldset.ativa { display: block; animation: aparece .6s var(--suave); }
.campo { margin-bottom: var(--e3); }
.campo > label, .campo > .pergunta { display: block; font-weight: 700; font-size: 15px; margin-bottom: var(--e1); }
.campo small { font-weight: 500; color: var(--cinza); }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo textarea, .campo select {
  width: 100%; height: var(--e7, 56px); font: 500 16px "Inter", sans-serif; color: var(--preto);
  padding: 0 var(--e2); border: 1px solid #DADADA; border-radius: var(--r2); background: var(--branco);
  transition: border-color .3s, box-shadow .3s;
}
.campo textarea { height: auto; min-height: var(--e12); padding: var(--e2); resize: vertical; line-height: 1.5; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: #B5B5B5; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: var(--preto); box-shadow: 0 0 0 4px rgba(126, 190, 182, .35); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e2); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e1); }
.opcoes label {
  display: flex; align-items: center; gap: var(--e1); height: 56px; padding: 0 var(--e2); border: 1px solid #DADADA;
  border-radius: var(--r2); cursor: pointer; font-weight: 500; font-size: 15px;
  transition: border-color .3s, background .3s, transform .3s var(--suave);
}
.opcoes label:hover { border-color: var(--preto); transform: translateY(-2px); }
.opcoes input { accent-color: var(--preto); width: 18px; height: 18px; flex: none; }
.opcoes label:has(input:checked) { border-color: var(--preto); background: var(--turquesa-fundo); box-shadow: inset 0 0 0 1px var(--preto); }
.campo.erro input, .campo.erro select, .campo.erro .opcoes label, .campo.erro textarea { border-color: #C0392B; }
.msg-erro { color: #C0392B; font-size: 13px; font-weight: 600; margin-top: var(--e1); display: none; }
.campo.erro .msg-erro { display: block; }
.navegacao { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); margin-top: var(--e1); }
.voltar { background: none; border: 0; font: 600 15px "Inter", sans-serif; color: var(--cinza); cursor: pointer; height: var(--e6); }
.voltar:hover { color: var(--preto); }
.voltar[hidden] { display: block; visibility: hidden; }
.resultado { display: none; padding: var(--e1) 0; }
.resultado.ativa { display: block; animation: aparece .6s var(--suave); }
.resultado .icone { width: var(--e8); height: var(--e8); border-radius: 50%; background: var(--turquesa); display: grid; place-items: center; margin-bottom: var(--e3); }
.resultado h3 { font-size: 32px; margin-bottom: var(--e2); }
.resultado p { color: #444; margin-bottom: var(--e2); }

/* FAQ */
.faq .grade { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--e8); }
.perguntas { display: grid; gap: var(--e1); }
details { border-radius: var(--r2); transition: border-color .3s, background .3s; }
details:hover { border-color: rgba(10, 10, 10, .25); }
details[open] { background: var(--papel); border-color: transparent; }
summary { list-style: none; cursor: pointer; padding: var(--e3) var(--e8) var(--e3) var(--e3); font-weight: 700; font-size: 17px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; position: absolute; right: var(--e2); top: 50%; translate: 0 -50%;
  width: var(--e5); height: var(--e5); border-radius: 50%; background: var(--papel); display: grid; place-items: center;
  font-size: 20px; font-weight: 500; transition: transform .4s var(--suave), background .3s;
}
details[open] summary::after { transform: rotate(45deg); background: var(--turquesa); }
.resp { padding: 0 var(--e3) var(--e3); }
.resp p { color: #444; max-width: 60ch; }
details[open] .resp { animation: aparece .5s var(--suave); }

/* Rodapé */
.rodape { background: var(--preto); color: rgba(255, 255, 255, .55); padding: var(--e10) 0 var(--e4); font-size: 14px; }
.rodape-grande { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; padding-bottom: var(--e8); border-bottom: 1px solid var(--linha-escura); }
.rodape-grande .logo { color: var(--branco); width: clamp(160px, 22vw, 280px); }
.rodape-linha { display: flex; justify-content: space-between; gap: var(--e2); flex-wrap: wrap; padding-top: var(--e4); }
.rodape a { text-decoration: none; transition: color .3s; }
.rodape-linha a:hover { color: var(--turquesa); }

/* CTA fixo no celular */
.cta-fixo { display: none; }

/* Responsivo */
@media (max-width: 1024px) {
  .topo nav { display: none; }
  .hero .grade, .dor-grade, .processo .grade, .aplicacao .grade, .faq .grade, .bento-cases { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .palco { max-width: 520px; margin: 0 auto var(--e4); width: 100%; }
  .chip-a { left: calc(var(--e2) * -1); }
  .chip-d { left: calc(var(--e2) * -1); }
  .chip-b { right: calc(var(--e1) * -1); }
  .bento-numeros { grid-template-columns: 1fr 1fr; }
  .bento-pilares { grid-template-columns: 1fr; }
  .pilar.grande { grid-row: auto; }
  .pilar.grande .midia { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
  .lista-setores { grid-template-columns: 1fr 1fr; }
  .processo .fixo { position: static; }
  .foto-lado { display: none; }
}
@media (max-width: 640px) {
  section { padding: var(--e10) 0; }
  .cabeca { margin-bottom: var(--e5); }
  .topo .wrap { padding-left: var(--e2); }
  .hero { padding-top: var(--e16); }
  .acoes { gap: var(--e2); }
  .acoes .botao { width: 100%; }
  .chip-a { top: var(--e3); left: var(--e1); }
  .chip-b { right: var(--e1); top: 50%; }
  .chip-numero { font-size: 24px; }
  .chip-c { left: var(--e1); right: var(--e1); bottom: var(--e1); }
  .chip-d { left: var(--e1); top: 27%; padding: var(--e2); }
  .chip-d li { font-size: 13px; }
  .bento-numeros .box { min-height: 160px; padding: var(--e3); }
  .conversa, .distancia, .case, .filtro .coluna, .condicoes, form { padding: var(--e3); }
  .bolha, .anexo { max-width: 90%; font-size: 15px; }
  .agenda { padding: var(--e3); }
  .ano { grid-template-columns: 1fr; }
  .selo-lotado, .selo-livre { grid-column: auto; }
  .lista-setores, .filtro-grade, .duas, .opcoes { grid-template-columns: 1fr; }
  .condicoes { flex-direction: column; align-items: stretch; }
  .condicoes .botao { width: 100%; }
  .cta-meio { padding: var(--e3); }
  .cta-meio .botao { width: 100%; }
  .passos::before, .passos::after { left: calc(var(--e3) + var(--e3) - 1px); }
  .passo { padding: var(--e3); gap: var(--e2); }
  summary { padding: var(--e2) var(--e8) var(--e2) var(--e2); font-size: 16px; }
  .resp { padding: 0 var(--e2) var(--e2); }
  .rodape-grande .botao { width: 100%; }
  .cta-fixo {
    display: block; position: fixed; left: var(--e2); right: var(--e2); bottom: var(--e2); z-index: 40;
    transform: translateY(160%); transition: transform .5s var(--suave);
  }
  .cta-fixo.visivel { transform: none; }
  .cta-fixo .botao { width: 100%; box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .4); }
}

/* Quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revela, .bolha, .anexo { opacity: 1; transform: none; }
  .trilho { animation: none; }
}