/* ============================================================
   ENGSOLAR — Componentes reutilizáveis
   ============================================================ */

/* ---------- Glass ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---------- Botões ---------- */
.btn {
  --pad-y: .85rem; --pad-x: 1.5rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease-spring), box-shadow .3s var(--ease-out), background .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
/* Shine sweep (estilo Solaris): brilho inclinado cruza no hover */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after { left: 140%; }
/* Ícone desliza no hover */
.btn:hover :is(span, i, svg) { transition: transform .3s var(--ease-spring); }
/* Ripple no clique (criado via JS) */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: rgba(255, 255, 255, .45);
  animation: ripple .6s var(--ease-out);
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }
.btn--sm { --pad-y: .6rem; --pad-x: 1.1rem; font-size: .9rem; }
.btn--lg { --pad-y: 1.05rem; --pad-x: 2rem; font-size: 1.05rem; }
.btn--block { width: 100%; white-space: normal; }

.btn--primary {
  background: var(--grad-solar);
  color: #11182E;
  box-shadow: 0 10px 30px -10px rgba(232, 137, 14, .55);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -10px rgba(232, 137, 14, .7), var(--glow-solar);
}
.btn:active { transform: translateY(0) scale(.97); }

.btn--ghost {
  background: transparent;
  color: var(--text-high);
  border-color: var(--border-glass-strong);
}
.btn--ghost:hover {
  border-color: var(--primary);
  background: rgba(245, 166, 35, .06);
  transform: translateY(-2px);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 500;
  padding: .4rem .85rem;
  border-radius: var(--radius-pill);
}
.badge--glass {
  background: var(--glass-bg);
  border: 1px solid var(--border-glass);
  color: var(--text-mid);
}
.badge--solid {
  background: rgba(10, 17, 36, .65);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-high);
  font-family: var(--font-display);
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}

/* ---------- Links com seta ---------- */
.link-arrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--primary);
  display: inline-flex;
  gap: .35rem;
  transition: gap .25s var(--ease);
}
.link-arrow:hover { gap: .65rem; }

/* ---------- Chips de logo ---------- */
.logo-chip {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--text-mid);
  padding: .55rem 1.1rem;
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  transition: color .25s, border-color .25s;
}
.logo-chip:hover { color: var(--text-high); border-color: var(--primary); }

/* ---------- Barra de progresso de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-solar);
  z-index: 1000;
  box-shadow: 0 0 12px rgba(245, 166, 35, .6);
}

/* ---------- Cortina de chegada (vindo da tela de entrada) ---------- */
.page-intro {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg-deep);
  pointer-events: none;
  animation: introFade 1.1s var(--ease-out) forwards;
}
@keyframes introFade { 0%,15% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .page-intro { display: none; } }

/* ---------- Marquee infinito (faixa de confiança) ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: .8rem; padding-right: .8rem; }
.marquee__group > * { flex-shrink: 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled {
  background: rgba(10, 17, 36, .8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border-glass);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; }
.brand__mark { display: grid; place-items: center; filter: drop-shadow(0 0 10px rgba(245,166,35,.4)); }
.brand__logo { height: 30px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(245,166,35,.25)); }
.brand__text { font-family: 'Orbitron', var(--font-display); font-weight: 700; font-size: 1.05rem; color: #FFFFFF; letter-spacing: .07em; }
.brand__text strong { font-weight: 800; color: var(--primary); }

.navbar__links { display: flex; align-items: center; gap: 2rem; }
.navbar__links > a:not(.btn) {
  font-size: .95rem; color: var(--text-mid); font-weight: 500;
  transition: color .25s; position: relative;
}
.navbar__links > a:not(.btn):hover { color: var(--text-high); }
.navbar__links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--primary); transition: width .3s var(--ease);
}
.navbar__links > a:not(.btn):hover::after { width: 100%; }

.navbar__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.navbar__toggle span { width: 24px; height: 2px; background: var(--text-high); border-radius: 2px; transition: transform .3s, opacity .3s; }
.navbar__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle.is-open span:nth-child(2) { opacity: 0; }
.navbar__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Campos / Formulário ---------- */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-size: .85rem; font-weight: 500; color: var(--text-mid); margin-bottom: .5rem; }
.field input, .field select {
  width: 100%;
  background: rgba(10, 17, 36, .6);
  border: 1px solid var(--border-glass);
  color: var(--text-high);
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .15);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-mid) 50%), linear-gradient(135deg, var(--text-mid) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field__money { display: flex; align-items: center; background: rgba(10,17,36,.6); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding-left: 1rem; transition: border-color .25s, box-shadow .25s; }
.field__money:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }
.field__money span { color: var(--text-low); font-weight: 600; }
.field__money input { background: transparent; border: 0; }
.field__money input:focus { box-shadow: none; }

/* Slider */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; margin-top: .9rem; border-radius: 999px; background: var(--bg-surface-2); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grad-solar); box-shadow: 0 0 12px rgba(245,166,35,.6); cursor: pointer; }
.slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #F5A623; cursor: pointer; }

/* Toggle segmentado */
.seg-toggle { display: flex; gap: .5rem; background: rgba(10,17,36,.6); border: 1px solid var(--border-glass); border-radius: var(--radius-sm); padding: .35rem; }
.seg-toggle__opt { flex: 1; padding: .65rem; border: 0; background: transparent; color: var(--text-mid); border-radius: 9px; font-weight: 600; font-size: .9rem; transition: background .25s, color .25s; }
.seg-toggle__opt.is-active { background: var(--grad-solar); color: #11182E; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 950;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .7);
  transition: transform .25s var(--ease);
}
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.4s infinite; }
.wa-float:hover { transform: scale(1.08); }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border-glass); padding-top: clamp(3rem,6vw,4.5rem); margin-top: 2rem; background: rgba(10,17,36,.5); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer__brand p { margin: 1rem 0; font-size: .95rem; max-width: 320px; }
.footer__badges { display: flex; gap: .6rem; }
.footer__col h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-low); margin-bottom: 1.1rem; }
.footer__col a { display: block; color: var(--text-mid); font-size: .95rem; padding: .35rem 0; transition: color .2s; }
.footer__col a:hover { color: var(--primary); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--border-glass); font-size: .85rem; color: var(--text-low); }
.footer__bottom a:hover { color: var(--text-high); }

/* ---------- Mobile nav ---------- */
@media (max-width: 880px) {
  .navbar__toggle { display: flex; }
  .navbar__links {
    position: fixed; inset: 74px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10, 17, 36, .97);
    backdrop-filter: blur(20px);
    padding: 1rem var(--gutter) 2rem;
    border-bottom: 1px solid var(--border-glass);
    transform: translateY(-130%);
    transition: transform .4s var(--ease);
  }
  .navbar__links.is-open { transform: translateY(0); }
  .navbar__links > a:not(.btn) { padding: 1rem 0; border-bottom: 1px solid var(--border-glass); }
  .navbar__cta { margin-top: 1rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}