/* ==========================================================================
   Componentes — Imob Child Theme
   ========================================================================== */

/* ── Botões variantes ───────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-2);
  font-family:    var(--font-primary);
  font-weight:    var(--fw-semibold);
  font-size:      var(--fs-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  padding:        var(--space-3) var(--space-6);
  border-radius:  var(--radius-md);
  border:         2px solid transparent;
  cursor:         pointer;
  text-decoration:none;
  transition:     all var(--transition-fast);
  line-height:    1;
}

.btn-primary {
  background-color: var(--color-gold);
  color:            var(--color-navy);
  border-color:     var(--color-gold);
}
.btn-primary:hover {
  background-color: var(--color-gold-dark);
  border-color:     var(--color-gold-dark);
  color:            var(--color-navy);
  transform:        translateY(-1px);
  box-shadow:       var(--shadow-gold);
}

.btn-secondary {
  background-color: transparent;
  color:            var(--color-gold);
  border-color:     var(--color-gold);
}
.btn-secondary:hover {
  background-color: var(--color-gold);
  color:            var(--color-navy);
  transform:        translateY(-1px);
}

.btn-navy {
  background-color: var(--color-navy);
  color:            var(--color-white);
  border-color:     var(--color-navy);
}
.btn-navy:hover {
  background-color: var(--color-navy-80);
  border-color:     var(--color-navy-80);
  color:            var(--color-white);
  transform:        translateY(-1px);
  box-shadow:       var(--shadow-navy);
}

.btn-ghost {
  background-color: transparent;
  color:            var(--color-white);
  border-color:     var(--color-white);
}
.btn-ghost:hover {
  background-color: var(--color-white);
  color:            var(--color-navy);
}

.btn-lg { padding: var(--space-4) var(--space-8);   font-size: var(--fs-base); }
.btn-sm { padding: var(--space-2) var(--space-4);   font-size: var(--fs-xs); }

/* ── Card ───────────────────────────────────────────────────────────────── */
.om-card {
  background-color: var(--color-white);
  border-radius:    var(--radius-xl);
  box-shadow:       var(--shadow);
  overflow:         hidden;
  transition:       transform var(--transition-base), box-shadow var(--transition-base);
}
.om-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.om-card__image {
  width:          100%;
  aspect-ratio:   16 / 9;
  object-fit:     cover;
  display:        block;
}

.om-card__body {
  padding: var(--space-6);
}

.om-card__tag {
  display:          inline-block;
  font-size:        var(--fs-xs);
  font-weight:      var(--fw-semibold);
  letter-spacing:   var(--ls-widest);
  text-transform:   uppercase;
  color:            var(--color-gold);
  margin-bottom:    var(--space-2);
}

.om-card__title {
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  color:       var(--color-navy);
  margin:      0 0 var(--space-3);
  line-height: var(--lh-snug);
}

.om-card__excerpt {
  font-size:   var(--fs-sm);
  color:       var(--color-muted);
  line-height: var(--lh-relaxed);
  margin:      0 0 var(--space-4);
}

/* ── Section Wrapper ────────────────────────────────────────────────────── */
.om-section {
  padding: var(--space-20) 0;
}
.om-section--sm   { padding: var(--space-12) 0; }
.om-section--lg   { padding: var(--space-32) 0; }
.om-section--navy { background-color: var(--color-navy); }
.om-section--gold { background-color: var(--color-gold-10); }
.om-section--teal { background-color: var(--color-teal-10); }
.om-section--gray { background-color: var(--color-gray-50); }

.om-section__header {
  text-align:    center;
  margin-bottom: var(--space-12);
}

.om-section__label {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-3);
}

.om-section__title {
  font-size:   var(--fs-4xl);
  font-weight: var(--fw-bold);
  color:       var(--color-navy);
  margin:      0 0 var(--space-4);
}

.om-section--navy .om-section__title { color: var(--color-white); }

.om-section__subtitle {
  font-size:   var(--fs-lg);
  color:       var(--color-muted);
  max-width:   60ch;
  margin:      0 auto;
  line-height: var(--lh-relaxed);
}

.om-section--navy .om-section__subtitle { color: var(--color-navy-20); }

/* Divisor decorativo */
.om-divider {
  width:            60px;
  height:           3px;
  background-color: var(--color-gold);
  margin:           var(--space-4) auto 0;
  border-radius:    var(--radius-full);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.om-hero {
  position:       relative;
  min-height:     90vh;
  display:        flex;
  align-items:    center;
  overflow:       hidden;
  background-color: var(--color-navy);
}

.om-hero__bg {
  position:   absolute;
  inset:      0;
  object-fit: cover;
  width:      100%;
  height:     100%;
  opacity:    0.35;
}

.om-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgb(18 40 63 / 0.9) 0%,
    rgb(18 40 63 / 0.5) 60%,
    rgb(30 74 95 / 0.3) 100%
  );
}

.om-hero__content {
  position:   relative;
  z-index:    var(--z-raised);
  max-width:  var(--container-lg);
  margin:     0 auto;
  padding:    var(--space-8) var(--space-8) var(--space-20);
  color:      var(--color-white);
}

.om-hero__eyebrow {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-4);
}

.om-hero__title {
  font-size:   var(--fs-6xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin:      0 0 var(--space-6);
  color:       var(--color-white);
}

.om-hero__subtitle {
  font-size:   var(--fs-xl);
  color:       rgb(255 255 255 / 0.8);
  max-width:   50ch;
  margin:      0 0 var(--space-8);
  line-height: var(--lh-relaxed);
}

.om-hero__actions {
  display:    flex;
  gap:        var(--space-4);
  flex-wrap:  wrap;
  align-items:center;
}

/* ── Badge / Tag ────────────────────────────────────────────────────────── */
.om-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--space-1);
  font-size:      var(--fs-xs);
  font-weight:    var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  line-height:    1;
}

.om-badge--gold   { background-color: var(--color-gold-10); color: var(--color-gold-dark); }
.om-badge--navy   { background-color: var(--color-navy-10); color: var(--color-navy); }
.om-badge--teal   { background-color: var(--color-teal-10); color: var(--color-teal-dark); }
.om-badge--modulo { background-color: #1d4ed8; color: #fff; letter-spacing: .08em; }

/* ── Feature list ───────────────────────────────────────────────────────── */
.om-features {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-4);
}

.om-features__item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--fs-base);
  color:       var(--color-body);
}

.om-features__icon {
  flex-shrink:  0;
  width:        1.25rem;
  height:       1.25rem;
  color:        var(--color-gold);
  margin-top:   0.125rem;
}

/* ── Stat block ─────────────────────────────────────────────────────────── */
.om-stats {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   var(--space-8);
}

.om-stat__number {
  font-size:   var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  color:       var(--color-gold);
  line-height: 1;
  display:     block;
}

.om-stat__label {
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--color-navy-20);
  display:        block;
  margin-top:     var(--space-1);
}

/* ── Responsividade ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .om-hero__title   { font-size: var(--fs-4xl); }
  .om-hero__subtitle { font-size: var(--fs-base); }
  .om-hero__actions { flex-direction: column; align-items: flex-start; }
  .om-section       { padding: var(--space-12) 0; }
  .om-section__title { font-size: var(--fs-3xl); }
}


/* ════════════════════════════════════════════════════════════════
   WhatsApp floating button (global)
   ════════════════════════════════════════════════════════════════ */

.om-wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  transform: scale(.7) translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s;
  text-decoration: none;
}
.om-wa-float.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}
.om-wa-float:hover {
  background: #1ebe5d;
  transform: scale(1.08);
}
.om-wa-float svg { flex-shrink: 0; }

/* Evita sobreposição com back-to-top */
.om-back-to-top {
  position: fixed !important;
  right: 24px;
  bottom: 96px !important;
  z-index: 999;
}

@media (max-width: 480px) {
  .om-wa-float {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 50px;
    height: 50px;
  }
  .om-back-to-top {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Scroll Entrance Animations (data-animate) ───────────────────────────────
   Usado por initFadeIn() em main.js.
   Adicionar data-animate="fade-up" | "fade-in" | "slide-left" | "slide-right"
   para ativar a animação de entrada quando o elemento entra na viewport.
   ──────────────────────────────────────────────────────────────────────────── */

/* Estado inicial — invisível */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

/* fade-up (padrão) */
[data-animate="fade-up"],
[data-animate] {
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* fade-in puro (sem movimento vertical) */
[data-animate="fade-in"] {
  transform: none;
  transition: opacity 0.65s ease;
}

/* slide da esquerda */
[data-animate="slide-left"] {
  transform: translateX(-40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* slide da direita */
[data-animate="slide-right"] {
  transform: translateX(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* zoom sutil */
[data-animate="zoom-in"] {
  transform: scale(0.93);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* Estado final — visível (adicionado por JS ao entrar na viewport) */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* delay escalonado para grids */
[data-animate-delay="100"] { transition-delay: 0.10s; }
[data-animate-delay="200"] { transition-delay: 0.20s; }
[data-animate-delay="300"] { transition-delay: 0.30s; }
[data-animate-delay="400"] { transition-delay: 0.40s; }
[data-animate-delay="500"] { transition-delay: 0.50s; }

/* Respeita preferências de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}