body {
     min-height: 100vh;
     background: radial-gradient(circle at top right, #2a1d1d, #0c0808);
     color: #fff;
     font-family: "Instrument Sans", sans-serif;

     padding: 0;

 }

 h1,
 h2,
 h3 {
     font-family: "Merriweather", serif;
     font-weight: thin;
 }

 .highlight-number {
     color: #c89b3c;
     font-weight: 600;
 }

 .subtitle {
     font-size: 2.2rem;
     font-weight: 500;
     line-height: 1.2;
 }

 @media(max-width:768px) {
     body {
         text-align: center;
     }

     .subtitle {
         width: 100%;
         text-align: center;
     }
 }

 .description {
     color: #cfcfcf;
     font-size: 1.25rem;
     /*max-width: 420px;*/
 }

 .info-item {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 1.2rem;
     color: #e0e0e0;
 }

 .info-item i {
     color: #c89b3c;
     font-size: 1.4rem;
 }



 .offer-card {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
     backdrop-filter: blur(10px);
     border-radius: 18px;
     padding: 32px;
     max-width: 100%;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
 }

 .offer-title {
     font-size: 1.5rem;
     font-weight: 600;
     padding: 0 16px;
 }

 .offer-text {
     font-size: 1rem;
     color: #d6d6d6;
 }

 .price {
     font-size: 5rem;
     font-weight: 700;
     margin: 25px 0 12px 0;
     letter-spacing: 0;
 }

 .price span{
    font-weight: 200;
    font-size: 4.5rem;
}

 .btn-cta {
     background-color: rgb(246, 202, 2);
     color: #000;
     font-weight: 700;
     border-radius: 12px;
     padding: 20px 30px;
     font-size: 1rem;
     transition: all 0.2s ease;
     letter-spacing: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: fit-content;
 }

 .btn-cta:hover {
     background-color: #e0b806;
     transform: translateY(-2px);
 }

 .btn-cta svg{
    width: 24px;
    height: 24px;
 }

 .payments {
     opacity: 0.5;
     font-size: 0.75rem;
 }

 @media (max-width: 991px) {
     .offer-card {
         margin-top: 40px;
     }
 }

 .hero-section {
     min-height: 100vh;
     background-image: url("hero-renata.webp");
     /* substitua aqui */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
   
 }

 /* overlay escuro para legibilidade */
 .hero-section::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at left,
             rgba(0, 0, 0, 0.75) 0%,
             rgba(0, 0, 0, 0.85) 45%,
             rgba(0, 0, 0, 0.95) 100%);
     z-index: 1;
     display: none;
 }

 .hero-section .container {
     position: relative;
     z-index: 2;
 }

 .hero-title {
     font-size: 2.6rem;
     line-height: 1.2;
     font-weight: 500;
     color: #ffffff;
 }

 .hero-text {
     max-width: 520px;
     font-size: 1.2rem;
     line-height: 1.6;
     color: #d9d9d9;
 }

 .hero-btn {
     background-color: #f2f2f2;
     color: #000;
     padding: 14px 26px;
     border-radius: 12px;
     font-weight: 600;
     font-size: 0.95rem;
     text-transform: uppercase;
     transition: all 0.25s ease;
 }

 .hero-btn:hover {
     background-color: #ffffff;
     transform: translateY(-2px);
 }

 .section-padding {
     padding: 80px 0;
 }

 /* Responsivo */
 @media (max-width: 991px) {
     .hero-section {
         min-height: 100dvh;
         text-align: left;
         background-image: url("hero-mobile.webp");
         /* substitua aqui */
         background-position: top center;
         padding-top: 260px;
         text-align: center;

     }
     .section-padding {
         padding: 40px 0;
     }

     .hero-title {
         font-size: 1.5rem;
     }

     .offer-title {
         font-size: 1.45rem;
     }
 }

 @media (max-width: 576px) {
     .hero-title {
         font-size: 1.25rem;
     }
     .hero-text {
         font-size: 0.95rem;
     }
     .hero-btn {
         width: 100%;
         text-align: center;
     }
     .btn-cta {
         padding-left: 20px;
         padding-right: 20px;
         margin: 0 auto;
     }
 }

 html {
     scroll-behavior: smooth;
 }

 /*Progresso das Vendas*/
 .progress-wrapper {
     width: 100%;
     max-width: 800px;
     padding: 10px 0;
     margin: 0 auto;
 }

 /* Container da Barra - Ficou um pouco mais largo (padding maior) */
 .progress-container {
     width: 100%;
     background-color: #362929;
     border-radius: 50px;
     overflow: hidden;
     position: relative;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
 }

 /* Barra de Preenchimento - Aumentei a altura (height) */
 .progress-bar {
     height: 30px;
     /* Mais larga que a versão anterior */
     width: 0%;
     background-color: #e29505;
     border-radius: 50px;
     display: flex;
     align-items: end;
     justify-content: center;
     transition: width 2s cubic-bezier(0.1, 0.42, 0.41, 1);

     /* Efeito Listrado */
     background-image: linear-gradient(45deg,
             rgba(255, 255, 255, 0.2) 25%,
             transparent 25%,
             transparent 50%,
             rgba(255, 255, 255, 0.2) 50%,
             rgba(255, 255, 255, 0.2) 75%,
             transparent 75%,
             transparent);
     background-size: 30px 30px;
     animation: move-stripes 1.2s linear infinite;
 }

 /* Texto formatado - Fonte maior e peso 400 */
 .progress-text {
     color: white;
     font-size: 15px;
     /* Fonte um pouco maior */
     font-weight: 300;
     /* Peso máximo solicitado */
     padding-right: 10px;
     white-space: nowrap;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
     font-variant-numeric: tabular-nums;
     line-height: 200%;
     font-family: "Instrument Sans", sans-serif;
 }

 @keyframes move-stripes {
     from {
         background-position: 0 0;
     }

     to {
         background-position: 30px 0;
     }
 }

 @media(max-width:768px) {
     .progress-text {
         font-size: 14px;
         line-height: 140%;
     }
 }

 /*Progresso das Vendas . */

 .compra-segura{
    font-size: 14px;
    opacity: .65;
    margin-bottom: 0;
    padding-top: 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 100%;
    justify-content: center;
 }

 .footer__copyright{ 
  display: flex;
  padding: 100px 0;
  justify-content: center;
  flex-direction: column;
  gap: 100px;
  align-items: center;
}

.copyright{
  text-align: center;
}

.assinatura a img{
    max-height: 18px;
}

footer{
    background-color: #0e0b0b;
    border-top: dashed thin rgb(246, 202, 2, .15)
}