/* =====================================================================
   BEIERMEI BRASIL — tema "diva": roxo profundo + dourado, títulos em
   serifa elegante. Carrega DEPOIS de styles.css e só nas páginas públicas
   (o painel /carioca usa admin.css e não muda).
   ===================================================================== */

:root {
  --bg: #FBF7FD;
  --surface: #FFFFFF;
  --soft: #F4E9FA;
  --ink: #26102F;
  --ink-2: #4A2D58;
  --muted: #7D6788;
  --line: #E9DCF0;

  --primary: #7A2E96;
  --primary-600: #5F2178;
  --primary-soft: #F1E3F8;

  --gold: #C9A24B;
  --gold-soft: #F6EBCB;
  --star: #E0B84F;
  --navy: #2A0F36;
  --navy-2: #4A1A5E;

  --shadow-sm: 0 1px 2px rgba(42, 15, 54, .05), 0 2px 8px rgba(42, 15, 54, .05);
  --shadow: 0 2px 6px rgba(42, 15, 54, .06), 0 14px 36px rgba(74, 26, 94, .12);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

body { background: var(--bg); }

h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
.hl { color: var(--primary); font-style: italic; background: linear-gradient(transparent 62%, var(--gold-soft) 62%); }
.eyebrow { color: var(--gold); letter-spacing: .14em; }

/* Botões em degradê roxo com brilho dourado */
.btn--primary {
  background: linear-gradient(135deg, #8E3AA8 0%, #5F2178 100%);
  box-shadow: 0 8px 22px rgba(95, 33, 120, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  letter-spacing: .02em;
}
.btn--primary:hover {
  background: linear-gradient(135deg, #9D45B8 0%, #6B2686 100%);
  box-shadow: 0 12px 28px rgba(95, 33, 120, .42), 0 0 0 2px rgba(201, 162, 75, .55);
}

.announcement { background: linear-gradient(90deg, #2A0F36, #5F2178 50%, #2A0F36); color: #F6EBCB; letter-spacing: .05em; }

/* Logo */
.header__logo--text, .footer__logo { font-family: var(--display); letter-spacing: .08em; }
.header__logo--text span, .footer__logo span {
  display: block; font-family: var(--font); font-size: 9px; letter-spacing: .38em; text-transform: uppercase;
  vertical-align: baseline; margin-top: 4px; line-height: 1; color: var(--gold);
}
.header__logo--text { line-height: 1; }

/* ---------- Moldura das imagens do corpo (nada de quadrado cru) ---------- */
.shot {
  position: relative; isolation: isolate; margin: 0; padding: 5px; border-radius: 34px;
  background: linear-gradient(140deg, #E7C873 0%, #8E3AA8 48%, #C9A24B 100%);
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.shot::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 48px;
  background: radial-gradient(60% 55% at 25% 15%, rgba(142, 58, 168, .28), transparent 70%),
              radial-gradient(50% 50% at 85% 90%, rgba(201, 162, 75, .28), transparent 70%);
  filter: blur(14px);
}
.shot::after {
  content: "✦"; position: absolute; top: -10px; right: 22px; font-size: 26px; line-height: 1; color: var(--gold);
  text-shadow: 0 2px 10px rgba(201, 162, 75, .6);
}
.shot img { display: block; width: 100%; height: auto; border-radius: 29px; background: #fff; cursor: zoom-in; }
@media (hover: hover) { .shot:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 22px 52px rgba(74, 26, 94, .22); } }

/* Galeria do topo também com cantos e contorno */
.gallery__frame { border-radius: 30px; border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #E7C873, #8E3AA8 50%, #C9A24B) border-box; box-shadow: var(--shadow); overflow: hidden; }
.gallery__thumb { border-radius: 14px; }
.gallery__badge { background: rgba(42, 15, 54, .82); color: #F6EBCB; }
.topbadge { background: var(--gold-soft); color: #6A4F0F; border-color: rgba(201, 162, 75, .5); }

/* Cartões de ativos */
.ingcards--col { grid-template-columns: 1fr !important; gap: 12px; margin-top: 0; }
.ingcard {
  text-align: left; padding: 16px 16px 16px 58px; border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(180deg, #fff, #FBF4FE);
}
.ingcard__num { display: none; }
.ingcard__emoji { position: absolute; left: 14px; top: 14px; font-size: 30px; line-height: 1; }
.ingcard h3 { font-size: 17px; }
.formula { align-items: center; }
@media (min-width: 1024px) { .formula .ingcards--col { order: 1; } .formula .shot { order: 2; } }

.claimgrid { display: grid; gap: 28px; }
@media (min-width: 900px) { .claimgrid { grid-template-columns: repeat(3, 1fr); } }

/* Faixa rolante */
.marquee { background: linear-gradient(90deg, #2A0F36, #5F2178, #2A0F36); color: #F6EBCB; }
.marquee__icon { background: rgba(201, 162, 75, .25); color: var(--gold); }
.marquee__icon .icon { width: 16px; height: 16px; }

/* Selo de garantia (substitui a imagem do GlowUp) */
.guarantee__seal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  width: 88px; height: 88px; border-radius: 50%; color: #3A2705;
  background: radial-gradient(circle at 35% 30%, #F6E3A1, #C9A24B 70%);
  box-shadow: 0 8px 22px rgba(201, 162, 75, .45), inset 0 0 0 4px rgba(255, 255, 255, .45);
  line-height: 1;
}
.guarantee__seal strong { font-family: var(--display); font-size: 34px; }
.guarantee__seal span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: 2px; }

/* Cartões de plano */
.plan-card.is-highlight { border-color: var(--primary); box-shadow: 0 10px 30px rgba(122, 46, 150, .22); }
.plan-card__badge { background: linear-gradient(135deg, #E7C873, #C9A24B); color: #3A2705; }

/* ---------- Carrossel de vídeos ---------- */
.ugc__wrap { position: relative; }
.ugc__rail { scroll-behavior: smooth; padding-block: 8px 16px; }
.ugc__card {
  flex: 0 0 66%; max-width: 270px; border-radius: 26px; background: #2A0F36;
  border: 2px solid rgba(201, 162, 75, .75); box-shadow: 0 14px 34px rgba(74, 26, 94, .28);
}
.ugc__card::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(42, 15, 54, .8) 100%); }
.ugc__play { background: rgba(255, 255, 255, .92); color: var(--primary); }
.ugc__nav {
  display: none; position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  width: 46px; height: 46px; border: 0; border-radius: 50%; place-items: center; cursor: pointer;
  background: #fff; color: var(--primary); box-shadow: var(--shadow);
}
.ugc__nav .icon { width: 22px; height: 22px; }
.ugc__nav--prev { left: 12px; }
.ugc__nav--prev .icon { transform: rotate(180deg); }
.ugc__nav--next { right: 12px; }
@media (min-width: 768px) {
  .ugc__nav { display: grid; }
  .ugc__rail { justify-content: flex-start; padding-inline: 72px; scroll-padding-inline: 72px; }
  .ugc__card { flex: 0 0 250px; }
}

/* Rodapé / FAQ no tom roxo */
.footer { background: linear-gradient(180deg, #2A0F36, #1B0924); }
.faq__item[open] summary { color: var(--primary); }