/* =========================
   Debate Raiz - app.css (FIX FINAL)
   SOL = claro (base #6b625f)
   LUA = escuro (base #444547)
   Sem tons azulados. Diferença VISÍVEL.
   ========================= */

html, body{
  min-height: 100%;
  margin: 0;
  background: #444547; /* fallback neutro */
}

/* =========================
   VARIÁVEIS (DEFAULT = SOL)
   ========================= */
:root{
  /* BASES */
  --base: #6b625f;         /* SOL base (claro) */
  --base-dark: #48484bb7;    /* sombreado SOL */
  --base-darker: #403a38;  /* fundo SOL mais fechado */

  /* TEXTOS */
  --text: rgba(255,255,255,0.93);
  --muted: rgba(255,255,255,0.70);

  /* PAINÉIS */
  --panel:  rgba(255,255,255,0.08);
  --panel2: rgba(255,255,255,0.11);
  --border: rgba(255,255,255,0.16);

  /* ACENTO (NEUTRO, SEM AZUL) */
  --accent:  rgba(255,255,255,0.16);
  --accent2: rgba(255,255,255,0.08);

  /* BOTÕES (SEM AZUL) */
  --btn-primary-bg: rgba(255,255,255,0.22);
  --btn-primary-bd: rgba(255,255,255,0.28);
  --btn-primary-tx: rgba(255,255,255,0.95);

  --btn-soft-bg: rgba(0,0,0,0.18);
  --btn-soft-bd: rgba(255,255,255,0.20);

  /* REMOVE “AZUL” DO BOOTSTRAP */
  --bs-primary: #ffffff;
  --bs-link-color: rgba(255,255,255,0.90);
  --bs-link-hover-color: rgba(255,255,255,1);
  --bs-focus-ring-color: rgba(255,255,255,0.25);
}

/* =========================
   SOL (CLARO) — MAIS “DIA”
   ========================= */
.theme-sol{
  --base: #555555;
  --base-dark: #383838;
  --base-darker: #1e1e1e;

  --panel:  rgba(255,255,255,0.10);
  --panel2: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);

  --btn-primary-bg: rgba(255,255,255,0.26);
  --btn-primary-bd: rgba(255,255,255,0.32);
}

/* =========================
   LUA (ESCURO) — MAIS “NOITE”
   ========================= */
.theme-lua{
  --base: #444547;
  --base-dark: #303133;
  --base-darker: #1f2022;

  --panel:  rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.14);

  --btn-primary-bg: rgba(255,255,255,0.16);
  --btn-primary-bd: rgba(255,255,255,0.22);
}

/* =========================
   FUNDO PRINCIPAL (SEM AZUL / SEM QUEBRA)
   ========================= */
.dr-body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
  color: var(--text);
  position: relative;
  overflow-x: hidden;

  /* Fundo quente/neutro, sem qualquer componente azul */
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(900px 600px at 15% 10%, rgba(255,255,255,0.06), transparent 65%),
    radial-gradient(900px 600px at 85% 10%, rgba(255,255,255,0.05), transparent 65%),
    linear-gradient(180deg, var(--base) 0%, var(--base-dark) 55%, var(--base-darker) 100%);
}

/* Garantia extra: nada pinta por trás com outra cor */
main, header, footer{ background: transparent; }

/* =========================
   TOPBAR
   ========================= */
.dr-topbar{
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
}

/* logo badge topo */
.dr-badge{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28), transparent 58%),
    linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.dr-brand{
  font-family: Oswald, Inter, sans-serif;
  font-size: 1.35rem;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.dr-subtitle{
  font-size: .9rem;
  color: var(--muted);
}

/* =========================
   TOGGLE
   ========================= */
.dr-toggle{
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}

.dr-toggle-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: .9rem;
}

.dr-toggle-btn.active{
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* =========================
   BOOTSTRAP: MATA O AZUL
   ========================= */
a, a:visited{ color: var(--bs-link-color) !important; }
a:hover{ color: var(--bs-link-hover-color) !important; }

.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus{
  box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* Botão primary SEM azul */
.btn-primary{
  background: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-bd) !important;
  color: var(--btn-primary-tx) !important;
}
.btn-primary:hover{
  background: rgba(255,255,255,0.32) !important;
  border-color: rgba(255,255,255,0.36) !important;
}

/* outline light consistente */
.btn-outline-light{
  border-color: rgba(255,255,255,0.24) !important;
  color: rgba(255,255,255,0.90) !important;
}
.btn-outline-light:hover{
  background: rgba(255,255,255,0.12) !important;
}

.dr-admin-btn{
  border-color: rgba(255,255,255,0.25);
}

/* =========================
   CARDS / HERO
   ========================= */
.dr-card{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 18px;
}

.dr-hero{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,0.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22)),
    rgba(255,255,255,0.03);
  overflow: hidden;
}

.dr-hero-inner{ padding: 22px; }

.dr-kicker{
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .4px;
  text-transform: uppercase;
}

.dr-title{
  font-family: Oswald, Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* pills */
.dr-live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:6px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.93);
  font-weight: 900;
  font-size: .85rem;
}

.dr-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.10);
}

/* video box */
.dr-video-box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.30);
  aspect-ratio: 16 / 9;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.75);
  position: relative;
  overflow: hidden;
}

.dr-video-box:before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(0,0,0,0.55) 60%);
  filter: blur(26px);
  opacity: .55;
}

.dr-video-box > *{ position: relative; z-index: 2; }

.dr-strip{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--panel);
}

/* =========================
   ELENCO
   ========================= */
.dr-person-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  overflow: hidden;
}

.dr-person-card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

.dr-person-photo{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.dr-social a{
  text-decoration: none;
  color: rgba(255,255,255,0.78) !important;
  font-weight: 800;
  font-size: .9rem;
}
.dr-social a:hover{ color: rgba(255,255,255,1) !important; }

/* =========================
   PATROCINADORES / FOOTER
   ========================= */
.dr-sponsor-pill{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.88);
  min-height: 44px;
}

.dr-footer{
  background: rgba(0,0,0,0.20);
}

.dr-footer-link{
  color: rgba(255,255,255,0.72) !important;
}
.dr-footer-link:hover{
  color: rgba(255,255,255,1) !important;
}

/* =========================
   VÍDEOS
   ========================= */
.dr-video-card{
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .15s ease, border-color .15s ease;
}
.dr-video-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
}

.dr-thumb{
  position: relative;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.18);
}

.dr-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity: 0.97;
}

.dr-thumb:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 25% 20%, rgba(0,0,0,0.16), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.06));
  pointer-events:none;
}

/* BADGE ESPECIAL (bem visível, sem cor azul) */
.dr-video-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index: 3;

  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;

  padding: 7px 12px;
  border-radius: 999px;

  color: rgba(0,0,0,0.85);
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.70));
  border: 1px solid rgba(255,255,255,0.30);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
}

.dr-video-title{
  color: #fff;
  font-weight: 650;
  font-size: 14px;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  min-height: 3.8em;
}

/* =========================
   CARROSSEL
   ========================= */
.dr-carousel .carousel-control-prev,
.dr-carousel .carousel-control-next{
  width: 8%;
  opacity: .8;
}
.dr-carousel .carousel-control-prev:hover,
.dr-carousel .carousel-control-next:hover{
  opacity: 1;
}

.carousel-indicators [data-bs-target]{
  background-color: rgba(255,255,255,0.55);
}
.carousel-indicators .active{
  background-color: rgba(255,255,255,0.90);
}


@media (max-width: 575.98px){
  .dr-carousel .carousel-control-prev,
  .dr-carousel .carousel-control-next{
    width: 14%;
  }
}


/* Lite YouTube embed (preenche 100% do ratio, sem "thumb à esquerda") */
.ratio > .dr-yt-lite{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dr-yt-lite{
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.dr-yt-thumb{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .95;
}

/* play central */
.dr-yt-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 60px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}
.dr-yt-play::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-35%,-50%);
  width: 0; height: 0;
  border-left: 18px solid rgba(255,255,255,.92);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.dr-yt-lite iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dr-yt-lite:focus{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}


.dr-presented-by{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.22);
  text-decoration:none;
}

.dr-presented-by img{
  max-height:34px;
  max-width:140px;
  object-fit:contain;
  display:block;
}



/* =========================
   APOIADORES (HIERARQUIA COMERCIAL)
   ========================= */

/* HERO - Patrocinador Master (assinatura premium) */
.dr-hero-sponsor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(600px 140px at 20% 0%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.20));
}

.dr-hero-sponsor-label{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}

.dr-hero-sponsor-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.dr-hero-sponsor-brand img{
  max-height: 54px;
  max-width: 220px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.dr-hero-sponsor-name{
  font-weight: 900;
  font-size: 18px;
  color: rgba(255,255,255,0.96);
}

.dr-hero-sponsor-headline{
  margin-top: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  max-width: 52ch;
}

/* Faixa "Oferecimento" - mini cards (Oficial) */
.dr-offer-strip{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  padding: 14px;
}

.dr-offer-strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dr-offer-strip-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 991.98px){
  .dr-offer-strip-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .dr-offer-strip-grid{ grid-template-columns: 1fr; }
}

.dr-offer-card{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 70px;
}

.dr-offer-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.24);
}

.dr-offer-card-logo{
  width: 96px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  padding: 6px;
}

.dr-offer-card-logo img{
  max-height: 34px;
  max-width: 84px;
  object-fit: contain;
  display:block;
}

.dr-offer-card-name{
  font-weight: 850;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}

.dr-offer-card-headline{
  font-size: 12px;
  color: rgba(255,255,255,0.68);
  margin-top: 3px;
  line-height: 1.2;
}

/* Grade - cards (Digital/Local) */
.dr-sponsor-card{
  display:flex;
  gap: 14px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 92px;
}

.dr-sponsor-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

.dr-sponsor-card-logo{
  width: 120px;
  height: 60px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  padding: 8px;
}

.dr-sponsor-card-logo img{
  max-height: 44px;
  max-width: 104px;
  object-fit: contain;
  display:block;
}

.dr-sponsor-card-body{
  min-width: 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.dr-sponsor-card-name{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,0.95);
  line-height: 1.2;
}

.dr-sponsor-card-headline{
  font-size: 12.5px;
  color: rgba(255,255,255,0.72);
  margin-top: 4px;
  line-height: 1.2;
}

.dr-sponsor-card-cta{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

/* Rodapé - selos com presença */
.dr-footer-sponsors{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.dr-footer-sponsor{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  min-height: 44px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.dr-footer-sponsor:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}

.dr-footer-sponsor img{
  max-height: 28px;
  max-width: 150px;
  object-fit: contain;
  display:block;
}



.dr-hero-meta{
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 62ch;
}



/* =========================
   MEDIA KIT / PATROCINADORES
   ========================= */

.dr-mk-hero{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,0.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22)),
    rgba(255,255,255,0.03);
  padding: 22px;
}

.dr-mk-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.dr-mk-badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  font-size: 12px;
  font-weight: 850;
  color: rgba(255,255,255,0.84);
}

.dr-mk-proof{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  padding: 16px;
}

.dr-mk-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}
.dr-mk-list li{ margin: 8px 0; }

.dr-plan{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  overflow:hidden;
}

.dr-plan-master{
  border-color: rgba(255,255,255,0.22);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,255,255,0.14), transparent 60%),
    rgba(255,255,255,0.05);
}

.dr-plan-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 16px 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.dr-plan-kicker{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 6px;
}

.dr-plan-title{
  font-family: Oswald, Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 26px;
  line-height: 1.1;
}

.dr-plan-sub{
  font-size: 13px;
  margin-top: 4px;
}

.dr-plan-tag{
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  white-space: nowrap;
}

.dr-plan-tag-soft{
  opacity: .85;
}

.dr-plan-body{
  padding: 14px 16px 16px 16px;
}

.dr-plan-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}
.dr-plan-list li{ margin: 8px 0; }

.dr-plan-cta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* cards de sponsors (prova social) */
.dr-mk-sponsor{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  padding: 16px;
}

.dr-mk-sponsor-head{
  display:flex;
  align-items:center;
  gap: 12px;
}

.dr-mk-sponsor-logo{
  width: 120px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
  flex: 0 0 auto;
}

.dr-mk-sponsor-logo img{
  max-height: 40px;
  max-width: 104px;
  object-fit: contain;
  display:block;
}

.dr-mk-sponsor-meta{
  min-width: 0;
}

/* Hero meta (home) */
.dr-hero-meta{
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 62ch;
}


.dr-hero .dr-title{
  max-width: 18ch;
  line-height: 0.95;
}


/* métricas / medição */
.dr-metric-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  padding: 16px;
}

.dr-metric-top{
  display:flex;
  align-items:center;
  gap: 12px;
}

.dr-metric-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  color: rgba(255,255,255,0.9);
}

.dr-metric-title{
  font-weight: 850;
}

.dr-metric-sub{
  font-size: 12px;
}

.dr-metric-foot{
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}


/* Comercial (steps) */
.dr-step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.dr-step:last-child{ border-bottom: 0; }

.dr-step-n{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
}


/* =========================
   FORM (comercial) — premium
   ========================= */
.dr-body .form-control,
.dr-body .form-select{
  background: rgba(0,0,0,0.18);
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
}
.dr-body .form-control::placeholder{
  color: rgba(255,255,255,0.45);
}
.dr-body .form-control:focus,
.dr-body .form-select:focus{
  background: rgba(0,0,0,0.22);
}

.alert{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
}