/* ============================================================
   Prosperisa Mais Você — estilos complementares ao Tailwind
   Usado para: gradientes, formas decorativas, máscaras de foto,
   curva do gráfico e detalhes que o Tailwind puro não cobre bem.
   ============================================================ */

:root {
  --purple-900: #4b195b;
  --pink-500: #da3df5;
  --pink-400: #f08bff;
  --pink-300: #ec82fd;
  --pink-200: #f6c4ff;
  --pink-100: #f9d8ff;
  --pink-50: #f9eeff;
  --pink-input: #f7eef3;
  --green: #5cc85e;
  --green-border: #0de142;
  --page-bg: #f5f5f5;
  --border-gray: #ebebeb;
  --teal-faq: #15373b;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Ubuntu', sans-serif;
  background-color: var(--page-bg);
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* ---------- Botão CTA em gradiente (pill "Eu quero") ---------- */
.btn-gradient {
  background-image: linear-gradient(101deg, #db2ff6 0.4%, #f08eff 107.3%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(218, 61, 245, 0.55);
}

.btn-outline-green {
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-outline-green:hover {
  background-color: var(--green);
  color: #fff;
  border-color: var(--green);
}

.btn-solid-green {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-solid-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -6px rgba(92, 200, 94, 0.55);
}

/* ---------- Hero: fundo decorativo ---------- */
.hero-bg {
  background-color: var(--purple-900);
  background-image:
    radial-gradient(120% 140% at 78% 12%, rgba(218, 61, 245, 0.35), transparent 55%),
    url('../assets/images/hero-bg-shape.svg');
  background-repeat: no-repeat;
  background-position: right -10% top -30%, right top;
  background-size: 90% auto, cover;
}

/* ---------- Gráfico de rentabilidade animado (seção "Guardar pro futuro") ----------
   Sequência idêntica à do mockup de referência, só que disparada por scroll:
   fica pausada até o wrapper .reveal ganhar .is-visible (ver reveal ao rolar,
   mais abaixo), daí toda a coreografia (barras, números, linha do gráfico,
   halo pulsante, tags) roda com os mesmos tempos/atrasos do mockup. */
@keyframes pvGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes pvRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pvFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pvPop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pvHalo {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }

  70% {
    transform: scale(2.6);
    opacity: 0;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

@keyframes pvWipe {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.pv-seg {
  transform-origin: left center;
  animation: pvGrow 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-play-state: paused;
}

.pv-seg-1 {
  animation-delay: 0.15s;
}

.pv-seg-2 {
  animation-delay: 0.62s;
}

.pv-num {
  animation: pvRise 0.55s ease-out both;
  animation-play-state: paused;
}

.pv-num-1 {
  animation-delay: 0.3s;
}

.pv-num-2 {
  animation-delay: 0.72s;
}

.pv-note {
  animation: pvRise 0.55s ease-out 1s both;
  animation-play-state: paused;
}

.pv-reveal {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: pvWipe 2.2s cubic-bezier(0.32, 0, 0.18, 1) 1.25s both;
  animation-play-state: paused;
}

.pv-area {
  animation: pvFadeIn 1s ease-out 2.4s both;
  animation-play-state: paused;
}

.pv-endpoint {
  transform-box: fill-box;
  transform-origin: center;
  animation: pvPop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 3.3s both;
  animation-play-state: paused;
}

.pv-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: pvHalo 2.4s ease-out 3.8s infinite;
  animation-play-state: paused;
}

.pv-tag {
  animation: pvRise 0.5s ease-out both;
  animation-play-state: paused;
}

.pv-tag-1 {
  animation-delay: 3s;
}

.pv-tag-2 {
  animation-delay: 3.15s;
}

.pv-tag-3 {
  animation-delay: 3.35s;
}

.pv-chip {
  animation: pvPop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) 3.6s both;
  animation-play-state: paused;
}

.pv-start {
  animation: pvRise 0.5s ease-out 1.1s both;
  animation-play-state: paused;
}

/* Barras: crescem de baixo pra cima, depois o valor aparece */
@keyframes pvGrowY {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

.pv-bar {
  transform-origin: bottom center;
  animation: pvGrowY 0.9s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  animation-play-state: paused;
}

.pv-bar-1 {
  animation-delay: 0.15s;
}

.pv-bar-2 {
  animation-delay: 0.55s;
}

.pv-barval {
  animation: pvRise 0.5s ease-out 1s both;
  animation-play-state: paused;
}

.pv-barval-2 {
  animation-delay: 1.4s;
}

.reveal.is-visible .pv-seg,
.reveal.is-visible .pv-num,
.reveal.is-visible .pv-note,
.reveal.is-visible .pv-chip,
/* cada gráfico (barras / linha) anima quando ELE entra na tela */
.pv-gate.is-visible .pv-bar,
.pv-gate.is-visible .pv-barval,
.pv-gate.is-visible .pv-reveal,
.pv-gate.is-visible .pv-area,
.pv-gate.is-visible .pv-endpoint,
.pv-gate.is-visible .pv-halo,
.pv-gate.is-visible .pv-tag,
.pv-gate.is-visible .pv-start {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {

  .pv-seg,
  .pv-num,
  .pv-note,
  .pv-reveal,
  .pv-area,
  .pv-endpoint,
  .pv-tag,
  .pv-chip,
  .pv-bar,
  .pv-barval,
  .pv-start {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pv-halo {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- Blob decorativo atrás da foto (seção "Guardar pro futuro") ---------- */
.glow-blob {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 45%, rgba(218, 61, 245, 0.35), rgba(218, 61, 245, 0) 70%);
  filter: blur(10px);
  pointer-events: none;
}

/* ---------- Rodapé / seção FAQ foto com overlay em degradê ---------- */
.faq-photo-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.final-cta-overlay {
  background: linear-gradient(-100deg, rgba(75, 25, 91, 0) 35%, rgba(218, 61, 245, 0.55) 70%, rgba(218, 61, 245, 0.85) 100%);
}

/* ---------- Accordion FAQ ---------- */
.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.25s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
}

.faq-answer {
  overflow: hidden;
}

/* ---------- Toggle "É pra mim / É pra outra pessoa" ---------- */
.toggle-pill {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.toggle-pill[aria-pressed="true"] {
  background-color: var(--purple-900);
  color: #fff;
  border-color: var(--purple-900);
}

/* ---------- Inputs do formulário ---------- */
.form-input {
  background-color: var(--pink-input);
  border: 1px solid rgba(255, 183, 221, 0.46);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--pink-500);
  box-shadow: 0 0 0 3px rgba(218, 61, 245, 0.15);
}

/* ---------- Menu mobile ---------- */
#mobile-menu {
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* ---------- Cartões atmosféricos "três tempos" (gradientes na paleta da marca) ---------- */
.tempo-card-1 {
  background: radial-gradient(130% 120% at 25% -10%, #f6c4ff 0%, #da3df5 42%, #6b1a80 100%);
}

.tempo-card-2 {
  background: radial-gradient(130% 120% at 80% -10%, #cf6aff 0%, #82239c 45%, #2e0a3d 100%);
}

.tempo-card-3 {
  background: radial-gradient(130% 120% at 50% 115%, #ec82fd 0%, #9c2bc9 45%, #3a0f4d 100%);
}

/* ---------- Cartões: leve elevação ao passar o mouse (modernização) ---------- */
.card-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -16px rgba(75, 25, 91, 0.22);
}

/* ---------- Reveal ao rolar (fade-in genérico e reutilizável) ---------- */
/* Uso: adicionar .reveal no elemento a animar (+ delay-75/150/200/300 do
   Tailwind pra escalonar vários juntos). .reveal-text dentro de um .reveal
   entra logo em seguida, criando uma pequena cascata interna. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.3, 1), transform 0.7s cubic-bezier(0.16, 0.8, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-text {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.reveal.is-visible .reveal-text {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes (aplicadas automaticamente pelo script.js nas demais seções) */
.reveal.reveal-soft {
  transform: translateY(16px);
  transition-duration: 0.6s;
}

.reveal.reveal-zoom {
  transform: translateY(14px) scale(0.95);
}

.reveal.reveal-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition-duration: 0.9s;
}

.reveal.reveal-soft.is-visible,
.reveal.reveal-zoom.is-visible,
.reveal.reveal-line.is-visible {
  transform: none;
}

/* Depois que a entrada termina, a transição volta a ser curta (hover ágil,
   sem herdar o delay/duração do reveal). */
.reveal.is-visible.reveal-done {
  transition-duration: 0.25s;
  transition-delay: 0s !important;
}

.reveal.is-visible.reveal-done.card-lift:hover {
  transform: translateY(-4px);
}

/* ---------- Entrada do header e abertura suave do FAQ ---------- */
@keyframes headerIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

body>header {
  animation: headerIn 0.6s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}

.faq-item[open] .faq-answer {
  animation: faqIn 0.35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-text {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body>header,
  .faq-item[open] .faq-answer {
    animation: none !important;
  }
}

/* ---------- Cartões "escala" dos benefícios (hover revela foto) ---------- */
.bx {
  position: relative;
  overflow: hidden;
}

.bx-foto {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 70%;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 28px 22px 0;
  box-sizing: border-box;
}

.bx:hover .bx-foto {
  opacity: 1;
  transform: scale(1);
}

.bx-chip,
.bx-txt {
  position: relative;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.bx:hover .bx-chip {
  transform: translateY(-5px);
}

.bx:hover .bx-txt {
  transform: translateY(-7px);
}

@media (prefers-reduced-motion: reduce) {

  .bx-foto,
  .bx-chip,
  .bx-txt {
    transition: none;
  }
}

/* ---------- Utilidades ---------- */
.text-balance {
  text-wrap: balance;
}

::selection {
  background: var(--pink-500);
  color: #fff;
}

/* ---------- Modal de sucesso do formulário ---------- */
.modal-overlay {
  background: rgba(43, 6, 64, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-overlay:not([hidden]) {
  display: flex;
  animation: modalFade 0.25s ease-out both;
}

.modal-overlay:not([hidden]) .modal-panel {
  animation: modalPop 0.35s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes modalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {

  .modal-overlay:not([hidden]),
  .modal-overlay:not([hidden]) .modal-panel {
    animation: none;
  }
}