/* -------------------------------------------------------------
   SALA BICHO DA SEDA - APRESENTAÇÃO CORPORATIVA PREMIUM
   DESIGN SYSTEM & FOLHA DE ESTILOS DE ALTA PERFORMANCE (8K VISUAL)
   PALETA BDS: VERDE PROFUNDO, SEDA CRUA E OURO ESCOVADO
   ------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* --- VARIÁVEIS DO DESIGN SYSTEM (HSL & CORES REAIS BDS) --- */
:root {
  /* Fundo Verde Floresta Corporativo / Militar Ultra Profundo (Rigor e Seriedade) */
  --bg-deep: hsl(145, 32%, 6%);
  --bg-surface: hsl(145, 24%, 10%);
  --bg-surface-hover: hsl(145, 20%, 14%);
  --border-color: hsl(145, 16%, 17%);
  --border-light: hsl(145, 12%, 25%);

  /* Acentuações Verde Institucional Refinado, Seda Crua e Ouro Escovado */
  --accent-green: hsl(145, 45%, 38%);
  --accent-green-light: hsl(145, 55%, 52%);
  --accent-green-dark: hsl(145, 50%, 25%);
  --accent-gold: hsl(38, 55%, 52%);
  --accent-gold-light: hsl(38, 65%, 62%);
  --accent-gold-dark: hsl(38, 50%, 40%);
  
  /* Textos */
  --silk-warm: hsl(38, 25%, 88%);
  --text-primary: hsl(38, 20%, 94%); /* Seda Off-white Suave */
  --text-secondary: hsl(145, 10%, 72%); /* Verde Cinzento Elegante */
  --text-muted: hsl(145, 8%, 52%);

  /* Sombras e Efeitos 8K */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.8);
  --glow-gold: 0 0 30px rgba(212, 160, 63, 0.25);
  --glow-green: 0 0 30px rgba(34, 139, 78, 0.2);
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --border-radius: 16px;
  --glass-bg: rgba(13, 20, 16, 0.7);
  --glass-border: rgba(212, 160, 63, 0.12);
}

/* --- RESET & ESTRUTURA GLOBAL --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* --- ANIMAÇÕES FLUIDAS --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes floatAnim {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 20px rgba(212, 160, 63, 0.15); }
  50% { box-shadow: 0 0 35px rgba(212, 160, 63, 0.35); }
  100% { box-shadow: 0 0 20px rgba(212, 160, 63, 0.15); }
}

/* --- ESTRUTURA E RECIPIENTES --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Gradientes Textuais */
.gold-gradient-text {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.green-gradient-text {
  background: linear-gradient(135deg, var(--accent-green-light) 0%, var(--accent-gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- HEADER E NAVEGAÇÃO GLASS --- */
header {
  padding: 20px 0;
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 14, 10, 0.8);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.header-logo-arquiteto {
  max-height: 105px;
  width: auto;
  transition: var(--transition-fast);
  image-rendering: -webkit-optimize-contrast;
}

.logo-container:hover .header-logo-arquiteto {
  transform: scale(1.04);
}

.logo-divider {
  width: 1px;
  height: 24px;
  background: var(--border-light);
}

.logo-project {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.logo-project span {
  color: var(--accent-green-light);
  border-left: 2px solid var(--accent-gold);
  padding-left: 8px;
  margin-left: 4px;
  font-size: 18px;
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: var(--transition-fast);
  letter-spacing: 0.02em;
}

.nav-links a:hover {
  color: var(--accent-gold-light);
}

/* --- HERO SECTION EM TELA CHEIA (SPLIT HERO ASSIMÉTRICO) --- */
.hero-fullscreen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0;
  overflow: hidden;
  background-image: url('cliente/isometrica-setor-corporativo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(8, 14, 10, 0.9) 20%, rgba(13, 20, 16, 0.96) 80%);
  z-index: 1;
  pointer-events: none;
}

.hero-container-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Grid Assimétrico de Luxo */
.hero-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.hero-left-panel {
  text-align: left !important;
  max-width: 650px !important;
  padding: 52px !important;
}

.hero-left-panel .hero-glass-logo {
  margin: 0 0 24px 0 !important;
}

.hero-left-panel h1 {
  font-size: 48px;
  line-height: 1.15;
}

.hero-left-panel .btn-group {
  justify-content: flex-start !important;
}

.hero-right-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Janela Isométrica Suspensa Flutuante */
.hero-floating-isometric {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-surface);
  transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) scale(1.02);
  transition: var(--transition-smooth);
  animation: floatAnim 6s ease-in-out infinite, fadeIn 1.2s ease-out;
}

.hero-floating-isometric::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 160, 63, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.hero-floating-isometric:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.06);
  box-shadow: var(--shadow-lg), var(--glow-gold);
  border-color: rgba(212, 160, 63, 0.3);
}

.hero-iso-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.88;
  transition: var(--transition-smooth);
}

.hero-floating-isometric:hover .hero-iso-img {
  opacity: 1;
}

.hero-card-glass {
  background: rgba(13, 20, 16, 0.72);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 56px;
  max-width: 820px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 1s ease-out;
  position: relative;
  overflow: hidden;
}

.hero-card-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-gold-light));
}

.hero-glass-logo {
  max-height: 140px;
  width: auto;
  margin: 0 auto 28px auto;
  display: block;
  transition: var(--transition-smooth);
  image-rendering: -webkit-optimize-contrast;
}

.hero-card-glass:hover .hero-glass-logo {
  transform: scale(1.04);
}

.hero-card-glass h1 {
  font-size: 50px;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-subtitle {
  font-size: 16.5px;
  color: var(--text-secondary);
  margin-bottom: 36px;
  font-weight: 300;
  line-height: 1.65;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.btn-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  animation: fadeIn 1.2s ease-out;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-light) 100%);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-green-light) 0%, var(--accent-green) 100%);
  transform: translateY(-3px);
  box-shadow: var(--glow-green);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  border-color: var(--accent-gold-light);
  color: var(--accent-gold-light);
  background: rgba(212, 160, 63, 0.04);
  transform: translateY(-3px);
  box-shadow: var(--glow-gold);
}

/* Hero Visual Card (Interativo 8K) */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-visual-card {
  width: 100%;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--bg-surface);
  transform: perspective(1200px) rotateY(-8deg) rotateX(6deg) scale(1.02);
  transition: var(--transition-smooth);
  animation: floatAnim 6s ease-in-out infinite, fadeIn 1.2s ease-out;
}

.hero-visual-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(212, 160, 63, 0.08) 0%, rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

.hero-visual-card:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.05);
  box-shadow: var(--shadow-lg), var(--glow-gold);
  border-color: rgba(212, 160, 63, 0.3);
}

.hero-visual-card img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
}

/* --- CABEÇALHOS DE SEÇÃO --- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px auto;
}

.section-header h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

.section-header p {
  color: var(--text-secondary);
  font-weight: 300;
  font-size: 16px;
}

/* --- SEÇÃO DE BRIEFING (SOFISTICADA E FOCADA) --- */
.concept-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.concept-text h3 {
  font-size: 28px;
  margin-bottom: 20px;
  color: var(--accent-gold-light);
}

.concept-text p {
  color: var(--text-secondary);
  margin-bottom: 28px;
  font-weight: 300;
  font-size: 15px;
}

.concept-features {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.concept-features li {
  position: relative;
  padding-left: 28px;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 14px;
}

.concept-features li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--accent-gold-light);
  font-size: 16px;
}

/* --- GALERIA 3D / PORTFÓLIO DE ARQUIVOS --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 32px;
}

.gallery-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.gallery-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--accent-gold-light);
  box-shadow: var(--shadow-lg), var(--glow-gold);
}

.gallery-card-img {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: #090e0b;
}

.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.gallery-card:hover .gallery-card-img img {
  transform: scale(1.06);
}

.gallery-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gallery-card-content h3 {
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.gallery-card-content p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  flex-grow: 1;
  font-weight: 300;
}

.gallery-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding-top: 20px;
}

.gallery-card-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-gold-light);
  background: rgba(212, 160, 63, 0.08);
  border: 1px solid rgba(212, 160, 63, 0.15);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.gallery-card-btn {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}

.gallery-card-btn:hover {
  color: var(--accent-gold-light);
  transform: translateX(4px);
}

/* --- GRID DO ESCOPO TÉCNICO (13 PASTAS) --- */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.scope-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 28px;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
}

.scope-card:hover {
  border-color: var(--border-light);
  background: var(--bg-surface-hover);
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.scope-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(212, 160, 63, 0.08);
  border: 1px solid rgba(212, 160, 63, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--accent-gold-light);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

.scope-card h3 {
  font-size: 17px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.scope-card p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  font-weight: 300;
}

/* --- PAINEL DE PRECIFICAÇÃO DINÂMICO --- */
.pricing-section {
  background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(34, 139, 78, 0.04) 100%);
}

.pricing-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 56px;
  box-shadow: var(--shadow-md);
  max-width: 950px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.pricing-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-gold-light));
}

.pricing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 44px;
  flex-wrap: wrap;
  gap: 24px;
}

.pricing-title h3 {
  font-size: 30px;
  margin-bottom: 6px;
}

.pricing-title p {
  color: var(--text-secondary);
  font-size: 14.5px;
}

/* Toggle Fiscal */
.tax-toggle-container {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-deep);
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
}

.tax-toggle-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 26px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-light);
  transition: .3s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-primary);
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent-gold);
}

input:checked + .slider:before {
  transform: translateX(26px);
  background-color: var(--bg-deep);
}

/* Valores do Painel */
.pricing-breakdown {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  border-top: 1px solid var(--border-color);
  padding-top: 36px;
}

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pricing-item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.pricing-item-desc {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.pricing-item-val {
  font-weight: 600;
  color: var(--text-primary);
}

.pricing-total-card {
  background: var(--bg-deep);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.pricing-total-card.glow {
  animation: pulseGlow 2.5s infinite;
}

.pricing-total-card h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.pricing-total-val {
  font-size: 46px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: var(--accent-gold-light);
  margin-bottom: 6px;
  transition: var(--transition-fast);
}

.pricing-total-sub {
  font-size: 12px;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

/* --- BANNER DE FUNDO ISOMÉTRICO (OPÇÃO 8K DE SUPRESA VISUAL) --- */
.parallax-banner {
  height: 400px;
  background: 
    linear-gradient(rgba(8, 14, 10, 0.85), rgba(8, 14, 10, 0.85)),
    url('cliente/isometrica-setor-corporativo.png') no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.parallax-content h3 {
  font-size: 32px;
  margin-bottom: 16px;
  color: var(--accent-gold-light);
}

.parallax-content p {
  max-width: 600px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-weight: 300;
}

/* --- FOOTER --- */
footer {
  background: var(--bg-surface);
  padding: 80px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.footer-logo span {
  color: var(--accent-green-light);
  border-left: 2px solid var(--accent-gold);
  padding-left: 8px;
}

.copyright {
  color: var(--text-muted);
  font-size: 12px;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 992px) {
  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .hero-left-panel {
    max-width: 100% !important;
    padding: 32px !important;
    text-align: center !important;
  }
  .hero-left-panel .hero-badge {
    justify-content: center;
  }
  .hero-left-panel .btn-group {
    justify-content: center !important;
  }
  .hero-floating-isometric {
    transform: none !important;
    max-width: 100%;
    margin: 0 auto;
    animation: floatAnim 6s ease-in-out infinite;
  }
  .concept-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .interactive-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .briefing-panel {
    min-height: auto;
  }
  .pricing-breakdown {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .parallax-banner {
    background-attachment: scroll; /* Desativa parallax em telas menores por desempenho */
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* Oculta links do menu para otimizar espaço */
  }
  .header-logo-arquiteto {
    max-height: 44px; /* Compacta logo */
  }
  .logo-project {
    font-size: 17px;
  }
  .logo-project span {
    font-size: 15px;
  }
  .concept-features {
    grid-template-columns: 1fr;
  }
  .section-header h2 {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .hero h1 {
    font-size: 36px;
  }
  .btn-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  .btn {
    width: 100%;
  }
  .pricing-panel {
    padding: 32px 20px;
  }
  .pricing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tax-toggle-container {
    width: 100%;
    justify-content: space-between;
  }
  .pricing-total-val {
    font-size: 36px;
  }
  .scope-card {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .pricing-item {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .pricing-item-val {
    align-self: flex-end;
    font-size: 15px;
  }
}

/* =============================================================
   SEÇÃO DE BRIEFING E ZONEAMENTO CONCEITUAL INTERATIVO (8K)
   ============================================================= */
.interactive-briefing {
  background: radial-gradient(circle at 50% 50%, rgba(34, 139, 78, 0.08) 0%, rgba(0, 0, 0, 0) 70%);
  position: relative;
  overflow: hidden;
}

.interactive-container {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* Invólucro do Mapa Isométrico */
.isometric-map-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-smooth);
}

.isometric-map-wrapper:hover {
  border-color: rgba(212, 160, 63, 0.3);
  box-shadow: var(--shadow-lg), var(--glow-gold);
}

.isometric-map-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1296/1214; /* Proporção exata da Planta Baixa Humanizada 2D */
  overflow: hidden;
  background: #090e0b;
}

.isometric-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Trava as bordas sem corte ou zoom responsivo */
  display: block;
  transition: var(--transition-smooth);
  opacity: 0.85;
}

.isometric-map-container:hover .isometric-image {
  transform: scale(1.015);
  opacity: 0.95;
}

/* Hotspots Interativos Pulsantes */
.hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  cursor: pointer;
  z-index: 10;
  transform: translate(-50%, -50%);
}

.hotspot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) scale(0.6);
  background: rgba(212, 160, 63, 0.18);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hotspot:hover::before, .hotspot.active::before {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
  background: rgba(34, 139, 78, 0.25);
}

.hotspot-inner {
  display: block;
  width: 14px;
  height: 14px;
  background: var(--accent-gold-light);
  border-radius: 50%;
  border: 2.5px solid var(--bg-deep);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--accent-gold);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hotspot:hover .hotspot-inner, .hotspot.active .hotspot-inner {
  background: var(--accent-green-light);
  box-shadow: 0 0 16px var(--accent-green-light);
  transform: translate(-50%, -50%) scale(1.3);
}

/* Efeito de Ondulação do Pulso */
@keyframes hotspotRipple {
  0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.9; }
  60% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(0.7); opacity: 0.9; }
}

.hotspot::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--accent-gold-light);
  border-radius: 50%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: hotspotRipple 2.2s infinite ease-in-out;
  pointer-events: none;
}

.hotspot:hover::after, .hotspot.active::after {
  border-color: var(--accent-green-light);
}

.interactive-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 14, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 12;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  background: var(--accent-gold-light);
  border-radius: 50%;
  animation: hotspotRipple 1.6s infinite ease-in-out;
}

/* Painel Lateral Glassmorphism */
.briefing-panel-wrapper {
  height: 100%;
}

.briefing-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 38px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-md);
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.briefing-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-green));
}

.briefing-panel-placeholder {
  text-align: center;
  padding: 20px;
}

.placeholder-icon {
  font-size: 42px;
  color: var(--accent-gold-light);
  margin-bottom: 22px;
  animation: floatAnim 4s ease-in-out infinite;
}

.briefing-panel-placeholder h3 {
  font-size: 23px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.briefing-panel-placeholder p {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.65;
}

.briefing-panel-content {
  animation: fadeIn 0.4s ease-out;
  transition: opacity 0.25s ease-out;
}

.environment-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-gold-light);
  background: rgba(212, 160, 63, 0.12);
  border: 1px solid rgba(212, 160, 63, 0.22);
  padding: 5px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  margin-bottom: 18px;
}

.briefing-panel h3 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 160, 63, 0.25), transparent);
  margin-bottom: 24px;
}

.briefing-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 30px;
}

.meta-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-radius: 12px;
}

.meta-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.06em;
}

.meta-val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.briefing-description, .briefing-design {
  margin-bottom: 22px;
}

.briefing-description h4, .briefing-design h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-gold-light);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.briefing-description p, .briefing-design p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: 300;
}

/* Responsividade Ajustada */
@media (max-width: 992px) {
  .interactive-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .briefing-panel {
    min-height: auto;
    padding: 30px;
  }
}


/* --- OVERLAY DE BACKGROUND ISOMÉTRICO (WATERMARK GLOBAL) --- */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('cliente/isometrica-setor-corporativo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.025; /* Suave marca d'água tridimensional */
  pointer-events: none;
  z-index: -1;
}

/* --- SISTEMA DE PROTEÇÃO CONSTRUTIVA DE IMAGENS (IP PROTECTION) --- */
.protected-image-container {
  position: relative;
  overflow: hidden;
}

.protected-image-container img {
  pointer-events: none; /* Desativa interações nativas do navegador */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none; /* Desativa menu de toque no iOS */
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  /* Marca d'água vetorial em diagonal ultra sutil com logo e CAU */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Ctext transform='rotate(-28 90 60)' x='90' y='60' fill='%23d4a03f' font-family='Outfit, sans-serif' font-size='6.5' font-weight='bold' text-anchor='middle' opacity='0.045'%3EPROPRIEDADE PROTEGIDA - HENRIQUE NOGUEIRA CAU A44431-6%3C/text%3E%3C/svg%3E");
  pointer-events: auto; /* Recebe cliques e toques impedindo que atinjam a imagem embaixo */
  cursor: default;
}

.lock-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(8, 14, 10, 0.88);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-gold-light);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* --- SEÇÃO DE DIAGNÓSTICO CONSTRUTIVO (DORES & SOLUÇÕES) --- */
.diagnostico-section {
  background: radial-gradient(circle at 50% 50%, rgba(212, 160, 63, 0.04) 0%, rgba(0, 0, 0, 0) 75%);
}

.diagnostico-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.diagnostico-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 44px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.diagnostico-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.dores-card::before {
  background: #c93b3b; /* Vermelho civil de dores estruturais */
}

.solucoes-card::before {
  background: var(--accent-gold);
}

.diagnostico-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.dores-card:hover {
  border-color: rgba(201, 59, 59, 0.3);
}

.solucoes-card:hover {
  border-color: rgba(212, 160, 63, 0.3);
  box-shadow: var(--shadow-lg), var(--glow-gold);
}

.card-header-status {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.card-header-status.red {
  color: #eb5757;
}

.card-header-status.gold {
  color: var(--accent-gold-light);
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.card-header-status.red .status-dot {
  background: #eb5757;
  box-shadow: 0 0 10px rgba(235, 87, 87, 0.4);
}

.card-header-status.gold .status-dot {
  background: var(--accent-gold-light);
  box-shadow: 0 0 10px var(--accent-gold);
}

.diagnostico-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.diagnostico-list li strong {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

.diagnostico-list li p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 300;
}

/* --- TOAST DE ALERTA DE SEGURANÇA (TOAST PREMIUM) --- */
.security-toast {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(13, 20, 16, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--accent-gold);
  border-radius: 14px;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg), var(--glow-gold);
  z-index: 1000;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  pointer-events: none;
  max-width: 450px;
  width: 90%;
}

.security-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon {
  font-size: 24px;
  color: var(--accent-gold-light);
}

.toast-body strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 2px;
  font-family: 'Outfit', sans-serif;
}

.toast-body p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* --- FOOTER LOGO INTEGRADO --- */
.footer-logo-container {
  margin-bottom: 8px;
}

.footer-logo-img {
  max-height: 85px;
  width: auto;
  transition: var(--transition-smooth);
  image-rendering: -webkit-optimize-contrast;
}

.footer-logo-container:hover .footer-logo-img {
  transform: scale(1.04);
}

/* --- RESPONSIVIDADE ADICIONAL --- */
@media (max-width: 768px) {
  .diagnostico-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-card-glass {
    padding: 36px 24px;
  }
  .hero-card-glass h1 {
    font-size: 34px;
  }
}

/* =============================================================
   FASE 5 - DETALHAMENTO DE ESTILOS DA APRESENTAÇÃO SURREAL
   ============================================================= */

/* 1. SELETOR DE CAMADAS DA PLANTA BAIXA */
.map-layers-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  z-index: 15;
  position: relative;
}

.layer-btn {
  background: rgba(13, 20, 16, 0.6);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.layer-btn:hover {
  border-color: var(--accent-gold-light);
  color: var(--text-primary);
  transform: translateY(-2px);
  background: rgba(13, 20, 16, 0.85);
}

.layer-btn.active {
  background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%);
  border: 1.5px solid var(--accent-gold);
  color: var(--text-primary);
  box-shadow: var(--shadow-md), 0 0 15px rgba(212, 160, 63, 0.2);
  transform: scale(1.03);
}

.layer-btn.active .layer-icon {
  animation: pulseGlow 1.5s infinite;
}

/* 2. CARD TÉCNICO LARGO DE COTAS AUTOCAD (DETALHES TÉCNICOS) */
.gallery-technical-row {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 40px;
}

.technical-lock-card {
  background: linear-gradient(135deg, hsl(145, 28%, 6%) 0%, hsl(145, 20%, 10%) 100%);
  border: 1px solid rgba(212, 160, 63, 0.35);
  border-radius: var(--border-radius);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  box-shadow: var(--shadow-lg), inset 0 0 30px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.technical-lock-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold-dark), var(--accent-gold-light), var(--accent-gold-dark));
}

.technical-lock-card:hover {
  border-color: var(--accent-gold-light);
  box-shadow: var(--shadow-lg), var(--glow-gold), inset 0 0 20px rgba(212, 160, 63, 0.05);
  transform: translateY(-4px);
}

.tech-lock-icon {
  font-size: 48px;
  color: var(--accent-gold-light);
  background: rgba(212, 160, 63, 0.08);
  border: 1px solid rgba(212, 160, 63, 0.2);
  width: 90px;
  height: 90px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(212, 160, 63, 0.15);
  flex-shrink: 0;
  animation: floatAnim 4s ease-in-out infinite;
}

.tech-lock-content {
  flex-grow: 1;
}

.tech-lock-content h3 {
  font-size: 24px;
  color: var(--text-primary);
  margin-top: 10px;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.tech-lock-content p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: 300;
  max-width: 800px;
}

.tech-lock-action {
  flex-shrink: 0;
}

.tech-lock-action .btn {
  white-space: nowrap;
}

/* Responsividade do Card Técnico */
@media (max-width: 992px) {
  .technical-lock-card {
    flex-direction: column;
    text-align: center;
    padding: 36px 24px;
    gap: 24px;
  }
  .tech-lock-icon {
    margin: 0 auto;
  }
  .tech-lock-action {
    width: 100%;
  }
  .tech-lock-action .btn {
    width: 100%;
  }
}

/* 3. LIGHTBOX DE VISUALIZAÇÃO PREMIUM (MODAL) */
.render-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 8, 6, 0.95);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 40px;
}

.render-lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 44px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 10001;
  user-select: none;
}

.lightbox-close:hover {
  color: var(--accent-gold-light);
  transform: rotate(90deg) scale(1.1);
}

.lightbox-content-wrapper {
  max-width: 1100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-image-container {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 50px rgba(0, 0, 0, 0.8);
  background: #090e0b;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 70vh;
}

.lightbox-image-container img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.lightbox-caption {
  text-align: center;
  max-width: 800px;
  width: 100%;
}

.lightbox-caption h3 {
  font-size: 26px;
  color: var(--accent-gold-light);
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lightbox-caption p {
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 300;
}

@media (max-width: 768px) {
  .render-lightbox {
    padding: 24px 16px;
  }
  .lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 36px;
  }
  .lightbox-caption h3 {
    font-size: 20px;
  }
  .lightbox-caption p {
    font-size: 13px;
  }
}

/* =============================================================
   FASE 6 - PERSPECTIVAS 3D, PREVIEWS CLICÁVEIS E SLIDER DE IDEIAS
   ============================================================= */

/* 1. SEÇÃO DE PERSPECTIVAS E IDEIAS 3D */
.perspectivas-section {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-deep) 100%);
  border-bottom: 1px solid var(--border-color);
  padding: 100px 0;
}

.perspectivas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-bottom: 48px;
}

.perspectiva-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.perspectiva-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent-gold-light);
  box-shadow: var(--shadow-lg), var(--glow-gold);
}

.perspectiva-img-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #090e0b;
}

.perspectiva-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.perspectiva-card:hover .perspectiva-img-wrapper img {
  transform: scale(1.06);
}

.zoom-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  background: rgba(13, 20, 16, 0.85);
  border: 1.5px solid var(--accent-gold);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
  opacity: 0;
  transition: var(--transition-smooth);
  pointer-events: none;
  z-index: 4;
  box-shadow: var(--shadow-md), 0 0 15px rgba(212, 160, 63, 0.3);
}

.perspectiva-card:hover .zoom-indicator {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.perspectiva-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--border-color);
}

.perspectiva-info h3 {
  font-size: 17px;
  color: var(--text-primary);
  margin-bottom: 6px;
  transition: var(--transition-fast);
}

.perspectiva-card:hover .perspectiva-info h3 {
  color: var(--accent-gold-light);
}

.perspectiva-info p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 300;
}

/* 2. PLACA METÁLICA DE GARANTIA DO MÉTODO NOGUEIRA */
.portfolio-guarantee-card {
  background: linear-gradient(135deg, rgba(8, 14, 10, 0.8) 0%, rgba(21, 31, 24, 0.9) 100%);
  border: 1.5px solid var(--accent-gold-dark);
  border-radius: var(--border-radius);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: var(--shadow-md), inset 0 0 20px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}

.portfolio-guarantee-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold-light), transparent);
}

.guarantee-icon {
  font-size: 40px;
  color: var(--accent-gold-light);
  background: rgba(212, 160, 63, 0.08);
  border: 1px solid rgba(212, 160, 63, 0.2);
  width: 76px;
  height: 76px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(212, 160, 63, 0.1);
  flex-shrink: 0;
  animation: floatAnim 4.5s ease-in-out infinite;
}

.guarantee-text {
  flex-grow: 1;
}

.guarantee-text strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.guarantee-text p {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 300;
}

/* 3. PREVIEW CLICÁVEL DO PAINEL LATERAL (ZOOM HOVER EFFECT) */
.clickable-preview {
  position: relative;
  transition: var(--transition-smooth);
}

.clickable-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 14, 10, 0.3);
  transition: var(--transition-smooth);
  pointer-events: none;
  opacity: 0;
}

.clickable-preview:hover::after {
  opacity: 1;
}

.clickable-preview:hover {
  transform: scale(1.025);
  border-color: var(--accent-gold-light) !important;
  box-shadow: var(--shadow-md), 0 0 15px rgba(212, 160, 63, 0.15) !important;
}

.preview-zoom-hover {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(13, 20, 16, 0.85);
  border: 1px solid var(--accent-gold);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(5px);
  transition: var(--transition-smooth);
  pointer-events: none;
  z-index: 5;
  box-shadow: var(--shadow-sm);
}

.clickable-preview:hover .preview-zoom-hover {
  opacity: 1;
  transform: translateY(0);
}

/* Responsividade das Perspectivas */
@media (max-width: 768px) {
  .portfolio-guarantee-card {
    flex-direction: column;
    text-align: center;
    padding: 28px 20px;
    gap: 20px;
  }
  .guarantee-icon {
    margin: 0 auto;
  }
}

/* =============================================================
   SISTEMA DE BLOQUEIO DE IMPRESSÃO (IP PRINT PROTECTION)
   ============================================================= */
@media print {
  /* Oculta completamente todos os elementos visíveis do DOM */
  body * {
    display: none !important;
  }
  
  /* Substitui a página inteira por uma barreira legal oficial de propriedade intelectual */
  body {
    background: #080e0a !important;
  }
  
  body::before {
    content: "PROPRIEDADE INTELECTUAL REGISTRADA\nARQUITETO HENRIQUE NOGUEIRA (CAU-BR Nº A44431-6)\n\n----------------------------------------------------------------------------------------------------\n\nAVISO DE SEGURANÇA E SEGREDO INDUSTRIAL\n\nEste material técnico, imagens tridimensionais, estudos de zoneamento e plantas humanizadas estão sob a proteção civil e criminal da Lei Federal de Direitos Autorais (Lei nº 9.610 de 19 de fevereiro de 1998).\n\nA geração de PDFs, cópias digitais, clonagens de layout ou impressão física sem autorização expressa por escrito do arquiteto constitui infração penal grave e passível de sanções jurídicas e financeiras.\n\nPara obter acesso ao caderno técnico de cotas AutoCAD compatibilizado ou à chave de validação de projetos corporativos, entre em contato diretamente com o escritório autor:\n\nEmail: arquitetohenriquenogueira@gmail.com\nWhatsApp: (92) 99115-4321\nManaus - Amazonas - Brasil\n\n----------------------------------------------------------------------------------------------------\n\nDocumento Protegido Digitalmente. Sistema Antigravity de Blindagem Corporativa.";
    display: block !important;
    position: fixed;
    top: 15%;
    left: 8%;
    right: 8%;
    text-align: center;
    font-size: 16pt;
    color: #d4a03f !important;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.8;
    white-space: pre-wrap;
    background: #0d1410 !important;
    padding: 60px 40px;
    border: 3px solid #d4a03f !important;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(212, 160, 63, 0.4);
    box-sizing: border-box;
  }
}