:root{
     --primary:#f06e35;
    /* Primária */
     --secondary:#fffffe;
    /* Secundária */
     --tertiary:#a89f84;
    /* Terciária */
     --text:#1a1a18;
     --muted:#7a7a72;
     --white:#ffffff;
     --bg:#272725;
     --shadow:0 10px 30px rgba(0,0,0,.08);
     --radius:18px;
     --identidade-primay: #f06e35;
     --identidade-secondary: #272725;
     --identidade-terciary: #32322d;
     --identidade-text-light: #fffffe;
     --identidade-text-dark: #1a1a18;
}
 *{
    box-sizing:border-box
}
 html{
    scroll-behavior:smooth
}
 body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
     color:var(--secondary);
     background:var(--bg);
}
 a{
    color:inherit;
    text-decoration:none
}
 img{
    max-width:100%;
    display:block
}
 .container{
    width:min(1120px, 92%);
     margin:0 auto
}
/* Header */
 header{
    position:sticky;
     top:0;
     z-index:20;
     background:#c4c4ad2c;
     backdrop-filter:saturate(140%) blur(8px);
     
}
 .nav{
    display:flex;
     align-items:center;
     justify-content:space-between;
     padding:5px 0
}
 .brand{
    display:flex;
     align-items:center;
     gap:10px;
     font-weight:800;
     letter-spacing:.2px
}
 .brand-badge{
    width:36px;
    height:36px;
    border-radius:10px;
    background:linear-gradient(135deg,var(--primary),#ff884f);
     display:grid;
     place-items:center;
     color:#fff;
     font-weight:800
}
.nav a{
   font-weight:700;
   opacity:.9;
   text-shadow: 0 0 2px #000, 0 0 1px #000;
}
.nav-links{
    display:flex;
    gap:20px;
    align-items:center
}
.nav-links a:hover {
    color: var(--primary);
}
 .btn{
    display:inline-flex;
     align-items:center;
     gap:10px;
     padding:12px 18px;
     border-radius:12px;
     font-weight:700;
     transition:.2s transform ease,.2s box-shadow ease,.2s background ease;
     box-shadow:var(--shadow)
}
 .btn:hover{
    transform:translateY(-2px)
}
 .btn-primary{
    background:var(--primary);
     color:var(--white) !important;
}
 .btn-ghost{
    background:var(--white);
    color: var(--text);
     border:1px solid #eee
}
/* Hero */
 .hero{
    position:relative;
     isolation:isolate
}
 .hero-inner {
     display: flex;
     align-items: center;
     grid-template-columns:1.05fr .95fr;
     gap: 40px;
    /* espaço entre texto e celular */
     padding:64px 0 
}
 @media (max-width: 961px) {
     .hero-inner{
        display:grid;
         grid-template-columns:1.05fr .95fr;
         gap:40px;
         padding:64px 0
    }
}
 .hero-inner > div:first-child {
     flex: 2;
    /* ocupa 2 partes */
}
 .hero-inner > .art {
     flex: 1;
    /* ocupa 1 parte */
}
 .pill{
    display:inline-block;
     background:rgba(240,110,53,.12);
     color:var(--primary);
     border:1px dashed rgba(240,110,53,.35);
     padding:8px 12px;
     border-radius:999px;
     font-weight:700;
     font-size:.9rem
}
 h1{
    font-size:clamp(1.8rem, 2rem + 2vw, 3.0rem);
     line-height:1.08;
     color:var(--secondary);
     margin:0px 0 30px
}

.sub{
   font-size:1.125rem;
   color:#f7f7df;
}

@media (max-width: 600px) {
    h1 {
        font-size:clamp(1.4rem, 1.5rem + 1.8vw, 2.5rem);
    }

    .sub{
   font-size:.9rem;
   color:#f7f7df;
}
   }


   p.sub  {
      margin-bottom: 30px !important;
   }
 .cta{
    display:flex;
     gap:14px;
     flex-wrap:wrap;
     margin-top:24px
}
 .hero-card{
    background: linear-gradient(135deg, #221f1f 60%, #383831 100%);
     border-radius:var(--radius);
     padding:20px;
     box-shadow:var(--shadow);
     margin-top: 20px;
}
 .hero-list{
    display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:14px;
     margin-top:18px
}
 .mini{
    background:var(--white);
     border:1px solid #000000;
     border-radius:14px;
     padding:14px;
     color:var(--text)
     
}
 .mini b{
    color:var(--text)
}
 .art img{
     border-radius: 20px;
}
 .phones{
    position:absolute;
     inset:auto 0 0 auto;
     width:92%;
     transform:translateY(10px)
}
/* Sections */
 section{
    padding:64px 0;
    scroll-margin-top: 40px;
}
 .sec-head{
    display:flex;
     align-items:flex-end;
     justify-content:space-between;
     margin-bottom:22px
}
 .eyebrow{
    color:var(--primary);
     font-weight:800;
     letter-spacing:.4px
}
 h2{
    font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
     margin:6px 0 8px;
     color:var(--text)
}
 .muted{
    color:var(--muted)
}
/* Steps */
 .grid-3{
    display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:18px
}
 .card{
    background:#fff;
     border-radius:16px;
     padding:20px;
     box-shadow:var(--shadow)
}
 .num{
    width:36px;
    height:36px;
    border-radius:9px;
    background:var(--secondary);
    color: var(--identidade-text-dark);
    display:grid;
    place-items:center;
    font-weight:800
}
/* Benefits */
 .grid-4{
    display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     gap:18px
}
 .icon{
    width:36px;
    height:36px;
    border-radius:9px;
    background:var(--primary);
     color:#fff;
     display:grid;
     place-items:center;
     font-weight:800
}
/* Partners */
 .partner{
    background:#fff;
     border:1px dashed #e8e2d4;
     border-radius:12px;
     padding:16px;
     display:grid;
     place-items:center;
     font-weight:700;
     color:#6c6b62
}
 .partners{
    display:grid;
     grid-template-columns:repeat(6,minmax(0,1fr));
     gap:14px
}
/* Offers */
 .offer{
    border:1px solid #eee3cf;
     border-radius:16px;
     background:#fff;
     padding:18px;
     box-shadow:var(--shadow)
}
 .offer .tag{
    background:var(--tertiary);
     color:#fff;
     border-radius:999px;
     padding:6px 10px;
     font-size:.8rem;
     font-weight:700
}
/* Testimonials */
 .testi{
    display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:16px
}
 .quote{
    background:#fff;
     border:1px solid #eee5d9;
     border-radius:16px;
     padding:18px;
     box-shadow:var(--shadow)
}
 .avatar{
    width:38px;
    height:38px;
    border-radius:50%;
     background:linear-gradient(135deg, var(--tertiary), #cdbf9b)
}
/* Download */
 .download{
    display:grid;
     grid-template-columns:1fr 1fr;
     gap:18px
}
 .store{
    display:inline-flex;
     align-items:center;
     gap:10px;
     border:1px solid #ece6da;
     background:#fff;
     padding:12px 16px;
     border-radius:12px;
     font-weight:700;
     box-shadow:var(--shadow)
}
 .store small{
    display:block;
     line-height:1;
     color:#8a8779
}
/* FAQ */
 details{
    border:1px solid #eee2cf;
     border-radius:14px;
     padding:14px 16px;
     background:#fff
}
 details+details{
    margin-top:10px
}
 summary{
    color: #272725;
    cursor:pointer;
     font-weight:700
}

details p{
    margin:8px 0 0;
     color:var(--text);
     line-height:1.4
}
/* Footer */
 footer{
    background:var(--secondary);
     color:#fff;
     padding:34px 0
}
 footer a{
    color:#fff;
     opacity:.9
}
 .grid-2{
    display:grid;
     grid-template-columns:1fr 1fr;
     gap:14px
}
/* Responsive */
 @media (max-width: 960px){
     .hero-inner{
        grid-template-columns:1fr;
         padding:34px 0
    }
     .hero-list{
        grid-template-columns:1fr 1fr
    }
     .grid-3{
        grid-template-columns:1fr
    }
     .grid-4{
        grid-template-columns:1fr 1fr
    }
     .partners{
        grid-template-columns:repeat(3, minmax(0,1fr))
    }
     .testi{
        grid-template-columns:1fr
    }
     .download{
        grid-template-columns:1fr
    }
     .grid-2{
        grid-template-columns:1fr
    }
}
/* Animations */
 @keyframes float {
     0% {
         transform: translateY(0) 
    }
     50% {
         transform: translateY(-6px) 
    }
     100% {
         transform: translateY(0) 
    }
}
 @keyframes pulseGlow {
     0%,100% {
         box-shadow: var(--shadow) 
    }
     50% {
         box-shadow: 0 12px 40px rgba(240,110,53,.35) 
    }
}
 @keyframes shimmer {
     0% {
         background-position: 0% 50% 
    }
     100% {
         background-position: 200% 50% 
    }
}
/* Reveal on scroll */
 .reveal{
    opacity:0;
     transform:translateY(18px);
     transition:opacity .6s ease, transform .6s ease
}
 .reveal.show{
    opacity:1;
     transform:none
}
/* Microinteractions */
 .btn-primary{
    animation: none
}
 .btn-primary:hover{
    filter:brightness(1.02)
}
 .card, .offer, .quote, .partner{
    transition: transform .2s ease, box-shadow .2s ease
}
 .card:hover, .offer:hover, .quote:hover, .partner:hover{
    transform:translateY(-4px)
}
/* Floating badge effect */
 .brand-badge{
    animation: float 4s ease-in-out infinite
}
 


#como-funciona .card img {
    height: 140px;
    width: 140px;
    object-fit: cover;
    margin-bottom: 12px;
}

#faq {
   background: url(/images/BannerFaqDesk.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 600px) {
    #faq {
        background: url(/images/BannerFaqMobile.png);
        background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    }

    #faq .grid-2
    {
      margin-top: 80px;
    }
}