/* ==========================================================================
   HM2 SHOWROOM — Identidade Visual Premium
   ========================================================================== */

/* ── Tipografia e tokens globais ─────────────────────────────────────────── */
:root {
  --showroom-font-heading: 'Inter', 'Segoe UI', sans-serif;
  --showroom-gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  --showroom-gradient-cta:  linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  --showroom-glow:          0 0 40px rgba(99, 102, 241, 0.35);
  --showroom-glass-bg:      rgba(255, 255, 255, 0.06);
  --showroom-glass-border:  rgba(255, 255, 255, 0.12);
  --showroom-radius:        1rem;
}

/* ── Body base ───────────────────────────────────────────────────────────── */
body:not(.path-admin) {
  font-family: var(--showroom-font-heading);
  background-color: #ffffff;
  color: #0f172a;
}

/* ── Seção Hero (lp-fundo-6 + lp-hero) ─────────────────────────────────── */
body:not(.path-admin) .layout.lp-hero {
  background: var(--showroom-gradient-hero) !important;
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Efeito de mesh/glow no fundo do hero */
body:not(.path-admin) .layout.lp-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,0.25) 0%, transparent 70%);
  pointer-events: none;
}
body:not(.path-admin) .layout.lp-hero::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79,70,229,0.20) 0%, transparent 70%);
  pointer-events: none;
}

/* Texto do hero em branco */
body:not(.path-admin) .layout.lp-hero,
body:not(.path-admin) .layout.lp-hero h1,
body:not(.path-admin) .layout.lp-hero h2,
body:not(.path-admin) .layout.lp-hero h3,
body:not(.path-admin) .layout.lp-hero p,
body:not(.path-admin) .layout.lp-hero .field {
  color: #ffffff !important;
}

/* ── Seções com fundo escuro (lp-fundo-6) ──────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-6 {
  background: linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%) !important;
}

/* ── Contraste: texto branco em lp-fundo-6 ─────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-6 .lp-section__titulo {
  color: #ffffff !important;
}
body:not(.path-admin) .layout.lp-fundo-6 .lp-section__descricao {
  color: rgba(255, 255, 255, 0.80) !important;
}
body:not(.path-admin) .layout.lp-fundo-6 .lp-section__titulo::after {
  background-color: rgba(255, 255, 255, 0.40) !important;
}

/* ── Cards e blocos de conteúdo ─────────────────────────────────────────── */
body:not(.path-admin) .card,
body:not(.path-admin) .hm2-card {
  border-radius: var(--showroom-radius);
  border: 1px solid rgba(99, 102, 241, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body:not(.path-admin) .card:hover,
body:not(.path-admin) .hm2-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--showroom-glow);
  border-color: rgba(99, 102, 241, 0.4);
}

/* ── Botões CTA ──────────────────────────────────────────────────────────── */
body:not(.path-admin) .btn-primary,
body:not(.path-admin) a.btn-primary {
  background: var(--showroom-gradient-cta);
  border: none;
  border-radius: 0.625rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body:not(.path-admin) .btn-primary:hover,
body:not(.path-admin) a.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55);
  background: var(--showroom-gradient-cta);
}

/* ── Títulos de seção ────────────────────────────────────────────────────── */
body:not(.path-admin) h2.section-title,
body:not(.path-admin) .hm2-section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Badge / pill indicador de seção */
body:not(.path-admin) .badge-section {
  display: inline-block;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ── Seção alternada (fundo claro) ─────────────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-3 {
  background-color: #f0f0ff !important;
}

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
body:not(.path-admin) .hm2-region-rodape,
body:not(.path-admin) footer {
  background: #0f172a;
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(99, 102, 241, 0.2);
}

/* ── Separador decorativo ────────────────────────────────────────────────── */
body:not(.path-admin) .hm2-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, transparent);
  border: none;
  margin: 2rem 0;
  opacity: 0.4;
}

/* ── Scroll suave global ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Fundos adicionais das seções ─────────────────────────────────────────── */
body:not(.path-admin) .layout.lp-fundo-1 {
  background-color: #ffffff !important;
}
body:not(.path-admin) .layout.lp-fundo-2 {
  background-color: #f8f8f8 !important;
}
body:not(.path-admin) .layout.lp-fundo-4 {
  background-color: #f8f7ff !important;
}
body:not(.path-admin) .layout.lp-fundo-5 {
  background-color: #ede9fe !important;
}

/* Oculta título do nó em páginas Landing Page */
body.page-node-type-landing-page .field--name-title {
  display: none !important;
}

/* Centraliza conteúdo do hero */
body:not(.path-admin) .layout.lp-hero .layout__region {
  text-align: center;
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 2rem;
  position: relative;
  z-index: 1;
}

/* Centraliza grupos de botões dentro do hero */
body:not(.path-admin) .layout.lp-hero .layout__region p,
body:not(.path-admin) .layout.lp-hero .layout__region .field--name-body > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Parágrafos de texto (não botões) voltam ao texto normal */
body:not(.path-admin) .layout.lp-hero .layout__region p:not(:has(a.btn)) {
  display: block;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Seções lp-fundo-6 fora do hero: texto sempre branco */
body:not(.path-admin) .layout.lp-fundo-6 h1,
body:not(.path-admin) .layout.lp-fundo-6 h2,
body:not(.path-admin) .layout.lp-fundo-6 h3,
body:not(.path-admin) .layout.lp-fundo-6 h4,
body:not(.path-admin) .layout.lp-fundo-6 p,
body:not(.path-admin) .layout.lp-fundo-6 li,
body:not(.path-admin) .layout.lp-fundo-6 .field,
body:not(.path-admin) .layout.lp-fundo-6 {
  color: #ffffff !important;
}