/* Complexo Paulista — visual inspirado no estilo Cidade Alta (escuro, bold, cinematográfico) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Zen+Dots&display=swap");

:root {
  color-scheme: dark;
  --dm-bg: #050505;
  --dm-bg-2: #0a0a0a;
  --dm-bg-3: #101010;
  --dm-card: #121212;
  --dm-card-2: #1a1a1a;
  --dm-border: rgba(255, 255, 255, 0.08);
  --dm-border-soft: rgba(255, 255, 255, 0.05);
  --dm-text: #f5f5f5;
  --dm-text-muted: #9a9a9a;
  --dm-accent: #e10613;
  --dm-accent-2: #ff2a36;
  --dm-accent-soft: rgba(225, 6, 19, 0.18);
  --dm-font: "Montserrat", system-ui, sans-serif;
  --dm-display: "Zen Dots", "Montserrat", sans-serif;
  --dm-radius: 14px;
  --dm-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

html,
body {
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(225, 6, 19, 0.18), transparent 55%),
    radial-gradient(900px 420px at 100% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
    var(--dm-bg) !important;
  color: var(--dm-text) !important;
  font-family: var(--dm-font) !important;
}

.cliente,
.cliente #app {
  background: transparent;
  color: var(--dm-text);
  font-family: var(--dm-font);
}

.cliente h1,
.cliente h2,
.cliente h3,
.cliente .section__title h3,
.cliente .product__details-title,
.cliente .checkbox-form h3,
.cliente .your-order h3 {
  font-family: var(--dm-display) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===== Hero injetado (home) ===== */
.cp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(320px, 52vh, 560px);
  margin: 0 0 28px;
  border-bottom: 1px solid var(--dm-border);
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.15) 0%, rgba(5, 5, 5, 0.88) 78%, #050505 100%),
    radial-gradient(800px 300px at 70% 40%, rgba(225, 6, 19, 0.35), transparent 60%),
    linear-gradient(120deg, #141414, #070707 55%, #1a0507);
}

.cp-hero__glow {
  position: absolute;
  inset: auto -10% -40% auto;
  width: 55%;
  height: 80%;
  background: radial-gradient(circle, rgba(225, 6, 19, 0.35), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.cp-hero__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 42px;
}

.cp-hero__brand {
  display: inline-block;
  font-family: var(--dm-display);
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dm-accent-2);
  margin-bottom: 14px;
}

.cp-hero__title {
  margin: 0 0 12px;
  max-width: 14ch;
  font-family: var(--dm-display);
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
}

.cp-hero__text {
  margin: 0 0 22px;
  max-width: 42ch;
  color: var(--dm-text-muted);
  font-size: 1rem;
  font-weight: 500;
}

.cp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cp-hero__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--dm-font);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cp-hero__btn--primary {
  background: var(--dm-accent);
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(225, 6, 19, 0.35);
}

.cp-hero__btn--primary:hover {
  background: var(--dm-accent-2);
  transform: translateY(-1px);
  color: #fff !important;
}

.cp-hero__btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cp-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}

/* ===== Fundos ===== */
.cliente .grey-bg,
.cliente .grey-bg-2,
.cliente .white-bg,
.cliente .slider__area,
.cliente .deal__area,
.cliente .banner__area,
.cliente .features__area,
.cliente .checkout-area,
.cliente .product__area,
.cliente .login-area {
  background-color: transparent !important;
}

.cliente .black-bg { background: var(--dm-bg-3) !important; }
.cliente .black-bg-2 { background: var(--dm-card) !important; }

/* ===== Header estilo loja RP ===== */
.cliente .header__area,
.cliente .header__top,
.cliente .header__info,
.cliente .header__bottom {
  background: rgba(10, 10, 10, 0.82) !important;
  backdrop-filter: blur(14px);
  border-color: var(--dm-border) !important;
}

.cliente .header__area {
  border-bottom: 1px solid var(--dm-border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.cliente .header__welcome,
.cliente .header__welcome span,
.cliente .header__action ul li a,
.cliente .header__search-box input,
.cliente .header__search-box button,
.cliente .cart__content,
.cliente .cart__my,
.cliente .cart__total-price {
  color: var(--dm-text) !important;
}

.cliente .header__search-box input,
.cliente .header__search-cat select,
.cliente .header__search-cat .nice-select {
  background-color: var(--dm-card) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
  border-radius: 999px !important;
}

.cliente .header__search-box button {
  background-color: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  border-radius: 999px !important;
}

.cliente .footer__top .footer__logo img,
.cliente .header__info .header__info-left .logo img,
.cliente .offcanvas__logo img {
  width: auto !important;
  max-width: 180px !important;
  height: 40px !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* ===== Categorias ===== */
.cliente .cat__menu-wrapper,
.cliente .cat-toggle,
.cliente .cat-toggle-2,
.cliente .cat-toggle-4,
.cliente .cat__menu,
.cliente .cat__menu ul,
.cliente .mean-container .mean-bar,
.cliente .mean-container .mean-nav,
.cliente .offcanvas__search input {
  background-color: var(--dm-card) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

.cliente .cat-toggle,
.cliente .cat-toggle-2,
.cliente .cat-toggle-4 {
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--dm-radius) !important;
  overflow: hidden;
  background: linear-gradient(180deg, #171717, #101010) !important;
  box-shadow: var(--dm-shadow);
}

.cliente .cat-toggle-btn,
.cliente .cat-toggle-btn-2 {
  background: transparent !important;
  color: var(--dm-text) !important;
  border-bottom: 1px solid var(--dm-border) !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.cliente .cat__menu ul li a,
.cliente .cat__menu-4 ul li a {
  background: transparent !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border-soft) !important;
  transition: color .15s ease, background .15s ease;
}

.cliente .cat__menu ul li a:hover,
.cliente .cat__menu ul li:hover > a,
.cliente .cat__menu ul li a.hover:hover,
.cliente .cat__menu-4 ul li:hover > a,
.cliente .mobile-menu .mean-nav ul li a.bg-selected {
  background: var(--dm-accent-soft) !important;
  color: #fff !important;
}

/* ===== Seções / títulos ===== */
.cliente .section__title h3,
.cliente .section__head .section__title h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.7rem) !important;
  color: #fff !important;
}

.cliente .section__title h3 span {
  color: var(--dm-accent) !important;
}

.cliente .t-nav {
  color: var(--dm-text-muted) !important;
}

/* ===== Cards de produto (estilo planos VIP) ===== */
.cliente .product__item,
.cliente .product__electronic-item,
.cliente .features__item,
.cliente .search-title {
  background: linear-gradient(180deg, #161616 0%, #0f0f0f 100%) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
  border-radius: var(--dm-radius) !important;
  box-shadow: var(--dm-shadow) !important;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cliente .product__item:hover,
.cliente .product__electronic-item:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 6, 19, 0.45) !important;
  box-shadow: 0 22px 50px rgba(225, 6, 19, 0.12), var(--dm-shadow) !important;
}

.cliente .product__thumb,
.cliente .product__thumb img,
.cliente .bg-white,
.cliente img.bg-white {
  background: #0a0a0a !important;
}

.cliente .product__content {
  padding-top: 14px !important;
}

.cliente .product__content h6,
.cliente .product__content h6 a,
.cliente .product__content span,
.cliente .product__price,
.cliente .product__tag,
.cliente .features__content p {
  color: var(--dm-text) !important;
}

.cliente .product__content h6 a {
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.cliente .product__content h6 a:hover,
.cliente .header__action ul li a:hover {
  color: var(--dm-accent-2) !important;
}

.cliente .price {
  color: var(--dm-accent-2) !important;
  font-weight: 800 !important;
}

/* Banner slider */
.cliente .slider__area .single-slider,
.cliente .slider__area .w-img img {
  border-radius: var(--dm-radius);
}

.cliente .slider__area .container {
  max-width: 1200px;
}

/* ===== Botões ===== */
.cliente .t-y-btn,
.cliente .t-y-btn-border,
.cliente button.t-y-btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem !important;
  padding: 10px 18px !important;
}

.cliente .t-y-btn {
  background: var(--dm-accent) !important;
  border-color: var(--dm-accent) !important;
  color: #fff !important;
}

.cliente .t-y-btn:hover {
  background: var(--dm-accent-2) !important;
  border-color: var(--dm-accent-2) !important;
  color: #fff !important;
}

.cliente .t-y-btn-border {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: var(--dm-text) !important;
}

.cliente .t-y-btn-border:hover {
  border-color: var(--dm-accent) !important;
  color: #fff !important;
  background: var(--dm-accent-soft) !important;
}

.cliente .btn-whatsapp {
  background: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  border-radius: 999px !important;
}

/* ===== Forms / checkout ===== */
.cliente .checkbox-form,
.cliente .your-order,
.cliente .checkout-area .table,
.cliente .checkout-area input,
.cliente .checkout-area select,
.cliente .checkout-area textarea,
.cliente .form-control,
.cliente .form-select,
.cliente .nice-select,
.cliente .nice-select .list,
.cliente .basic-login {
  background-color: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  border-radius: 12px !important;
}

.cliente .cart__mini,
.cliente .offcanvas__area,
.cliente .offcanvas__wrapper,
.cliente .offcanvas__content {
  background: #0e0e0e !important;
  color: var(--dm-text) !important;
  border-left: 1px solid var(--dm-border);
}

/* ===== Footer ===== */
.cliente .footer-bg,
.cliente .footer-bg-2,
.cliente .footer-bottom-bg {
  background: #050505 !important;
  border-top: 1px solid var(--dm-border);
}

.cliente .footer__copyright-text p,
.cliente .footer__links p,
.cliente .footer__widget-title h4 {
  color: var(--dm-text-muted) !important;
}

.cliente .footer__widget-title h4 {
  font-family: var(--dm-display) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem !important;
}

/* ===== Misc ===== */
.cliente #loading { background-color: var(--dm-bg) !important; }
.cliente .body-overlay { background: rgba(0, 0, 0, 0.7) !important; }
.cliente .color-theme,
.cliente .color-theme-secondary { color: var(--dm-accent) !important; }
.cliente .bg-theme { background-color: var(--dm-accent) !important; }

.cliente .breadcrumb-item,
.cliente .breadcrumb-item a,
.cliente .page-link {
  background-color: var(--dm-card) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
  border-radius: 999px !important;
}

.cliente a:not(.t-y-btn):not(.btn):not(.cp-hero__btn):not(.router-link-active) {
  color: var(--dm-text);
}

* { scrollbar-color: #333 var(--dm-bg); }
::-webkit-scrollbar-track { background: var(--dm-bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 999px; }

/* Detalhe produto 3D */
.cliente .product__details-title a {
  font-family: var(--dm-display) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cliente .showcase-3d-wrap,
.cliente .showcase-3d-wrap--detail {
  border: 1px solid var(--dm-border);
  border-radius: var(--dm-radius);
}

@media (max-width: 768px) {
  .cp-hero { min-height: 300px; }
  .cp-hero__inner { padding: 36px 0 28px; }
}