/*!
 * PROSOLARBOT — Camada de Motion Design (estilos)
 * ------------------------------------------------------------------
 * Todas as regras que escondem conteúdo dependem de [data-psb="on"],
 * aplicado apenas quando o motor JavaScript está ativo. Sem JS, ou com
 * prefers-reduced-motion, o site permanece 100% visível e utilizável.
 */

/* ==================================================================
 * Tokens
 * ================================================================ */

:root {
  --psb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --psb-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --psb-dur: 900ms;
  --psb-dur-fast: 480ms;
  --psb-delay: 0ms;
  --psb-gold: #f5c518;
  --psb-navy: #0a1628;
}

/* ==================================================================
 * Reveal — variantes de entrada
 * ================================================================ */

[data-psb="on"] [data-psb-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--psb-dur) var(--psb-ease-expo) var(--psb-delay),
    transform var(--psb-dur) var(--psb-ease-expo) var(--psb-delay),
    filter var(--psb-dur) var(--psb-ease-expo) var(--psb-delay),
    clip-path var(--psb-dur) var(--psb-ease-expo) var(--psb-delay);
}

[data-psb="on"] [data-psb-reveal="fade"] { transform: none; }
[data-psb="on"] [data-psb-reveal="fade-up"] { transform: translate3d(0, 26px, 0); }
[data-psb="on"] [data-psb-reveal="rise"] { transform: translate3d(0, 46px, 0) scale(0.985); }
[data-psb="on"] [data-psb-reveal="fade-left"] { transform: translate3d(-18px, 0, 0); }
[data-psb="on"] [data-psb-reveal="pop"] { transform: translate3d(0, 18px, 0) scale(0.94); }

[data-psb="on"] [data-psb-reveal="clip-up"] {
  clip-path: inset(18% 0 0 0);
  transform: translate3d(0, 0, 0) scale(1.1);
}

[data-psb="on"] [data-psb-reveal="clip-right"] {
  clip-path: inset(0 26% 0 0);
  transform: translate3d(0, 0, 0) scale(1.08);
}

[data-psb="on"] [data-psb-reveal="blur"] {
  filter: blur(10px);
  transform: translate3d(0, 20px, 0);
}

[data-psb="on"] [data-psb-reveal][data-psb-in] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Imagens com zoom sutil e parallax combinados. */
[data-psb="on"] [data-psb-zoom] {
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(calc(1.06 * var(--psb-ps, 1)))
    rotate(var(--psb-pr, 0deg));
  transition: transform 1200ms var(--psb-ease-expo);
  will-change: transform;
}

/* Estado final do reveal já entrega o zoom, sem salto ao limpar o atributo. */
[data-psb="on"] [data-psb-reveal][data-psb-in][data-psb-zoom] {
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(calc(1.06 * var(--psb-ps, 1)))
    rotate(var(--psb-pr, 0deg));
}

/* Base: qualquer nó com parallax (exceto camadas .psb-* e zoom). */
[data-psb="on"] [data-psb-parallax]:not([data-psb-zoom]):not([class*="psb-"]) {
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(var(--psb-ps, 1))
    rotate(var(--psb-pr, 0deg));
  will-change: transform;
}

/* Variantes — só alteram a sensação visual; o deslocamento vem das CSS vars. */
[data-psb="on"] [data-psb-parallax="float"] {
  transition: transform 900ms var(--psb-ease);
}

[data-psb="on"] [data-psb-parallax="drift"] {
  transition: transform 700ms var(--psb-ease);
}

[data-psb="on"] [data-psb-parallax="depth"] {
  transition: transform 1100ms var(--psb-ease-expo);
}

[data-psb="on"] [data-psb-parallax="slide"] {
  transition: transform 850ms var(--psb-ease);
}

[data-psb="on"] [data-psb-parallax="tilt"] {
  transform-origin: center bottom;
  transition: transform 950ms var(--psb-ease-expo);
}

[data-psb="on"] [data-psb-parallax="orbit"] {
  transition: transform 1200ms var(--psb-ease-expo);
}

/* ==================================================================
 * Tipografia — entrada palavra a palavra
 * ================================================================ */

/* A máscara usa clip-path em vez de overflow: assim não há padding nem
   margem negativa, o baseline é preservado e o layout do título não muda.
   A folga vertical deixa acentos e descidas (ã, ç, g) sempre visíveis. */
[data-psb="on"] .psb-word {
  display: inline-block;
  clip-path: inset(-0.3em -0.08em -0.18em -0.08em);
}

[data-psb="on"] .psb-word-in {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  opacity: 0;
  transition:
    transform 820ms var(--psb-ease-expo) var(--psb-delay),
    opacity 620ms linear var(--psb-delay);
  will-change: transform;
}

[data-psb="on"] [data-psb-split-in] .psb-word-in {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* ==================================================================
 * Header inteligente + progresso de leitura
 * ================================================================ */

[data-psb="on"] header {
  transition:
    transform 520ms var(--psb-ease-expo),
    background-color 420ms var(--psb-ease),
    backdrop-filter 420ms var(--psb-ease),
    box-shadow 420ms var(--psb-ease);
  will-change: transform;
}

[data-psb="on"][data-psb-scroll="past"] header {
  background-color: rgba(10, 22, 40, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgba(245, 197, 24, 0.16), 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

[data-psb="on"][data-psb-scroll="past"] header > div {
  height: 4rem;
  transition: height 420ms var(--psb-ease-expo);
}

@media (min-width: 1024px) {
  [data-psb="on"][data-psb-scroll="past"] header > div { height: 4.75rem; }
}

[data-psb="on"] header > div { transition: height 420ms var(--psb-ease-expo); }
[data-psb="on"] header img { transition: transform 420ms var(--psb-ease-expo); }
[data-psb="on"][data-psb-scroll="past"] header img { transform: scale(0.88); transform-origin: left center; }

[data-psb="on"][data-psb-nav="hidden"] header { transform: translate3d(0, -100%, 0); }

/* Entrada do header no carregamento. */
[data-psb="on"][data-psb-intro="run"] header {
  animation: psb-header-in 900ms var(--psb-ease-expo) both;
}

@keyframes psb-header-in {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to { opacity: 1; transform: none; }
}

.psb-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  transform: scaleX(var(--psb-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(245, 197, 24, 0), var(--psb-gold));
  opacity: 0;
  transition: opacity 400ms var(--psb-ease);
}

[data-psb="on"][data-psb-scroll="past"] .psb-progress { opacity: 1; }

/* Microinteração dos links de navegação. */
[data-psb="on"] [data-psb-navlink] { position: relative; }

[data-psb="on"] [data-psb-navlink]::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 1px;
  background: var(--psb-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 380ms var(--psb-ease-expo);
}

@media (hover: hover) {
  [data-psb="on"] [data-psb-navlink]:hover::after { transform: scaleX(1); transform-origin: left center; }
}

[data-psb="on"] [data-psb-navlink]:focus-visible::after { transform: scaleX(1); }

/* ==================================================================
 * Hero cinematográfico
 * ================================================================ */

[data-psb="on"] [data-psb-hero] { isolation: isolate; }

/* Palco do carrossel nativo: ganha parallax e um leve avanço de escala para
   que o deslocamento nunca revele as bordas do vídeo. */
[data-psb="on"] [data-psb-herostage] {
  transform: translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0) scale(calc(1.12 * var(--psb-ps, 1)));
  will-change: transform;
}

[data-psb="on"] [data-psb-herostage] video {
  transform: scale(1.02) translate3d(
    calc(var(--psb-mx, 0) * -16px),
    calc(var(--psb-my, 0) * -16px),
    0
  );
  transition: transform 900ms var(--psb-ease), opacity 1800ms ease-in-out;
}

/* Os overlays originais são muito opacos para um hero cinematográfico:
   reequilibrados para revelar o vídeo mantendo o contraste do texto. */
[data-psb="on"] [data-psb-hero] .gradient-hero {
  background: linear-gradient(
    100deg,
    rgba(5, 14, 28, 0.94) 0%,
    rgba(7, 20, 40, 0.8) 40%,
    rgba(10, 22, 40, 0.44) 74%,
    rgba(10, 22, 40, 0.66) 100%
  );
}

[data-psb="on"] [data-psb-hero] .bg-navy-950\/45 { background-color: rgba(10, 22, 40, 0.16); }
[data-psb="on"] [data-psb-hero] .bg-grid-pattern { opacity: 0.7; }

.psb-hero-scrim,
.psb-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Vinheta e emenda suave com a seção seguinte. */
.psb-hero-scrim {
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(5, 14, 28, 0.5) 100%),
    linear-gradient(to top, var(--psb-navy) 1%, rgba(10, 22, 40, 0) 26%);
}

.psb-hero-glow {
  background:
    radial-gradient(46% 42% at 78% 26%, rgba(245, 197, 24, 0.14), transparent 68%),
    radial-gradient(38% 40% at 12% 82%, rgba(36, 61, 110, 0.35), transparent 70%);
  transform: translate3d(
    calc(var(--psb-mx, 0) * 26px),
    calc(var(--psb-my, 0) * 26px),
    0
  );
  transition: transform 1400ms var(--psb-ease);
}

@media (max-width: 767px) {
  .psb-hero-scrim {
    background: linear-gradient(180deg, rgba(5, 14, 28, 0.55) 0%, rgba(7, 20, 40, 0.35) 45%, var(--psb-navy) 100%);
  }
}

/* Abertura: o vídeo entra em cena com um avanço lento de escala. */
[data-psb="on"] [data-psb-herostage] {
  opacity: 0;
  transition: opacity 1400ms var(--psb-ease-expo);
}

[data-psb="on"] [data-psb-herostage][data-psb-stage-in] {
  opacity: 1;
  animation: psb-hero-in 2200ms var(--psb-ease-expo) both;
}

@keyframes psb-hero-in {
  from { transform: translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0) scale(1.24); }
  to { transform: translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0) scale(calc(1.12 * var(--psb-ps, 1))); }
}

/* ==================================================================
 * Seções — profundidade e continuidade
 * ================================================================ */

[data-psb="on"] [data-psb-section] { position: relative; }

[data-psb="on"] [data-psb-tech]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(245, 197, 24, 0.07), transparent 70%);
}

.psb-tech-layer {
  position: absolute;
  inset: -10% 0 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 0);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(var(--psb-ps, 1));
  will-change: transform;
}

/* Camadas de profundidade por seção — cada uma com textura e ritmo próprios. */
.psb-depth-layer {
  position: absolute;
  inset: -12% -4%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(var(--psb-ps, 1))
    rotate(var(--psb-pr, 0deg));
}

[data-psb="on"] [data-psb-depth] > *:not(.psb-depth-layer) {
  position: relative;
  z-index: 1;
}

.psb-depth-aurora {
  background:
    radial-gradient(55% 45% at 15% 20%, rgba(245, 197, 24, 0.08), transparent 70%),
    radial-gradient(40% 50% at 90% 80%, rgba(36, 61, 110, 0.35), transparent 68%);
}

.psb-depth-rays {
  background:
    linear-gradient(115deg, transparent 40%, rgba(245, 197, 24, 0.045) 50%, transparent 60%),
    linear-gradient(65deg, transparent 35%, rgba(255, 255, 255, 0.03) 48%, transparent 62%);
}

.psb-depth-mesh {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 0);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 20%, transparent 75%);
  opacity: 0.9;
}

.psb-depth-glow {
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(245, 197, 24, 0.1), transparent 70%);
}

.psb-depth-veil {
  background:
    linear-gradient(180deg, rgba(245, 197, 24, 0.04), transparent 40%, rgba(13, 26, 48, 0.25) 100%);
}

.psb-depth-soft {
  background:
    radial-gradient(60% 50% at 80% 30%, rgba(36, 61, 110, 0.28), transparent 70%);
}

.psb-depth-pulse {
  background:
    radial-gradient(45% 40% at 20% 60%, rgba(245, 197, 24, 0.07), transparent 65%),
    radial-gradient(50% 45% at 85% 20%, rgba(36, 61, 110, 0.3), transparent 70%);
}

/* ==================================================================
 * Cards — profundidade no hover
 * ================================================================ */

@media (hover: hover) and (pointer: fine) {
  [data-psb="on"] [data-psb-card] {
    transition:
      transform 480ms var(--psb-ease-expo),
      border-color 380ms var(--psb-ease),
      box-shadow 480ms var(--psb-ease);
  }

  [data-psb="on"] [data-psb-card]:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(245, 197, 24, 0.22);
  }

  /* Capacidades técnicas usa o modelo zoom/blur — não aplicar lift do motion */
  [data-psb="on"] .psb-cap-card[data-psb-card]:hover,
  [data-psb="on"] .psb-cap-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Ícone dos serviços reage ao card. */
  [data-psb="on"] [data-psb-card] > div:first-child {
    transition: transform 520ms var(--psb-ease-expo), background-color 380ms var(--psb-ease);
  }

  [data-psb="on"] [data-psb-card]:hover > div:first-child.mb-5 {
    transform: translate3d(0, -2px, 0) scale(1.06);
  }
}

/* ==================================================================
 * Botões e microinterações
 * ================================================================ */

[data-psb="on"] [data-psb-btn] {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--psb-mag-x, 0px), var(--psb-mag-y, 0px), 0);
  transition:
    transform 420ms var(--psb-ease-expo),
    box-shadow 380ms var(--psb-ease),
    background-color 300ms var(--psb-ease),
    border-color 300ms var(--psb-ease);
}

[data-psb="on"] [data-psb-btn]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg) translate3d(0, 0, 0);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  [data-psb="on"] [data-psb-btn]:hover {
    box-shadow: 0 16px 34px -18px rgba(245, 197, 24, 0.6);
  }

  [data-psb="on"] [data-psb-btn]:hover::before {
    opacity: 1;
    animation: psb-shine 900ms var(--psb-ease-expo);
  }
}

[data-psb="on"] [data-psb-btn]:active {
  transform: translate3d(var(--psb-mag-x, 0px), var(--psb-mag-y, 0px), 0) scale(0.975);
}

[data-psb="on"] [data-psb-btn] > * { position: relative; }

@keyframes psb-shine {
  from { left: -60%; }
  to { left: 130%; }
}

/* ==================================================================
 * Cursor de acento (desktop, aditivo ao cursor nativo)
 * ================================================================ */

.psb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 197, 24, 0.55);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 300ms var(--psb-ease),
    width 320ms var(--psb-ease-expo),
    height 320ms var(--psb-ease-expo),
    background-color 320ms var(--psb-ease),
    border-color 320ms var(--psb-ease);
  will-change: transform;
}

.psb-cursor[data-psb-visible] { opacity: 1; }

.psb-cursor[data-psb-hot] {
  width: 52px;
  height: 52px;
  background-color: rgba(245, 197, 24, 0.1);
  border-color: rgba(245, 197, 24, 0.85);
}

.psb-cursor[data-psb-press] {
  width: 26px;
  height: 26px;
  background-color: rgba(245, 197, 24, 0.2);
}

[data-psb-touch] .psb-cursor { display: none; }

/* ==================================================================
 * CTA final
 * ================================================================ */

/* CTA vídeo full-screen desativado */
.psb-cta-media {
  display: none !important;
}

.psb-cta-media--legacy {
  position: absolute;
  inset: -8% 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1600ms var(--psb-ease-expo);
  transform:
    translate3d(var(--psb-px, 0px), var(--psb-py, 0px), 0)
    scale(calc(1.08 * var(--psb-ps, 1)));
  will-change: transform, opacity;
}

.psb-cta-media video {
  display: none !important;
}

/* ==================================================================
 * Ajustes de conteúdo — indicadores do hero
 * ================================================================ */

#inicio .mt-20 > div > p:first-child {
  font-size: 3rem;
  line-height: 1.1;
}

@media (min-width: 768px) {
  #inicio .mt-20 > div > p:first-child { font-size: 3.75rem; }
}

#inicio .mt-20 > div > p:nth-child(2) {
  font-size: 1.5rem;
  line-height: 1.25;
}

/* ==================================================================
 * Responsividade e acessibilidade
 * ================================================================ */

/* Tablet: mantém o motion, reduz amplitude. */
@media (max-width: 1023px) {
  [data-psb="on"] [data-psb-reveal="rise"] { transform: translate3d(0, 30px, 0) scale(0.99); }
  [data-psb="on"] [data-psb-herostage],
  [data-psb="on"] [data-psb-herostage][data-psb-stage-in] {
    transform: none;
    animation: none;
  }

  [data-psb="on"] [data-psb-herostage] video { transform: none; }
  [data-psb="on"] .psb-depth-mesh,
  [data-psb="on"] .psb-depth-rays { opacity: 0.55; }
}

/* Mobile: prioriza performance e leitura. */
@media (max-width: 767px) {
  :root { --psb-dur: 640ms; }
  [data-psb="on"] .psb-tech-layer,
  [data-psb="on"] .psb-depth-layer { display: none; }
  [data-psb="on"] [data-psb-zoom],
  [data-psb="on"] [data-psb-parallax] { transform: none !important; }
  [data-psb="on"] [data-psb-reveal="clip-up"],
  [data-psb="on"] [data-psb-reveal="clip-right"] { transform: none; }
}

/* Preferência do sistema por menos movimento: nada se move, tudo aparece. */
@media (prefers-reduced-motion: reduce) {
  [data-psb] [data-psb-reveal],
  [data-psb] .psb-word-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  [data-psb] [data-psb-zoom],
  [data-psb] [data-psb-parallax],
  [data-psb] [data-psb-herostage],
  [data-psb] [data-psb-herostage] video,
  [data-psb] .psb-depth-layer,
  [data-psb] .psb-tech-layer { transform: none !important; animation: none !important; }

  .psb-cursor { display: none !important; }

  [data-psb] header,
  [data-psb] [data-psb-btn],
  [data-psb] [data-psb-card] { transition-duration: 1ms !important; animation: none !important; }

  [data-psb][data-psb-nav="hidden"] header { transform: none !important; }
}

/* Foco acessível, sem “caixa” amarela grossa em todo o texto. */
[data-psb="on"] a:focus-visible,
[data-psb="on"] button:focus-visible {
  outline: 2px solid rgba(245, 197, 24, 0.65);
  outline-offset: 3px;
}

[data-psb="on"] h1:focus,
[data-psb="on"] h2:focus,
[data-psb="on"] h3:focus,
[data-psb="on"] h4:focus,
[data-psb="on"] p:focus,
[data-psb="on"] span:focus,
[data-psb="on"] li:focus,
[data-psb="on"] [data-robot-item]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Esconde botão flutuante verde do WhatsApp */
a.fixed.right-6.bottom-6.bg-green-500,
a[aria-label="Fale conosco pelo WhatsApp"],
a[href^="https://wa.me/"].fixed.right-6.bottom-6 {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}