:root {
  color-scheme: light;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.shadow-soft {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.25);
}

.shadow-xs {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hero-image-mask {
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}


.ba-wrap {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}

.ba-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ba-after,
.ba-before {
  position: absolute;
  inset: 0;
}

.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(16, 185, 129, 0.9);
  pointer-events: none;
}

.ba-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: ew-resize;
}

.ba-handle span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

#leadForm input,
#leadForm textarea,
#calcForm input,
#calcForm select {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

#leadForm input:focus,
#leadForm textarea:focus,
#calcForm input:focus,
#calcForm select:focus {
  outline: none;
  border-color: rgb(5, 150, 105);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

#leadForm button[data-submit-label] {
  transition: transform 150ms ease, box-shadow 150ms ease;
}

#leadForm button[data-submit-label]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .hero-image-mask {
    mask-image: none;
  }

  .ba-wrap {
    border-radius: 1rem;
  }
}

/* Wrapper sem altura fixa: o JS define aspect-ratio real das fotos */
/* ===== BEGIN: BA SLIDER (v2 final) ===== */
.ba-wrap{
  position:relative; overflow:hidden;
  border-radius:1rem; border:1px solid #e5e7eb; background:#f3f4f6;
  /* fallback visível (mobile) antes do JS calcular o ratio real */
  aspect-ratio: 4 / 3;
  min-height: 260px;
  --pos:50;
}
@media (min-width:768px){
  .ba-wrap{ aspect-ratio: 16 / 9; min-height: 0; }
}
.ba-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; background:#fff;
}
.ba-before{
  clip-path: polygon(0 0, calc(var(--pos)*1%) 0,
                     calc(var(--pos)*1%) 100%, 0 100%);
}
.ba-line{
  position:absolute; top:0; bottom:0;
  left: calc(var(--pos)*1%); width:2px; transform: translateX(-1px);
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.05));
  box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  pointer-events:none;
}
.ba-handle{
  position:absolute; top:0; bottom:0; left: calc(var(--pos)*1%);
  transform: translateX(-50%); width:48px; cursor:ew-resize;
  outline:0; background:transparent; border:0;
}
.ba-knob{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:44px; height:44px; border-radius:9999px; background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.15), 0 0 0 6px rgba(59,130,246,.15);
}
.ba-handle:focus .ba-knob{
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 0 0 8px rgba(59,130,246,.25);
}
.ba-wrap, .ba-wrap *{ user-select:none; -webkit-user-select:none; }
/* ===== END: BA SLIDER (v2 final) ===== */