/* DigiPro Ads — site de vendas em vidro fosco sobre degradê azul/ciano.
   Tinta teal-escura, teal da logo, caneta vermelha de revisão só no raio-x. */
:root {
  --fundo: #f4fafc;
  --linha: rgba(14, 39, 38, .12);
  --tinta: #0e2726;
  --texto: #34494a;
  --teal: #52bebc;
  --ciano: #00c8ff;
  --teal-forte: #0a7a75;
  --teal-forte-hover: #07605c;
  --caneta: #e0352b;
  --vidro: rgba(255, 255, 255, .58);
  --vidro-borda: rgba(255, 255, 255, .82);
  --largura: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 400 1.125rem/1.6 'Outfit', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Degradê fixo por trás de tudo: o vidro dos blocos desfoca ele ao rolar */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 44% at 6% 4%, rgba(0, 200, 255, .42), transparent 70%),
    radial-gradient(44% 42% at 97% 12%, rgba(82, 190, 188, .50), transparent 70%),
    radial-gradient(54% 48% at 80% 74%, rgba(37, 120, 235, .30), transparent 72%),
    radial-gradient(44% 42% at 4% 90%, rgba(0, 230, 200, .26), transparent 70%),
    linear-gradient(180deg, #f2fafd 0%, #e4f0f6 100%);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-forte); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; border-radius: 8px; }
strong { color: var(--tinta); font-weight: 600; }

h1, h2, h3 { font-family: 'Manrope', system-ui, sans-serif; color: var(--tinta); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.5rem, 5.3vw, 4.75rem); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.06; letter-spacing: -0.03em; max-width: 24ch; }
h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.bloco { padding: 96px 0; }
.lead { margin-top: 24px; display: grid; gap: 16px; max-width: 68ch; font-size: 1.15rem; }

/* Vidro fosco (estilo Apple) */
.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--vidro-borda);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 60px -38px rgba(14, 39, 38, .42);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro, .topo { background: rgba(255, 255, 255, .92); }
}

/* ───────── botões ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 800 1.05rem/1 'Manrope', sans-serif; letter-spacing: -0.01em;
  text-decoration: none; color: #fff; background: var(--teal-forte);
  padding: 19px 26px; border-radius: 14px; border: 2px solid var(--teal-forte);
  box-shadow: 0 12px 26px -14px rgba(10, 122, 117, .8);
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--teal-forte-hover); border-color: var(--teal-forte-hover); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-linha { background: rgba(255,255,255,.5); color: var(--tinta); border-color: rgba(14,39,38,.85); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn-linha:hover { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.btn-claro { background: #fff; color: var(--tinta); border-color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 200, 255, .7); }
.btn-claro:hover { background: #e3fbfb; border-color: #e3fbfb; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ───────── topo ───────── */
.topo { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  border-bottom: 1px solid rgba(255,255,255,.75); box-shadow: 0 10px 30px -24px rgba(14,39,38,.4); }
.topo .wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.35rem/1 'Manrope', sans-serif; letter-spacing: -0.03em; color: var(--tinta); }
.marca img { width: 30px; height: auto; }
.marca em { font-style: normal; color: var(--teal-forte); }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: 1rem; }
.menu a:hover { color: var(--teal-forte); }
.topo .btn { padding: 13px 18px; font-size: .95rem; box-shadow: none; }

/* ───────── hero ───────── */
.hero { padding: 128px 0 112px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero .sub { margin-top: 28px; font-size: 1.25rem; max-width: 40ch; }
.migalha { font-size: .95rem; margin-bottom: 20px; }
.migalha a { color: var(--texto); }

/* Raio-x: site antigo corrigido à caneta. Tudo escala pela largura do quadro (cqw) */
.raiox { position: relative; margin: 0; aspect-ratio: 60 / 46; container-type: inline-size; }
.janela { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: #fbfbfb;
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 0 0 6px rgba(255,255,255,.45), 0 40px 80px -36px rgba(14,39,38,.5); }
.janela-barra { height: 9%; background: #e6ebeb; display: flex; align-items: center; gap: 1cqw; padding: 0 3%; }
.janela-barra i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #c3cccc; }
.janela-url { margin-left: 2cqw; flex: 1; height: 54%; border-radius: 1cqw; background: #fff; font: 500 2.1cqw/1 'Outfit', sans-serif;
  color: #7a8a8a; display: flex; align-items: center; gap: 1.2cqw; padding-left: 1.4cqw; }
.girando { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; border: .4cqw solid #d3dbdb; border-top-color: #788b8c; animation: gira 1s linear infinite; }
.carregando { height: .9%; background: #e4eaea; position: relative; }
.carregando span { position: absolute; inset: 0 auto 0 0; width: 34%; background: #8fa6a8; }
.velho { height: 90.1%; display: grid; grid-template-rows: 13% 39% 30% 18%; font-family: Georgia, 'Times New Roman', serif; color: #6d6d6d; }
.velho-topo { background: #d9d9d9; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; font-size: 1.75cqw; white-space: nowrap; }
.velho-topo b { font-size: 2.6cqw; color: #555; }
.velho-banner { background: linear-gradient(135deg, #b9c6cc, #d6dde0); display: flex; flex-direction: column; justify-content: center; padding: 0 7%; }
.velho-banner b { font-size: 4.3cqw; color: #4d585c; font-weight: 400; }
.velho-banner small { font-size: 1.9cqw; margin-top: 1cqw; }
.velho-caixas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; padding: 4% 5%; }
.velho-caixas span { background: #ececec; border: 1px solid #dedede; }
.velho-rodape { background: #cfcfcf; display: flex; align-items: center; padding: 0 5%; font-size: 1.8cqw; }

.raiox svg.marcas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marcas path { fill: none; stroke: var(--caneta); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 900; stroke-dashoffset: 900; animation: traco .65s ease-out forwards; }
.marcas path.tracejado { stroke-dasharray: 7 7; stroke-dashoffset: 0; opacity: 0; animation: surge .4s ease-out forwards; }
.nota { position: absolute; font: 700 clamp(.95rem, 4.3cqw, 1.6rem)/1.05 'Caveat', cursive; color: var(--caneta); white-space: nowrap;
  opacity: 0; animation: surge .35s ease-out forwards; }
.relogio { width: .95em; height: .95em; vertical-align: -.14em; margin-right: .22em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.n-velocidade { left: 11%; top: -11%; transform: rotate(-2deg); }
.n-titulo { right: 3%; top: 37%; transform: rotate(-3deg); }
.n-contato { right: 0; bottom: -10%; transform: rotate(2deg); }
.n-rodape { left: 4%; bottom: -9%; transform: rotate(-3deg); }
.m1 { animation-delay: .5s; } .n-velocidade { animation-delay: .9s; }
.m2 { animation-delay: 1.1s; } .n-titulo { animation-delay: 1.5s; }
.marcas .m3 { animation-delay: 1.7s; } .m3b { animation-delay: 1.9s; } .n-contato { animation-delay: 2.2s; }
.m4 { animation-delay: 2.4s; } .n-rodape { animation-delay: 2.8s; }
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes surge { to { opacity: 1; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* ───────── problemas ───────── */
.problemas { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.problema { padding: 30px 30px 32px; }
.problema h3 { display: flex; gap: 12px; align-items: baseline; }
.problema h3 svg { width: 22px; height: 22px; flex: none; transform: translateY(3px); }
.problema p { margin-top: 10px; }

/* ───────── portfólio ───────── */
.cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.casos { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.caso { display: grid; align-content: start; gap: 8px; padding: 18px 18px 26px; }
.mock { position: relative; margin: 0 0 18px; padding: 0 8% 9% 0; }
.mock-desk { border-radius: 12px; overflow: hidden; border: 1px solid rgba(14,39,38,.1); background: #fff; box-shadow: 0 18px 40px -26px rgba(14,39,38,.55); }
.mock-desk::before { content: ''; display: block; height: 18px; background: #eef3f3 radial-gradient(circle, #c4cece 3px, transparent 3.5px) 8px 50% / 13px 18px repeat-x; }
.mock-desk img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }
.mock-cel { position: absolute; right: 0; bottom: 0; width: 27%; border-radius: 16px; overflow: hidden; border: 4px solid var(--tinta); background: var(--tinta); box-shadow: 0 16px 30px -14px rgba(14,39,38,.6); }
.mock-cel img { aspect-ratio: 9 / 18; object-fit: cover; object-position: top; width: 100%; }
.caso h3 { font-size: 1.25rem; }
.caso-onde { color: var(--tinta); font-weight: 500; }
.caso-o-que { font-size: 1rem; }
.caso-o-que b { color: var(--tinta); font-weight: 600; }
.selo { justify-self: start; font-size: .82rem; font-weight: 600; color: var(--teal-forte); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 10px; }

/* ───────── planos ───────── */
.planos { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plano { position: relative; padding: 34px 30px 32px; display: grid; gap: 18px; }
.plano h3 { font-size: 1.35rem; }
.plano-preco small { display: block; font-size: 1rem; }
.plano-preco b { display: block; font: 800 clamp(2.6rem, 4vw, 3.3rem)/1 'Manrope', sans-serif; letter-spacing: -0.04em; color: var(--tinta); margin-top: 4px; }
.plano-resumo { font-size: 1.02rem; }
.plano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plano li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 1rem; line-height: 1.4; }
.plano li svg { width: 22px; height: 22px; color: var(--teal-forte); }
.plano-prazo { font-weight: 600; color: var(--tinta); font-size: 1rem; }
.plano .btn { width: 100%; }
/* O mais pedido: escuro, alto contraste, maior */
.plano-destaque {
  border-radius: 26px; color: #d3e8ea; padding-top: 46px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(0, 200, 255, .35), transparent 60%), linear-gradient(160deg, #0e2726 0%, #0b4357 60%, #0a6b82 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 80px -36px rgba(8, 90, 110, .75);
  transform: translateY(-16px);
}
.plano-destaque h3, .plano-destaque .plano-prazo { color: #fff; }
.plano-destaque .plano-preco b { color: #fff; font-size: clamp(3.4rem, 5.4vw, 4.6rem); }
.plano-destaque li svg { color: #6fe7e3; }
.plano-selo { position: absolute; top: -15px; left: 30px; font: 800 .9rem/1 'Manrope', sans-serif; color: var(--tinta);
  background: linear-gradient(90deg, #6fe7e3, #00c8ff); padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0,200,255,.9); }

/* ───────── GEO ───────── */
.geo .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pontos { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.pontos li { border-left: 3px solid var(--teal); padding-left: 16px; }
.pontos b { display: block; color: var(--tinta); }
.chat-area { position: relative; }
.chat { background: #fff; border-radius: 22px; border: 1px solid #e5e7e8; box-shadow: 0 40px 80px -40px rgba(14,39,38,.45), 0 0 0 8px rgba(255,255,255,.45);
  font: 400 1rem/1.55 ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1f1f1f; overflow: hidden; }
.chat-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; }
.chat-modelo { font-weight: 600; font-size: 1.05rem; color: #1f1f1f; }
.chat-modelo::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid #8a8a8a; border-bottom: 2px solid #8a8a8a; transform: translateY(-3px) rotate(45deg); }
.chat-rotulo { font-size: .78rem; color: #6b6b6b; border: 1px solid #e3e3e3; border-radius: 999px; padding: 3px 10px; }
.chat-corpo { padding: 22px 20px 6px; display: grid; gap: 20px; }
.balao-eu { justify-self: end; max-width: 82%; background: #f1f1f1; border-radius: 22px; padding: 10px 18px; color: #1f1f1f; }
.balao-ia { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.balao-ia > div { display: grid; gap: 12px; }
.balao-ia strong { color: #1f1f1f; }
.ia-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e3e3e3; display: grid; place-items: center; }
.ia-avatar::before { content: '✦'; font-size: 14px; color: #1f1f1f; }
.fontes { display: flex; flex-wrap: wrap; gap: 8px; }
.fonte { display: inline-flex; align-items: center; gap: 6px; background: #f4f4f4; border-radius: 999px; padding: 4px 11px; font-size: .82rem; color: #5d5d5d; }
.fonte i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--ciano)); }
.chat-campo { margin: 16px 18px 18px; border: 1px solid #e3e3e3; border-radius: 999px; padding: 13px 20px; color: #8e8e8e; box-shadow: 0 4px 14px -8px rgba(0,0,0,.18); }
.circulado { position: relative; white-space: nowrap; }
.circulado svg { position: absolute; left: -14px; top: -10px; width: calc(100% + 28px); height: calc(100% + 20px); overflow: visible; }
.circulado path { fill: none; stroke: var(--caneta); stroke-width: 2.6; stroke-linecap: round; }
.nota-chat { margin: 18px 0 0 24px; font: 700 1.7rem/1 'Caveat', cursive; color: var(--caneta); transform: rotate(-2deg); }

/* ───────── passos ───────── */
.passos { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: passo; }
.passos li { counter-increment: passo; padding: 28px; }
.passos li::before { content: counter(passo); display: block; font: 800 3.4rem/1 'Manrope', sans-serif; letter-spacing: -0.04em; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--teal-forte), var(--ciano)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.passos p { margin-top: 8px; font-size: 1.02rem; }

/* ───────── quem faz ───────── */
.painel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; padding: 36px; border-radius: 28px; }
.painel img { border-radius: 18px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; }
.painel .lead { max-width: 60ch; }

/* ───────── FAQ ───────── */
.faq { margin-top: 44px; padding: 6px 34px; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0;
  font: 700 1.2rem/1.3 'Manrope', sans-serif; color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; line-height: 1; color: var(--teal-forte); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; max-width: 75ch; }

/* ───────── CTA final ───────── */
.final { position: relative; overflow: hidden; color: #d3e8ea; text-align: center; padding: 120px 0; margin-top: 24px;
  background: radial-gradient(60% 90% at 15% 10%, rgba(0, 200, 255, .32), transparent 60%), radial-gradient(50% 80% at 90% 90%, rgba(82, 190, 188, .35), transparent 60%), linear-gradient(150deg, #0e2726 0%, #0b4357 60%, #0a6b82 100%); }
.final h2 { color: #fff; margin: 0 auto; max-width: 20ch; }
.final p { margin: 22px auto 0; max-width: 52ch; font-size: 1.2rem; }
.final .acoes { justify-content: center; }
.final .btn { background: #fff; border-color: #fff; color: var(--tinta); box-shadow: 0 16px 36px -14px rgba(0,200,255,.8); }
.final .btn:hover { background: #e3fbfb; border-color: #e3fbfb; }
.marca-dagua { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: 46%; max-width: 560px; opacity: .16; pointer-events: none; }

/* ───────── rodapé ───────── */
.rodape { padding: 64px 0 40px; font-size: 1rem; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.rodape .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.rodape h3 { font-size: 1rem; margin-bottom: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape a { color: var(--texto); }
.rodape .direitos { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding-top: 24px; font-size: .9rem; }

.barra-cel { display: none; }

/* ───────── responsivo ───────── */
@media (max-width: 1080px) {
  .casos { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); }
  .planos { grid-template-columns: 1fr; max-width: 560px; }
  .plano-destaque { transform: none; }
}
@media (max-width: 900px) {
  .menu { display: none; }
  .bloco { padding: 64px 0; }
  .hero { padding: 72px 0 80px; }
  .hero .wrap, .geo .wrap, .painel { grid-template-columns: 1fr; gap: 44px; }
  .raiox { margin: 18px 4% 28px; }
  .problemas { grid-template-columns: 1fr; }
  .painel { padding: 24px; }
  .painel img { max-width: 420px; }
  .rodape .wrap { grid-template-columns: 1fr; }
  .marca-dagua { width: 90%; right: -30%; }
  .barra-cel { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.8);
    transform: translateY(110%); transition: transform .25s ease-out; }
  .barra-cel.visivel { transform: none; }
  .barra-cel .btn { width: 100%; }
  body { padding-bottom: 82px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .topo .btn { display: none; }
  .casos, .passos { grid-template-columns: 1fr; }
  .acoes .btn { width: 100%; }
  .hero .sub { font-size: 1.12rem; }
  .faq { padding: 4px 20px; }
  .plano { padding: 30px 22px 26px; }
  .plano-destaque { padding-top: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marcas path, .marcas path.tracejado { animation: none; stroke-dashoffset: 0; opacity: 1; }
  .marcas path.tracejado { stroke-dasharray: 7 7; }
  .nota { animation: none; opacity: 1; }
  .girando { animation: none; }
}