/* ===================================================================
   MJ — Tema Dark + Gold (global)
   Uso: incluir <link href="css/styles.css" rel="stylesheet">
   =================================================================== */

/* --------- Paleta e base --------- */
:root {
  --bg: #0d0d0d;
  --bg-elev: #141414;
  --line: #252525;
  --text: #e8e8e8;
  --muted: #a9a9a9;
  --gold: #d4af37;
  --gold-dark: #b8860b;
  --gold-soft: #f2d98d;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

html, body { height: 100%; }
body {
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(212,175,55,.08), transparent),
    radial-gradient(700px 400px at 120% 10%, rgba(212,175,55,.05), transparent),
    var(--bg);
  color: var(--text);
}

/* --------- Tipografia --------- */
h1, h2, h3, h4, h5, h6 { color: var(--gold); }
.lead, .text-muted { color: var(--muted) !important; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; text-shadow: 0 0 6px var(--gold); }

/* --------- Navbar & Footer --------- */
.navbar,
footer,
.bg-dark { background-color: #000 !important; }

.navbar-brand img { height: 40px; }
.navbar .nav-link {
  color: var(--gold) !important;
  font-weight: 500;
}
.navbar .nav-link:hover {
  color: #fff !important;
  text-shadow: 0 0 6px var(--gold);
}

footer { border-top: 1px solid var(--line); color: var(--muted); }
footer .text-gold { color: var(--gold); }

/* --------- Cards / Sections --------- */
.card {
  background: linear-gradient(180deg, rgba(20,20,20,.95), rgba(20,20,20,.85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-title { color: var(--gold); }

.section-dark {
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* --------- Botões --------- */
.btn-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #000;
  border: 1px solid var(--gold-dark);
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.05); color: #fff; }

.btn-outline-gold {
  color: var(--gold);
  border: 1px solid rgba(212,175,55,.55);
  background: transparent;
  font-weight: 600;
}
.btn-outline-gold:hover {
  background: rgba(212,175,55,.1);
  color: #fff;
}

/* --------- Formulários --------- */
.form-control, .form-select, textarea {
  background: #0b0b0b;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.22);
  color: var(--text);
}

/* --------- Tabelas --------- */
.table {
  color: var(--text);
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.table thead th {
  background: rgba(212,175,55,.08);
  color: var(--gold-soft);
  border-bottom: 1px solid var(--line);
}
.table tbody td { border-top: 1px solid var(--line); }

/* --------- Badges, features, ícones --------- */
.badge-gold {
  background: rgba(212,175,55,.12);
  color: var(--gold-soft);
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 999px;
}
.feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(212,175,55,.4);
  color: var(--gold);
  font-size: 1.4rem;
}

/* --------- Utilidades --------- */
.text-gold { color: var(--gold) !important; }
.bg-gold { background: var(--gold) !important; color: #000 !important; }
.border-gold { border-color: var(--gold) !important; }

/* --------- Acessibilidade --------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Hero ocupa a dobra */
.hero-full{
  min-height: 85vh;          /* ocupa 85% da altura da tela */
  display: flex;
  align-items: center;        /* centraliza vertical */
  justify-content: center;    /* centraliza horizontal */
  padding: 4rem 0;            /* respiro */
  background: transparent;    /* usa o fundo do body (gradiente) */
}
@media (max-width: 992px){
  .hero-full{ min-height: 70vh; }
}

/* Corrige texto apagado em listas de pricing */
.card ul li {
  color: var(--text) !important;       /* cor clara */
}

.card ul li strong {
  color: var(--gold) !important;       /* destaque dourado */
}

.card ul li i.bi {
  color: var(--gold) !important;       /* ícones também dourados */
}

/* Alerta destaque na home */
.alerta-destaque {
  background: linear-gradient(90deg, rgba(212,175,55,0.15), rgba(212,175,55,0.3));
  border: 1px solid var(--gold-dark);
  color: var(--gold);
  font-weight: 600;
  padding: 1rem;
  font-size: 1.1rem;
  text-shadow: 0 0 6px rgba(0,0,0,.5);
}

//* Ícones do alerta */
.alerta-destaque .robozinho {
  font-size: 1.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  color: var(--gold);
  opacity: 0.85;
}

.alerta-destaque .celular {
  font-size: 1.8rem;   /* maior que o robozinho */
  margin-right: 0.6rem;
  vertical-align: middle;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(212,175,55,.4);
}