/* ===============================================================
   Nextcodes — tema "Framer-like"
   ---------------------------------------------------------------
   Substitui css/theme.css (papel quente). Para voltar, troque o
   <link> de framer.css por theme.css nas paginas.

   Tracos da linguagem do Framer que este arquivo reproduz:
     - base branca com paineis cinza-claro arredondados
     - tipografia bold com tracking bem negativo
     - cantos muito arredondados; botoes em pilula
     - sombras suaves em camadas, nunca linha dura
     - azul eletrico como unico acento
     - nav flutuante com blur
   =============================================================== */

:root {
  --bg:          #FFFFFF;
  --bg-2:        #F5F5F7;   /* paineis e blocos destacados */
  --bg-3:        #EFEFF2;
  --ink:         #0A0A0B;
  --ink-2:       #2E2E33;
  --ink-3:       #48484F;
  --ink-muted:   #66666F;
  --ink-faint:   #7A7A84;
  --ink-ghost:   #B6B6C0;
  --line:        #EAEAEF;
  --line-soft:   #F1F1F5;
  --line-strong: #DCDCE4;

  --accent:      #0099FF;
  --accent-deep: #0077E0;
  --accent-wash: rgba(0, 153, 255, .10);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(10,10,11,.06), 0 2px 8px rgba(10,10,11,.04);
  --shadow-md: 0 2px 4px rgba(10,10,11,.05), 0 12px 28px -12px rgba(10,10,11,.18);
  --shadow-lg: 0 8px 20px -8px rgba(10,10,11,.18), 0 30px 60px -30px rgba(10,10,11,.35);
}

/* --------------------------------------------------------------
   Superficies
   -------------------------------------------------------------- */

body.bg-white, body .bg-white        { background-color: var(--bg); }
body .bg-zinc-50                     { background-color: var(--bg-2); }
body .bg-zinc-100                    { background-color: var(--bg-3); }
body .bg-white\/90                   { background-color: rgba(255,255,255,.72); }
body .bg-zinc-900                    { background-color: var(--ink); }
body .bg-zinc-800                    { background-color: #1A1A1E; }
body .bg-zinc-800\/40                { background-color: rgba(26,26,30,.5); }

body.text-zinc-900, body .text-zinc-900 { color: var(--ink); }
body .text-zinc-700                  { color: var(--ink-2); }
body .text-zinc-600                  { color: var(--ink-3); }
body .text-zinc-500                  { color: var(--ink-muted); }
body .text-zinc-400                  { color: var(--ink-faint); }
body .text-zinc-300                  { color: var(--ink-ghost); }

body .bg-zinc-900 .text-zinc-400,
body .bg-black   .text-zinc-400      { color: #9A9AA4; }
body .bg-zinc-900 .text-zinc-500     { color: #83838D; }

body .border-zinc-200                { border-color: var(--line); }
body .border-zinc-100                { border-color: var(--line-soft); }
body .border-zinc-300                { border-color: var(--line-strong); }
body .divide-zinc-200 > * + *        { border-color: var(--line); }
body .divide-zinc-100 > * + *        { border-color: var(--line-soft); }

/* --------------------------------------------------------------
   Tipografia — bold com tracking negativo, marca do Framer
   -------------------------------------------------------------- */

body h1, body h2 {
  letter-spacing: -.045em;
  font-weight: 700;
  line-height: .98;
}
body h3 { letter-spacing: -.02em; }

/* os rotulos de secao viram pilulas discretas */
body span.uppercase.tracking-widest {
  letter-spacing: .12em;
  font-weight: 600;
}

body p { letter-spacing: -.011em; }

/* --------------------------------------------------------------
   Cantos e sombras
   -------------------------------------------------------------- */

body .rounded                        { border-radius: var(--r-md) !important; }
body .rounded-sm                     { border-radius: var(--r-sm) !important; }
body .rounded-lg                     { border-radius: var(--r-lg) !important; }
body .rounded-xl, body .rounded-2xl  { border-radius: var(--r-xl) !important; }

/* botoes viram pilula com sombra suave */
body a[class*="px-"][class*="py-"][class*="bg-zinc-900"],
body button[class*="px-"][class*="py-"][class*="bg-zinc-900"],
body a[class*="px-"][class*="py-"][class*="border-zinc-300"],
body a[class*="px-"][class*="py-"][class*="border-zinc-200"] {
  border-radius: 999px !important;
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.22,1,.36,1),
              box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

body a[class*="bg-zinc-900"]:hover,
body button[class*="bg-zinc-900"]:hover {
  background-color: var(--accent);
  box-shadow: 0 8px 22px -8px rgba(0,153,255,.55);
  transform: translateY(-2px);
}

/* botao secundario (contorno) ganha fundo solido no hover */
body a[class*="border-zinc-300"]:hover {
  background-color: var(--bg-2);
  border-color: transparent;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------
   Cards — o bloco arredondado com sombra e a assinatura visual
   -------------------------------------------------------------- */

/* Cartoes de plano: apenas os filhos diretos do grid de planos
   (aquele com md:divide-x). Sem esse escopo, as LINHAS de servico
   do index/sobre — que tambem tem <ul> — virariam caixas. */
body .md\:divide-x > [data-animate]:has(> ul),
body .plan-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
body .md\:divide-x > [data-animate]:has(> ul):hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* o card do meio (destaque) fica no cinza-claro */
body .md\:divide-x > .bg-zinc-50[data-animate] { background: var(--bg-2); }

/* divisorias verticais dos grids somem: o card ja separa */
body .md\:divide-x { gap: clamp(1rem, 2vw, 1.5rem); }
body .md\:divide-x > * + * { border-left-color: transparent; }

/* --------------------------------------------------------------
   Nav flutuante
   -------------------------------------------------------------- */

body #siteHeader {
  background: transparent;
  border-bottom: 0;
  padding-top: .75rem;
}
body #siteHeader > nav {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  padding: .6rem 1.25rem;
  transition: box-shadow .3s ease, transform .3s ease;
}
body #siteHeader.is-stuck {
  background: transparent;
  box-shadow: none;
}
body #siteHeader.is-stuck > nav { box-shadow: var(--shadow-md); }

body #mobileMenu {
  margin: .5rem 1rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------
   Acento
   -------------------------------------------------------------- */

::selection { background: var(--accent); color: #fff; }
:focus-visible { outline-color: var(--accent) !important; }
.soul-progress { background: var(--accent); }

body li > span.text-zinc-300               { color: var(--accent); }
body .divide-zinc-100 span.text-zinc-900   { color: var(--accent); }
body a.hover\:text-zinc-900:hover          { color: var(--accent); }
body .bg-zinc-900 a:hover                  { color: #66C2FF; }

body .border-zinc-300.rounded-sm {
  border-color: transparent;
  color: var(--accent);
  background-color: var(--accent-wash);
}

body #siteHeader nav a:not([class*="bg-zinc-900"])::after,
body footer a:not([class*="bg-"])::after { background: var(--accent); }

/* campos das telas do app */
body .field            { border-bottom-color: var(--line-strong); }
body .field:focus      { border-bottom-color: var(--accent); }
body .tab-active       { color: var(--ink); border-color: var(--accent); }

/* --------------------------------------------------------------
   Detalhes
   -------------------------------------------------------------- */

/* o grao nao combina com a limpeza do Framer */
body::after { display: none; }

.soul-spotlight::before {
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,153,255,.14),
    transparent 65%
  );
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-color: var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }

/* secoes escuras arredondadas, encaixadas na pagina */
@media (min-width: 768px) {
  body section.bg-zinc-900 {
    /* border-radius: var(--r-xl);
    margin-inline: clamp(1rem, 3vw, 2.5rem); */
    overflow: hidden;
  }
}