/* =========================================================
   BASE + COMPONENTES (Card/Biografia/IG)
   ========================================================= */

body {
  background: #f4f1ea !important; /* papel */
  color: #1f1f1f;
  font-family: "Source Serif 4", serif;
  font-size: 19px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.bg-page {
  background: #f4f1ea !important;
}

/* Navbar */
.navbar {
  background: transparent !important;
  border-bottom: 1px solid rgba(31,31,31,0.18);
}

/* Responsivo para vídeos */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Bloco geral da biografia em duas colunas */
.st-biografia-bloco {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* Coluna esquerda (imagem + dados) */
.st-biografia-coluna-esquerda {
  flex: 0 0 auto;
  width: 320px;
}

/* Coluna direita (texto) */
.st-biografia-coluna-direita {
  flex: 1 1 0;
  min-width: 300px;
}

/* Container do card */
.super-trunfo-card-container {
  text-align: center;
  margin-bottom: 20px;
  max-width: 320px;
}

/* Card principal */
.st-super-trunfo-card {
  width: 210px;
  border-radius: 0;
  overflow: hidden;
  text-align: center;
  background-color: #f4f1ea;
  font-family: "Source Serif 4", serif;
  margin: 0 auto;
  box-shadow: none;
  border: 1px solid rgba(31,31,31,0.18);
}

/* Cabeçalho do card */
.st-card-header {
  background-color: #5b1f1f;
  color: #e6e6e6;
  padding: 6px 0;
  font-size: 0.95em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Container da imagem */
.st-card-image {
  width: 210px;
  height: 210px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagem do artista */
.st-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-bottom: 1px solid rgba(31,31,31,0.18) !important;
  display: block;
  filter: grayscale(18%);
}

/* Ficha técnica */
.st-card-dados {
  font-size: 0.78em;
  text-align: left;
  margin: 0;
  padding: 0;
}
.st-card-dados div {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(31,31,31,0.14);
  background: #f4f1ea;
}
.st-card-dados div:nth-child(even) {
  background: rgba(31,31,31,0.04);
}

/* Biografia */
.st-card-bio {
  padding: 8px;
  font-size: 0.85em;
  line-height: 1.6;
  color: #1f1f1f;
  text-align: justify;
}

/* Gêneros musicais */
.st-card-genres {
  background: #232323;
  color: #e6e6e6;
  padding: 6px;
  font-size: 0.72em;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Botão opcional */
.btn-saiba-mais {
  color: #f4f1ea;
  text-decoration: none;
  font-weight: 700;
  background: #5b1f1f;
  padding: 8px 12px;
  border-radius: 0;
  border: 1px solid rgba(31,31,31,0.18);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-saiba-mais:hover {
  background: #4a1818;
}

/* Página de biografia */
.biografia-page {
  background: #f4f1ea !important;
}

/* Rodapé do card */
.st-card-footer {
  background: #232323;
  padding: 8px 0;
  font-size: 0.95em;
  font-weight: 700;
  color: #e6e6e6;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.st-card-footer a {
  color: #b88a2a;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  transition: color 0.2s ease;
}
.st-card-footer a:hover {
  color: #d1aa52;
}

/* Mobile: empilha as colunas */
@media (max-width: 768px) {
  .st-biografia-bloco { flex-direction: column; }
  .st-biografia-coluna-esquerda,
  .st-biografia-coluna-direita { width: 100%; }
  .st-super-trunfo-card { margin: 0 auto; }
}

/* Bio grande */
.st-card-bio.st-bio-texto-grande{
  font-size: 1.1rem !important;
  line-height: 1.75 !important;
}
.st-card-bio.st-bio-texto-grande p,
.st-card-bio.st-bio-texto-grande li,
.st-card-bio.st-bio-texto-grande blockquote{
  font-size: inherit !important;
  line-height: inherit !important;
}
@media (min-width: 1200px){
  .st-card-bio.st-bio-texto-grande{ font-size: 1.15rem !important; }
}

/* Instagram embed */
.st-ig-embed-wrap{
  width: 320px;
  max-width: 100%;
  margin: 0;
}
.st-instagram-sep{
  margin-top: .75rem;
  margin-bottom: 0;
  opacity: .25;
}
@media (max-width: 575.98px){
  .st-ig-embed-wrap{ width: 100%; }
}

/* Ajustes finos em telas pequenas */
@media (max-width: 576px){
  body{ font-size: 18px; line-height: 1.75; }
}


/* =========================================================
   CUSTOMIZAÇÕES EM 17 FEV 2026 — DIREÇÃO DE ARTE (PREVALECE)
   ========================================================= */

:root{
  --paper:#f4f1ea;

  --ink:#1f1f1f;
  --ink2:#2a2a2a;

  --dark:#232323;
  --lighttext:#e6e6e6;

  --gray1:#6b6b6b;
  --gray2:#8c8c8c;
  --gray3:#d0d0d0;

  --accent:#EE3131;
  --accentDark:#EE3131;

  --warm:#b88a2a;
  --warmDark:#8a661f;
  --warmHover:#c99732;
}

/* Base editorial (sobrescreve o body acima quando necessário) */
body{
  background: var(--paper) !important;
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 19px;
  line-height: 1.85;
}

/* Títulos editoriais (inclui h5/h6 também) */
h1,h2,h3,h4,h5,h6{
  font-family: "Playfair Display", serif;
  letter-spacing: .4px;
  line-height: 1.25;
}

/* Links discretos */
a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,31,31,.35);
}
a:hover{ border-bottom-color: rgba(91,31,31,.85); }

/* Manual */
.manual-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 16px 80px;
}
.manual-header{
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid rgba(31,31,31,.65);
  padding: 22px 0 16px;
  margin-bottom: 22px;
}

.kicker{
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  color: var(--gray1);
  margin-bottom: 6px;
}

.lede{
  font-size: 20px;
  color: var(--ink2);
  margin-bottom: 0;
}

.rule{
  height: 1px;
  background: rgba(31,31,31,.35);
  margin: 28px 0;
}

.section-title{
  font-size: 28px;
  margin-bottom: 6px;
}

.note{
  color: var(--gray1);
  font-size: 15px;
  line-height: 1.65;
}

/* Divisor editorial */
.divider{
  width: 72px;
  height: 1px;
  background: var(--accent);
  margin: 18px 0 28px;
}

/* Seções (landing) */
.section-light{ padding: 64px 0; }

.section-dark{
  background: var(--dark);
  color: var(--lighttext);
  padding: 64px 0;
}

/* Full width */
.full-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ajustes “dark mode” local */
.is-dark .kicker{ color: rgba(230,230,230,.6); }
.is-dark .divider{ background: var(--gray3); }
.is-dark a{
  color: var(--lighttext);
  border-bottom-color: rgba(230,230,230,.35);
}
.is-dark a:hover{
  border-bottom-color: rgba(230,230,230,.85);
}

/* Botões */
.btn-editor-light{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accentDark);
  --bs-btn-color: var(--paper);
  --bs-btn-hover-bg: #6b2a2a;
  --bs-btn-hover-border-color: #6b2a2a;
  --bs-btn-hover-color: #fff;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 12px 28px;
}

.btn-editor-dark{
  --bs-btn-bg: #FFC501;
  --bs-btn-border-color: #FFC501;
  --bs-btn-color: #111;
  --bs-btn-hover-bg: var(--warmHover);
  --bs-btn-hover-border-color: #FFC501;
  --bs-btn-hover-color: #111;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  padding: 12px 28px;
}

.is-dark .btn-editor-dark {
  color: #111 !important;
}


/* Foto */
.photo-frame{
  border: 1px solid rgba(31,31,31,.18);
  background: rgba(0,0,0,.02);
  padding: 8px;
}

.photo-frame img{
  width: 100%;
  height: auto;
  display: block;
  filter: none; /* removido preto e branco */
}

.is-dark .photo-frame{
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.03);
}


/* Código copiável */
pre{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.12);
  padding: 14px 16px;
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  margin: 12px 0 18px;
  border-radius: 0;
}
.is-dark pre{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Tabela simples */
.table-manual{
  --bs-table-bg: transparent;
  --bs-table-color: inherit;
  border-color: rgba(0,0,0,.15);
}
.is-dark .table-manual{
  border-color: rgba(255,255,255,.15);
}