/* Base visual única das páginas públicas (fatia 1 do site novo, decisão 19753a79-361 de 19/10/2026).
   Põe a página de vendas e as páginas /para/ no visual aprovado do Esmalta (identidade KZA V1.4: grafite #101219,
   violeta, lima #D5F875, neve #F3F4F7, Manrope), o mesmo do /montar, do /entrar e do app (src/app/globals.css).
   Carrega depois do CSS de cada página e troca só tokens, fonte, raios, cabeçalho e o botão da Esma; o layout de
   cada seção continua o da página. Texto violeta e botão violeta usam #7443EC (5,1:1 sobre o neve, passa AA).
   Mockup aprovado: https://claude.ai/artifact/F11RQx9M6WubL3bhixy2Ka */

@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/manrope-latin.woff2) format("woff2")}
/* Medidas do Manrope copiadas em cima do Arial: a troca de fonte não muda o tamanho nem a linha do texto (CLS). */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica");size-adjust:103.5%;ascent-override:102.5%;descent-override:28.8%;line-gap-override:0%}

:root{
  --dawn:#F3F4F7;
  --paper:#FFFFFF;
  --veil:#FFFFFF;
  --mist:#F1ECFE;
  --lav-line:#E2D8FD;
  --ink:#101219;
  --ink-2:#3F4250;
  --ink-3:#626676;
  --line:rgba(16,18,25,.1);
  --violet:#8758F5;
  --violet-deep:#7443EC;
  --violet-ink:#7443EC;
  --plum-950:#0B0C11;
  --plum-900:#101219;
  --plum-800:#181B24;
  --plum-700:#262A36;
  --f-display:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-body:"Manrope","Manrope Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* A página da manicure dentro do celular de exemplo segue com a serifada do estilo Editorial dela. */
  --f-pagina:"Fraunces","Fraunces Fallback",Georgia,serif;
  --glass:0 0 0 1px rgba(16,18,25,.08),0 18px 40px -24px rgba(16,18,25,.35);
  --card:0 0 0 1px rgba(16,18,25,.08),0 1px 2px rgba(16,18,25,.04),0 20px 40px -32px rgba(16,18,25,.3);
}
html{scroll-padding-top:84px}
body{font-weight:500}

/* Títulos: Manrope pesado e justo. Nada de itálico: a palavra de destaque ganha o marca-texto lima. */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.03em}
h1 em{font-style:normal;font-weight:800;color:inherit;background:linear-gradient(transparent 54%,var(--lime) 54%,var(--lime) 92%,transparent 92%);padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tom,h1 .tom{color:inherit}
.h2 .tom{display:inline}
h3{letter-spacing:-.02em}

/* Rótulo do topo de cada seção: texto violeta, sem cápsula. */
.eyebrow{padding:0;border-radius:0;background:none;color:var(--violet-ink);font:700 14px/1.2 var(--f-body);letter-spacing:.01em;text-transform:none}
.eyebrow i{display:none}
.tag-ex{border-radius:6px}

/* Botões: raio 12, sem a bolinha da seta. Principal violeta, secundário branco com borda, lima nos fundos escuros. */
.btn{border-radius:12px;min-height:52px;padding:8px 24px;gap:8px;font-weight:700}
.btn .go{display:none}
.btn-ink{background:var(--violet-deep);color:#fff;box-shadow:none}
.btn-ink:hover{background:#6532DB;box-shadow:none}
.btn-ghost{background:#fff;box-shadow:inset 0 0 0 1px rgba(16,18,25,.14)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-sm{min-height:44px;padding:6px 18px;font-size:15px}
:focus-visible{outline:3px solid var(--violet-deep);outline-offset:3px;border-radius:8px}

/* Cabeçalho: barra de largura cheia, fixa no topo e sem encolher na rolagem. No iPhone (viewport-fit=cover) o fundo
   da barra passa por baixo da barra de status e o conteúdo desce a altura dela. */
.nav{top:0;padding-inline:0}
.nav-in,.nav[data-scrolled="true"] .nav-in{max-width:none;height:calc(68px + env(safe-area-inset-top,0px));border-radius:0;padding-block:env(safe-area-inset-top,0px) 0;padding-left:max(16px,calc((100% - 1200px)/2 + 32px));padding-right:max(16px,calc((100% - 1200px)/2 + 32px));background:rgba(243,244,247,.94);box-shadow:0 1px 0 rgba(16,18,25,.1);animation:none}
.logo{font:800 21px/1 var(--f-display);letter-spacing:-.03em}
.nav-links a,.nav-entrar{border-radius:8px}
.nav-links a{font-weight:600;font-size:15px}
.nav-entrar{font-weight:700;font-size:15px}
@media (max-width:420px){.nav-in,.nav[data-scrolled="true"] .nav-in{height:calc(60px + env(safe-area-inset-top,0px))}}

/* Fundo liso: saem os pontinhos e as manchas cor-de-rosa e violeta. */
.hero-bg,.hero-vis::before,.tour-vis::before,.step-vis::before,.step-vis::after,.final-dots{display:none}

/* Raios na escala do Esmalta (6, 8, 12, 16, 20, 24). */
.chip{border-radius:12px}
.chip .ci{border-radius:8px}
.glass{border-radius:16px}
.art{border-radius:12px}
.art.sm{border-radius:10px}
.conf{border-radius:8px}
.ao-vivo{border-radius:6px}
.tt{border-radius:16px}
.tt .ti{border-radius:12px}
.step-vis{border-radius:24px}
.sc-card{border-radius:20px}
.bx{border-radius:20px}
.cmp-row{border-radius:16px}
.ciclo{border-radius:12px}
.ciclo button,.ciclo-thumb{border-radius:8px}
.ciclo button i{border-radius:6px}
.plano{border-radius:20px}
.garantia{border-radius:16px}
.faq details{border-radius:12px}
.final{border-radius:24px}
.est-ph{border-radius:24px}
.est-ph img{border-radius:18px}
.est-dlg-in{border-radius:24px}
.est-dlg img{border-radius:16px}

/* Peças escuras em grafite, no lugar do ameixa. */
.plano.premium{background:var(--plum-900)}
.final{background:var(--plum-900)}
.foot{background:#fff;border-top:1px solid var(--line)}

/* Títulos e nomes que usavam a serifada passam para o Manrope pesado. */
.tt b,.est b,.est-dlg-top b,.plano-nome,.faq summary{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em}
.faq summary{font-size:18px}

/* A página da manicure no celular de exemplo mantém o estilo dela (Editorial, serifada). */
.pg-hero-txt b{font-family:var(--f-pagina);font-weight:500}

/* Botão da Esma: quadrado de 56 px no canto, sem o convite escrito, para não cobrir o conteúdo. */
html .esma-chat-botao{width:56px;height:56px;border-radius:16px}
@media (min-width:720px){
  html .esma-chat-botao{width:56px;height:56px;padding:0;border-radius:16px;gap:0;background:var(--plum-900)}
  html .esma-chat-botao .ecb-rosto{width:44px;height:44px;border-radius:12px}
  html .esma-chat-botao .ecb-txt{display:none}
}

/* O título do topo é o LCP no celular: ele aparece parado, já visível no primeiro frame. A animação de entrada
   (hero-rise, de opacity 0) segurava o LCP em 2,5 a 4,6 s no Lighthouse (tarefa #380, 19/10/2026). O resto do topo segue animando. */
#topo h1.rise,.hero h1.rise{animation:none}