/* ===================================
   HYPEFY - TEMA BRANCO & ROXO CLEAN
   Versão 3.0 - Correção Completa
   =================================== */

/* === VARIÁVEIS DE CORES === */
:root {
  --primary-purple: #8B5CF6;
  --primary-purple-dark: #7C3AED;
  --primary-purple-light: #A78BFA;
  --accent-purple: #6D28D9;
  --bg-white: #FFFFFF;
  --bg-light: #FAFAFF;
  --bg-soft: #F5F3FF;
  --text-dark: #1F1F33;
  --text-medium: #4A4A68;
  --text-light: #6B6B8A;
  --border-light: #E8E5F0;
}

/* =====================================
   RESET COMPLETO DOS FUNDOS
   ===================================== */

body,
html {
  background: #FFFFFF !important;
  background-image: none !important;
  color: var(--text-dark) !important;
}

.page {
  background: #FFFFFF !important;
}

/* Todas as seções com fundo branco */
section,
.GPAREA,
.filetype-text {
  background: #FFFFFF !important;
  background-image: none !important;
}

/* IMPORTANTE: Sobrescrever pseudo-elementos com fundos escuros */
.prices::after,
.prices::before,
.prices__head::after,
.prices__head::before,
.reviews::after,
.reviews::before,
.advantages::after,
.advantages::before,
.examples::after,
.examples::before,
.faq::after,
.faq::before,
.footer::after,
.footer::before,
.hero::after,
.hero::before,
section::after,
section::before {
  background: transparent !important;
  background-image: none !important;
  display: none !important;
}

/* =====================================
   HEADER
   ===================================== */

.header {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05) !important;
}

.header.is-fixed-start,
.header.is-fixed,
.header.is-bg {
  background: rgba(255, 255, 255, 0.98) !important;
}

.header__menu a {
  color: #555 !important;
}

.header__menu a:hover {
  color: var(--primary-purple) !important;
}

.hamburger {
  background: linear-gradient(90deg, var(--primary-purple-dark), var(--primary-purple)) !important;
}

.hamburger.is-open {
  background: #f0f0f0 !important;
}

.hamburger.is-open span {
  background: var(--primary-purple) !important;
}

.header__mobile-menu {
  background: #FFFFFF !important;
}

.header__mobile-menu .header__menu a {
  color: var(--text-dark) !important;
  border-color: #eee !important;
}

.header__mobile-overlay.is-open {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* =====================================
   HERO SECTION
   ===================================== */

.hero {
  background: #FFFFFF !important;
  background-image: none !important;
}

.hero__info h1,
.hero__info p,
.hero__info span,
.h1-title,
.h2-title {
  color: var(--text-dark) !important;
}

.hero__slider .swiper-slide .h1-title.animated,
.h1-title.views {
  color: var(--primary-purple) !important;
}

.hero__info-el p {
  color: var(--text-dark) !important;
}

.hero__info-el p span {
  color: var(--text-medium) !important;
}

.hero__info-el svg path {
  fill: var(--primary-purple) !important;
}

.hero__bottom,
.hero__bottom--static {
  background: linear-gradient(90deg, var(--primary-purple), var(--primary-purple-dark)) !important;
  border: none !important;
}

.hero__bottom p,
.hero__bottom .free {
  color: #fff !important;
}

.hero__animate-circle .anim-circle path {
  fill: var(--primary-purple) !important;
}

/* =====================================
   SEÇÃO DE PREÇOS
   ===================================== */

.prices {
  background: #FFFFFF !important;
  background-image: none !important;
}

#prices {
  background: #FFFFFF !important;
}

.prices__head .h2-title {
  color: var(--text-dark) !important;
}

/* Tabs de redes sociais */
.prices__tab {
  background: #fff !important;
  border: 1px solid #e0e0e0 !important;
}

.prices__tab span {
  color: var(--text-medium) !important;
}

.prices__tab i,
.prices__tab [class*="icon-"] {
  color: var(--text-medium) !important;
}

.prices__tab.is-active,
.prices__tab:hover {
  background: linear-gradient(135deg, var(--primary-purple), var(--primary-purple-dark)) !important;
  border-color: var(--primary-purple) !important;
}

.prices__tab.is-active span,
.prices__tab:hover span,
.prices__tab.is-active i,
.prices__tab:hover i,
.prices__tab.is-active [class*="icon-"],
.prices__tab:hover [class*="icon-"] {
  color: #fff !important;
}

.prices__tab-bg,
.prices__tab-bottom {
  background: transparent !important;
  display: none !important;
}

/* Cards de preços */
.prices__item {
  background: #FFFFFF !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.prices__item h3,
.prices__item h4,
.prices__item h5 {
  color: var(--text-dark) !important;
}

.prices__item h3 span,
.prices__item h4 span,
.prices__item h5 span {
  color: var(--text-medium) !important;
}

.prices__item-row p {
  color: var(--primary-purple) !important;
  font-weight: 700 !important;
}

.prices__item-row-separator {
  background: #e0e0e0 !important;
}

/* Info dos preços */
.prices__tabs-info {
  background: var(--bg-soft) !important;
  border-radius: 10px !important;
}

.prices__tabs-info p {
  color: var(--text-medium) !important;
}

.prices__tabs-info-column p {
  color: var(--text-medium) !important;
}

/* Outros serviços */
.prices__other {
  background: var(--bg-soft) !important;
  border-radius: 10px !important;
}

.prices__other-title h4 {
  color: var(--text-dark) !important;
}

.prices__other-title svg path {
  stroke: var(--primary-purple) !important;
}

.prices__part {
  background: transparent !important;
}

.prices__slider-row,
.prices__other-row {
  background: transparent !important;
}

/* Tab more */
.prices__tab-more {
  background: #fff !important;
  color: var(--text-medium) !important;
  border: 1px solid #e0e0e0 !important;
}

.prices__tab-more:hover {
  background: var(--primary-purple) !important;
  color: #fff !important;
}

/* =====================================
   BOTÕES
   ===================================== */

.btn,
.button {
  background: linear-gradient(90deg, var(--primary-purple), var(--primary-purple-dark)) !important;
  color: #fff !important;
  border: none !important;
}

.btn:hover,
.button:hover {
  background: linear-gradient(90deg, var(--primary-purple-dark), var(--accent-purple)) !important;
}

.btn--border {
  background: transparent !important;
  border: 2px solid var(--primary-purple) !important;
  color: var(--primary-purple) !important;
}

.btn--border:hover {
  background: var(--primary-purple) !important;
  color: #fff !important;
}

.btn--white {
  background: #fff !important;
  color: var(--primary-purple) !important;
}

.btn--white:hover {
  background: var(--primary-purple) !important;
  color: #fff !important;
}

/* =====================================
   VANTAGENS
   ===================================== */

.advantages,
.advantages.features {
  background: var(--bg-light) !important;
  background-image: none !important;
}

.advantages .h2-title {
  color: var(--text-dark) !important;
}

.advantages__item {
  background: #FFFFFF !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.advantages__item-title,
.advantages__item h3,
.advantages__item h4 {
  color: var(--text-dark) !important;
}

.advantages__item-text,
.advantages__item p {
  color: var(--text-medium) !important;
}

.advantages__item-number,
.advantages__item span {
  color: var(--primary-purple) !important;
}

.advantages__item-icon {
  background: var(--bg-soft) !important;
}

.advantages__item-icon svg path {
  fill: var(--primary-purple) !important;
}

/* =====================================
   EXEMPLOS
   ===================================== */

.examples,
.examples-section,
#examples-section {
  background: #FFFFFF !important;
  background-image: none !important;
}

.examples .h2-title {
  color: var(--text-dark) !important;
}

.examples__item {
  background: var(--bg-soft) !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
}

.examples__item-title,
.examples__item h3 {
  color: var(--text-dark) !important;
}

.examples__item p {
  color: var(--text-medium) !important;
}

.examples__slider {
  background: transparent !important;
}

/* =====================================
   AVALIAÇÕES / REVIEWS
   ===================================== */

.reviews,
#reviews {
  background: var(--bg-light) !important;
  background-image: none !important;
}

.reviews .h2-title,
.reviews .section-title {
  color: var(--text-dark) !important;
}

.reviews__item,
.reviews__slider .swiper-slide>div {
  background: #FFFFFF !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.reviews__item-text,
.reviews__item-text p {
  color: var(--text-medium) !important;
}

.reviews__item-name,
.reviews__item-author {
  color: var(--text-dark) !important;
}

.reviews__item-date {
  color: var(--text-light) !important;
}

.reviews__item-stars svg,
.reviews__item-stars i,
.reviews__item-rating {
  color: #FFB800 !important;
}

/* =====================================
   FAQ
   ===================================== */

.faq {
  background: #FFFFFF !important;
  background-image: none !important;
}

.faq .h2-title {
  color: var(--text-dark) !important;
}

.faq__item {
  background: var(--bg-soft) !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 10px !important;
}

.faq__question,
.faq__item-question {
  color: var(--text-dark) !important;
}

.faq__answer,
.faq__item-answer,
.faq__item-answer p {
  color: var(--text-medium) !important;
}

/* =====================================
   CONTATOS
   ===================================== */

#contatos,
.contacts {
  background: var(--bg-light) !important;
  background-image: none !important;
}

.contacts .h2-title {
  color: var(--text-dark) !important;
}

.contacts p {
  color: var(--text-medium) !important;
}

.contacts a {
  color: var(--primary-purple) !important;
}

/* =====================================
   FOOTER
   ===================================== */

.footer {
  background: var(--bg-soft) !important;
  background-image: none !important;
  border-top: 1px solid #e0e0e0 !important;
}

.footer .h2-title,
.footer__title,
.footer .logotype {
  color: var(--text-dark) !important;
}

.footer__link,
.footer a,
.footer__menu a {
  color: var(--text-medium) !important;
}

.footer__link:hover,
.footer a:hover,
.footer__menu a:hover {
  color: var(--primary-purple) !important;
}

.footer__text,
.footer p {
  color: var(--text-medium) !important;
}

.footer__copyright {
  color: var(--text-light) !important;
}

.footer__point-info .white,
.footer__point-info .red {
  color: var(--text-dark) !important;
}

.footer__socials a {
  color: var(--text-medium) !important;
}

.footer__socials a:hover {
  color: var(--primary-purple) !important;
}

/* =====================================
   PARCEIROS
   ===================================== */

.partners {
  background: var(--bg-light) !important;
  background-image: none !important;
}

.partners .h2-title {
  color: var(--text-dark) !important;
}

/* =====================================
   CTA SECTION
   ===================================== */

.cta {
  background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple), var(--primary-purple-dark)) !important;
}

.cta .h2-title,
.cta__title,
.cta h2 {
  color: #fff !important;
}

.cta p,
.cta__text {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* =====================================
   POPUPS / MODAIS
   ===================================== */

#popupPedido .popup-content {
  background-color: #FFFFFF !important;
  color: var(--text-dark) !important;
  border: 1px solid #e0e0e0 !important;
}

#popupPedido .popup-content::-webkit-scrollbar-track {
  background: #f5f5f5 !important;
}

#popupPedido .popup-content::-webkit-scrollbar-thumb {
  background: var(--primary-purple) !important;
}

#popupPedido .close-btn {
  color: var(--primary-purple) !important;
}

#popupTitulo {
  color: var(--primary-purple) !important;
}

#popupPedido label {
  color: var(--text-medium) !important;
}

#popupPedido input,
#popupPedido select {
  background-color: #f8f8f8 !important;
  color: var(--text-dark) !important;
  border: 1px solid #ddd !important;
}

#popupPedido input:focus,
#popupPedido select:focus {
  border-color: var(--primary-purple) !important;
}

#popupPedido button.prosseguir {
  background: linear-gradient(to right, var(--primary-purple), var(--primary-purple-dark)) !important;
}

/* === CHECKOUT MODAL === */
#checkout-modal {
  background-color: #FFFFFF !important;
  color: var(--text-dark) !important;
  border: 1px solid #e0e0e0 !important;
}

.modal__close-btn {
  color: var(--primary-purple) !important;
}

.modal__title {
  color: var(--primary-purple) !important;
}

.modal__field label {
  color: var(--text-medium) !important;
}

.modal__input {
  background-color: #f8f8f8 !important;
  color: var(--text-dark) !important;
  border: 1px solid #ddd !important;
}

.button--primary {
  background: linear-gradient(to right, var(--primary-purple), var(--primary-purple-dark)) !important;
  color: #fff !important;
}

.button--danger {
  background-color: #f5f5f5 !important;
  color: var(--text-dark) !important;
  border: 1px solid #ddd !important;
}

/* =====================================
   OFERTAS
   ===================================== */

.oferta-info {
  background: var(--primary-purple) !important;
  color: #fff !important;
}

.oferta-navegacao .btn-nav {
  background: #f5f5f5 !important;
  color: var(--primary-purple) !important;
  border: 1px solid #e0e0e0 !important;
}

.oferta-navegacao .btn-nav:hover {
  background: var(--primary-purple) !important;
  color: #fff !important;
}

.oferta-card {
  background: #f8f8f8 !important;
  color: var(--text-dark) !important;
  border: 1px solid #e0e0e0 !important;
}

.oferta-titulo {
  color: var(--text-dark) !important;
}

.preco-novo {
  color: #10B981 !important;
}

.btn-oferta {
  background: linear-gradient(to right, var(--primary-purple), var(--primary-purple-dark)) !important;
  color: #fff !important;
}

/* =====================================
   ELEMENTOS GERAIS
   ===================================== */

/* Barra de progresso */
.progress-bar {
  background: var(--primary-purple) !important;
}

.progress-container {
  background-color: #e8e8e8 !important;
}

/* Barra promocional */
#promoBar {
  background: linear-gradient(90deg, var(--primary-purple), var(--primary-purple-dark)) !important;
  color: #fff !important;
}

/* Resultado */
#resultado {
  border: 1px solid #e0e0e0 !important;
  background: #f8f8f8 !important;
}

/* Language dropdown */
.language__links {
  background: #FFFFFF !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}

.language__links a {
  color: var(--text-dark) !important;
}

.language__link:hover a {
  color: var(--primary-purple) !important;
}

/* Swiper/Slider */
.swiper-pagination-bullet {
  background: #ccc !important;
}

.swiper-pagination-bullet-active {
  background: var(--primary-purple) !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--primary-purple) !important;
}

.swiper-scrollbar {
  background: #e0e0e0 !important;
}

.swiper-scrollbar-drag {
  background: var(--primary-purple-light) !important;
}

/* =====================================
   MOBILE ADJUSTMENTS
   ===================================== */

@media only screen and (max-width: 1204px) {
  .header__mobile-menu {
    background: #fff !important;
  }

  .header__mobile-menu .header__menu a {
    border-color: #eee !important;
  }

  .header__services-item {
    color: var(--text-dark) !important;
    border-color: #eee !important;
  }

  .header__services-item:hover {
    color: var(--primary-purple) !important;
  }

  .header__services-back {
    color: var(--text-dark) !important;
    border-color: #eee !important;
  }

  .header__services-mobile .header__services-links a {
    color: var(--text-dark) !important;
    border-color: #eee !important;
  }

  .header__services-mobile .header__services-links a:hover {
    color: var(--primary-purple) !important;
  }
}

/* =====================================
   SCROLLBAR
   ===================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-purple-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-purple);
}

/* =====================================
   SELECTION
   ===================================== */

::selection {
  background: var(--primary-purple-light);
  color: #fff;
}

/* =====================================
   FIX PARA TABS E CONTAINERS
   ===================================== */

.tabs,
.tabs2,
.tab {
  background: transparent !important;
}

._nav-slider,
._spoiler-tabs {
  background: transparent !important;
}

/* =====================================
   LINKS GERAIS
   ===================================== */

a {
  color: var(--primary-purple);
}

a:hover {
  color: var(--primary-purple-dark);
}