/* =========================
   IGOLD - Dark Theme (override) - CLEAN
   Inclua este CSS por ÚLTIMO
   ========================= */

/* =========================
   Paleta
   ========================= */
:root{
  --bg: #0b0b0c;
  --surface: #151518;
  --surface-2: #1d1d22;
  --text: #f2f2f3;
  --muted: #a1a1aa;
  --border: #2a2a2e;

  /* Accent “Instagram” (usado em botões/hover) */
  --accent: #e1306c;
  --accent-2: #f77737;

  /* Accent dourado (links + glow) */
  --gold: #ffdc7c;
  --gold-2: #ffeaa6;
}

/* =========================
   Fundo texturizado + granulado
   ========================= */
html, body{
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(1200px 700px at 50% 105%, rgba(255, 220, 124, 0.22), transparent 62%),
    radial-gradient(900px 520px at 18% 18%, rgba(255, 220, 124, 0.09), transparent 55%),
    radial-gradient(900px 520px at 85% 12%, rgba(255, 220, 124, 0.07), transparent 60%),
    linear-gradient(#09090b, #0b0b0c) !important;
  background-attachment: fixed !important;

  color: var(--text) !important;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");

  opacity: 0.22;
  mix-blend-mode: soft-light;
  filter: contrast(120%) brightness(95%);
}

/* conteúdo acima da textura */
body > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Tipografia
   ========================= */
section, .container, .row{ color: var(--text); }

h1, h2, h3, h4, h5, h6{ color: #fff !important; }

p, span, li, small{ color: var(--text); }

.text-about, .footer-txt, .txt-equipList{ color: var(--muted) !important; }

/* =========================
   Links (dourado por padrão)
   ========================= */
a{ color: var(--gold) !important; }
a:hover, a:focus{
  color: var(--gold-2) !important;
  text-decoration: none;
}

/* (links “accent” rosa específicos do seu site) */
.about-igold,
#features .text-tittle-about,
.panel-body a,
.wpp-number,
#email-contato-financeiro,
#email-contato-sac{
  color: var(--accent) !important;
}
.panel-body a:hover,
.wpp-number:hover,
#email-contato-financeiro:hover,
#email-contato-sac:hover{
  color: var(--accent-2) !important;
}

/* =========================
   Superfícies / Caixas
   ========================= */
.panel, .panel-body, .footer,
.container-video-about, .video-content,
.save-wrapper, .equipDetails, .contactInfo,
.Newsletter, .container_faq, #background-about-cargas,
.well, .modal-content{
  background: rgba(21, 21, 24, 0.92) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Seções que tinham fundo azul/gradiente no style.css */
#about, #planos, #equipamentos, #video{
  background: transparent !important;
  background-image: none !important;
}

/* Ajuste fino: se algum fundo ficar branco por regra antiga */
.About, .Features, .Planos, .Newsletter, .Contact, .kit, .faq{
  background: transparent !important;
}

/* =========================
   Formulários / Inputs
   ========================= */
.form-control,
#formLogin .form-control,
#formLogin input,
#email, #senha,
input[type="text"], input[type="email"], input[type="password"], select,
#name, #email-contato-footer, #message{
  background: #121214 !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.form-control:focus,
#formLogin .form-control:focus,
#formLogin input:focus,
#email:focus, #senha:focus,
input:focus, select:focus,
#name:focus, #email-contato-footer:focus, #message:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(225,48,108,0.15) !important;
}

.form-control::placeholder{ color: #8b8b95 !important; }

/* Remove outline azul padrão */
*:focus{ outline-color: var(--accent) !important; }

/* =========================
   Navbar / Menu
   ========================= */
.navbar,
.navbar .nav,
.navbar-default,
.navbar-collapse{
  background: #0b0b0c !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-text,
.navbar-default .navbar-brand,
.navbar .nav > li > a{
  color: var(--text) !important;
  text-shadow: none !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus{
  color: var(--accent) !important;
  background: transparent !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
  color: var(--accent) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Dropdown (menu/login) */
.dropdown-menu,
#login-dp,
#login-dp .bottom{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.dropdown-menu > li > a{
  color: var(--text) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
  background: rgba(255,255,255,0.06) !important;
  color: var(--text) !important;
}

/* =========================
   FAQ / Accordion
   ========================= */
.container_faq{
  background: rgba(21, 21, 24, 0.92) !important;
  border: 1px solid var(--border) !important;
}

.accordion_item{
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}

.accordion_header{
  background: var(--surface-2) !important;
  color: #fff !important;
}

.accordion_header span,
.accordion_content p{
  color: var(--text) !important;
}

.accordion_header .icon{ color: var(--accent) !important; }

.accordion_content{
  background: var(--surface) !important;
  color: var(--text) !important;
}

/* =========================
   Vídeo / Header
   ========================= */
#section-video, .video-header{ background: #0b0b0c !important; }
.video-body{ background: var(--surface) !important; }

#video-ytb{
  border: 1px solid rgba(255, 220, 124, 0.32) !important;
}

/* =========================
   Botões
   ========================= */
.btn-primary,
.btn-info,
.btn-default,
.btn-success,
#submit,
#btn-send-email-contato,
#btn-contact-getplans{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  background-image: none !important;
  color: #fff !important;
}

.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.btn-default:hover, .btn-default:focus,
.btn-success:hover, .btn-success:focus,
#submit:hover,
#btn-send-email-contato:hover,
#btn-contact-getplans:hover{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  color: #fff !important;
}

/* Caso tenha botões como <a class="btn ..."> */
a.btn{ color: #fff !important; }

/* Labels/badges */
.label-primary, .badge, .badge-primary{
  background: var(--accent) !important;
}

/* =========================
   Login / caixas (Bootstrap)
   ========================= */
#formLogin, .login, .login-box{
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Panel-primary */
.panel-primary{ border-color: var(--border) !important; }
.panel-primary > .panel-heading{
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: #fff !important;
}

/* =========================
   Botões animados
   ========================= */
.animated-button1,
.animated-button2{
  background: linear-gradient(-30deg, #151518 50%, #0f0f10 50%) !important;
  color: #fff !important;
}

.animated-button1:hover,
.animated-button2:hover{
  background: linear-gradient(-30deg, #1d1d22 50%, #0f0f10 50%) !important;
}

/* Linhas animadas (turquesa -> “puxa” pro accent via filtro) */
.animated-button1 span,
.animated-button2 span{
  filter: hue-rotate(140deg) saturate(1.6) !important;
}

/* =========================
   Seções específicas do site
   ========================= */
#background-about-cargas{
  background: rgba(21, 21, 24, 0.92) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
}
#about-cargas{
  color: #fff !important;
  text-shadow: none !important;
}
#background-about-cargas a{
  color: var(--accent) !important;
}
#background-about-cargas a:hover{
  color: var(--accent-2) !important;
}

/* Títulos grandes */
.kit-igold-title p,
#txt-about-igold,
.panel-title,
.video-header h1{
  color: #fff !important;
  text-shadow: 0 0 10px rgba(255, 220, 124, 0.18) !important;
}

/* Features */
#features .text-tittle-about{ color: #fff !important; }
#features article .img-article{ background-color: var(--surface-2) !important; }

/* Cards do kit */
.equipName{
  color: #fff !important;
  text-shadow: none !important;
}
.equipList,
.equipList .txt-equipList{
  color: var(--muted) !important;
}

/* “Planos Disponíveis” */
#planos h2{
  color: #fff !important;
  text-shadow: none !important;
}

/* Texto geral que herdava azul */
.text-center{ color: var(--text) !important; }

/* =========================
   Contato / Newsletter
   ========================= */
.Newsletter{
  background: rgba(21, 21, 24, 0.92) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
}

.Contact .contactInfo{
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.Contact .contactInfo .contactInfoItem:not(:last-child){
  border-right: 1px solid var(--border) !important;
}

.Contact .contactInfo .contactInfoItem,
.footer-txt{
  color: var(--text) !important;
}
#tel-contato-getplans{ color: var(--text) !important; }

/* Caixa “Sede São Carlos” */
.Contact .phoneList h2{
  background: var(--surface) !important;
  color: #fff !important;
  border: 1px solid var(--border) !important;
}
.Contact .phoneList p{
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
}

/* Borda do grupo do formulário de contato */
.form-group-contact{
  border: 1px solid var(--border) !important;
  border-radius: 7px;
}

/* =========================
   Glow dourado (consolidado)
   ========================= */

/* Se algum pai estiver cortando sombra, libera */
.Newsletter, .container_faq, .equipDetails, #background-about-cargas,
.video-content, .panel, .well, .modal-content{
  overflow: visible !important;
}

/* Cards/caixas principais */
.Newsletter,
.container_faq,
.equipDetails,
#background-about-cargas,
.video-content,
.aviso-content,
.panel, .well, .modal-content{
  border: 1px solid rgba(255, 220, 124, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 220, 124, 0.32),
    0 0 22px rgba(255, 220, 124, 0.28),
    0 0 70px rgba(255, 200, 70, 0.18),
    0 0 140px rgba(255, 200, 70, 0.10) !important;
}

/* Vídeo / iframe */
.video-body video,
#video-ytb{
  box-shadow:
    0 0 0 1px rgba(255, 220, 124, 0.35),
    0 0 28px rgba(255, 220, 124, 0.30),
    0 0 90px rgba(255, 190, 60, 0.20),
    0 0 180px rgba(255, 190, 60, 0.12) !important;
  border-color: rgba(255, 220, 124, 0.22) !important;
}

/* Botões com glow discreto */
.animated-button1,
.animated-button2,
.btn-primary,
.btn-success{
  box-shadow:
    0 0 0 1px rgba(255, 220, 124, 0.22),
    0 10px 22px rgba(0,0,0,0.55) !important;
}

/* =========================
   PALETA NOVA: vermelho + dourado
   (cole no FINAL do arquivo)
   ========================= */

/* 1) Redefine as variáveis principais */
:root{
  --accent: #ffdc7c;/*#b11226;*/     /* vermelho (principal) */
  --accent-2: #ffdc7c;   /* dourado (secundário / hover) */
}

/* 2) Links: dourado -> vermelho no hover */
a{
  color: var(--accent-2) !important;
}
a:hover, a:focus{
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* Links “accent” específicos do site (mantém padrão novo) */
.about-igold,
#features .text-tittle-about,
.panel-body a,
.wpp-number,
#email-contato-financeiro,
#email-contato-sac{
  color: var(--accent-2) !important;
}
.panel-body a:hover,
.wpp-number:hover,
#email-contato-financeiro:hover,
#email-contato-sac:hover{
  color: var(--accent) !important;
}

/* 3) Botões: vermelho -> dourado no hover */
.btn-primary,
.btn-info,
.btn-default,
.btn-success,
#submit,
#btn-send-email-contato,
#btn-contact-getplans{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.btn-default:hover, .btn-default:focus,
.btn-success:hover, .btn-success:focus,
#submit:hover,
#btn-send-email-contato:hover,
#btn-contact-getplans:hover{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
  color: #111 !important; /* melhora contraste no dourado */
}

/* 4) Focus/inputs: detalhe dourado (mais coerente com o tema) */
*:focus{
  outline-color: var(--accent-2) !important;
}
.form-control:focus,
#formLogin .form-control:focus,
#formLogin input:focus,
input:focus, select:focus,
#name:focus, #email-contato-footer:focus, #message:focus{
  border-color: var(--accent-2) !important;
  box-shadow: 0 0 0 2px rgba(255, 220, 124, 0.18) !important;
}

/* 5) Ícones do FAQ e detalhes: dourado */
.accordion_header .icon{
  color: var(--accent-2) !important;
}

/* 6) Links “da caixa” de cargas: dourado -> vermelho */
#background-about-cargas a{
  color: var(--accent-2) !important;
}
#background-about-cargas a:hover{
  color: var(--accent) !important;
}

/* 7) Botões animados: tira o filtro e força linhas douradas */
.animated-button1 span,
.animated-button2 span{
  filter: none !important;
  background: linear-gradient(to right, rgba(0,0,0,0), var(--accent-2)) !important;
}


/* natal ****************************************************************************************************************************** */
/* =========================
   NATAL (neve real + oscilação + trenó)
   Ativa com class "xmas" no <html> e no <body>
   ========================= */

/* NEVE – camada distante (flocos pequenos) */
html.xmas::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .35;
  background-repeat: repeat;
  background-size: 420px 420px;
  filter: blur(.25px);

  background-image:
    radial-gradient(1px 1px at 20px 40px, rgba(255,255,255,.55) 60%, transparent 61%),
    radial-gradient(1px 1px at 110px 120px, rgba(255,255,255,.35) 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 200px 80px, rgba(255,255,255,.35) 60%, transparent 61%),
    radial-gradient(1px 1px at 310px 160px, rgba(255,255,255,.25) 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 360px 30px, rgba(255,255,255,.30) 60%, transparent 61%),
    radial-gradient(1px 1px at 60px 260px, rgba(255,255,255,.25) 60%, transparent 61%),
    radial-gradient(1px 1px at 180px 300px, rgba(255,255,255,.30) 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 340px 290px, rgba(255,255,255,.22) 60%, transparent 61%),
    radial-gradient(1px 1px at 260px 360px, rgba(255,255,255,.18) 60%, transparent 61%);

  animation:
    xmas-fall-far 18s linear infinite,
    xmas-sway-far 6s ease-in-out infinite;
}

/* NEVE – camada próxima (flocos maiores) */
html.xmas::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .55;
  background-repeat: repeat;
  background-size: 320px 320px;
  mix-blend-mode: screen;

  background-image:
    radial-gradient(3px 3px at 30px 50px, rgba(255,255,255,.70) 55%, transparent 56%),
    radial-gradient(2px 2px at 120px 20px, rgba(255,255,255,.55) 55%, transparent 56%),
    radial-gradient(2.5px 2.5px at 210px 90px, rgba(255,255,255,.65) 55%, transparent 56%),
    radial-gradient(1.8px 1.8px at 280px 140px, rgba(255,255,255,.40) 55%, transparent 56%),
    radial-gradient(2.8px 2.8px at 260px 40px, rgba(255,255,255,.55) 55%, transparent 56%),
    radial-gradient(2px 2px at 70px 190px, rgba(255,255,255,.42) 55%, transparent 56%),
    radial-gradient(3.2px 3.2px at 160px 250px, rgba(255,255,255,.60) 55%, transparent 56%),
    radial-gradient(2.2px 2.2px at 300px 270px, rgba(255,255,255,.45) 55%, transparent 56%),
    radial-gradient(1.6px 1.6px at 40px 300px, rgba(255,255,255,.35) 55%, transparent 56%);

  animation:
    xmas-fall-near 10s linear infinite,
    xmas-sway-near 4s ease-in-out infinite;
}

/* “cair” (move o fundo no eixo Y) */
@keyframes xmas-fall-far{
  from{ background-position: 0 -900px; }
  to  { background-position: 0 1600px; }
}
@keyframes xmas-fall-near{
  from{ background-position: 0 -900px; }
  to  { background-position: 0 2100px; }
}

/* oscilação lateral (vento) */
@keyframes xmas-sway-far{
  0%,100%{ transform: translateX(-1.2vw); }
  50%    { transform: translateX(1.2vw); }
}
@keyframes xmas-sway-near{
  0%,100%{ transform: translateX(2.2vw); }
  50%    { transform: translateX(-2.2vw); }
}

/* TRENÓ – base64 (não vira “caracteres”) */
body.xmas::after{
  content:"";
  position: fixed;
  top: 56px;
  left: -360px;
  width: 320px;
  height: 110px;
  pointer-events: none;
  z-index: 10000;
  opacity: .9;

  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjAgMTgwIj4KICA8ZyBmaWxsPSJyZ2JhKDI1NSwyMjAsMTI0LDAuOTApIj4KICAgIDwhLS0gc2ltcGxlIHJlaW5kZWVyICsgc2xlaWdoIHNpbGhvdWV0dGUgLS0+CiAgICA8Y2lyY2xlIGN4PSI0MjAiIGN5PSI2MiIgcj0iMTIiLz4KICAgIDxjaXJjbGUgY3g9IjQ2NSIgY3k9IjEwOCIgcj0iMTIiLz4KICAgIDxjaXJjbGUgY3g9IjQ5NSIgY3k9IjEwOCIgcj0iMTAiLz4KICAgIDxwYXRoIGQ9Ik04MCAxMjhjMjQtMTQgNTQtMTggODItMTFsLTEwIDE4Yy0yMC00LTQxLTEtNTggOS0xNCA4LTI0IDIwLTMwIDM1LTIgNS04IDctMTMgNC01LTMtNy05LTQtMTQgOC0yMSAxOS0zMyAzMy00MXoiLz4KICAgIDxwYXRoIGQ9Ik0xNjAgODhjMzQtMjYgODAtMzQgMTIyLTIyIDM1IDEwIDY2IDM1IDg1IDY4aC0zNWMtMTYtMjMtMzktMzktNjYtNDctMzAtOS02NC0zLTkwIDE1bC0xNi0xNHoiLz4KICAgIDxwYXRoIGQ9Ik0yMTAgMTM0aDI1MGM5IDAgMTYgNyAxNiAxNnMtNyAxNi0xNiAxNkgyMTBjLTkgMC0xNi03LTE2LTE2czctMTYgMTYtMTZ6Ii8+CiAgICA8cGF0aCBkPSJNMzcyIDc0YzIyLTIgNDIgOSA1NSAyN2wxMCAxNS0yOCA4LTUtN2MtOC0xMS0xOS0xNy0zMi0xNlY3NHoiLz4KICAgIDxwYXRoIGQ9Ik0yMTAgMTUwYy00MiAwLTgzIDYtMTIyIDIwbC0xOC0xNmM0Ni0yMCA5Ni0zMCAxNDktMzBoMThjNiAwIDEwIDQgMTAgMTBzLTQgMTAtMTAgMTBoLTI3eiIvPgogIDwvZz4KPC9zdmc+");

  filter: drop-shadow(0 0 16px rgba(255,220,124,.18));
  animation: xmas-sleigh 22s linear infinite;
}

/* passa e dá um “intervalo” (boa cara de evento) */
@keyframes xmas-sleigh{
  0%,55% { transform: translateX(-120px) translateY(0) scale(.85); opacity: 0; }
  60%    { transform: translateX(0) translateY(0) scale(.85); opacity: .9; }
  100%   { transform: translateX(calc(100vw + 820px)) translateY(-26px) scale(.85); opacity: 0; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  html.xmas::before,
  html.xmas::after,
  body.xmas::after{
    animation: none !important;
  }
  body.xmas::after{ opacity: 0 !important; }
  html.xmas::before, html.xmas::after{ opacity: .18 !important; }
}




/* =========================
   PRODUTOS (override do produtos.css)
   ========================= */

/* fundo da página */
body#body{
  background: transparent !important;
  color: var(--text) !important;
}

/* título */
h1.title{
  color: #fff !important;
}

/* container dos cards */
.carrinho-container{
  background: transparent !important;
}

/* CARD do produto */
.produto-single-box{
  background: rgba(21, 21, 24, 0.92) !important;
  border: 1px solid rgba(255, 220, 124, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 220, 124, 0.32),
    0 0 22px rgba(255, 220, 124, 0.22) !important;
  color: var(--text) !important;
}

/* textos dentro do card (seu HTML usa id repetido, então tem que estilizar por seletor do card) */
.produto-single-box #nome-produto{
  color: #fff !important;
}

.produto-single-box #preco-produto{
  color: var(--gold-2) !important;
}

/* link "Saiba mais!" */
.produto-single-box .saiba-mais{
  color: var(--gold) !important;
}
.produto-single-box .saiba-mais:hover{
  color: var(--gold-2) !important;
}

/* botão "Tenho interesse!" (cards) */
.produto-single-box .add-carrinho{
  background: var(--accent) !important;      /* normal */
  border: 1px solid var(--accent) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px; /* opcional */
}
.produto-single-box .add-carrinho:hover,
.produto-single-box .add-carrinho:focus{
  background: var(--accent-2) !important;    /* hover dourado */
  border-color: var(--accent-2) !important;
  color: #111 !important;
}

/* ícone do carrinho */
.produto-single-box .add-carrinho #icon-carrinho{
  color: inherit !important;
}

/* ====== Modal/Detalhe do produto (main-estojo, main-obd etc.) ====== */
main[class^="main-"]{
  background: rgba(11, 11, 12, 0.72) !important;
  color: var(--text) !important;
}

main[class^="main-"] .content{
  background: rgba(21, 21, 24, 0.92) !important;
  border: 1px solid rgba(255, 220, 124, 0.28) !important;
  color: var(--text) !important;
}

/* textos do modal */
main[class^="main-"] h1,
main[class^="main-"] label{
  color: #fff !important;
}
main[class^="main-"] p{
  color: var(--muted) !important;
}
main[class^="main-"] span{
  color: var(--gold-2) !important;
}

/* link voltar */
main[class^="main-"] .voltar{
  color: var(--gold) !important;
}
main[class^="main-"] .voltar:hover{
  color: var(--gold-2) !important;
}

/* botão "Tenho interesse!" dentro do modal */
.btn-interesse{
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px;
}
.btn-interesse a{
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.btn-interesse:hover,
.btn-interesse:focus{
  background: var(--accent-2) !important;
  border-color: var(--accent-2) !important;
}
.btn-interesse:hover a,
.btn-interesse:focus a{
  color: #111 !important;
}

/* overlay */
#fade{
  background: rgba(0,0,0,0.72) !important;
}