/* ═══════════════════════════════════════════════════════════════
   ZAZEN CONSULTORIA — Custom Stylesheet
   Complementa o Bootstrap 5.3 (dark theme).
   Cor primária extraída do logo: teal #2BB8B8
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand — teal do logo */
  --z-primary:            #2BB8B8;
  --z-primary-dark:       #1E9494;
  --z-primary-light:      #44D1D1;
  --z-primary-glow:       rgba(43, 184, 184, 0.14);
  --z-primary-glow-strong:rgba(43, 184, 184, 0.30);

  /* Accent — ouro quente, complementar ao teal */
  --z-accent:             #E8A84D;
  --z-accent-dark:        #C88830;
  --z-accent-glow:        rgba(232, 168, 77, 0.18);

  /* Backgrounds */
  --z-bg:                 #080D13;
  --z-bg-alt:             #0C1520;
  --z-surface:            #111E2B;
  --z-card:               #0E1B27;
  --z-card-hover:         #132132;

  /* Typography */
  --z-text:               #D5E8F2;
  --z-text-2:             #7AAABF;
  --z-text-muted:         #4A6A80;

  /* Borders */
  --z-border:             rgba(43, 184, 184, 0.12);
  --z-border-hover:       rgba(43, 184, 184, 0.38);

  /* Fonts */
  --font-head:  'Ubuntu', sans-serif;
  --font-body:  'Ubuntu', sans-serif;

  /* Misc */
  --radius:     16px;
  --radius-sm:  8px;
  --t:          0.25s ease;
}

/* Bootstrap dark-theme overrides */
[data-bs-theme="dark"] {
  --bs-primary:           #2BB8B8;
  --bs-primary-rgb:       43, 184, 184;
  --bs-body-bg:           #080D13;
  --bs-body-color:        #D5E8F2;
  --bs-border-color:      rgba(43, 184, 184, 0.12);
  --bs-link-color:        #2BB8B8;
  --bs-link-hover-color:  #44D1D1;
}

/* ── 2. Base ──────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family:  var(--font-body);
  background:   var(--z-bg);
  color:        var(--z-text);
  line-height:  1.75;
  overflow-x:   hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t);
}

img { max-width: 100%; display: block; }

/* ── 3. Utilities ─────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, var(--z-primary) 0%, var(--z-primary-light) 60%, var(--z-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.zazen-label {
  display:        inline-block;
  font-family:    var(--font-head);
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--z-primary);
  margin-bottom:  0.6rem;
}

.zazen-title {
  font-family:  var(--font-head);
  font-size:    clamp(1.9rem, 4vw, 2.8rem);
  font-weight:  700;
  line-height:  1.15;
  color:        #E8F4FA;
  margin-bottom: 1.25rem;
}

.zazen-subtitle {
  font-size:    1.05rem;
  color:        var(--z-text-2);
  max-width:    680px;
  margin:       0 auto;
  line-height:  1.8;
}

.zazen-subtitle--narrow { max-width: 520px; }

.zazen-text {
  color:         var(--z-text-2);
  font-size:     1.05rem;
  margin-bottom: 1rem;
}
.zazen-text strong { color: var(--z-text); font-weight: 600; }

/* Tags */
.zazen-tag {
  display:       inline-block;
  font-size:     0.78rem;
  font-weight:   600;
  color:         var(--z-primary-light);
  background:    var(--z-primary-glow);
  border:        1px solid var(--z-border);
  border-radius: 50px;
  padding:       0.3rem 0.85rem;
  transition:    border-color var(--t), background var(--t);
}
.zazen-tag:hover {
  border-color:  var(--z-border-hover);
  background:    rgba(43, 184, 184, 0.22);
}

/* ── 4. Buttons ───────────────────────────────────────────────── */
.btn-zazen {
  display:        inline-flex;
  align-items:    center;
  gap:            0.5rem;
  padding:        0.75rem 1.75rem;
  border-radius:  50px;
  font-family:    var(--font-head);
  font-weight:    700;
  font-size:      0.95rem;
  letter-spacing: 0.02em;
  cursor:         pointer;
  border:         none;
  transition:     all var(--t);
}

.btn-zazen-primary {
  background:  var(--z-primary);
  color:       #050D12;
}
.btn-zazen-primary:hover {
  background:  var(--z-primary-light);
  color:       #050D12;
  transform:   translateY(-3px);
  box-shadow:  0 8px 28px var(--z-primary-glow-strong);
}

.btn-zazen-ghost {
  background:  transparent;
  color:       var(--z-text);
  border:      1.5px solid var(--z-border);
}
.btn-zazen-ghost:hover {
  border-color: var(--z-primary);
  color:        var(--z-primary-light);
  transform:    translateY(-3px);
  box-shadow:   0 8px 28px var(--z-primary-glow);
}

/* ── 5. Sections ──────────────────────────────────────────────── */
.zazen-section {
  padding: 6rem 0;
  border-top: 1px solid var(--z-border);
}

.zazen-section--alt {
  background: var(--z-bg-alt);
}

/* ── 6. Navbar ────────────────────────────────────────────────── */
.zazen-nav {
  background:       transparent;
  padding:          1rem 0;
  transition:       background var(--t), box-shadow var(--t), padding var(--t);
  border-bottom:    1px solid transparent;
}

.zazen-nav.scrolled {
  background:    rgba(8, 13, 19, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--z-border);
  box-shadow:    0 4px 24px rgba(0,0,0,0.4);
  padding:       0.6rem 0;
}

/* Brand */
.zazen-brand {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  color:       var(--z-text) !important;
}

.brand-icon {
  border-radius: 50%;
  opacity: 0.92;
  transition: opacity var(--t);
}
.zazen-brand:hover .brand-icon { opacity: 1; }

.brand-name {
  font-family:  var(--font-head);
  font-size:    1.15rem;
  font-weight:  700;
  color:        #E8F4FA;
  line-height:  1;
}

.brand-sub {
  display:     block;
  font-size:   0.65rem;
  font-weight: 400;
  color:       var(--z-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Nav links */
.zazen-nav-link {
  font-family:  var(--font-head);
  font-size:    0.9rem;
  font-weight:  500;
  color:        var(--z-text-2) !important;
  padding:      0.4rem 0.75rem !important;
  border-radius: var(--radius-sm);
  transition:   color var(--t), background var(--t) !important;
}
.zazen-nav-link:hover,
.zazen-nav-link.active {
  color:       var(--z-primary-light) !important;
  background:  var(--z-primary-glow);
}

.zazen-nav-cta {
  font-family:   var(--font-head);
  font-size:     0.88rem;
  font-weight:   700;
  color:         #050D12 !important;
  background:    var(--z-primary) !important;
  padding:       0.45rem 1.25rem !important;
  border-radius: 50px;
  transition:    background var(--t), box-shadow var(--t) !important;
}
.zazen-nav-cta:hover {
  background:  var(--z-primary-light) !important;
  box-shadow:  0 4px 16px var(--z-primary-glow-strong) !important;
}

/* Hamburger customizado */
.zazen-toggler {
  display:         flex;
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  padding:         6px;
  cursor:          pointer;
}
.zazen-toggler span {
  display:        block;
  width:          24px;
  height:         2px;
  background:     var(--z-primary);
  border-radius:  2px;
  transition:     all var(--t);
}
.zazen-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zazen-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.zazen-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav collapse */
@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background:   rgba(8, 13, 19, 0.98);
    border-top:   1px solid var(--z-border);
    padding:      1rem 0 1.5rem;
    margin-top:   0.5rem;
  }
  .zazen-nav-link { padding: 0.6rem 1rem !important; }
  .zazen-nav-cta  { margin: 0.5rem 1rem 0; display: inline-block; }
}

/* ── 7. Hero ──────────────────────────────────────────────────── */
.zazen-hero {
  position:   relative;
  min-height: 100vh;
  background: var(--z-bg);
  display:    flex;
  align-items: center;
  overflow:   hidden;
}

/* Dot-grid background (circuit board feel) */
.hero-bg-dots {
  position:         absolute;
  inset:            0;
  background-image: radial-gradient(circle, rgba(43, 184, 184, 0.07) 1px, transparent 1px);
  background-size:  38px 38px;
  pointer-events:   none;
}

/* Radial teal glow */
.hero-bg-glow {
  position:        absolute;
  inset:           0;
  background:
    radial-gradient(ellipse 55% 65% at 78% 55%, rgba(43, 184, 184, 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 30% 30% at 10% 80%, rgba(232, 168, 77, 0.05) 0%, transparent 60%);
  pointer-events:  none;
}

/* Hero content */
.hero-content { position: relative; z-index: 1; padding-top: 6rem; }

.hero-logo-wrap { max-width: 220px; }
.hero-logo { max-height: 220px; width: auto; }

.hero-eyebrow {
  font-family:    var(--font-head);
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--z-primary);
  margin-bottom:  1rem;
}

.hero-title {
  font-family:   var(--font-head);
  font-size:     clamp(2.5rem, 6vw, 4.2rem);
  font-weight:   700;
  line-height:   1.08;
  color:         #EEF6FC;
  margin-bottom: 1.25rem;
}

.hero-subtitle {
  font-size:     1.1rem;
  color:         var(--z-text-2);
  line-height:   1.85;
  max-width:     520px;
  margin-bottom: 2.5rem;
}

/* Hero photo */
.hero-photo-wrap {
  position:  relative;
  width:     360px;
  height:    360px;
  flex-shrink: 0;
}

.hero-photo {
  position:      absolute;
  inset:         20px;
  width:         calc(100% - 40px);
  height:        calc(100% - 40px);
  border-radius: 50%;
  object-fit:    cover;
  object-position: center top;
  z-index:       2;
  border:        3px solid var(--z-primary-glow-strong);
  box-shadow:    0 0 40px var(--z-primary-glow), 0 0 80px rgba(43,184,184,0.07);
}

.hero-photo-ring {
  position:     absolute;
  inset:        0;
  border-radius: 50%;
  border:       1.5px solid var(--z-primary);
  opacity:      0.5;
  animation:    ringRotate 18s linear infinite;
  /* dash effect */
  background:   transparent;
}
.hero-photo-ring::before {
  content:      '';
  position:     absolute;
  inset:        -2px;
  border-radius: 50%;
  border:       2px solid transparent;
  border-top-color: var(--z-primary);
  border-right-color: rgba(43,184,184,0.3);
}

.hero-photo-ring--outer {
  inset:        -16px;
  opacity:      0.22;
  animation-duration: 30s;
  animation-direction: reverse;
  border-color: var(--z-accent);
}
.hero-photo-ring--outer::before {
  border-top-color:  var(--z-accent);
  border-right-color: rgba(232,168,77,0.2);
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Photo badge */
.hero-photo-badge {
  position:      absolute;
  bottom:        0px;
  right:         -18px;
  z-index:       3;
  background:    linear-gradient(135deg, var(--z-surface), var(--z-card));
  border:        1px solid var(--z-primary);
  border-radius: var(--radius);
  padding:       0.55rem 0.85rem;
  text-align:    center;
  box-shadow:    0 8px 24px rgba(0,0,0,0.5), 0 0 16px var(--z-primary-glow);
}

.badge-num {
  display:     block;
  font-family: var(--font-head);
  font-size:   1.5rem;
  font-weight: 700;
  color:       var(--z-primary);
  line-height: 1;
}

.badge-txt {
  display:     block;
  font-size:   0.6rem;
  font-weight: 600;
  color:       var(--z-text-2);
  line-height: 1.35;
  margin-top:  0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Scroll indicator */
.hero-scroll {
  position:    absolute;
  bottom:      2rem;
  left:        50%;
  transform:   translateX(-50%);
  z-index:     2;
  color:       var(--z-primary);
  font-size:   1.4rem;
  opacity:     0.6;
  animation:   scrollBounce 2s ease-in-out infinite;
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       40px;
  height:      40px;
  border-radius: 50%;
  border:      1px solid var(--z-border);
  transition:  opacity var(--t), border-color var(--t);
}
.hero-scroll:hover {
  opacity: 1;
  border-color: var(--z-primary);
  color:   var(--z-primary);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(6px); }
}

/* ── 8. Sobre / Stats ─────────────────────────────────────────── */
.zazen-sobre { background: var(--z-bg); }

.zazen-stat {
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: var(--radius);
  padding:       1.5rem 1.25rem;
  text-align:    center;
  transition:    border-color var(--t), transform var(--t), box-shadow var(--t);
}
.zazen-stat:hover {
  border-color: var(--z-border-hover);
  transform:    translateY(-4px);
  box-shadow:   0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--z-primary-glow);
}

.stat-num {
  display:     block;
  font-family: var(--font-head);
  font-size:   2.4rem;
  font-weight: 700;
  color:       var(--z-primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat-lbl {
  display:   block;
  font-size: 0.82rem;
  color:     var(--z-text-2);
  line-height: 1.4;
}

/* ── 9. Cards (Serviços) ──────────────────────────────────────── */
.zazen-card {
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: var(--radius);
  padding:       2rem 1.75rem;
  display:       flex;
  flex-direction: column;
  gap:           0.75rem;
  transition:    border-color var(--t), transform var(--t), box-shadow var(--t);
  height:        100%;
}

.zazen-card:hover {
  border-color: var(--z-border-hover);
  transform:    translateY(-5px);
  box-shadow:   0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--z-primary-glow);
}

.zazen-card-icon {
  width:           48px;
  height:          48px;
  background:      var(--z-primary-glow);
  border:          1px solid var(--z-border);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.5rem;
  color:           var(--z-primary);
  flex-shrink:     0;
  transition:      background var(--t), border-color var(--t);
}
.zazen-card:hover .zazen-card-icon {
  background:   rgba(43, 184, 184, 0.22);
  border-color: var(--z-primary);
}

.zazen-card-title {
  font-family:   var(--font-head);
  font-size:     1.1rem;
  font-weight:   700;
  color:         #E0F0F8;
  margin-bottom: 0;
  line-height:   1.3;
}

.zazen-card-desc {
  font-size:   0.92rem;
  color:       var(--z-text-2);
  line-height: 1.75;
  flex-grow:   1;
  margin-bottom: 0;
}

.zazen-card-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Projeto card */
.zazen-card--projeto { gap: 0.5rem; }

.zazen-card--destaque {
  background: linear-gradient(135deg, #0C1E30 0%, var(--z-card) 100%);
  border-color: rgba(43, 184, 184, 0.25);
}
.zazen-card--destaque .zazen-card-title { font-size: 1.25rem; }

.zazen-projeto-tipo {
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--z-accent);
}

/* Animação de entrada dos cards (React re-renders incluídos) */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zazen-card {
  animation: cardIn 0.4s ease both;
}

/* Link */
.zazen-link {
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
  font-size:   0.88rem;
  font-weight: 700;
  color:       var(--z-primary);
  margin-top:  auto;
  transition:  gap var(--t), color var(--t);
}
.zazen-link:hover {
  gap:   0.6rem;
  color: var(--z-primary-light);
}

.zazen-link--accent {
  color: var(--z-accent);
}
.zazen-link--accent:hover {
  color: var(--z-accent-dark);
}

.zazen-link--inline {
  font-size:   0.75rem;
  margin-top:  0;
  font-weight: 600;
  opacity:     0.85;
}

/* Filter buttons */
.zazen-filter-btn {
  font-family:   var(--font-head);
  font-size:     0.82rem;
  font-weight:   600;
  color:         var(--z-text-2);
  background:    transparent;
  border:        1px solid var(--z-border);
  border-radius: 50px;
  padding:       0.4rem 1rem;
  cursor:        pointer;
  transition:    all var(--t);
}
.zazen-filter-btn:hover {
  color:        var(--z-primary-light);
  border-color: var(--z-border-hover);
}
.zazen-filter-btn.active {
  color:        #050D12;
  background:   var(--z-primary);
  border-color: var(--z-primary);
}

/* ── 10. Contato ──────────────────────────────────────────────── */
.contato-item {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: 50px;
  padding:       0.8rem 1.6rem;
  font-family:   var(--font-head);
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--z-text);
  transition:    all var(--t);
}
.contato-item:hover {
  border-color:  var(--z-border-hover);
  color:         var(--z-primary-light);
  transform:     translateY(-3px);
  box-shadow:    0 8px 24px var(--z-primary-glow);
}

.contato-item--destaque {
  background:   var(--z-primary-glow);
  border-color: var(--z-border-hover);
  color:        var(--z-primary-light);
}
.contato-item--destaque:hover {
  background: rgba(43, 184, 184, 0.22);
  color:      #E8F4FA;
}

.contato-icon {
  width:           36px;
  height:          36px;
  background:      var(--z-primary-glow);
  border:          1px solid var(--z-border);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1rem;
  color:           var(--z-primary);
  flex-shrink:     0;
  transition:      background var(--t);
}
.contato-item:hover .contato-icon {
  background: rgba(43, 184, 184, 0.22);
}

/* ── 11. Footer ───────────────────────────────────────────────── */
.zazen-footer {
  padding:     2rem 0;
  border-top:  1px solid var(--z-border);
  background:  var(--z-bg);
  font-family: 'Orbitron', sans-serif;
}

.footer-brand {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--z-text-2);
  transition:  color var(--t);
}
.footer-brand:hover { color: var(--z-primary-light); }

.footer-copy {
  font-size:     0.82rem;
  color:         var(--z-text-muted);
  margin-bottom: 0;
}

.footer-social a {
  font-size:  1.1rem;
  color:      var(--z-text-muted);
  transition: color var(--t);
}
.footer-social a:hover { color: var(--z-primary-light); }

/* ── 12. Scroll Animations ────────────────────────────────────── */
.animate-on-scroll {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-on-scroll.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger for children of row */
.animate-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.40s; }

/* ── 13. Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .zazen-section { padding: 4rem 0; }
  .hero-content  { padding-top: 5rem; }

  /* Foto mobile: aparece acima do texto, abaixo da navbar */
  .hero-photo-col { padding-top: 5.5rem; }

  .hero-photo-wrap {
    width:  240px;
    height: 240px;
  }
}

@media (max-width: 767.98px) {
  .hero-title    { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-subtitle { font-size: 1rem; }
  .zazen-section { padding: 3.5rem 0; }

  .zazen-title   { font-size: clamp(1.6rem, 5vw, 2.2rem); }

  .contato-item  { padding: 0.7rem 1.2rem; font-size: 0.85rem; }

  .hero-photo-wrap {
    width:  200px;
    height: 200px;
  }

  .hero-photo-badge {
    right: -10px;
  }
}

@media (max-width: 575.98px) {
  .hero-logo-wrap { max-width: 180px; }
  .hero-logo      { max-height: 100px; }
  .hero-actions   { flex-direction: column; }
  .btn-zazen      { width: 100%; justify-content: center; }
  .contato-item   { width: 100%; max-width: 280px; justify-content: center; }
  .hero-scroll    { display: none; }
}

/* ── 14. Back to top ──────────────────────────────────────────── */
.back-to-top {
  position:       fixed;
  bottom:         2rem;
  right:          2rem;
  z-index:        999;
  width:          44px;
  height:         44px;
  border-radius:  50%;
  border:         1px solid var(--z-primary);
  background:     rgba(8, 13, 19, 0.85);
  color:          var(--z-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.1rem;
  cursor:         pointer;
  opacity:        0;
  transform:      translateY(12px);
  transition:     opacity 0.3s ease, transform 0.3s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
.back-to-top.visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background:  var(--z-primary);
  color:       var(--z-bg);
  box-shadow:  0 0 18px var(--z-primary-glow-strong);
}
@media (max-width: 575.98px) {
  .back-to-top {
    bottom: 1.25rem;
    right:  1.25rem;
    width:  40px;
    height: 40px;
  }
}