/* ============================================================
   CAMADA BLACK — black.upofficeeu.com
   Só o que é da Black mora aqui. A página por baixo é a mesma da
   lp.upofficeeu.com, montada pelo montar.php. Daqui saem: a faixa,
   o menu e a primeira dobra no escuro, o preço de R$9,90 nos
   cartões e o pop-up da oferta. O resto da página fica como é.

   O "preto" é o café escuro do botão final da página (#46331E →
   #2A1D0F), levado mais fundo, com a moldura de ouro do plano Pro.
   Preto puro (#000) brigaria com o creme do resto da página.
   ============================================================ */
:root{
  --bk-h:44px;                    /* altura da faixa — o menu desce isso */
  --bk-noite:#15100A;
  --bk-noite-2:#2A1D0F;
  --bk-creme:#FFFDF8;
  --bk-creme-2:rgba(255,253,248,0.74);
  --bk-dourado:#E5C58F;
  --bk-linha:rgba(229,197,143,0.22);
  --bk-ouro:linear-gradient(150deg,#EBD09B 0%,#C09545 26%,#8C6624 58%,#E3C489 82%,#B98F3F 100%);
}
@media (max-width:640px){ :root{ --bk-h:40px; } }

/* a Black acabou (o black.js põe esta classe): tudo volta ao lugar */
html.bk-off{ --bk-h:0px; }
html.bk-off .bk-faixa{ display:none; }

/* pop-up aberto: a página de trás não rola */
html.bk-travado,
html.bk-travado body{ overflow:hidden; }


/* ---------- ESPAÇO PRA FAIXA ----------
   O menu flutuante e o herói descem a altura da faixa. Repete as
   mesmas quebras da página (16 / 12 / 10px de folga) — esta folha
   vem depois do estilo dela, então ganha nas mesmas larguras. */
section[id], [id]{ scroll-margin-top:calc(110px + var(--bk-h)); }
.upoffice-menu-wrapper{ top:calc(16px + var(--bk-h)); }
.hero{ padding-top:calc(150px + var(--bk-h)); }
@media (max-width:1024px){
  .upoffice-menu-wrapper{ top:calc(12px + var(--bk-h)); }
}
@media (max-width:640px){
  .hero{ padding-top:calc(118px + var(--bk-h)); }
}
@media (max-width:480px){
  .upoffice-menu-wrapper{ top:calc(10px + var(--bk-h)); }
}


/* ---------- SELO "BLACK" ----------
   Mesma folha de ouro da moldura do Pro, letra escura por cima. */
.bk-selo{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:6px;
  background:var(--bk-ouro);
  color:#21170B;
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  white-space:nowrap;
  flex-shrink:0;
}


/* ---------- RELÓGIO ----------
   Algarismos de largura fixa: sem isso o texto "pula" a cada segundo. */
.bk-relogio{
  display:inline-flex;
  gap:5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.bk-relogio b{ font-weight:600; color:var(--bk-creme); }


/* ---------- FAIXA DO TOPO ---------- */
.bk-faixa{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--bk-h);
  z-index:10001;                  /* acima do menu (9999) e do banner de cookies (10000) */
  background:linear-gradient(180deg,#1E160D 0%, var(--bk-noite) 100%);
  color:var(--bk-creme-2);
  font-family:'Inter',sans-serif;
}
/* fio de ouro embaixo: separa a faixa do creme sem sombra pesada */
.bk-faixa::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--bk-ouro);
  opacity:0.75;
}
.bk-faixa-in{
  height:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}
.bk-faixa-txt{
  margin:0;
  font-size:14.5px;
  white-space:nowrap;
}
.bk-faixa-txt b{ font-weight:600; color:var(--bk-creme); }
.bk-faixa-txt em{ font-style:normal; font-weight:700; color:var(--bk-dourado); }
.bk-faixa .bk-relogio{ font-size:13.5px; }
.bk-faixa-btn{
  appearance:none;
  height:30px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid #AE7D24;
  background:linear-gradient(135deg,#EBC97F 0%,#D6A94F 100%);
  color:#2A241E;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease;
}
.bk-faixa-btn:hover{
  background:linear-gradient(135deg,#F0D291 0%,#DDB259 100%);
  transform:translateY(-1px);
}

@media (max-width:640px){
  .bk-faixa-in{ padding:0 12px; gap:10px; }
  .bk-largo{ display:none; }
  .bk-faixa-txt{ font-size:13.5px; }
  .bk-faixa .bk-relogio{ font-size:12.5px; gap:4px; }
  .bk-faixa-btn{ height:28px; padding:0 13px; font-size:13px; }
}
/* no celular estreito os segundos saem — o resto ainda cabe numa linha */
@media (max-width:420px){
  .bk-faixa .bk-seg{ display:none; }
}
@media (max-width:340px){
  .bk-faixa .bk-relogio{ display:none; }
}


/* ---------- MENU EM VIDRO ESCURO ----------
   O vidro claro de sempre, em cima do herói escuro, virava uma barra
   acesa no meio da cena. Escuro, ele conversa com a faixa — e no creme
   das seções de baixo vira a mesma pílula café dos botões finais. */
/* 0,88 e não os 0,72 do vidro claro: café translúcido em cima do creme
   vira um cinza-barro — mais encorpado ele continua sendo café */
.upoffice-menu-container{
  background:rgba(24,18,11,0.88);
  border-color:rgba(229,197,143,0.26);
  box-shadow:0 8px 32px rgba(0,0,0,0.28), inset 0 1px 1px rgba(255,255,255,0.06);
}
.upoffice-menu-container::before{
  background:linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
}
.upoffice-menu-container:hover{
  background:rgba(24,18,11,0.94);
  border-color:rgba(229,197,143,0.42);
  box-shadow:0 12px 40px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.08);
}
.upoffice-menu-links a{ color:#F6EFE2; }
.upoffice-menu-links a:hover{ color:var(--bk-dourado); }
.upoffice-menu-dropdown{
  background:rgba(24,18,11,0.95);
  border-color:rgba(229,197,143,0.26);
}
.upoffice-menu-dropdown-links a{ color:#F6EFE2; }
.upoffice-menu-dropdown-links a:hover{ background:rgba(229,197,143,0.12); color:var(--bk-dourado); }


/* ---------- PRIMEIRA DOBRA NO ESCURO ----------
   O herói inteiro vira café escuro, painel do sistema incluído. A
   volta pro creme acontece na faixa de confiança (Garantia · Migração
   · +500 studios), que já era uma linha divisória da página.
   Tentei antes cortar no meio do painel, com creme por baixo dele:
   os brilhos e as lascas douradas do fundo do herói viravam ali uma
   faixa bege-barro com cunhas escuras. Não volte pra isso. */
.hero{
  background:
    radial-gradient(70% 46% at 50% 0%, rgba(201,154,62,0.20) 0%, rgba(201,154,62,0) 72%),
    linear-gradient(180deg, #110C07 0%, #1A130B 55%, #2A1D0F 100%);
}
.hero .hero-dots{
  background-image:radial-gradient(circle, rgba(229,197,143,0.2) 1.4px, transparent 1.6px);
}
.hero h1{ color:var(--bk-creme); }
.hero h1 .accent{ color:var(--bk-dourado); }
.hero p.sub{ color:var(--bk-creme-2); }
.hero .btn-outline-dark{
  background:rgba(255,253,248,0.04);
  border-color:rgba(255,253,248,0.42);
  color:var(--bk-creme);
}
.hero .btn-outline-dark:hover{
  background:rgba(255,253,248,0.1);
  border-color:var(--bk-creme);
  box-shadow:none;
}
.hero :focus-visible{ outline-color:var(--bk-dourado); }

.bk-heroi-selo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  padding:5px 16px 5px 5px;
  border-radius:999px;
  border:1px solid rgba(229,197,143,0.34);
  background:rgba(255,253,248,0.04);
  color:var(--bk-creme-2);
  font-family:'Inter',sans-serif;
  font-size:14.5px;
}
.bk-heroi-selo .bk-selo{ border-radius:999px; }
.bk-heroi-selo b{ font-weight:700; color:var(--bk-dourado); }
.bk-heroi-nota{
  margin:18px auto 0;
  max-width:560px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,253,248,0.62);
  text-wrap:balance;
}

@media (max-width:640px){
  .bk-heroi-selo{ margin-bottom:20px; padding-right:12px; font-size:13px; gap:8px; }
  .bk-heroi-nota{ font-size:13px; margin-top:14px; }
}


/* ---------- PREÇO NOS CARTÕES ----------
   Aqui riscar é verdade: o 1º mês normal custa o valor cheio, e na
   Black sai por R$9,90. (Na lp o riscado saiu justamente porque lá
   não há desconto.) */
.bk-de{
  display:block;
  margin-bottom:2px;
  font-size:14px;
  color:var(--ink-soft);
}
.bk-de s{ text-decoration-thickness:1.5px; }
.plan-free.bk-preco{
  font-size:clamp(38px,3.6vw,46px);
  line-height:1.05;
}


/* ---------- A OFERTA (POP-UP) ----------
   Fundo escurecido SEM desfoque: blur em tela cheia pesa justo no
   Android intermediário de quem mais vai ver isto. */
.bk-oferta{
  position:fixed;
  inset:0;
  z-index:10050;                  /* acima de tudo, inclusive da faixa */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-family:'Inter',sans-serif;
}
.bk-oferta[hidden]{ display:none; }

.bk-fundo{
  position:absolute;
  inset:0;
  background:rgba(16,11,6,0.68);
  opacity:0;
  transition:opacity .28s ease;
}
.bk-moldura{
  position:relative;
  display:flex;
  width:100%;
  max-width:520px;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  padding:2px;
  border-radius:24px;
  background:var(--bk-ouro);
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.7),
             0 0 70px -20px rgba(201,154,62,0.45);
  opacity:0;
  transform:translateY(14px) scale(.97);
  transition:opacity .3s ease, transform .38s cubic-bezier(.2,.8,.25,1);
}
.bk-oferta.is-on .bk-fundo{ opacity:1; }
.bk-oferta.is-on .bk-moldura{ opacity:1; transform:none; }

.bk-caixa{
  position:relative;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  border-radius:22px;
  padding:38px 34px 24px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(201,154,62,0.16) 0%, rgba(201,154,62,0) 60%),
    linear-gradient(180deg,var(--bk-noite-2) 0%, var(--bk-noite) 100%);
  color:var(--bk-creme-2);
  text-align:center;
}
.bk-caixa:focus{ outline:none; }

.bk-x{
  position:absolute;
  top:12px; right:12px;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--bk-linha);
  background:rgba(255,253,248,0.04);
  color:var(--bk-creme-2);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.bk-x:hover{ border-color:rgba(229,197,143,0.6); color:var(--bk-creme); }

.bk-oferta h2{
  margin:16px 0 0;
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(27px,4.4vw,34px);
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--bk-creme);
  text-wrap:balance;
}
.bk-oferta h2 em{ font-style:italic; color:var(--bk-dourado); white-space:nowrap; }
/* "Antes de sair:" só aparece quando quem abriu foi a saída —
   aberto pela faixa ou pelo link, a frase não faria sentido */
.bk-antes{ display:none; }
.bk-oferta.is-saida .bk-antes{ display:inline; }
.bk-oferta.is-saida .bk-direto{ display:none; }

.bk-sub{
  max-width:410px;
  margin:12px auto 0;
  font-size:15px;
  line-height:1.55;
}
.bk-escolha{
  margin:24px 0 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--bk-dourado);
}

.bk-lista{
  display:grid;
  gap:12px;
  margin-top:14px;
  text-align:left;
}
.bk-op{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 18px;
  align-items:center;
  gap:14px;
  padding:15px 16px 15px 18px;
  border-radius:14px;
  border:1px solid var(--bk-linha);
  background:rgba(255,253,248,0.035);
  color:var(--bk-creme-2);
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.bk-op:hover{
  border-color:rgba(229,197,143,0.62);
  background:rgba(255,253,248,0.07);
  transform:translateY(-1px);
}
.bk-op--pro{
  border-color:rgba(229,197,143,0.55);
  background:rgba(229,197,143,0.08);
}
/* veio do "Começar agora" de um cartão: aquele plano já vem marcado */
.bk-op.is-marcado{
  border-color:var(--bk-dourado);
  background:rgba(229,197,143,0.14);
  box-shadow:0 0 0 3px rgba(229,197,143,0.16);
}
.bk-op-tag{
  position:absolute;
  top:-9px; left:16px;
  padding:3px 9px;
  border-radius:999px;
  background:var(--bk-ouro);
  color:#21170B;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.bk-op-nome{
  font-size:14px;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--bk-creme);
}
.bk-op-nome small{
  display:block;
  margin-top:3px;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--bk-creme-2);
}
.bk-op-preco{ text-align:right; }
.bk-op-preco b{
  display:block;
  font-family:'Fraunces',serif;
  font-size:22px;
  font-weight:600;
  line-height:1.1;
  color:var(--bk-dourado);
}
.bk-op-preco small{
  display:block;
  margin-top:2px;
  font-size:12.5px;
  white-space:nowrap;
}
.bk-op svg{ color:var(--bk-dourado); }

.bk-tempo{
  margin:22px 0 0;
  font-size:14px;
}
.bk-tempo .bk-relogio{ margin-left:4px; }

.bk-garantias{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  font-size:13px;
}
.bk-garantias li::before{
  content:'✓';
  margin-right:6px;
  font-weight:700;
  color:var(--bk-dourado);
}

.bk-nao{
  appearance:none;
  margin-top:14px;
  padding:8px 10px;
  border:0;
  background:none;
  color:var(--bk-creme-2);
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.bk-nao:hover{ color:var(--bk-creme); }

/* o contorno de foco da página é o dourado escuro (#A67A2C) — no café
   ele some. Aqui vai o dourado claro. */
.bk-faixa :focus-visible,
.bk-oferta :focus-visible{ outline:2px solid var(--bk-dourado); outline-offset:3px; }

/* celular: vira gaveta que sobe de baixo, perto do polegar */
@media (max-width:640px){
  .bk-oferta{ align-items:flex-end; padding:0; }
  .bk-moldura{
    max-width:none;
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
    padding:2px 0 0;
    border-radius:22px 22px 0 0;
    transform:translateY(48px);
  }
  .bk-caixa{
    border-radius:20px 20px 0 0;
    padding:30px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .bk-x{ top:10px; right:10px; }
  .bk-oferta h2{ margin-top:14px; }
  .bk-sub{ font-size:14.5px; }
  .bk-op{ padding:14px 14px 14px 16px; gap:10px; }
  .bk-op-nome{ font-size:13.5px; }
  .bk-op-nome small{ font-size:13px; }
  .bk-op-preco b{ font-size:20px; }
  .bk-op-preco small{ font-size:12px; }
}
@media (max-width:360px){
  .bk-op-preco small{ white-space:normal; }
}