@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800;900&display=swap");

:root{
  --pb-purple: #80b7c8;      /* verde agua principal */
  --pb-purple-2:#a99cf3;     /* topo / degradê */
  --pb-ink: #1b1b1f;
  --pb-muted: #6b6b75;
  --pb-white: #ffffff;
  --pb-card: #ffffff;
  --pb-shadow: 0 18px 38px rgba(20, 14, 40, .14);
  --pb-radius: 28px;
}

*{ font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body {
    overflow-x: hidden !important;
    font-family: 'Montserrat' !important;
    background-color: #ffffff;
}

/* =========================
   NAVBAR (estilo Parabank)
========================= */
.parabank{
  background: linear-gradient(90deg, rgba(169,0,255,10), rgba(124,102,231,.55));
  backdrop-filter: blur(12px);
}

.navbar .nav-link{
  color: #ffffff;
  font-weight: 500;
  opacity: .92;
}

.navbar .nav-link:hover{ opacity:1; }

.brand-logo{ max-height: 44px; }

/* Botões pill */
.btn-pill{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

.btn-white{
  background: #ffffff !important;
  color: #1b1b1f !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

.btn-outline-light-soft{
  border: 1px solid rgba(255,255,255,.55) !important;
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
}

.btn-outline-light-soft:hover{
  background: rgba(255,255,255,.18) !important;
}
.fw-extrabold {
    font-weight: 800 !important;
}

.heading-color-primary {
    color: var(--color-primary);
}

.heading-color-secondary {
    color: var(--color-secondary);
}

h2 {
    font-size: 60px !important;
}

h3 {
    font-size: 54px !important;
}

h4 {
    font-size: 36px !important;
}

h6 {
    font-size: 24px !important;
}



/* =========================
   HERO (corrigido)
========================= */
.margin-up-section{
  height: 16px;
  background: #ffffff;
}

/* Hero roxo precisa ser relative para a imagem flutuar */
#purpleHero{
  position: relative;
  background: var(--pb-purple);
  padding-bottom: 18px; /* reduz o buraco branco */
}

.hero-inner{
  padding: 38px 0 24px;
}

.hero-kicker h6{
  color: rgba(255,255,255,.9);
  font-weight: 500;
}

.hero-title{
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(2.2rem, 3.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: .01em;
  margin-top: 10px;
}

.hero-right{
  color: rgba(255,255,255,.92);
  font-weight: 500;
  font-size: 1.52rem;
  line-height: 1.45;
}

.hero-mobile-space{
  height: 140px;
}

@media screen and (max-width: 767px){
  .hero-mobile-space{
    height: 20px;
  }
}


/* Coluna da imagem (garante área pra posicionamento absoluto) */
.hero-photo-col{
  position: relative;
  min-height: 260px;
}

/* Imagem flutuante (entre o roxo e o branco) */
.hero-float-img{
  position: absolute;
  left: 30%; /* ajusta a posição  */
  transform: translateX(-50%);
  bottom: -260px; /* sobe a imagem e elimina o buraco branco */
  width: 380px;  /* só um tiquinho maior, fica mais Parabank */
  max-width: none;
  height: auto;
  margin: 0;
  display: block;
  filter: drop-shadow(0 24px 40px rgba(10, 6, 30, .25));
  z-index: 5;
}

.heading-color-primary{ color: var(--pb-purple); }
.heading-color-secondary{ color: var(--pb-purple); }

.hero-badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width:768px){
  .hero-badges{ justify-content: flex-start; }
}

/* Badge do HERO (texto centralizado + tamanho mais correto ao lado do play) */
#purpleHero .badge-pill{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 10px 14px;
  min-height: 64px;      /* conversa com o play ao lado */
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.2;
}


/* Responsivo */
@media (max-width: 991px){
  #purpleHero{ padding-bottom: 70px; }

  .hero-photo-col{ min-height: 240px; }

  .hero-float-img{
    width: 340px;
    bottom: -80px;
  }
}

@media (max-width: 575px){

  /* HERO */
  #purpleHero{
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .hero-inner{
    padding: 20px 0 10px;
  }

  .hero-kicker h6{
    font-size: 16px !important;
    line-height: 1.45;
    text-align: center;
    max-width: 92%;
    margin: 0 auto;
  }

  .hero-photo-col{
    min-height: auto;
    margin-top: 18px;
    margin-bottom: 18px;
  }

  .hero-float-img{
    position: static;
    transform: none;
    width: 250px;
    max-width: 82%;
    margin: 0 auto;
    display: block;
  }

  .hero-title{
    font-size: 2.2rem !important;
    line-height: 1.02;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 14px;
  }

  #purpleHero .badge-pill{
    max-width: 92%;
    margin: 0 auto;
    min-height: auto;
    padding: 14px 18px;
    line-height: 1.35;
    font-size: 0.95rem;
  }

  /* FAQ */
  .frequentes .contentbox{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start !important;
    gap: 10px;
    margin-bottom: 28px !important;
  }

  .frequentes .numberbox{
    flex: 0 0 56px;
    max-width: 56px;
    width: 56px;
    padding-right: 0;
  }

  .frequentes .numberbox h3{
    font-size: 56px !important;
    line-height: 0.9;
    margin: 0;
    text-align: left !important;
  }

  .frequentes .textbox{
    flex: 1 1 auto;
    max-width: calc(100% - 66px);
    padding-left: 0;
  }

  .frequentes .textbox h6{
    font-size: 22px !important;
    line-height: 1.15;
    margin: 0 0 8px 0;
  }

  .frequentes .textbox p{
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
  }
}


/* =========================
   COMO FUNCIONA
========================= */
.como-sec .number{
  font-size: 9.5rem;
  color: rgba(124,102,231,.95);
  font-weight: 900;
  line-height: 1;
}

.content-box{
  background: var(--pb-card);
  border-radius: var(--pb-radius) !important;
  box-shadow: var(--pb-shadow);
}

.content-box .content{
  color: var(--pb-ink);
  font-weight: 500;
}

.store-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
@media (max-width: 767px){
  .store-row{ align-items:center; }
}

.small-note{
  color: var(--pb-muted);
  font-weight: 500;
}

/* =========================
   BENEFICIOS (FSW)
========================= */
/* FSW SECTION */
#fsw-section .fsw-right-text {
    font-size: 20px;
}

/* COMPROMISSO */
.compromisso {
    background-image: url('../../assets/img/compromisso-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.compromisso .logocol p,
.compromisso .contentcol p {
    font-size: 24px;
}

.compromisso .logocol li {
    font-size: 20px;
    font-weight: 400;
    position: relative;
    transition: 200ms ease;
}

.compromisso .logocol li:hover {
    font-weight: 700;
}

.compromisso::before {
    bottom: -200px;
    left: 20%;
}


/* =========================
   COMPROMISSO (roxo)
========================= */
.compromisso{
  background: var(--pb-purple);
}

.partner-logo{
  max-width: 320px;
  filter: drop-shadow(0 22px 34px rgba(10, 6, 30, .22));
}

/* =========================
   POR QUE (ícones + centro)
========================= */
.pro-que .foto-mulher-girl {
    position: absolute;
    left: -420px;
    bottom: -350px;
    z-index: 5;
    margin: auto;
}



/* =========================
   COMUNIDADE (roxo)
========================= */
.comunidade{
  background: var(--pb-purple);
}

.community-note{
  opacity: .92;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* contador */
.counter{
  font-size: clamp(2.2rem, 3vw, 3.1rem);
  letter-spacing: .02em;
}

/* =========================
   FAQ
========================= */
.frequentes .contentbox{
  border-radius: 18px;
}

.frequentes .textbox p{
  color: #3b3b44;
  margin: 0;
}

/* =========================
   FOOTER
========================= */
.footer{
  background: var(--pb-purple);
}

.footer h6.text-dark{
  color: #1b1b1f !important;
}

.footer .social-icons img{
  width: 34px;
  height: 34px;
  opacity: .92;
}

.footer .social-icons img:hover{ opacity: 1; }

.copyright{
  background: rgba(255,255,255,.86);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  margin-top: 30px;
}

/* Rounded cut style (decorativo) */
.round-cut-circle:before{
  content:"";
  position:absolute;
  top:-22px;
  left:0;
  right:0;
  height:44px;
  background: #ffffff;
  border-bottom-left-radius: 44px;
  border-bottom-right-radius: 44px;
  opacity: .0; /* deixe 0 se não quiser o “recorte” */
}



/* Play Button (GLOBAL - igual ao modelo) */
.play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(#ff000d 50%, rgba(205, 209, 255, 0.4) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.play-btn::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation: pulsate-btn 2s steps infinite;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(205, 164, 94, 0.7);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.play-btn:hover::after {
  border-left: 15px solid #0cd1d3;
  transform: scale(20);
}

.play-btn:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

@keyframes pulsate-btn {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* AJUSTE COMO FUNCIONA - DESKTOP E MOBILE */
.como-sec .method-card{
  display:flex;
  align-items:center;
  position:relative;
  width:100%;
}

.como-sec .method-card .number{
  flex:0 0 68px;
  font-size:9.5rem;
  color:rgba(124,102,231,.95);
  font-weight:900;
  line-height:.85;
  z-index:2;
  margin-right:-22px;
}

.como-sec .method-card .content-box{
  flex:1;
  min-height:106px;
  display:flex;
  align-items:center;
  padding:28px 26px 28px 38px;
  background:#fff;
  border-radius:28px !important;
  box-shadow:var(--pb-shadow);
  position:relative;
  z-index:1;
}

.como-sec .method-card .content{
  width:100%;
}

.como-sec .method-card h6{
  margin:0;
  line-height:1.15;
}

.como-sec .small-note{
  display:block;
  margin-top:6px;
  font-size:14px;
  color:var(--pb-muted);
}

/* TABLET */
@media (max-width:991px){
  .como-sec .method-card .number{
    flex:0 0 80px;
    font-size:8rem;
    margin-right:-18px;
  }

  .como-sec .method-card .content-box{
    min-height:120px;
    padding:26px 24px 26px 36px;
  }
}

/* MOBILE */
@media (max-width:575px){
  .como-sec .innerbox{
    padding-left:18px;
    padding-right:18px;
  }

  .como-sec .method-card .number{
    flex:0 0 64px;
    font-size:6.5rem;
    line-height:.9;
    margin-right:-10px;
  }

  .como-sec .method-card .content-box{
    min-height:112px;
    padding:24px 22px 24px 34px;
    border-radius:24px !important;
  }

  .como-sec .method-card h6{
    font-size:22px !important;
    line-height:1.15;
  }

  .compromisso-frase{
    font-size:28px !important;
    line-height:1.15;
  }
}

/* CELULARES BEM ESTREITOS */
@media (max-width:390px){
  .como-sec .method-card .number{
    flex:0 0 54px;
    font-size:5.5rem;
    margin-right:-6px;
  }

  .como-sec .method-card .content-box{
    padding:22px 18px 22px 28px;
  }

  .como-sec .method-card h6{
    font-size:20px !important;
  }
}


/* AJUSTE FAQ RESPONSIVO */
.frequentes .faq-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.frequentes .faq-item{
  display:flex;
  align-items:flex-start;
  gap:22px;
}

.frequentes .faq-number{
  flex:0 0 82px;
  font-size:54px;
  font-weight:900;
  line-height:.9;
  color:#1b1b1f;
  text-align:right;
}

.frequentes .faq-text{
  flex:1;
}

.frequentes .faq-text h6{
  font-size:24px !important;
  line-height:1.15;
  font-weight:800;
  color:#1b1b1f;
  margin:0 0 8px;
}

.frequentes .faq-text p{
  font-size:16px;
  line-height:1.5;
  color:#3b3b44;
  margin:0;
}

.faq-legal-note{
  text-align:center;
  margin-top:50px;
}

.faq-legal-note p{
  color:rgba(0,0,0,.70);
  font-size:1.05rem;
  line-height:1.6;
  margin-bottom:22px;
}

.faq-buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.faq-buttons a{
  background:#111;
  color:#fff;
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  transition:all .2s ease;
}

.faq-buttons a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* MOBILE */
@media (max-width:575px){
  .frequentes{
    overflow:hidden;
  }

  .frequentes h2{
    font-size:28px !important;
    line-height:1.15;
    margin-bottom:34px !important;
  }

  .frequentes .faq-list{
    gap:30px;
  }

  .frequentes .faq-item{
    gap:14px;
    padding:0 8px;
  }

  .frequentes .faq-number{
    flex:0 0 58px;
    font-size:42px;
    line-height:.95;
    text-align:left;
  }

  .frequentes .faq-text h6{
    font-size:21px !important;
    line-height:1.18;
  }

  .frequentes .faq-text p{
    font-size:15px;
    line-height:1.45;
  }

  .faq-legal-note{
    margin-top:44px;
    padding:0 14px;
  }

  .faq-legal-note p{
    font-size:15px;
    line-height:1.55;
  }
}