/* ==========================================
   planos-only-dark.css
   Override SOMENTE dos cards (#plansGrid)
   + correção do bloco "Transparência"
   Mantém o seu tema (:root) intacto.
   ========================================== */

/* =========================
   1) CARDS DOS PLANOS (DARK)
   escopo forte: só dentro do grid de planos
========================= */

#plansGrid .plan-card{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(255,106,0,.14), transparent 60%),
    radial-gradient(900px 420px at 82% 22%, rgba(122,0,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  color: var(--text);
  overflow: hidden;
  position: relative;
  height: 100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

#plansGrid .plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}

/* Cabeçalho do plano */
#plansGrid .plan-head{
  padding: 1.2rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(650px 220px at 20% 0%, rgba(255,106,0,.16), transparent 60%),
    radial-gradient(650px 220px at 85% 10%, rgba(122,0,255,.16), transparent 60%);
}

#plansGrid .plan-title{
  font-weight: 1000;
  margin:0;
  color: rgba(255,255,255,.95);
}
#plansGrid .plan-sub{
  color: rgba(255,255,255,.70);
  font-weight: 850;
  margin-top:.15rem;
}

#plansGrid .mega{
  font-size: 3.1rem;
  font-weight: 1000;
  line-height: 1;
  margin: .65rem 0 .25rem;
  color:#fff;
}
#plansGrid .mega small{
  font-size: 1rem;
  font-weight: 900;
  color: rgba(255,255,255,.70);
}

/* Corpo */
#plansGrid .plan-body{ padding: 1rem 1.25rem 1.25rem; }

/* Linhas internas */
#plansGrid .line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .9rem;
  padding: .68rem .8rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.18);
  margin-bottom: .65rem;
}

#plansGrid .line .left{
  display:flex;
  align-items:center;
  gap:.62rem;
  min-width:0;
}

#plansGrid .line .lbl{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

#plansGrid .line .val{
  font-weight: 1000;
  color:#fff;
  text-align:right;
}
#plansGrid .line .val .muted{
  color: rgba(255,255,255,.70) !important;
}

/* Ícones das linhas */
#plansGrid .line .ic{
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,106,0,.14);
  border: 1px solid rgba(255,106,0,.22);
  color: rgba(255,220,200,.95);
  flex: 0 0 auto;
}
#plansGrid .line .ic.purple{
  background: rgba(122,0,255,.16);
  border-color: rgba(122,0,255,.22);
  color: rgba(220,200,255,.96);
}

/* Botões dentro do card (mantém seu padrão) */
#plansGrid .plan-actions{
  display:flex;
  gap:.6rem;
  margin-top: 1rem;
}
#plansGrid .plan-actions .btn-brand{ flex:1 1 auto; }
#plansGrid .plan-actions .btn-soft{
  width: 46px;
  display:grid;
  place-items:center;
  padding: 0;
}

/* Badge topo (ajusta pra dark) */
#plansGrid .badge-top{
  position:absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  padding: .42rem .72rem;
  font-weight: 1000;
  font-size: .78rem;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  gap:.5rem;
  white-space: nowrap;
  color:#fff;
}

#plansGrid .badge-top.w6{
  border-color: rgba(255,106,0,.38);
  background: linear-gradient(180deg, rgba(255,106,0,.30), rgba(0,0,0,.35));
}
#plansGrid .badge-top.reco{
  border-color: rgba(25,255,106,.30);
  background: linear-gradient(180deg, rgba(25,255,106,.20), rgba(0,0,0,.35));
}

/* Highlight recomendado (continua igual, só mais “vivo” no dark) */
#plansGrid .highlight{
  outline: 4px solid rgba(255,106,0,.55);
  box-shadow: 0 0 0 9px rgba(255,106,0,.12), 0 26px 80px rgba(0,0,0,.55) !important;
}

/* Callout Wi-Fi 6 (se você usar no HTML/JS) */
#plansGrid .w6-callout{
  margin-top: .75rem;
  padding: .85rem .9rem;
  border-radius: 18px;
  border: 1px solid rgba(255,106,0,.30);
  background: rgba(255,106,0,.12);
}
#plansGrid .w6-callout .t{
  display:flex; align-items:center; gap:.55rem;
  font-weight: 1000;
  color: rgba(255,255,255,.95);
}
#plansGrid .w6-callout .p{
  margin-top:.25rem;
  color: rgba(255,255,255,.80);
  font-size: .92rem;
  line-height: 1.25;
}

/* Texto pequeno do rodapé do card (ATIVAÇÃO/equipamento) */
#plansGrid .small,
#plansGrid .small.muted{
  color: rgba(255,255,255,.72) !important;
}

/* =========================
   2) CORREÇÃO DO BLOCO “TRANSPARÊNCIA…”
   (aplique a classe .transparency-box no HTML)
========================= */
.transparency-box{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  color: rgba(255,255,255,.86) !important;
}
.transparency-box strong{
  color:#fff !important;
}
.transparency-box a{
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline;
}


:root{
  /* Brand */
  --brand-black:#07060b;
  --brand-ink:#0f172a;

  --brand-purple-900:#12031f;
  --brand-purple-800:#1a0530;
  --brand-purple-700:#240747;
  --brand-purple-600:#3a0a6b;

  --brand-orange:#ff6a00;
  --brand-orange-2:#ff4d00;

  --brand-green:#19ff6a;

  /* UI */
  --bg:#07060b;              /* fundo geral */
  --surface:#0e0b14;         /* cards escuros */
  --surface-2:#120f1c;
  --surface-glass:rgba(255,255,255,.07);

  --card:#ffffff;            /* cards claros (planos, table etc.) */
  --ink:#0f172a;             /* texto escuro */
  --muted:#64748b;           /* texto muted em fundo claro */
  --muted-2:rgba(15,23,42,.72);

  --text:#f6f7fb;            /* texto claro em fundo escuro */
  --text-muted:rgba(255,255,255,.78);
  --text-soft:rgba(255,255,255,.64);

  --border:rgba(255,255,255,.14);
  --border-dark:rgba(15,23,42,.12);

  --shadow:0 16px 40px rgba(0,0,0,.35);
  --shadow-soft:0 10px 26px rgba(0,0,0,.22);

  --r:20px;
  --r2:16px;

  /* Focus ring */
  --ring: 0 0 0 6px rgba(255,106,0,.16);
}

/* =========================
   BASE
========================= */
html,body{ height:100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ text-decoration:none; }
.muted{ color: var(--text-muted); }

::selection{ background: rgba(255,106,0,.28); }

/* container spacing */
.section{ padding: 3.2rem 0; }
.section-title small{
  display:block;
  letter-spacing:.18em;
  font-weight: 950;
  color: rgba(255,255,255,.62);
}
.section-title h2{ font-weight: 1000; }
.section-title .muted{ color: rgba(255,255,255,.74); }

/* =========================
   TOPBAR
========================= */
.topbar{
  background: #090610;
  color: rgba(255,255,255,.86);
  font-size:.92rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar a{ color: rgba(255,255,255,.86); }
.topbar a:hover{ color:#fff; }

/* =========================
   NAVBAR
========================= */
.navbar{
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(780px 240px at 90% 20%, rgba(122,0,255,.22), transparent 60%),
    linear-gradient(90deg, var(--brand-purple-900), var(--brand-purple-700));
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar .nav-link{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
  border-radius: 14px;
  padding: .6rem .75rem;
}
.navbar .nav-link:hover{
  color:#fff !important;
  background: rgba(255,255,255,.08);
}

/* =========================
   BUTTONS
========================= */
.btn-brand{
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-orange-2));
  border: none;
  color:#fff;
  font-weight: 1000;
  border-radius: 16px;
  padding: .82rem 1.05rem;
  box-shadow: 0 14px 30px rgba(255,106,0,.22);
}
.btn-brand:hover{ filter: brightness(.98); }
.btn-brand:focus{ box-shadow: var(--ring); }

.btn-soft{
  border-radius: 16px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.btn-soft:hover{ background: rgba(255,255,255,.12); }
.btn-soft:focus{ box-shadow: 0 0 0 6px rgba(255,255,255,.10); }

.btn-outline-light{
  border-radius: 14px;
  font-weight: 900;
}

.btn-icon{
  width:42px; height:42px;
  border-radius: 16px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
}
.btn-icon:hover{ background: rgba(255,255,255,.12); }

/* =========================
   HERO
========================= */
.hero{
  background:
    radial-gradient(950px 420px at 18% 10%, rgba(255,106,0,.26), transparent 60%),
    radial-gradient(920px 420px at 85% 30%, rgba(140,0,255,.24), transparent 60%),
    linear-gradient(180deg, #0a0613, #06050a);
  color:#fff;
  padding: 4.2rem 0 3.2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero .lead{ color: rgba(255,255,255,.90); }

.glass{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.hero h1, .hero .display-5{ font-weight: 1000; }

.hero .badge-info{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  padding: .42rem .75rem;
}

/* =========================
   CHIPS (seleção de uso)
========================= */
#useChips{ gap:.5rem !important; }
.chip{
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 999px;
  padding: .42rem .78rem;
  font-weight: 950;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover{
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.chip.active{
  background: rgba(255,106,0,.24);
  border-color: rgba(255,106,0,.34);
  box-shadow: 0 0 0 6px rgba(255,106,0,.12);
}

/* range */
.form-range{
  accent-color: var(--brand-orange);
}

/* =========================
   PROMO SWIPER
========================= */
.swiper{
  padding-bottom: 2.2rem;
}
.promo-card{
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
  position: relative;
  height: 380px;
  background: #000;
}
.promo-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .90;
}
.promo-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.78));
  padding: 1.15rem;
  display:flex;
  align-items:flex-end;
}
.promo-overlay h3{ margin:0; font-weight: 1000; color:#fff; }
.promo-overlay p{ margin:.25rem 0 0; color: rgba(255,255,255,.82); }

.swiper-button-prev,
.swiper-button-next{
  color:#fff;
  text-shadow: 0 10px 20px rgba(0,0,0,.35);
}
.swiper-pagination-bullet{ background: rgba(255,255,255,.55); }
.swiper-pagination-bullet-active{ background: var(--brand-orange); }

@media (min-width:1200px){
  .promo-card{ height: 440px; }
}

/* =========================
   PLAN CARDS (Cards dos Planos)
========================= */
#planos{ scroll-margin-top: 96px; }

.plan-card{
  background: var(--card);
  border: 1px solid var(--border-dark);
  border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  height: 100%;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
  position: relative;
  color: var(--ink);
}
.plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(15,23,42,.16);
}

.plan-head{
  padding: 1.25rem 1.25rem .95rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(650px 220px at 20% 0%, rgba(255,106,0,.12), transparent 60%),
    radial-gradient(650px 220px at 85% 10%, rgba(140,0,255,.10), transparent 60%);
}
.plan-title{ font-weight: 1000; margin:0; }
.plan-sub{ color: rgba(15,23,42,.62); font-weight: 850; margin-top:.15rem; }

.mega{
  font-size: 3.05rem;
  font-weight: 1000;
  line-height: 1;
  margin: .65rem 0 .25rem;
}
.mega small{
  font-size: 1rem;
  font-weight: 900;
  color: rgba(15,23,42,.60);
}

.plan-body{ padding: 1rem 1.25rem 1.25rem; }

/* linhas do card */
.line{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: .8rem;
  padding: .62rem .78rem;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(15,23,42,.02);
  margin-bottom: .6rem;
}
.line .left{
  display:flex; align-items:center; gap:.55rem; min-width:0;
}
.line .ic{
  width: 38px; height: 38px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,106,0,.12);
  border: 1px solid rgba(255,106,0,.22);
  color: #7a2f00;
  flex: 0 0 auto;
}
.line .lbl{
  font-weight: 950;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.line .val{ font-weight: 1000; text-align:right; color: rgba(15,23,42,.92); }
.line .val .muted{ color: rgba(15,23,42,.62) !important; }

/* ações */
.plan-actions{ display:flex; gap:.6rem; margin-top: 1rem; }
.plan-actions .btn{ border-radius: 16px; }

/* badge topo */
.badge-top{
  position: absolute; top: 14px; right: 14px;
  border-radius: 999px;
  padding: .42rem .75rem;
  font-weight: 1000;
  font-size: .78rem;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  display:flex; align-items:center; gap:.45rem;
  white-space: nowrap;
}
.badge-top.reco{
  border-color: rgba(25,135,84,.28);
  background: rgba(25,135,84,.08);
  color:#0f5132;
}
.badge-top.w6{
  border-color: rgba(255,106,0,.28);
  background: rgba(255,106,0,.10);
  color:#7a2f00;
}

/* Highlight recomendado (scroll/seleção) */
.highlight{
  outline: 4px solid rgba(255,106,0,.55);
  box-shadow: 0 0 0 8px rgba(255,106,0,.12), 0 18px 45px rgba(15,23,42,.16) !important;
}

/* =========================
   DESTAQUE "Wi-Fi 6 faz diferença"
   (usar no HTML: class="wifi6-hero" / "wifi6-pill" / "wifi6-boost")
========================= */
.wifi6-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius: 999px;
  padding:.42rem .78rem;
  font-weight: 950;
  border: 1px solid rgba(255,106,0,.38);
  background: rgba(255,106,0,.16);
  color:#fff;
}
.wifi6-pill strong{ color:#fff; }

.wifi6-hero{
  border-radius: var(--r);
  padding: 1rem 1rem;
  background:
    radial-gradient(620px 220px at 10% 0%, rgba(255,106,0,.22), transparent 60%),
    radial-gradient(720px 260px at 90% 20%, rgba(140,0,255,.22), transparent 60%),
    rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-soft);
}
.wifi6-hero h3{
  font-weight: 1000;
  margin:0;
  color:#fff;
}
.wifi6-hero p{
  margin:.35rem 0 0;
  color: rgba(255,255,255,.86);
}

/* =========================
   "FLAT ICONS" (sem PNG obrigatório)
   Use:
   <span class="fi"><img class="fi-img" src="..." alt=""></span>
   ou use só <span class="fi"> <i class="bi ..."></i></span>
========================= */
.fi{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,106,0,.12);
  border: 1px solid rgba(255,106,0,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.fi-img{
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
  display:block;
  filter: saturate(1.05);
}
.fi-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .55rem;
  border-radius: 999px;
  font-weight: 950;
  font-size:.78rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
}

/* =========================
   BLOCO COMPARATIVO WI-FI 5 vs WI-FI 6
   (para sua seção Wi-Fi 6)
========================= */
.wifi-compare{
  border-radius: var(--r);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  padding: 1.2rem;
}
.wifi-compare .title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.wifi-compare .title h3{
  margin:0;
  font-weight: 1000;
  color:#fff;
}
.wifi-compare .title .hint{
  color: rgba(255,255,255,.78);
  font-weight: 850;
  font-size:.95rem;
}

.wifi-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 991px){
  .wifi-grid{ grid-template-columns: 1fr; }
}

.wifi-box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  padding: 1rem;
}
.wifi-box h4{
  margin:0 0 .25rem;
  font-weight: 1000;
  color:#fff;
  display:flex;
  align-items:center;
  gap:.55rem;
}
.wifi-box p{
  margin:0;
  color: rgba(255,255,255,.78);
}

.wifi-box.w6{
  border-color: rgba(255,106,0,.28);
  background:
    radial-gradient(520px 180px at 20% 0%, rgba(255,106,0,.18), transparent 60%),
    rgba(0,0,0,.20);
}
.wifi-box.w6 .tag{
  display:inline-flex;
  margin-top:.65rem;
  border-radius: 999px;
  padding:.30rem .62rem;
  font-weight: 950;
  font-size:.78rem;
  background: rgba(255,106,0,.16);
  border: 1px solid rgba(255,106,0,.30);
  color:#fff;
}

/* tabela comparativa */
.wifi-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 1rem;
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
}
.wifi-table th, .wifi-table td{
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}
.wifi-table thead th{
  background: rgba(255,255,255,.08);
  font-weight: 1000;
  letter-spacing:.02em;
}
.wifi-table tr:last-child td{ border-bottom: 0; }
.wifi-table td strong{ color:#fff; }
.wifi-table .yes{ color: rgba(25,255,106,.92); font-weight: 1000; }
.wifi-table .no{ color: rgba(255,255,255,.55); font-weight: 900; }

/* =========================
   HELP CARD (seções claras)
========================= */
.help-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: 1.2rem;
  color:#fff;
}
.help-card .muted{
  color: rgba(255,255,255,.78) !important;
}

/* Seção com fundo branco (tabela) */
.section.bg-white{
  background: #fff !important;
  color: var(--ink);
}
.section.bg-white .section-title small{
  color: rgba(15,23,42,.55);
}
.section.bg-white .section-title .muted{
  color: rgba(15,23,42,.70);
}

/* =========================
   ACCORDION (Bootstrap) - correção de contraste
========================= */
.accordion-item{
  background: #fff;
  border-color: rgba(15,23,42,.12) !important;
  border-radius: 18px;
  overflow: hidden;
}
.accordion-item + .accordion-item{ margin-top: .8rem; }
.accordion-button{
  color: var(--ink) !important;
  background: #fff !important;
  font-weight: 950;
  padding: 1rem 1.1rem;
}
.accordion-button:not(.collapsed){
  background: rgba(255,106,0,.08) !important;
  color: var(--ink) !important;
}
.accordion-button::after{ filter:none !important; opacity: .8; }
.accordion-body{
  color: rgba(15,23,42,.88) !important;
  padding: 1rem 1.1rem 1.1rem;
}
.accordion-body .muted{ color: rgba(15,23,42,.72) !important; }

/* =========================
   DATATABLES (tabela completa) - correção de contraste
========================= */
table.dataTable thead{
  background:
    radial-gradient(620px 220px at 15% 0%, rgba(255,106,0,.18), transparent 60%),
    linear-gradient(90deg, var(--brand-purple-900), var(--brand-purple-700)) !important;
  color:#fff !important;
}
table.dataTable,
table.dataTable td,
table.dataTable th{
  color: rgba(15,23,42,.92) !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate{
  color: rgba(15,23,42,.82) !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  color: rgba(15,23,42,.92) !important;
  background: #fff !important;
  border-color: rgba(15,23,42,.16) !important;
  border-radius: 12px;
}
.page-link{
  border-radius: 12px !important;
}

/* =========================
   MODAIS (Bootstrap)
========================= */
.modal-content{
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  overflow: hidden;
}
.modal-header{
  background:
    radial-gradient(520px 180px at 15% 0%, rgba(255,106,0,.12), transparent 60%),
    radial-gradient(520px 180px at 90% 10%, rgba(140,0,255,.10), transparent 60%),
    #fff;
}
.modal-title, .modal-header .fw-bold{ color: var(--ink); }
.modal-body{ color: rgba(15,23,42,.90); }
.modal-body .help-card{
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  color: var(--ink);
}
.modal-body .help-card .muted{ color: rgba(15,23,42,.72) !important; }

/* =========================
   FOOTER
========================= */
footer{
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(255,106,0,.20), transparent 60%),
    linear-gradient(90deg, var(--brand-purple-900), var(--brand-purple-700));
  color:#fff;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
footer a{ color: rgba(255,255,255,.84); font-weight: 850; }
footer a:hover{ color:#fff; }

/* =========================
   UTILITÁRIOS
========================= */
.text-orange{ color: var(--brand-orange) !important; }
.text-purple{ color: #c7a7ff !important; }
.bg-soft{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r);
}
.hr-soft{
  border-color: rgba(255,255,255,.14) !important;
  opacity: 1;
}

/* Não deixar “opacity-75” matar contraste onde não deve */
.section.bg-white .opacity-75,
.section.bg-white .opacity-50{
  opacity: 1 !important;
}