/* ═════════════════════════════════════════════════════════════
   Lite · Black Friday · conta XP — estilos das páginas novas
   Carregado pelo BaseLayout nas páginas "2" (e em todas depois do lançamento) e em /lite.
   A Black Friday acaba sozinha: o script do <head> põe a classe `bf-over` no <html> depois da data final
   (src/config/links.ts) e tudo que é Black Friday some ou volta ao visual normal.
   ═════════════════════════════════════════════════════════════ */
:root {
  --bf-yellow: #ffd166;
  --bf-amber:  #ffb43d;
  --bf-orange: #ff8a1e;
  --bf-fire:   #ff5b1e;
  --bf-ink:    #1a0f00;
  --bf-black:  #0a0a0a;
  --bf-grad:   linear-gradient(135deg, #ffd166, #ff8a1e 55%, #ff5b1e);
}

/* ── Black Friday: liga/desliga ─────────────────────────────── */
html.bf-over [data-black] { display: none !important; }
html:not(.bf-over) [data-black-off] { display: none !important; }

/* Selo (etiqueta listrada) */
.bf-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bf-black);
  border: 2px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--bf-amber) 0 8px, var(--bf-ink) 8px 16px) 3;
  color: var(--bf-amber);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.2; white-space: nowrap;
  box-shadow: 0 0 18px rgba(255, 138, 30, .35);
  transform: rotate(-2deg);
}
.bf-selo--grande { font-size: .82rem; padding: 7px 14px; }
.bf-selo--solto { transform: none; }

/* Preço R$ 1 em degradê de fogo */
.bf-preco {
  font-family: var(--font-mono); font-weight: 800;
  background: var(--bf-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Preço do cartão do Lite em campanha: R$ 1 grande, R$ 99 riscado ao lado */
.plan-price--bf { flex-wrap: wrap; row-gap: 2px; column-gap: 6px; }
.bf-preco--grande { font-family: var(--font-serif); font-size: 2.9rem; line-height: 1; font-weight: 400; letter-spacing: -.01em; }
.bf-centavos { font-size: .55em; letter-spacing: 0; }
.bf-depois { flex: 1 0 100%; font-size: .9rem; color: var(--text-dim); }

/* "ou" entre as opções de um seletor de abas (mesma ideia da /bio) */
.tab-ou {
  align-self: center; flex: 0 0 auto;
  padding: 2px 8px; border-radius: 100px;
  background: #fff; color: var(--navy);
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
}

/* Etiqueta BLACK em cima da aba do Lite (seletor do simulador de planos) */
.tab-btn--bf { position: relative; }
.bf-tab-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: 2px 7px; white-space: nowrap; pointer-events: none;
  background: var(--bf-black); color: var(--bf-amber);
  border: 1.5px solid var(--bf-orange);
  font-family: var(--font-mono); font-size: .56rem; font-weight: 800; letter-spacing: .1em; line-height: 1.3;
  box-shadow: 0 0 12px rgba(255, 138, 30, .45);
}
html:not(.bf-over) #simPlanTabs { margin-top: 12px; }

/* Faixa de campanha (topo de página) */
.bf-faixa {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px; text-align: center;
  background: linear-gradient(90deg, #0a0a0a, #1f1200 50%, #0a0a0a);
  border-bottom: 1px solid rgba(255, 180, 61, .35);
  color: #fff;
}
/* faixa no topo de tudo; o menu fixo (.nav) desce a altura dela e volta ao topo ao rolar (lite.js) */
.bf-faixa--topo { padding: 9px 16px; gap: 8px 14px; position: relative; z-index: 1001; }
html:not(.bf-over) .bf-faixa--topo + .nav { top: 52px; }
@media (max-width: 760px) {
  .bf-faixa--topo { padding: 8px 12px; gap: 6px 10px; }
  .bf-faixa--topo .bf-faixa-txt { font-size: .8rem; }
  .bf-faixa--topo .bf-selo { font-size: .6rem; padding: 3px 7px; }
  html:not(.bf-over) .bf-faixa--topo + .nav { top: 78px; }
}
.bf-faixa-txt { font-size: .95rem; }
.bf-faixa-txt strong { color: var(--bf-yellow); }
.bf-faixa-txt .bf-preco { font-size: 1.05rem; }

/* Botão laranja */
html:not(.bf-over) .btn.bf-btn {
  background: var(--bf-grad); color: var(--bf-ink); border: 0; font-weight: 800;
  box-shadow: 0 6px 24px rgba(255, 138, 30, .35);
}
html:not(.bf-over) .btn.bf-btn:hover { filter: brightness(1.08); color: var(--bf-ink); }
html:not(.bf-over) .btn.bf-btn::before { display: none; }

/* Cartão do Lite em campanha: fundo preto, borda de fogo */
html:not(.bf-over) .plan-card.bf-card {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, #17100a, #0a0a0a) padding-box,
    linear-gradient(145deg, #ffd166, #ff8a1e 50%, #ff5b1e) border-box;
  box-shadow: 0 0 60px rgba(255, 138, 30, .22);
}
html:not(.bf-over) .plan-card.bf-card:hover { border-color: transparent; }
html:not(.bf-over) .plan-card.bf-card .plan-glow {
  background: radial-gradient(circle, rgba(255, 138, 30, .3) 0%, transparent 70%);
}
html:not(.bf-over) .plan-card.bf-card .plan-name { color: var(--bf-yellow); }
.plan-card .bf-selo-topo { position: absolute; top: 14px; right: 14px; }

/* Cabeçalho da coluna do Lite na tabela comparativa */
html:not(.bf-over) .compare-table th.bf-col {
  background: rgba(255, 138, 30, .12); color: var(--bf-yellow); border-bottom-color: var(--bf-orange);
}
html:not(.bf-over) .compare-table td.bf-col { background: rgba(255, 138, 30, .05); }
html:not(.bf-over) .compare-table td.bf-col .compare-val { color: var(--bf-yellow); }
.compare-table th .bf-selo { margin-top: 6px; font-size: .6rem; padding: 3px 7px; }

/* ── Cartões de plano em carrossel (telas grandes) ──────────── */
.plans-grid--carousel {
  --planos-visiveis: 4;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--planos-visiveis) - 1) * 20px) / var(--planos-visiveis));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 0 12px;
}
.plans-grid--carousel::-webkit-scrollbar { display: none; }
.plans-grid--carousel > .plan-card { scroll-snap-align: start; }
.plans-arrows { position: relative; height: 0; }
.carrossel-seta {
  position: absolute; top: 300px; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 17, 52, .94); border: 1px solid var(--border-teal); color: var(--teal);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: background var(--transition), transform var(--transition);
}
.carrossel-seta:hover { background: var(--navy-light); transform: scale(1.06); }
.carrossel-seta[hidden] { display: none; }
.carrossel-seta--prev { left: -24px; }
.carrossel-seta--next { right: -24px; }
@media (max-width: 1100px) {
  /* telas menores: todos os planos em sequência (sem carrossel) */
  .plans-grid--carousel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); overflow: visible; padding: 0; }
  .plans-arrows { display: none; }
}
@media (max-width: 600px) { .plans-grid--carousel { grid-template-columns: 1fr; } }

/* ── Tabela comparativa com N planos visíveis ───────────────── */
.compare-wrap--carrossel {
  --planos-visiveis: 4;
  container-type: inline-size;
  overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin;
}
.compare-setas { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.compare-setas .carrossel-seta { position: static; width: 38px; height: 38px; font-size: 1.25rem; }
.compare-table--v2 {
  min-width: 0; table-layout: fixed;
  width: calc(220px + 5 * ((100cqw - 220px) / var(--planos-visiveis)));
}
.compare-table--v2 th:first-child, .compare-table--v2 td:first-child {
  width: 220px; position: sticky; left: 0; z-index: 2; background: var(--navy-mid);
}
.compare-table--v2 tr:hover td:first-child { background: #0d2352; }
.compare-table--v2 th:not(:first-child), .compare-table--v2 td:not(:first-child) {
  width: calc((100cqw - 220px) / var(--planos-visiveis));
}
.compare-table--v2 .compare-group-header td { position: static; background: rgba(255, 255, 255, .02); }
.compare-table--v2 .compare-group-label { position: sticky; left: 16px; }
@media (max-width: 1100px) {
  .compare-table--v2 { width: calc(150px + 5 * 150px); }
  .compare-table--v2 th:first-child, .compare-table--v2 td:first-child { width: 150px; min-width: 0; }
  .compare-table--v2 th:not(:first-child), .compare-table--v2 td:not(:first-child) { width: 150px; }
  .compare-setas { display: none; }
}

/* ── Bloco da conta XP ──────────────────────────────────────── */
.xp-faixa {
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(85, 220, 252, .10), rgba(0, 201, 167, .05));
  border: 1px solid var(--border-teal); border-radius: var(--radius-lg);
}
.xp-faixa-txt { flex: 1 1 320px; min-width: 0; }
.xp-faixa-txt strong { display: block; color: var(--white); font-size: 1.05rem; margin-bottom: 4px; }
.xp-faixa-txt span { color: var(--text); font-size: .92rem; }
.xp-ressalva { flex: 1 1 100%; font-size: .72rem; line-height: 1.5; color: var(--text-dim); }
.xp-cartao {
  padding: 28px; text-align: left;
  background: var(--navy-mid); border: 1px solid var(--border-teal); border-radius: var(--radius-xl);
}
.xp-cartao h3 { margin-bottom: 8px; }
.xp-cartao ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; }
.xp-cartao li { font-size: .92rem; color: var(--text); padding-left: 22px; position: relative; }
.xp-cartao li::before { content: '✓'; position: absolute; left: 0; color: var(--teal); }
.xp-secao { padding: 32px 0; }

/* Box da pergunta "Você já tem conta na XP?" (tutorial2) */
.tutorial-situacao-box {
  padding: 24px; border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--border-teal);
}
.tutorial-situacao-box > p:first-child { margin-top: 0; }
@media (max-width: 600px) { .tutorial-situacao-box { padding: 16px; } }