/* ==========================================================================
   RJC Soluções Digitais — Camada de Animação & Interatividade
   Carregado DEPOIS de styles.css (sobrescreve estados de hover/transform)
   Tudo respeita prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-dur: 0.85s;
}

/* ==========================================================================
   1. SISTEMA BASE DE REVELAÇÃO NO SCROLL
   Só esconde elementos se o JS estiver ativo (.anim-ready no <html>)
   ========================================================================== */
.anim-ready [data-anim] {
  opacity: 0;
  transition:
    opacity var(--anim-dur) var(--ease-out-expo),
    transform var(--anim-dur) var(--ease-out-expo),
    filter var(--anim-dur) var(--ease-out-expo),
    clip-path 1.1s var(--ease-out-expo);
  transition-delay: var(--anim-delay, 0ms);
  will-change: transform, opacity;
}

.anim-ready [data-anim="fade"]        { transform: none; }
.anim-ready [data-anim="fade-up"]     { transform: translate3d(0, 34px, 0); }
.anim-ready [data-anim="fade-down"]   { transform: translate3d(0, -26px, 0); }
.anim-ready [data-anim="fade-left"]   { transform: translate3d(-42px, 0, 0); }
.anim-ready [data-anim="fade-right"]  { transform: translate3d(42px, 0, 0); }
.anim-ready [data-anim="zoom-in"]     { transform: scale(0.9); }
.anim-ready [data-anim="pop"]         { transform: scale(0.82) translate3d(0, 14px, 0); }
.anim-ready [data-anim="blur-in"]     { transform: translate3d(0, 20px, 0); filter: blur(10px); }
.anim-ready [data-anim="reveal-img"]  { 
  clip-path: inset(0 0 100% 0); 
  transform: scale(1.04); 
  transition: opacity 0.45s var(--ease-out-expo), transform 0.45s var(--ease-out-expo), clip-path 0.45s var(--ease-out-expo);
}
.anim-ready [data-anim="card-rise"]   { transform: translate3d(0, 48px, 0) scale(0.97); }

.anim-ready [data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
}

/* Elementos "pop" ganham um leve overshoot */
.anim-ready [data-anim="pop"].is-visible {
  transition-timing-function: var(--ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  .anim-ready [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   2. KEYFRAMES GLOBAIS
   ========================================================================== */
@keyframes rjc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes rjc-shimmer {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  60%  { transform: translateX(220%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

@keyframes rjc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

@keyframes rjc-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  33%  { transform: translate3d(-6%, 5%, 0) scale(1.12); opacity: 1; }
  66%  { transform: translate3d(5%, -4%, 0) scale(0.95); opacity: 0.6; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
}

@keyframes rjc-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(240, 203, 29, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(240, 203, 29, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 203, 29, 0); }
}

@keyframes rjc-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

@keyframes rjc-spin {
  to { transform: rotate(360deg); }
}

@keyframes rjc-ripple {
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes rjc-gradient-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rjc-shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

@keyframes rjc-slide-in-right {
  from { opacity: 0; transform: translate3d(46px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rjc-slide-in-left {
  from { opacity: 0; transform: translate3d(-46px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rjc-pop-in {
  0%   { opacity: 0; transform: scale(0.9) translate3d(0, 16px, 0); }
  100% { opacity: 1; transform: none; }
}

@keyframes rjc-scroll-hint {
  0%   { opacity: 0; transform: translateY(-6px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes rjc-check-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes rjc-confetti-fall {
  0%   { opacity: 1; transform: translate3d(0, -12vh, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--cx, 0px), 105vh, 0) rotate(var(--cr, 720deg)); }
}

@keyframes rjc-fade-in-up-soft {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. BARRA DE ANÚNCIO — MARQUEE INFINITO
   ========================================================================== */
.announcement-bar {
  overflow: hidden;
  position: relative;
  background-size: 220% 100%;
  animation: rjc-gradient-pan 14s ease-in-out infinite;
}

.announcement-bar.is-marquee { padding-left: 0; padding-right: 0; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: rjc-marquee 26s linear infinite;
}

.announcement-bar:hover .marquee-track { animation-play-state: paused; }

.marquee-track .announcement-text {
  padding-right: 3rem;
  white-space: nowrap;
}

.marquee-track .announcement-text::after {
  content: "✦";
  margin-left: 3rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   4. HEADER REATIVO AO SCROLL
   ========================================================================== */
.site-header {
  transition:
    padding 0.35s var(--ease-out-expo),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background-color: rgba(9, 9, 11, 0.82);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.rjc-logo-img {
  transition: transform 0.4s var(--ease-spring), filter 0.4s ease;
}

.site-header.is-scrolled .rjc-logo-img { transform: scale(0.88); }

.brand-logo-group a:hover .rjc-logo-img {
  transform: scale(1.06) rotate(-1.5deg);
  filter: drop-shadow(0 4px 16px rgba(240, 203, 29, 0.65));
}

/* Barra de progresso de leitura (injetada via JS) */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.read-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--color-gradient-rjc);
  box-shadow: 0 0 14px rgba(240, 203, 29, 0.7);
  transform-origin: left center;
  transition: width 0.12s linear;
}

/* ==========================================================================
   5. HERO — AURORA DE FUNDO + TÍTULO PALAVRA A PALAVRA
   ========================================================================== */
.hero-section { overflow: hidden; isolation: isolate; }

.hero-section::before,
.hero-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}

.hero-section::before {
  width: 520px;
  height: 520px;
  top: -140px;
  right: -80px;
  background: radial-gradient(circle, rgba(0, 62, 189, 0.55) 0%, transparent 70%);
  animation: rjc-aurora 16s ease-in-out infinite;
}

.hero-section::after {
  width: 420px;
  height: 420px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(240, 203, 29, 0.28) 0%, transparent 70%);
  animation: rjc-aurora 21s ease-in-out infinite reverse;
}

/* Parallax suave aplicado via JS (--py) */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* Split de palavras do título */
.word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0) rotate(3deg);
  transition:
    opacity 0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
  transition-delay: var(--word-delay, 0ms);
}

.is-visible .word,
.word.is-visible {
  opacity: 1;
  transform: none;
}

/* Brilho contínuo no destaque dourado */
.text-gold-highlight {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    100deg,
    var(--color-rjc-gold) 0%,
    #fff6c2 45%,
    var(--color-rjc-gold) 60%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rjc-gradient-pan 6s ease-in-out infinite 1.2s;
}

/* Badge do hero */
.hero-badge {
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}
.hero-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240, 203, 29, 0.28);
}
.hero-badge > span:first-child {
  animation: rjc-pulse-ring 2.6s ease-out infinite;
  border-radius: 50%;
}

/* Bullets do hero */
.hero-bullet-item {
  transition: transform 0.3s var(--ease-out-expo), color 0.3s ease;
}
.hero-bullet-item:hover { transform: translateX(6px); }
.hero-bullet-item:hover .bullet-icon {
  animation: rjc-arrow-nudge 0.6s ease-in-out;
  color: var(--color-rjc-gold);
}
.bullet-icon {
  transition: color 0.3s ease, transform 0.3s var(--ease-spring);
  display: inline-block;
}

/* Indicador de rolagem */
.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  z-index: 2;
}
.scroll-hint__track {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  position: relative;
}
.scroll-hint__dot {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-rjc-gold);
  animation: rjc-scroll-hint 2s ease-in-out infinite;
}

/* ==========================================================================
   6. FORMULÁRIO — MICROINTERAÇÕES
   ========================================================================== */
.form-card {
  transition:
    transform 0.5s var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo);
}
.form-card:hover {
  box-shadow: 0 32px 64px -14px rgba(0, 82, 255, 0.5);
}
/* Aplicável a qualquer bloco que precise sinalizar erro */
.is-shaking { animation: rjc-shake 0.55s ease-in-out; }

.form-group { position: relative; }

.form-label {
  transition: color 0.25s ease, transform 0.25s var(--ease-out-expo);
  transform-origin: left center;
}

.form-group:focus-within .form-label {
  color: var(--color-rjc-blue-electric);
  transform: translateX(3px);
}

.lf-input,
.phone-input {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s var(--ease-out-expo);
}

.lf-input:hover { border-color: #9ca3af; }

.lf-input:focus { transform: translateY(-1px); }

.phone-group {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-out-expo);
}
.phone-group:focus-within {
  border-color: var(--color-rjc-blue-electric);
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25);
  transform: translateY(-1px);
}
.phone-prefix { transition: background-color 0.25s ease, color 0.25s ease; }
.phone-group:focus-within .phone-prefix {
  background-color: rgba(0, 102, 255, 0.1);
  color: var(--color-rjc-blue);
}

/* Campo preenchido corretamente ganha um "tique" verde discreto */
.form-group.is-filled::after {
  content: "✓";
  position: absolute;
  right: 0.85rem;
  bottom: 0.7rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #16a34a;
  animation: rjc-pop-in 0.35s var(--ease-spring) both;
  pointer-events: none;
}
.form-group.is-filled:has(select)::after { right: 2.1rem; }

.field-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
  animation: rjc-shake 0.45s ease-in-out;
}

/* ==========================================================================
   7. BOTÕES — SHIMMER, MAGNÉTICO, RIPPLE, LOADING
   ========================================================================== */
.btn-cta,
.btn-rjc-gold {
  position: relative;
  overflow: hidden;
  background-size: 180% 180%;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - var(--lift, 0px)), 0);
  transition:
    transform 0.28s var(--ease-out-expo),
    box-shadow 0.3s ease,
    filter 0.3s ease,
    background-position 0.6s ease;
}

.btn-cta > *,
.btn-rjc-gold > * { position: relative; z-index: 2; }

/* Brilho que atravessa o botão */
.btn-cta::after,
.btn-rjc-gold::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 0;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.38),
    transparent
  );
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}

.btn-cta:hover::after,
.btn-rjc-gold:hover::after {
  animation: rjc-shimmer 0.9s ease-out;
}

.btn-cta:hover,
.btn-rjc-gold:hover {
  --lift: 3px;
  filter: brightness(1.1);
  background-position: 100% 50%;
}

.btn-cta:active,
.btn-rjc-gold:active { --lift: 0px; transform: scale(0.98); }

.btn-cta:focus-visible,
.btn-rjc-gold:focus-visible {
  outline: 2px solid var(--color-rjc-gold);
  outline-offset: 3px;
}

/* Pulso de atenção no CTA principal quando entra em tela.
   Mantém a sombra base do botão dentro do keyframe para não "apagá-la". */
@keyframes rjc-cta-pulse {
  0% {
    box-shadow: 0 8px 22px rgba(0, 51, 160, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25),
                0 0 0 0 rgba(240, 203, 29, 0.5);
  }
  70% {
    box-shadow: 0 8px 22px rgba(0, 51, 160, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25),
                0 0 0 18px rgba(240, 203, 29, 0);
  }
  100% {
    box-shadow: 0 8px 22px rgba(0, 51, 160, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25),
                0 0 0 0 rgba(240, 203, 29, 0);
  }
}

.btn-cta.is-attention { animation: rjc-cta-pulse 2.2s ease-out 3; }
.btn-cta.is-attention:hover { animation: none; }

.btn-arrow { transition: transform 0.3s var(--ease-spring); }
.btn-cta:hover .btn-arrow,
.btn-rjc-gold:hover .btn-arrow { transform: translateX(5px); }

/* Ripple no clique */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transform: scale(0);
  pointer-events: none;
  z-index: 1;
  animation: rjc-ripple 0.65s ease-out forwards;
}

/* Estado de carregamento */
.btn-loading { pointer-events: none; opacity: 0.9; }
.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: rjc-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ==========================================================================
   8. BIO — IMAGEM COM ZOOM + LEGENDA
   ========================================================================== */
.founder-img-wrapper {
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s ease;
}
.founder-img-wrapper:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px rgba(0, 0, 0, 0.62), 0 0 40px rgba(0, 62, 189, 0.25);
}
.founder-img {
  transition: transform 1.1s var(--ease-out-expo), filter 0.6s ease;
}
.founder-img-wrapper:hover .founder-img {
  transform: scale(1.07);
  filter: saturate(1.12);
}
/* --- Marcadores "quem é quem" sobre a foto --- */

/* A camada acompanha exatamente o zoom da imagem, mantendo os pontos alinhados
   às pessoas mesmo durante o hover. */
.founder-tag-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: transform 1.1s var(--ease-out-expo);
}
.founder-img-wrapper:hover .founder-tag-layer { transform: scale(1.07); }

.photo-tag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Entrada escalonada, disparada quando a foto é revelada */
@keyframes rjc-tag-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.anim-ready .photo-tag { opacity: 0; }
.anim-ready .founder-img-wrapper.is-visible .photo-tag {
  animation: rjc-tag-in 0.5s var(--ease-spring) both;
}
.anim-ready .founder-img-wrapper.is-visible .photo-tag:nth-child(1) { animation-delay: 0.75s; }
.anim-ready .founder-img-wrapper.is-visible .photo-tag:nth-child(2) { animation-delay: 0.9s; }
.anim-ready .founder-img-wrapper.is-visible .photo-tag:nth-child(3) { animation-delay: 1.05s; }

.photo-tag__dot {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-rjc-gold);
  border: 2px solid rgba(9, 9, 11, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s var(--ease-spring), background-color 0.3s ease;
}

/* Halo pulsante para sinalizar que o ponto é clicável */
.photo-tag__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--color-rjc-gold);
  opacity: 0.55;
  animation: rjc-tag-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes rjc-tag-ping {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.photo-tag:hover .photo-tag__dot,
.photo-tag.is-open .photo-tag__dot { transform: scale(1.35); }
.photo-tag.is-open .photo-tag__dot::after { animation: none; opacity: 0; }

.photo-tag:focus-visible {
  outline: 2px solid var(--color-rjc-gold);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Cartão com o nome, aparece acima do ponto */
.photo-tag__card {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  width: max-content;
  max-width: 190px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(9, 9, 11, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-rjc-gold-vibrant);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s var(--ease-out-expo),
    transform 0.28s var(--ease-spring),
    visibility 0.28s;
}

/* Setinha apontando para o ponto */
.photo-tag__card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--color-rjc-gold-vibrant);
}

.photo-tag:hover .photo-tag__card,
.photo-tag:focus-visible .photo-tag__card,
.photo-tag.is-open .photo-tag__card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.photo-tag__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
}

.photo-tag__role {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-rjc-gold);
  line-height: 1.25;
}

/* Em telas estreitas o cartão precisa caber sem estourar a foto */
@media (max-width: 480px) {
  .photo-tag__card { max-width: 150px; padding: 0.4rem 0.6rem; }
  .photo-tag__name { font-size: 0.74rem; white-space: normal; }
  .photo-tag__role { font-size: 0.6rem; }
}

.founder-caption {
  z-index: 4;
  transition: transform 0.5s var(--ease-out-expo), border-color 0.4s ease;
}
.founder-img-wrapper:hover .founder-caption {
  transform: translateY(-4px);
  border-color: var(--color-rjc-gold);
}

.bio-highlight-card {
  transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.bio-highlight-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-rjc-gold);
  box-shadow: 0 0 32px rgba(0, 102, 255, 0.3);
}

.section-tag { position: relative; display: inline-block; }
.section-tag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 0;
  background: var(--color-gradient-rjc);
  transition: width 1s var(--ease-out-expo) 0.25s;
}
.anim-ready [data-anim].is-visible .section-tag::after,
.anim-ready .section-tag[data-anim].is-visible::after { width: 100%; }

/* ==========================================================================
   9. NÚMEROS / STATS
   ========================================================================== */
.stat-box {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease-out-expo),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.stat-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(240, 203, 29, 0.12), transparent);
  transform: translateX(-100%);
  transition: transform 0.8s var(--ease-out-expo);
}
.stat-box:hover::before { transform: translateX(100%); }
.stat-box:hover {
  transform: translateX(8px);
  border-color: var(--color-rjc-gold);
  box-shadow: 0 12px 30px rgba(0, 51, 160, 0.3);
}
.stat-number {
  font-variant-numeric: tabular-nums;
  transition: text-shadow 0.4s ease;
}
.stat-box:hover .stat-number { text-shadow: 0 0 22px rgba(255, 229, 0, 0.6); }

/* ==========================================================================
   10. DEPOIMENTOS — CARROSSEL
   ========================================================================== */
.testimonial-card {
  position: relative;
  overflow: hidden;
  cursor: grab;
  transition:
    opacity 0.35s ease,
    transform 0.45s var(--ease-out-expo),
    box-shadow 0.45s ease;
}
.testimonial-card:active { cursor: grabbing; }
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.55);
}
#testimonial-inner {
  transition: opacity 0.28s ease, transform 0.28s var(--ease-out-expo);
}
#testimonial-inner.is-swapping-out {
  opacity: 0;
  transform: translateX(var(--swap-dir, -26px));
}
#testimonial-inner.is-swapping-in {
  animation: rjc-pop-in 0.45s var(--ease-out-expo) both;
}

#testimonial-avatar {
  transition: transform 0.45s var(--ease-spring), box-shadow 0.45s ease;
}
.testimonial-card:hover #testimonial-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(240, 203, 29, 0.5);
}

.dot { transition: width 0.4s var(--ease-spring), background-color 0.35s ease, opacity 0.3s ease; }
.dot:hover { opacity: 0.85; transform: scaleY(1.4); }

#prev-testimonial,
#next-testimonial {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s var(--ease-spring),
    color 0.3s ease;
}
#prev-testimonial:hover,
#next-testimonial:hover {
  background-color: var(--color-rjc-gold);
  border-color: var(--color-rjc-gold);
  color: #09090b;
  transform: scale(1.12);
}
#prev-testimonial:active,
#next-testimonial:active { transform: scale(0.94); }

/* Barra de autoplay */
.testimonial-autoplay {
  height: 2px;
  width: 100%;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.testimonial-autoplay__bar {
  height: 100%;
  width: 0%;
  background: var(--color-gradient-rjc);
  border-radius: 999px;
}

/* ==========================================================================
   11. PILARES — CARDS COM TILT E ZOOM
   ========================================================================== */
.pillar-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.45s var(--ease-out-expo),
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    background-color 0.45s ease;
}

/* Brilho que segue o cursor (--gx/--gy setados via JS) */
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    360px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(240, 203, 29, 0.14),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}
.pillar-card:hover::before { opacity: 1; }
.pillar-card > * { position: relative; z-index: 2; }

.pillar-card:hover {
  border-color: rgba(240, 203, 29, 0.55);
  background-color: var(--color-card-elevated);
  box-shadow: 0 28px 55px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 62, 189, 0.18);
}

.pillar-img-wrapper { position: relative; }
.pillar-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(9, 9, 11, 0.75) 100%);
  opacity: 0.55;
  transition: opacity 0.5s ease;
}
.pillar-card:hover .pillar-img-wrapper::after { opacity: 0.15; }

.pillar-img { transition: transform 1s var(--ease-out-expo), filter 0.6s ease; }
.pillar-card:hover .pillar-img { transform: scale(1.09); filter: saturate(1.15); }

.pillar-card h3 { transition: color 0.35s ease; }
.pillar-card:hover h3 { color: var(--color-rjc-gold); }

.pillar-list li {
  transition: transform 0.4s var(--ease-out-expo), color 0.35s ease;
}
.pillar-card:hover .pillar-list li { color: #ffffff; }
.pillar-card:hover .pillar-list li:nth-child(1) { transform: translateX(5px); transition-delay: 0.03s; }
.pillar-card:hover .pillar-list li:nth-child(2) { transform: translateX(5px); transition-delay: 0.08s; }
.pillar-card:hover .pillar-list li:nth-child(3) { transform: translateX(5px); transition-delay: 0.13s; }

.pillar-dash { transition: width 0.4s var(--ease-spring), background-color 0.35s ease; }
.pillar-card:hover .pillar-dash { width: 22px; background-color: var(--color-rjc-gold); }

/* Banner de estímulo */
.stimuli-banner {
  background-size: 200% 200%;
  animation: rjc-gradient-pan 12s ease-in-out infinite;
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}
.stimuli-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(0, 82, 255, 0.5);
}

/* ==========================================================================
   12. CTA FINAL + RODAPÉ
   ========================================================================== */
.cta-section { position: relative; overflow: hidden; }
.cta-section::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  left: 50%;
  top: 50%;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 62, 189, 0.22) 0%, transparent 65%);
  filter: blur(70px);
  animation: rjc-aurora 18s ease-in-out infinite;
  pointer-events: none;
}
.cta-section > * { position: relative; z-index: 1; }

.site-footer img { transition: transform 0.4s var(--ease-spring), filter 0.4s ease; }
.site-footer img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 3px 12px rgba(240, 203, 29, 0.6));
}

/* Botão voltar ao topo (injetado via JS) */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-rjc-gold-vibrant);
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(10px);
  color: var(--color-rjc-gold);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.85);
  transition:
    opacity 0.4s var(--ease-out-expo),
    transform 0.4s var(--ease-spring),
    visibility 0.4s,
    background-color 0.3s ease,
    color 0.3s ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover {
  background: var(--color-rjc-gold);
  color: #09090b;
  transform: translateY(-3px) scale(1.06);
}

/* ==========================================================================
   13. TRANSIÇÃO DE PÁGINA
   ========================================================================== */
.page-fade {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #09090b;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s ease;
}
.page-fade.is-active { opacity: 1; pointer-events: all; }

/* Entrada geral da página — só opacidade, para não criar containing block
   em elementos position:fixed (barra de progresso, voltar ao topo, overlay). */
@keyframes rjc-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: rjc-page-in 0.5s ease both; }

/* ==========================================================================
   14. PÁGINA DE APLICAÇÃO (aplicacao.html)
   ========================================================================== */
.progress-bar-fill {
  position: relative;
  overflow: hidden;
  transition: width 0.65s var(--ease-out-expo);
}
.progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: translateX(-100%);
  animation: rjc-shimmer 2.4s ease-in-out infinite;
}

.form-step-block.step-in-right { animation: rjc-slide-in-right 0.5s var(--ease-out-expo) both; }
.form-step-block.step-in-left  { animation: rjc-slide-in-left 0.5s var(--ease-out-expo) both; }

/* Perguntas entram escalonadas */
.form-step-block.step-in-right .app-question-block,
.form-step-block.step-in-left .app-question-block,
.form-step-block.step-in-right > h1,
.form-step-block.step-in-right > h2,
.form-step-block.step-in-left > h2,
.form-step-block.step-in-right > p,
.form-step-block.step-in-right .option-cards-group,
.form-step-block.step-in-left .option-cards-group {
  animation: rjc-fade-in-up-soft 0.55s var(--ease-out-expo) both;
}
.form-step-block .app-question-block:nth-of-type(1) { animation-delay: 0.06s; }
.form-step-block .app-question-block:nth-of-type(2) { animation-delay: 0.14s; }
.form-step-block .app-question-block:nth-of-type(3) { animation-delay: 0.22s; }

.app-input-dark:hover { border-color: rgba(255, 255, 255, 0.32); }
.app-input-dark:focus { transform: translateY(-1px); }
.app-input-dark { transition: all 0.25s var(--ease-out-expo); }

.option-card-radio {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.option-card-radio:hover { transform: translateX(5px); }
.option-card-radio:active { transform: scale(0.985); }
.option-card-radio.selected {
  animation: rjc-pop-in 0.35s var(--ease-spring);
}
.radio-inner-dot { transition: transform 0.3s var(--ease-spring); }
.option-card-radio.selected .radio-inner-dot { animation: rjc-pop-in 0.3s var(--ease-spring); }

/* Mensagem de erro inline (substitui alert) */
.form-toast {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translate(-50%, 24px);
  z-index: 200;
  max-width: 90vw;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  background: rgba(24, 24, 28, 0.96);
  border: 1px solid rgba(220, 38, 38, 0.55);
  color: #fecaca;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-spring);
}
.form-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.form-toast.is-success {
  border-color: rgba(240, 203, 29, 0.6);
  color: var(--color-rjc-gold);
}

/* ==========================================================================
   15. PÁGINA DE OBRIGADO — CHECK + CONFETE
   ========================================================================== */
.success-check {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.5rem;
  display: block;
}
.success-check__circle {
  stroke: var(--color-rjc-gold);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: rjc-check-draw 0.9s var(--ease-out-expo) 0.25s forwards;
}
.success-check__mark {
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: rjc-check-draw 0.45s var(--ease-out-expo) 0.95s forwards;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 150;
}
.confetti-piece {
  position: absolute;
  top: 0;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: rjc-confetti-fall var(--cd, 3.2s) cubic-bezier(0.3, 0.6, 0.7, 1) var(--cdelay, 0s) forwards;
}

.thankyou-card-box {
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}
.thankyou-card-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(0, 82, 255, 0.35);
}

/* ==========================================================================
   16. AJUSTES MOBILE / TOUCH
   ========================================================================== */
@media (hover: none) {
  .pillar-card::before { display: none; }
  .btn-cta::after, .btn-rjc-gold::after { display: none; }
  .scroll-hint { display: none; }
}

@media (max-width: 640px) {
  .back-to-top { right: 0.9rem; bottom: 0.9rem; width: 42px; height: 42px; }
  .hero-section::before { width: 320px; height: 320px; }
  .hero-section::after { width: 260px; height: 260px; }
}