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

html, body{
  min-height: 100%;
  background: #0b0b0e;
}

body{
  background:
    radial-gradient(900px 500px at 25% 35%, rgba(98,0,255,.28), transparent 60%),
    radial-gradient(900px 500px at 75% 65%, rgba(0,186,255,.20), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.saas-card{
    background:#fff; 
    border-radius:14px; 
    box-shadow:0 20px 60px rgba(0,0,0,.35); 
    border:1px solid rgba(255,255,255,.08);
}
.saas-left h1{
    color:#fff; 
    font-weight:800; 
    letter-spacing:-.02em; 
    font-size:52px; 
    line-height:1.02;
}
.saas-left p{
    color:rgba(255,255,255,.78);
}
.saas-steps{
    margin-top:22px;
}
.saas-step{
    display:flex; 
    gap:12px; 
    align-items:flex-start; 
    color:rgba(255,255,255,.88); 
    margin:14px 0;
}
.saas-dot{
    width:22px; 
    height:22px; 
    border-radius:999px; 
    background:rgba(255,255,255,.16); 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    flex:0 0 22px; 
    margin-top:2px;
}
.saas-dot i{font-size:12px; color:#a78bfa;}
.saas-step strong{display:block; color:#fff; font-weight:700;}
.saas-cta-btn{width:100%; border-radius:10px; padding:14px 16px; font-weight:700;}
.saas-pill{display:inline-flex; align-items:center; gap:8px; background:#eef6ff; border:1px solid #cfe7ff; color:#0b63ce; border-radius:10px; padding:10px 12px; font-weight:600;}
.saas-toggle{display:flex; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;}
.saas-toggle button{flex:1; padding:12px 10px; border:0; background:#fff; font-weight:700; color:#374151;}
.saas-toggle button.active{background:#f3f4f6;}
.saas-muted{
    color:#6b7280; 
    font-size:12px;
}
.saas-link{color:rgba(255,255,255,.80); text-decoration:none;}
.saas-link:hover{color:#fff; text-decoration:underline;}

/* ==========================================================
    MODAL 3D "BUILD" (slower) + step FLIP (rotateY)
    + height adapts to content
    ========================================================== */

.saas-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    opacity:0;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
    transition: opacity .25s ease;
}
.saas-modal.open{
    opacity:1;
    pointer-events:auto;
}
.saas-wizard{
    width:min(980px, 100%);
    background:#fff;
    border-radius:14px;
    box-shadow:0 30px 90px rgba(0,0,0,.45);
    overflow:hidden;

    transform-style:preserve-3d;
    transform-origin: var(--origin-x, 50%) var(--origin-y, 30%);

    opacity:0;
    transform: translateY(26px) scale(.86) rotateX(14deg) rotateY(78deg);
    filter: blur(1px);
    will-change: transform, opacity, filter;
}
/* Slower, more visible "building from button" */
.saas-modal.open .saas-wizard{
    animation: saasWizardIn 1.05s cubic-bezier(.18,.92,.18,1) forwards;
}
.saas-modal.closing .saas-wizard{
    animation: saasWizardOut .55s cubic-bezier(.7,.05,.4,1) forwards;
}

/* modal aberto (aceita open e is-open) */
.saas-modal.open,
.saas-modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.saas-modal.open .saas-wizard,
.saas-modal.is-open .saas-wizard{
  animation: saasWizardIn 1.05s cubic-bezier(.18,.92,.18,1) forwards;
}

/* step ativo (aceita active e is-active) */
.saas-step-panel.active,
.saas-step-panel.is-active{
  position:relative;
  opacity:1;
  pointer-events:auto;
  transform: rotateY(0deg) translateX(0);
}

@keyframes saasWizardIn{
    0%   { opacity:0; transform: translateY(26px) scale(.86) rotateX(14deg) rotateY(78deg); filter: blur(1px); }
    45%  { opacity:1; transform: translateY(2px)  scale(.98) rotateX(0deg)  rotateY(10deg); filter: blur(.2px); }
    72%  { opacity:1; transform: translateY(-6px) scale(1.01) rotateX(0deg)  rotateY(-4deg); filter: blur(0px); }
    100% { opacity:1; transform: translateY(0)   scale(1)    rotateX(0deg)  rotateY(0deg); filter: blur(0px); }
}
@keyframes saasWizardOut{
    0%   { opacity:1; transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg); }
    100% { opacity:0; transform: translateY(22px) scale(.90) rotateX(10deg) rotateY(70deg); }
}
/* Subtle "card flip" on every step change */
.saas-wizard.step-flip{
    animation: saasCardFlip .42s cubic-bezier(.2,.85,.2,1);
}
@keyframes saasCardFlip{
    0%   { transform: translateY(0) scale(1) rotateY(0deg); }
    50%  { transform: translateY(-2px) scale(1) rotateY(10deg); }
    100% { transform: translateY(0) scale(1) rotateY(0deg); }
}
.saas-wizard-header{
    padding:18px 22px;
    border-bottom:1px solid #eef2f7;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.saas-wizard-title{
    font-weight:800;
    font-size: 16px; 
    color:#111827; 
    margin:0;
}
.saas-close{border:0; background:transparent; cursor:pointer; color:#6b7280; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; font-size:30px; line-height:1; position:relative; border-radius:14px; transition: color .18s ease, transform .18s ease;}
.saas-close:before{content:""; position:absolute; inset:0; background:#ef4444; border-radius:18px; opacity:0; transform:scale(.65); transition: opacity .18s ease, transform .18s ease, border-radius .18s ease;}
.saas-close:after{content:""; position:absolute; inset:0; border:1px solid rgba(239,68,68,0); border-radius:999px; opacity:0; transform:scale(.85); transition: opacity .18s ease, transform .18s ease, border-color .18s ease, border-radius .18s ease;}
.saas-close:hover{color:#fff; transform:scale(1.06);}
.saas-close:hover:before{opacity:1; transform:scale(1); border-radius:14px;}
.saas-close:hover:after{opacity:1; transform:scale(1); border-color:rgba(239,68,68,.95); border-radius:14px;}
.saas-close > span{position:relative; z-index:2;}
.saas-wizard-body{padding:28px 22px;}

.saas-q{font-size:22px; font-weight:800; color:#111827; margin:0 0 8px;}
.saas-sub{color:#6b7280; margin:0 0 18px;}

/* Height container (adapts to active step) */
.saas-stage{
    position:relative;
    transition: height .24s ease;
    will-change: height;
    perspective: 1200px;
}
.saas-grid{
    display:grid; 
    grid-template-columns:1fr 1fr; 
    gap:12px;
}
/* Option card with custom check */
.saas-opt{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:14px 14px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    cursor:pointer;
    transition:.15s ease;
    position:relative;
    background:#fff;
}
.saas-opt:hover{
    border-color:#cbd5e1; 
    background:#fafafa;
}
/* Hide native checkbox/radio, but keep accessible */
.saas-opt input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.saas-opt .saas-tick{
    width:22px;
    height:22px;
    border-radius:7px;
    border:1px solid #cbd5e1;
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 22px;
    margin-top:2px;
    transition: .18s ease;
    box-shadow: 0 0 0 0 rgba(167,139,250,.0);
}
/* Stylish "V" check (pure CSS) */
.saas-opt .saas-tick:before{
    content:"";
    width:10px;
    height:6px;
    border-left:3px solid rgba(167,139,250,0);
    border-bottom:3px solid rgba(167,139,250,0);
    transform: rotate(-45deg) translateY(-1px);
    transition: .18s ease;
}
.saas-opt h4{font-size:14px; font-weight:800; margin:0; color:#111827;}
.saas-opt p{margin:2px 0 0; color:#6b7280; font-size:12px;}
/* Selected = neon lilac glow + tick becomes V */
.saas-opt.selected{
    border-color: rgba(20, 53, 4, 0.75);
    box-shadow:
        0 0 0 1px rgba(34, 85, 14, 0.45),
        0 4px 8px rgba(107, 136, 39, 0.726);
    background: linear-gradient(180deg, rgba(167,139,250,.08), rgba(167,139,250,.02));
}
.saas-opt.selected .saas-tick{
    border-color: rgb(15, 39, 2);
    box-shadow: 0 0 0 6px rgba(41, 126, 2, 0.055);
    background: rgba(165, 250, 139, 0.1);
}
.saas-opt.selected .saas-tick:before{
    border-left-color: rgb(15, 41, 2);
    border-bottom-color: rgb(0, 0, 0);
}
.saas-actions{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px;}
.saas-actions-hint{color:#76806b; font-size:12.5px; font-weight:700;}
.saas-btn{
    border-radius:12px; 
    padding:11px 18px; 
    font-weight:900; 
    letter-spacing:.01em; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    gap:10px; 
    transform-origin:center; 
    will-change:transform; 
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, filter .18s ease;
}
.saas-btn.primary{
    background:#111827; 
    border:1px solid #111827; 
    color:#fff;}
/* Cor do botão proximo */
.saas-btn.primary:hover,
.saas-btn.primary:focus-visible{
    background:linear-gradient(135deg, rgb(37, 49, 9), rgb(60, 105, 1)); 
    border-color:rgba(198, 250, 139, 0.95); 
    transform:scale(1.15); 
    box-shadow:0 0 0 1px rgba(70, 112, 2, 0.767), 0 0 26px rgba(207, 250, 139, 0.45), 0 16px 36px rgba(35, 68, 12, 0.22); 
    filter:saturate(1.1);
} 
.saas-btn.primary:active{transform:scale(1.10);} 
.saas-btn.primary:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; filter:none;}

.saas-btn.secondary{background:#f3f4f6; border:1px solid #e5e7eb; color:#111827;}
.saas-btn.secondary:hover,
.saas-btn.secondary:focus-visible{background:#111827; border-color:#111827; color:#fff; transform:scale(1.15); box-shadow:0 0 0 1px rgba(167,139,250,.55), 0 0 22px rgba(167,139,250,.35), 0 16px 36px rgba(0,0,0,.20);} 
.saas-btn.secondary:active{transform:scale(1.10);} 

.saas-input{width:100%; border:1px solid #e5e7eb; border-radius:10px; padding:12px 12px; font-weight:600;}
.saas-error{display:none; margin-top:10px; background:#fee2e2; border:1px solid #fecaca; color:#991b1b; padding:10px 12px; border-radius:10px; font-weight:700; font-size:13px;}

/* Steps: flip horizontally */
.saas-step-panel{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transform: rotateY(90deg) translateX(18px);
    transform-origin: 50% 50%;
    backface-visibility:hidden;
    transition: transform .34s ease, opacity .22s ease;
}
.saas-step-panel.active{
    position:relative;
    opacity:1;
    pointer-events:auto;
    transform: rotateY(0deg) translateX(0);
}
.saas-step-panel.leave-left{
    opacity:0;
    pointer-events:none;
    transform: rotateY(-90deg) translateX(-18px);
}
.saas-step-panel.enter-right{
    opacity:0;
    pointer-events:none;
    transform: rotateY(90deg) translateX(18px);
}
@media (max-width: 991px){
    .saas-left h1{font-size:40px;}
    .saas-grid{grid-template-columns:1fr;}
}

@media (min-width: 992px){
    .saas-left{
        position: sticky;
        top: 32px;        /* ajuste fino conforme seu header */
        align-self: flex-start;
        margin-top: 4%;
    }
}


/* Wrapper para permitir posicionamento absoluto da logo */
.saas-hero{
    position: relative;
}

/* Logo no topo-esquerdo com 10px */
.saas-hero-logo{
    position: absolute;
    top: -40px;
    left: -30px;
    z-index: 10;

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

    /* Não “incomoda” clique/área demais */
    padding: 0;
    margin: 0;
    text-decoration: none;
}

/* Imagem da logo com tamanho controlado */
.saas-hero-logo img{
    height: 56px;            /* ajuste fino se quiser */
    max-width: 180px;        /* evita estourar */
    width: auto;
    display: block;

    /* “Flutuando”: sombra + animação */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
    animation: saasFloat 3.6s ease-in-out infinite;
    transform: translateZ(0);
    transition: transform .25s ease, filter .25s ease;
}

.saas-hero-logo:hover img{
  transform: translateY(-8px) scale(1.02);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.45));
}

/* Efeito de flutuação */
@keyframes saasFloat{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Em telas menores, reduz um pouco para não bater no texto */
@media (max-width: 576px){
    .saas-hero-logo img{
        height: 44px;
        max-width: 150px;
    }
}

/* Centraliza a HERO inteira no viewport, mantendo Bootstrap grid */
.saas-hero-wrap{
    margin-top: 0px;
    padding-top: 40px;
    min-height: 100vh; /* já existe no seu CSS, mantenha */
    background:#0b0b0e;
    position:relative;
    display: flex;
    align-items: center;
    overflow:hidden;
    padding: 28px 0;        /* respiro geral */
    isolation: isolate;     /* garante camadas do :before sem “atrapalhar” conteúdo */
}

.saas-hero-wrap:before{
    pointer-events: none;
    z-index: 0;
    content:"";
    position:absolute;
    inset:-120px;
    background:
        radial-gradient(900px 500px at 25% 35%, rgba(98,0,255,.28), transparent 60%),
        radial-gradient(900px 500px at 75% 65%, rgba(0,186,255,.20), transparent 60%);
}

/* O container fica acima do background */
.saas-hero-wrap > .container.saas-hero{
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Em telas menores, abre espaço para a logo sem empurrar só a coluna esquerda */
@media (max-width: 991px){
    .saas-hero-wrap > .container.saas-hero{
        padding-top: 76px; /* ajuste fino conforme altura real da sua logo */
    }
}

/* Sticky da coluna esquerda precisa de overflow visível no desktop */
@media (min-width: 992px){
  .saas-hero-wrap{
    overflow: visible; /* mantém o background ok, mas libera sticky */
  }
}


@media (max-width: 576px){
    .saas-hero-logo{
        top: -18px;
        left: -12px;
    }
}

/* Botão "Continuar" - efeito luz passando + degradê verde escuro no hover */
#saasStartWizardBtn.saas-cta-btn{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .18s ease, background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}

/* Glow suave por trás (aparece no hover) */
#saasStartWizardBtn.saas-cta-btn::before{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.35), transparent 60%);
    opacity: 0;
    filter: blur(18px);
    transition: opacity .25s ease;
    pointer-events:none;
}

/* RAIO/SHIMMER forte (faixa bem marcada) */
#saasStartWizardBtn.saas-cta-btn::after{
    content:"";
    position:absolute;
    top:-70%;
    left:-140%;
    width: 80%;
    height: 260%;
    transform: rotate(18deg);
    opacity: 0;
    pointer-events:none;

    /* faixa brilhante com núcleo forte + bordas */
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(34,197,94,0.10) 20%,
        rgba(110,231,183,0.95) 45%,
        rgba(34,197,94,0.35) 60%,
        transparent 80%
    );

    /* reforço do brilho */
    filter: blur(0.5px) drop-shadow(0 0 16px rgba(34,197,94,.95));
    mix-blend-mode: screen;
}

/* HOVER: degradê verde escuro + texto branco + glow */
#saasStartWizardBtn.saas-cta-btn:hover{
    color:#fff !important;
    border-color: rgba(34,197,94,.45);
    background: linear-gradient(135deg, #052e16, #14532d, #064e3b) !important;

    /* glow forte externo + brilho interno */
    box-shadow:
        0 0 0 1px rgba(34,197,94,.25),
        0 10px 26px rgba(34,197,94,.22),
        0 18px 46px rgba(0,0,0,.40),
        inset 0 0 0 1px rgba(255,255,255,.06);
    transform: translateY(-1px);
}

#saasStartWizardBtn.saas-cta-btn:hover::before{
    opacity: 1;
}

#saasStartWizardBtn.saas-cta-btn:hover::after{
    opacity: 1;
    animation: saasGreenStrike .75s ease-out forwards;
}

@keyframes saasGreenStrike{
    0%   { left:-140%; }
    100% { left:140%; }
}

/* Foco teclado */
#saasStartWizardBtn.saas-cta-btn:focus{
    outline:none;
    box-shadow: 0 0 0 3px rgba(34,197,94,.30);
}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
    #saasStartWizardBtn.saas-cta-btn,
    #saasStartWizardBtn.saas-cta-btn::before,
    #saasStartWizardBtn.saas-cta-btn::after{
        transition:none !important;
        animation:none !important;
    }
}

/* ========== Steps estilo "timeline" (igual referência) ========== */
.saas-steps--timeline{
    position: relative;
    margin-top: 18px;
    padding-left: 56px;     /* espaço para linha + badge */
    counter-reset: saasStep;
}

/* Linha vertical pontilhada */
.saas-steps--timeline::before{
    content:"";
    position:absolute;
    left: 18px;
    top: 30px;
    bottom: 30px;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.18) 0 6px,
        transparent 6px 12px
    );
    opacity: .85;
    pointer-events:none;
}

/* Cada item */
.saas-steps--timeline .saas-step{
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 14px;
    margin: 10px 0;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

/* Badge (quadradinho numerado) */
.saas-steps--timeline .saas-dot{
    position: absolute;
    left: -61px;            /* encaixa em cima da linha */
    top: 14px;

    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;

    background: rgb(33, 34, 32);
    border: 1px solid rgba(105, 105, 105, 0.507);
    color: rgba(255,255,255,.75);

    box-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* Numeração automática */
.saas-steps--timeline .saas-dot::before{
    counter-increment: saasStep;
    content: counter(saasStep);
    font-weight: 900;
    font-size: 16px;
}

/* Textos */
.saas-steps--timeline .saas-step strong{
    display: block;
    color: rgba(255,255,255,.88);
    font-weight: 800;
    letter-spacing: .2px;
}

.saas-steps--timeline .saas-step-sub{
    margin-top: 4px;
    color: rgba(255,255,255,.65);
    font-size: 13px;
    line-height: 1.35;
}

/* ========== Estado ativo (destaque + animação) ========== */
.saas-steps--timeline .saas-step.is-active{
    background: rgba(255,255,255,.06);
    border-color: rgba(34,197,94,.72);
    transform: translateY(-1px);
}

.saas-steps--timeline .saas-step.is-active .saas-dot{
    background: linear-gradient(135deg, #0f5132, #14532d, #052e16);
    border-color: rgba(34,197,94,.75);
    color: #ffffff;
    box-shadow:
        0 0 0 1px rgba(34,197,94,.55),
        0 18px 38px rgba(0,0,0,.45),
        0 0 28px rgba(34,197,94,.38);
}

/* “Pisca suave” enquanto ativo */
.saas-steps--timeline .saas-step.is-active{
    animation: saasStepBlink 1.0s ease-in-out infinite;
}

@keyframes saasStepBlink{
    0%, 100% { box-shadow: 0 0 0 rgba(0,0,0,0); }
    50%      { box-shadow: 0 0 0 1px rgba(34,197,94,.16), 0 0 26px rgba(34,197,94,.12); }
}

/* Mobile: mantém alinhamento */
@media (max-width: 576px){
  .saas-steps--timeline{
    padding-left: 52px;
  }
  .saas-steps--timeline .saas-dot{
    left: -52px;
  }
}

/* Headline igual ao layout da imagem */
.saas-headline{
    margin: 0;
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: .88;
    max-width: 620px; /* ajuda a “parecer” igual ao recorte */
}

/* primeira linha */
.saas-line--1{
    display: block;
    font-size: clamp(34px, 4.2vw, 58px);
}

/* segunda linha: esquerda (texto) e direita (preço) */
.saas-line--2{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    margin-top: 6px;
    font-size: clamp(40px, 5.0vw, 70px);
}

/* “Fique por” */
.saas-text{
    display: inline-block;
    white-space: nowrap;
    /*margin-top: -120px;*/
}

/* bloco do preço à direita */
.saas-price{
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    z-index: 999;
    white-space: nowrap;
}

/* R$ menor e um pouco “subido” */
.saas-currency{
    font-size: .45em;
    font-weight: 900;
    opacity: .95;
    transform: translateY(-6px);
}

/* 25 gigante */
.saas-amount{
    font-size: 1.25em;
    font-weight: 900;
    letter-spacing: -0.05em;
    z-index: 999;
}

/* Mobile: mantém a composição sem quebrar */
@media (max-width: 576px){
    .saas-headline{ max-width: 100%; }
    .saas-line--2{ gap: 14px; }
    .saas-amount{ font-size: 1.18em; }
    .saas-currency{ transform: translateY(-4px); }
}




/* Toggle: sem ativo por padrão */
.saas-toggle--3{
    --active-index: 0;
    --pad: 10px;
    --pad_top: 14px;
    --gap: 8px;
    --radius: 14px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    padding: var(--pad);
    border-radius: var(--radius);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

/* indicador (invisível até selecionar) */
.saas-toggle--3 .saas-toggle-indicator{
    position: absolute;
    top: var(--pad_top);
    bottom: var(--pad);
    left: var(--pad);
    width: calc((100% - (var(--pad) * 2) - (var(--gap) * 2)) / 3);
    height: 45px;
    border-radius: 12px;

    background: linear-gradient(135deg, #064e3b, #14532d, #052e16);
    box-shadow:
        0 5px 6px rgba(0,0,0,.68),
        0 0 24px rgba(34,197,94,.35);

    transform: translateX(calc(var(--active-index) * (100% + var(--gap))));
    transition: transform .28s cubic-bezier(.2,.9,.2,1);

    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.saas-toggle--3.has-selection .saas-toggle-indicator{
    opacity: 1;
}

.saas-toggle--3 .saas-toggle-btn{
    position: relative;
    z-index: 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 12px;
    border-radius: 12px;

    background: transparent;
    /* NÃO ATIVO: borda cinza */
    border: 1px solid rgba(44, 68, 29, 0.307);
    color: rgb(0, 0, 0);

    font-weight: 800;
    cursor: pointer;
    transition: color .2s ease, transform .15s ease, border-color .2s ease, box-shadow .2s ease;

}

.saas-toggle--3 .saas-toggle-btn:hover{
    border-color: rgba(14, 43, 5, 0.75);
    color: #18240a;
    transform: translateY(-1px);
}

.saas-toggle--3 .saas-toggle-btn.active{
    border-color: transparent !important; /* some borda */
    color: #ffffff !important;              /* texto branco no verde */
    background: transparent;
}

.saas-toggle--3 .saas-toggle-btn:focus-visible{
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

/* Painéis */
.saas-pay-panels{ 
    margin-top: 1px; 
}
.saas-pay-panel[hidden]{ display:none !important; }

.saas-panel-card{
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    /*border: 1px solid rgba(255,255,255,.90);*/
    padding: 14px;
    margin-top: -30px;
    margin-bottom: -50px;
}

/* CARTÃO (painel): borda cinza + padding lateral 3px */
.saas-pay-panel[data-panel="card"]{
  border: 1px solid #d1d5db;
  border-radius: 14px;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* Corrige sobreposição (margens negativas do container interno) */
.saas-pay-panel[data-panel="card"] .saas-panel-card{
  margin-top: 0 !important;
  margin-bottom: 3px !important;
}

/* Hint sempre no fluxo normal */
.saas-pay-panel[data-panel="card"] .saas-hint{
  position: relative;
  z-index: 1;
}


.saas-panel-center{ text-align: center; }

.saas-field label{
    display:block;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.82);
    margin-bottom: 6px;
}

.saas-field input,
.saas-field select,
.saas-field textarea{
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.92);
    color: #111827;
    padding: 10px 12px;
    outline: none;
    border: 1px solid rgba(39, 48, 7, 0.192);
}

.saas-field input:focus,
.saas-field textarea:focus,
.saas-field select:focus{
    border-color: rgba(34,197,94,.55);
    box-shadow: 0 0 0 3px rgba(34,197,94,.14);
}

.saas-input-icon{ position: relative; }
.saas-input-icon i{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .95;
    color:#1d2711;
}

.saas-grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.saas-hint{
    margin-top: 10px;
    font-size: 12px;
    color: rgba(70, 69, 69, 0.62);
}

/* PIX */
.saas-grid-pix{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    align-items: start;
}

.saas-qr-box{
    background: rgba(255,255,255,.92);
    border-radius: 14px;
    padding: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 220px;
}

.saas-qr-box canvas, .saas-qr-box img{ max-width: 200px; height:auto; }

@media (max-width: 576px){
  .saas-grid-2{ grid-template-columns: 1fr; }
  .saas-grid-pix{ grid-template-columns: 1fr; }
}

/* CTA desativado */
#saasSubscribeBtn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.15);
}


/* ==========================================================
   FIX DEFINITIVO do toggle do pagamento (#saasPayToggle)
   - botões mantêm largura “de 3”
   - com 2/1 fica centralizado
   - indicador segue a posição real do botão (JS: --ind-x/--ind-w)
   ========================================================== */

#saasPayToggle.saas-toggle--3{
  display: flex;                 /* troca grid por flex só nesse toggle */
  justify-content: center;       /* centraliza quando tiver 1 ou 2 botões */
  align-items: center;
  gap: var(--gap);
}

#saasPayToggle.saas-toggle--3 .saas-toggle-btn{
  flex: 0 0 calc((100% - (var(--pad) * 2) - (var(--gap) * 2)) / 3);
  min-width: 0;
}

#saasPayToggle.saas-toggle--3 .saas-toggle-indicator{
  left: 0;                       /* importante: agora usa translate real */
  width: var(--ind-w, 0px);
  transform: translateX(var(--ind-x, 0px));
  transition:
    transform .28s cubic-bezier(.2,.9,.2,1),
    width .28s cubic-bezier(.2,.9,.2,1),
    opacity .18s ease;
}

/* PayPal: fundo cinza claro, padding 3 e radius 10px */
.saas-paypal-box{
  padding: 1rem;            /* equivalente ao p-3 */
  /*background: #f3f4f6;      /* cinza claro */
  border-radius: 10px;
  
}

/* ==========================================================
   PayPal hover-box (fundo acompanha o botão) + botão metálico verde
   + "raio" que vai e volta conforme hover do mouse
   ========================================================== */

.saas-paypal-hoverbox{
  /* cor-base do botão PayPal (usada também no fundo do box no hover) */
  --pp-base-bg: linear-gradient(135deg, #e4e4e460, #fdfdfd50);
  --pp-green-bg: linear-gradient(135deg, #052e16, #14532d, #064e3b);

  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  height: 250px;
}

/* Quando passar o mouse no box: o fundo vira "a cor do botão" */
.saas-paypal-hoverbox:hover{
  background: var(--pp-base-bg) !important;
  border-color: rgba(163, 163, 163, 0.55);
  box-shadow:
    0 0 0 1px rgba(63, 222, 0, 0.22),
    0 4px 12px rgba(0,0,0,.22);
}

/* textos internos ficam legíveis quando o fundo vira escuro */
.saas-paypal-hoverbox:hover,
.saas-paypal-hoverbox:hover .text-muted,
.saas-paypal-hoverbox:hover p,
.saas-paypal-hoverbox:hover small{
  color: rgba(0, 0, 0, 0.88) !important;
}
.saas-paypal-hoverbox:hover .text-muted{ opacity: .9; }

/* Botão PayPal (estado normal: "cor do botão") */
#saasPaypalPayBtn{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(65, 135, 0, 0.35);
  background: var(--pp-base-bg) !important;
  color: #000000 !important;
  font-weight: 900;
  letter-spacing: .01em;
  padding: 12px 16px;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease;
}
#saasPaypalPayBtn:focus{ outline: none; }

#saasPaypalPayBtn{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(19, 34, 0, 0.35);
  background: var(--pp-base-bg) !important;
  color: #013088 !important;

  /* AQUI: o botão todo fica normal/semibold */
  font-weight: 600;

  letter-spacing: .01em;
  padding: 12px 16px;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, filter .25s ease;
}

/* AQUI: só o PayPal em negrito */
#saasPaypalPayBtn strong{
  font-weight: 900;
}

/* quando passar o mouse no box, tudo do botão fica branco */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn{
  color: #ffffff !important;
}

/* reforço: prefix e strong seguem o branco no hover */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn .saas-pp-prefix,
.saas-paypal-hoverbox:hover #saasPaypalPayBtn strong{
  color: #ffffff !important;
}

/* (opcional, mas recomendado) garante “Pague com” sempre normal */
#saasPaypalPayBtn .saas-pp-prefix{
  font-weight: 400;
  color: rgba(0,0,0,.72);
}


/* hover direto no BOTÃO */
#saasPaypalPayBtn:hover .saas-pp-prefix{
  color: #fff !important;
}


/* "Metallic green" enquanto o mouse estiver no box */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn{
  background: var(--pp-green-bg) !important;
  border-color: rgba(34,197,94,.55);
  color: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(34,197,94,.22),
    0 1px 6px rgba(34,197,94,.18),
    0 1px 6px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.06);
  filter: saturate(1.12);
}

/* brilho metálico interno */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn::before{
  content:"";
  position:absolute;
  inset: -40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 55%);
  opacity: .85;
  filter: blur(14px);
  pointer-events:none;
}

/* RAIO/SHIMMER: aparece só quando o box está em hover.
   - Hover no botão: percorre para a direita
   - Sai do botão (mas ainda dentro do box): volta para a esquerda */
#saasPaypalPayBtn::after{
  content:"";
  position:absolute;
  top:-75%;
  left:-140%;
  width: 75%;
  height: 260%;
  transform: rotate(18deg);
  opacity: 0;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(34,197,94,.10) 18%,
    rgba(110,231,183,.95) 45%,
    rgba(34,197,94,.30) 62%,
    transparent 82%
  );
  filter: blur(.5px) drop-shadow(0 0 16px rgba(34,197,94,.95));
  mix-blend-mode: screen;
  transition: left .65s ease, opacity .18s ease;
}

/* no hover do box, o raio fica "armado" (mas fora do botão) */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn::after{
  opacity: .95;
  left:-140%;
}

/* no hover do botão: percorre */
.saas-paypal-hoverbox:hover #saasPaypalPayBtn:hover::after{
  left: 140%;
}

/* ==========================================================
   Texto do botão PayPal:
   - inicialmente: "PayPal"
   - após 3s: revela "Pague com" a partir do meio
   ========================================================== */

#saasPaypalPayBtn .saas-pp-prefix{
  display:inline-block;
  margin-right: 6px;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  clip-path: inset(0 50% 0 50%);
}

#saasPaypalPayBtn.is-prefix-in .saas-pp-prefix{
  animation: saasPpPrefixReveal .62s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes saasPpPrefixReveal{
  0%   { opacity:0; transform: translateY(6px) scale(.98); clip-path: inset(0 50% 0 50%); }
  100% { opacity:1; transform: translateY(0)  scale(1);  clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce){
  #saasPaypalPayBtn,
  #saasPaypalPayBtn::before,
  #saasPaypalPayBtn::after{
    transition:none !important;
    animation:none !important;
  }
  #saasPaypalPayBtn .saas-pp-prefix{
    opacity:1;
    transform:none;
    clip-path:none;
  }
}


.saas-bottom-links{ gap: 12px; }

.saas-hover-linkbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.saas-hover-linkbtn:hover{
  border-color: #d1d5db;
  background: #f3f4f6;
  color: #111827;
}

/* ---------- PayPal panel requested styling ---------- */
.saas-paypal-panel{
    padding: 1rem;              /* semelhante ao p-3 */
    /*background: #f3f4f6;        /* cinza claro */
    border-radius: 10px;
}

/* Garantia: o bloco da esquerda permanece fixo em telas grandes */
@media (min-width: 992px){
    .saas-left{
        position: sticky;
        top: 28px;
        align-self: flex-start;
    }
}

/* Ajuste visual do botão hover-link (Voltar ao início / Iniciar sem pagar) */
.saas-bottom-links{
    gap: .75rem;
}
.saas-hover-linkbtn{
    border-radius: 10px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}


/* Prevent background scroll when wizard modal is open */
html.saas-modal-open, body.saas-modal-open{
    overflow:hidden;
}