/* =====================================================================
 * flixzera — paleta "Brasa" e tipografia do app, por cima do site.css.
 *
 * Fonte dos valores: apps/tv/.../ui/Theme.kt (DarkColors) e ui/Brand.kt.
 *   fundo       #140B0A → #1C100D → #2A1512 (gradiente diagonal do app)
 *   painel      #231512 / #34201B · linha #45302A
 *   texto       #FFF3EB / #C2A89C
 *   marca       #FA4616 (PANTONE 172 C) · texto sobre ela #1A0905
 *   gradiente   #FF9E1B → #FA4616 (o do wordmark)
 * Tipografia: Poppins nos títulos, Open Sans no corpo — os mesmos .ttf do APK.
 * A cor da marca em si vem do az_tema (--brand, via Tema::cssVars); aqui ficam o
 * FUNDO, as SUPERFÍCIES, o TEXTO e as FONTES, que o tema white-label não cobre.
 * ===================================================================== */

@font-face { font-family: 'Poppins'; src: url('../fonts/poppins_semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins_bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins_extrabold.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/opensans_regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/opensans_semibold.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }

:root {
  --fz-bg-top: #140B0A;
  --fz-bg-mid: #1C100D;
  --fz-bg-bottom: #2A1512;
  --fz-panel: #231512;
  --fz-panel-hi: #34201B;
  --fz-line: #45302A;
  --fz-text: #FFF3EB;
  --fz-muted: #C2A89C;
  --fz-amber: #FF9E1B;
  --fz-ember: #FA4616;
  --fz-grad: linear-gradient(180deg, var(--fz-amber), var(--fz-ember));
  --font-display: 'Poppins', var(--font-sans);

  /* tokens do site.css reapontados para a Brasa */
  --bg: var(--fz-bg-top);
  --surface-alt: var(--fz-bg-mid);
  --surface-1: rgba(255, 243, 235, .05);
  --surface-2: rgba(255, 243, 235, .07);
  --surface-hover: rgba(255, 243, 235, .10);
  --surface-3: rgba(255, 243, 235, .09);
  --border-1: rgba(255, 196, 170, .08);
  --border-2: rgba(255, 196, 170, .16);
  --border-hover: rgba(255, 196, 170, .20);
  --text-1: var(--fz-text);
  --text-2: rgba(255, 243, 235, .66);
  --text-3: rgba(255, 243, 235, .54);
  --text-4: rgba(255, 243, 235, .46);
  --green: #56D6A0;
  --red: #FF6B5E;
  --amber: var(--fz-amber);
}

body {
  background:
    linear-gradient(160deg, var(--fz-bg-top) 0%, var(--fz-bg-mid) 55%, var(--fz-bg-bottom) 100%) fixed,
    var(--fz-bg-top);
}

/* Títulos em Poppins, como o app; o destaque (**negrito** do CMS) ganha o gradiente do wordmark. */
h1, h2, h3,
.hero h1, .sec h2, .ct-h1 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h1 strong, h2 strong {
  background: var(--fz-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Botão principal: o laranja da marca com o texto escuro que o app usa sobre ele. */
.btn-primary, .nav-cta, .hero .btn-primary {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Cards e superfícies: painel quente em vez do cinza neutro. */
.card, .feat-card, .plano-card, .pl-card, .faq-item, .dev-card {
  background-color: var(--fz-panel);
  border-color: var(--fz-line);
}

/* Números em Roboto no app; aqui, dígitos tabulares da Poppins já alinham o preço. */
.price, .preco, .pl-preco, .hero-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

::selection { background: rgba(250, 70, 22, .35); color: var(--fz-text); }

/* Plano único: o card fica no centro, não na 1ª coluna de uma grade de quatro. */
.pl-grid:has(> :only-child) { grid-template-columns: minmax(0, 380px); justify-content: center; }