/* ============================================================
   ELEVATE SOCIAL - identidade visual

   Azul premium escuro. As cores estão todas no bloco logo
   abaixo: para ajustar a identidade, mexa só nelas.

   Tudo aqui começa com "e-" para não trombar com o estilo.css
   antigo, que continua carregado (o botão de ajuda e o aviso
   de instalar o app dependem dele).
   ============================================================ */

body.elevate {
  --e-fundo:        #050A18;
  --e-fundo-2:      #0A1228;
  --e-superficie:   rgba(255, 255, 255, .035);
  --e-superficie-2: rgba(255, 255, 255, .06);
  --e-borda:        rgba(148, 172, 255, .12);
  --e-borda-forte:  rgba(148, 172, 255, .24);

  --e-texto:  #EDF2FF;
  --e-suave:  #A3B0CF;
  --e-fraco:  #6E7B9B;

  --e-azul:        #3B7BFF;
  --e-azul-claro:  #7AB0FF;
  --e-ciano:       #38D1FF;
  --e-gradiente:   linear-gradient(135deg, #2F6BFF 0%, #4F8DFF 50%, #38D1FF 100%);
  --e-verde:       #34D399;

  --e-raio:    18px;
  --e-raio-p:  12px;
  --e-sombra:  0 20px 60px -20px rgba(0, 0, 0, .6);
  --e-brilho-azul: 0 10px 40px -8px rgba(59, 123, 255, .55);

  --e-fonte-titulo: "Sora", "Inter", system-ui, sans-serif;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--e-texto);
  background: var(--e-fundo);
  background-attachment: scroll;
  padding-bottom: 88px;
  overflow-x: hidden;
}

body.elevate ::selection { background: rgba(59, 123, 255, .45); color: #fff; }

/* O brilho azul atrás da capa. position:absolute (e não fixed)
   para não pesar na rolagem do celular. */
.e-brilho {
  position: absolute; inset: 0 0 auto 0; height: 900px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(600px 380px at 78% 120px, rgba(56, 209, 255, .16), transparent 70%),
    radial-gradient(760px 520px at 18% 60px, rgba(47, 107, 255, .28), transparent 70%),
    radial-gradient(900px 600px at 50% 0, rgba(20, 40, 110, .55), transparent 75%);
}
body.elevate main, body.elevate footer, .e-topo { position: relative; z-index: 1; }

.e-dentro { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.e-dentro-estreito { max-width: 780px; }

body.elevate a { color: inherit; }
body.elevate em { font-style: normal; }

/* Os títulos com <em> ganham o degradê da marca */
.e-capa-titulo em, .e-secao-titulo em, .e-final-titulo em {
  background: var(--e-gradiente);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------ */
.e-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  font: 700 15.5px/1 "Inter", system-ui, sans-serif;
  color: #fff; text-decoration: none; white-space: nowrap;
  background: var(--e-gradiente);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: var(--e-brilho-azul), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.e-botao:hover { transform: translateY(-1px); filter: brightness(1.08); }
.e-botao:active { transform: translateY(0) scale(.98); }
.e-botao svg { width: 17px; height: 17px; stroke-width: 2.4; }
.e-botao-p { padding: 11px 18px; font-size: 14px; box-shadow: 0 6px 20px -6px rgba(59, 123, 255, .6); }

.e-botao-vidro {
  background: var(--e-superficie-2);
  border: 1px solid var(--e-borda-forte);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.e-botao-vidro:hover { background: rgba(255, 255, 255, .1); }

body.elevate :focus-visible {
  outline: 2px solid var(--e-azul-claro); outline-offset: 3px; border-radius: 8px;
}

/* ------------------------------------------------------------
   Cabeçalho
   ------------------------------------------------------------ */
.e-topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 10, 24, .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--e-borda);
}
.e-topo-linha { display: flex; align-items: center; gap: 20px; height: 64px; }

.e-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.e-logo-icone { width: 32px; height: 32px; stroke-width: 2.6; }
.e-logo-nome {
  font: 700 18px/1 var(--e-fonte-titulo);
  letter-spacing: -.02em; color: var(--e-texto);
}
.e-logo-nome b { font-weight: 700; color: var(--e-azul-claro); margin-left: 3px; }

.e-menu { display: none; gap: 26px; margin-left: 18px; }
.e-menu a {
  font-size: 14px; font-weight: 500; color: var(--e-suave); text-decoration: none;
  transition: color .15s;
}
.e-menu a:hover { color: var(--e-texto); }

.e-topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.e-topo-link {
  display: none;
  font-size: 14px; font-weight: 600; color: var(--e-suave); text-decoration: none;
}
.e-topo-link:hover { color: var(--e-texto); }
.e-topo .e-botao-p { display: none; }

.e-topo-icone {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  color: var(--e-suave);
  background: var(--e-superficie); border: 1px solid var(--e-borda);
  border-radius: 50%;
}
.e-topo-icone svg { width: 17px; height: 17px; }

/* Seletor PT / EN */
.e-idiomas {
  display: inline-flex; padding: 3px;
  background: var(--e-superficie); border: 1px solid var(--e-borda);
  border-radius: 999px;
}
.e-idiomas button {
  min-width: 36px; padding: 6px 9px;
  font: 700 11.5px/1 "Inter", system-ui, sans-serif; letter-spacing: .04em;
  color: var(--e-fraco); background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: color .15s, background .15s;
}
.e-idiomas button:hover { color: var(--e-texto); }
.e-idiomas button.ativo { color: #fff; background: var(--e-superficie-2); box-shadow: inset 0 0 0 1px var(--e-borda-forte); }

/* ------------------------------------------------------------
   Capa
   ------------------------------------------------------------ */
.e-capa { padding: 44px 0 20px; }
.e-capa-grade { display: grid; gap: 28px; align-items: center; }

.e-pilula {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 12px;
  font-size: 13px; font-weight: 600; color: var(--e-azul-claro);
  background: rgba(59, 123, 255, .1);
  border: 1px solid rgba(59, 123, 255, .3);
  border-radius: 999px;
}

.e-ponto-vivo {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--e-verde);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: e-pulso 2s infinite;
  display: inline-block;
}
@keyframes e-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.e-capa-titulo {
  margin: 20px 0 16px;
  font: 800 38px/1.08 var(--e-fonte-titulo);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.e-capa-sub {
  max-width: 540px;
  font-size: 16.5px; line-height: 1.65; color: var(--e-suave);
}
.e-capa-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.e-capa-botoes .e-botao { flex: 1 1 auto; }

.e-selos {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  margin-top: 26px;
}
.e-selos li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--e-suave);
}
.e-selos svg { width: 17px; height: 17px; color: var(--e-azul-claro); }

/* ---- a ilustração: um perfil crescendo ---- */
.e-capa-arte { position: relative; max-width: 440px; width: 100%; margin: 0 auto; }
.e-capa-arte.com-celulares { max-width: 560px; }
.e-arte-ilustracao { position: relative; padding: 26px 0; }

.e-arte-cartao {
  position: relative;
  padding: 22px;
  background: linear-gradient(160deg, rgba(20, 34, 78, .9), rgba(9, 16, 38, .92));
  border: 1px solid var(--e-borda-forte);
  border-radius: 24px;
  box-shadow: var(--e-sombra), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.e-arte-perfil { display: flex; align-items: center; gap: 12px; }
.e-arte-perfil b { display: block; font-size: 15px; }
.e-arte-perfil span { font-size: 12px; color: var(--e-fraco); }
.e-arte-foto {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  /* um avatar desenhado (cabeça + ombros) sobre o gradiente da marca */
  background:
    radial-gradient(circle at 50% 39%, rgba(255, 255, 255, .92) 0 8.5px, transparent 9px),
    radial-gradient(ellipse 15px 12px at 50% 100%, rgba(255, 255, 255, .92) 0 96%, transparent 100%),
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .35), transparent 55%),
    var(--e-gradiente);
  box-shadow: 0 0 0 3px var(--e-fundo-2), 0 0 0 5px rgba(59, 123, 255, .5);
}
.e-arte-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 20px 0 8px;
}
.e-arte-numeros div {
  padding: 10px 8px; text-align: center;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 12px;
}
.e-arte-numeros b { display: block; font: 700 17px/1.2 var(--e-fonte-titulo); }
.e-arte-numeros span { font-size: 11px; color: var(--e-fraco); }
.e-arte-grafico { display: block; width: 100%; height: 110px; margin-top: 8px; }

.e-arte-chip {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px;
  background: rgba(12, 20, 44, .92);
  border: 1px solid var(--e-borda-forte);
  border-radius: 14px;
  box-shadow: var(--e-sombra);
  backdrop-filter: blur(10px);
  animation: e-flutuar 6s ease-in-out infinite;
}
.e-arte-chip div b { display: block; font-size: 13px; }
.e-arte-chip div span { font-size: 11px; color: var(--e-fraco); }
.e-arte-chip-1 { top: 0; right: -6px; }
.e-arte-chip-2 { bottom: 4px; left: -6px; }
.e-arte-chip-icone {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  font-weight: 800; color: #fff;
  background: var(--e-gradiente); border-radius: 9px;
}
.e-arte-chip-icone-ok { background: linear-gradient(135deg, #10B981, #34D399); }
@keyframes e-flutuar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Entrada da ilustração, só CSS (ficou no lugar dos vídeos da
   capa): o cartão sobe, os números aparecem um a um, a linha do
   gráfico se desenha e os avisos "estalam" por cima no fim. */
.e-arte-cartao { animation: e-arte-subir .7s cubic-bezier(.2, .8, .2, 1) both; }
.e-arte-numeros div { animation: e-arte-subir .5s cubic-bezier(.2, .8, .2, 1) both; }
.e-arte-numeros div:nth-child(1) { animation-delay: .35s; }
.e-arte-numeros div:nth-child(2) { animation-delay: .47s; }
.e-arte-numeros div:nth-child(3) { animation-delay: .59s; }
.e-arte-linha {
  stroke-dasharray: 1 2; stroke-dashoffset: 1;
  animation: e-arte-desenhar 1.4s cubic-bezier(.45, 0, .2, 1) .6s forwards;
}
.e-arte-area { animation: e-arte-aparecer .9s ease 1.3s both; }
.e-arte-foto { animation: e-arte-anel 2.8s ease-out 2s infinite; }

/* o ponto que brilha no topo da linha, quando ela termina de
   desenhar. Fica fora do SVG porque o SVG estica (preserveAspectRatio
   none) e um círculo lá dentro viraria oval. */
.e-arte-grafico-caixa { position: relative; }
.e-arte-ponta {
  position: absolute; right: 0; top: calc(8px + 110px * 6 / 110);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #38D1FF, 0 0 18px 4px rgba(56, 209, 255, .7);
  transform: translate(50%, -50%);
  animation: e-arte-estalar .4s cubic-bezier(.3, 1.6, .5, 1) 1.95s both, e-arte-brilho 2.4s ease-in-out 2.4s infinite;
}
@keyframes e-arte-brilho {
  50% { box-shadow: 0 0 0 3px #38D1FF, 0 0 0 9px rgba(56, 209, 255, .18), 0 0 26px 8px rgba(56, 209, 255, .55); }
}

/* Antes de aparecer na tela, tudo fica parado no primeiro quadro
   (o inicio.js põe e tira a classe). No celular o cartão fica
   abaixo da dobra: sem isto a entrada acontecia sem ninguém ver. */
.e-arte-pausada, .e-arte-pausada * { animation-play-state: paused !important; }
.e-arte-chip-1 { animation: e-arte-estalar .45s cubic-bezier(.3, 1.6, .5, 1) 1.5s both, e-flutuar 6s ease-in-out 1.95s infinite; }
.e-arte-chip-2 { animation: e-arte-estalar .45s cubic-bezier(.3, 1.6, .5, 1) 1.9s both, e-flutuar 7s ease-in-out 2.35s infinite; }

@keyframes e-arte-subir { from { opacity: 0; transform: translateY(18px); } }
@keyframes e-arte-desenhar { to { stroke-dashoffset: 0; } }
@keyframes e-arte-aparecer { from { opacity: 0; } }
@keyframes e-arte-estalar { from { opacity: 0; transform: translateY(8px) scale(.85); } }
@keyframes e-arte-anel {
  0%   { box-shadow: 0 0 0 3px var(--e-fundo-2), 0 0 0 5px rgba(59, 123, 255, .5), 0 0 0 5px rgba(59, 123, 255, .45); }
  60%, 100% { box-shadow: 0 0 0 3px var(--e-fundo-2), 0 0 0 5px rgba(59, 123, 255, .5), 0 0 0 16px rgba(59, 123, 255, 0); }
}

/* ------------------------------------------------------------
   Carrossel de celulares da capa

   O do centro na frente; o anterior e o próximo aparecem atrás,
   menores e mais escuros. Tudo é posição (data-pos) + transição:
   trocar de slide é só o JS mudar os data-pos.
   ------------------------------------------------------------ */
.e-celulares {
  /* a largura do aparelho: o resto das medidas sai dela.
     No celular é menor de propósito: maior que isso, o aparelho
     tomava mais de meia tela e empurrava os serviços para baixo. */
  --cel-l: min(195px, 50vw);
  position: relative;
  padding: 8px 0 34px;
}
.e-celulares-palco {
  position: relative;
  height: calc(var(--cel-l) * 2.1667);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

.e-celular {
  position: absolute; top: 0; left: 50%;
  width: var(--cel-l); height: calc(var(--cel-l) * 2.1667);
  padding: calc(var(--cel-l) * .038);
  background: linear-gradient(145deg, #2A2E3A, #12141B 60%);
  border-radius: calc(var(--cel-l) * .17);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .12),
    0 40px 80px -30px rgba(0, 0, 0, .85),
    0 0 60px -20px rgba(59, 123, 255, .35);
  transform: translateX(-50%) scale(.72);
  opacity: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, filter .45s ease;
}
/* a "ilha" do topo */
.e-celular::after {
  content: ""; position: absolute; z-index: 2;
  top: calc(var(--cel-l) * .07); left: 50%; transform: translateX(-50%);
  width: 32%; height: calc(var(--cel-l) * .085);
  background: #000; border-radius: 999px;
}
.e-celular[data-pos="centro"] {
  transform: translateX(-50%) scale(1);
  opacity: 1; z-index: 3; pointer-events: auto;
}
.e-celular[data-pos="esq"],
.e-celular[data-pos="dir"] {
  opacity: 1; z-index: 2; pointer-events: auto; cursor: pointer;
  filter: brightness(.5) saturate(.8);
}
/* No celular os vizinhos ficam mais perto do centro, para não
   baterem na borda da tela; no computador abrem mais (lá embaixo). */
.e-celular[data-pos="esq"] { transform: translateX(-100%) scale(.82); }
.e-celular[data-pos="dir"] { transform: translateX(0%) scale(.82); }

.e-celular-tela {
  position: relative; width: 100%; height: 100%;
  overflow: hidden; background: #000;
  border-radius: calc(var(--cel-l) * .135);
}
.e-celular-tela video, .e-celular-tela img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

.e-celulares-seta {
  position: absolute; z-index: 5;
  top: calc(8px + var(--cel-l) * 1.083); transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #0A1228; background: #fff;
  border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .15s ease, box-shadow .15s ease;
}
.e-celulares-seta:hover { transform: translateY(-50%) scale(1.06); }
.e-celulares-seta:active { transform: translateY(-50%) scale(.95); }
.e-celulares-seta svg { width: 22px; height: 22px; stroke-width: 2.4; }
.e-celulares-anterior { left: 0; }
.e-celulares-proximo { right: 0; }

.e-celulares-pontos {
  position: absolute; left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; gap: 8px;
}
.e-celulares-pontos button {
  width: 8px; height: 8px; padding: 0;
  background: rgba(255, 255, 255, .28);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
.e-celulares-pontos button.ativo { width: 24px; background: var(--e-azul); }

/* ---- a faixa de números ---- */
.e-numeros {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 36px;
  background: var(--e-superficie);
  border: 1px solid var(--e-borda);
  border-radius: var(--e-raio);
  overflow: hidden;
}
.e-numero {
  padding: 18px 16px; text-align: center;
  border-right: 1px solid var(--e-borda);
  border-bottom: 1px solid var(--e-borda);
}
.e-numero b {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 22px/1.2 var(--e-fonte-titulo); letter-spacing: -.02em;
}
.e-numero span:last-child { display: block; margin-top: 3px; font-size: 12.5px; color: var(--e-fraco); }

/* ------------------------------------------------------------
   Seções
   ------------------------------------------------------------ */
.e-secao { padding: 64px 0 0; scroll-margin-top: 64px; }
.e-secao-apertada { padding-top: 48px; }

.e-secao-cabeca { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.e-sobretitulo {
  display: inline-block; margin-bottom: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--e-azul-claro);
}
.e-secao-titulo {
  font: 700 29px/1.15 var(--e-fonte-titulo); letter-spacing: -.03em;
  text-wrap: balance;
}
.e-secao-sub { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--e-suave); }

.e-cartao {
  background: var(--e-superficie);
  border: 1px solid var(--e-borda);
  border-radius: var(--e-raio);
}

/* ---- plataformas (Instagram / TikTok / Assinatura) ---- */
.e-plataformas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: 22px;
}
.e-plataforma {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 9px;
  font: 600 14px/1 "Inter", system-ui, sans-serif;
  color: var(--e-suave); text-decoration: none;
  background: var(--e-superficie);
  border: 1px solid var(--e-borda);
  border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.e-plataforma:hover { color: var(--e-texto); border-color: var(--e-borda-forte); }
.e-plataforma.ativa {
  color: #fff;
  background: rgba(59, 123, 255, .14);
  border-color: rgba(59, 123, 255, .55);
}
.e-plataforma-icone {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  color: #fff; border-radius: 50%;
  background: var(--e-superficie-2);
}
.e-plataforma-icone svg { width: 15px; height: 15px; }
.e-plataforma-icone.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.e-plataforma-icone.tiktok { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.e-plataforma-icone.youtube { background: #FF0033; }
.e-plataforma-icone.assinatura { background: var(--e-gradiente); font-size: 13px; }

/* ---- os cards de serviço ---- */
.e-grade-servicos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.e-grade-aviso { grid-column: 1 / -1; text-align: center; }
.e-grade-aviso a { color: var(--e-azul-claro); }
.e-grade-servicos .carregando { grid-column: 1 / -1; }

.e-servico {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 150px;
  padding: 18px 16px 16px;
  text-decoration: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1px solid var(--e-borda);
  border-radius: var(--e-raio);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.e-servico:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 123, 255, .5);
  box-shadow: 0 16px 40px -18px rgba(59, 123, 255, .6);
}
.e-servico-icone {
  width: 42px; height: 42px; margin-bottom: 8px;
  display: grid; place-items: center;
  color: var(--e-azul-claro);
  background: rgba(59, 123, 255, .12);
  border: 1px solid rgba(59, 123, 255, .25);
  border-radius: 12px;
  font-size: 18px;
}
.e-servico-icone svg { width: 20px; height: 20px; }
.e-servico-nome { font-size: 15px; font-weight: 700; line-height: 1.3; }
.e-servico-preco { margin-top: auto; padding-top: 6px; font-size: 12.5px; color: var(--e-fraco); }
.e-servico-preco b { color: var(--e-texto); font-weight: 700; }
.e-servico-seta {
  position: absolute; top: 18px; right: 16px;
  width: 16px; height: 16px; color: var(--e-fraco);
  transition: transform .18s, color .18s;
}
.e-servico:hover .e-servico-seta { transform: translateX(3px); color: var(--e-azul-claro); }

.e-servico-assinatura {
  background: linear-gradient(160deg, rgba(47, 107, 255, .25), rgba(56, 209, 255, .08));
  border-color: rgba(59, 123, 255, .45);
}
.e-servico-assinatura .e-servico-icone { background: var(--e-gradiente); color: #fff; border: 0; }

/* O carregando do estilo.css é para fundo claro */
body.elevate .girando { border-color: rgba(255, 255, 255, .12); border-top-color: var(--e-azul); }

/* ---- como funciona ---- */
.e-passos { list-style: none; display: grid; gap: 12px; }
.e-passos li { padding: 24px 22px; }
.e-passo-numero {
  display: inline-block; margin-bottom: 14px;
  font: 800 13px/1 var(--e-fonte-titulo); letter-spacing: .06em;
  color: var(--e-azul-claro);
  padding: 7px 10px;
  background: rgba(59, 123, 255, .12);
  border-radius: 8px;
}
.e-passos b, .e-vantagem b { display: block; font-size: 16.5px; margin-bottom: 7px; }
.e-passos p, .e-vantagem p { font-size: 14.5px; line-height: 1.6; color: var(--e-suave); }

/* ---- garantia ---- */
.e-garantia {
  display: grid; gap: 20px; align-items: center;
  padding: 28px 24px;
  background:
    radial-gradient(500px 200px at 0 0, rgba(59, 123, 255, .22), transparent 70%),
    linear-gradient(160deg, rgba(20, 34, 78, .85), rgba(9, 16, 38, .9));
  border: 1px solid rgba(59, 123, 255, .35);
  border-radius: 24px;
}
.e-garantia-selo {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  color: #fff; background: var(--e-gradiente);
  border-radius: 20px;
  box-shadow: var(--e-brilho-azul);
}
.e-garantia-selo svg { width: 32px; height: 32px; stroke-width: 2; }
.e-garantia .e-sobretitulo { margin-bottom: 8px; }
.e-garantia-titulo { font: 700 23px/1.2 var(--e-fonte-titulo); letter-spacing: -.02em; }
.e-garantia-texto { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--e-suave); max-width: 640px; }

/* ---- vantagens ---- */
.e-vantagens { display: grid; gap: 12px; }
.e-vantagem { padding: 24px 22px; }
.e-vantagem-icone {
  width: 44px; height: 44px; margin-bottom: 16px;
  display: grid; place-items: center;
  color: var(--e-azul-claro);
  background: rgba(59, 123, 255, .12);
  border: 1px solid rgba(59, 123, 255, .25);
  border-radius: 12px;
}
.e-vantagem-icone svg { width: 20px; height: 20px; }

/* ---- depoimentos: colunas como um mural de prints ---- */
.e-depoimentos { columns: 2 160px; column-gap: 12px; }
.e-depoimento { break-inside: avoid; margin: 0 0 12px; }
.e-depoimento-print {
  display: block; width: 100%; padding: 0;
  background: var(--e-superficie); border: 1px solid var(--e-borda);
  border-radius: 16px; overflow: hidden; cursor: zoom-in;
  transition: transform .18s, border-color .18s;
}
.e-depoimento-print:hover { transform: translateY(-2px); border-color: var(--e-borda-forte); }
.e-depoimento-print img { display: block; width: 100%; height: auto; }
.e-depoimento figcaption {
  margin-top: 7px; padding: 0 4px;
  font-size: 12.5px; font-weight: 600; color: var(--e-suave);
}

.e-ampliar {
  max-width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; margin: auto;
  background: transparent; border: 0; overflow: visible;
}
.e-ampliar::backdrop { background: rgba(3, 6, 16, .85); backdrop-filter: blur(4px); }
.e-ampliar img {
  display: block; max-width: 100%; max-height: calc(100vh - 32px);
  margin: 0 auto; border-radius: 16px;
}
.e-ampliar-fechar {
  position: absolute; top: -14px; right: -14px;
  width: 38px; height: 38px;
  font-size: 22px; line-height: 1; color: #fff;
  background: var(--e-fundo-2); border: 1px solid var(--e-borda-forte);
  border-radius: 50%; cursor: pointer;
}

/* ---- dúvidas ---- */
.e-duvidas { display: grid; gap: 10px; }
.e-duvida {
  background: var(--e-superficie);
  border: 1px solid var(--e-borda);
  border-radius: var(--e-raio-p);
  transition: border-color .15s, background .15s;
}
.e-duvida.aberta { border-color: rgba(59, 123, 255, .4); background: rgba(59, 123, 255, .06); }
.e-duvida-topo {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px;
  font: 600 15px/1.4 "Inter", system-ui, sans-serif;
  color: var(--e-texto); text-align: left;
  background: none; border: 0; cursor: pointer;
}
.e-duvida-sinal { position: relative; width: 14px; height: 14px; flex: none; }
.e-duvida-sinal::before, .e-duvida-sinal::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--e-azul-claro);
  transition: transform .2s ease;
}
.e-duvida-sinal::after { transform: rotate(90deg); }
.e-duvida.aberta .e-duvida-sinal::after { transform: rotate(0); }
.e-duvida-corpo { display: none; padding: 0 18px 18px; }
.e-duvida.aberta .e-duvida-corpo { display: block; }
.e-duvida-corpo p { font-size: 14.5px; line-height: 1.65; color: var(--e-suave); }

/* ---- chamada final ---- */
.e-final {
  position: relative; overflow: hidden;
  padding: 48px 24px; text-align: center;
  background:
    radial-gradient(420px 220px at 50% 0, rgba(56, 209, 255, .2), transparent 70%),
    linear-gradient(160deg, #10204E, #0A1330);
  border: 1px solid rgba(59, 123, 255, .35);
  border-radius: 28px;
}
.e-final-titulo { font: 800 28px/1.15 var(--e-fonte-titulo); letter-spacing: -.03em; text-wrap: balance; }
.e-final-texto { margin: 12px auto 26px; max-width: 460px; font-size: 15.5px; line-height: 1.6; color: var(--e-suave); }

/* ------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------ */
.e-rodape { margin-top: 72px; padding: 36px 0 28px; border-top: 1px solid var(--e-borda); }
.e-rodape-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.e-rodape-texto { max-width: 620px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.6; color: var(--e-fraco); }
.e-rodape-copy { margin-top: 16px; }

/* ------------------------------------------------------------
   Barra fixa de compra (só no celular)
   ------------------------------------------------------------ */
.e-barra-celular {
  position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px;
  font-size: 16px; font-weight: 700;
  color: #fff; text-decoration: none;
  background: var(--e-gradiente);
  border-radius: 999px;
  box-shadow: 0 10px 30px -6px rgba(59, 123, 255, .7);
}
.e-barra-celular svg { width: 17px; height: 17px; stroke-width: 2.4; }

/* ------------------------------------------------------------
   Aviso de compra, no canto
   ------------------------------------------------------------ */
.e-aviso-compra {
  position: fixed; left: 16px; bottom: 84px; z-index: 45;
  display: flex; align-items: center; gap: 11px;
  /* o desconto é o botão do WhatsApp, do outro lado */
  max-width: calc(100vw - 104px);
  padding: 10px 12px 10px 10px;
  background: rgba(12, 20, 44, .95);
  border: 1px solid var(--e-borda-forte);
  border-radius: 14px;
  box-shadow: var(--e-sombra);
  backdrop-filter: blur(12px);
  animation: e-entrar-canto .3s cubic-bezier(.2, .8, .3, 1);
}
@keyframes e-entrar-canto { from { transform: translateX(-16px); opacity: 0; } }
.e-aviso-compra-icone {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #10B981, #34D399);
  border-radius: 10px;
}
.e-aviso-compra-icone svg { width: 17px; height: 17px; stroke-width: 2.6; }
.e-aviso-compra-texto { min-width: 0; display: grid; }
.e-aviso-compra-nome { font-size: 13px; font-weight: 700; }
.e-aviso-compra-item { font-size: 12px; color: var(--e-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-aviso-compra-quando { font-size: 10.5px; color: var(--e-fraco); margin-top: 1px; }
.e-aviso-compra-fechar {
  flex: none; align-self: flex-start;
  background: none; border: 0; cursor: pointer;
  color: var(--e-fraco); font-size: 18px; line-height: 1; padding: 0 2px;
}

/* ============================================================
   Telas maiores
   ============================================================ */
@media (min-width: 620px) {
  .e-dentro { padding: 0 24px; }
  .e-capa-titulo { font-size: 50px; }
  .e-capa-botoes .e-botao { flex: 0 0 auto; }
  .e-numeros { grid-template-columns: repeat(4, 1fr); }
  .e-numero { border-bottom: 0; }
  .e-numero:last-child { border-right: 0; }
  .e-grade-servicos { grid-template-columns: repeat(3, 1fr); }
  .e-vantagens { grid-template-columns: repeat(2, 1fr); }
  .e-garantia { grid-template-columns: auto 1fr; padding: 34px 36px; gap: 28px; }
  .e-secao-titulo { font-size: 36px; }
  .e-final { padding: 64px 32px; }
  .e-final-titulo { font-size: 38px; }
  .e-depoimentos { columns: 3 200px; }
  .e-topo-link { display: inline; }
  .e-topo-icone { display: none; }
}

@media (min-width: 900px) {
  body.elevate { padding-bottom: 0; }
  .e-barra-celular { display: none; }
  .e-aviso-compra { bottom: 20px; }

  .e-menu { display: flex; }
  .e-topo .e-botao-p { display: inline-flex; }
  .e-topo-linha { height: 72px; }

  .e-capa { padding: 72px 0 28px; }
  .e-capa-grade { grid-template-columns: 1.1fr .9fr; gap: 56px; }
  .e-capa-titulo { font-size: 60px; }
  .e-capa-arte { margin: 0 0 0 auto; }
  .e-celulares { --cel-l: 250px; }
  .e-celular[data-pos="esq"] { transform: translateX(-112%) scale(.84); }
  .e-celular[data-pos="dir"] { transform: translateX(12%) scale(.84); }
  .e-celulares-seta { width: 50px; height: 50px; }

  .e-secao { padding-top: 96px; }
  .e-secao-apertada { padding-top: 72px; }
  .e-grade-servicos { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .e-passos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .e-vantagens { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .e-depoimentos { columns: 4 200px; }
}

/* O número de telefone pequeno: o seletor de idioma e o logo
   dividem a linha com folga. */
@media (max-width: 370px) {
  .e-logo-nome { font-size: 16px; }
  .e-idiomas button { min-width: 30px; padding: 6px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .e-ponto-vivo, .e-arte-chip, .e-aviso-compra { animation: none; }
  .e-arte-cartao, .e-arte-numeros div, .e-arte-area, .e-arte-foto, .e-arte-ponta { animation: none; }
  .e-arte-linha { animation: none; stroke-dashoffset: 0; }
  .e-celular, .e-celulares-pontos button { transition: none; }
  .e-botao, .e-servico, .e-depoimento-print { transition: none; }
}

/* No celular a faixa de números tem 2 colunas: a borda da
   direita some na segunda coluna. */
@media (max-width: 619px) {
  .e-numero:nth-child(2n) { border-right: 0; }
  .e-numero:nth-last-child(-n+2):nth-child(odd),
  .e-numero:last-child { border-bottom: 0; }
  .e-numero:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================
   VITRINE (/comprar): serviço, tipo e pacote numa tela só
   ============================================================ */
body.elevate.comprar { padding-bottom: 0; }
body.elevate.comprar .pagina { max-width: 1160px; padding: 22px 16px 64px; position: relative; z-index: 1; }

.v-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--e-suave); text-decoration: none;
}
.v-voltar:hover { color: var(--e-texto); }
.v-voltar svg { width: 16px; height: 16px; }

.v-titulo {
  margin: 14px 0 8px;
  font: 800 30px/1.12 var(--e-fonte-titulo); letter-spacing: -.03em;
  text-wrap: balance;
}
.v-titulo em {
  font-style: normal;
  background: var(--e-gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v-sub { font-size: 15px; line-height: 1.6; color: var(--e-suave); max-width: 560px; }

/* ---- redes e serviços: pequenos e roláveis, para não roubar
   a atenção dos pacotes ---- */
.v-redes { display: flex; gap: 8px; margin-top: 22px; }
.v-rede {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 6px;
  font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--e-suave);
  background: var(--e-superficie); border: 1px solid var(--e-borda);
  border-radius: 999px; cursor: pointer;
}
.v-rede.ativa { color: #fff; background: rgba(59, 123, 255, .14); border-color: rgba(59, 123, 255, .55); }
.v-rede-icone {
  width: 24px; height: 24px; display: grid; place-items: center;
  color: #fff; border-radius: 50%; background: var(--e-superficie-2);
}
.v-rede-icone svg { width: 13px; height: 13px; }
.v-rede-icone.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.v-rede-icone.tiktok { background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }

.v-servicos {
  display: flex; gap: 8px;
  margin: 12px -16px 0; padding: 2px 16px 6px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
}
.v-servicos::-webkit-scrollbar { display: none; }
.v-servico {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  font: 500 13px/1 "Inter", system-ui, sans-serif; white-space: nowrap;
  color: var(--e-suave); text-decoration: none;
  background: transparent; border: 1px solid var(--e-borda);
  border-radius: 999px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.v-servico svg { width: 14px; height: 14px; }
.v-servico:hover { color: var(--e-texto); border-color: var(--e-borda-forte); }
.v-servico.ativo { color: #fff; font-weight: 600; background: var(--e-superficie-2); border-color: var(--e-borda-forte); }
.v-servico-assinatura { color: var(--e-azul-claro); border-style: dashed; }

/* ---- rótulos numerados ---- */
.v-rotulo {
  display: flex; align-items: center; gap: 10px;
  margin: 28px 0 12px;
  font: 700 16px/1.2 var(--e-fonte-titulo); letter-spacing: -.01em;
}
.v-rotulo span {
  width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 12px; color: #fff; background: var(--e-gradiente); border-radius: 50%;
}

/* ---- tipos ---- */
.v-tipos {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 10px;
  margin: 0 -16px; padding: 10px 16px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.v-tipos::-webkit-scrollbar { display: none; }
.v-tipo {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 14px 13px;
  font-family: "Inter", system-ui, sans-serif; text-align: left; color: var(--e-texto);
  background: var(--e-superficie); border: 1.5px solid var(--e-borda);
  border-radius: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.v-tipo:hover { border-color: var(--e-borda-forte); }
.v-tipo.ativo {
  background: rgba(59, 123, 255, .12);
  border-color: var(--e-azul);
  box-shadow: 0 0 0 3px rgba(59, 123, 255, .15);
}
.v-tipo-emoji { font-size: 20px; line-height: 1.2; }
.v-tipo-nome { font-size: 14px; font-weight: 700; line-height: 1.3; }
.v-tipo-preco { font-size: 12px; color: var(--e-fraco); }
.v-tipo.ativo .v-tipo-preco { color: var(--e-azul-claro); }
.v-tipo-selo {
  position: absolute; top: -9px; right: 10px;
  padding: 3px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: var(--e-gradiente); border-radius: 999px;
}

/* ---- sobre o tipo + garantias (uma vez só) ---- */
.v-sobre {
  display: grid; gap: 14px;
  margin-top: 14px; padding: 16px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 14px;
}
.v-sobre-texto b { font-size: 14.5px; }
.v-sobre-texto b span { font-weight: 500; color: var(--e-azul-claro); }
.v-sobre-texto p { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--e-suave); }
.v-garantias { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.v-garantias li { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--e-suave); }
.v-garantias svg { width: 15px; height: 15px; color: var(--e-verde); }

/* ---- pacotes ---- */
.v-pacotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 8px; }
.v-pacote {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 12px 14px;
  font-family: "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: linear-gradient(170deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  border: 1.5px solid var(--e-borda);
  border-radius: 16px; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.v-pacote:hover { transform: translateY(-2px); border-color: rgba(59, 123, 255, .5); }
.v-pacote.destaque {
  border-color: rgba(59, 123, 255, .55);
  background: linear-gradient(170deg, rgba(59, 123, 255, .16), rgba(59, 123, 255, .04));
}
.v-pacote.escolhido { border-color: var(--e-azul); box-shadow: 0 0 0 3px rgba(59, 123, 255, .25); }

.v-pacote-selo {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff;
  border-radius: 999px;
}
.v-pacote-selo.destaque { background: var(--e-gradiente); }
.v-pacote-selo.azul { background: #2F6BFF; }
.v-pacote-selo.verde { background: linear-gradient(135deg, #10B981, #34D399); }

.v-pacote-qtd { font: 800 26px/1.1 var(--e-fonte-titulo); letter-spacing: -.02em; }
.v-pacote-rotulo { margin-top: 2px; font-size: 12px; color: var(--e-fraco); }
.v-pacote-brinde { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--e-verde); }
.v-pacote-valores { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-top: 10px; }
.v-pacote-valores s { font-size: 12px; color: var(--e-fraco); }
.v-pacote-desconto {
  padding: 2px 6px; font-size: 11px; font-weight: 800;
  color: #062B1E; background: var(--e-verde); border-radius: 6px;
}
.v-pacote-preco { font: 800 21px/1.2 var(--e-fonte-titulo); letter-spacing: -.02em; }
.v-pacote-nota { margin-top: 2px; font-size: 11px; color: var(--e-verde); }
.v-pacote-cta {
  width: 100%; margin-top: 12px; padding: 9px 0;
  font-size: 13px; font-weight: 700; color: var(--e-azul-claro);
  background: rgba(59, 123, 255, .1); border-radius: 10px;
  transition: background .15s, color .15s;
}
.v-pacote:hover .v-pacote-cta, .v-pacote.destaque .v-pacote-cta, .v-pacote.escolhido .v-pacote-cta {
  color: #fff; background: var(--e-gradiente);
}

.v-pagamento {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 20px; font-size: 12.5px; color: var(--e-fraco);
}
.v-pagamento svg { width: 14px; height: 14px; }

.v-duvidas { max-width: 720px; margin: 48px auto 0; }
.v-duvidas-titulo { margin-bottom: 14px; text-align: center; font: 700 20px/1.2 var(--e-fonte-titulo); }

.v-vazio { padding: 60px 0; text-align: center; color: var(--e-suave); }

@media (min-width: 620px) {
  body.elevate.comprar .pagina { padding: 30px 24px 72px; }
  .v-titulo { font-size: 40px; }
  .v-pacotes { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .v-tipos { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0; padding: 10px 0 0; overflow: visible; }
  .v-sobre { grid-template-columns: 1fr auto; align-items: center; }
  .v-garantias { flex-direction: column; gap: 8px; }
  /* continua numa linha só, rolável: em duas linhas os serviços
     chamavam mais atenção que os pacotes */
  .v-servicos { margin: 12px 0 0; padding: 2px 0 6px; }
}
@media (min-width: 900px) {
  .v-pacotes { grid-template-columns: repeat(4, 1fr); }
}

/* No checkout (ainda no visual antigo, claro) o brilho azul do
   fundo não entra: em cima do branco ele vira uma mancha. */
body:not(.elevate) .e-brilho { display: none; }

/* ------------------------------------------------------------
   Janela de oferta ("turbinar seu pedido") na vitrine

   A janela é a mesma do estilo.css antigo; aqui ela só troca de
   roupa quando a página está no visual da Elevate. No checkout
   (ainda claro) a oferta de saída continua como era.
   ------------------------------------------------------------ */
body.elevate .cortina { background: rgba(3, 6, 16, .72); backdrop-filter: blur(6px); }
body.elevate .modal {
  max-width: 400px;
  padding: 32px 26px 22px;
  color: var(--e-texto);
  background:
    radial-gradient(360px 180px at 50% 0, rgba(59, 123, 255, .22), transparent 70%),
    linear-gradient(170deg, #111C3D, #0A1228);
  border: 1px solid var(--e-borda-forte);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}
body.elevate .modal-fechar { color: var(--e-fraco); }
body.elevate .modal-fechar:hover { background: var(--e-superficie-2); color: var(--e-texto); }
body.elevate .modal-icone {
  width: 54px; height: 54px;
  background: var(--e-gradiente);
  box-shadow: var(--e-brilho-azul);
}
body.elevate .modal-titulo {
  font: 800 22px/1.2 var(--e-fonte-titulo); letter-spacing: -.02em; color: var(--e-texto);
}
body.elevate .modal-sub { font-size: 14px; color: var(--e-suave); }

body.elevate .modal-oferta {
  background: rgba(59, 123, 255, .1);
  border: 1.5px solid rgba(59, 123, 255, .4);
}
body.elevate .modal-oferta-rotulo { color: var(--e-azul-claro); font-size: 10.5px; letter-spacing: .12em; }
body.elevate .modal-oferta-qtd {
  font-family: var(--e-fonte-titulo); font-size: 40px; letter-spacing: -.02em;
  background: var(--e-gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.elevate .modal-oferta-un { color: var(--e-suave); }
body.elevate .modal-precos s { color: var(--e-fraco); }
body.elevate .modal-precos b { font-family: var(--e-fonte-titulo); color: var(--e-texto); font-size: 24px; }
body.elevate .modal-precos span { color: #062B1E; background: var(--e-verde); }

body.elevate .modal-resumo { color: var(--e-suave); font-size: 13.5px; }
body.elevate .modal-resumo b { color: var(--e-texto); }
body.elevate .modal-resumo.total { border-top: 1px solid var(--e-borda); margin-top: 4px; padding-top: 10px; }
body.elevate .modal-resumo.total b { color: var(--e-azul-claro); font-size: 17px; }

body.elevate .modal .botao {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--e-gradiente);
  box-shadow: var(--e-brilho-azul), inset 0 1px 0 rgba(255, 255, 255, .25);
  border-radius: 999px;
}
body.elevate .modal-recusar { color: var(--e-fraco); }
body.elevate .modal-recusar:hover { color: var(--e-texto); }

/* o aviso que sobe do rodapé ("Bônus adicionado!") */
body.elevate .aviso { background: #16213F; border: 1px solid var(--e-borda-forte); }
body.elevate .aviso.sucesso { background: linear-gradient(135deg, #0E9F6E, #10B981); border: 0; }

/* ============================================================
   "QUASE LÁ": o @ numa etapa só dele
   ============================================================ */
.p-etapa { max-width: 520px; margin: 0 auto; }
.p-etapa .v-voltar { background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
.p-titulo { margin: 16px 0 6px; text-align: center; font: 800 30px/1.15 var(--e-fonte-titulo); letter-spacing: -.03em; }
.p-sub { text-align: center; font-size: 15px; color: var(--e-suave); }

/* o pacote escolhido, em cima */
.p-pacote {
  margin-top: 22px; padding: 14px 16px;
  background: linear-gradient(160deg, rgba(59, 123, 255, .16), rgba(59, 123, 255, .04));
  border: 1px solid rgba(59, 123, 255, .45);
  border-radius: 16px;
}
.p-pacote-topo {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--e-azul-claro);
}
.p-pacote-linha { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.p-pacote-qtd { display: block; font: 800 28px/1 var(--e-fonte-titulo); letter-spacing: -.02em; }
.p-pacote-tipo { display: block; margin-top: 4px; font-size: 12.5px; color: var(--e-suave); }
.p-pacote-bonus { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 700; color: var(--e-verde); }
.p-pacote-precos { text-align: right; }
.p-pacote-precos b { display: block; font: 800 22px/1.1 var(--e-fonte-titulo); }
.p-pacote-precos s { font-size: 12.5px; color: var(--e-fraco); }

/* o campo do @ */
.p-caixa {
  margin-top: 14px; padding: 18px 16px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.p-rotulo { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.p-campo {
  display: flex; align-items: center;
  background: rgba(0, 0, 0, .25);
  border: 1.5px solid var(--e-borda-forte); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.p-campo:focus-within { border-color: var(--e-azul); box-shadow: 0 0 0 3px rgba(59, 123, 255, .2); }
.p-campo span { padding-left: 14px; font-size: 17px; color: var(--e-fraco); }
.p-campo input {
  flex: 1; min-width: 0;
  padding: 14px 14px 14px 4px;
  font: 500 17px/1.2 "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: none; border: 0; outline: 0;
}
.p-campo input::placeholder { color: var(--e-fraco); }
.p-seguro { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--e-fraco); }
.p-seguro svg { width: 13px; height: 13px; color: var(--e-verde); }
.p-pesquisar { width: 100%; margin-top: 14px; }
.p-pesquisar:disabled { opacity: .6; cursor: wait; transform: none; }
.p-pesquisar svg { width: 17px; height: 17px; }

.p-ajuda { margin-top: 12px; font-size: 13px; color: var(--e-suave); }
.p-ajuda summary { cursor: pointer; color: var(--e-azul-claro); font-weight: 600; list-style: none; text-align: center; }
.p-ajuda summary::-webkit-details-marker { display: none; }
.p-ajuda p { margin-top: 8px; line-height: 1.6; }

/* procurando: um esqueleto do cartão, para a espera parecer progresso */
.p-carregando {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px;
  margin-top: 14px; padding: 16px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.p-carregando-foto, .p-carregando div span {
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05));
  background-size: 200% 100%;
  animation: p-brilhar 1.2s linear infinite;
}
.p-carregando-foto { width: 56px; height: 56px; border-radius: 50%; }
.p-carregando div { display: grid; gap: 8px; }
.p-carregando div span { height: 12px; border-radius: 6px; }
.p-carregando div span:last-child { width: 60%; }
.p-carregando p { grid-column: 1 / -1; font-size: 13px; color: var(--e-suave); text-align: center; }
@keyframes p-brilhar { to { background-position: -200% 0; } }

/* o perfil encontrado */
.p-perfil {
  margin-top: 14px; padding: 18px 16px;
  background: var(--e-superficie); border: 1px solid rgba(52, 211, 153, .35); border-radius: 16px;
  animation: e-entrar-canto .3s cubic-bezier(.2, .8, .3, 1);
}
.p-perfil-cabeca { display: flex; align-items: center; gap: 14px; }
.p-perfil-foto {
  position: relative; flex: none;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--e-gradiente);
  box-shadow: 0 0 0 3px var(--e-fundo-2), 0 0 0 5px rgba(59, 123, 255, .5);
}
.p-perfil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; z-index: 1; }
.p-perfil-inicial { font: 800 24px/1 var(--e-fonte-titulo); color: #fff; }
.p-perfil-ok {
  position: absolute; right: -3px; bottom: -3px; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: #fff; background: #10B981; border: 2px solid var(--e-fundo-2); border-radius: 50%;
}
.p-perfil-ok svg { width: 11px; height: 11px; stroke-width: 3.5; }
.p-perfil-dados { min-width: 0; }
.p-perfil-dados > b { display: flex; align-items: center; gap: 6px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-perfil-dados > span { font-size: 13.5px; color: var(--e-suave); }
.p-perfil-verificado {
  width: 16px; height: 16px; flex: none; display: grid; place-items: center;
  color: #fff; background: #3897F0; border-radius: 50%;
}
.p-perfil-verificado svg { width: 9px; height: 9px; stroke-width: 3.5; }
.p-perfil-numeros { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--e-suave); }
.p-perfil-numeros b { color: var(--e-texto); }

.p-crescer {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin-top: 16px; padding: 12px 14px;
  background: rgba(59, 123, 255, .08); border: 1px solid rgba(59, 123, 255, .25); border-radius: 12px;
  text-align: center;
}
.p-crescer span { display: block; font-size: 11px; color: var(--e-fraco); }
.p-crescer b { font: 800 18px/1.2 var(--e-fonte-titulo); }
.p-crescer-meta { color: var(--e-azul-claro); }
.p-crescer-seta { font-size: 11.5px; font-weight: 700; color: var(--e-verde); }

.p-continuar { width: 100%; margin-top: 16px; }
.p-continuar svg { width: 17px; height: 17px; }
.p-outro {
  display: block; width: 100%; margin-top: 10px; padding: 6px;
  font: 500 13px/1.2 "Inter", system-ui, sans-serif; color: var(--e-fraco);
  background: none; border: 0; cursor: pointer;
}
.p-outro:hover { color: var(--e-texto); text-decoration: underline; }

.p-aviso { margin-top: 14px; padding: 13px 15px; font-size: 13.5px; line-height: 1.6; border-radius: 12px; }
.p-aviso a { color: inherit; font-weight: 700; }
.p-aviso-erro { color: #FCA5A5; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); }
.p-aviso-atencao { color: #FCD34D; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.p-aviso-botao {
  display: block; width: 100%; margin-top: 10px; padding: 11px;
  font: 700 13.5px/1 "Inter", system-ui, sans-serif; color: #1F1300;
  background: #FBBF24; border: 0; border-radius: 10px; cursor: pointer;
}

/* ============================================================
   CHECKOUT (passo 4)
   ============================================================ */

/* O formulário do cartão (js/cartao.js) é compartilhado com a
   página da assinatura, e usa as cores do estilo.css antigo.
   No funil, essas cores viram as da Elevate. */
body.elevate.comprar {
  --branco: rgba(255, 255, 255, .035);
  --borda: rgba(148, 172, 255, .14);
  --borda-forte: rgba(148, 172, 255, .24);
  --texto: #EDF2FF;
  --texto-suave: #A3B0CF;
  --texto-fraco: #6E7B9B;
  --laranja: #3B7BFF;
  --laranja-claro: #38D1FF;
  --laranja-escuro: #2F6BFF;
  --sombra: none;
}
body.elevate .campo, .c-campo {
  width: 100%;
  padding: 13px 14px;
  font: 500 15px/1.3 "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: rgba(0, 0, 0, .25);
  border: 1.5px solid var(--e-borda-forte); border-radius: 12px;
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
body.elevate .campo:focus, .c-campo:focus { border-color: var(--e-azul); box-shadow: 0 0 0 3px rgba(59, 123, 255, .2); }
body.elevate .campo::placeholder, .c-campo::placeholder { color: var(--e-fraco); }
body.elevate .rotulo { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--e-suave); }

.c-pagina { max-width: 1040px; margin: 0 auto; }
.c-pagina > .v-voltar { background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }
.c-titulo { margin: 14px 0 6px; font: 800 30px/1.15 var(--e-fonte-titulo); letter-spacing: -.03em; }
.c-sub { font-size: 14.5px; line-height: 1.6; color: var(--e-suave); }

/* minmax(0, 1fr) e nao a faixa automatica: sem isso a coluna cresce
   ate caber o link inteiro da publicacao escolhida (nowrap), a pagina
   fica mais larga que o celular e o iPhone da zoom sozinho. */
.c-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; align-items: start; }
.c-coluna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.c-coluna > div:empty { display: none; }
.c-lateral { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }

/* ---- blocos numerados ---- */
.c-bloco {
  padding: 18px 16px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.c-bloco-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.c-bloco-cabeca b { flex: 1; font: 700 16px/1.25 var(--e-fonte-titulo); letter-spacing: -.01em; }
.c-numero {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  font: 800 12.5px/1 var(--e-fonte-titulo); color: #fff;
  background: var(--e-gradiente); border-radius: 50%;
}
.c-obrigatorio {
  flex: none; padding: 3px 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  color: #FCD34D; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .35); border-radius: 999px;
}
.c-bloco.feito .c-obrigatorio { color: var(--e-verde); background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .35); }
.c-bloco-texto { margin: -4px 0 12px; font-size: 13.5px; line-height: 1.6; color: var(--e-suave); }
.c-bloco-texto b { color: var(--e-texto); }
.c-destaque-texto { color: var(--e-azul-claro); }

/* A ESCOLHA DAS PUBLICAÇÕES, em destaque: borda azul com brilho
   até ele escolher; depois, verde. É a etapa que mais trava. */
.c-destaque {
  position: relative;
  background: linear-gradient(170deg, rgba(59, 123, 255, .12), rgba(59, 123, 255, .03));
  border: 1.5px solid rgba(59, 123, 255, .55);
  box-shadow: 0 0 0 4px rgba(59, 123, 255, .08), 0 20px 50px -30px rgba(59, 123, 255, .8);
}
.c-destaque.feito { border-color: rgba(52, 211, 153, .45); box-shadow: 0 0 0 4px rgba(52, 211, 153, .06); }
.c-destaque.chamar { animation: c-chamar .6s ease 2; }
@keyframes c-chamar {
  50% { box-shadow: 0 0 0 8px rgba(245, 158, 11, .35); border-color: #F59E0B; }
}

.c-fotos-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.c-toque { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--e-azul-claro); }
.c-destaque.feito .c-toque { display: none; }
.c-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-foto {
  /* toque rapido em duas fotos seguidas nao vira zoom de toque duplo */
  touch-action: manipulation;
  position: relative; aspect-ratio: 1; padding: 0;
  background: rgba(255, 255, 255, .05); border: 0; border-radius: 12px; cursor: pointer;
  overflow: visible;
  transition: transform .12s ease, opacity .15s ease;
}
.c-foto img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  border-radius: 12px; outline: 3px solid transparent; outline-offset: -3px;
  transition: outline-color .15s;
}
.c-foto:hover { transform: scale(1.02); }
.c-foto.apagada { opacity: .55; }
.c-foto.marcada img { outline-color: var(--e-azul); }
.c-foto-marca {
  display: none;
  position: absolute; top: -7px; left: -7px; z-index: 1;
  min-width: 26px; height: 26px; padding: 0 7px;
  align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: var(--e-gradiente); border: 2px solid var(--e-fundo); border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.c-foto.marcada .c-foto-marca { display: flex; }
.c-foto-video {
  position: absolute; right: 6px; bottom: 6px;
  width: 20px; height: 20px; display: grid; place-items: center;
  font-size: 9px; color: #fff; background: rgba(0, 0, 0, .6); border-radius: 50%;
}
.c-carregando-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.c-carregando-fotos span {
  aspect-ratio: 1; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  background-size: 200% 100%; animation: p-brilhar 1.2s linear infinite;
}

.c-colar-caixa { margin-top: 12px; }
.c-colar-caixa summary {
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--e-azul-claro);
}
.c-colar-caixa summary::-webkit-details-marker { display: none; }
.c-colar { display: flex; gap: 8px; margin-top: 10px; }
.c-colar .c-campo { flex: 1; min-width: 0; padding: 11px 13px; font-size: 14px; }
.c-botao-mini {
  flex: none; padding: 10px 16px;
  font: 700 13.5px/1 "Inter", system-ui, sans-serif; color: #fff;
  background: var(--e-gradiente); border: 0; border-radius: 10px; cursor: pointer;
}
.c-link {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 2px;
  font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--e-azul-claro);
  background: none; border: 0; cursor: pointer;
}
.c-link svg { width: 14px; height: 14px; }
.c-link:hover { text-decoration: underline; }

.c-escolhidas { margin-top: 12px; padding: 12px 14px; font-size: 12.5px; border-radius: 12px; }
.c-escolhidas-vazio { color: var(--e-fraco); background: rgba(0, 0, 0, .2); border: 1px dashed var(--e-borda-forte); text-align: center; }
.c-escolhidas-ok { background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .3); }
.c-escolhidas-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; font-weight: 700; color: var(--e-verde); }
.c-escolhidas-titulo svg { width: 14px; height: 14px; }
.c-escolhida-linha { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.c-escolhida-linha > b { flex: none; color: var(--e-azul-claro); }
.c-escolhida-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--e-suave); }
.c-ok { color: var(--e-verde); display: grid; }
.c-ok svg { width: 15px; height: 15px; }
.c-tirar { flex: none; padding: 2px 6px; font-size: 16px; line-height: 1; color: var(--e-fraco); background: none; border: 0; cursor: pointer; }

/* ---- perfil compacto ---- */
.c-perfil {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.c-perfil-foto { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--e-fundo-2), 0 0 0 3.5px rgba(52, 211, 153, .6); }
.c-perfil-foto .p-perfil-inicial { font-size: 18px; }
.c-perfil-dados { flex: 1; min-width: 0; display: grid; }
.c-perfil-dados b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-perfil-dados > span { font-size: 12.5px; color: var(--e-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-perfil-depois { margin-top: 2px; color: var(--e-verde) !important; }
.c-perfil-depois b { color: var(--e-verde); }

/* ---- QUERO O DOBRO ---- */
.c-dobro {
  position: relative; overflow: hidden;
  padding: 20px 18px 18px; text-align: center;
  background:
    radial-gradient(260px 140px at 85% 0, rgba(56, 209, 255, .35), transparent 70%),
    linear-gradient(135deg, #2F6BFF 0%, #5B3BFF 55%, #8B2FFF 100%);
  border-radius: 18px;
  box-shadow: 0 20px 50px -20px rgba(91, 59, 255, .8);
}
.c-dobro-selo {
  display: inline-block; padding: 5px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #fff;
  background: rgba(0, 0, 0, .25); border-radius: 999px;
}
.c-dobro-titulo { display: block; margin-top: 10px; font: 800 24px/1.15 var(--e-fonte-titulo); letter-spacing: -.02em; color: #fff; }
.c-dobro-conta { margin-top: 10px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.c-dobro-conta span {
  display: inline-block; margin-left: 4px; padding: 5px 14px;
  color: #3B1FB0; background: #fff; border-radius: 999px;
}
.c-dobro-ganhe { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.c-dobro-preco { font: 800 34px/1.1 var(--e-fonte-titulo); letter-spacing: -.02em; color: #fff; }
.c-dobro-de { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.c-dobro-de s { opacity: .8; }
.c-dobro-botao {
  width: 100%; margin-top: 14px; padding: 14px;
  font: 800 15px/1 "Inter", system-ui, sans-serif; color: #3B1FB0;
  background: #fff; border: 0; border-radius: 12px; cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  transition: transform .12s ease;
}
.c-dobro-botao:hover { transform: translateY(-1px); }
.c-dobro-aceito {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(47, 107, 255, .3), rgba(139, 47, 255, .25));
  border: 1px solid rgba(139, 47, 255, .5);
  box-shadow: none;
}
.c-dobro-aceito > div { flex: 1; display: grid; gap: 2px; }
.c-dobro-aceito b { font-size: 14.5px; color: #fff; }
.c-dobro-aceito span { font-size: 12px; color: var(--e-suave); }
.c-dobro-check {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #10B981, #34D399); border-radius: 50%;
}
.c-dobro-check svg { width: 15px; height: 15px; stroke-width: 3; }

/* ---- comentários / IA ---- */
.c-caixa-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.c-caixa-cabeca > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.c-caixa-cabeca b { font-size: 14.5px; }
.c-caixa-cabeca span { font-size: 12px; color: var(--e-suave); }
.c-caixa-icone {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  color: #fff; background: var(--e-gradiente); border-radius: 10px;
}
.c-caixa-icone svg { width: 16px; height: 16px; }
.c-conta { flex: none; font-size: 13px; color: var(--e-suave); }
.c-conta.ok { color: var(--e-verde); }
.c-conta.erro { color: #FCA5A5; }
.c-area { font-size: 14px; line-height: 1.7; resize: vertical; }
.c-area.ok { border-color: rgba(52, 211, 153, .6); }
.c-area.erro { border-color: rgba(239, 68, 68, .6); }
.c-recado { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--e-suave); }
.c-recado.ok { color: var(--e-verde); }
.c-recado.erro { color: #FCA5A5; }

/* ---- avisos ---- */
.c-aviso { padding: 13px 15px; font-size: 13px; line-height: 1.6; border-radius: 12px; }
.c-aviso-ok { color: #6EE7B7; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .3); }
.c-aviso-atencao { color: #FCD34D; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); margin-bottom: 12px; }
.c-aviso-erro { color: #FCA5A5; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); }
.c-aviso-menor { margin-top: 4px; font-size: 12px; opacity: .85; }
.c-aviso .c-botao-mini { margin-top: 10px; }

/* ---- ofertas do checkout ---- */
.c-ofertas { overflow: hidden; border: 1px solid var(--e-borda); border-radius: 16px; background: var(--e-superficie); }
.c-ofertas-topo { padding: 16px; text-align: center; background: linear-gradient(135deg, rgba(47, 107, 255, .35), rgba(56, 209, 255, .15)); }
.c-ofertas-topo span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--e-azul-claro); }
.c-ofertas-topo b { display: block; margin-top: 4px; font: 800 17px/1.2 var(--e-fonte-titulo); }
.c-ofertas-topo p { margin-top: 3px; font-size: 12.5px; color: var(--e-suave); }
.c-ofertas-corpo { padding: 16px 14px 6px; }
.c-grupo { margin-bottom: 16px; }
.c-grupo-nome { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--e-suave); text-transform: uppercase; }
.c-grupo-nome svg { width: 14px; height: 14px; }
.c-grupo-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.c-oferta {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 14px 8px 10px;
  background: rgba(0, 0, 0, .2); border: 1.5px solid var(--e-borda); border-radius: 12px;
}
.c-oferta.ativa { border-color: var(--e-azul); background: rgba(59, 123, 255, .1); }
.c-oferta-selo {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; color: #062B1E; background: var(--e-verde); border-radius: 999px;
}
.c-oferta-qtd { font: 800 17px/1.1 var(--e-fonte-titulo); }
.c-oferta-nome { max-width: 100%; margin-top: 2px; font-size: 10.5px; color: var(--e-fraco); line-height: 1.3; overflow-wrap: anywhere; }
.c-oferta-emoji { margin: 5px 0 2px; font-size: 15px; }
.c-oferta s { font-size: 11px; color: var(--e-fraco); }
.c-oferta-preco { font-size: 15px; color: var(--e-texto); }
.c-oferta-botao {
  width: 100%; margin-top: 8px; padding: 8px 6px;
  font: 700 12.5px/1 "Inter", system-ui, sans-serif; color: #fff;
  background: linear-gradient(135deg, #10B981, #34D399); border: 0; border-radius: 8px; cursor: pointer;
}
.c-oferta.ativa .c-oferta-botao { background: var(--e-superficie-2); color: var(--e-suave); }
.c-ofertas-mais {
  width: 100%; margin-bottom: 12px; padding: 11px;
  font: 700 13px/1 "Inter", system-ui, sans-serif; color: var(--e-azul-claro);
  background: none; border: 1.5px dashed rgba(59, 123, 255, .5); border-radius: 12px; cursor: pointer;
}
.c-bloco-oferta { margin-top: 12px; padding: 14px 12px; background: rgba(0, 0, 0, .18); }
.c-bloco-oferta .c-fotos { grid-template-columns: repeat(4, 1fr); }

/* ---- dados ---- */
.c-rotulo { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--e-suave); }
.c-rotulo b { color: #FCA5A5; }
.c-rotulo span { font-weight: 400; color: var(--e-fraco); }
.c-dupla { display: grid; gap: 14px; margin-top: 14px; }
.c-nota { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: var(--e-fraco); }

/* ---- pagamento ---- */
.c-metodos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.c-metodo {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; text-align: left;
  font-family: "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: rgba(0, 0, 0, .2); border: 1.5px solid var(--e-borda-forte); border-radius: 12px; cursor: pointer;
}
.c-metodo.ativo { border-color: var(--e-azul); background: rgba(59, 123, 255, .12); }
.c-metodo.apagado { opacity: .6; }
.c-metodo-icone { color: var(--e-azul-claro); display: grid; }
.c-metodo-texto { display: grid; gap: 2px; }
.c-metodo-texto b { font-size: 14.5px; }
.c-metodo-texto span { font-size: 11.5px; color: var(--e-fraco); }
.c-metodo-marca {
  display: none;
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; place-items: center;
  color: #fff; background: linear-gradient(135deg, #10B981, #34D399); border-radius: 50%;
}
.c-metodo-marca svg { width: 12px; height: 12px; stroke-width: 3; }
.c-metodo.ativo .c-metodo-marca { display: grid; }

/* ---- resumo + finalizar ---- */
.c-resumo { padding: 16px; background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px; }
.c-resumo-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; }
.c-resumo-titulo svg { width: 15px; height: 15px; }
.c-resumo-linha { padding: 6px 0; }
.c-resumo-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.c-resumo-item span { color: var(--e-suave); }
.c-resumo-item small { display: block; font-size: 11px; color: #C4B5FD; }
.c-resumo-item b { white-space: nowrap; }
.c-resumo-linha.destaque .c-resumo-item span { color: var(--e-texto); }
.c-resumo-rodape { margin: 4px 0; padding-left: 10px; border-left: 2px solid var(--e-borda); font-size: 11px; color: var(--e-fraco); }
.c-resumo-pubs { margin: 8px 0 2px; padding-left: 10px; border-left: 2px solid var(--e-borda); }
.c-resumo-nota { margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--e-azul-claro); }
.c-resumo-pub { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.c-resumo-pub img, .c-resumo-pub > span {
  width: 26px; height: 26px; flex: none; object-fit: cover; border-radius: 6px;
  display: grid; place-items: center; font-size: 10px; color: var(--e-fraco); background: rgba(255, 255, 255, .06);
}
.c-resumo-pub a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--e-azul-claro); text-decoration: none; }
.c-resumo-pub b { flex: none; font-size: 12px; }
.c-resumo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--e-borda);
}
.c-resumo-total b:first-child { font-size: 15px; }
.c-resumo-total b:last-child { font: 800 26px/1 var(--e-fonte-titulo); letter-spacing: -.02em; }

.c-finalizar { width: 100%; padding: 17px 20px; font-size: 16px; }
.c-finalizar:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }
.c-finalizar svg { width: 17px; height: 17px; }
.c-selos { list-style: none; display: grid; gap: 7px; padding: 4px 4px 0; }
.c-selos li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--e-fraco); }
.c-selos svg { width: 14px; height: 14px; color: var(--e-verde); }

/* selo da oferta de saída (janela do fim) */
body.elevate .modal-selo {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: var(--e-gradiente); border-radius: 999px;
}

@media (min-width: 620px) {
  .c-dupla { grid-template-columns: 1fr 1fr; }
  .c-fotos { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .c-titulo { font-size: 36px; }
}
@media (min-width: 900px) {
  /* o resumo e o botão acompanham a rolagem, na lateral */
  .c-grade { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .c-lateral { position: sticky; top: 92px; }
  .c-fotos { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   PAGAMENTO (pagamento.html)
   ============================================================ */
body.pagamento .pagina { max-width: 1040px; }
.pg { max-width: 1040px; margin: 0 auto; }
.pg-cabeca { margin-bottom: 20px; }
.pg-titulo { margin: 14px 0 8px; font: 800 30px/1.15 var(--e-fonte-titulo); letter-spacing: -.03em; text-wrap: balance; }
.pg-titulo em {
  font-style: normal;
  background: var(--e-gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pg-sub { font-size: 14.5px; line-height: 1.6; color: var(--e-suave); max-width: 560px; }
.pg-sub b { color: var(--e-texto); }

.pg-grade { display: grid; gap: 14px; align-items: start; }
.pg-lateral { display: grid; gap: 12px; }
.pg-cartao {
  padding: 18px 16px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 18px;
}
.pg-centro { text-align: center; padding: 26px 18px; }
.pg-emoji { font-size: 36px; line-height: 1; }
.pg-caixa-titulo { display: block; margin-top: 12px; font: 700 18px/1.3 var(--e-fonte-titulo); }
.pg-caixa-texto { margin: 8px auto 0; max-width: 420px; font-size: 14px; line-height: 1.6; color: var(--e-suave); }
.pg-vencido { border-color: rgba(245, 158, 11, .4); }
.pg-botao { width: 100%; margin-top: 16px; }
.pg-botao svg { width: 18px; height: 18px; }

/* o cartão do PIX */
.pg-pix {
  padding: 0; overflow: hidden;
  background: linear-gradient(170deg, rgba(59, 123, 255, .12), rgba(59, 123, 255, .03));
  border: 1.5px solid rgba(59, 123, 255, .5);
  box-shadow: 0 30px 60px -35px rgba(59, 123, 255, .8);
}
.pg-topo-valor {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--e-borda);
  background: rgba(0, 0, 0, .15);
}
.pg-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--e-fraco); }
.pg-valor { font: 800 30px/1.1 var(--e-fonte-titulo); letter-spacing: -.02em; }
.pg-centro .pg-valor { margin-top: 16px; }
.pg-prazo {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  font-size: 12.5px; color: #FCD34D;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); border-radius: 999px;
}
.pg-prazo svg { width: 14px; height: 14px; }
.pg-prazo b { font-variant-numeric: tabular-nums; }

.pg-corpo { display: grid; gap: 18px; padding: 18px; }
.pg-codigo textarea {
  width: 100%; padding: 12px 14px;
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--e-suave);
  background: rgba(0, 0, 0, .3); border: 1px dashed var(--e-borda-forte); border-radius: 12px;
  resize: none; word-break: break-all;
}
.pg-copiar .pg-botao { margin-top: 10px; padding: 17px; font-size: 16px; }
.pg-copiar .pg-botao.copiado { background: linear-gradient(135deg, #10B981, #34D399); box-shadow: 0 10px 30px -8px rgba(16, 185, 129, .6); }

.pg-passos { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.pg-passos li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--e-suave); }
.pg-passos li p { flex: 1; min-width: 0; }
.pg-passos li b { color: var(--e-texto); }
.pg-passo-n {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--e-azul-claro);
  background: rgba(59, 123, 255, .14); border-radius: 50%;
}

.pg-qr { display: grid; justify-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--e-borda); }
.pg-qr-rotulo { font-size: 12.5px; color: var(--e-fraco); text-align: center; }
.pg-so-computador { display: none; }
.pg-qr-moldura {
  padding: 12px;
  background: #fff; border-radius: 18px;
  box-shadow: 0 0 0 4px rgba(59, 123, 255, .25), 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.pg-qr-moldura img { display: block; width: 180px; height: 180px; image-rendering: pixelated; }
.pg-qr-vazio { display: grid; place-items: center; width: 180px; height: 180px; padding: 20px; font-size: 13px; color: #334; text-align: center; }

.pg-status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; font-size: 13.5px; font-weight: 600; color: var(--e-suave);
  border-top: 1px solid var(--e-borda);
}
.pg-centro .pg-status { border-top: 0; margin-top: 12px; }
.pg-status .girando { width: 15px; height: 15px; border-width: 2px; margin: 0; }

.c-resumo-item .pg-tipo { display: block; font-size: 11.5px; color: var(--e-fraco); }

/* confirmado */
.pg-pago { max-width: 620px; }
.pg-pago-topo { text-align: center; margin: 10px 0 22px; }
.pg-check {
  width: 76px; height: 76px; margin: 0 auto 6px;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #10B981, #34D399); border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(52, 211, 153, .15), 0 20px 50px -15px rgba(16, 185, 129, .7);
  animation: pg-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
.pg-check svg { width: 36px; height: 36px; stroke-width: 3; }
@keyframes pg-pop { from { transform: scale(.4); opacity: 0; } }
.pg-pago .pg-sub { margin: 0 auto; }
.pg-coluna { display: grid; gap: 14px; }
.pg-bloco-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.pg-bloco-titulo svg { width: 16px; height: 16px; color: var(--e-azul-claro); }
.pg-linha { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.pg-linha span { color: var(--e-suave); }
.pg-linha b { white-space: nowrap; }
.pg-prazos-notas { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--e-borda); font-size: 12.5px; line-height: 1.6; color: var(--e-fraco); }
.pg-prazos-notas p + p { margin-top: 6px; }
.pg-reposicao { color: var(--e-verde); font-weight: 600; }
.pg-app { padding: 16px; background: linear-gradient(135deg, rgba(47, 107, 255, .2), rgba(56, 209, 255, .08)); border: 1px solid rgba(59, 123, 255, .45); border-radius: 16px; }
.pg-app-topo { display: flex; align-items: center; gap: 13px; }
.pg-app-topo img { border-radius: 14px; flex: none; }
.pg-app-topo div { display: grid; gap: 3px; }
.pg-app-topo b { font-size: 15px; }
.pg-app-topo span { font-size: 12.5px; line-height: 1.5; color: var(--e-suave); }
.pg-app .pg-botao { margin-top: 12px; }
.pg-app-passo { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; }
.pg-app-num { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--e-gradiente); color: #fff; font-size: 12.5px; font-weight: 800; }
.pg-app-num svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pg-app-feito { color: var(--e-verde); }
.pg-app-feito .pg-app-num { background: rgba(52, 211, 153, .16); color: var(--e-verde); }
.pg-app-corpo { margin-left: 34px; }
.pg-app-corpo .pg-botao { margin-top: 10px; }
.pg-app-nota { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--e-suave); }
.pg-app-nota b { color: var(--e-texto); }
.pg-acompanhar { font-size: 13px; line-height: 1.6; text-align: center; color: var(--e-suave); }
.pg-acompanhar a { color: var(--e-azul-claro); font-weight: 700; }
.pg-botoes { display: grid; gap: 10px; }
.pg-botoes svg { width: 17px; height: 17px; }

@media (min-width: 620px) {
  .pg-titulo { font-size: 38px; }
  .pg-botoes { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .pg-grade { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
  .pg-lateral { position: sticky; top: 92px; }
  /* no computador o QR vai para a esquerda, grande: é para
     escanear com o celular */
  .pg-corpo { grid-template-columns: auto 1fr; align-items: center; gap: 26px; padding: 24px; }
  .pg-qr { order: -1; padding-top: 0; border-top: 0; }
  .pg-qr-moldura img, .pg-qr-vazio { width: 220px; height: 220px; }
  .pg-so-celular { display: none; }
  .pg-so-computador { display: block; }
}

/* ============================================================
   SALDO NO TOPO (js/conta.js) - a moedinha com R$ e US$
   ============================================================ */
.e-saldo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  text-decoration: none; color: var(--e-texto);
  background: linear-gradient(135deg, rgba(251, 191, 36, .16), rgba(245, 158, 11, .06));
  border: 1px solid rgba(251, 191, 36, .4); border-radius: 999px;
  transition: border-color .15s;
}
.e-saldo:hover { border-color: rgba(251, 191, 36, .8); }
.e-saldo-icone {
  width: 26px; height: 26px; flex: none; padding: 3px;
  color: #3B2A00; background: linear-gradient(135deg, #FDE68A, #F59E0B); border-radius: 50%;
  stroke-width: 2.2;
}
.e-saldo span { display: grid; line-height: 1.15; }
.e-saldo b { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.e-saldo small { font-size: 10.5px; color: var(--e-suave); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .e-saldo small { display: none; }
  .e-saldo { padding-right: 10px; }
}

/* ============================================================
   MINHA CONTA (meus-pedidos)
   ============================================================ */
body.conta .pagina { max-width: 760px; }
.m-entrar { max-width: 440px; margin: 10px auto 0; text-align: center; }
.m-entrar .pg-sub { margin: 0 auto; }
.m-cartao {
  padding: 18px 16px; text-align: left;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.m-entrar .m-cartao { margin-top: 20px; padding: 22px 18px; }
.m-recado { margin-bottom: 14px; }
.m-criar-aqui { margin-top: 10px; }
.m-botao { width: 100%; margin-top: 16px; }
.m-espaco { margin-top: 14px; }
.m-rodape { margin-top: 16px; text-align: center; font-size: 13.5px; color: var(--e-suave); }
.m-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.m-link-fraco { color: var(--e-fraco); font-weight: 500; }
.m-centro { display: flex; margin: 10px auto 0; }
.m-codigo { text-align: center; font: 800 26px/1 var(--e-fonte-titulo); letter-spacing: 10px; }

.m-conta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-conta-topo .pg-titulo { margin: 6px 0; }
.m-abas {
  display: flex; gap: 4px; margin: 14px 0 4px; padding: 4px;
  background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
}
.m-abas::-webkit-scrollbar { display: none; }
.m-abas button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; white-space: nowrap;
  font: 600 13.5px/1 "Inter", system-ui, sans-serif; color: var(--e-suave);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
}
.m-abas button.ativa { color: #fff; background: var(--e-gradiente); box-shadow: 0 6px 20px -8px rgba(59, 123, 255, .8); }
.m-aba-n { font-size: 11.5px; font-weight: 700; opacity: .8; }
.m-aba-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--e-verde); }
.m-sub { margin: 14px 0 0; }
.m-bloco { margin-top: 14px; }

/* pedidos */
.m-pedidos { display: grid; gap: 12px; margin-top: 14px; }
.m-vazio { text-align: center; }
.m-vazio p { margin-bottom: 14px; color: var(--e-suave); }
.m-pedido {
  padding: 16px; background: var(--e-superficie); border: 1px solid var(--e-borda); border-radius: 16px;
}
.m-pedido-brinde { border-color: rgba(251, 191, 36, .5); }
.m-pedido-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-pedido-codigo { font: 700 15px/1 var(--e-fonte-titulo); }
.m-pedido-total { margin-left: auto; font: 800 16px/1 var(--e-fonte-titulo); }
.m-pedido-data { margin-top: 6px; font-size: 12px; color: var(--e-fraco); }
.m-itens { display: grid; gap: 10px; margin-top: 12px; }
.m-item { padding-left: 10px; border-left: 2px solid var(--e-borda-forte); }
.m-item-nome { font-size: 13.5px; }
.m-item-nome span { font-size: 12px; color: var(--e-fraco); }
.m-item-nota { margin-top: 2px; font-size: 11.5px; color: var(--e-fraco); }
.m-barra { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.m-barra > div, .m-barra-grande { flex: 1; height: 6px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 99px; }
.m-barra > div span, .m-barra-grande span { display: block; height: 100%; background: var(--e-gradiente); border-radius: 99px; }
.m-barra small { flex: none; font-size: 11px; color: var(--e-suave); }
.m-barra-grande { height: 9px; margin: 10px 0 4px; }
.m-pedido-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m-pedido-botoes > * { flex: 1 1 140px; }
.m-botao-p { padding: 11px 14px; font-size: 13.5px; }
.m-botao-verde {
  padding: 11px 14px; font: 700 13.5px/1 "Inter", system-ui, sans-serif; color: #6EE7B7;
  background: rgba(52, 211, 153, .1); border: 1.5px solid rgba(52, 211, 153, .45); border-radius: 999px; cursor: pointer;
}

.m-selo {
  display: inline-block; padding: 3px 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px;
}
.m-selo-ok { color: #6EE7B7; background: rgba(52, 211, 153, .12); }
.m-selo-azul { color: var(--e-azul-claro); background: rgba(59, 123, 255, .15); }
.m-selo-atencao { color: #FCD34D; background: rgba(245, 158, 11, .14); }
.m-selo-erro { color: #FCA5A5; background: rgba(239, 68, 68, .14); }
.m-selo-cinza { color: var(--e-fraco); background: rgba(255, 255, 255, .06); }

.m-reposicao { margin-top: 12px; padding: 13px; font-size: 13px; line-height: 1.6; border-radius: 12px; }
.m-reposicao p { color: inherit; }
.m-reposicao .pg-botao { margin-top: 12px; }
.m-reposicao-neutra { color: var(--e-suave); background: rgba(0, 0, 0, .2); border: 1px solid var(--e-borda); }
.m-reposicao-erro { color: #FCA5A5; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); }
.m-reposicao-ok { color: #6EE7B7; background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .3); }
.m-reposicao-atencao { color: #FCD34D; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.m-rep-linha { padding: 8px 0; border-bottom: 1px solid var(--e-borda); }
.m-rep-linha > b { display: block; margin-bottom: 3px; color: var(--e-texto); }
.m-rep-linha p b { color: var(--e-texto); }
.m-rep-linha p { color: var(--e-suave); font-size: 12.5px; }

/* reposicao: espera de 24h, links das publicacoes, pedido misto */
.m-botao-verde.m-botao-espera { color: var(--e-suave); background: rgba(255, 255, 255, .04); border-color: var(--e-borda-forte); }
.m-botao-outros { display: block; width: 100%; margin-top: 10px; }
.m-publicacoes { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 6px; }
.m-publicacoes a { padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--e-azul-claro); text-decoration: none; background: rgba(59, 123, 255, .1); border: 1px solid rgba(59, 123, 255, .3); border-radius: 99px; }
.m-publicacoes span { align-self: center; font-size: 11px; color: var(--e-fraco); }

/* pop-up da reposicao (Meus pedidos) */
.rp-fundo { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 6, 18, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: rp-entra-fundo .18s ease-out; }
.rp-caixa { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto; padding: 26px 22px 20px; text-align: center; color: var(--e-texto); background: linear-gradient(180deg, #0F1B38, #0A1328); border: 1px solid var(--e-borda-forte); border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: rp-entra .22s cubic-bezier(.2, .9, .3, 1.2); }
.rp-fechar { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; font-size: 20px; line-height: 1; color: var(--e-suave); background: rgba(255, 255, 255, .06); border: 0; border-radius: 50%; cursor: pointer; }
.rp-icone { width: 62px; height: 62px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 28px; font-weight: 800; border-radius: 50%; }
.rp-sucesso { color: #34D399; background: rgba(52, 211, 153, .14); }
.rp-aviso { color: #FCD34D; background: rgba(245, 158, 11, .16); }
.rp-info { color: var(--e-azul-claro); background: rgba(59, 123, 255, .16); }
.rp-erro { color: #FCA5A5; background: rgba(239, 68, 68, .16); }
.rp-titulo { margin: 0 0 8px; font-family: var(--e-fonte-titulo); font-size: 18.5px; line-height: 1.3; }
.rp-texto { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: var(--e-suave); white-space: pre-line; }
.rp-motivos { display: grid; gap: 9px; margin: 14px 0 4px; text-align: left; }
.rp-motivo { display: flex; gap: 11px; padding: 11px 12px; font-size: 13px; line-height: 1.5; color: var(--e-suave); background: var(--e-superficie-2); border: 1px solid var(--e-borda); border-radius: 12px; }
.rp-motivo > span { font-size: 20px; line-height: 1.2; }
.rp-motivo b { display: block; margin-bottom: 1px; color: var(--e-texto); }
.rp-detalhe { margin: 12px 0 2px; padding: 11px 12px; font-size: 12.5px; line-height: 1.6; color: var(--e-suave); text-align: left; white-space: pre-line; background: var(--e-superficie-2); border: 1px solid var(--e-borda); border-radius: 12px; }
.rp-numeros { margin: 12px 0 2px; text-align: left; }
.rp-rodape { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--e-fraco); }
.rp-codigo { display: inline-flex; align-items: center; gap: 8px; margin: 10px auto 0; padding: 7px 8px 7px 12px; font-size: 13px; color: var(--e-azul-claro); background: rgba(59, 123, 255, .08); border: 1px dashed rgba(59, 123, 255, .45); border-radius: 10px; }
.rp-codigo b { color: var(--e-texto); }
.rp-copiar { padding: 5px 9px; font: 700 12px/1 "Inter", system-ui, sans-serif; color: #fff; background: var(--e-gradiente); border: 0; border-radius: 7px; cursor: pointer; }
.rp-acoes { display: grid; gap: 9px; margin-top: 18px; }
.rp-botao { width: 100%; }
.rp-rodinha { width: 54px; height: 54px; margin: 4px auto 16px; border: 5px solid rgba(59, 123, 255, .2); border-top-color: var(--e-azul); border-radius: 50%; animation: rp-gira .9s linear infinite; }
.rp-link { display: block; margin: 14px auto 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--e-suave); text-decoration: underline; background: none; border: 0; cursor: pointer; }
@keyframes rp-gira { to { transform: rotate(360deg); } }
@keyframes rp-entra { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rp-entra-fundo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rp-fundo, .rp-caixa { animation: none; } .rp-rodinha { animation-duration: 2.5s; } }

.m-brinde-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.m-brinde-topo b { font-size: 14px; }
.m-brinde-topo span { margin-left: auto; font-size: 12px; color: var(--e-fraco); }
.m-brinde-pronto {
  padding: 18px; color: #fff; text-align: center;
  background: linear-gradient(135deg, #2F6BFF, #5B3BFF 55%, #8B2FFF); border-radius: 18px;
}
.m-brinde-pronto span { font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .9; }
.m-brinde-pronto b { display: block; margin-top: 6px; font: 800 20px/1.2 var(--e-fonte-titulo); }
.m-brinde-pronto p { margin-top: 4px; font-size: 13px; opacity: .9; }
.m-app .pg-app-topo { align-items: center; }
.m-app .pg-app-topo > div { flex: 1; }

/* carteira */
.m-saldo {
  position: relative; overflow: hidden;
  padding: 22px 20px;
  background:
    radial-gradient(300px 160px at 90% 0, rgba(251, 191, 36, .22), transparent 70%),
    linear-gradient(150deg, #13224A, #0A1228);
  border: 1px solid rgba(251, 191, 36, .35); border-radius: 18px;
}
.m-saldo-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FCD34D; }
.m-saldo-valor { display: block; margin-top: 6px; font: 800 38px/1.05 var(--e-fonte-titulo); letter-spacing: -.02em; }
.m-saldo-outro { display: block; margin-top: 4px; font-size: 14px; color: var(--e-suave); }
.m-saldo p { margin-top: 10px; font-size: 13px; color: var(--e-suave); max-width: 460px; }
.m-metodos { margin-top: 6px; }
.m-valor { margin-top: 2px; }
.m-valor span { font-size: 15px; }
.m-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-sugestoes button {
  padding: 8px 14px; font: 600 13px/1 "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: var(--e-superficie-2); border: 1px solid var(--e-borda-forte); border-radius: 999px; cursor: pointer;
}
.m-sugestoes button:hover { border-color: var(--e-azul); }
.m-bonus-regra { margin-top: 10px; color: #FCD34D; }
.m-bonus-regra b { color: #FCD34D; }
.m-previa {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin-top: 12px; padding: 12px 14px;
  background: rgba(59, 123, 255, .1); border: 1px solid rgba(59, 123, 255, .35); border-radius: 12px;
}
.m-previa span { font-size: 13px; color: var(--e-suave); }
.m-previa b { font: 800 20px/1 var(--e-fonte-titulo); }
.m-previa small { font-size: 12.5px; font-weight: 700; color: var(--e-verde); }
.m-previa .m-previa-erro { color: #FCA5A5; }
.m-paypal { margin-top: 14px; padding: 14px; display: grid; gap: 8px; background: rgba(0, 0, 0, .2); border: 1px solid var(--e-borda); border-radius: 12px; font-size: 13.5px; color: var(--e-suave); }
.m-paypal b { color: var(--e-texto); }
.m-paypal .c-botao-mini { justify-self: start; text-decoration: none; }
.m-qr { margin: 6px auto 12px; width: max-content; }
.m-qr img { width: 180px; height: 180px; display: block; }
.m-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--e-borda); font-size: 13.5px;
}
.m-linha:last-of-type { border-bottom: 0; }
.m-linha > span:first-child { display: grid; gap: 2px; }
.m-linha small { font-size: 11.5px; color: var(--e-fraco); }
.m-mais { color: var(--e-verde); }
.m-menos { color: var(--e-suave); }
.m-sem-saque { margin-top: 12px; }

/* assinatura */
.m-assinatura-convite { display: grid; gap: 10px; justify-items: start; }
.m-assinatura-convite b { font: 800 20px/1.2 var(--e-fonte-titulo); }
.m-assinatura-convite p { font-size: 14px; color: var(--e-suave); line-height: 1.6; }
.m-ass-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.m-ass-topo > div { display: grid; gap: 4px; font-size: 13px; color: var(--e-suave); }
.m-ass-topo > div > b { font-size: 16px; color: var(--e-texto); }
.m-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.m-numero { display: grid; gap: 2px; padding: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--e-borda); border-radius: 12px; }
.m-numero b { font: 800 20px/1.1 var(--e-fonte-titulo); }
.m-numero span { font-size: 12px; font-weight: 600; }
.m-numero small { font-size: 11px; color: var(--e-fraco); }
.m-ass-pubs { display: grid; gap: 10px; margin: 14px 0; }
.m-ass-pub { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--e-texto); }
.m-ass-pub img, .m-ass-pub > span { width: 44px; height: 44px; flex: none; object-fit: cover; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.m-ass-pub div { display: grid; font-size: 12.5px; }
.m-ass-pub small { color: #FCD34D; }
.m-ass-pub small.m-mais { color: var(--e-verde); }
.c-adicionar-saldo { margin-top: 10px; }
.c-campo.travado { opacity: .75; cursor: not-allowed; }

/* Celular com a moedinha do saldo no topo: não cabe tudo numa
   linha. O nome "Elevate Social" sai (o ícone da marca fica) e
   o seletor de idioma encolhe. */
@media (max-width: 460px) {
  .e-topo-linha:has(.e-saldo) .e-logo-nome { display: none; }
  .e-topo-linha:has(.e-saldo) { gap: 10px; }
  .e-topo-linha:has(.e-saldo) .e-topo-acoes { gap: 8px; }
}
.c-resumo-reais { margin-top: 6px; text-align: right; font-size: 11.5px; color: var(--e-fraco); }
.pg-valor-usd { font-size: 13px; color: var(--e-suave); }

/* ============================================================
   BOTÃO DE AJUDA (js/suporte.js) no visual da Elevate

   O verde do WhatsApp continua - é por ele que a pessoa
   reconhece o botão -, mas como DESTAQUE (o ícone, o anel, o
   ponto de "online") sobre o azul-marinho da marca, e não mais
   como um círculo verde chapado colado no canto.
   ============================================================ */
body.elevate .zap { right: 16px; bottom: 18px; }

body.elevate .zap-botao {
  position: relative;
  width: 58px; height: 58px;
  color: #25D366;
  /* anel em degradê: o fundo pinta o miolo, a borda transparente
     deixa aparecer o degradê de trás */
  background:
    linear-gradient(160deg, #13234D, #0A1228) padding-box,
    linear-gradient(135deg, #25D366, #38D1FF) border-box;
  border: 2px solid transparent;
  box-shadow: 0 10px 30px -6px rgba(37, 211, 102, .45), 0 0 0 6px rgba(5, 10, 24, .35);
  animation: none;
}
body.elevate .zap-botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -6px rgba(37, 211, 102, .6), 0 0 0 6px rgba(5, 10, 24, .35);
}
body.elevate .zap-botao svg { width: 27px; height: 27px; }
body.elevate .zap-botao.aberto { color: #fff; }

/* o pontinho de "online", com um pulso discreto */
body.elevate .zap-botao::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #25D366; border: 2px solid #0A1228;
  animation: zap-online 2.2s ease-out infinite;
}
body.elevate .zap-botao.aberto::after,
body.elevate .zap-botao-neutro::after { display: none; }
@keyframes zap-online {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* sem WhatsApp cadastrado: o botão é da marca, não verde */
body.elevate .zap-botao-neutro {
  color: #fff;
  background:
    linear-gradient(160deg, #13234D, #0A1228) padding-box,
    var(--e-gradiente) border-box;
  box-shadow: var(--e-brilho-azul);
}

/* ---- o balão ---- */
body.elevate .zap-balao {
  gap: 4px;
  padding: 10px 8px 10px 12px;
  background: rgba(12, 20, 44, .96);
  border: 1px solid var(--e-borda-forte);
  border-radius: 16px 16px 4px 16px;
  box-shadow: var(--e-sombra);
  backdrop-filter: blur(12px);
}
body.elevate .zap-balao-texto {
  display: flex; align-items: center; gap: 9px;
  font: 600 13px/1.35 "Inter", system-ui, sans-serif; color: var(--e-texto);
}
body.elevate .zap-balao-texto::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: #25D366; box-shadow: 0 0 0 3px rgba(37, 211, 102, .2);
}
body.elevate .zap-balao-fechar { color: var(--e-fraco); }
body.elevate .zap-balao-fechar:hover { color: var(--e-texto); }

/* ---- o painel ---- */
body.elevate .zap-painel {
  width: min(310px, calc(100vw - 32px));
  padding: 16px;
  background:
    radial-gradient(240px 120px at 100% 0, rgba(37, 211, 102, .14), transparent 70%),
    linear-gradient(170deg, #111C3D, #0A1228);
  border: 1px solid var(--e-borda-forte);
  border-radius: 18px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8);
}
body.elevate .zap-painel-titulo { font: 700 15.5px/1.3 var(--e-fonte-titulo); color: var(--e-texto); }
body.elevate .zap-painel-fechar { color: var(--e-fraco); }
body.elevate .zap-painel-fechar:hover { color: var(--e-texto); background: var(--e-superficie-2); }
body.elevate .zap-nota {
  color: var(--e-suave);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--e-borda);
  border-radius: 12px;
}
body.elevate .zap-opcao {
  padding: 10px 12px 10px 10px;
  font: 600 14.5px/1.2 "Inter", system-ui, sans-serif; color: var(--e-texto);
  background: var(--e-superficie);
  border: 1px solid var(--e-borda);
  border-radius: 14px;
}
body.elevate .zap-opcao:hover { background: var(--e-superficie-2); border-color: var(--e-borda-forte); }
body.elevate .zap-opcao-icone { width: 36px; height: 36px; border-radius: 11px; }
body.elevate .zap-opcao-icone.verde { background: linear-gradient(135deg, #25D366, #128C7E); }
body.elevate .zap-opcao-icone.escuro { background: var(--e-gradiente); }

/* ---- a janela do vídeo tutorial ---- */
body.elevate .zap-video { background: rgba(3, 6, 16, .85); backdrop-filter: blur(4px); }
body.elevate .zap-video-caixa { background: #0A1228; border: 1px solid var(--e-borda-forte); }
body.elevate .zap-video-topo { border-bottom-color: var(--e-borda); }
body.elevate .zap-video-titulo { color: var(--e-texto); }
body.elevate .zap-video-fechar { color: var(--e-suave); }
body.elevate .zap-video-fechar:hover { color: var(--e-texto); background: var(--e-superficie-2); }

@media (prefers-reduced-motion: reduce) {
  body.elevate .zap-botao::after { animation: none; }
}

/* ------------------------------------------------------------
   O painel de ajuda PREMIUM (js/suporte.js, só nas páginas da
   Elevate): parece um atendimento - quem atende, status online,
   a mensagem de boas-vindas e opções com subtítulo.
   ------------------------------------------------------------ */
body.elevate .zap-painel.zap-premium {
  width: min(340px, calc(100vw - 32px));
  padding: 0; overflow: hidden;
  background: #0B1430;
  border: 1px solid var(--e-borda-forte);
  border-radius: 22px;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .03) inset;
}

.zap-cabeca {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 16px 16px;
  background:
    radial-gradient(220px 120px at 90% -20%, rgba(56, 209, 255, .35), transparent 70%),
    linear-gradient(135deg, #1B3FA8, #2F6BFF 60%, #2A8BFF);
}
.zap-avatar {
  position: relative; flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.zap-avatar svg { width: 26px; height: 26px; }
.zap-avatar i {
  position: absolute; right: -3px; bottom: -3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #25D366; border: 2.5px solid #2463F0;
}
.zap-quem { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zap-quem b { font: 700 15px/1.2 var(--e-fonte-titulo); color: #fff; }
.zap-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .85); }
.zap-status i {
  width: 7px; height: 7px; flex: none; border-radius: 50%; background: #4ADE80;
  animation: zap-online 2.2s ease-out infinite;
}
body.elevate .zap-premium .zap-painel-fechar { color: rgba(255, 255, 255, .8); }
body.elevate .zap-premium .zap-painel-fechar:hover { color: #fff; background: rgba(255, 255, 255, .15); }

.zap-corpo { padding: 16px 14px 6px; }

/* a boas-vindas, como uma mensagem de conversa */
.zap-msg {
  position: relative;
  margin: 0 0 14px 6px; padding: 12px 14px;
  background: var(--e-superficie-2);
  border: 1px solid var(--e-borda);
  border-radius: 4px 16px 16px 16px;
  animation: zap-subir .3s cubic-bezier(.2, .8, .3, 1) .05s both;
}
body.elevate .zap-premium .zap-painel-titulo {
  display: block; font: 700 15px/1.3 var(--e-fonte-titulo); color: var(--e-texto);
}
body.elevate .zap-premium .zap-nota {
  margin: 4px 0 0; padding: 0;
  font-size: 13px; line-height: 1.5; color: var(--e-suave);
  background: none; border: 0; border-radius: 0;
}

body.elevate .zap-premium .zap-opcoes { gap: 8px; }
body.elevate .zap-premium .zap-opcao {
  gap: 12px; padding: 11px 12px 11px 11px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--e-borda);
  border-radius: 16px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
body.elevate .zap-premium .zap-opcao:hover {
  background: rgba(59, 123, 255, .1);
  border-color: rgba(59, 123, 255, .45);
  transform: translateY(-1px);
}
.zap-opcao-bloco { flex: 1; min-width: 0; display: grid; gap: 2px; }
.zap-opcao-bloco .zap-opcao-texto { font: 600 14.5px/1.2 "Inter", system-ui, sans-serif; color: var(--e-texto); }
.zap-opcao-sub { font: 500 12px/1.3 "Inter", system-ui, sans-serif; color: var(--e-fraco); }
.zap-opcao-seta { flex: none; color: var(--e-fraco); display: grid; transition: transform .15s, color .15s; }
.zap-opcao-seta svg { width: 16px; height: 16px; }
body.elevate .zap-premium .zap-opcao:hover .zap-opcao-seta { color: var(--e-azul-claro); transform: translateX(2px); }
body.elevate .zap-premium .zap-opcao-icone { width: 40px; height: 40px; border-radius: 12px; }
body.elevate .zap-premium .zap-opcao-icone svg { width: 19px; height: 19px; }
body.elevate .zap-opcao-icone.azul { color: #fff; background: linear-gradient(135deg, #1E4FE0, #38D1FF); }
body.elevate .zap-opcao-icone.escuro { background: linear-gradient(135deg, #5B3BFF, #8B2FFF); }

.zap-rodape {
  margin-top: 10px; padding: 11px 16px 14px;
  font-size: 11.5px; text-align: center; color: var(--e-fraco);
  border-top: 1px solid var(--e-borda);
}