/* PiP — v2 (tema claro / branco)
   Carregado APÓS style.css. Sobrescreve apenas o necessário.
   NÃO edite style.css — todas as mudanças de tema ficam aqui.
   ============================================================ */

/* ============================================================
   TOKENS — troca alphas-brancas por alphas-pretas
   ============================================================ */
:root {
  --ink:   #F0EDE6;
  --ink-2: #E8E5DE;
  --w-90:  rgba(0,0,0,.90);
  --w-70:  rgba(0,0,0,.65);
  --w-50:  rgba(0,0,0,.50);
  --w-30:  rgba(0,0,0,.28);
  --w-15:  rgba(0,0,0,.13);
  --w-08:  rgba(0,0,0,.07);
  --line:  rgba(0,0,0,.11);
}

/* ============================================================
   BASE
   ============================================================ */
body { background: var(--paper); color: var(--black); }

/* ============================================================
   LOADER
   ============================================================ */
.loader                    { background: var(--paper); }
.loader-strip              { background: var(--ink-2); }
.loader-strip:nth-child(odd) { background: var(--ink); }
.loader-num                { color: var(--black); }
.loader-word               { color: var(--w-50); }

/* ============================================================
   NAVBAR — remove difference e usa cores fixas
   ============================================================ */
.nav { mix-blend-mode: normal; color: var(--black); }
/* Logo usa logo-pip-dark.svg (fills pretos, acento roxo mantido) — sem filter */

/* ============================================================
   BOTÕES — bordas e texto eram brancos
   ============================================================ */
.btn               { border-color: var(--black); color: var(--black); }
.btn::before       { background: var(--black); }
.btn:hover         { color: var(--paper); border-color: var(--black); }
.btn--ghost        { border-color: var(--w-30); color: var(--black); }
.btn--ghost:hover  { color: #fff; border-color: var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero              { background: var(--paper); }
/* Watermark: contorno em preto no lugar de branco */
.hero__watermark   { -webkit-text-stroke: 1px rgba(0,0,0,1); color: transparent; }
/* Remove sombras de texto que só fazem sentido no fundo escuro */
.hero__support     { text-shadow: none; color: var(--w-70); }
/* Caption sobre o vídeo permanece branca (está sobre o gradiente do card) */
.hero__card-title  { color: #fff; }

/* Hero tag (topo): remove difference blend que distorce as cores no fundo claro */
.hero__tag               { mix-blend-mode: normal; color: var(--black); }
.hero__tag .eyebrow      { color: var(--black); }
.hero__tag .eyebrow::before { background: var(--black); }
.hero__tag .mono         { color: var(--w-50); }
/* "Propósito" tem inline style color:var(--accent-soft) — força preto */
.hero__tag b             { color: var(--black) !important; }

/* Marquee — fundo claro fosco */
.marquee           { background: rgba(255,255,255,.6); }
.marquee__track span { color: var(--w-70); }

/* Auroras — multiply funciona em fundo claro (screen fica invisível) */
.aurora            { mix-blend-mode: multiply; }
.aurora--b         { opacity: .20; }

/* Grid bg — --w-08 já foi sobrescrito para rgba preta, funciona direto */

/* ============================================================
   SECTION 02 — vídeo de fundo (permanece escura, é um contraste intencional)
   Restaura os tokens brancos dentro dessa seção para os cards terem
   leitura correta sobre o fundo escuro do vídeo.
   ============================================================ */
.section--video {
  --w-90: rgba(255,255,255,.90);
  --w-70: rgba(255,255,255,.70);
  --w-50: rgba(255,255,255,.50);
  --w-30: rgba(255,255,255,.30);
  --w-15: rgba(255,255,255,.15);
  --w-08: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.14);
}

/* ============================================================
   SECTION 03 — card de vídeo (overlay escuro, label e play precisam
   ser brancos igual ao original)
   ============================================================ */
.how-video {
  --w-90: rgba(255,255,255,.90);
  --w-70: rgba(255,255,255,.70);
  --w-50: rgba(255,255,255,.50);
  --w-30: rgba(255,255,255,.30);
  --w-15: rgba(255,255,255,.15);
  --w-08: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.14);
}

/* ============================================================
   SECTION 03 — chat e passos (cores estavam hardcoded escuras)
   ============================================================ */
.chat              { background: linear-gradient(180deg, var(--ink-2), var(--ink)); border-color: var(--line); }
.chat::after       { background: radial-gradient(circle, rgba(62,47,247,.08), transparent 70%); }
.chat__bar         { background: rgba(0,0,0,.03); border-bottom-color: var(--line); }
.chat__id b        { color: var(--black); }
.chat__bubble--bot { background: rgba(0,0,0,.06); border-color: var(--line); color: var(--w-90); }
.chat-cursor       { background: var(--accent); }

/* ============================================================
   SECTION 04 — bio (fundo e nome)
   ============================================================ */
.bio               { background: var(--paper); }
.bio__glow         { background: radial-gradient(closest-side, rgba(62,47,247,.07), transparent 70%); }
.bio__name-fill    { color: var(--black); }
.bio__name-stroke  { -webkit-text-stroke: 2px var(--black); text-stroke: 2px var(--black); }
/* <em> no texto bio tem color:#fff hardcoded no base CSS — precisa ser escuro na v2 */
.bio__text em      { color: var(--black); }

/* ============================================================
   SECTION 05 — logos de apoio (eram filtradas para branco)
   ============================================================ */
.logo-support img       { filter: brightness(0); opacity: .48; }
.logo-support:hover img { filter: brightness(0); opacity: 1; }

/* ============================================================
   SECTION 06 — closing (título e box liquid glass)
   ============================================================ */
.closing { border-top-color: var(--line); }
.closing__box {
  background:    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  border-color:  rgba(0,0,0,.11);
  box-shadow:    0 30px 90px rgba(0,0,0,.10), inset 0 1px 0 rgba(0,0,0,.07);
}
.closing__box::before {
  background: radial-gradient(120% 80% at 30% 0%, rgba(62,47,247,.09), transparent 60%);
}
.closing__lead { color: var(--black); }
/* Título revelado por scroll — gradiente preto em vez de branco */
.cl-line {
  background-image: linear-gradient(
    90deg,
    #000 calc(var(--p, 100%) - 12%),
    rgba(0,0,0,.13) var(--p, 100%)
  );
}
@media (prefers-reduced-motion: reduce) { .cl-line { background-image: none; color: #000; } }

/* ============================================================
   BOTÕES WHATSAPP — verde na v2, branco no hover
   ============================================================ */
.btn--accent {
  background:   #25D366;
  border-color: #25D366;
  color:        #fff;
  box-shadow:   0 0 0 0 rgba(37,211,102,.45);
}
.btn--accent::before  { background: #111; }
.btn--accent:hover    { color: #fff; border-color: #25D366; box-shadow: 0 14px 40px rgba(37,211,102,.35); }
.btn--accent.is-pulse { animation: glowpulse-green 2.8s ease-in-out infinite; }
@keyframes glowpulse-green {
  0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.35); }
  50%      { box-shadow: 0 0 36px 6px rgba(37,211,102,.50); }
}

/* ============================================================
   RODAPÉ
   ============================================================ */
.foot              { background: var(--paper); }
/* Logo no footer: usa logo-pip-dark.svg — sem filter necessário */
/* Hover do menu e email em preto (base usa var(--paper) = branco, invisível no fundo branco) */
.foot__menu a:hover    { color: var(--black); }
.foot__menu a::after   { background: var(--black); }
.foot__email:hover     { color: var(--black); }
.foot__ig          { color: var(--w-70); }
.foot__ig::after   { background: var(--black); color: var(--paper); }
.foot__ig:hover    { color: var(--black); }
.foot__base .mono  { color: var(--w-30); }

/* ============================================================
   CLOSING BOX — texto destacado (.hl) era branco, precisa ser preto
   ============================================================ */
.closing__body .hl { color: var(--black); }

/* ============================================================
   MOBILE — correções específicas da v2
   ============================================================ */
@media (max-width:860px) {
  /* Título do card sai do vídeo no mobile → fica branco sobre fundo branco.
     Força preto e remove a sombra de texto que só faz sentido no fundo escuro. */
  .hero__card-title { color: var(--black); text-shadow: none; }

  /* Hero tag fica sobreposto ao vídeo no mobile → oculta */
  .hero__tag { display: none; }

  /* Hero mais alto para o vídeo e botões não cortarem com as fontes maiores */
  .hero { min-height: 140svh; }
  .hero__content { top: 62svh; }
}

/* ============================================================
   MODAL DE VÍDEO — permanece escuro (overlay de vídeo)
   ============================================================ */
/* Sem overrides — o modal é propositalmente dark */