/*
 * ============================================================
 *  BRAGA REMODELING — LUXURY UPGRADE CSS
 *  Estética: Minimalista · Luxo · Confiança (Bee Tree Homes)
 *  Versão: 1.0  |  Aplicar DEPOIS do styles.css existente
 * ============================================================
 *
 *  COMO USAR:
 *  ──────────────────────────────────────────────────────────
 *  WordPress  → Aparência → Personalizar → CSS Adicional → cole aqui
 *  Wix        → Configurações → CSS personalizado → cole aqui
 *  HTML puro  → Adicione APÓS a tag <link> do styles.css:
 *               <link rel="stylesheet" href="styles-luxury-upgrade.css">
 *  ──────────────────────────────────────────────────────────
 */

/* ── 0. VARIÁVEIS GLOBAIS (sobrescreve as do styles.css) ── */
:root {
  /* Paleta Luxury */
  --lux-white:      #ffffff;
  --lux-snow:       #f9f9f7;          /* fundo levemente quente */
  --lux-stone:      #f0eeea;          /* superfícies de seção alt */
  --lux-border:     #e4e1da;          /* bordas sutis */
  --lux-text:       #1a1a18;          /* quase-preto elegante */
  --lux-muted:      #6b6b65;          /* texto secundário */
  --lux-navy:       #0f1c2e;          /* navy profundo */
  --lux-navy-2:     #162034;          /* navy um tom acima */
  --lux-accent:     #1b3a5c;          /* azul marinho principal */
  --lux-accent-h:   #112947;          /* hover do accent */
  --lux-gold:       #b8955a;          /* detalhe dourado discreto */
  --lux-gold-light: #f5edd8;          /* fundo gold suave */

  /* Espaçamento */
  --lux-section:    6.5rem;
  --lux-radius:     4px;              /* bordas quase retas — luxo */
  --lux-radius-card:8px;
  --lux-radius-btn: 6px;

  /* Tipografia */
  --lux-font:       'Montserrat', sans-serif;
  --lux-serif:      'Cormorant Garamond', 'Merriweather', Georgia, serif;
  --lux-tracking:   0.06em;
  --lux-tracking-wide: 0.14em;

  /* Sombras mínimas */
  --lux-shadow:     0 2px 20px rgba(15, 28, 46, 0.07);
  --lux-shadow-hover: 0 8px 40px rgba(15, 28, 46, 0.13);
}

/* ── 1. FONTE ELEGANTE (Cormorant para títulos) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── 2. BASE ── */
body {
  background: var(--lux-white) !important;
  color: var(--lux-text) !important;
  font-family: var(--lux-font) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── 3. BARRA PROMO — mais discreta ── */
.promo-bar {
  background: var(--lux-navy) !important;
  letter-spacing: var(--lux-tracking) !important;
}
.promo-bar-inner {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  text-transform: uppercase !important;
  padding: 0.7rem 0 !important;
}
.promo-bar a {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-weight: 600 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  padding: 0.5rem 1.1rem !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}
.promo-bar a:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* ── 4. NAVEGAÇÃO LIMPA & SIMPLES ── */
.site-nav {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--lux-border) !important;
  box-shadow: none !important;
}
.nav-wrap {
  min-height: 80px !important;
}

/* Remove city-based links — visíveis só para SEO */
.nav-links a[href*="jacksonville"],
.nav-links a[href*="nocatee"],
.nav-links a[href*="ponte-vedra"],
.nav-links a[href*="st-johns"],
.nav-links a[href*="beach"] {
  display: none !important; /* Esconde cidades do menu visual */
}

/* Nav links elegantes */
.nav-links a {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--lux-muted) !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: var(--lux-radius) !important;
  transition: color 0.2s ease !important;
  background: transparent !important;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--lux-accent) !important;
  background: transparent !important;
}
.nav-links a.active {
  border-bottom: 2px solid var(--lux-accent) !important;
  border-radius: 0 !important;
  padding-bottom: 0.3rem !important;
}

/* Phone */
.nav-phone {
  background: transparent !important;
  border: 1px solid var(--lux-border) !important;
  color: var(--lux-accent) !important;
  font-weight: 600 !important;
  letter-spacing: var(--lux-tracking) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.8rem !important;
}
.nav-phone:hover {
  border-color: var(--lux-accent) !important;
}

/* Nav toggle (mobile) */
.nav-toggle {
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius-btn) !important;
  box-shadow: none !important;
}
.nav-toggle-bar {
  background: var(--lux-navy) !important;
}

/* ── 5. BOTÕES — CTA de alto impacto ── */
.btn-primary,
.sticky-quote-btn {
  background: var(--lux-accent) !important;
  color: var(--lux-white) !important;
  border: 1px solid transparent !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  text-transform: uppercase !important;
  padding: 0.9rem 1.6rem !important;
  min-height: 48px !important;
  box-shadow: none !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.btn-primary:hover,
.sticky-quote-btn:hover {
  background: var(--lux-accent-h) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(27, 58, 92, 0.22) !important;
}

.btn-secondary {
  background: var(--lux-navy) !important;
  color: var(--lux-white) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  min-height: 48px !important;
  box-shadow: none !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
}
.btn-secondary:hover {
  background: #0c1725 !important;
  transform: translateY(-1px) !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--lux-accent) !important;
  border: 1px solid var(--lux-accent) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  min-height: 48px !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}
.btn-outline:hover {
  background: var(--lux-accent) !important;
  color: var(--lux-white) !important;
}

/* SMS button */
.sms-btn {
  background: var(--lux-navy) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
}

/* ── 6. HERO — impacto máximo, espaço generoso ── */
.hero {
  background: linear-gradient(155deg, var(--lux-navy) 0%, #0d2540 55%, #0f1c2e 100%) !important;
  padding: 5.5rem 0 4.5rem !important;
}
.hero::after {
  display: none !important; /* Remove bolinha azul genérica */
}

/* Títulos do hero com serif elegante */
.hero h1 {
  font-family: var(--lux-serif) !important;
  font-size: clamp(2.8rem, 4.5vw, 5rem) !important;
  font-weight: 600 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.01em !important;
  color: var(--lux-white) !important;
  max-width: 13ch !important;
}
.hero h1 em {
  color: #c8dff5 !important;
  font-style: italic !important;
}

.hero-sub {
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: rgba(255,255,255,0.72) !important;
  font-weight: 300 !important;
  letter-spacing: 0.01em !important;
}

/* Badges minimalistas */
.badge {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
}
.badge.gold {
  color: #e8ccaa !important;
  border-color: rgba(184,149,90,0.3) !important;
  background: rgba(184,149,90,0.08) !important;
}

/* Stats do hero */
.hero-stat strong {
  font-family: var(--lux-serif) !important;
  font-size: 2rem !important;
  color: #a8c8e8 !important;
}
.hero-stat span {
  font-size: 0.62rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: rgba(255,255,255,0.5) !important;
}
.hero-stats {
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* Frame de imagem do hero — efeito galeria */
.hero-showcase-frame {
  border-radius: var(--lux-radius-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}
.hero-showcase-frame img {
  border-radius: 4px !important;
}

.mini-project-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--lux-radius-card) !important;
  box-shadow: none !important;
}
.mini-project-card span {
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  font-size: 0.65rem !important;
}

/* ── 7. SEÇÕES — respiro e espaço em branco ── */
.section {
  padding: var(--lux-section) 0 !important;
}
.section.alt {
  background: var(--lux-stone) !important;
}
.section-tight {
  padding-top: 0 !important;
  padding-bottom: var(--lux-section) !important;
}

/* Eyebrow — label acima dos títulos */
.eyebrow {
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: var(--lux-accent) !important;
  text-transform: uppercase !important;
}
.eyebrow::before {
  background: var(--lux-accent) !important;
  width: 24px !important;
}

/* Títulos H2 das seções */
.section h2,
.sec-title {
  font-family: var(--lux-serif) !important;
  font-size: clamp(2rem, 3vw, 3.2rem) !important;
  font-weight: 600 !important;
  color: var(--lux-navy) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}
.section h2 em,
.sec-title em {
  color: var(--lux-accent) !important;
  font-style: italic !important;
}

/* Lead text */
.lead, .body-text {
  font-size: 1rem !important;
  line-height: 1.9 !important;
  color: var(--lux-muted) !important;
  font-weight: 300 !important;
}

/* H3 dos cards */
.feature-card h3,
.service-card h3,
.showroom-copy h3,
.gallery-card h3,
.content-card h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--lux-navy) !important;
  letter-spacing: 0.01em !important;
}

/* ── 8. CARDS — limpeza minimalista ── */
.card,
.feature-card,
.service-card,
.review-card,
.area-card,
.estimator-card,
.gallery-card,
.faq-card,
.content-card,
.metric-card {
  background: var(--lux-white) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius-card) !important;
  box-shadow: var(--lux-shadow) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}
.card:hover,
.feature-card:hover,
.service-card:hover,
.gallery-card:hover {
  box-shadow: var(--lux-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* Feature cards */
.feature-card p,
.service-card p,
.review-card p,
.gallery-card p,
.content-card p,
.faq-card p {
  font-size: 0.9rem !important;
  line-height: 1.85 !important;
  color: var(--lux-muted) !important;
  font-weight: 300 !important;
}

/* Service cards — detalhe de cor no topo */
.service-card::before {
  background: var(--lux-accent) !important;
  height: 3px !important;
  border-radius: var(--lux-radius-card) var(--lux-radius-card) 0 0 !important;
}
.service-card .num {
  font-family: var(--lux-serif) !important;
  color: rgba(27,58,92,0.12) !important;
}
.service-card li::before {
  background: var(--lux-accent) !important;
  border-radius: 0 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 0.6rem !important;
}

/* ── 9. SHOWROOM — galeria de revista ── */
.showroom-card {
  background: var(--lux-white) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius-card) !important;
  padding: 10px !important;
  box-shadow: var(--lux-shadow) !important;
  transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}
.showroom-card:hover {
  box-shadow: var(--lux-shadow-hover) !important;
  transform: translateY(-3px) !important;
}
.showroom-frame {
  border-radius: 4px !important;
  overflow: hidden !important;
  background: var(--lux-snow) !important;
}
.showroom-frame img {
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
}
.showroom-card:hover .showroom-frame img {
  transform: scale(1.04) !important;
}
.showroom-copy {
  padding: 1rem 0.5rem 0.4rem !important;
}
.showroom-copy p {
  font-size: 0.88rem !important;
  line-height: 1.8 !important;
  color: var(--lux-muted) !important;
  font-weight: 300 !important;
}

/* Tags de projeto */
.project-tag {
  background: var(--lux-gold-light) !important;
  color: var(--lux-gold) !important;
  border-radius: 2px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  padding: 0.35rem 0.7rem !important;
}

/* Collections grid — imagens grandes */
.collection-card {
  border-radius: var(--lux-radius-card) !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.collection-card img {
  transition: transform 0.55s ease !important;
}
.collection-card:hover img {
  transform: scale(1.05) !important;
}
.collection-overlay {
  background: linear-gradient(0deg, rgba(10,18,30,0.85) 0%, transparent 100%) !important;
  padding: 1.2rem 1rem !important;
}
.collection-overlay span {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 2px !important;
  font-size: 0.6rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  font-weight: 700 !important;
}
.collection-overlay h3 {
  font-family: var(--lux-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--lux-white) !important;
}

/* ── 10. PORTFÓLIO — project frames premium ── */
.project-frame {
  border-radius: var(--lux-radius-card) !important;
  border: 1px solid var(--lux-border) !important;
  padding: 8px !important;
  background: var(--lux-white) !important;
  box-shadow: var(--lux-shadow) !important;
  transition: box-shadow 0.35s ease !important;
}
.project-frame::after {
  display: none !important; /* Remove brilho genérico */
}
.project-card:hover .project-frame {
  box-shadow: var(--lux-shadow-hover) !important;
}
.project-frame img {
  border-radius: 4px !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  transition: transform 0.55s ease !important;
}
.project-card:hover .project-frame img {
  transform: scale(1.04) !important;
}

/* Filter chips */
.filter-chip {
  background: transparent !important;
  color: var(--lux-muted) !important;
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius-btn) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--lux-tracking) !important;
  padding: 0.65rem 1.1rem !important;
  transition: all 0.2s ease !important;
}
.filter-chip:hover,
.filter-chip.active {
  background: var(--lux-accent) !important;
  color: var(--lux-white) !important;
  border-color: var(--lux-accent) !important;
  box-shadow: none !important;
}

/* ── 11. MÉTRICAS ── */
.metric-card strong {
  font-family: var(--lux-serif) !important;
  font-size: 2.2rem !important;
  color: var(--lux-accent) !important;
  font-weight: 600 !important;
}
.metric-card span {
  font-size: 0.65rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: var(--lux-muted) !important;
}

/* ── 12. STARS / REVIEWS ── */
.stars {
  color: var(--lux-gold) !important;
  letter-spacing: 2px !important;
}
.review-card .name {
  font-size: 0.65rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: var(--lux-accent) !important;
}

/* ── 13. OFFER BANNER — faixa escura ── */
.offer-banner {
  background: var(--lux-navy) !important;
  border-radius: var(--lux-radius-card) !important;
  box-shadow: 0 20px 60px rgba(15,28,46,0.18) !important;
}
.offer-chip {
  background: rgba(184,149,90,0.12) !important;
  border-color: rgba(184,149,90,0.25) !important;
  color: #e8ccaa !important;
  border-radius: 2px !important;
  font-size: 0.65rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
}
.offer-point {
  border-radius: var(--lux-radius) !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── 14. FORMULÁRIO DE ESTIMATIVA ── */
.estimator-card {
  border-radius: var(--lux-radius-card) !important;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--lux-border) !important;
  border-radius: var(--lux-radius) !important;
  background: var(--lux-snow) !important;
  font-size: 0.9rem !important;
  color: var(--lux-navy) !important;
  transition: border-color 0.2s ease !important;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--lux-accent) !important;
  outline: none !important;
  background: var(--lux-white) !important;
}
.field label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: var(--lux-accent) !important;
  text-transform: uppercase !important;
}
.estimator-result {
  background: var(--lux-gold-light) !important;
  border: 1px solid rgba(184,149,90,0.2) !important;
  border-radius: var(--lux-radius) !important;
}
.estimator-result strong {
  color: var(--lux-navy) !important;
}

/* ── 15. POPUP DE SAÍDA ── */
.exit-popup-card {
  border-radius: var(--lux-radius-card) !important;
  border: 1px solid var(--lux-border) !important;
  box-shadow: 0 40px 100px rgba(15,28,46,0.2) !important;
}
.exit-popup-card h3 {
  font-family: var(--lux-serif) !important;
  font-weight: 600 !important;
  color: var(--lux-navy) !important;
  font-size: 2rem !important;
}
.popup-kicker {
  background: var(--lux-gold-light) !important;
  color: var(--lux-gold) !important;
  border-radius: 2px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--lux-tracking-wide) !important;
}
.popup-form input {
  border-radius: var(--lux-radius) !important;
  border: 1px solid var(--lux-border) !important;
}
.popup-close {
  border-radius: 2px !important;
  background: var(--lux-stone) !important;
}

/* ── 16. FLOATING CONTACT BUTTONS ── */
.float-btn {
  border-radius: var(--lux-radius-btn) !important;
  box-shadow: 0 8px 30px rgba(15,28,46,0.14) !important;
  letter-spacing: var(--lux-tracking) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border: 1px solid var(--lux-border) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.float-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(15,28,46,0.18) !important;
}
.float-btn.sms {
  background: var(--lux-navy) !important;
  border-color: transparent !important;
}
.float-btn.email {
  background: var(--lux-accent) !important;
  border-color: transparent !important;
}
.float-btn .float-icon {
  border-radius: var(--lux-radius) !important;
  background: rgba(255,255,255,0.12) !important;
  width: 34px !important;
  height: 34px !important;
}

/* Sticky quote button */
.sticky-quote-btn {
  border-radius: var(--lux-radius-btn) !important;
  box-shadow: 0 10px 30px rgba(27,58,92,0.25) !important;
}

/* ── 17. FOOTER ── */
.footer {
  background: var(--lux-navy) !important;
  margin-top: 0 !important;
  padding: 2.5rem 0 !important;
}
.footer p {
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.6) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
}
.footer-links a {
  font-size: 0.65rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
  color: rgba(255,255,255,0.7) !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}
.footer-links a:hover {
  color: var(--lux-white) !important;
}

/* ── 18. LIGHTBOX ── */
.lightbox {
  background: rgba(8,15,26,0.92) !important;
}
.lightbox img {
  border-radius: var(--lux-radius-card) !important;
  border: none !important;
}
.lightbox-close {
  border-radius: var(--lux-radius) !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ── 19. FAQ ── */
.faq-card {
  border-radius: var(--lux-radius-card) !important;
}
.faq-card h3 {
  font-weight: 600 !important;
  color: var(--lux-navy) !important;
  font-size: 0.95rem !important;
}

/* ── 20. CONTACT ── */
.contact-block {
  border-radius: var(--lux-radius-card) !important;
  border: 1px solid var(--lux-border) !important;
  box-shadow: var(--lux-shadow) !important;
}
.contact-block h3 {
  color: var(--lux-navy) !important;
  font-weight: 600 !important;
}

/* ── 21. SHOWROOM HEAD / PORTFOLIO HEAD ── */
.showroom-head,
.portfolio-head {
  margin-bottom: 2rem !important;
}

/* ── 22. AREA CARDS (cidades — apenas SEO, esconde visualmente) ── */
/* Se houver uma seção de cidades no HTML visível, tornamos discreta */
.area-card {
  border-radius: var(--lux-radius-card) !important;
  box-shadow: var(--lux-shadow) !important;
}

/* ── 23. MINI-LISTA E CHECK GRID ── */
.mini-item,
.check-item {
  border-radius: var(--lux-radius) !important;
  border: 1px solid var(--lux-border) !important;
  background: var(--lux-snow) !important;
}
.mini-item strong,
.check-item strong {
  color: var(--lux-accent) !important;
  font-size: 0.65rem !important;
  letter-spacing: var(--lux-tracking-wide) !important;
}

/* ── 24. NOTICE / FORM NOTES ── */
.notice, .form-note {
  font-size: 0.78rem !important;
  color: var(--lux-muted) !important;
  font-weight: 300 !important;
}

/* ── 25. HERO CARD (se presente) ── */
.hero-card {
  border-radius: var(--lux-radius-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
}
.hero-card-inner {
  border-radius: 6px !important;
}

/* ─────────────────────────────────────────────────────────
 *  RESPONSIVIDADE — garante que tudo funciona no mobile
 * ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --lux-section: 5rem; }
  .nav-panel {
    border-radius: var(--lux-radius-card) !important;
    border: 1px solid var(--lux-border) !important;
    box-shadow: var(--lux-shadow-hover) !important;
    top: 80px !important;
  }
}

@media (max-width: 720px) {
  :root { --lux-section: 4rem; }
  .hero { padding: 4rem 0 3.5rem !important; }
  .hero h1 { font-size: clamp(2.4rem, 7vw, 3.2rem) !important; }
  .hero-sub { font-size: 0.95rem !important; }
  .section h2 { font-size: clamp(1.85rem, 6vw, 2.5rem) !important; }
  .float-btn { font-size: 0.7rem !important; }
  .filter-chip { font-size: 0.65rem !important; padding: 0.6rem 0.9rem !important; }
  .collection-card { min-height: 280px !important; }
}

/* ═══════════════════════════════════════════════════════════
 *  FIM DO ARQUIVO — braga-showroom-upgrade/styles-luxury-upgrade.css
 *  Cole APÓS o <link> do seu styles.css original.
 * ═══════════════════════════════════════════════════════════ */