/* =========================================================
   Lepvi Group — folha de estilo principal
   Cores e fontes no :root. Mude aqui para ajustar o site todo.
   Marca (Lepvi Brand, Claude Design): símbolo em L com cortes a 45° e quadrado solto, "Lepvi" em Outfit Medium,
   Preto Grafite #0D0D0F, Branco Névoa #F2F1EE, Azul Elétrico #2D4BFF; gradiente azul→violeta→magenta só em fundos.
   ========================================================= */
:root {
  --azul: #0D0D0F;         /* Preto Grafite: logo, títulos, fundos escuros */
  --azul-escuro: #000000;
  --azul-medio: #2E2E33;
  --verde: #2D4BFF;        /* Azul Elétrico: destaque da marca */
  --verde-texto: #2D4BFF;  /* links e textos de destaque */
  --azul-200: #D2D1CB;
  --azul-100: #E4E3DF;
  --nevoa: #E4E3DF;        /* faixas alternadas */
  --papel: #F2F1EE;        /* Branco Névoa: fundo do site */
  --tinta: #0D0D0F;
  --texto: #2E2D2A;
  --suave: #5A5954;
  --linha: #D8D7D1;
  --sucesso: #0F7B5F;
  --erro: #B42318;
  --violeta: #8A3DFF;
  --magenta: #C04DFF;
  --gradiente: linear-gradient(90deg, #3A7BFF 0%, #2D4BFF 35%, #8A3DFF 70%, #C04DFF 100%);

  --fonte-marca: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-titulo: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Outfit", "Segoe UI", system-ui, sans-serif;
  --fonte-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 26px;
  --largura: 1200px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 600px) { body { font-size: 1.125rem; } }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--verde-texto); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
h1, h2 { font-family: var(--fonte-titulo); font-weight: 500; color: var(--azul); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 .45em; font-optical-sizing: auto; }
h2 { font-weight: 500; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.6rem, 4.7vw, 4rem); }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h3, h4 { font-family: var(--fonte-titulo); color: var(--tinta); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 .5em; }
h3 { font-size: 1.375rem; }
p { margin: 0 0 1em; max-width: 66ch; }
ul { padding-left: 1.2em; }

:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; background: var(--azul); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.pular:focus { top: 12px; }

.container { width: min(100% - 32px, var(--largura)); margin-inline: auto; }
.secao { padding: clamp(80px, 10vw, 136px) 0; }
.secao--alt { background: var(--nevoa); }
.secao__topo { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.secao__topo--centro { margin-inline: auto; text-align: center; }
.secao__topo--centro p { margin-inline: auto; }
.rotulo { display: none; }
.lead { font-size: clamp(1.25rem, 1.8vw, 1.45rem); line-height: 1.55; color: var(--suave); }

/* ---------- Marca (logo em SVG inline: usa a fonte do site e fica sempre nítido) ---------- */
.marca { display: inline-flex; line-height: .8; text-decoration: none; color: var(--tinta); }
.marca__lockup { display: inline-flex; align-items: center; gap: .21em; font-family: var(--fonte-marca); font-weight: 500; letter-spacing: -0.02em; }
.marca__simbolo { width: .88em; height: .88em; flex: none; fill: currentColor; }
.marca__nome { display: inline-flex; align-items: baseline; }
.marca__l { height: .74em; width: .22em; margin-right: .05em; fill: currentColor; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 30px; border-radius: var(--raio-sm);
  font: 600 1.0938rem/1 var(--fonte-texto); text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .14s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--primario { background: var(--azul); color: #fff; }
.btn--secundario { background: #fff; color: var(--azul); border-color: var(--azul-200); }
.btn--claro { background: #fff; color: var(--azul); }
.btn--contorno-claro { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }
.btn--verde { background: var(--verde-texto); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { background: var(--azul-medio); }
  .btn--secundario:hover { border-color: var(--azul); }
  .btn--claro:hover { background: var(--azul-100); }
  .btn--contorno-claro:hover { border-color: #fff; }
  .btn--verde:hover { background: #1F38D6; }
}
.btn--pequeno { min-height: 48px; padding: 0 22px; font-size: 1.03rem; }
.btn svg { width: 22px; height: 22px; flex: none; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Cabeçalho ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 94%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.topo.rolou { border-bottom-color: var(--linha); }
.topo__barra { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; }
.topo__logo { font-size: 2.6rem; }
.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 1.0938rem; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--verde-texto); } }
.menu a[aria-current="page"] { color: var(--verde-texto); font-weight: 600; }
.menu a.btn--primario, .menu a.btn--primario:hover { color: #fff; }
.topo__cta { margin-left: 10px; }
.menu-botao { display: none; background: none; border: 0; width: 48px; height: 48px; border-radius: 12px; cursor: pointer; color: var(--azul); }
.menu-botao svg { width: 30px; height: 30px; margin: auto; }
@media (max-width: 1000px) {
  .menu-botao { display: block; }
  .topo__nav { position: fixed; inset: 88px 0 auto 0; background: var(--papel); border-bottom: 1px solid var(--linha); padding: 12px 16px 24px; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; }
  .topo__nav.aberto { opacity: 1; transform: none; visibility: visible; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu a { padding: 14px 12px; font-size: 1.25rem; }
  .topo__cta { margin: 12px 0 0; }
  .topo__cta .btn { width: 100%; }
}
@media (max-width: 420px) { .topo__logo { font-size: 2.2rem; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); }
.hero__grade { display: grid; grid-template-columns: 1.15fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__titulo .linha { display: block; }
.hero__sub { font-size: clamp(1.25rem, 1.9vw, 1.45rem); line-height: 1.5; color: var(--suave); max-width: 38ch; margin-bottom: 36px; }
.hero__notas { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 1.0938rem; color: var(--suave); }
.hero__notas li { display: flex; align-items: center; gap: 9px; }
.hero__notas svg { width: 22px; height: 22px; color: var(--verde); }
@media (max-width: 1000px) { .hero__grade { grid-template-columns: 1fr; } .hero__sub { max-width: none; } }

/* Seletor de segmento: troca o site exibido nos aparelhos */
.segmentos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.segmentos__titulo { font-weight: 600; color: var(--tinta); font-size: 1.0625rem; margin-bottom: 12px; }
.segmentos button { font: 600 1rem var(--fonte-texto); color: var(--azul); background: #fff; border: 1.5px solid var(--azul-200); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .14s var(--ease-out); }
.segmentos button:active { transform: scale(.96); }
.segmentos button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (hover: hover) and (pointer: fine) { .segmentos button:not([aria-pressed="true"]):hover { border-color: var(--azul); } }
.palco__legenda { margin: 18px 0 0; font-size: 1rem; color: var(--suave); min-height: 1.6em; }
.palco__legenda a { font-weight: 600; }

/* Palco: o arco do logo sustenta os aparelhos */
.palco { position: relative; padding-bottom: 9%; }
.palco__arco { position: absolute; left: -4%; width: 108%; max-width: none; bottom: 0; height: auto; overflow: visible; pointer-events: none; }
.palco__arco path { fill: var(--verde); }
.dispositivos { position: relative; padding: 0 0 36px; }
.notebook { position: relative; width: 100%; max-width: 660px; margin-left: auto; }
.notebook__tela { background: #141416; border-radius: 16px 16px 0 0; padding: 12px 12px 14px; box-shadow: 0 34px 70px rgba(13,13,15,.2); }
.notebook__tela .tela, .celular .tela { position: relative; overflow: hidden; background: var(--nevoa); }
.notebook__tela .tela { aspect-ratio: 16 / 10; border-radius: 4px; }
.celular .tela { aspect-ratio: 9 / 19; border-radius: 19px; }
.tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .35s ease; }
.tela img.saindo { opacity: 0; }
.notebook__base { height: 16px; background: linear-gradient(#ECEBE7, #CFCEC8); border-radius: 0 0 14px 14px; margin: 0 -5%; position: relative; }
.notebook__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 6px; transform: translateX(-50%); background: #B8C1CD; border-radius: 0 0 8px 8px; }
.celular { position: absolute; left: 0; bottom: 0; width: 28%; max-width: 180px; background: #141416; border-radius: 26px; padding: 8px; box-shadow: 0 30px 60px rgba(13,13,15,.28); }

/* Sequência de abertura (só na página inicial) */
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } }
@keyframes pousar { from { opacity: 0; transform: translateY(34px); } }
@keyframes desenhar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes aparecer { from { opacity: 0; } }
.anima .hero__sub { animation: surgir .75s var(--ease-out) 220ms both; }
.anima .hero .acoes { animation: surgir .75s var(--ease-out) 290ms both; }
.anima .hero__notas { animation: surgir .75s var(--ease-out) 360ms both; }
.anima .palco__arco { animation: desenhar 1.1s var(--ease-in-out) 150ms both; }
.anima .palco .notebook { animation: pousar .9s var(--ease-out) 480ms both; }
.anima .palco .celular { animation: pousar .9s var(--ease-out) 640ms both; }
.anima .palco__seletor { animation: aparecer .6s ease 900ms both; }
@media (prefers-reduced-motion: reduce) {
  .anima .hero__titulo .linha > span, .anima .hero__sub, .anima .hero .acoes, .anima .hero__notas,
  .anima .palco .notebook, .anima .palco .celular, .anima .palco__seletor { animation: aparecer .3s ease both; }
  .anima .palco__arco { animation: none; }
  .tela img { transition: none; }
}

/* ---------- Grades e cartões ---------- */
.grade { display: grid; gap: 24px; }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grade--4, .grade--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grade--4, .grade--3, .grade--2 { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 32px; }
.card h3 { margin-bottom: .4em; }
.card p { color: var(--suave); margin-bottom: 0; }
.card__icone { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--azul-100); color: var(--azul); margin-bottom: 20px; }
.card__icone svg { width: 28px; height: 28px; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 600; }

/* ---------- Demonstração: como o cliente encontra você ---------- */
.busca { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (max-width: 900px) { .busca { grid-template-columns: 1fr; } }
.alternar { display: inline-flex; background: var(--azul-100); border-radius: 12px; padding: 5px; margin: 8px 0 24px; position: relative; }
.alternar button { position: relative; z-index: 1; font: 600 1.05rem var(--fonte-texto); color: var(--azul); background: none; border: 0; padding: 12px 22px; border-radius: 9px; cursor: pointer; transition: color .25s ease; }
.alternar button[aria-pressed="true"] { color: #fff; }
.alternar__fundo { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 9px; background: var(--azul); transition: transform .3s var(--ease-out), width .3s var(--ease-out); }
.resultado-lista { display: grid; gap: 12px; }
.navegador { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: 0 24px 60px rgba(13,13,15,.12); overflow: hidden; }
.navegador__barra { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); background: #F7F6F3; }
.navegador__barra i { width: 11px; height: 11px; border-radius: 50%; background: #D5DCE6; }
.navegador__busca { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linha); border-radius: 999px; padding: 9px 16px; font-size: 1rem; color: var(--tinta); }
.navegador__busca svg { width: 18px; height: 18px; color: var(--suave); }
.navegador__corpo { padding: 22px 24px 26px; display: grid; gap: 18px; min-height: 360px; align-content: start; }
.res { opacity: 1; transform: none; transition: opacity .3s ease, transform .35s var(--ease-out); }
.res[hidden] { display: block; opacity: 0; transform: translateY(8px); position: absolute; visibility: hidden; }
.res__url { font-size: .9rem; color: var(--suave); }
.res__titulo { font-size: 1.2rem; color: #1A47B8; font-weight: 600; margin: 2px 0 4px; }
.res__texto { font-size: 1rem; color: var(--texto); margin: 0; }
.res--destaque { border: 1.5px solid var(--verde); border-radius: 14px; padding: 16px 18px; background: #F2FBFA; }
.res--destaque .res__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.res--destaque .res__links span { font-size: .92rem; background: #fff; border: 1px solid var(--linha); padding: 5px 11px; border-radius: 999px; color: var(--azul); }
.res--apagado { opacity: .55; }
.ilustracao { font-size: .92rem; color: var(--suave); margin-top: 12px; }

/* ---------- Serviços em lista ---------- */
.lista-servicos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--azul-200); }
.lista-servicos li { border-bottom: 1px solid var(--azul-200); }
.lista-servicos a { display: grid; grid-template-columns: 64px minmax(200px, 1fr) 1.5fr auto; gap: 14px 36px; align-items: center; padding: 28px 16px; color: inherit; text-decoration: none; border-radius: 12px; transition: background-color .2s ease; }
.lista-servicos .ico { width: 56px; height: 56px; border-radius: 14px; background: var(--azul-100); color: var(--azul); display: grid; place-items: center; }
.lista-servicos .ico svg { width: 28px; height: 28px; }
.lista-servicos h3 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--azul); font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0; letter-spacing: -0.02em; }
.lista-servicos p { margin: 0; color: var(--suave); }
.lista-servicos .ver { font-weight: 600; color: var(--verde-texto); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lista-servicos .ver svg { width: 20px; height: 20px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lista-servicos a:hover { background: var(--nevoa); }
  .lista-servicos a:hover .ver svg { transform: translateX(4px); }
}
@media (max-width: 800px) { .lista-servicos a { grid-template-columns: 56px 1fr; padding: 24px 4px; } .lista-servicos p, .lista-servicos .ver { grid-column: 2; } }

/* ---------- Recomendador ---------- */
.quiz { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: clamp(26px, 4vw, 48px); box-shadow: 0 24px 60px rgba(13,13,15,.08); }
.quiz__progresso { height: 6px; background: var(--azul-100); border-radius: 6px; overflow: hidden; margin-bottom: 28px; }
.quiz__progresso span { display: block; height: 100%; background: var(--verde); border-radius: 6px; transform-origin: left; transform: scaleX(var(--p, .0)); transition: transform .4s var(--ease-out); }
.quiz__passo { animation: surgir .35s var(--ease-out) both; }
.quiz__passo[hidden] { display: none; }
.quiz__pergunta { font-family: var(--fonte-titulo); font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--azul); line-height: 1.15; margin: 0 0 22px; }
.quiz__opcoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .quiz__opcoes { grid-template-columns: 1fr; } }
.quiz__opcoes button { text-align: left; font: 500 1.0938rem/1.4 var(--fonte-texto); color: var(--tinta); background: var(--nevoa); border: 1.5px solid transparent; border-radius: 14px; padding: 18px 20px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .14s var(--ease-out); }
.quiz__opcoes button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .quiz__opcoes button:hover { border-color: var(--azul); background: #fff; } }
.quiz__opcoes button strong { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.quiz__voltar { margin-top: 18px; background: none; border: 0; color: var(--suave); font: 500 1rem var(--fonte-texto); cursor: pointer; padding: 6px 0; }
.quiz__resultado h3 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--azul); font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: .3em; letter-spacing: -0.02em; }
.quiz__resultado .rec-nome { color: var(--verde-texto); font-weight: 700; font-size: 1.1rem; margin-bottom: 6px; }
.quiz__resultado ul { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; }
.quiz__resultado li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.quiz__resultado li svg { width: 22px; height: 22px; color: var(--verde); margin-top: 3px; }

/* ---------- Portfólio ---------- */
.projeto { display: flex; flex-direction: column; background: #fff; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha); }
.projeto__img { position: relative; background: var(--nevoa); aspect-ratio: 16 / 10; overflow: hidden; }
.projeto__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .projeto:hover .projeto__img img { transform: scale(1.03); } }
.selo-demo { position: absolute; top: 12px; left: 12px; background: rgba(13,13,15,.85); color: #fff; font-size: .88rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; }
.projeto__corpo { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.projeto__seg { font-size: 1rem; font-weight: 600; color: var(--verde-texto); margin-bottom: 4px; }
.projeto__corpo h3 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--azul); font-size: 1.9rem; margin-bottom: .3em; letter-spacing: -0.02em; }
.projeto__corpo p { color: var(--suave); font-size: 1.0938rem; }
.projeto__corpo .btn { margin-top: auto; align-self: flex-start; }
.selo-real { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--azul); font-size: .85rem; font-weight: 700; padding: 6px 12px 6px 26px; border-radius: 999px; box-shadow: 0 4px 14px rgba(13,13,15,.18); }
.selo-real::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--verde, #2D4BFF); }
.projeto__local { font-size: .95rem !important; color: var(--suave); margin: -4px 0 10px; }
.clientes-segmentos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 0 0 36px; padding: 18px 22px; background: #fff; border: 1px solid var(--linha); border-radius: 20px; }
.clientes-segmentos__titulo { margin: 0; font-size: .95rem; color: var(--suave); white-space: nowrap; }
.clientes-segmentos__titulo strong { font: 800 1.6rem/1 var(--fonte-titulo); color: var(--azul); margin-right: 4px; vertical-align: -2px; }
.clientes-segmentos ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; flex: 1; }
.clientes-segmentos a { display: inline-flex; align-items: center; gap: 7px; font-size: .95rem; font-weight: 600; color: var(--azul); text-decoration: none; background: var(--nevoa); border: 1px solid transparent; border-radius: 999px; padding: 7px 14px 7px 11px; transition: border-color .2s ease, background-color .2s ease, transform .14s var(--ease-out); }
.clientes-segmentos a svg { width: 11px; height: 13px; fill: var(--verde, #2D4BFF); flex: none; }
.clientes-segmentos a:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .clientes-segmentos a:hover { background: #fff; border-color: var(--azul); } }
.projeto--real { scroll-margin-top: 110px; transition: box-shadow .4s ease, border-color .4s ease; }
.projeto--real:target { border-color: var(--verde, #2D4BFF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde, #2D4BFF) 35%, transparent), 0 20px 40px -24px rgba(13,13,15,.35); }

/* ---------- Processo (sequência real, com linha do tempo) ---------- */
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 40px; counter-reset: passo; }
.passos li { position: relative; padding-top: 30px; counter-increment: passo; }
.passos li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--linha); border-radius: 3px; }
.passos li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--verde); border-radius: 3px; transform-origin: left; transform: scaleX(1); }
.passos h3 { font-size: 1.4rem; margin-bottom: .35em; }
.passos h3::before { content: counter(passo) ". "; color: var(--verde-texto); }
.passos p { color: var(--suave); margin: 0; }
.js .passos li::after { transform: scaleX(0); transition: transform .8s var(--ease-out); }
.js .passos.visivel li::after { transform: scaleX(1); }
.js .passos.visivel li:nth-child(2)::after { transition-delay: 90ms; }
.js .passos.visivel li:nth-child(3)::after { transition-delay: 180ms; }
.js .passos.visivel li:nth-child(4)::after { transition-delay: 270ms; }
.js .passos.visivel li:nth-child(5)::after { transition-delay: 360ms; }
.js .passos.visivel li:nth-child(6)::after { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) { .js .passos li::after { transform: scaleX(1); transition: none; } }
@media (max-width: 900px) { .passos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .passos { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- Faixa azul ---------- */
.faixa-azul { background: var(--azul); color: rgba(255,255,255,.85); }
.faixa-azul h2 { color: #fff; }
.faixa-azul h3 { color: #fff; font-size: 1.45rem; }
.faixa-azul .grade { gap: 44px 64px; }
.faixa-azul p { margin: 0; }
.faixa-azul .card__icone { background: rgba(255,255,255,.1); color: #B9A6FF; }

/* ---------- Chamada final ---------- */
.cta { position: relative; overflow: hidden; background: var(--azul); color: #fff; border-radius: var(--raio-lg); padding: clamp(44px, 6vw, 84px); display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; }
.cta__arco { position: absolute; right: -4%; bottom: -10%; width: 52%; max-width: none; opacity: .9; pointer-events: none; }
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p { color: rgba(255,255,255,.82); margin: 0; font-size: 1.3rem; }
.cta .acoes, .cta > div { position: relative; z-index: 1; }
@media (max-width: 800px) { .cta { grid-template-columns: 1fr; } .cta__arco { width: 90%; bottom: -14%; opacity: .5; } }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin-inline: auto; }
.faq h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative; font: 600 1.3rem/1.35 var(--fonte-titulo); letter-spacing: -0.01em; color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 18px; height: 2px; background: var(--verde-texto); border-radius: 2px; transition: transform .25s var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease-out), content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details > div { padding: 0 0 26px; color: var(--suave); font-size: 1.125rem; }
.faq details > div p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* ---------- Pacotes ---------- */
.pacotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 960px) { .pacotes { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.pacote { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--raio); padding: 38px; background: #fff; position: relative; }
.pacote--destaque { background: var(--azul); border-color: var(--azul); color: rgba(255,255,255,.88); }
.pacote--destaque h3, .pacote--destaque .pacote__preco { color: #fff; }
.pacote--destaque .pacote__para, .pacote--destaque .pacote__obs { color: rgba(255,255,255,.75); }
.pacote--destaque .pacote__nome { color: #B9A6FF; }
.pacote--destaque li svg { color: #B9A6FF; }
.pacote--destaque .btn--primario { background: #fff; color: var(--azul); }
.pacote__tag { position: absolute; top: 22px; right: 22px; background: var(--verde); color: #fff; font-size: .88rem; font-weight: 600; padding: 5px 12px; border-radius: 6px; }
.pacote__nome { font: 600 1.06rem var(--fonte-texto); color: var(--verde-texto); margin-bottom: 6px; }
.pacote h3 { font-family: var(--fonte-titulo); font-weight: 700; font-size: 2.2rem; color: var(--azul); margin-bottom: .25em; letter-spacing: -0.02em; }
.pacote__para { color: var(--suave); font-size: 1.0938rem; min-height: 3.2em; }
.pacote__preco { font: 700 1.6rem var(--fonte-texto); color: var(--tinta); margin: 10px 0 4px; }
.pacote__obs { font-size: .98rem; color: var(--suave); margin-bottom: 22px; }
.pacote ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 11px; }
.pacote li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 1.0938rem; }
.pacote li svg { width: 20px; height: 20px; color: var(--verde); margin-top: 4px; }
.pacote .btn { margin-top: auto; }
.nota { font-size: 1.0938rem; color: var(--texto); background: var(--nevoa); border-left: 3px solid var(--verde); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; padding: 20px 24px; }

/* ---------- Cabeçalho das páginas internas ---------- */
.cab-pagina { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); background: var(--nevoa); }
.cab-pagina h1 { font-size: clamp(2.6rem, 5.6vw, 4.5rem); max-width: 18ch; }
.cab-pagina p { max-width: 60ch; }
.cab-pagina { position: relative; overflow: hidden; }
.cab-pagina::after { content: ""; position: absolute; right: -8%; top: -30%; width: 48vw; max-width: 640px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(45,75,255,.14), transparent); pointer-events: none; }
.cab-pagina > .container { position: relative; z-index: 1; }
.cab-pagina__rotulo { display: inline-flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-texto); margin-bottom: 18px; }
.cab-pagina__rotulo::before { content: ""; width: 32px; height: 3px; border-radius: 3px; background: var(--verde-texto); }
.cab-pagina .acoes { margin-top: 30px; }
.cab-pagina__fatos { list-style: none; padding: 26px 0 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 40px; max-width: 920px; border-top: 1px solid var(--linha); }
.cab-pagina__fatos li { display: flex; flex-direction: column; gap: 4px; color: var(--suave); font-size: 1.03rem; }
.cab-pagina__fatos strong { font-family: var(--fonte-titulo); font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--tinta); letter-spacing: -0.02em; line-height: 1.15; }
@media (max-width: 640px) { .cab-pagina__fatos { grid-template-columns: 1fr; gap: 16px; } }
.servico__indicado { margin-top: 18px; padding: 16px 18px; border-left: 3px solid var(--verde-texto); background: rgba(45,75,255,.05); border-radius: 0 10px 10px 0; font-size: 1.03rem; }
.servico__indicado strong { display: block; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-texto); margin-bottom: 4px; }
.faq__grupo { font-size: clamp(1.3rem, 2vw, 1.55rem); margin: 56px 0 6px; padding-top: 8px; scroll-margin-top: 110px; color: var(--verde-texto); }

/* ---------- Página de serviços ---------- */
.servico { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 72px); padding: 76px 0; border-bottom: 1px solid var(--linha); scroll-margin-top: 104px; }
.servico:last-of-type { border-bottom: 0; }
.servico__lado h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.servico__lado p { color: var(--suave); }
.servico__blocos { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 46px; }
.servico__blocos h3 { font-family: var(--fonte-texto); font-size: 1.15rem; color: var(--verde-texto); margin-bottom: .5em; }
.servico__blocos p, .servico__blocos li { color: var(--texto); font-size: 1.0938rem; }
.servico__blocos ul { margin: 0; padding-left: 1.1em; }
.servico__blocos li { margin-bottom: 6px; }
.servico__acao { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 8px; }
.atalhos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.atalhos a { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--azul-200); background: #fff; text-decoration: none; font-weight: 600; font-size: 1.03rem; color: var(--azul); transition: border-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .atalhos a:hover { border-color: var(--azul); } }
@media (max-width: 860px) { .servico { grid-template-columns: 1fr; padding: 56px 0; } .servico__blocos { grid-template-columns: 1fr; } }

/* ---------- Formulário ---------- */
.contato-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contato-grade { grid-template-columns: 1fr; } }
.form { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: clamp(24px, 4vw, 46px); box-shadow: 0 24px 60px rgba(13,13,15,.07); }
.form h2 { font-size: 2.2rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.campos > * { min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo--cheio { grid-column: 1 / -1; }
@media (max-width: 600px) { .campos { grid-template-columns: 1fr; } }
.campo label { font-weight: 600; font-size: 1.0938rem; color: var(--tinta); }
.campo label small { font-weight: 400; color: var(--suave); font-size: .97rem; }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 1.0938rem; color: var(--tinta); background: #fff; border: 1.5px solid #CAD3DF; border-radius: var(--raio-sm); padding: 14px 16px; min-height: 56px; width: 100%; transition: border-color .2s ease, box-shadow .2s ease; }
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px rgba(45,75,255,.22); }
.campo[data-invalido] input, .campo[data-invalido] select, .campo[data-invalido] textarea { border-color: var(--erro); }
.campo__erro { color: var(--erro); font-size: 1rem; }
.parcelas-resumo { margin: 4px 0 0; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.parcelas-resumo strong { color: var(--tinta); font-weight: 600; }
.aceite-texto { margin: 0; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.campo__dica { color: var(--suave); font-size: .95rem; line-height: 1.4; }
.aviso-marca { padding: 14px 16px; border-radius: 12px; background: var(--azul-100); border-left: 4px solid var(--azul); color: var(--tinta); }
.aviso-marca strong { display: block; margin-bottom: 4px; }
.aviso-marca p { margin: 0; color: var(--suave); font-size: .95rem; line-height: 1.5; }
.campo__erro:empty { display: none; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 1.03rem; color: var(--suave); }
.check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--azul); }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.form__status { margin-top: 20px; padding: 18px 20px; border-radius: var(--raio-sm); font-size: 1.0938rem; animation: aparecer .25s ease; }
.form__status:empty { display: none; }
.form__status--ok { background: #E8F6F1; color: var(--sucesso); border: 1px solid #BFE6D7; }
.confirmar-zap { margin-top: 20px; padding: 22px 20px; border-radius: var(--raio-sm); background: #E8F6F1; border: 1px solid #BFE6D7; animation: aparecer .25s ease; }
.confirmar-zap h3 { margin: 0 0 8px; font-size: 1.2rem; }
.confirmar-zap h3:focus { outline: none; }
.confirmar-zap h3 { scroll-margin-top: 110px; }
.confirmar-zap .btn--verde { background: #13804B; color: #fff; }
@media (hover: hover) { .confirmar-zap .btn--verde:hover { background: #0F6B3E; } }
.confirmar-zap p { margin: 0 0 16px; }
.confirmar-zap .btn { width: 100%; justify-content: center; text-align: center; }
.confirmar-zap .btn + .btn, .confirmar-zap__estado + .btn { margin-top: 12px; }
.confirmar-zap__estado { margin: 14px 0 0 !important; font-size: .95rem; color: var(--suave); }
@media (min-width: 640px) { .confirmar-zap .btn { width: auto; } }
.form__status--erro { background: #FDECEA; color: var(--erro); border: 1px solid #F6C9C4; }
.form__status--info { background: var(--nevoa); color: var(--azul); border: 1px solid var(--azul-200); }
.form__status .acoes { margin-top: 12px; }
.form__status--pronto { display: flex; gap: 16px; align-items: flex-start; background: #fff; color: var(--tinta); border: 1px solid #BFE6D7; box-shadow: 0 18px 40px -24px rgba(13,13,15,.35); animation: prontoEntra .55s var(--ease-out) both; }
.form__status--pronto strong { font-size: 1.15rem; }
.form__status--pronto p { margin: 4px 0 0; color: var(--suave); }
.form__status--pronto .acoes { margin-top: 16px; }
.pronto__ok { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #25D366; animation: okPula .5s var(--ease-out) .15s both; }
.pronto__ok svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: okTraca .4s ease-out .4s forwards; }
.btn--zap { position: relative; overflow: hidden; background: #25D366; color: #fff; box-shadow: 0 12px 28px -12px rgba(37,211,102,.8); animation: zapPulso 2.2s ease-in-out 1s infinite; }
.btn--zap svg { width: 22px; height: 22px; }
.btn--zap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-100%); animation: zapBrilho 2.6s ease-in-out .8s infinite; }
@media (hover: hover) and (pointer: fine) { .btn--zap:hover { background: #1EBE5A; transform: translateY(-2px); } }
.btn--zap:active { transform: scale(.97); }
.form--pronto [type=submit] { background: transparent; color: var(--tinta); border-color: var(--linha, #D9D8D3); }
@keyframes prontoEntra { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes okPula { from { transform: scale(0); } 70% { transform: scale(1.15); } }
@keyframes okTraca { to { stroke-dashoffset: 0; } }
@keyframes zapPulso { 0%, 100% { box-shadow: 0 12px 28px -12px rgba(37,211,102,.8), 0 0 0 0 rgba(37,211,102,.45); } 50% { box-shadow: 0 12px 28px -12px rgba(37,211,102,.8), 0 0 0 10px rgba(37,211,102,0); } }
@keyframes zapBrilho { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .form__status--pronto, .pronto__ok, .btn--zap, .btn--zap::after { animation: none; } .pronto__ok svg { animation: none; stroke-dashoffset: 0; } }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.lado-contato { display: grid; gap: 16px; }
.lado-contato .card { padding: 28px; }

/* ---------- Texto longo ---------- */
.texto-longo > * { max-width: 780px; }
.texto-longo h2 { font-size: 1.9rem; margin-top: 1.8em; }
.texto-longo li { margin-bottom: 6px; }
.pendente { background: #FFF6DB; color: #7A5300; padding: 1px 6px; border-radius: 6px; font-size: .92em; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--papel); border-top: 1px solid var(--linha); color: var(--suave); padding: 80px 0 36px; font-size: 1.0938rem; }
.rodape a { color: var(--texto); text-decoration: none; }
.rodape a:hover { color: var(--verde-texto); text-decoration: underline; }
.rodape__grade { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.rodape__logo { font-size: 3rem; margin-bottom: 22px; }
.rodape h4 { color: var(--tinta); font-size: 1.1rem; margin-bottom: 16px; }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape__base { border-top: 1px solid var(--linha); margin-top: 56px; padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 1rem; }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flutuante ---------- */
.whats-flutuante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 62px; height: 62px; border-radius: 50%; background: #1FAF55; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.2); transition: transform .14s var(--ease-out); }
.whats-flutuante:active { transform: scale(.94); }
.whats-flutuante svg { width: 32px; height: 32px; }

[data-se-config][hidden] { display: none !important; }

/* ---------- Nosso forte: SEO e GEO ---------- */
.forte__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .forte__grade { grid-template-columns: 1fr; } }
.forte__cards { display: grid; gap: 20px; }
.forte__card { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px 32px 30px; background: #fff; }
.forte__card--geo { border-color: var(--verde); background: #F2F1EE; }
.forte__sigla { display: block; font: 800 clamp(3.4rem, 6vw, 4.6rem)/0.9 var(--fonte-titulo); color: var(--azul); margin-bottom: 12px; }
.forte__card--geo .forte__sigla { color: var(--verde-texto); }
.forte__card h3 { margin-bottom: .3em; }
.forte__card p { color: var(--suave); }
.forte__card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.forte__card li { padding-left: 26px; position: relative; font-size: 1.0625rem; }
.forte__card li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 7px; border-left: 2.5px solid var(--verde); border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }

/* Conversa ilustrativa com IA */
.chat { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-lg); box-shadow: 0 30px 70px rgba(13,13,15,.12); overflow: hidden; }
.chat__barra { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--linha); font-weight: 600; color: var(--tinta); background: #F7F6F3; }
.chat__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); }
.chat__corpo { padding: 24px 22px 8px; display: grid; gap: 14px; min-height: 340px; align-content: start; }
.chat__msg { border-radius: 18px; padding: 14px 18px; font-size: 1.0625rem; line-height: 1.5; max-width: 92%; }
.chat__msg p { margin: 0 0 .55em; }
.chat__msg p:last-child { margin: 0; }
.chat__msg--eu { justify-self: end; background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.chat__msg--ia { justify-self: start; background: var(--nevoa); color: var(--texto); border-bottom-left-radius: 6px; }
.chat__fonte { display: inline-block; margin-left: 4px; font-size: .85rem; color: var(--verde-texto); background: #fff; border: 1px solid var(--azul-200); border-radius: 999px; padding: 1px 9px; }
.chat__digitando { display: none; justify-self: start; gap: 5px; background: var(--nevoa); padding: 14px 16px; border-radius: 18px; }
.chat__digitando i { width: 8px; height: 8px; border-radius: 50%; background: var(--suave); animation: pulsar 1s ease-in-out infinite; }
.chat__digitando i:nth-child(2) { animation-delay: .15s; }
.chat__digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsar { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.chat__repetir { margin: 6px 22px 20px; background: none; border: 0; padding: 6px 0; font: 600 1rem var(--fonte-texto); color: var(--verde-texto); cursor: pointer; }
/* Estados da animação (controlados pelo main.js) */
.js .chat .chat__msg--eu, .js .chat .chat__linha { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.js .chat .chat__msg--ia { opacity: 0; transition: opacity .3s ease; }
.js .chat.p1 .chat__msg--eu { opacity: 1; transform: none; }
.js .chat.p2 .chat__digitando { display: inline-flex; }
.js .chat.p3 .chat__digitando { display: none; }
.js .chat.p3 .chat__msg--ia { opacity: 1; }
.js .chat.p3 .chat__linha { opacity: 1; transform: none; }
.js .chat.p3 .chat__linha:nth-child(2) { transition-delay: 120ms; }
.js .chat.p3 .chat__linha:nth-child(3) { transition-delay: 240ms; }
.js .chat.p3 .chat__linha:nth-child(4) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .js .chat .chat__msg--eu, .js .chat .chat__linha, .js .chat .chat__msg--ia { opacity: 1; transform: none; transition: none; }
  .chat__digitando { display: none !important; }
}

/* Destaques de SEO e GEO em outras páginas */
.lista-servicos li.destaque a { background: #F2F1EE; }
.lista-servicos li.destaque .ico { background: var(--verde-texto); color: #fff; }
.servico--destaque { position: relative; }
.servico--destaque::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 4px; background: var(--verde); border-radius: 4px; }
.card--seo { border-color: var(--verde); background: #F2F1EE; }

/* =========================================================
   Animações de vitrine (página inicial)
   ========================================================= */

/* Avisos flutuantes ao redor dos aparelhos */
.avisos { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.aviso { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--linha); border-radius: 14px; padding: 12px 16px 12px 12px; box-shadow: 0 18px 40px rgba(13,13,15,.16); font-size: .95rem; line-height: 1.3; color: var(--suave); max-width: 270px; }
.aviso b { display: block; color: var(--tinta); font-size: 1rem; }
.aviso__ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-100); color: var(--azul); }
.aviso__ico svg { width: 20px; height: 20px; }
.aviso__ico--whats { background: #E3F6EA; color: #1FAF55; }
.aviso__ico--ia { background: #E4F3F3; color: var(--verde-texto); }
.aviso--whats { left: -6%; top: 6%; }
.aviso--google { right: -4%; top: 38%; }
.aviso--ia { left: 22%; bottom: -2%; }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(10px) scale(.95); } }
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.anima .aviso { animation: avisoEntra .5s var(--ease-out) both, flutuar 5s ease-in-out infinite; }
.anima .aviso--whats { animation-delay: 1.3s, 1.8s; }
.anima .aviso--google { animation-delay: 1.6s, 2.6s; }
.anima .aviso--ia { animation-delay: 1.9s, 3.4s; }
.aviso.trocando { opacity: .35; transition: opacity .2s ease; }
@media (max-width: 1000px) { .aviso--whats { left: 0; } .aviso--google { right: 0; } }
@media (max-width: 600px) { .aviso { font-size: .85rem; max-width: 210px; padding: 9px 12px 9px 9px; } .aviso__ico { width: 32px; height: 32px; } .aviso--ia { display: none; } .aviso--whats { top: -4%; } .aviso--google { top: 46%; } }

/* Faixa de segmentos em movimento */
.faixa { overflow: hidden; background: var(--azul); color: #fff; padding: 22px 0; }
.faixa__trilho { display: flex; width: max-content; animation: deslizar 45s linear infinite; }
.faixa__grupo { display: flex; align-items: center; gap: 28px; padding-right: 28px; font: 700 clamp(1.3rem, 2.4vw, 1.8rem) var(--fonte-titulo); letter-spacing: -0.02em; white-space: nowrap; }
.faixa__gota { width: 16px; height: 20px; fill: var(--verde); flex: none; }
@keyframes deslizar { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) { .faixa:hover .faixa__trilho { animation-play-state: paused; } }

/* Busca que digita sozinha */
.digitar.ativo::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--azul); animation: piscar 1s steps(1) infinite; }
@keyframes piscar { 50% { opacity: 0; } }

/* Antes e depois arrastável */
.comparar { position: relative; max-width: 1040px; margin: 0 auto; border-radius: var(--raio-lg); overflow: hidden; box-shadow: 0 34px 80px rgba(13,13,15,.2); border: 10px solid #141416; aspect-ratio: 16 / 10; background: #141416; user-select: none; }
.comparar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.comparar__antes { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparar__linha { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(13,13,15,.15); pointer-events: none; }
.comparar__alca { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: var(--azul); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(13,13,15,.3); transition: transform .14s var(--ease-out); }
.comparar__alca svg { width: 26px; height: 26px; }
.comparar:active .comparar__alca { transform: translate(-50%, -50%) scale(.94); }
.comparar__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparar__range:focus-visible + .comparar__linha, .comparar:has(.comparar__range:focus-visible) .comparar__alca { outline: 3px solid var(--verde); outline-offset: 3px; }
.comparar__rotulo { position: absolute; top: 16px; padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: .95rem; pointer-events: none; }
.comparar__rotulo--antes { left: 16px; background: rgba(13,13,15,.85); color: #fff; }
.comparar__rotulo--depois { right: 16px; background: var(--verde-texto); color: #fff; }
.comparar.dica .comparar__antes { transition: clip-path .9s var(--ease-in-out); }
.comparar.dica .comparar__linha { transition: left .9s var(--ease-in-out); }
.ganhos { list-style: none; padding: 0; margin: 40px auto 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ganhos li { border-top: 3px solid var(--verde); padding-top: 16px; color: var(--suave); font-size: 1.06rem; }
.ganhos strong { display: block; color: var(--tinta); font: 700 1.3rem var(--fonte-titulo); letter-spacing: -0.015em; margin-bottom: 4px; }
@media (max-width: 760px) { .ganhos { grid-template-columns: 1fr; } .comparar { border-width: 6px; } .comparar__rotulo { top: 8px; font-size: .75rem; padding: 4px 8px; } .comparar__rotulo--antes { left: 8px; } .comparar__rotulo--depois { right: 8px; } .comparar__alca { width: 42px; height: 42px; } }

/* Gota do logo caindo no arco (chamada final) */
.cta__arte { position: absolute; right: -2%; bottom: -12%; width: 52%; max-width: none; pointer-events: none; overflow: visible; }
.cta__gota { fill: #fff; }
.cta__onda { fill: none; stroke: #B9A6FF; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes gotaCai { 0% { transform: translateY(-120px); opacity: 0; } 15% { opacity: 1; } 55% { transform: translateY(70px); opacity: 1; } 62%, 100% { transform: translateY(70px); opacity: 0; } }
@keyframes ondaAbre { 0%, 55% { opacity: 0; transform: scale(.4); } 62% { opacity: .9; } 100% { opacity: 0; transform: scale(2.4); } }
.cta__gota { animation: gotaCai 3.6s cubic-bezier(.55, 0, .9, .5) infinite; }
.cta__onda { animation: ondaAbre 3.6s var(--ease-out) infinite; }
.cta__onda--2 { animation-delay: .25s; }
@media (max-width: 800px) { .cta__arte { width: 95%; bottom: -16%; opacity: .45; } }

/* Barra fixa de orçamento no celular */
.barra-celular { display: none; }
@media (max-width: 760px) {
  .barra-celular { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; padding: 10px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 14px 40px rgba(13,13,15,.18); transform: translateY(140%); transition: transform .3s var(--ease-out); }
  .barra-celular.visivel { transform: none; }
  .barra-celular .btn--primario { flex: 1; }
  .barra-celular .btn--secundario { width: 58px; padding: 0; }
  .barra-celular .btn--secundario svg { color: #1FAF55; width: 26px; height: 26px; }
  .whats-flutuante { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .anima .aviso { animation: aparecer .3s ease both; }
  .faixa__trilho { animation: none; flex-wrap: wrap; width: auto; }
  .faixa__grupo + .faixa__grupo { display: none; }
  .faixa__grupo { flex-wrap: wrap; white-space: normal; padding: 0 16px; }
  .cta__gota { animation: none; transform: translateY(70px); }
  .cta__onda { animation: none; }
  .digitar.ativo::after { animation: none; }
  .comparar.dica .comparar__antes, .comparar.dica .comparar__linha { transition: none; }
}

/* =========================================================
   Planos em cards escuros, com ilustrações animadas
   ========================================================= */
.planos-escuro { background: #060E1A; color: rgba(255,255,255,.72); padding: clamp(80px, 10vw, 128px) 0; position: relative; overflow: hidden; }
.planos-escuro::before { content: ""; position: absolute; left: 50%; top: -260px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(45,75,255,.18), transparent); pointer-events: none; }
.planos-escuro h2 { color: #fff; }
.planos-escuro .lead { color: rgba(255,255,255,.66); }
.planos-grade { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 1040px) { .planos-grade { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

.plano { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 26px; background: linear-gradient(180deg, #18181B, #0D0D0F); border: 1px solid rgba(255,255,255,.08); isolation: isolate; transition: transform .35s var(--ease-out), border-color .3s ease; }
.plano::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--cor) 16%, transparent), transparent 60%); }
.plano--destaque { border-color: color-mix(in srgb, var(--cor) 45%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .plano:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cor) 55%, transparent); }
  .plano:hover::before { opacity: 1; }
}
.plano__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.plano__ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent); }
.plano__ico svg { width: 22px; height: 22px; }
.plano__num { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.35); }
.plano__titulo { font: 800 clamp(1.9rem, 2.6vw, 2.25rem)/1.02 var(--fonte-titulo); letter-spacing: -0.035em; color: #fff; margin: 0 0 14px; }
.plano__titulo span { display: block; color: var(--cor); }
.plano__desc { color: rgba(255,255,255,.66); font-size: 1.06rem; margin-bottom: 22px; }
.plano__lista { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; }
.plano__lista li { position: relative; padding-left: 18px; color: rgba(255,255,255,.88); font-size: 1.03rem; }
.plano__lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); }
.plano__rotulo { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.4); margin: auto 0 4px; }
.plano__preco { margin: 0 0 8px; color: #fff; display: flex; align-items: baseline; gap: 8px; }
.plano__preco strong { font: 800 clamp(2.4rem, 4vw, 3.2rem)/1 var(--fonte-titulo); letter-spacing: -0.04em; }
.plano__preco small { font-size: 1rem; color: rgba(255,255,255,.55); }
.plano__preco--texto strong, .plano__preco.sob-consulta strong { font-size: clamp(1.8rem, 2.8vw, 2.3rem); }
.plano__nota { font-size: .95rem; color: rgba(255,255,255,.5); min-height: 3em; margin-bottom: 22px; }
.plano__btn { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 14px; font-weight: 700; font-size: 1.06rem; text-decoration: none; color: #0A0A0B; background: var(--cor); transition: filter .2s ease, transform .14s var(--ease-out); }
.plano__btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .plano__btn:hover { filter: brightness(1.1); } }
.plano:not(.plano--destaque) .plano__btn { background: transparent; color: #fff; border: 1px solid color-mix(in srgb, var(--cor) 50%, transparent); }
@media (hover: hover) and (pointer: fine) { .plano:not(.plano--destaque) .plano__btn:hover { background: color-mix(in srgb, var(--cor) 16%, transparent); filter: none; } }
.planos-escuro__rodape { text-align: center; margin: 40px auto 0; color: rgba(255,255,255,.5); font-size: 1rem; }

/* Plano máximo: card largo abaixo dos três */
.plano--maximo { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px 48px; align-items: stretch; padding: 34px 36px 32px; border-color: color-mix(in srgb, var(--cor) 40%, transparent); background: radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--cor) 12%, transparent), transparent 60%), linear-gradient(180deg, #18181B, #0D0D0F); }
.plano--maximo .plano__btn { background: var(--cor) !important; color: #0A0A0B !important; border: 0 !important; }
@media (hover: hover) and (pointer: fine) { .plano--maximo .plano__btn:hover { filter: brightness(1.08) !important; } }
.plano__selo { position: absolute; top: -13px; left: 36px; padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #0A0A0B; background: var(--cor); }
.plano-max__info, .plano-max__lado { display: flex; flex-direction: column; min-width: 0; }
.plano--maximo .plano__lista { margin-bottom: 0; }
.plano__lista--duas { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.plano--maximo .plano__nota { min-height: 0; }
@media (max-width: 1040px) { .plano--maximo { grid-template-columns: 1fr; padding: 30px 28px 28px; } .plano__selo { left: 28px; } }
@media (max-width: 560px) { .plano__lista--duas { grid-template-columns: 1fr; } }

.plano--maximo .plano__arte { height: auto; min-height: 220px; }
.arte-painel { display: grid; place-items: center; padding: 22px 18px; }
.arte-painel__janela { width: 100%; max-width: 380px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); padding: 10px 12px 12px; }
.arte-painel__barra { display: flex; gap: 5px; margin-bottom: 10px; }
.arte-painel__barra i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.arte-painel__kpis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.arte-painel__kpis div { border-radius: 9px; padding: 7px 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.arte-painel__kpis small { display: block; font-size: .66rem; color: rgba(255,255,255,.45); }
.arte-painel__kpis strong { font: 700 .92rem/1.2 var(--fonte-titulo); color: #fff; white-space: nowrap; }
.arte-painel__kpis .ok strong { color: #7FD6B5; }
.arte-painel__vendas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.arte-painel__vendas li { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, var(--cor) 9%, transparent); }
.arte-painel__vendas span { flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.16); }
.arte-painel__vendas em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--cor); }
.js .arte-painel__vendas li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s var(--ease-out); }
.js .plano.visivel .arte-painel__vendas li { opacity: 1; transform: none; }
.js .plano.visivel .arte-painel__vendas li:nth-child(2) { transition-delay: .15s; }
.js .plano.visivel .arte-painel__vendas li:nth-child(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .js .arte-painel__vendas li { opacity: 1; transform: none; transition: none; } }

/* Moldura das ilustrações */
.plano__arte { position: relative; height: 190px; margin-bottom: 22px; border-radius: 20px; border: 1px solid rgba(255,255,255,.07); background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--cor) 14%, transparent), transparent 70%), #121214; overflow: hidden; }

/* 01: telas flutuando */
.arte-telas__a, .arte-telas__b { position: absolute; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); }
.arte-telas__a { width: 52%; height: 58%; right: 10%; top: 12%; background: rgba(255,255,255,.04); backdrop-filter: blur(4px); transform: rotate(6deg); animation: flutuar 6s ease-in-out infinite; }
.arte-telas__b { width: 62%; height: 60%; left: 10%; bottom: 10%; background: color-mix(in srgb, var(--cor) 22%, #121214); transform: rotate(-4deg); animation: flutuar 6s ease-in-out -3s infinite; padding: 14px; }
.arte-telas__a i, .arte-telas__b > i { display: block; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); margin: 14px 14px 0; width: 60%; }
.arte-telas__b > i { margin: 0 0 12px; width: 70%; }
.arte-telas__b span { display: flex; align-items: flex-end; gap: 8px; height: 58%; }
.arte-telas__b b { flex: 1; border-radius: 7px; background: var(--cor); opacity: .55; }
.arte-telas__b b:nth-child(1) { height: 40%; } .arte-telas__b b:nth-child(2) { height: 70%; opacity: .75; } .arte-telas__b b:nth-child(3) { height: 100%; opacity: 1; }

/* 02: barras de crescimento */
.arte-barras__busca { position: absolute; left: 10%; right: 10%; top: 16px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.arte-barras__busca i { width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--cor) 60%, transparent); }
.arte-barras__busca span { flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); }
.arte-barras__busca em { width: 22%; height: 5px; border-radius: 5px; background: var(--cor); }
.arte-barras__colunas { position: absolute; left: 10%; right: 10%; bottom: 0; height: 62%; display: flex; align-items: flex-end; gap: 12px; }
.arte-barras__colunas b { flex: 1; height: var(--h); border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--cor), color-mix(in srgb, var(--cor) 20%, transparent)); transform-origin: bottom; }
.js .arte-barras__colunas b { transform: scaleY(.08); transition: transform 1s var(--ease-out); }
.js .plano.visivel .arte-barras__colunas b { transform: scaleY(1); }
.js .plano.visivel .arte-barras__colunas b:nth-child(2) { transition-delay: .12s; }
.js .plano.visivel .arte-barras__colunas b:nth-child(3) { transition-delay: .24s; }
.js .plano.visivel .arte-barras__colunas b:nth-child(4) { transition-delay: .36s; }

/* 03: blocos sob medida */
.arte-blocos__moldura { position: absolute; left: 50%; top: 50%; width: 62%; height: 64%; border-radius: 22px; border: 1.5px solid color-mix(in srgb, var(--cor) 45%, transparent); transform: translate(-50%, -50%) rotate(-7deg); animation: girar 18s linear infinite; }
.arte-blocos__moldura--2 { width: 54%; height: 72%; border-style: dashed; opacity: .6; animation-duration: 26s; animation-direction: reverse; }
@keyframes girar { to { transform: translate(-50%, -50%) rotate(353deg); } }
.arte-blocos__conteudo { position: absolute; inset: 22% 14%; display: grid; gap: 10px; align-content: center; }
.arte-blocos__conteudo > i { height: 7px; border-radius: 7px; background: rgba(255,255,255,.16); width: 100%; }
.arte-blocos__conteudo > i.curta { width: 64%; justify-self: center; }
.arte-blocos__conteudo div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.arte-blocos__conteudo b { height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: color-mix(in srgb, var(--cor) 12%, transparent); animation: piscarBloco 3.6s ease-in-out infinite; }
.arte-blocos__conteudo b:nth-child(2) { animation-delay: 1.2s; } .arte-blocos__conteudo b:nth-child(3) { animation-delay: 2.4s; }
@keyframes piscarBloco { 0%, 100% { background: color-mix(in srgb, var(--cor) 10%, transparent); } 40% { background: color-mix(in srgb, var(--cor) 40%, transparent); } }

@media (prefers-reduced-motion: reduce) {
  .arte-telas__a, .arte-telas__b, .arte-blocos__moldura, .arte-blocos__conteudo b { animation: none; }
  .js .arte-barras__colunas b { transform: none; transition: none; }
  .plano { transition: none; }
}

/* =========================================================
   Camada "LP": noite, brilho, textura e movimento
   ========================================================= */
:root { --noite: #0D0D0F; --noite-2: #1A1A1D; --brilho: #4A5BFF; }
.vitrine-real::after, .faixa-azul::after, .planos-escuro::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Topo: brilho verde-água e grade de pontos atrás da vitrine */
.hero { isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto 35%; height: 120%; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 46% at 62% 40%, color-mix(in srgb, var(--brilho) 22%, transparent), transparent 70%),
              radial-gradient(30% 30% at 88% 78%, rgba(13,13,15,.10), transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0 0 0 48%; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(13,13,15,.16) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 60% at 55% 45%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 55% 45%, #000, transparent 75%); }
.hero__prova { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); color: var(--suave); text-decoration: none; font-size: 1rem; box-shadow: 0 10px 30px -18px rgba(13,13,15,.4); transition: border-color .2s ease, transform .14s var(--ease-out); }
.hero__prova b { color: var(--azul); }
.hero__prova:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .hero__prova:hover { border-color: var(--verde); } }
.hero__miniaturas { display: flex; flex: none; }
.hero__miniaturas img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 78% 45%; border: 2px solid #fff; margin-left: -10px; box-shadow: 0 2px 6px rgba(13,13,15,.18); }
.hero__miniaturas img:first-child { margin-left: 0; }
.anima .hero__prova { animation: surgir .75s var(--ease-out) 430ms both; }

/* Trabalhos: vitrine imersiva */
.vitrine-real { position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.72);
  background: radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--brilho) 26%, transparent), transparent 65%),
              radial-gradient(50% 40% at 100% 100%, rgba(192,77,255,.12), transparent 70%), var(--noite); }
.vitrine-real > .container { position: relative; z-index: 1; }
.vitrine-real h2 { color: #fff; }
.vitrine-real .lead { color: rgba(255,255,255,.66); }
.vitrine-real .clientes-segmentos { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.vitrine-real .clientes-segmentos__titulo { color: rgba(255,255,255,.55); }
.vitrine-real .clientes-segmentos__titulo strong { color: #fff; }
.vitrine-real .clientes-segmentos a { background: rgba(255,255,255,.06); color: #fff; }
@media (hover: hover) and (pointer: fine) { .vitrine-real .clientes-segmentos a:hover { background: rgba(255,255,255,.12); border-color: var(--brilho); } }
.vitrine-real__acao { margin: 44px 0 0; }

.rio { position: relative; z-index: 1; display: grid; gap: 22px; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rio__fila { overflow: hidden; padding: 6px 0 10px; }
.rio__trilho { display: flex; gap: 22px; width: max-content; animation: rioPassa 60s linear infinite; }
.rio__fila--volta .rio__trilho { animation-direction: reverse; animation-duration: 70s; }
.rio:hover .rio__trilho, .rio:focus-within .rio__trilho { animation-play-state: paused; }
@keyframes rioPassa { to { transform: translateX(calc(-50% - 11px)); } }
.obra { position: relative; display: block; width: clamp(260px, 26vw, 380px); flex: none; border-radius: 14px; overflow: hidden; text-decoration: none; background: var(--noite-2); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 50px -24px rgba(0,0,0,.7); transition: transform .35s var(--ease-out), border-color .3s ease; }
.obra__barra { display: flex; gap: 5px; padding: 8px 10px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.08); }
.obra__barra i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); }
.obra img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.obra__legenda { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; padding: 10px 14px; border-radius: 10px; font-size: .85rem; color: rgba(255,255,255,.7); background: rgba(13,13,15,.8); backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s var(--ease-out); }
.obra__legenda b { color: #fff; font-size: 1rem; }
.obra:focus-visible .obra__legenda { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .obra:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--brilho) 70%, transparent); }
  .obra:hover .obra__legenda { opacity: 1; transform: none; }
}
@media (hover: none) { .obra__legenda { opacity: 1; transform: none; } }

/* Processo: o quadrado do símbolo marcando cada etapa */
.passos li { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%232D4BFF' d='M3 7H17V21H3Z'/%3E%3C/svg%3E") no-repeat 0 -11px / 18px 22px; }
.passos li::before, .passos li::after { left: 26px; }
.js .passos.visivel li:nth-child(4)::after { transition-delay: 270ms; }
.js .passos.visivel li:nth-child(5)::after { transition-delay: 360ms; }
.js .passos.visivel li:nth-child(6)::after { transition-delay: 450ms; }

/* Seções escuras com brilho */
.faixa-azul { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(50% 70% at 90% 10%, color-mix(in srgb, var(--brilho) 22%, transparent), transparent 70%), var(--azul); }
.faixa-azul > .container, .planos-escuro > .container { position: relative; z-index: 1; }

/* WhatsApp flutuante (computador) */
.zap-flut { position: fixed; right: 24px; bottom: 24px; z-index: 44; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #1FAF55; box-shadow: 0 14px 30px -10px rgba(31,175,85,.7); transition: transform .2s var(--ease-out); }
.zap-flut svg { width: 28px; height: 28px; }
.zap-flut::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #1FAF55; animation: zapPulso 2.6s ease-out infinite; }
@keyframes zapPulso { to { transform: scale(1.6); opacity: 0; } }
.zap-flut:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .zap-flut:hover { transform: scale(1.06); } }
@media (max-width: 760px) { .zap-flut { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .rio__trilho { animation: none; }
  .rio__fila { overflow-x: auto; }
  .zap-flut::before { animation: none; display: none; }
}
@media (max-width: 1000px) {
  .hero::after { inset: auto 0 0 0; height: 55%; }
  .hero::before { inset: auto -20% -10% -20%; height: 70%; }
}
@media (hover: none) { .obra__legenda { left: 8px; right: auto; bottom: 8px; padding: 6px 10px; font-size: .75rem; } .obra__legenda b { font-size: .85rem; } }

/* Seções noturnas (Serviços e Dúvidas) */
.noturna { position: relative; overflow: hidden; isolation: isolate; color: rgba(255,255,255,.72); background: var(--noite); }
.noturna--servicos { background: radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--brilho) 24%, transparent), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(192,77,255,.10), transparent 70%), var(--noite); }
.noturna--duvidas { background: radial-gradient(50% 55% at 50% 0%, color-mix(in srgb, var(--brilho) 20%, transparent), transparent 70%), var(--noite); border-top: 1px solid rgba(255,255,255,.06); }
.noturna::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.noturna > .container { position: relative; z-index: 1; }
.noturna h2 { color: #fff; }
.noturna .lead { color: rgba(255,255,255,.66); }
.noturna a { color: #A9B8FF; }
.noturna .lista-servicos, .noturna .lista-servicos li { border-color: rgba(255,255,255,.1); }
.noturna .lista-servicos .ico { background: rgba(255,255,255,.07); color: #A9B8FF; border: 1px solid rgba(255,255,255,.1); }
.noturna .lista-servicos h3 { color: #fff; }
.noturna .lista-servicos p { color: rgba(255,255,255,.66); }
.noturna .lista-servicos .ver { color: #A9B8FF; }
.noturna .lista-servicos li.destaque a { background: color-mix(in srgb, var(--brilho) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brilho) 35%, transparent); }
.noturna .lista-servicos li.destaque .ico { background: var(--brilho); color: var(--noite); border-color: transparent; }
@media (hover: hover) and (pointer: fine) { .noturna .lista-servicos a:hover { background: rgba(255,255,255,.05); } }
.noturna .faq details { border-color: rgba(255,255,255,.1); }
.noturna .faq summary { color: #fff; }
.noturna .faq summary::before, .noturna .faq summary::after { background: #A9B8FF; }
.noturna .faq details > div { color: rgba(255,255,255,.7); }
.noturna :focus-visible { outline-color: #A9B8FF; }

/* Respiro antes do convite final */
.secao--cta-final { padding-top: clamp(72px, 9vw, 120px); }

/* ---------- Pacotes em 3 passos ---------- */
.passos-resumo { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: none; }
.passos-resumo a { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: start; height: 100%; padding: 20px 22px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); color: var(--suave); text-decoration: none; font-size: 1rem; line-height: 1.45; transition: border-color .2s ease, transform .25s var(--ease-out); }
.passos-resumo strong { color: var(--tinta); font-weight: 500; font-size: 1.2rem; grid-column: 2; }
.passos-resumo a > :not(.passos-resumo__n):not(strong) { grid-column: 2; }
.passos-resumo__n { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 500 1.1rem var(--fonte-mono); }
@media (hover: hover) and (pointer: fine) { .passos-resumo a:hover { border-color: var(--tinta); transform: translateY(-2px); } }
@media (max-width: 800px) { .passos-resumo { grid-template-columns: 1fr; } }
.passo-num { font: 400 .9rem var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--verde-texto); margin-bottom: 10px; }
.passo-num--claro { color: #A9B8FF; }

.pacote__visual { height: 92px; margin-bottom: 22px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); padding: 12px; display: grid; gap: 6px; }
.pacote__visual i { display: block; border-radius: 4px; background: var(--azul-200); }
.pacote__visual--landing { grid-template-rows: 10px 1fr 14px; }
.pacote__visual--landing i:nth-child(3) { width: 44%; background: var(--verde); }
.pacote__visual--site { grid-template-columns: repeat(4, 1fr); }
.pacote__visual--site i { background: var(--azul-200); }
.pacote__visual--site i:first-child { background: var(--verde); }
.pacote__visual--loja { grid-template-columns: repeat(4, 1fr); }
.pacote__visual--loja i { position: relative; }
.pacote__visual--loja i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 8px; border-radius: 3px; background: var(--verde); }
.pacote--destaque .pacote__visual { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.pacote--destaque .pacote__visual i { background: rgba(255,255,255,.18); }
.pacote--destaque .pacote__visual i:first-child { background: #A9B8FF; }
.pacote__para strong { color: var(--tinta); font-weight: 500; }
.pacote--destaque .pacote__para strong { color: #fff; }
.pacote__ideal { font-size: 1rem; color: var(--suave); margin: -6px 0 18px; }
.pacote--destaque .pacote__ideal { color: rgba(255,255,255,.66); }
.pacote__fora { font-size: .98rem; color: var(--suave); margin: -14px 0 22px; }
.pacote__fora strong { color: var(--texto); font-weight: 500; }
.pacote--destaque .pacote__fora, .pacote--destaque .pacote__fora strong { color: rgba(255,255,255,.7); }
.pacote .pacote__preco { display: flex; flex-direction: column; gap: 2px; margin: auto 0 18px; padding-top: 18px; border-top: 1px solid var(--linha); }
.pacote--destaque .pacote__preco { border-top-color: rgba(255,255,255,.14); }
.pacote__preco small { font: 400 .85rem var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.pacote--destaque .pacote__preco small { color: rgba(255,255,255,.6); }
.pacote .btn { margin-top: 0; }

.comparar-itens { margin-top: 40px; border-top: 1px solid var(--linha); padding-top: 20px; }
.comparar-itens summary { cursor: pointer; font-weight: 500; color: var(--verde-texto); font-size: 1.1rem; }
.comparar-itens[open] summary { margin-bottom: 20px; }

.formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 800px) { .formas { grid-template-columns: 1fr; } }
.forma { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 36px; }
.forma--destaque { border: 2px solid var(--verde); }
.forma h3 { font-size: 2rem; color: var(--tinta); margin-bottom: .3em; }
.forma__resumo { color: var(--suave); font-size: 1.1rem; }
.forma ul { list-style: none; padding: 0; margin: 8px 0 26px; display: grid; gap: 11px; }
.forma li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.forma li svg { width: 20px; height: 20px; color: var(--verde); margin-top: 4px; }
.forma__preco { margin: auto 0 6px; padding-top: 18px; border-top: 1px solid var(--linha); display: flex; flex-direction: column; gap: 2px; }
.forma__preco small { font: 400 .85rem var(--fonte-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.forma__preco strong, .forma__preco .plano__preco strong { font-size: 1.6rem; font-weight: 500; color: var(--tinta); }
.forma__preco .plano__preco { margin: 0; color: var(--tinta); }
.forma__preco .plano__preco small { font: 400 1rem var(--fonte-texto); text-transform: none; letter-spacing: 0; }
.forma__nota { font-size: .98rem; color: var(--suave); margin-bottom: 20px; }
.forma .btn { align-self: flex-start; margin-top: 14px; }
.planos-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
@media (max-width: 1040px) { .planos-grade--2 { grid-template-columns: 1fr; } }
.pacote.pacote--destaque h3 { color: #fff; }

/* ---------- Serviços em cartões ---------- */
.secao--servicos { padding-top: clamp(48px, 6vw, 72px); }
.svc-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .svc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-grade { grid-template-columns: 1fr; } }
.svc { position: relative; display: flex; flex-direction: column; padding: 26px; border-radius: var(--raio); background: #fff; border: 1px solid var(--linha); color: var(--suave); text-decoration: none; scroll-margin-top: 110px; transition: transform .3s var(--ease-out), border-color .2s ease, box-shadow .3s ease; }
.svc h3 { font-size: 1.6rem; color: var(--tinta); margin: 18px 0 6px; font-weight: 500; }
.svc p { margin: 0 0 18px; font-size: 1.06rem; }
.svc--destaque { grid-column: span 2; background: var(--tinta); border-color: var(--tinta); color: rgba(255,255,255,.72); }
.svc--destaque h3 { color: #fff; font-size: 2.1rem; }
@media (max-width: 640px) { .svc--destaque { grid-column: auto; } }
.svc__ico { position: absolute; top: 22px; right: 22px; width: 42px; height: 42px; display: grid; place-items: center; background: var(--papel); color: var(--tinta); }
.svc__ico svg { width: 22px; height: 22px; }
.svc--destaque .svc__ico { background: var(--verde); color: #fff; }
.svc__arte { height: 110px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha); padding: 12px; display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; overflow: hidden; }
.svc__arte i { border-radius: 4px; background: var(--azul-200); transition: transform .5s var(--ease-out), background-color .3s ease; }
.svc--destaque .svc__arte { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.svc--destaque .svc__arte i { background: rgba(255,255,255,.14); }
/* cada serviço desenha a própria miniatura */
.svc__arte--seo-geo i:nth-child(1) { grid-column: 1 / -1; background: var(--verde) !important; }
.svc__arte--seo-geo i:nth-child(2) { grid-column: 1 / 3; }
.svc__arte--seo-geo i:nth-child(3) { grid-column: 3 / 4; }
.svc__arte--institucional { grid-template-rows: 14px 1fr; }
.svc__arte--institucional i:nth-child(1) { grid-column: 1 / -1; }
.svc__arte--institucional i:nth-child(2) { grid-column: 1 / 3; background: var(--verde); }
.svc__arte--landing { grid-template-columns: 1fr; grid-template-rows: 12px 1fr 16px; }
.svc__arte--landing i:nth-child(3) { width: 40%; background: var(--verde); }
.svc__arte--landing i:nth-child(4) { display: none; }
.svc__arte--loja i:nth-child(odd) { background: var(--verde); opacity: .85; }
.svc__arte--redesign i:nth-child(-n+2) { background: var(--linha); transform: skewX(-12deg); }
.svc__arte--redesign i:nth-child(n+3) { background: var(--verde); }
.svc__arte--manutencao { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; align-items: end; }
.svc__arte--manutencao i:nth-child(1) { height: 40%; } .svc__arte--manutencao i:nth-child(2) { height: 65%; } .svc__arte--manutencao i:nth-child(3) { height: 50%; } .svc__arte--manutencao i:nth-child(4) { height: 85%; background: var(--verde); }
.svc__arte--adicionais { grid-template-columns: repeat(2, 1fr); }
.svc__arte--adicionais i:nth-child(4) { background: var(--verde); }
.svc__tags { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.svc__tags li { font: 400 .82rem var(--fonte-mono); letter-spacing: .02em; padding: 5px 10px; border: 1px solid var(--linha); color: var(--texto); }
.svc--destaque .svc__tags li { border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.85); }
.svc__ver { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--verde-texto); }
.svc--destaque .svc__ver { color: #A9B8FF; }
.svc__ver svg { width: 20px; height: 20px; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-4px); border-color: var(--tinta); box-shadow: 0 22px 40px -28px rgba(13,13,15,.45); }
  .svc:hover .svc__ver svg { transform: translateX(4px); }
  .svc:hover .svc__arte i:nth-child(2) { transform: translateY(-3px); }
  .svc:hover .svc__arte i:nth-child(3) { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) { .svc, .svc__arte i, .svc__ver svg { transition: none; } }
.svc-rodape { margin: 28px 0 0; color: var(--suave); text-align: center; max-width: none; }
.svc-rodape a { font-weight: 500; }

.etapas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; }
.etapas li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0 20px 0 0; color: var(--suave); font-size: 1.02rem; }
.etapas li::before { content: ""; position: absolute; left: 48px; right: 0; top: 22px; height: 1px; background: var(--linha); }
.etapas li:last-child::before { display: none; }
.etapas strong { color: var(--tinta); font-weight: 500; font-size: 1.3rem; margin-top: 14px; }
.etapas__n { width: 44px; height: 44px; display: grid; place-items: center; background: var(--tinta); color: #fff; font: 400 1.05rem var(--fonte-mono); position: relative; }
.etapas li:last-child .etapas__n { background: var(--verde); }
@media (max-width: 760px) { .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; } .etapas li:nth-child(2)::before { display: none; } }
.svc--largo { grid-column: span 2; } @media (max-width: 1000px) { .svc--largo { grid-column: auto; } }
/* Serviços sem miniaturas: ícone no topo do cartão */
.svc__ico { position: static; width: 48px; height: 48px; }
.svc h3 { margin-top: 22px; }

/* ---------- Abertura do topo: linhas saem de um corte, o ponto vira o quadrado da marca ---------- */
.hero__titulo .linha { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__titulo .linha > span { display: inline-block; }
.hero__ponto { display: inline-block; width: .19em; height: .19em; margin-left: .07em; background: var(--verde); }
@keyframes linhaSobe { from { transform: translateY(110%); } }
@keyframes pontoEncaixa {
  0% { opacity: 0; transform: translate(.9em, -1.6em) rotate(45deg) scale(1.4); }
  70% { opacity: 1; transform: translate(0, .05em) rotate(-4deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes brilhoPassa { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
.anima .hero__titulo .linha > span { animation: linhaSobe .95s var(--ease-out) both; }
.anima .hero__titulo .linha:nth-child(2) > span { animation-delay: 90ms; }
.anima .hero__titulo .linha:nth-child(3) > span { animation-delay: 180ms; }
.anima .hero__ponto { animation: pontoEncaixa .8s var(--ease-out) 780ms both; }
.notebook__tela .tela::after { content: ""; position: absolute; inset: 0; width: 40%; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent); transform: translateX(-130%) skewX(-20deg); }
.anima .notebook__tela .tela::after { animation: brilhoPassa 1.2s var(--ease-in-out) 1.25s both; }
.dispositivos { transition: transform .7s var(--ease-out); transform-style: preserve-3d; }
@media (prefers-reduced-motion: reduce) {
  .anima .hero__ponto { animation: aparecer .3s ease 300ms both; }
  .anima .notebook__tela .tela::after { animation: none; }
  .dispositivos { transition: none; }
}

/* ---------- Topo: fundo vivo com as cores da marca (blocos de luz que se movem devagar) ---------- */
.hero::before { display: none; }
.hero__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__fundo i { position: absolute; width: min(56vw, 820px); aspect-ratio: 1; border-radius: 50%; opacity: .62; will-change: transform; }
.hero__fundo i:nth-child(1) { right: -6%; top: -18%; background: radial-gradient(closest-side, rgba(45,75,255,.9), rgba(45,75,255,.35) 45%, transparent); animation: fundoA 22s ease-in-out infinite alternate; }
.hero__fundo i:nth-child(2) { right: 18%; top: 30%; width: min(40vw, 600px); background: radial-gradient(closest-side, rgba(138,61,255,.9), rgba(138,61,255,.3) 45%, transparent); opacity: .42; animation: fundoB 27s ease-in-out infinite alternate; }
.hero__fundo i:nth-child(3) { right: -12%; bottom: -30%; width: min(44vw, 660px); background: radial-gradient(closest-side, rgba(192,77,255,.9), rgba(192,77,255,.3) 45%, transparent); opacity: .34; animation: fundoC 31s ease-in-out infinite alternate; }
@keyframes fundoA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14%, 16%, 0) scale(1.15); } }
@keyframes fundoB { from { transform: translate3d(0, 0, 0) scale(.9); } to { transform: translate3d(18%, -20%, 0) scale(1.1); } }
@keyframes fundoC { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-22%, -12%, 0) scale(.92); } }
@media (max-width: 800px) {
  .hero__fundo i:nth-child(1) { width: 115vw; right: -55vw; top: -6%; }
  .hero__fundo i:nth-child(2) { width: 95vw; left: -45vw; right: auto; top: 38%; }
  .hero__fundo i:nth-child(3) { width: 100vw; right: -40vw; bottom: -8%; }
}
@media (prefers-reduced-motion: reduce) { .hero__fundo i { animation: none; } }

/* ---------- Pacotes: notas e cardápio virtual ---------- */
.pacote__nota { font-size: .95rem; line-height: 1.5; color: var(--suave); margin: -4px 0 14px; }
.pacote__nota strong { color: var(--tinta); font-weight: 600; }
.pacote__nota--selo { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--azul-100); color: var(--tinta); font-size: .88rem; }
.cardapio { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cardapio__passos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 16px; }
.cardapio__passos li { display: flex; gap: 16px; align-items: flex-start; }
.cardapio__passos span { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--verde); color: #fff; font-weight: 600; }
.cardapio__passos strong { display: block; color: var(--tinta); font-weight: 600; }
.cardapio__card { margin: 0; }
@media (max-width: 860px) { .cardapio { grid-template-columns: 1fr; } }

/* Pacotes mais compactos */
.pacotes { gap: 18px; }
.pacote { padding: 26px; }
.pacote__visual { height: 64px; margin-bottom: 16px; padding: 9px; }
.pacote__tag { top: 16px; right: 16px; font-size: .78rem; padding: 4px 10px; }
.pacote__nome { font-size: .92rem; margin-bottom: 2px; }
.pacote h3 { font-size: 1.7rem; }
.pacote__para { font-size: .98rem; min-height: 0; margin-bottom: 10px; }
.pacote__ideal { font-size: .88rem; margin: 0 0 14px; }
.pacote ul { gap: 7px; margin-bottom: 16px; }
.pacote li { font-size: .95rem; gap: 8px; grid-template-columns: 18px 1fr; }
.pacote li svg { width: 17px; height: 17px; margin-top: 3px; }
.pacote__fora { font-size: .86rem; margin: 0 0 14px; }
.pacote .pacote__preco { margin-bottom: 12px; padding-top: 14px; font-size: 1.45rem; }
.pacote__nota { font-size: .86rem; margin: -2px 0 10px; }
.pacote__nota--selo { font-size: .8rem; padding: 5px 10px; border-radius: 12px; }

/* Página de compra */
.escolha { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.escolha legend { font-weight: 600; font-size: 1.0938rem; color: var(--tinta); margin-bottom: 8px; }
.escolha[hidden] { display: none; }
.escolha__op { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; border: 1.5px solid #CAD3DF; border-radius: var(--raio-sm); padding: 12px 14px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.escolha__op input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--azul); }
.escolha__op span { display: flex; flex-direction: column; gap: 2px; }
.escolha__op small { color: var(--suave); font-size: .9rem; }
.escolha__op:has(input:checked) { border-color: var(--azul); background: var(--azul-100); }
.campo[hidden], .campo--cheio[hidden] { display: none; }

/* Formas de pagamento no cartão do Profissional */
.pacote--destaque .pacote__nota { color: rgba(255,255,255,.72); }
.pacote--destaque .pacote__nota strong { color: #fff; }
.pacote__pagar { margin: -2px 0 14px; display: grid; gap: 6px; font-size: .88rem; }
.pacote__pagar div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--linha); }
.pacote__pagar div:last-child { border-bottom: 0; padding-bottom: 0; }
.pacote__pagar dt { font-weight: 500; color: var(--tinta); }
.pacote__pagar dd { margin: 0; color: var(--suave); text-align: right; white-space: nowrap; }
.pacote--destaque .pacote__pagar div { border-bottom-color: rgba(255,255,255,.14); }
.pacote--destaque .pacote__pagar dt { color: #fff; }
.pacote--destaque .pacote__pagar dd { color: rgba(255,255,255,.66); }
.pacote--destaque .pacote__pagar div:first-child dd { color: #B9A6FF; font-weight: 600; }

/* Topo: notebook e celular flutuando de leve (depois da entrada) */
@keyframes flutuarPc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes flutuarCel { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes brilhoTela { 0%, 100% { box-shadow: 0 34px 70px rgba(13,13,15,.2); } 50% { box-shadow: 0 44px 90px rgba(45,75,255,.22); } }
.anima .palco .notebook { animation: pousar .9s var(--ease-out) 480ms both, flutuarPc 6s ease-in-out 1.4s infinite; }
.anima .palco .celular { animation: pousar .9s var(--ease-out) 640ms both, flutuarCel 5s ease-in-out 1.6s infinite; }
.anima .palco .notebook__tela { animation: brilhoTela 6s ease-in-out 1.4s infinite; }
.palco .tela img { animation: telaZoom 14s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes telaZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .anima .palco .notebook, .anima .palco .celular { animation: aparecer .3s ease both; }
  .anima .palco .notebook__tela, .palco .tela img { animation: none; }
}

/* Trabalhos: mais destaque (faixa de ponta a ponta, cartões maiores, nome sempre visível) */
.vitrine-real .rio { margin-inline: calc(50% - 50vw); }
.vitrine-real .obra { width: clamp(300px, 34vw, 540px); border-radius: 16px; }
.vitrine-real .obra__legenda { opacity: 1; transform: none; left: 12px; right: auto; bottom: 12px; padding: 8px 14px; }
.vitrine-real h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.vitrine-real__numeros { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.vitrine-real__numeros li { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: .95rem; }
.vitrine-real__numeros strong { color: #fff; }
.btn--seta svg { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn--seta:hover svg { transform: translateX(4px); } }
.btn--claro { color: #0D0D0F; display: inline-flex; align-items: center; gap: 10px; }

/* Rodapé: WhatsApp e Instagram em ícones */
.rodape__redes { display: flex; gap: 10px; }
.rodape__icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--linha); background: #fff; color: var(--tinta); transition: background-color .2s ease, color .2s ease, transform .14s var(--ease-out); }
.rodape__icone[hidden] { display: none; }
.rodape__icone svg { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .rodape__icone:hover { background: var(--azul); color: #fff; border-color: var(--azul); } }
.rodape__icone:active { transform: scale(.95); }

/* Menos espaço em branco entre seções */
.secao { padding: clamp(56px, 7vw, 96px) 0; }
.secao__topo { margin-bottom: clamp(28px, 3.5vw, 44px); }
.cab-pagina { padding: clamp(44px, 6vw, 80px) 0 clamp(32px, 4vw, 52px); }
.cab-pagina__fatos { margin-top: 28px; padding-top: 20px; }
.secao--cta-final { padding-top: clamp(56px, 7vw, 96px); }

/* Cartões entram em cascata ao rolar */
.revelar--cartao { opacity: 0; transform: translateY(28px) scale(.98); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow .3s ease, border-color .3s ease; transition-delay: calc(var(--i, 0) * 110ms); }
.revelar--cartao.visivel { opacity: 1; transform: none; }

/* Portfólio mais vivo */
.projeto { transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
.projeto__img { position: relative; overflow: hidden; }
.projeto__img img { transition: transform .8s var(--ease-out); }
.projeto__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .projeto.visivel:hover, .projeto:not(.revelar):hover { transform: translateY(-8px); box-shadow: 0 30px 60px -28px rgba(13,13,15,.35); border-color: color-mix(in srgb, var(--azul) 40%, var(--linha)); transition-delay: 0s; }
  .projeto:hover .projeto__img img { transform: scale(1.05); }
  .projeto:hover .projeto__img::after { transform: translateX(120%); transition: transform .9s ease; }
}
@media (prefers-reduced-motion: reduce) { .revelar--cartao { opacity: 1; transform: none; transition: none; } }

/* Portfólio: pilha de trabalhos flutuando no topo */
.pilha { display: none; }
@media (min-width: 1100px) {
  .cab-pagina--portfolio .container > :not(.cab-pagina__fatos) { max-width: 600px; }
  .pilha { display: block; position: absolute; right: max(24px, calc(50% - 640px)); top: 50%; width: min(36vw, 500px); aspect-ratio: 16 / 11; transform: translateY(-50%); z-index: 1; pointer-events: none; }
  .pilha img { position: absolute; width: 82%; border-radius: 12px; border: 1px solid var(--linha); box-shadow: 0 30px 60px -24px rgba(13,13,15,.35); animation: pilhaFlutua 7s ease-in-out infinite; }
  .pilha img:nth-child(1) { left: 0; top: 0; --r: -6deg; animation-delay: -1s; }
  .pilha img:nth-child(2) { left: 18%; top: 18%; --r: 3deg; animation-delay: -3s; z-index: 2; }
  .pilha img:nth-child(3) { left: 8%; top: 42%; --r: -2deg; animation-delay: -5s; z-index: 3; }
}
@keyframes pilhaFlutua { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-12px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .pilha img { animation: none; transform: rotate(var(--r)); } }

/* Pacotes: os cartões são a primeira coisa da página */
.secao--pacotes { padding-top: clamp(32px, 4vw, 56px); }
.pacotes-titulo { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: .3em; }

/* Compra: status do domínio */
.dominio-status { font-size: .9rem; color: var(--suave); min-height: 1.2em; }
.dominio-status--livre { color: #13804B; font-weight: 600; }
.dominio-status--ocupado { color: var(--erro); font-weight: 600; }
.check--pequeno { font-size: .92rem; grid-template-columns: 20px 1fr; gap: 8px; }
.check--pequeno input { width: 18px; height: 18px; }
.check[hidden] { display: none; }

/* Compra: plano escolhido em Pacotes */
.plano-escolhido { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 18px; border-radius: var(--raio-sm); background: var(--azul-100); }
.plano-escolhido__rotulo { width: 100%; font-size: .85rem; color: var(--suave); }
.plano-escolhido strong { font-size: 1.2rem; color: var(--tinta); }
.plano-escolhido a { font-size: .92rem; font-weight: 600; color: var(--azul); }
.plano-escolhido__trocar { font: 600 .92rem var(--fonte-texto); color: var(--azul); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.plano-escolhido__lista { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; margin-top: 8px; }
.plano-escolhido__lista[hidden] { display: none; }
.plano-escolhido__lista button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: 600 .95rem var(--fonte-texto); color: var(--tinta); background: #fff; border: 1.5px solid #CAD3DF; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.plano-escolhido__lista button small { font-weight: 400; color: var(--suave); }
@media (hover: hover) and (pointer: fine) { .plano-escolhido__lista button:hover { border-color: var(--azul); } }

/* ---------- Início no estilo da LP (fundo escuro, luzes e conversa com IA) ---------- */
.abre { --eletrico: #2D4BFF; --g1: #0D0D0F; --g3: #222228; --violeta: #8A3DFF; --magenta: #C04DFF; --ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative; isolation: isolate; overflow: hidden; background: var(--g1); color: #fff; padding: clamp(72px, 9vw, 128px) 0 clamp(72px, 9vw, 120px); }
.abre__luz { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.abre__luz i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.abre__luz i:nth-child(1) { width: 52vmax; height: 52vmax; right: -18vmax; top: -22vmax; background: var(--violeta); animation: abreFlutuar1 18s ease-in-out infinite alternate; }
.abre__luz i:nth-child(2) { width: 40vmax; height: 40vmax; left: -16vmax; bottom: -22vmax; background: var(--eletrico); animation: abreFlutuar2 22s ease-in-out infinite alternate; }
.abre__luz i:nth-child(3) { width: 22vmax; height: 22vmax; right: 18vw; bottom: -10vmax; background: var(--magenta); opacity: .3; animation: abreFlutuar1 26s ease-in-out infinite alternate-reverse; }
@keyframes abreFlutuar1 { to { transform: translate(-8vmax, 10vmax) scale(1.1); } }
@keyframes abreFlutuar2 { to { transform: translate(10vmax, -6vmax) scale(.92); } }
.abre__grade-fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  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: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%); }
.abre__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.abre__titulo { color: #fff; font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: .98; letter-spacing: -0.045em; font-weight: 500; margin: 0; }
.abre__titulo .linha { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.abre__titulo .linha > span { display: inline-block; transform: translateY(110%); animation: abreSubir 1.1s var(--ease) forwards; }
.abre__titulo .linha:nth-child(2) > span { animation-delay: .1s; }
.abre__titulo .linha:nth-child(3) > span { animation-delay: .2s; }
.abre__ponto { display: inline-block; width: .17em; height: .17em; background: var(--eletrico); margin-left: .05em; transform: scale(0); animation: abreEstalar .5s var(--ease) 1.05s forwards; }
@keyframes abreSubir { to { transform: none; } }
@keyframes abreEstalar { 60% { transform: scale(1.5); } to { transform: scale(1); } }
.abre__sub { margin: 28px 0 0; max-width: 34ch; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.5; color: rgba(255,255,255,.7); font-weight: 300; }
.abre__sub b { color: #fff; font-weight: 400; }
.abre__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.abre__btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--eletrico); color: #fff; font: 500 1.0625rem/1 var(--fonte-texto); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.abre__btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.abre__btn--fantasma { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
@media (hover: hover) and (pointer: fine) {
  .abre__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(45,75,255,.7); }
  .abre__btn:hover svg { transform: translateX(3px); }
  .abre__btn--fantasma:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); background: rgba(255,255,255,.06); }
  .abre__btn--fantasma:hover svg { transform: none; }
}
.abre__btn:active { transform: scale(.98); }
.abre__prova { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 22px;
  color: rgba(255,255,255,.6); font-size: 1rem; line-height: 1.35; text-decoration: none; width: fit-content; }
.abre__mini { display: flex; padding: 6px 0; }
.abre__mini span { width: 64px; aspect-ratio: 16 / 10; border-radius: 7px; overflow: hidden; flex: none; background: #fff; margin-left: -26px;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 10px 22px -8px rgba(0,0,0,.7); transform: rotate(var(--r)); transition: transform .5s var(--ease), margin .5s var(--ease); }
.abre__mini span:first-child { margin-left: 0; }
.abre__mini span:nth-child(1) { --r: -8deg; } .abre__mini span:nth-child(2) { --r: -3deg; } .abre__mini span:nth-child(3) { --r: 3deg; } .abre__mini span:nth-child(4) { --r: 8deg; }
.abre__mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.abre__prova:hover .abre__mini span { margin-left: -10px; transform: rotate(0) translateY(-3px); }
.abre__prova:hover .abre__mini span:first-child { margin-left: 0; }
.abre__prova b { display: block; color: #fff; font-weight: 500; font-size: 1.15rem; }
.abre__ver { display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.abre__ver svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.abre__prova:hover .abre__ver { color: #fff; }
.abre__prova:hover .abre__ver svg { transform: translateX(4px); }
.abre__entra { opacity: 0; transform: translateY(18px); animation: abreEntrar .9s var(--ease) forwards; }
@keyframes abreEntrar { to { opacity: 1; transform: none; } }
.abre-chat { position: relative; padding: 26px; border-radius: 28px; background: rgba(23,23,27,.72); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  min-height: 430px; display: flex; flex-direction: column; gap: 16px; transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); transition: transform .6s var(--ease); }
.abre-chat:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.abre-chat__topo { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.55); padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: "Geist Mono", ui-monospace, monospace; font-size: .85rem; }
.abre-chat__topo i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.abre-chat__topo span { margin-left: auto; }
.abre-balao { max-width: 88%; padding: 16px 20px; border-radius: 20px; font-size: 1.05rem; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.abre-balao.on { opacity: 1; transform: none; }
.abre-balao--eu { align-self: flex-end; background: var(--eletrico); color: #fff; border-bottom-right-radius: 6px; }
.abre-cursor { display: inline-block; width: 2px; height: 1.1em; background: #fff; vertical-align: -0.2em; margin-left: 1px; animation: piscar 1s steps(1) infinite; }
.abre-balao--ia { background: var(--g3); color: rgba(255,255,255,.75); border-bottom-left-radius: 6px; }
.abre-balao--ia strong { display: block; color: #fff; font-weight: 500; font-size: 1.15rem; margin-top: 10px; }
.abre-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: #9DB0FF; font-family: "Geist Mono", ui-monospace, monospace; font-size: .95rem; }
.abre-link::before { content: ""; width: 8px; height: 8px; background: var(--eletrico); }
.abre-outra { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.38); font-size: .95rem; }
.abre-digitando { display: inline-flex; gap: 5px; padding: 18px 20px; }
.abre-digitando i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); animation: abrePular 1.1s infinite; }
.abre-digitando i:nth-child(2) { animation-delay: .15s; } .abre-digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes abrePular { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.abre-chat__nota { margin: auto 0 0; color: rgba(255,255,255,.4); font-size: .85rem; }
.abre-chat__selo { position: absolute; left: -26px; bottom: 64px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px;
  background: #fff; color: var(--g1); font-size: .9rem; line-height: 1.2; box-shadow: 0 20px 40px -14px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.abre-chat__selo.on { opacity: 1; transform: none; }
.abre-chat__selo b { display: block; font-weight: 600; }
.abre-chat__selo .ico { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(115deg, #3A7BFF 0%, #2D4BFF 35%, #8A3DFF 72%, #C04DFF 100%); display: grid; place-items: center; }
.abre-chat__selo svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 980px) {
  .abre__in { grid-template-columns: 1fr; }
  .abre-chat { transform: none; min-height: 400px; }
  .abre-chat__selo { left: auto; right: 12px; bottom: -18px; }
}
@media (max-width: 640px) {
  .abre__acoes .abre__btn { width: 100%; }
  .abre-chat { padding: 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .abre__luz i, .abre__titulo .linha > span, .abre__ponto, .abre__entra { animation: none; transform: none; opacity: 1; }
}

.cardapio-faixa { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 20px 28px; margin-top: 24px; padding: 24px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--linha); box-shadow: 0 24px 50px -36px rgba(13,13,15,.35); }
.cardapio-faixa__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(115deg, #3A7BFF, #2D4BFF 40%, #8A3DFF); color: #fff; }
.cardapio-faixa__ico svg { width: 28px; height: 28px; }
.cardapio-faixa h3 { margin: 0 0 4px; font-size: 1.3rem; }
.cardapio-faixa__txt p { margin: 0; color: var(--suave); line-height: 1.5; max-width: 52ch; }
.cardapio-faixa .selo-rapido { margin: 0; }
.cardapio-faixa__preco { margin: 0; text-align: right; line-height: 1.1; }
.cardapio-faixa__preco strong { display: block; font-size: 1.6rem; color: var(--tinta); }
.cardapio-faixa__preco small { color: var(--suave); }
.pacotes__mais { margin: 28px 0 0; text-align: center; max-width: none; }
.pacotes__mais a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: #2D4BFF; }
.pacotes__mais svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.pacotes__mais a:hover svg { transform: translateX(4px); }
@media (max-width: 980px) {
  .cardapio-faixa { grid-template-columns: auto 1fr; }
  .cardapio-faixa .selo-rapido { grid-column: 1 / -1; justify-self: start; }
  .cardapio-faixa__preco { text-align: left; }
  .cardapio-faixa .btn { justify-self: end; }
}
@media (max-width: 520px) { .cardapio-faixa { grid-template-columns: 1fr; } .cardapio-faixa .btn { justify-self: stretch; } }
.selo-rapido { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; width: fit-content; margin: 4px 0 6px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: linear-gradient(115deg, #3A7BFF 0%, #2D4BFF 35%, #8A3DFF 72%, #C04DFF 100%); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1;
  box-shadow: 0 10px 26px -10px rgba(45,75,255,.8); animation: seloRapido 2.4s ease-in-out infinite; }
.selo-rapido svg { width: 18px; height: 18px; fill: #FFD84D; animation: seloRaio 2.4s ease-in-out infinite; }
@keyframes seloRapido { 0%, 100% { box-shadow: 0 10px 26px -10px rgba(45,75,255,.8), 0 0 0 0 rgba(138,61,255,.45); } 50% { box-shadow: 0 10px 26px -10px rgba(45,75,255,.8), 0 0 0 9px rgba(138,61,255,0); } }
@keyframes seloRaio { 0%, 80%, 100% { transform: none; } 85% { transform: scale(1.3) rotate(-8deg); } 90% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .selo-rapido, .selo-rapido svg { animation: none; } }

/* ---------- Portfólio: vitrine navegável dos modelos ---------- */
.mv__app { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.mv__abas { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 108px; }
.mv-aba { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid transparent; background: transparent;
  text-align: left; cursor: pointer; font: inherit; color: var(--tinta); transition: background-color .25s, border-color .25s, transform .2s var(--ease-out); }
.mv-aba img { width: 72px; aspect-ratio: 16 / 10; border-radius: 8px; object-fit: cover; object-position: top; flex: none; box-shadow: 0 0 0 1px var(--linha); transition: transform .35s var(--ease-out); }
.mv-aba b { display: block; font-weight: 600; font-size: 1.05rem; }
.mv-aba small { display: block; color: var(--suave); font-size: .9rem; margin-top: 2px; }
@media (hover: hover) and (pointer: fine) { .mv-aba:hover { background: #fff; } .mv-aba:hover img { transform: scale(1.05); } }
.mv-aba[aria-selected="true"] { background: #fff; border-color: #2D4BFF; box-shadow: 0 14px 30px -18px rgba(45,75,255,.6); }
.mv-aba[aria-selected="true"] b { color: #2D4BFF; }
.mv-aba:active { transform: scale(.98); }
.mv__palco { min-width: 0; }
.mv__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.mv__modos { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linha); }
.mv-modo { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; font: 600 .95rem var(--fonte-texto); color: var(--suave); cursor: pointer; transition: background-color .25s, color .25s; }
.mv-modo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mv-modo[aria-pressed="true"] { background: #0D0D0F; color: #fff; }
.mv__abrir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: #2D4BFF; }
.mv__abrir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.mv__abrir:hover svg { transform: translate(2px, -2px); }
.mv__tela { position: relative; display: flex; justify-content: center; padding: 28px; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 0%, rgba(138,61,255,.35), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(45,75,255,.35), transparent 60%), #0D0D0F; }
.mv__navegador { width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transition: width .6s var(--ease-out), border-radius .6s var(--ease-out); }
.mv__chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #ECEBE7; border-bottom: 1px solid #DDDCD7; }
.mv__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #D3D2CD; }
.mv__chrome i:nth-child(1) { background: #FF6159; } .mv__chrome i:nth-child(2) { background: #FFBD2E; } .mv__chrome i:nth-child(3) { background: #28C941; }
.mv__url { flex: 1; max-width: 360px; margin: 0 auto; padding: 5px 12px; border-radius: 8px; background: #fff; color: var(--suave); font: .82rem "Geist Mono", ui-monospace, monospace; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mv__vidro { position: relative; height: min(68vh, 640px); overflow: hidden; }
.mv__vidro iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(100% / var(--esc, 1)); border: 0; transform: scale(var(--esc, 1)); transform-origin: 0 0; background: #fff; transition: opacity .35s ease; }
.mv__carregando { position: absolute; inset: 0; display: grid; place-items: center; background: #F2F1EE; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mv__carregando span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #D8D7D1; border-top-color: #2D4BFF; animation: gira .8s linear infinite; }
.mv__vidro.carregando .mv__carregando { opacity: 1; }
.mv__tela[data-modo="cel"] .mv__navegador { width: 390px; max-width: 100%; border-radius: 40px; padding: 12px; background: #1A1A1E; }
.mv__tela[data-modo="cel"] .mv__chrome { display: none; }
.mv__tela[data-modo="cel"] .mv__vidro { border-radius: 30px; height: min(72vh, 720px); }
.mv__tela[data-modo="cel"] .mv__vidro iframe { width: 100%; height: 100%; transform: none; }
.mv__info { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; animation: aparecer .4s ease; }
.mv__info.troca { animation: mvTroca .45s var(--ease-out); }
@keyframes mvTroca { from { opacity: 0; transform: translateY(8px); } }
.mv__seg { color: #2D4BFF; font-weight: 600; font-size: .95rem; }
.mv__info h3 { margin: 4px 0 6px; font-size: 1.6rem; }
.mv__info p { margin: 0; color: var(--suave); max-width: 62ch; line-height: 1.55; }
.mv__info .btn { flex: none; }
@media (max-width: 980px) {
  .mv__app { grid-template-columns: 1fr; }
  .mv__abas { position: static; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
  .mv__abas::-webkit-scrollbar { display: none; }
  .mv-aba { flex: none; width: auto; scroll-snap-align: start; background: #fff; border-color: var(--linha); }
  .mv-aba img { width: 56px; }
  .mv__info { flex-direction: column; align-items: flex-start; }
}
.mv__estatica { display: none; }
@media (max-width: 640px) {
  .mv__tela { padding: 14px; border-radius: 20px; }
  .mv__vidro { height: 62vh; }
  .mv__abrir { font-size: .95rem; }
  /* Celular: imagem do modelo (rola dentro da moldura) em vez do iframe */
  .mv__vidro iframe, .mv__carregando { display: none; }
  .mv__vidro { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #fff; }
  .mv__estatica { display: block; position: relative; text-decoration: none; }
  .mv__estatica img { display: block; width: 100%; height: auto; }
  .mv__estatica-botao { position: sticky; bottom: 14px; display: block; width: max-content; max-width: calc(100% - 28px); margin: -64px auto 14px; padding: 13px 22px; border-radius: 999px; background: #0D0D0F; color: #fff; font: 600 .95rem var(--fonte-texto); box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .mv__navegador, .mv__info, .mv__info.troca { transition: none; animation: none; } }

/* ---------- Início: SEO e GEO no estilo da LP ---------- */
.ft { --eletrico: #2D4BFF; --violeta: #8A3DFF; padding: clamp(80px, 11vw, 140px) 0; background: #fff; }
.ft__topo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.ft__topo h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.04em; margin: 0; }
.ft__ponto { display: inline-block; width: .17em; height: .17em; background: var(--eletrico); margin-left: .05em; }
.ft__topo p { margin: 0; color: var(--suave); font-size: 1.2rem; line-height: 1.55; max-width: 46ch; }
.ft__grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.ft-bloco { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(28px, 4vw, 44px); transition: transform .4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ft-bloco:hover { transform: translateY(-4px); } }
.ft-bloco__tag { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ft-bloco__tag::before { content: ""; width: 16px; height: 16px; background: var(--eletrico); }
.ft-bloco h3 { margin: 14px 0 0; font-size: 1.3rem; font-weight: 500; }
.ft-bloco ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.ft-bloco li { display: flex; gap: 14px; align-items: baseline; color: var(--suave); }
.ft-bloco li::before { content: ""; width: 14px; height: 1.5px; background: currentColor; flex: none; transform: translateY(-4px); }
.ft-bloco--seo { background: #F2F1EE; }
.ft-busca { margin-top: 30px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px -30px rgba(13,13,15,.35); display: grid; gap: 8px; }
.ft-busca__campo { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--linha); color: var(--tinta); min-height: 48px; margin-bottom: 6px; }
.ft-busca__campo svg { width: 18px; height: 18px; stroke: var(--suave); fill: none; stroke-width: 2; flex: none; }
.ft-cursor { display: inline-block; width: 1.5px; height: 1.1em; background: var(--tinta); margin-left: -10px; animation: piscar 1s steps(1) infinite; }
.ft-res { padding: 12px 14px; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.ft-res.on { opacity: 1; transform: none; }
.ft-res small { display: block; font: .78rem "Geist Mono", ui-monospace, monospace; color: var(--suave); }
.ft-res b { display: block; font-weight: 500; color: #1a3ad8; font-size: 1.05rem; line-height: 1.3; }
.ft-res span { display: block; font-size: .9rem; color: var(--suave); line-height: 1.4; }
.ft-res--sua { background: #EEF1FF; box-shadow: inset 3px 0 0 var(--eletrico); }
.ft-res--cinza { filter: saturate(0); } .ft-res--cinza b { color: #9a9993; }
.ft-bloco--geo { background: #0D0D0F; color: #fff; }
.ft-bloco--geo::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -140px; bottom: -160px; border-radius: 50%; background: var(--violeta); filter: blur(80px); opacity: .55; animation: abreFlutuar1 14s ease-in-out infinite alternate; }
.ft-bloco--geo .ft-bloco__tag::before { background: var(--violeta); }
.ft-bloco--geo li { color: rgba(255,255,255,.7); }
.ft-cita { margin-top: 30px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.ft-cita p { margin: 0; color: rgba(255,255,255,.8); line-height: 1.5; }
.ft-cita b { color: #fff; font-weight: 600; }
.ft-cita__fonte { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: .82rem "Geist Mono", ui-monospace, monospace; color: #9DB0FF; }
.ft-cita__fonte::before { content: ""; width: 8px; height: 8px; background: var(--eletrico); }
.ft-ias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ft-ias span { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: .9rem; color: #fff; transition: background-color .3s, border-color .3s; }
.ft-ias span.on { background: rgba(138,61,255,.35); border-color: rgba(192,77,255,.7); }
.ft__nota { margin: 22px 0 0; color: var(--suave); font-size: .9rem; }
@media (max-width: 900px) { .ft__topo, .ft__grade { grid-template-columns: 1fr; } .ft__topo { gap: 18px; margin-bottom: 36px; } }
@media (prefers-reduced-motion: reduce) { .ft-bloco--geo::after { animation: none; } .ft-res { opacity: 1; transform: none; } }

/* Rodapé: contatos com ícone e links legais na base */
.rodape__grade { grid-template-columns: 1.4fr 1fr .9fr 1.3fr; }
.rodape__contato li > a, .rodape__contato li > span { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.rodape__contato svg { width: 18px; height: 18px; flex: none; color: #2D4BFF; }
.rodape__contato a:hover { color: #2D4BFF; }
.rodape__legal { display: inline-flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape__legal a { text-decoration: none; }
.rodape__legal a:hover { color: #2D4BFF; }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }

/* Início: Trabalhos em fundo claro, para separar da abertura escura */
.vitrine-real--clara { color: var(--suave); background: radial-gradient(55% 60% at 100% 0%, rgba(45,75,255,.10), transparent 70%), radial-gradient(45% 50% at 0% 100%, rgba(138,61,255,.08), transparent 70%), #F7F6F2; border-top: 1px solid var(--linha); }
.vitrine-real--clara::after { display: none; }
.vitrine-real--clara h2 { color: var(--tinta); }
.vitrine-real--clara .lead { color: var(--suave); }
.vitrine-real--clara .vitrine-real__numeros li { background: #fff; border-color: var(--linha); color: var(--suave); box-shadow: 0 8px 20px -16px rgba(13,13,15,.4); }
.vitrine-real--clara .vitrine-real__numeros strong { color: #2D4BFF; }
.vitrine-real--clara .obra { box-shadow: 0 30px 60px -34px rgba(13,13,15,.55), 0 0 0 1px rgba(13,13,15,.06); }
.vitrine-real--clara .btn--claro { background: #0D0D0F; color: #fff; }
.vitrine-real--clara .btn--contorno-claro { color: var(--tinta); border-color: var(--tinta); background: transparent; }

/* Compra: resumo do pedido e sinais de segurança */
.lado-compra { display: grid; gap: 16px; align-content: start; position: sticky; top: 110px; }
.lado-compra .card { padding: 24px; }
.resumo-compra__rotulo { margin: 0 0 4px; color: var(--suave); font-size: .9rem; }
.resumo-compra h3 { margin: 0 0 14px; font-size: 1.35rem; }
.resumo-compra__itens { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.resumo-compra__itens li { position: relative; padding-left: 26px; color: var(--texto, #2E2D2A); font-size: .98rem; }
.resumo-compra__itens li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border: 2px solid #2D4BFF; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.resumo-compra__prazo { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: 12px; background: #EEF1FF; color: #2D4BFF; font-weight: 600; font-size: .95rem; }
.resumo-compra__prazo svg { width: 18px; height: 18px; flex: none; }
.resumo-compra__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--linha); }
.resumo-compra__total strong { font-size: 1.4rem; color: var(--tinta); }
.seguranca h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.15rem; }
.seguranca h3 svg { width: 22px; height: 22px; color: #1A9E5C; }
.seguranca ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .94rem; color: var(--suave); line-height: 1.45; }
.seguranca strong { color: var(--tinta); }
.seguranca__meios { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.seguranca__meios span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--linha); background: #fff; font-size: .82rem; font-weight: 600; color: var(--tinta); }
.depois h3 { margin: 0 0 12px; font-size: 1.15rem; }
.depois ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--suave); font-size: .95rem; }
.form__rodape .btn svg { width: 18px; height: 18px; }
@media (max-width: 980px) { .lado-compra { position: static; } }

.plano__titulo--linha span { display: inline; }
.plano__subtitulo { margin: -8px 0 14px; color: var(--cor); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }

.cidade-uf { display: grid; grid-template-columns: 1fr 72px; gap: 8px; }
.cidade-uf input { min-width: 0; }
#uf { text-transform: uppercase; text-align: center; }

.resumo-compra__renova { margin: 0 0 14px; font-size: .9rem; line-height: 1.45; color: var(--suave); padding: 10px 12px; border-radius: 12px; background: #FFF7E6; border: 1px solid #F3DDB0; }
.resumo-compra__renova[hidden], [data-aceite-renova][hidden] { display: none; }
.resumo-compra__duvida { margin: 4px 4px 0; font-size: .92rem; color: var(--suave); }
.resumo-compra__duvida a { color: var(--tinta); font-weight: 600; text-decoration: underline; }

/* Faixa de confiança (abaixo da abertura e em Pacotes) */
.confianca { padding: 28px 0; border-block: 1px solid var(--linha); background: #fff; }
.confianca__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 18px 24px; }
.confianca__lista li { display: flex; align-items: flex-start; gap: 12px; color: var(--suave); font-size: .92rem; line-height: 1.35; }
.confianca__lista svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #2D4BFF; }
.confianca__lista b { display: block; color: var(--tinta); font-size: .98rem; font-weight: 600; }
/* Selos ao lado do botão de pagamento */
.selos-compra { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.selos-compra li { display: flex; gap: 10px; align-items: flex-start; color: var(--suave); font-size: .9rem; line-height: 1.45; }
.selos-compra svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #13804B; }

/* Avaliações */
.avaliacoes__grade { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.avaliacao { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.avaliacao__nota { margin: 0; color: #F5A524; letter-spacing: .12em; font-size: 1.1rem; }
.avaliacao blockquote { margin: 0; color: var(--tinta); line-height: 1.55; flex: 1; }
.avaliacao__quem { margin: 0; font-size: .92rem; color: var(--suave); }
.avaliacao__quem b { display: block; color: var(--tinta); }
.avaliacoes__cta { margin: 24px 0 0; }
.estrelas__op { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.estrelas__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas__op label { font-size: 2.2rem; line-height: 1; color: #D6D3CC; cursor: pointer; transition: color .15s; }
.estrelas__op input:checked ~ label, .estrelas__op label:hover, .estrelas__op label:hover ~ label { color: #F5A524; }
.estrelas__op input:focus-visible + label { outline: 2px solid #2D4BFF; outline-offset: 2px; border-radius: 4px; }

/* Blog */
.blog-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.post-cartao a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px; background: #fff; border: 1px solid var(--linha); border-radius: 18px; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.post-cartao a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(13,13,15,.35); }
.post-cartao__tema { font: 500 .78rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: #2D4BFF; }
.post-cartao h2 { font-size: 1.3rem; line-height: 1.25; margin: 0; }
.post-cartao p { margin: 0; color: var(--suave); line-height: 1.5; flex: 1; }
.post-cartao__data { font-size: .85rem; color: var(--suave); }
.post__largura { max-width: 760px; }
.post .cab-pagina h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 24ch; }
.post__trilha { font-size: .9rem; color: var(--suave); margin-bottom: 18px; }
.post__trilha a { color: inherit; }
.post__meta { font-size: .92rem; color: var(--suave); margin-top: 14px; }
.post__texto { font-size: 1.08rem; line-height: 1.75; color: var(--tinta); }
.post__texto h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin: 2.2em 0 .6em; }
.post__texto h3 { font-size: 1.2rem; margin: 1.8em 0 .5em; }
.post__texto p, .post__texto ul, .post__texto ol { margin: 0 0 1.1em; }
.post__texto li { margin-bottom: .45em; }
.post__texto a { color: #2D4BFF; }
.post__cta { margin: 48px 0 0; padding: 28px; border-radius: 18px; background: var(--nevoa); border: 1px solid var(--linha); }
.post__cta-titulo { font-size: 1.3rem; font-weight: 600; margin: 0 0 8px; }
.post__cta p { font-size: 1rem; }
.post__mais { margin-top: 40px; }
.post__mais p { font-weight: 600; margin-bottom: 8px; }

/* Aviso de cookies (só aparece com o Google Analytics configurado) */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 18px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(13,13,15,.4); font-size: .95rem; }
.cookies p { margin: 0; flex: 1 1 260px; color: var(--suave); line-height: 1.45; }
.cookies a { color: #2D4BFF; }
.cookies__botoes { display: flex; gap: 8px; }

/* =========================================================
   Blog visual: capas ilustradas, barra de leitura, sumário,
   passos numerados, cartões, avisos e resumo (scripts/montar-blog.py + capas_blog.py)
   ========================================================= */
.leitura { position: fixed; inset: 0 0 auto; height: 4px; z-index: 300; pointer-events: none; }
.leitura span { display: block; height: 100%; background: linear-gradient(90deg, #3A7BFF, #2D4BFF); transform: scaleX(0); transform-origin: left; }

.post__cab-grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.post__cab .cab-pagina__rotulo { display: inline-block; padding: 6px 12px; border-radius: 99px; background: #fff; color: #2D4BFF; }
.post .cab-pagina h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); max-width: 22ch; }
.post__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.post__meta svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .post__cab-grade { grid-template-columns: 1fr; } }

/* Capa */
.capa { position: relative; aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; background: #0D0D0F; box-shadow: 0 30px 70px -34px rgba(13,13,15,.55); isolation: isolate; }
.capa svg { width: 100%; height: 100%; }
.capa--cliente .capa__fundo { position: absolute; inset: 0; background: radial-gradient(70% 90% at 90% 0%, rgba(45,75,255,.7), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(58,123,255,.45), transparent 70%), #0D0D0F; }
.capa__janela { position: absolute; left: 9%; right: 9%; top: 13%; bottom: -6%; border-radius: 14px 14px 0 0; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
.capa__barra { display: flex; gap: 6px; padding: 9px 12px; background: #E4E3DF; }
.capa__barra i { width: 9px; height: 9px; border-radius: 50%; background: #D2D1CB; }
.capa__janela img { width: 100%; height: calc(100% - 27px); object-fit: cover; object-position: top; }
.capa__selo { position: absolute; left: 6%; bottom: 8%; padding: 8px 14px; border-radius: 99px; background: #fff; color: #0D0D0F; font-size: .82rem; font-weight: 500; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.capa__selo::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2D4BFF; }

/* Animações das capas (cada elemento usa --d para atrasar) */
@keyframes cvSurgir { from { opacity: 0; translate: 0 16px; } }
@keyframes cvFlutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes cvPular { 0%, 100% { translate: 0 0; } 40% { translate: 0 -14px; } 60% { translate: 0 0; } 70% { translate: 0 -4px; } }
@keyframes cvPulsar { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes cvOnda { from { scale: 1; opacity: .45; } to { scale: 1.8; opacity: 0; } }
@keyframes cvDigitar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cvPiscar { 50% { opacity: 0; } }
@keyframes cvSumir { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cvPonto { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -5px; } }
@keyframes cvBarra { from { scale: 0 1; } }
@keyframes cvTraco { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes cvEstrela { from { opacity: .15; scale: .4; } }
@keyframes cvBalanca { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@keyframes cvBrilho { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 1.12; opacity: .8; } }
.capa [class^="cv-"], .capa [class*=" cv-"] { transform-box: fill-box; transform-origin: center; }
.cv-entra, .cv-sobe { animation: cvSurgir .8s var(--ease-out) var(--d, 0ms) both; }
.cv-flutua { animation: cvSurgir .7s var(--ease-out) var(--d, 0ms) both, cvFlutuar 5s ease-in-out calc(var(--d, 0ms) + .7s) infinite; }
.cv-pula { animation: cvPular 2.2s var(--ease-out) .6s infinite; transform-origin: bottom; }
.cv-pulsa { animation: cvPulsar 2.4s ease-in-out infinite; }
.cv-onda { animation: cvOnda 2.4s ease-out infinite; }
.cv-digita { animation: cvDigitar 1.4s steps(22, end) .5s both; }
.cv-digita--longo { animation-duration: 1.8s; animation-timing-function: steps(17, end); }
.cv-cursor { animation: cvPiscar 1s steps(1) infinite; }
.cv-some { animation: cvSumir .9s ease var(--d, 0ms) both; }
.cv-ponto { animation: cvPonto 1s ease-in-out var(--d, 0ms) infinite; }
.cv-barra { animation: cvBarra 1s var(--ease-out) var(--d, 0ms) both; transform-origin: left center; }
.cv-traco { stroke-dasharray: 30; animation: cvTraco .6s var(--ease-out) var(--d, 0ms) both; }
.cv-estrela { animation: cvEstrela .5s var(--ease-out) calc(var(--d, 0ms) + .8s) both; }
.cv-moeda { animation: cvSurgir .5s var(--ease-out) var(--d, 0ms) both; }
.cv-balanca { animation: cvBalanca 4s ease-in-out infinite; transform-origin: top left; }
.cv-brilho { animation: cvBrilho 9s ease-in-out infinite; }
.cv-brilho--2 { animation-delay: -4s; }
.post-cartao:not(.visivel) .capa * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .capa *, .leitura span { animation: none !important; transition: none !important; } }

/* Sumário */
.post__corpo { padding-top: 40px; }
.post__indice { margin: 0 0 36px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--linha); }
.post__indice p { margin: 0 0 10px; font: 500 .78rem/1 var(--fonte-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.post__indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: ind; }
.post__indice li { margin: 0; }
.post__indice a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; background: var(--papel); color: var(--tinta); font-size: .92rem; line-height: 1.2; text-decoration: none; transition: background .2s, color .2s; }
.post__indice a::before { counter-increment: ind; content: counter(ind); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; font-size: .75rem; font-weight: 600; }
.post__indice a:hover, .post__indice a.ativo { background: #2D4BFF; color: #fff; }
.post__indice a.ativo::before, .post__indice a:hover::before { color: #2D4BFF; }
@media (min-width: 1280px) {
  .post__indice { float: left; position: sticky; top: 110px; width: 230px; margin: 0 0 0 -290px; padding: 18px; }
  .post__indice ol { flex-direction: column; }
  .post__indice a { display: flex; border-radius: 12px; }
}

/* Texto com blocos visuais */
.revelar--suave { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.revelar--suave.visivel { opacity: 1; translate: 0 0; }
html:not(.js) .revelar--suave { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .revelar--suave { opacity: 1; translate: none; transition: none; } }
.post__texto h2 { scroll-margin-top: 100px; }
.post__passo { display: flex; align-items: center; gap: 14px; }
.post__num { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #2D4BFF; color: #fff; font-size: 1.25rem; font-weight: 600; letter-spacing: 0; box-shadow: 0 12px 24px -12px rgba(45,75,255,.8); }
.post__cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 1.4em; }
.post__cards li { display: flex; gap: 12px; margin: 0; padding: 16px 18px; background: #fff; border: 1px solid var(--linha); border-radius: 16px; line-height: 1.45; transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease; }
.post__cards li:hover { transform: translateY(-3px); border-color: #2D4BFF; box-shadow: 0 16px 34px -22px rgba(45,75,255,.6); transition-delay: 0s; }
.post__cards svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 9px; background: rgba(45,75,255,.1); color: #2D4BFF; }
.post__cards strong { display: block; color: var(--tinta); font-weight: 600; margin-bottom: 2px; }
.post__cards span { font-size: .97rem; color: var(--suave); }
@media (max-width: 640px) { .post__cards { grid-template-columns: 1fr; } }
.post__evitar { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 0 1.4em; }
.post__evitar li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 18px; border-radius: 14px; background: #FDF1F0; border: 1px solid #F4D3CF; line-height: 1.45; }
.post__x { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--erro); margin-top: 1px; }
.post__x::before, .post__x::after { content: ""; position: absolute; left: 7px; top: 12px; width: 12px; height: 2px; border-radius: 2px; background: #fff; rotate: 45deg; }
.post__x::after { rotate: -45deg; }
.post__texto > ol { list-style: none; padding: 0; counter-reset: num; }
.post__texto > ol li { position: relative; padding-left: 44px; counter-increment: num; }
.post__texto > ol li::before { content: counter(num); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: .85rem; font-weight: 600; }
.post__texto > ul:not([class]) li::marker { color: #2D4BFF; }
.post__nota { display: flex; gap: 14px; margin: 1.6em 0; padding: 18px 20px; border-radius: 18px; background: rgba(45,75,255,.08); border: 1px solid rgba(45,75,255,.25); }
.post__nota svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #2D4BFF; color: #fff; }
.post__nota p { margin: 0; }
.post__nota .post__nota-rotulo { font: 500 .78rem/1.6 var(--fonte-mono); text-transform: uppercase; letter-spacing: .08em; color: #2D4BFF; }
.post__nota--atencao { background: #FFF6E5; border-color: #F5D9A3; }
.post__nota--atencao svg { background: #C77700; }
.post__nota--atencao .post__nota-rotulo { color: #9A5B00; }
.post__citacao { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 4px solid; border-image: linear-gradient(#3A7BFF, #2D4BFF) 1; }
.post__citacao p { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.6rem); line-height: 1.35; font-weight: 500; color: var(--tinta); letter-spacing: -.01em; }
.post__figura { margin: 1.8em 0; }
.post__figura img { border-radius: 18px; border: 1px solid var(--linha); }
.post__figura figcaption { margin-top: 8px; font-size: .9rem; color: var(--suave); text-align: center; }
.post__resumo { position: relative; overflow: hidden; margin: 2.6em 0 0; padding: clamp(24px, 4vw, 36px); border-radius: 24px; background: #0D0D0F; color: #E4E3DF; }
.post__resumo::before { content: ""; position: absolute; right: -20%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(45,75,255,.55), transparent); pointer-events: none; }
.post__resumo h2 { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 .5em; color: #fff; }
.post__resumo h2 svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #2D4BFF; color: #fff; }
.post__resumo p, .post__resumo li { position: relative; }
.post__resumo p:last-child { margin-bottom: 0; }
.post__resumo a { color: #9DB0FF; }

/* Lista do blog: filtros e cartões com capa */
.blog-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.blog-filtros button { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--linha); background: #fff; color: var(--tinta); font: 500 .95rem var(--fonte-texto); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.blog-filtros button:hover { border-color: var(--tinta); }
.blog-filtros button.ativo { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.post-cartao a { padding: 0; gap: 0; overflow: hidden; }
.post-cartao .capa { border-radius: 0; box-shadow: none; }
.post-cartao__texto { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.post-cartao .capa svg, .post-cartao .capa__janela { transition: scale .6s var(--ease-out); }
.post-cartao a:hover .capa svg, .post-cartao a:hover .capa__janela { scale: 1.04; }
.post-cartao[hidden] { display: none; }
.post-cartao { min-width: 0; }
@media (min-width: 900px) {
  .post-cartao--destaque { grid-column: 1 / -1; }
  .post-cartao--destaque a { flex-direction: row; }
  .post-cartao--destaque .capa { flex: 0 0 55%; }
  .post-cartao--destaque .post-cartao__texto { justify-content: center; padding: 36px; }
  .post-cartao--destaque h2 { font-size: 1.9rem; }
}
.post__mais { margin-top: 64px; }
.post__mais-titulo { font-size: 1.4rem; font-weight: 600; color: var(--tinta); margin: 0 0 18px; }
.post__passo--menor { font-size: 1.25rem; margin-top: 1.6em; }
.post__passo--menor .post__num { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; background: var(--tinta); box-shadow: none; }

/* Rodapé: formas de pagamento e segurança */
.rodape__confianca { display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 28px 40px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linha); }
.rodape__bloco h4 { margin-bottom: 14px; }
.rodape .rodape__pagto, .rodape .rodape__selos { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 16px; }
.rodape__pagto li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: .9rem; line-height: 1.3; }
.rodape__pagto b { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; color: var(--tinta); font-weight: 600; font-size: 1rem; }
.rodape__selos li { display: flex; align-items: flex-start; gap: 10px; flex: 1 1 190px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; font-size: .88rem; line-height: 1.35; }
.rodape__selos svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #2D4BFF; }
.rodape__selos b { display: block; color: var(--tinta); font-size: .95rem; font-weight: 600; }
@media (max-width: 860px) { .rodape__confianca { grid-template-columns: 1fr; } }

/* Página Quem somos */
.sobre { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.sobre__ficha { padding: 26px; border: 1px solid var(--linha); border-radius: var(--raio-lg); background: #fff; }
.sobre__ficha h3 { margin: 0 0 16px; font-size: 1.15rem; color: var(--tinta); }
.sobre__ficha ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sobre__ficha li { display: flex; align-items: flex-start; gap: 12px; color: var(--suave); font-size: .98rem; line-height: 1.4; }
.sobre__ficha svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: #2D4BFF; }
.sobre__ficha b { display: block; color: var(--tinta); font-weight: 600; }
@media (max-width: 860px) { .sobre { grid-template-columns: 1fr; } }
.rodape__pagto b svg { width: 22px; height: 22px; flex: none; }

/* Rodapé escuro */
.rodape { position: relative; background: var(--azul); border-top: 0; color: rgba(255,255,255,.68); padding: 88px 0 32px; }
.rodape::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gradiente); }
.rodape a { color: rgba(255,255,255,.86); }
.rodape a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rodape__logo { color: #fff; }
.rodape__logo:hover { text-decoration: none !important; }
.rodape h4 { color: #fff; font-family: var(--fonte-mono); font-weight: 400; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.rodape__grade > div:first-child p { max-width: 34ch; margin: 0 0 24px; }
.rodape__redes { display: flex; gap: 10px; }
.rodape .rodape__icone { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #fff; }
@media (hover: hover) and (pointer: fine) { .rodape .rodape__icone:hover { background: #2D4BFF; border-color: #2D4BFF; color: #fff; text-decoration: none; } }
.rodape__contato svg { color: #8EA0FF; }
.rodape__contato a:hover { color: #fff; }
.rodape__legal a:hover { color: #fff; }
.rodape__confianca { border-top-color: rgba(255,255,255,.12); margin-top: 56px; padding-top: 32px; }
.rodape__pagto b { background: #fff; border-color: #fff; color: var(--tinta); }
.rodape__pagto li { color: rgba(255,255,255,.6); }
.rodape__selos li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.62); }
.rodape__selos svg { color: #8EA0FF; }
.rodape__selos b { color: #fff; }
.rodape__base { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

/* Rodapé: preto grafite da marca com brilho azul e violeta, como as seções escuras do site */
.rodape { background: radial-gradient(120% 90% at 85% 0%, rgba(138,61,255,.28), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(45,75,255,.30), transparent 60%), #0D0D0F; }

/* Bandeiras aceitas no cartão */
.rodape .rodape__bandeiras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.rodape__bandeiras svg { display: block; width: 48px; height: 30px; border-radius: 5px; }

/* Quem somos: cartões, diferenciais, trabalhos e dados */
.sobre-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sobre-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px; border: 1px solid var(--linha); border-radius: var(--raio-lg); background: #fff; color: var(--suave); text-decoration: none; transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease; }
.sobre-card__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(45,75,255,.1); color: #2D4BFF; margin-bottom: 6px; }
.sobre-card__ico svg { width: 26px; height: 26px; }
.sobre-card h3 { margin: 0; font-size: 1.3rem; color: var(--tinta); }
.sobre-card p { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.sobre-card__mais { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: #2D4BFF; font-weight: 500; }
.sobre-card__mais svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sobre-card:hover { transform: translateY(-4px); border-color: #2D4BFF; box-shadow: 0 14px 34px rgba(45,75,255,.12); } .sobre-card:hover .sobre-card__mais svg { transform: translateX(4px); } }
.sobre-escuro { padding: clamp(64px, 8vw, 104px) 0; color: rgba(255,255,255,.78); background: radial-gradient(120% 90% at 85% 0%, rgba(138,61,255,.28), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(45,75,255,.30), transparent 60%), #0D0D0F; }
.sobre-escuro h2 { color: #fff; }
.sobre-dif { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sobre-dif li { padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--raio); background: rgba(255,255,255,.05); }
.sobre-dif svg { width: 30px; height: 30px; color: #8EA0FF; margin-bottom: 14px; }
.sobre-dif h3 { margin: 0 0 6px; color: #fff; font-size: 1.2rem; }
.sobre-dif p { margin: 0; font-size: 1rem; line-height: 1.5; }
.sobre-obras { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sobre-obras a { display: block; text-decoration: none; color: var(--tinta); }
.sobre-obra__img { display: block; overflow: hidden; border-radius: var(--raio); border: 1px solid var(--linha); background: #fff; aspect-ratio: 16 / 10; }
.sobre-obra__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .5s var(--ease-out); }
.sobre-obra__nome { display: block; margin-top: 10px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .sobre-obras a:hover .sobre-obra__img img { transform: scale(1.05); } }
.sobre-obras__mais { margin: 32px 0 0; text-align: center; max-width: none; }
.sobre-obras__mais svg { width: 16px; height: 16px; margin-left: 6px; }
.sobre-dados { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sobre-dados li { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px; border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; color: var(--suave); line-height: 1.4; }
.sobre-dados svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: #2D4BFF; }
.sobre-dados b { display: block; color: var(--tinta); font-weight: 600; }
@media (max-width: 960px) { .sobre-cards { grid-template-columns: repeat(2, 1fr); } .sobre-dif, .sobre-obras { grid-template-columns: repeat(2, 1fr); } .sobre-dados { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .sobre-cards, .sobre-dif, .sobre-obras { grid-template-columns: 1fr; } }

/* Quem somos: loja de referência */
.sobre-loja { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--linha); border-radius: var(--raio-lg); background: #fff; }
.sobre-loja__telas { position: relative; padding: 0 0 12% 0; }
.sobre-loja__tela { display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--linha); background: #fff; box-shadow: 0 18px 44px rgba(13,13,15,.16); }
.sobre-loja__tela img { display: block; width: 100%; height: auto; }
.sobre-loja__barra { display: flex; gap: 6px; padding: 10px 12px; background: #ECEBE7; border-bottom: 1px solid var(--linha); }
.sobre-loja__barra i { width: 9px; height: 9px; border-radius: 50%; background: #C9C8C2; }
.sobre-loja__tela--b { position: absolute; width: 56%; right: -2%; bottom: 0; box-shadow: 0 22px 50px rgba(13,13,15,.28); }
.sobre-loja__texto h3 { margin: 6px 0 10px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.sobre-loja__texto > p { margin: 0 0 18px; color: var(--suave); font-size: 1.08rem; line-height: 1.55; }
.sobre-loja__lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.sobre-loja__lista li { display: flex; align-items: flex-start; gap: 10px; color: var(--texto); }
.sobre-loja__lista svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #2D4BFF; }
.sobre-loja__texto .btn svg { width: 16px; height: 16px; margin-left: 6px; }
@media (max-width: 860px) { .sobre-loja { grid-template-columns: 1fr; } }
.sobre-obras__mais { max-width: none; margin-inline: 0; }

.sobre-obras { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sobre-loja__extra { margin: 16px 0 0; color: var(--suave); font-size: .98rem; }
.sobre-loja__extra a { color: #2D4BFF; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .sobre-obras { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sobre-obras { grid-template-columns: 1fr; } }

/* Etiquetas chamativas das formas de pagamento */
.rodape .rodape__pagto { gap: 16px 20px; }
.rodape__pagto li { gap: 8px; }
.etq { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: .82rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.etq svg { width: 14px; height: 14px; flex: none; }
.etq--verde { background: #22D493; color: #04271B; }
.etq--ambar { background: #FFC53D; color: #3A2900; }
.etq--azul { background: #5A73FF; color: #fff; }
.rodape .rodape__pagto { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
.rodape__pagto li { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.rodape__pagto b { min-width: 124px; }
.noturna a.btn--claro { color: #0D0D0F; }

/* Lepvi Hub: módulos do sistema de gestão */
.hub-mods { grid-column: 1 / -1; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.hub-mods__topo { max-width: 62ch; margin-bottom: 20px; }
.hub-mods__topo h4 { margin: 0 0 6px; color: #fff; font-size: 1.35rem; }
.hub-mods__topo p { margin: 0; color: rgba(255,255,255,.7); }
.hub-mods__topo a { color: var(--cor); text-decoration: underline; text-underline-offset: 3px; }
.hub-mods__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub-mod { padding: 20px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.04); }
.hub-mod h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #fff; font-size: 1.1rem; }
.hub-mod__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--cor) 22%, transparent); color: var(--cor); flex: none; }
.hub-mod__ico svg { width: 18px; height: 18px; }
.hub-mod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-mod li { position: relative; padding-left: 16px; color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.4; }
.hub-mod li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--cor); }
.hub-mods__extra { margin: 18px 0 0; padding: 14px 18px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 14%, transparent); color: rgba(255,255,255,.88); font-size: .98rem; }
@media (max-width: 1040px) { .hub-mods__grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .hub-mods__grade { grid-template-columns: 1fr; } }
.hub-mods__extra { max-width: none; }

/* Formas de pagamento: três cartões lado a lado */
.rodape .rodape__pagto { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.rodape__pagto li { flex: 1 1 150px; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.05); }
.rodape__pagto b { min-width: 0; padding: 0; border: 0; background: none; color: #fff; display: flex; align-items: center; gap: 10px; font-size: 1.12rem; }
.rodape__pagto b svg { width: 30px; height: 30px; padding: 5px; border-radius: 9px; background: #fff; color: var(--tinta); box-sizing: border-box; }
.rodape__pagto .etq { font-size: .78rem; padding: 5px 10px 5px 8px; box-shadow: none; }
.rodape__rotulo { margin: 20px 0 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.rodape .rodape__bandeiras { margin-top: 10px; }

/* Rodapé: pagamento e segurança em duas faixas de três cartões */
.rodape__confianca { grid-template-columns: 1fr; gap: 32px; }
.rodape .rodape__pagto, .rodape .rodape__selos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rodape__pagto li, .rodape__selos li { flex: none; }
.rodape__pagto .etq { white-space: normal; }
.rodape__confianca .rodape__bloco:first-child { display: grid; grid-template-columns: 1fr; }
.rodape__rotulo { margin-top: 22px; }
@media (max-width: 760px) { .rodape .rodape__pagto, .rodape .rodape__selos { grid-template-columns: 1fr; } }

/* Lepvi Hub compacto: módulos recolhidos, detalhe sob demanda */
.hub-det { margin-top: 4px; padding-top: 20px; }
.hub-det > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; }
.hub-det > summary::-webkit-details-marker { display: none; }
.hub-det__tit { grid-column: 1 / -1; color: #fff; font-weight: 600; font-size: 1.1rem; }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.88); font-size: .9rem; }
.hub-chip svg { width: 16px; height: 16px; color: var(--cor); flex: none; }
.hub-det__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cor) 55%, transparent); color: var(--cor); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.hub-det__btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out); transform: rotate(90deg); }
.hub-det[open] .hub-det__btn svg { transform: rotate(-90deg); }
.hub-det__fechar, .hub-det[open] .hub-det__abrir { display: none; }
.hub-det[open] .hub-det__fechar { display: inline; }
.hub-det[open] > summary { margin-bottom: 20px; }
.hub-det > summary:focus-visible { outline: 2px solid var(--cor); outline-offset: 6px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .hub-det > summary:hover .hub-det__btn { background: color-mix(in srgb, var(--cor) 16%, transparent); } }
@media (max-width: 640px) { .hub-det > summary { grid-template-columns: 1fr; } .hub-det__btn { justify-self: start; } }
.hub-det[open] .hub-chips { display: none; } .hub-det[open] .hub-det__tit { grid-column: 1; }

/* Rodapé: faixa enxuta de pagamento e segurança */
.rodape__faixa { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 56px; margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); }
.rodape__grupo h4 { margin-bottom: 14px; }
.rodape .rodape__logos { display: flex; flex-wrap: wrap; gap: 8px; }
.rodape__logos svg { display: block; height: 30px; width: auto; border-radius: 5px; }
.rodape .rodape__nota { margin: 12px 0 0; font-size: .88rem; color: rgba(255,255,255,.6); }
.rodape .rodape__garantias { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rodape__garantias li { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: .95rem; color: rgba(255,255,255,.78); }
.rodape__garantias svg { width: 18px; height: 18px; flex: none; color: #8EA0FF; }
@media (max-width: 760px) { .rodape__faixa { flex-direction: column; } }

/* Toque confortável no celular: alvos de pelo menos 44px */
@media (max-width: 860px), (pointer: coarse) {
  .rodape a:not(.rodape__icone):not(.rodape__logo) { display: inline-flex; align-items: center; min-height: 44px; }
  .rodape ul, .rodape .rodape__contato { gap: 0; }
  .rodape .rodape__legal { gap: 0 20px; }
  .rodape .rodape__logos { gap: 8px; }
  .rodape .rodape__garantias li { min-height: 0; }
  .topo__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .card__link, .mv__abrir, .pacotes__mais a { display: inline-flex; align-items: center; min-height: 44px; }
  .comparar-itens summary { display: flex; align-items: center; min-height: 44px; }
  .btn--seta, .hub-det > summary { min-height: 44px; }
}

/* =========================================================
   Blog: fotos reais, banner, faixa, mosaico, projetos, antes e depois, dispositivos
   ========================================================= */
@keyframes blogZoomSuave { from { scale: 1.12; } to { scale: 1; } }
@keyframes blogParalaxe { from { translate: 0 -7%; } to { translate: 0 7%; } }
@keyframes blogFlutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* Lista: cartões com foto */
.post-cartao__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #0D0D0F; }
.post-cartao__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,15,.25) 0%, transparent 40%, rgba(13,13,15,.35) 100%); pointer-events: none; }
.post-cartao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s var(--ease-out); }
.post-cartao a:hover .post-cartao__foto img { scale: 1.07; }
.post-cartao__chip { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 7px 12px; border-radius: 99px; background: rgba(13,13,15,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 500 .74rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.post-cartao__foto + .post-cartao__texto .post-cartao__tema { display: none; }
@media (min-width: 900px) { .post-cartao--destaque .post-cartao__foto { flex: 0 0 55%; aspect-ratio: auto; min-height: 340px; } }

/* Banner no topo do post */
.post__banner { margin-top: clamp(8px, 2vw, 24px); margin-bottom: 0; }
.post__banner-moldura { position: relative; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 26px; background: #0D0D0F; box-shadow: 0 34px 70px -36px rgba(13,13,15,.6); }
.post__banner-moldura img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; animation: blogZoomSuave 2.4s var(--ease-out) both; }
.post__banner-moldura::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 100% 0%, rgba(45,75,255,.22), transparent 60%), linear-gradient(180deg, transparent 55%, rgba(13,13,15,.35)); pointer-events: none; }
@media (max-width: 640px) { .post__banner-moldura { aspect-ratio: 4 / 3; border-radius: 20px; } }

/* Faixa: foto grande com frase */
.post__faixa { position: relative; margin: 2.2em 0; aspect-ratio: 16 / 8; min-height: 250px; overflow: hidden; border-radius: 24px; background: #0D0D0F; isolation: isolate; }
.post__faixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.15; cursor: zoom-in; border: 0; border-radius: 0; }
.post__faixa::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(13,13,15,0) 25%, rgba(13,13,15,.82) 100%), radial-gradient(70% 90% at 0% 100%, rgba(45,75,255,.5), transparent 70%); }
.post__faixa figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3.2vw, 36px); pointer-events: none; text-align: left; }
.post__faixa figcaption p { margin: 0; max-width: 26ch; color: #fff; font: 500 clamp(1.2rem, 2.8vw, 1.85rem)/1.22 var(--fonte-titulo); letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.post__faixa figcaption p::before { content: ""; display: block; width: 46px; height: 4px; margin-bottom: 14px; border-radius: 4px; background: var(--gradiente); }
@media (max-width: 640px) { .post__faixa { aspect-ratio: 4 / 5; border-radius: 20px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .post__faixa img { animation: blogParalaxe linear both; animation-timeline: view(); }
  }
}
.revelar.post__faixa:not(.visivel), .revelar.post__banner:not(.visivel) .post__banner-moldura { clip-path: inset(7% 4% round 28px); }
.post__faixa, .post__banner-moldura { clip-path: inset(0 round 24px); transition: clip-path 1s var(--ease-out), opacity .7s var(--ease-out), translate .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .post__faixa img, .post__banner-moldura img { animation: none; } .revelar.post__faixa:not(.visivel), .revelar.post__banner:not(.visivel) .post__banner-moldura { clip-path: none; } }

/* Mosaico de fotos */
.post__galeria { margin: 2.2em 0; }
.post .post__galeria ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.post .post__galeria li { margin: 0; padding: 0; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: #0D0D0F; }
.post .post__galeria li::before { content: none; }
.post__galeria img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; border: 0; border-radius: 0; transition: scale .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .post__galeria li:hover img { scale: 1.07; } }
@media (min-width: 640px) {
  .post .post__galeria--3 ul { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
  .post .post__galeria--3 li { aspect-ratio: auto; min-height: 180px; }
  .post .post__galeria--3 li:first-child { grid-row: 1 / 3; }
}
@media (max-width: 639px) {
  .post .post__galeria ul { grid-template-columns: 1fr 1fr; }
  .post .post__galeria li { aspect-ratio: 1 / 1; }
  .post .post__galeria li:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
.post__galeria figcaption, .post__comparar figcaption, .post__dispositivos figcaption { margin-top: 10px; font-size: .9rem; color: var(--suave); text-align: center; }

/* Projetos reais */
.post__projetos { position: relative; margin: 2.4em 0; padding: clamp(20px, 3vw, 30px); overflow: hidden; border-radius: 24px; color: #fff; background: radial-gradient(120% 90% at 90% 0%, rgba(138,61,255,.28), transparent 60%), radial-gradient(90% 80% at 0% 100%, rgba(45,75,255,.32), transparent 60%), #0D0D0F; }
.post__projetos-titulo { margin: 0 0 16px; font: 500 .78rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .1em; color: #A9B8FF; }
.post .post__projetos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post .post__projetos li { margin: 0; padding: 0; }
.post .post__projetos li::before { content: none; }
.post .post__projetos a { display: flex; flex-direction: column; gap: 6px; height: 100%; color: #fff; text-decoration: none; }
.post__projeto-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: #1b1b20; }
.post__projeto-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border: 0; border-radius: 0; transition: scale .7s var(--ease-out); }
.post__projeto-seg { margin-top: 6px; font-size: .78rem; color: #A9B8FF; letter-spacing: .02em; }
.post__projetos strong { font-size: 1.05rem; color: #fff; }
.post__projeto-ver { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; color: #A9B8FF; font-size: .92rem; }
.post__projeto-ver svg { width: 16px; height: 16px; transition: translate .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .post__projetos a:hover .post__projeto-img img { scale: 1.07; } .post__projetos a:hover .post__projeto-ver svg { translate: 4px 0; } }
@media (max-width: 720px) {
  .post .post__projetos ul { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(clamp(20px, 3vw, 30px) * -1); padding-inline: clamp(20px, 3vw, 30px); padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .post .post__projetos li { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Antes e depois */
.post__comparar { margin: 2.2em 0; }
.post__comparar-caixa { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; border: 1px solid var(--linha); background: #fff; box-shadow: 0 26px 60px -34px rgba(13,13,15,.5); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.post__comparar-caixa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border: 0; border-radius: 0; pointer-events: none; }
.post__comparar img.antes { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.post__comparar-caixa::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(13,13,15,.25), 0 0 20px rgba(0,0,0,.4); pointer-events: none; }
.post__comparar-rotulo { position: absolute; z-index: 2; top: 14px; padding: 7px 14px; border-radius: 99px; background: rgba(13,13,15,.8); color: #fff; font: 500 .8rem/1 var(--fonte-texto); letter-spacing: .04em; pointer-events: none; }
.post__comparar-rotulo--antes { left: 14px; }
.post__comparar-rotulo--depois { right: 14px; background: #2D4BFF; }
.post__comparar input[type=range] { position: absolute; z-index: 3; left: 4%; right: 4%; bottom: 14px; width: 92%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; }
.post__comparar input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(13,13,15,.2); }
.post__comparar input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.75); }
.post__comparar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -19px; border-radius: 50%; border: 3px solid #fff; background: #2D4BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 8px 24px -6px rgba(13,13,15,.6); }
.post__comparar input[type=range]::-moz-range-thumb { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff; background: #2D4BFF; box-shadow: 0 8px 24px -6px rgba(13,13,15,.6); }
.post__comparar input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* Site no computador e no celular */
.post__dispositivos { position: relative; margin: 2.4em 0; }
.post__tela--desktop { width: 90%; overflow: hidden; border-radius: 14px; border: 1px solid var(--linha); background: #fff; box-shadow: 0 30px 60px -32px rgba(13,13,15,.55); }
.post__tela-barra { display: flex; gap: 6px; padding: 10px 12px; background: #E4E3DF; }
.post__tela-barra i { width: 9px; height: 9px; border-radius: 50%; background: #C9C8C2; }
.post__tela img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.post__tela--celular { position: absolute; right: 0; top: 16%; width: 24%; overflow: hidden; border-radius: 22px; border: 6px solid #0D0D0F; background: #0D0D0F; box-shadow: 0 30px 60px -20px rgba(13,13,15,.7); animation: blogFlutua 6s ease-in-out infinite; }
.post__dispositivos figcaption { text-align: left; max-width: 90%; }
@media (prefers-reduced-motion: reduce) { .post__tela--celular { animation: none; } }
@media (max-width: 520px) { .post__tela--desktop { width: 100%; margin-bottom: 22%; } .post__tela--celular { width: 30%; top: 20%; bottom: auto; right: 8px; border-width: 4px; border-radius: 16px; } .post__dispositivos figcaption { max-width: none; } }

/* Ampliar foto ao clicar */
[data-amplia] { cursor: zoom-in; }
.ampliada { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 16px; background: rgba(13,13,15,.92); opacity: 0; transition: opacity .25s ease; }
.ampliada.aberta { opacity: 1; }
.ampliada img { max-width: min(1280px, 100%); max-height: 90vh; width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); scale: .96; transition: scale .3s var(--ease-out); }
.ampliada.aberta img { scale: 1; }
.ampliada button { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: #0D0D0F; font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* Opções de pagamento e período: bolinha própria, igual em todos os navegadores (no iPhone a nativa ficava grande e cobria o texto) */
.escolha__op { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.escolha__op input, .campo .escolha__op input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: 22px; margin: 1px 0 0; padding: 0; box-sizing: border-box; border: 2px solid #8C99AB; border-radius: 50%; background: #fff; display: grid; place-content: center; flex: none; cursor: pointer; transition: border-color .2s ease; }
.escolha__op input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); transform: scale(0); transition: transform .18s var(--ease-out); }
.escolha__op input:checked { border-color: var(--azul); }
.escolha__op input:checked::before { transform: scale(1); }
.escolha__op input:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 45%, transparent); outline-offset: 2px; }
.escolha__op strong { line-height: 1.3; }

/* =========================================================
   Celular: menos rolagem. Seções mais curtas, listas em carrossel
   deslizante (com a próxima peça aparecendo) e rodapé compacto.
   ========================================================= */
@media (max-width: 640px) {
  .secao { padding: 40px 0; }
  .secao__topo { margin-bottom: 22px; }
  .secao--cta-final { padding-top: 32px; }
  .cab-pagina { padding-block: 36px 28px; }

  /* Carrosséis: pacotes, projetos, cartões de serviços, diferenciais e trabalhos */
  .pacotes, .grade--3, .svc-grade, .sobre-cards, .sobre-dif, .sobre-obras {
    display: flex; gap: 12px; max-width: none; margin-inline: -16px; padding: 4px 16px 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pacotes::-webkit-scrollbar, .grade--3::-webkit-scrollbar, .svc-grade::-webkit-scrollbar, .sobre-cards::-webkit-scrollbar, .sobre-dif::-webkit-scrollbar, .sobre-obras::-webkit-scrollbar { display: none; }
  .pacotes > *, .grade--3 > *, .svc-grade > *, .sobre-cards > *, .sobre-dif > *, .sobre-obras > * { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .sobre-obras > * { flex-basis: 70%; }
  .sobre-card { padding: 22px; }

  /* Lista de serviços da página inicial: uma linha compacta por serviço */
  .lista-servicos a { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; padding: 16px 2px; }
  .lista-servicos .ico { width: 44px; height: 44px; border-radius: 12px; grid-row: span 2; }
  .lista-servicos .ico svg { width: 22px; height: 22px; }
  .lista-servicos h3 { font-size: 1.25rem; }
  .lista-servicos p { grid-column: 2; font-size: 1rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lista-servicos .ver { display: none; }

  /* SEO e GEO: sem as ilustrações decorativas */
  .ft-busca, .ft-cita { display: none; }
  .ft__grade { gap: 14px; }

  /* Passos */
  .passos { gap: 22px; }
  .passos li { padding-top: 22px; }
  .passos h3 { font-size: 1.25rem; }

  /* Lista do blog: foto mais baixa e resumo curto */
  .blog-lista { gap: 16px; }
  .post-cartao__foto { aspect-ratio: 16 / 9; }
  .post-cartao__texto { padding: 18px 18px 20px; gap: 8px; }
  .post-cartao p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* Rodapé compacto: os dois menus lado a lado */
  .rodape { padding: 44px 0 24px; }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .rodape__grade > div:first-child, .rodape__grade > div:last-child { grid-column: 1 / -1; }
  .rodape__grade > div:first-child p { margin-bottom: 16px; }
  .rodape__logo { font-size: 2.4rem; margin-bottom: 14px; }
  .rodape h4 { margin-bottom: 6px; }
  .rodape__faixa { margin-top: 24px; padding-top: 22px; gap: 22px; }
  .rodape__base { margin-top: 28px; padding-top: 20px; }
}
@media (max-width: 640px) {
  .passos { display: flex; gap: 14px; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .passos::-webkit-scrollbar { display: none; }
  .passos li { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }
  .plano__arte { display: none; }
}

.resumo-compra__extra { margin: 8px 0 0; text-align: right; color: var(--suave); font-size: .92rem; }
.resumo-compra__extra[hidden] { display: none; }

/* Compra: opções em cartões (período e forma de pagamento) */
.opcoes { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.opcoes[hidden] { display: none; }
.opcoes legend { font-weight: 600; font-size: 1.0938rem; color: var(--tinta); margin-bottom: 10px; padding: 0; }
.opcoes--meio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcoes .campo__erro { grid-column: 1 / -1; }
.opcao { position: relative; display: block; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcao__corpo { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 14px 13px; border: 1.5px solid #CAD3DF; border-radius: 14px; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.opcao:hover .opcao__corpo { border-color: #8C99AB; }
.opcao input:checked + .opcao__corpo { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); background: #fff; }
.opcao input:focus-visible + .opcao__corpo { outline: 3px solid color-mix(in srgb, var(--verde) 45%, transparent); outline-offset: 2px; }
.opcao__corpo::after { content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CAD3DF; background: #fff center / 12px no-repeat; transition: background-color .18s ease, border-color .18s ease; }
.opcao input:checked + .opcao__corpo::after { border-color: var(--tinta); background-color: var(--tinta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.opcao__corpo strong { font-size: 1rem; line-height: 1.3; color: var(--tinta); padding-right: 26px; }
.opcao__corpo b { font-size: 1.35rem; line-height: 1.2; font-weight: 600; color: var(--tinta); letter-spacing: -.01em; }
.opcao__corpo small { font-size: .86rem; line-height: 1.35; color: var(--suave); }
.opcao__selo { align-self: flex-start; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; background: var(--verde); color: #fff; font-size: .72rem; font-style: normal; font-weight: 600; letter-spacing: .02em; }
.opcao__icone { width: 26px; height: 26px; margin-bottom: 8px; color: var(--tinta); }
.opcoes--meio .opcao__corpo { align-items: flex-start; }
@media (max-width: 480px) { .opcoes--meio .opcao__corpo { padding: 12px 10px; } .opcoes--meio .opcao__corpo strong { padding-right: 0; } .opcoes--meio .opcao__corpo::after { top: 8px; right: 8px; width: 16px; height: 16px; background-size: 10px; } .opcao__corpo b { font-size: 1.2rem; } }
/* Resumo da compra: respiro entre prazo, aviso de renovação e total */
.resumo-compra .resumo-compra__prazo { margin: 0 0 12px; }
.resumo-compra .resumo-compra__renova { margin: 0 0 20px; padding: 12px 14px; line-height: 1.5; }
.resumo-compra .resumo-compra__total { padding-top: 18px; }

.opcoes--dominio .opcao__corpo { padding: 12px 14px; }

/* Destaque dentro da lista de um pacote (ex.: postagens automáticas no Lepvi Hub) */
.plano__lista li.plano__destaque { grid-column: 1 / -1; padding: 10px 14px 10px 30px; border-radius: 12px; background: color-mix(in srgb, var(--cor) 16%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); color: #fff; }
.plano__lista li.plano__destaque::before { left: 12px; top: 1.05em; }

/* ---------- Ajustes de celular (até 640px): botões inteiros, fatos em linha, espaço para a barra fixa ---------- */
@media (max-width: 640px) {
  body { padding-bottom: 92px; }
  .acoes { flex-direction: column; align-items: stretch; gap: 10px; }
  .acoes > .btn, .acoes > a { width: 100%; justify-content: center; text-align: center; }
  .cab-pagina__fatos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 16px; margin-top: 24px; }
  .cab-pagina__fatos li { font-size: .82rem; line-height: 1.25; gap: 2px; }
  .cab-pagina__fatos strong { font-size: 1.35rem; }
  .cta { padding: 34px 22px; border-radius: 22px; }
  .cta h2 { font-size: clamp(1.7rem, 7.4vw, 2.1rem); line-height: 1.12; }
  .cta .acoes { margin-top: 20px; }
  .hero__notas { gap: 8px 14px; }
  form button[type="submit"].btn { width: 100%; justify-content: center; }
}

/* O que acontece depois da compra */
.resumo-compra__depois { margin: 0 0 16px; }
.resumo-compra__depois ol { counter-reset: p; list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.resumo-compra__depois li { counter-increment: p; position: relative; padding-left: 34px; font-size: .94rem; line-height: 1.45; color: var(--texto); }
.resumo-compra__depois li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: #fff; font: 700 .8rem/24px var(--fonte-titulo); text-align: center; }
.pacote__depois { margin: 0 0 14px; border-top: 1px solid var(--linha); padding-top: 12px; }
.pacote__depois summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.pacote__depois ol { counter-reset: p; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.pacote__depois li { counter-increment: p; position: relative; padding-left: 34px; font-size: .95rem; line-height: 1.45; }
.pacote__depois li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--tinta); color: #fff; font: 700 .8rem/24px var(--fonte-titulo); text-align: center; }

/* Lepvi Hub: formas de pagamento em destaque e escolha de loja física/virtual */
.plano__nota--curta { min-height: 0; margin-bottom: 14px; }
.pagamento-destaque { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.pagamento-destaque__item { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.pagamento-destaque__item--forte { border-color: #6A80FF; background: rgba(45,75,255,.18); }
.pagamento-destaque__item strong { color: #fff; font: 800 1.25rem/1.2 var(--fonte-titulo); letter-spacing: -.01em; }
.pagamento-destaque__item small { color: rgba(255,255,255,.7); font-size: .92rem; }
.pagamento-destaque__selo { justify-self: start; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 99px; background: #2D4BFF; color: #fff; }
.pagamento-destaque__selo--verde { background: #1FAF55; }
.canal-hub { border: 0; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.canal-hub legend { padding: 0; margin-bottom: 8px; color: #fff; font-weight: 700; }
.canal-hub label { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); color: #fff; cursor: pointer; }
.canal-hub input { width: 20px; height: 20px; accent-color: #6A80FF; flex: none; }
.canal-hub label:has(input:checked) { border-color: #6A80FF; background: rgba(45,75,255,.2); }
.canal-hub input:focus-visible { outline: 3px solid #8FA2FF; outline-offset: 2px; }

/* Planos: o passo a passo da loja fica abaixo dos cartões, em largura total, para os três cartões terem alturas parecidas */
.pacote__depois--largo { max-width: 760px; margin: 22px auto 0; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 6px 22px 14px; }
.pacote__depois--largo summary { min-height: 48px; }

/* Cartão do Hub: acesso imediato em destaque e menos espaço vazio */
.acesso-imediato { margin-top: auto; padding-top: 18px; }
.acesso-imediato { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.plano--maximo .plano__lista + .acesso-imediato { margin-top: 22px; }
.acesso-imediato svg { width: 26px; height: 26px; color: #6A80FF; margin-top: 2px; }
.acesso-imediato div { padding: 14px 16px; border-radius: 14px; border: 1px solid #6A80FF; background: rgba(45,75,255,.16); }
.acesso-imediato strong { display: block; color: #fff; font: 800 1.1rem/1.2 var(--fonte-titulo); }
.acesso-imediato p { margin: 4px 0 0; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.45; }
@media (min-width: 1041px) {
  .plano--maximo .plano-max__info { height: 100%; }
  .plano--maximo .acesso-imediato { margin-top: auto; }
  .pagamento-destaque { grid-template-columns: 1fr 1fr; }
  .pagamento-destaque__item strong { font-size: 1.1rem; }
  .canal-hub label { min-height: 40px; }
}

/* O que é uma landing page (planos) */
.explica-lp { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: clamp(20px, 3vw, 32px); margin-bottom: clamp(24px, 3vw, 40px); }
.explica-lp h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 16px; }
.explica-lp__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; }
.explica-lp h3 { font-size: 1rem; margin-bottom: 6px; color: #2D4BFF; }
.explica-lp p { margin: 0; }
@media (max-width: 800px) { .explica-lp__grade { grid-template-columns: 1fr; } }

.explica-lp__nota { margin-top: 10px; font-size: .95rem; color: var(--suave, #5A5954); }

/* Planos do Hub: dois cartões pequenos lado a lado, como em Pacotes */
.planos-grade:has(.plano--maximo) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; gap: 22px; }
.plano--maximo { grid-column: auto; display: flex; flex-direction: column; gap: 0; padding: 26px 24px 24px; border-radius: 22px; }
.plano--maximo .plano-max__info, .plano--maximo .plano-max__lado { display: contents; }
.plano--maximo .plano__selo { left: 24px; }
.plano--maximo .plano__topo { margin-bottom: 14px; }
.plano--maximo .plano__ico { width: 38px; height: 38px; border-radius: 11px; }
.plano--maximo .plano__titulo { font-size: 1.7rem; margin-bottom: 8px; }
.plano--maximo .plano__subtitulo { margin: 0 0 12px; font-size: .95rem; }
.plano--maximo .plano__desc, .plano--maximo .acesso-imediato, .plano--maximo .plano__arte { display: none; }
.plano--maximo .plano__lista { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
.plano--maximo .plano__lista li { font-size: .95rem; }
.plano--maximo .plano__rotulo { margin: auto 0 4px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.plano--maximo .plano__preco strong { font-size: 1.6rem; }
.plano--maximo .plano__nota { font-size: .86rem; line-height: 1.5; margin-bottom: 14px; }
.plano--maximo .pagamento-destaque { display: none; }
.plano--maximo .canal-hub { margin-bottom: 14px; gap: 6px; }
.plano--maximo .canal-hub legend { font-size: .9rem; margin-bottom: 6px; }
.plano--maximo .canal-hub label { min-height: 42px; font-size: .92rem; }
.plano--maximo .plano__btn { min-height: 50px; font-size: 1rem; }
.hub-det--fora { max-width: 960px; margin: 22px auto 0; padding: 18px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.03); }
@media (max-width: 760px) { .planos-grade:has(.plano--maximo) { grid-template-columns: 1fr; max-width: 520px; } }

/* Preço por mês nos pacotes: total do ano em letra menor, abaixo. */
.pacote .pacote__total { font: 400 .9rem/1.4 var(--fonte-texto); font-style: normal; color: var(--suave); margin-top: 2px; }
.pacote .pacote__total span { font-weight: 600; }
.pacote--destaque .pacote__total { color: rgba(255,255,255,.7); }

/* Um só plano de sistema: card centralizado */
.planos-grade:has(.plano--maximo:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* Lepvi Hub: oferta única, curta e direta */
.hub-rotulo { display: inline-block; margin: 0 0 12px; padding: 5px 14px; border-radius: 999px; background: rgba(74,91,255,.16); color: #A9B3FF; font: 600 .85rem var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; }
.hub-oferta { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; max-width: 1040px; margin: 8px auto 0; position: relative; z-index: 1; }
.hub-oferta__itens, .hub-oferta__preco { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 28px; }
.hub-oferta__preco { border-color: rgba(74,91,255,.55); background: linear-gradient(180deg, rgba(45,75,255,.16), rgba(255,255,255,.03)); box-shadow: 0 30px 80px -40px rgba(45,75,255,.7); }
.hub-beneficios { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.hub-beneficios li { display: flex; gap: 12px; align-items: flex-start; }
.hub-beneficios svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(74,91,255,.2); color: #B7C0FF; stroke: currentColor; fill: none; }
.hub-beneficios strong { display: block; color: #fff; font-size: 1.02rem; line-height: 1.25; }
.hub-beneficios span { display: block; color: rgba(255,255,255,.66); font-size: .92rem; line-height: 1.45; margin-top: 2px; }
.hub-selos { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; gap: 10px; }
.hub-selos li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.07); color: #fff; font-size: .9rem; }
.hub-selos svg { width: 16px; height: 16px; fill: currentColor; color: #8FA0FF; }
.hub-oferta__selo { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #2D4BFF; color: #fff; font-size: .82rem; font-weight: 600; }
.hub-oferta__valor { margin: 14px 0 0; color: #fff; font: 700 clamp(2.8rem, 6vw, 3.6rem)/1 var(--fonte-titulo, inherit); display: flex; align-items: baseline; gap: 6px; max-width: none; }
.hub-oferta__valor small { font-size: 1.2rem; font-weight: 600; opacity: .8; }
.hub-oferta__valor span { font-size: 1.1rem; font-weight: 500; opacity: .7; }
.hub-oferta__dia { margin: 8px 0 18px; color: #B7C0FF; font-weight: 600; max-width: none; }
.hub-oferta__pontos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.hub-oferta__pontos li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.4; }
.hub-oferta__pontos svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #6FE3A3; stroke: currentColor; fill: none; }
.hub-oferta .canal-hub { margin-bottom: 14px; }
.hub-oferta__btn { display: flex; justify-content: center; width: 100%; min-height: 54px; font-size: 1.05rem; }
.hub-oferta__alt { margin: 14px 0 0; color: rgba(255,255,255,.62); font-size: .9rem; line-height: 1.5; max-width: none; }
.hub-oferta__alt strong { color: #fff; }
.hub-oferta__alt a { color: #B7C0FF; }
@media (max-width: 900px) { .hub-oferta { grid-template-columns: minmax(0, 1fr); } .hub-oferta__preco { order: -1; } }
@media (max-width: 560px) { .hub-oferta__itens, .hub-oferta__preco { padding: 22px 18px; border-radius: 18px; } .hub-beneficios { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.hub-oferta__btn { background: #2D4BFF !important; color: #fff !important; border: 0 !important; border-radius: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 14px 34px -14px rgba(45,75,255,.9); transition: transform .14s var(--ease-out), filter .2s ease; }
@media (hover: hover) and (pointer: fine) { .hub-oferta__btn:hover { filter: brightness(1.1); transform: translateY(-1px); } }
.hub-oferta__btn:active { transform: scale(.98); }
.hub-oferta__itens { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.hub-oferta__itens .hub-beneficios { margin-bottom: 0; flex: 1; align-content: space-around; }

/* ---------- Lepvi Hub por dentro: telas ilustrativas ---------- */
.hub-telas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.hub-tela__item h3 { font-size: 1.25rem; margin: 18px 0 6px; }
.hub-tela__item p { color: var(--suave); margin: 0; }
.janela { background: #fff; border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(13,13,15,.35); overflow: hidden; height: 340px; display: flex; flex-direction: column; }
.janela__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--nevoa); border-bottom: 1px solid var(--linha); font-size: .8rem; color: var(--suave); }
.janela__barra i { width: 9px; height: 9px; border-radius: 50%; background: #c9c8c2; }
.janela__barra span { margin-left: 8px; font-weight: 500; color: var(--tinta); }
.janela__corpo { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.jn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jn-cards div { background: var(--papel); border-radius: 10px; padding: 9px 10px; display: grid; gap: 2px; min-width: 0; }
.jn-cards small { font-size: .68rem; color: var(--suave); }
.jn-cards strong { font-size: .95rem; color: var(--tinta); font-weight: 600; white-space: nowrap; }
.jn-cards em { font-style: normal; font-size: .68rem; color: var(--suave); }
.jn-cards em.sobe { color: var(--sucesso); font-weight: 600; }
.jn-grafico { flex: none; height: 130px; display: flex; align-items: flex-end; gap: 8px; margin-top: auto; }
.jn-grafico i { flex: 1; height: var(--h); background: var(--gradiente); border-radius: 5px 5px 0 0; opacity: .9; }
.jn-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jn-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: var(--papel); border-radius: 10px; font-size: .88rem; color: var(--tinta); }
.jn-lista li span { display: grid; }
.jn-lista small { font-size: .7rem; color: var(--suave); }
.jn-lista b { font-weight: 600; white-space: nowrap; }
.jn-lista b.paga { color: var(--erro); }
.jn-lista b.recebe { color: var(--sucesso); }
.jn-total { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jn-total small { color: var(--suave); }
.jn-total strong { font-size: 1.3rem; color: var(--tinta); margin-right: auto; }
.jn-btn { background: var(--verde); color: #fff; padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 500; }
.hub-ajuda { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hub-ajuda li { border-top: 3px solid var(--verde); padding-top: 14px; display: grid; gap: 4px; }
.hub-ajuda strong { font-size: 1.1rem; color: var(--tinta); font-weight: 500; }
.hub-ajuda span { color: var(--suave); }
.hub-tela__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; margin: 44px 0 0; }
@media (max-width: 900px) { .hub-telas, .hub-ajuda { grid-template-columns: 1fr; } .janela { height: auto; min-height: 230px; } }

/* Comparativo dos pacotes no celular: cada item vira um cartão com os três pacotes lado a lado, sem rolar para o lado */
@media (max-width: 700px) {
  .comparativo, .comparativo tbody { display: block; width: 100%; min-width: 0 !important; }
  .comparativo thead { display: none; }
  .comparativo tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
  .comparativo tr > th[scope="row"] { grid-column: 1 / -1; text-align: left; font-size: 1rem; padding: 0 0 4px; border: 0; }
  .comparativo td { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; text-align: center; padding: 8px 4px; border: 0; background: var(--papel); border-radius: 10px; font-size: .86rem; min-width: 0; overflow-wrap: anywhere; }
  .comparativo td::before { content: attr(data-label); font-size: .72rem; font-weight: 600; color: var(--suave); overflow-wrap: normal; }
  .comparativo td svg { width: 20px; height: 20px; color: var(--verde); }
}

/* Fundadores (Quem somos) */
.fundadores { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fundador { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linha); border-radius: var(--raio-lg); background: #fff; transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease; }
.fundador__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nevoa); }
.fundador__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform .6s var(--ease-out); }
.fundador__corpo { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 26px; }
.fundador__cargo { font-family: var(--fonte-mono); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: #2D4BFF; }
.fundador h3 { margin: 0; font-size: 1.5rem; color: var(--tinta); }
.fundador p { margin: 0; color: var(--suave); line-height: 1.55; }
.fundador__selos { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fundador__selos li { padding: 6px 12px; border-radius: 999px; background: rgba(45,75,255,.08); color: #2D4BFF; font-size: .86rem; font-weight: 500; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) { .fundador:hover { transform: translateY(-4px); border-color: #2D4BFF; box-shadow: 0 16px 38px rgba(45,75,255,.14); } .fundador:hover .fundador__foto img { transform: scale(1.04); } }
@media (max-width: 960px) { .fundadores { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .fundador, .fundador__foto img { transition: none; } }
.fundador__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #2D4BFF; font-weight: 500; text-decoration: none; }
.fundador__link svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .fundador__link:hover { text-decoration: underline; } }
/* Cartões dos fundadores com a mesma altura: o corpo ocupa o espaço e o link fica no rodapé */
.fundador__corpo { flex: 1; }
.fundador__selos { margin-top: auto; padding-top: 10px; }
.fundador__selos + .fundador__link { margin-top: 14px; }

/* Segmentos que atendemos (início) */
.segs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.seg { position: relative; background: #fff; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 20px 20px 22px; }
.seg h3 { margin: 0 0 6px; font-size: 1.15rem; }
.seg p { margin: 0; color: var(--suave); font-size: 1rem; line-height: 1.5; }
.seg__tag { display: inline-block; margin-top: 12px; padding: 3px 10px; border-radius: 999px; background: #EEF1FF; color: var(--verde-texto); font-size: .82rem; font-weight: 600; }
.segs__nota { margin: 18px 0 0; color: var(--suave); font-size: .95rem; }

/* Agende sua demonstração (início) */
.demo { background: var(--azul); color: #F2F1EE; }
.demo__grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.demo__etiqueta { margin: 0 0 10px; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: #93A4FF; }
.demo h2 { color: #fff; }
.demo .lead { color: #C9C8C2; }
.demo__lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.demo__lista li { display: flex; align-items: center; gap: 12px; }
.demo__lista svg { flex: none; width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: rgba(45,75,255,.25); color: #fff; stroke: currentColor; fill: none; }
.demo__form { background: #1A1A1D; border: 1px solid #2E2E33; border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.demo__form h3 { margin: 0 0 14px; color: #fff; font-size: 1.4rem; }
.demo__passo { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: .8rem; letter-spacing: .12em; font-weight: 700; color: #93A4FF; }
.demo__barra { flex: 1; height: 3px; background: #2E2E33; border-radius: 3px; overflow: hidden; }
.demo__barra i { display: block; height: 100%; width: 50%; background: var(--verde); transition: width .3s ease; }
.demo__etapa { display: grid; gap: 16px; }
.demo__etapa[hidden] { display: none; }
.demo__form label { color: #E4E3DF; font-weight: 600; }
.demo__form .aceite-texto { color: #A9A8A2; font-size: .9rem; margin: 0; }
.demo__form .aceite-texto a { color: #93A4FF; }
.demo__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.demo__acoes .btn { flex: 1 1 140px; }
.demo__form .btn--secundario { color: #fff; border-color: #55555C; background: transparent; }
@media (max-width: 860px) { .demo__grade { grid-template-columns: 1fr; } }
.demo__form .btn--primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.demo__form .btn--primario:hover { background: #4A5BFF; border-color: #4A5BFF; }
.demo__form input, .demo__form select { color: #0D0D0F; }