/* =========================================
   CORREÇÃO DO RODAPÉ (FOOTER) RESPONSIVO
   Adicione isso no final do seu CSS
========================================= */

@media (max-width: 1024px) {
    /* Força os blocos a ficarem um embaixo do outro */
    .footer-links {
      flex-direction: column; /* Isso faz a mágica: muda de lado-a-lado para vertical */
      align-items: center;    /* Centraliza os blocos no meio da tela */
      gap: 40px;              /* Espaço entre um bloco e outro */
    }
  
    /* Garante que o texto e os links fiquem centralizados */
    .footer-col {
      text-align: center;
      width: 100%;       /* Ocupa a largura total para não ficar espremido */
      max-width: 100%;   /* Garante que não ultrapasse a tela */
      padding: 0 20px;   /* Um respiro nas laterais para não grudar na borda */
    }
  
    /* Ajuste no tamanho da Logo para não ficar gigante no celular */
    .footer-logo {
      margin: 0 auto 15px auto; /* Centraliza a imagem da logo */
      display: block;
    }
    
    /* Ajuste no título dos links para ficar bonito */
    .footer-col h3 {
      font-size: 20px; /* Um pouco maior para destaque */
      margin-bottom: 15px;
    }
    
    /* Ajuste para os links ficarem mais fáceis de clicar */
    .footer-col ul li {
      margin-bottom: 12px;
    }
  }

@media only screen and (max-width: 375px) {

    /* --- GERAL --- */
    body {
        overflow-x: hidden; /* Evita rolagem lateral indesejada */
    }

    /* --- TOP BAR (MARQUEE) --- */
    .top-bar {
        font-size: 10px; /* Letra menor */
        padding: 5px 0;
    }
    
    .top-bar .marquee span {
        padding: 0 15px; /* Menos espaço entre frases */
    }

    /* --- LOGO --- */
    /* Removemos o posicionamento absoluto para ela fluir na tela */
    .logo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        text-align: center;
        margin: 10px 0 5px 0;
        z-index: -1 !important;
    }

    .logo img {
        height: 200px; /* Logo menor */
        margin-top: -80px;
        display: inline-block;
    }

    /* --- HEADER & NAV --- */
    .header {
        width: 100%;
        display: flex;           /* Transforma em flexbox para ajudar a centralizar o filho */
        justify-content: center; /* Força o conteúdo (o menu) a ir para o meio */
        position: relative;      
        height: auto;            
        margin-bottom: 20px;     
        z-index: 50;
    }

    .nav-wrap {
        /* 1. LIMPANDO A SUJEIRA DO DESKTOP */
        position: relative; /* Sai do absolute */
        left: auto;  
        right: auto; 
        top: auto;

        /* 2. CENTRALIZANDO NA MARRA */
        width: 90%;       /* Largura do menu */
        max-width: 350px; /* Impede que fique gigante em celulares maiores */
        margin: 0 auto;   /* O comando mágico que centraliza blocos */
        
        /* 3. POSICIONAMENTO VERTICAL (A SUBIDA) */
        margin-top: -50px; /* Ajuste esse valor se quiser subir/descer mais */
        
        /* 4. ESTILO VISUAL */
        height: 25px;     /* Altura fixa e fina */
        padding: 0 10px;  /* Espaço nas pontas pro texto não bater nos ícones */
        
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* Deixa os ícones vazarem */
    }

    .nav {
        display: flex;
        gap: 6px; /* Espaço entre os itens */
        width: 100%;
        justify-content: space-between; /* Distribui bem o espaço */
        
    }

    .nav a {
        font-size: 7px; /* Ajuste o tamanho da fonte conforme necessário */
        font-weight: 700;
        white-space: nowrap; /* Impede que o texto quebre linha */
        text-decoration: none;
        color: white;
    }

    /* Ícones da meia e bola de natal */
    .nav-icons, 
    .nav-icons2 {
        position: absolute; /* O PULO DO GATO */
        top: 40%;
        transform: translateY(-50%); /* Centraliza exato no meio vertical da barra */
        z-index: 10;
    }
    
    .nav-icons2 img {
        margin-top: 0;
    }

    .nav-icons {
        left: -45px; /* Joga um pouco para fora da barra (negativo) */
    }

    /* Posiciona o Enfeite na direita */
    .nav-icons2 {
        right: -51px; /* Joga um pouco para fora da barra (negativo) */
    }

    .nav-icons img, 
    .nav-icons2 img {
        height: 90px; /* Ícones GRANDES */
        width: auto;
        display: block;
        /* Como estão absolute, aumentar aqui NÃO aumenta a barra laranja */
    }

    /* --- HERO SECTION (O CONTEÚDO PRINCIPAL) --- */
    .hero {
        flex-direction: column; /* Um embaixo do outro */
        padding: 20px 5% 40px; /* Padding reduzido */
        gap: 0;
        text-align: center; /* Texto centralizado */
        overflow: visible;
    }

    /* --- TEXTOS HERO --- */
    .left {
        width: 100%;
        position: static; /* Remove posição relativa se atrapalhar */
    }

    h1 {
        font-size: 24px; /* Título menor */
        line-height: 1.1;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 13px;
        margin: 10px 0 20px;
    }

    /* --- BULLETS (LISTA) --- */
    .bullets {
        text-align: left; /* Mantém alinhamento do texto à esquerda para leitura */
        display: inline-block; /* Para centralizar o bloco todo */
        margin: 0 auto 30px;
        font-size: 13px;
        font-weight: 600;
    }
    
    .bullets .item {
        margin-bottom: 8px;
    }
    
    .pill {
        width: 14px;
        height: 14px;
        margin-top: 4px;
    }

    /* --- ÁREA VISUAL (Guirlanda + Moto + Caixa) --- */
    /* Aqui fazemos o layout misto da imagem: Guirlanda na esq, Moto/Caixa na dir */
    
    .right {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        height: 250px; /* Espaço reservado para as imagens */
        margin-bottom: 20px;
    }

    /* Guirlanda */
    .wreath {
        position: absolute;
        left: -20px; /* Puxa para a esquerda */
        top: 20px;
        width: 65%; /* Ocupa um pouco mais da metade */
        z-index: 5;
    }

    .wreath img {
        width: 100%;
    }

    /* Selo de 30% OFF */
    .badge {
        font-size: 24px;
        left: 20px;
        bottom: 20px;
        padding: 4px 8px;
    }
    
    .off {
        font-size: 14px;
    }

    /* Caixa de Entrega (Info Box) */
    .info-box {
        position: absolute;
        right: 0; /* Cola na direita */
        top: 100px; /* Ajuste vertical para alinhar com a guirlanda */
        width: 45%; /* Ocupa o resto do espaço */
        padding: 15px 10px;
        font-size: 11px;
        border-radius: 15px;
        background: linear-gradient(180deg, #ff4b3b, #ff8b4c); /* Ajuste para ficar avermelhado igual a foto */
        z-index: 10;
        margin-top: 700px;
    }

    /* Papai Noel e Moto - Reposicionados em cima da caixa */
    .scooter {
        right: 0px;
        top: 60px; /* Em cima da caixa */
        width: 90px;
        z-index: 15;
        margin-top: 680px;
    }

    .santa {
        right: 50px; /* Um pouco atrás da moto */
        top: 70px;
        width: 60px;
        z-index: 14;
        margin-top: 687px;
    }

    /* --- BOTÃO CTA --- */
    .cta {
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 15px;
        font-size: 16px;
        box-shadow: 0 4px 15px rgba(255, 92, 59, 0.5);
    }


/*BLOCO 02*/
/* ==========================
       SEÇÃO DE VÍDEOS (CARROSSEL)
    ==========================*/
    
    .video-testimonials {
        padding: 30px 0; /* Removemos o padding lateral da seção para o carrossel ir até a borda */
        overflow-x: hidden; /* Evita que a página toda role para o lado */
    }

    /* Ajuste dos Textos (para não encostarem na borda) */
    .video-testimonials .main-title,
    .video-testimonials .subtitle {
        padding: 0 20px; /* Devolvemos o padding só para o texto */
    }

    .video-testimonials .main-title {
        font-size: 22px; /* Ajuste de tamanho para mobile */
        margin-top: -30px;
    }

    .video-testimonials .subtitle {
        font-size: 13px;
        margin-bottom: 25px;
    }

    /* O CONTAINER MÁGICO DO CARROSSEL */
    .video-grid {
        display: flex; /* Muda de Grid para Flex (linha) */
        flex-wrap: nowrap; /* Impede que os vídeos caiam para a linha de baixo */
        overflow-x: auto; /* Habilita a rolagem horizontal */
        gap: 15px; /* Espaço entre os vídeos */
        padding: 5px 15px; /* Espaço nas pontas e embaixo para a sombra */
        
        /* A Mágica do Snap (Grudar no centro) */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; /* Rolagem suave no iPhone */
        
        /* Reset do Grid do Desktop */
        grid-template-columns: unset; 
    }

    /* Esconde a barra de rolagem feia (opcional, mas fica mais bonito) */
    .video-grid::-webkit-scrollbar {
        display: none;
    }

    /* O CARTÃO DE VÍDEO INDIVIDUAL */
    .video-container {
        /* Define que o vídeo ocupa 85% da tela (deixa uma pontinha do próximo aparecendo) */
        flex: 0 0 85%; 
        width: 85%;
        
        /* Garante que o vídeo pare sempre no meio da tela ao soltar o dedo */
        scroll-snap-align: center; 
        
        box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Sombra para dar destaque */
    }

    .video-testimonials .video-container {
        padding-top: 50%; 
    }
    
    /* Ajuste do botão CTA embaixo do carrossel */
    .cta-treatments {
        width: 90%; /* Botão largo */
        margin: 0 auto; /* Centralizado */
        display: block; /* Garante que aceite margens */
        font-size: 12px;
        padding: 15px 20px;
        white-space: nowrap; /* Texto em uma linha só */
    }

    /*BLOCO 03*/
    /* ==========================
       SEÇÃO PRODUTO (FÓRMULA) - MOBILE
    ==========================*/

    .product-details {
        padding: 40px 5%; /* Ajuste de espaçamento */
    }

    .product-details .main-title {
        font-size: 23px; /* Título principal menor */
        margin-bottom: 30px;
    }

    /* O BLOCO BRANCO PRINCIPAL */
    .product-info-block {
        flex-direction: column; /* Coloca um item embaixo do outro */
        padding: 30px 15px; /* Espaço interno menor */
        gap: 10px;
        text-align: center; /* Centraliza todo o texto */
    }

    /* --- REORDENANDO OS ELEMENTOS --- */
    /* Queremos que o texto apareça ANTES da imagem no celular */
    
    .product-text-area {
        order: 1; /* Texto sobe para primeiro lugar */
        width: 100%;
        padding: 0;
    }

    .product-image-area {
        order: 2; /* Imagem desce para segundo lugar */
        width: 100%;
        margin-top: 20px;
    }

    .christmas-ribbon-right{
        left: 130px;
    }

    /* --- ESTILOS DO TEXTO --- */
    
    /* A Tag "Fórmula Exclusiva" */
    .exclusive-formula-tag {
        margin: 0 auto 15px auto; /* Centraliza a tag */
        font-size: 12px;
        display: inline-block;
    }

    /* Ajuste do Laço para não quebrar o layout no mobile */
    .main-box-ribbon {
        width: 40px;
        top: 15px;
        right: 15px;
        /* Se o laço atrapalhar o texto em telas muito pequenas, 
           você pode remover ele com 'display: none;' */
    }

    .product-text-area h2 {
        font-size: 18px; /* Título laranja menor */
        margin-bottom: 15px;
    }

    .product-text-area p {
        font-size: 13px; /* Texto do parágrafo */
        line-height: 1.5;
        text-align: center; /* Centralizado como na foto */
        color: #555;
    }

    /* --- IMAGEM DO FRASCO --- */
    .product-showcase-img {
        width: 100%;
        max-width: 280px; /* Limita para não ficar gigante */
        height: auto;
        margin: 0 auto;
    }

   /* Centraliza a caixa que segura o botão e o chapéu */
    .cta-container {
        display: table;      /* Truque para a caixa ter o tamanho exato do botão */
        margin: 30px auto;   /* 'auto' nas laterais joga para o MEIO da tela */
    }

    /* Ajuste leve no botão */
    .cta-container a {
        /* width: 100%;  <-- REMOVA ISSO. Deixe o padding definir a largura */
        display: inline-block; 
        padding: 15px 40px;  /* Espaço interno confortável */
        font-size: 16px;     /* Um pouco maior para ler melhor */
    }

    .cta-container img{
        width: 150px;
        left: -70px;
        top: -60px;
    }



    /*BLOCO 04*/
    /* ==========================
       SEÇÃO COMO USAR (CARROSSEL)
    ==========================*/

    .how-to-use {
        padding: 40px 0; /* Tira o padding lateral para o carrossel encostar na borda */
        text-align: center;
    }

    .how-to-use .content-wrap {
        width: 100%; /* Garante uso total da largura */
    }

    /* Títulos */
    .how-to-use .section-title {
        font-size: 26px; /* Ajuste para mobile */
        margin-bottom: 15px;
        padding: 0 20px;
    }

    .how-to-use .section-subtitle {
        font-size: 14px;
        padding: 0 20px; /* Padding só no texto para não colar na borda */
        margin-bottom: 40px;
    }

    /* --- O CARROSSEL DOS PASSOS --- */
    .steps-grid {
        display: flex;          /* Transforma em linha */
        flex-wrap: nowrap;      /* Impede que caia para baixo */
        overflow-x: auto;       /* Habilita rolagem lateral */
        gap: 20px;              /* Espaço entre os cards */
        
        /* Padding estratégico:
           Cima/Baixo: 20px (para a sombra não cortar)
           Laterais: 5% (para dar um respiro no começo e fim) */
        padding: 20px 5%; 
        
        /* Efeito de travar no centro */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        
        /* Centraliza os itens se eles não preencherem a tela toda (opcional) */
        justify-content: flex-start; 
    }

    /* Esconde barra de rolagem */
    .steps-grid::-webkit-scrollbar {
        display: none;
    }

    /* --- O CARD INDIVIDUAL --- */
    .step-card {
        /* Tamanho do Card no Celular */
        flex: 0 0 85%;  /* Ocupa 85% da tela */
        width: 85%;
        max-width: 320px; /* Trava para não ficar gigante em celulares maiores */
        
        scroll-snap-align: center; /* Trava no meio da tela */
        
        margin: 0 auto; /* Ajuda no alinhamento */
        padding: 30px 20px; /* Espaço interno */
    }

    /* Ajuste da imagem dentro do círculo */
    .visual-wrapper {
        margin: 0 auto 25px auto; /* Centraliza a bola */
    }

    .step-desc {
        font-size: 15px;
    }

    /* --- BOTÃO (Centralizado) --- */
    /* Reaproveitando a classe que ajustamos no passo anterior */
    .how-to-use .cta-container {
        margin-top: 20px;
        /* O resto das propriedades de centralização já estão no CSS anterior */
    }

    .step-badge{
        border-radius: 8px;
    }

    /* 1. Centralizar o Container do Botão */
    .cta-container, 
    .how-to-use .cta-container {
        display: table !important; /* Faz a caixa ter o tamanho exato do botão */
        margin: 30px auto !important; /* 'auto' força ir para o MEIO */
        position: relative;
        width: auto !important; /* Removemos largura total para ele poder centralizar */
        left: auto;
        right: auto;
    }

    /* 2. Diminuir o Botão (para caber na tela sem cortar) */
    .cta-buy-now {
        font-size: 13px !important; /* Letra menor */
        padding: 12px 30px !important; /* Muito menos gordura nas laterais */
        width: auto !important;
        display: block;
        white-space: nowrap; /* Garante uma linha só */
    }

    /* 3. Ajustar o Chapéu (Menor e mais perto) */
    .santa-hat-icon-outside {
        width: 120px !important; /* Reduzimos o chapéu */
        top: -47px !important;  /* Ajuste vertical */
        left: -59px !important; /* Puxamos ele mais para dentro para não cortar na tela */
        transform: rotate(-10deg);
    }



    /* ==========================
       SEÇÃO GARANTIA (MOBILE)
    ==========================*/

    .guarantee-section {
        padding: 40px 10px; /* Padding seguro */
        text-align: center;
    }

    .guarantee-title {
        font-size: 24px; /* Título ajustado */
        line-height: 1.2;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .guarantee-content {
        display: flex;
        flex-direction: column; /* Um embaixo do outro */
        gap: 20px;
    }

    /* --- TROCA DE POSIÇÃO (Texto sobe, Imagem desce) --- */
    .guarantee-text-box {
        order: 1; /* Primeiro o texto */
        text-align: center;
        padding: 0 10px;
    }

    .guarantee-visuals {
        order: 2; /* Depois a imagem */
        justify-content: center; /* Centraliza o conjunto frasco+selo */
        margin-top: -28px;
    }

    .guarantee-text-box p {
        font-size: 14px;
        line-height: 1.5;
        color: #4a2c20; /* Garante cor escura legível */
    }

    .guarantee-text-box h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* --- AJUSTE DAS IMAGENS (Para caber em 320px) --- */
    .guarantee-visuals .bottle-img {
        height: 160px; /* Reduzi um pouco para não estourar */
        margin-right: -30px; /* Mantém a sobreposição */
    }

    .guarantee-visuals .seal-img {
        height: 330px !important;
    }

    /* --- SEGURANÇA DO BOTÃO (Ajuste Fino) --- */
    /* Garante que o container do botão fique no centro exato */
    .guarantee-section .cta-container {
        display: table !important; 
        margin: 30px auto !important;
        position: relative;
        width: auto !important;
        left: auto;
        right: auto;
    }

    /* Garante o tamanho do botão */
    .guarantee-section .cta-buy-now {
        font-size: 14px !important;
        padding: 15px 30px !important;
        display: block;
        white-space: nowrap;
        width: auto !important;
    }

    /* Ajuste do Chapéu para essa seção */
    .guarantee-section .santa-hat-icon-outside {
        width: 140px !important;
        top: -55px !important;
        left: -65px !important;
    }
    
    /* Selos Anvisa/ISO centralizados embaixo */
    .security-seals {
        justify-content: center;
        margin-top: 60px;
    }
    
    .security-seals img {
        height: 130px; /* Um pouco menor */
    }



    /* ==========================
       SEÇÃO PROMOÇÃO (UM EMBAIXO DO OUTRO)
    ==========================*/

    .offers-grid {
        /* Desliga o comportamento de grade/carrossel */
        display: flex;
        flex-direction: column; /* Empilha verticalmente */
        align-items: center;    /* Centraliza os cards */
        gap: 30px;              /* Espaço generoso entre um card e outro */
        
        /* Reseta rolagens laterais se tiverem sobrado */
        overflow-x: visible; 
        padding: 0 10px;        /* Margem de segurança nas laterais */
    }

    .offer-card {
        /* O card ocupa a largura disponível, mas com limite para não ficar gigante */
        width: 100%;
        max-width: 290px; 
        
        /* Removemos configurações de carrossel */
        flex: none; 
        margin: 0;
    }

    .card-title{
        margin-top: -4px;
    }

    .old-price{
        margin-top: -6px;
    }

    .price-info{
        margin-top: -76px; 
    }

    .big-price{
        margin-top: -8px;
    }

    .btn-buy-promo{
        margin-top: -20px;
    }

    /* Ajuste fino para o título da promoção não ficar gigante */
    .promo-header h2 {
        font-size: 30px;
        padding: 0 10px;
    }

    /* 1. Apertar o container do timer */
    .countdown-box {
        gap: 6px !important; /* Diminui muito o espaço entre os blocos */
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 2. Reduzir o tamanho dos quadrados brancos */
    .time-unit {
        width: 65px !important;  /* Força um tamanho pequeno (65px x 4 = 260px, cabe na tela!) */
        height: 65px !important; /* Mantém quadrado */
        border-radius: 8px;
        padding: 5px 0 !important;
    }

    /* 3. Diminuir o tamanho do Número */
    .time-unit span {
        font-size: 24px !important; /* Reduz a fonte do número */
        line-height: 1.2;
    }

    /* 4. Diminuir o texto "DIAS/HORAS" */
    .time-unit small {
        font-size: 8px !important; /* Letra bem pequena para caber */
        margin-top: 2px;
    }

    /* 5. Ajustar o Gorrinho do Noel (para não ficar gigante) */
    .timer-santa-hat {
        width: 120px !important;
        top: -55px !important;
        right: -128px !important;
    }
}





@media only screen and (max-width: 428px) {

    /* --- GERAL --- */
    body {
        overflow-x: hidden; /* Evita rolagem lateral indesejada */
    }

    /* --- TOP BAR (MARQUEE) --- */
    .top-bar {
        font-size: 10px; /* Letra menor */
        padding: 5px 0;
    }
    
    .top-bar .marquee span {
        padding: 0 15px; /* Menos espaço entre frases */
    }

    /* --- LOGO --- */
    /* Removemos o posicionamento absoluto para ela fluir na tela */
    .logo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        text-align: center;
        margin: 10px 0 5px 0;
        z-index: -1 !important;
    }

    .logo img {
        height: 200px; /* Logo menor */
        margin-top: -80px;
        display: inline-block;
    }

    /* --- HEADER & NAV --- */
    .header {
        width: 100%;
        display: flex;           /* Transforma em flexbox para ajudar a centralizar o filho */
        justify-content: center; /* Força o conteúdo (o menu) a ir para o meio */
        position: relative;      
        height: auto;            
        margin-bottom: 20px;     
        z-index: 50;
    }

    .nav-wrap {
        /* 1. LIMPANDO A SUJEIRA DO DESKTOP */
        position: relative; /* Sai do absolute */
        left: auto;  
        right: auto; 
        top: auto;

        /* 2. CENTRALIZANDO NA MARRA */
        width: 90%;       /* Largura do menu */
        max-width: 350px; /* Impede que fique gigante em celulares maiores */
        margin: 0 auto;   /* O comando mágico que centraliza blocos */
        
        /* 3. POSICIONAMENTO VERTICAL (A SUBIDA) */
        margin-top: -50px; /* Ajuste esse valor se quiser subir/descer mais */
        
        /* 4. ESTILO VISUAL */
        height: 25px;     /* Altura fixa e fina */
        padding: 0 10px;  /* Espaço nas pontas pro texto não bater nos ícones */
        
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* Deixa os ícones vazarem */
    }

    .nav {
        display: flex;
        gap: 6px; /* Espaço entre os itens */
        width: 100%;
        justify-content: space-between; /* Distribui bem o espaço */
        
    }

    .nav a {
        font-size: 9px !important; /* Ajuste o tamanho da fonte conforme necessário */
        font-weight: 700;
        white-space: nowrap; /* Impede que o texto quebre linha */
        text-decoration: none;
        color: white;
    }

    /* Ícones da meia e bola de natal */
    .nav-icons, 
    .nav-icons2 {
        position: absolute; /* O PULO DO GATO */
        top: 40%;
        transform: translateY(-50%); /* Centraliza exato no meio vertical da barra */
        z-index: 10;
    }
    
    .nav-icons2 img {
        margin-top: 0;
    }

    .nav-icons {
        left: -45px; /* Joga um pouco para fora da barra (negativo) */
    }

    /* Posiciona o Enfeite na direita */
    .nav-icons2 {
        right: -51px; /* Joga um pouco para fora da barra (negativo) */
    }

    .nav-icons img, 
    .nav-icons2 img {
        height: 90px; /* Ícones GRANDES */
        width: auto;
        display: block;
        /* Como estão absolute, aumentar aqui NÃO aumenta a barra laranja */
    }

    /* --- HERO SECTION (O CONTEÚDO PRINCIPAL) --- */
    .hero {
        flex-direction: column; /* Um embaixo do outro */
        padding: 20px 5% 40px; /* Padding reduzido */
        gap: 0;
        text-align: center; /* Texto centralizado */
        overflow: visible;
    }

    /* --- TEXTOS HERO --- */
    .left {
        width: 100%;
        position: static; /* Remove posição relativa se atrapalhar */
    }

    h1 {
        font-size: 40px !important; /* Título menor */
        line-height: 1.1;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 13px;
        margin: 10px 0 20px;
    }

    /* --- BULLETS (LISTA) --- */
    .bullets {
        text-align: left; /* Mantém alinhamento do texto à esquerda para leitura */
        display: inline-block; /* Para centralizar o bloco todo */
        margin: 0 auto 30px;
        font-size: 15px !important;
        font-weight: 600;
    }
    
    .bullets .item {
        margin-bottom: 8px;
    }
    
    .pill {
        width: 14px;
        height: 14px;
        margin-top: 4px;
    }

    /* --- ÁREA VISUAL (Guirlanda + Moto + Caixa) --- */
    /* Aqui fazemos o layout misto da imagem: Guirlanda na esq, Moto/Caixa na dir */
    
    .right {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        height: 250px; /* Espaço reservado para as imagens */
        margin-bottom: 20px;
    }

    /* Guirlanda */
    .wreath {
        position: absolute;
        left: -20px; /* Puxa para a esquerda */
        top: 20px;
        width: 65%; /* Ocupa um pouco mais da metade */
        z-index: 5;
    }

    .wreath img {
        width: 100%;
    }

    /* Selo de 30% OFF */
    .badge {
        font-size: 24px;
        left: 20px;
        bottom: 20px;
        padding: 4px 8px;
    }
    
    .off {
        font-size: 14px;
    }

    /* Caixa de Entrega (Info Box) */
    .info-box {
        position: absolute;
        right: 0; /* Cola na direita */
        top: 100px; /* Ajuste vertical para alinhar com a guirlanda */
        left: 230px;
        width: 35% !important; /* Ocupa o resto do espaço */
        padding: 15px 10px;
        font-size: 11px;
        border-radius: 15px;
        background: linear-gradient(180deg, #ff4b3b, #ff8b4c); /* Ajuste para ficar avermelhado igual a foto */
        z-index: 10;
        margin-top: 800px !important;
    }

    /* Papai Noel e Moto - Reposicionados em cima da caixa */
    .scooter {
        right: 0px;
        top: 60px; /* Em cima da caixa */
        left: 280px;
        width: 90px;
        z-index: 15;
        margin-top: 780px !important;
    }

    .santa {
        right: 50px; /* Um pouco atrás da moto */
        top: 70px;
        left: 240px;
        width: 60px;
        z-index: 14;
        margin-top: 787px !important;
    }

    /* --- BOTÃO CTA --- */
    .cta {
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 15px;
        font-size: 16px;
        box-shadow: 0 4px 15px rgba(255, 92, 59, 0.5);
    }


/*BLOCO 02*/
/* ==========================
       SEÇÃO DE VÍDEOS (CARROSSEL)
    ==========================*/
    
    .video-testimonials {
        padding: 30px 0; /* Removemos o padding lateral da seção para o carrossel ir até a borda */
        overflow-x: hidden; /* Evita que a página toda role para o lado */
    }

    /* Ajuste dos Textos (para não encostarem na borda) */
    .video-testimonials .main-title,
    .video-testimonials .subtitle {
        padding: 0 20px; /* Devolvemos o padding só para o texto */
    }

    .video-testimonials .main-title {
        font-size: 22px; /* Ajuste de tamanho para mobile */
        margin-top: -30px;
    }

    .video-testimonials .subtitle {
        font-size: 13px;
        margin-bottom: 25px;
    }

    /* O CONTAINER MÁGICO DO CARROSSEL */
    .video-grid {
        display: flex; /* Muda de Grid para Flex (linha) */
        flex-wrap: nowrap; /* Impede que os vídeos caiam para a linha de baixo */
        overflow-x: auto; /* Habilita a rolagem horizontal */
        gap: 15px; /* Espaço entre os vídeos */
        padding: 5px 15px; /* Espaço nas pontas e embaixo para a sombra */
        
        /* A Mágica do Snap (Grudar no centro) */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; /* Rolagem suave no iPhone */
        
        /* Reset do Grid do Desktop */
        grid-template-columns: unset; 
    }

    /* Esconde a barra de rolagem feia (opcional, mas fica mais bonito) */
    .video-grid::-webkit-scrollbar {
        display: none;
    }

    /* O CARTÃO DE VÍDEO INDIVIDUAL */
    .video-container {
        /* Define que o vídeo ocupa 85% da tela (deixa uma pontinha do próximo aparecendo) */
        flex: 0 0 85%; 
        width: 85%;
        
        /* Garante que o vídeo pare sempre no meio da tela ao soltar o dedo */
        scroll-snap-align: center; 
        
        box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Sombra para dar destaque */
    }

    .video-testimonials .video-container {
        padding-top: 50%; 
    }
    
    /* Ajuste do botão CTA embaixo do carrossel */
    .cta-treatments {
        width: 90%; /* Botão largo */
        margin: 0 auto; /* Centralizado */
        display: block; /* Garante que aceite margens */
        font-size: 15px !important;
        padding: 15px 20px;
        white-space: nowrap; /* Texto em uma linha só */
    }

    /*BLOCO 03*/
    /* ==========================
       SEÇÃO PRODUTO (FÓRMULA) - MOBILE
    ==========================*/

    .product-details {
        padding: 40px 5%; /* Ajuste de espaçamento */
    }

    .product-details .main-title {
        font-size: 23px; /* Título principal menor */
        margin-bottom: 30px;
    }

    /* O BLOCO BRANCO PRINCIPAL */
    .product-info-block {
        flex-direction: column; /* Coloca um item embaixo do outro */
        padding: 30px 15px; /* Espaço interno menor */
        gap: 10px;
        text-align: center; /* Centraliza todo o texto */
    }

    /* --- REORDENANDO OS ELEMENTOS --- */
    /* Queremos que o texto apareça ANTES da imagem no celular */
    
    .product-text-area {
        order: 1; /* Texto sobe para primeiro lugar */
        width: 100%;
        padding: 0;
    }

    .product-image-area {
        order: 2; /* Imagem desce para segundo lugar */
        width: 100%;
        margin-top: 20px;
    }

    .christmas-ribbon-right{
        left: 130px;
    }

    /* --- ESTILOS DO TEXTO --- */
    
    /* A Tag "Fórmula Exclusiva" */
    .exclusive-formula-tag {
        margin: 0 auto 15px auto; /* Centraliza a tag */
        font-size: 12px;
        display: inline-block;
    }

    /* Ajuste do Laço para não quebrar o layout no mobile */
    .main-box-ribbon {
        width: 40px;
        top: 15px;
        right: 15px;
        /* Se o laço atrapalhar o texto em telas muito pequenas, 
           você pode remover ele com 'display: none;' */
    }

    .product-text-area h2 {
        font-size: 18px; /* Título laranja menor */
        margin-bottom: 15px;
    }

    .product-text-area p {
        font-size: 13px; /* Texto do parágrafo */
        line-height: 1.5;
        text-align: center; /* Centralizado como na foto */
        color: #555;
    }

    /* --- IMAGEM DO FRASCO --- */
    .product-showcase-img {
        width: 100%;
        max-width: 280px; /* Limita para não ficar gigante */
        height: auto;
        margin: 0 auto;
    }

   /* Centraliza a caixa que segura o botão e o chapéu */
    .cta-container {
        display: table;      /* Truque para a caixa ter o tamanho exato do botão */
        margin: 30px auto;   /* 'auto' nas laterais joga para o MEIO da tela */
    }

    /* Ajuste leve no botão */
    .cta-container a {
        /* width: 100%;  <-- REMOVA ISSO. Deixe o padding definir a largura */
        display: inline-block; 
        padding: 15px 40px;  /* Espaço interno confortável */
        font-size: 20px !important;     /* Um pouco maior para ler melhor */
    }

    .cta-container img{
        width: 150px;
        left: -70px;
        top: -60px;
    }



    /*BLOCO 04*/
    /* ==========================
       SEÇÃO COMO USAR (CARROSSEL)
    ==========================*/

    .how-to-use {
        padding: 40px 0; /* Tira o padding lateral para o carrossel encostar na borda */
        text-align: center;
    }

    .how-to-use .content-wrap {
        width: 100%; /* Garante uso total da largura */
    }

    /* Títulos */
    .how-to-use .section-title {
        font-size: 26px; /* Ajuste para mobile */
        margin-bottom: 15px;
        padding: 0 20px;
    }

    .how-to-use .section-subtitle {
        font-size: 14px;
        padding: 0 20px; /* Padding só no texto para não colar na borda */
        margin-bottom: 40px;
    }

    /* --- O CARROSSEL DOS PASSOS --- */
    .steps-grid {
        display: flex;          /* Transforma em linha */
        flex-wrap: nowrap;      /* Impede que caia para baixo */
        overflow-x: auto;       /* Habilita rolagem lateral */
        gap: 20px;              /* Espaço entre os cards */
        
        /* Padding estratégico:
           Cima/Baixo: 20px (para a sombra não cortar)
           Laterais: 5% (para dar um respiro no começo e fim) */
        padding: 20px 5%; 
        
        /* Efeito de travar no centro */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        
        /* Centraliza os itens se eles não preencherem a tela toda (opcional) */
        justify-content: flex-start; 
    }

    /* Esconde barra de rolagem */
    .steps-grid::-webkit-scrollbar {
        display: none;
    }

    /* --- O CARD INDIVIDUAL --- */
    .step-card {
        /* Tamanho do Card no Celular */
        flex: 0 0 85%;  /* Ocupa 85% da tela */
        width: 85%;
        max-width: 320px; /* Trava para não ficar gigante em celulares maiores */
        
        scroll-snap-align: center; /* Trava no meio da tela */
        
        margin: 0 auto; /* Ajuda no alinhamento */
        padding: 30px 20px; /* Espaço interno */
    }

    /* Ajuste da imagem dentro do círculo */
    .visual-wrapper {
        margin: 0 auto 25px auto; /* Centraliza a bola */
    }

    .step-desc {
        font-size: 15px;
    }

    /* --- BOTÃO (Centralizado) --- */
    /* Reaproveitando a classe que ajustamos no passo anterior */
    .how-to-use .cta-container {
        margin-top: 20px;
        /* O resto das propriedades de centralização já estão no CSS anterior */
    }

    .step-badge{
        border-radius: 8px;
    }

    /* 1. Centralizar o Container do Botão */
    .cta-container, 
    .how-to-use .cta-container {
        display: table !important; /* Faz a caixa ter o tamanho exato do botão */
        margin: 30px auto !important; /* 'auto' força ir para o MEIO */
        position: relative;
        width: auto !important; /* Removemos largura total para ele poder centralizar */
        left: auto;
        right: auto;
    }

    /* 2. Diminuir o Botão (para caber na tela sem cortar) */
    .cta-buy-now {
        font-size: 13px !important; /* Letra menor */
        padding: 12px 30px !important; /* Muito menos gordura nas laterais */
        width: auto !important;
        display: block;
        white-space: nowrap; /* Garante uma linha só */
    }

    /* 3. Ajustar o Chapéu (Menor e mais perto) */
    .santa-hat-icon-outside {
        width: 120px !important; /* Reduzimos o chapéu */
        top: -47px !important;  /* Ajuste vertical */
        left: -59px !important; /* Puxamos ele mais para dentro para não cortar na tela */
        transform: rotate(-10deg);
    }



    /* ==========================
       SEÇÃO GARANTIA (MOBILE)
    ==========================*/

    .guarantee-section {
        padding: 40px 10px; /* Padding seguro */
        text-align: center;
    }

    .guarantee-title {
        font-size: 24px; /* Título ajustado */
        line-height: 1.2;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .guarantee-content {
        display: flex;
        flex-direction: column; /* Um embaixo do outro */
        gap: 20px;
    }

    /* --- TROCA DE POSIÇÃO (Texto sobe, Imagem desce) --- */
    .guarantee-text-box {
        order: 1; /* Primeiro o texto */
        text-align: center;
        padding: 0 10px;
    }

    .guarantee-visuals {
        order: 2; /* Depois a imagem */
        justify-content: center; /* Centraliza o conjunto frasco+selo */
        margin-top: -28px;
    }

    .guarantee-text-box p {
        font-size: 14px;
        line-height: 1.5;
        color: #4a2c20; /* Garante cor escura legível */
    }

    .guarantee-text-box h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* --- AJUSTE DAS IMAGENS (Para caber em 320px) --- */
    .guarantee-visuals .bottle-img {
        height: 160px; /* Reduzi um pouco para não estourar */
        margin-right: -30px; /* Mantém a sobreposição */
    }

    .guarantee-visuals .seal-img {
        height: 330px !important;
    }

    /* --- SEGURANÇA DO BOTÃO (Ajuste Fino) --- */
    /* Garante que o container do botão fique no centro exato */
    .guarantee-section .cta-container {
        display: table !important; 
        margin: 30px auto !important;
        position: relative;
        width: auto !important;
        left: auto;
        right: auto;
    }

    /* Garante o tamanho do botão */
    .guarantee-section .cta-buy-now {
        
        padding: 15px 30px !important;
        display: block;
        white-space: nowrap;
        width: auto !important;
    }


    /* Ajuste do Chapéu para essa seção */
    .guarantee-section .santa-hat-icon-outside {
        width: 140px !important;
        top: -55px !important;
        left: -65px !important;
    }
    
    /* Selos Anvisa/ISO centralizados embaixo */
    .security-seals {
        justify-content: center;
        margin-top: 60px;
    }
    
    .security-seals img {
        height: 130px; /* Um pouco menor */
    }



    /* ==========================
       SEÇÃO PROMOÇÃO (UM EMBAIXO DO OUTRO)
    ==========================*/

    .offers-grid {
        /* Desliga o comportamento de grade/carrossel */
        display: flex;
        flex-direction: column; /* Empilha verticalmente */
        align-items: center;    /* Centraliza os cards */
        gap: 30px;              /* Espaço generoso entre um card e outro */
        
        /* Reseta rolagens laterais se tiverem sobrado */
        overflow-x: visible; 
        padding: 0 10px;        /* Margem de segurança nas laterais */
    }

    .offer-card {
        /* O card ocupa a largura disponível, mas com limite para não ficar gigante */
        width: 100%;
        max-width: 290px; 
        
        /* Removemos configurações de carrossel */
        flex: none; 
        margin: 0;
    }

    .card-title{
        margin-top: -4px;
    }

    .old-price{
        margin-top: -6px;
    }

    .price-info{
        margin-top: -76px; 
    }

    .big-price{
        margin-top: -8px;
    }

    .btn-buy-promo{
        margin-top: -20px;
    }

    /* Ajuste fino para o título da promoção não ficar gigante */
    .promo-header h2 {
        font-size: 30px;
        padding: 0 10px;
    }

    /* 1. Apertar o container do timer */
    .countdown-box {
        gap: 6px !important; /* Diminui muito o espaço entre os blocos */
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 2. Reduzir o tamanho dos quadrados brancos */
    .time-unit {
        width: 65px !important;  /* Força um tamanho pequeno (65px x 4 = 260px, cabe na tela!) */
        height: 65px !important; /* Mantém quadrado */
        border-radius: 8px;
        padding: 5px 0 !important;
    }

    /* 3. Diminuir o tamanho do Número */
    .time-unit span {
        font-size: 24px !important; /* Reduz a fonte do número */
        line-height: 1.2;
    }

    /* 4. Diminuir o texto "DIAS/HORAS" */
    .time-unit small {
        font-size: 8px !important; /* Letra bem pequena para caber */
        margin-top: 2px;
    }

    /* 5. Ajustar o Gorrinho do Noel (para não ficar gigante) */
    .timer-santa-hat {
        width: 120px !important;
        top: -55px !important;
        right: -128px !important;
    }
}

/* =========================================
   EXTRA: CELULARES PEQUENOS (iPhone SE, Antigos)
   (Adicione isso NO FINAL do seu CSS)
========================================= */

@media (max-width: 400px) {
  
    /* Reduz um pouco mais o título principal */
    h1 {
      font-size: 26px; 
      line-height: 1.2;
    }
  
    /* Ajusta os botões para não estourarem a tela */
    .cta, .cta-treatments, .cta-buy-now {
      padding: 15px 20px; /* Menos preenchimento lateral */
      font-size: 16px;    /* Letra um pouco menor */
      width: 100%;        /* Ocupa a largura toda disponível */
      box-sizing: border-box; /* Garante que o padding não aumente a largura */
    }
  
    /* Ajuste no Timer de Natal para caber na tela */
    .countdown-box {
      gap: 2px; /* Junta mais os quadradinhos */
    }
  
    .time-unit {
      width: 55px;
      height: 55px;
    }
  
    .time-unit span {
      font-size: 20px;
    }
    
    /* Ajuste nos cards de passos (Como usar) */
    .step-card {
      width: 100%; /* Garante que não fique maior que a tela */
      padding: 20px 10px;
    }
  }

@media only screen and (max-width: 440px) {

    /* --- GERAL --- */
    body {
        overflow-x: hidden; /* Evita rolagem lateral indesejada */
    }

    /* --- TOP BAR (MARQUEE) --- */
    .top-bar {
        font-size: 10px; /* Letra menor */
        padding: 5px 0;
    }
    
    .top-bar .marquee span {
        padding: 0 15px; /* Menos espaço entre frases */
    }

    /* --- LOGO --- */
    /* Removemos o posicionamento absoluto para ela fluir na tela */
    .logo {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        text-align: center;
        margin: 10px 0 5px 0;
        z-index: -1 !important;
    }

    .logo img {
        height: 200px; /* Logo menor */
        margin-top: -80px;
        display: inline-block;
    }

    /* --- HEADER & NAV --- */
    .header {
        width: 100%;
        display: flex;           /* Transforma em flexbox para ajudar a centralizar o filho */
        justify-content: center; /* Força o conteúdo (o menu) a ir para o meio */
        position: relative;      
        height: auto;            
        margin-bottom: 20px;     
        z-index: 50;
    }

    .nav-wrap {
        /* 1. LIMPANDO A SUJEIRA DO DESKTOP */
        position: relative; /* Sai do absolute */
        left: auto;  
        right: auto; 
        top: auto;

        /* 2. CENTRALIZANDO NA MARRA */
        width: 90%;       /* Largura do menu */
        max-width: 350px; /* Impede que fique gigante em celulares maiores */
        margin: 0 auto;   /* O comando mágico que centraliza blocos */
        
        /* 3. POSICIONAMENTO VERTICAL (A SUBIDA) */
        margin-top: -50px; /* Ajuste esse valor se quiser subir/descer mais */
        
        /* 4. ESTILO VISUAL */
        height: 25px;     /* Altura fixa e fina */
        padding: 0 10px;  /* Espaço nas pontas pro texto não bater nos ícones */
        
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible; /* Deixa os ícones vazarem */
    }

    .nav {
        display: flex;
        gap: 6px; /* Espaço entre os itens */
        width: 100%;
        justify-content: space-between; /* Distribui bem o espaço */
        
    }

    .nav a {
        font-size: 9px !important; /* Ajuste o tamanho da fonte conforme necessário */
        font-weight: 700;
        white-space: nowrap; /* Impede que o texto quebre linha */
        text-decoration: none;
        color: white;
    }

    /* Ícones da meia e bola de natal */
    .nav-icons, 
    .nav-icons2 {
        position: absolute; /* O PULO DO GATO */
        top: 40%;
        transform: translateY(-50%); /* Centraliza exato no meio vertical da barra */
        z-index: 10;
    }
    
    .nav-icons2 img {
        margin-top: 0;
    }

    .nav-icons {
        left: -45px; /* Joga um pouco para fora da barra (negativo) */
    }

    /* Posiciona o Enfeite na direita */
    .nav-icons2 {
        right: -51px; /* Joga um pouco para fora da barra (negativo) */
    }

    .nav-icons img, 
    .nav-icons2 img {
        height: 90px; /* Ícones GRANDES */
        width: auto;
        display: block;
        /* Como estão absolute, aumentar aqui NÃO aumenta a barra laranja */
    }

    /* --- HERO SECTION (O CONTEÚDO PRINCIPAL) --- */
    .hero {
        flex-direction: column; /* Um embaixo do outro */
        padding: 20px 5% 40px; /* Padding reduzido */
        gap: 0;
        text-align: center; /* Texto centralizado */
        overflow: visible;
    }

    /* --- TEXTOS HERO --- */
    .left {
        width: 100%;
        position: static; /* Remove posição relativa se atrapalhar */
    }

    h1 {
        font-size: 40px !important; /* Título menor */
        line-height: 1.1;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 13px;
        margin: 10px 0 20px;
    }

    /* --- BULLETS (LISTA) --- */
    .bullets {
        text-align: left; /* Mantém alinhamento do texto à esquerda para leitura */
        display: inline-block; /* Para centralizar o bloco todo */
        margin: 0 auto 30px;
        font-size: 15px !important;
        font-weight: 600;
    }
    
    .bullets .item {
        margin-bottom: 8px;
    }
    
    .pill {
        width: 14px;
        height: 14px;
        margin-top: 4px;
    }

    /* --- ÁREA VISUAL (Guirlanda + Moto + Caixa) --- */
    /* Aqui fazemos o layout misto da imagem: Guirlanda na esq, Moto/Caixa na dir */
    
    .right {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        height: 250px; /* Espaço reservado para as imagens */
        margin-bottom: 20px;
    }

    /* Guirlanda */
    .wreath {
        position: absolute;
        left: -20px; /* Puxa para a esquerda */
        top: 20px;
        width: 65%; /* Ocupa um pouco mais da metade */
        z-index: 5;
    }

    .wreath img {
        width: 100%;
    }

    /* Selo de 30% OFF */
    .badge {
        font-size: 24px;
        left: 20px;
        bottom: 20px;
        padding: 4px 8px;
    }
    
    .off {
        font-size: 14px;
    }

    /* Caixa de Entrega (Info Box) */
    .info-box {
        position: absolute;
        right: 0; /* Cola na direita */
        top: 100px; /* Ajuste vertical para alinhar com a guirlanda */
        left: 230px;
        width: 35% !important; /* Ocupa o resto do espaço */
        padding: 15px 10px;
        font-size: 11px;
        border-radius: 15px;
        background: linear-gradient(180deg, #ff4b3b, #ff8b4c); /* Ajuste para ficar avermelhado igual a foto */
        z-index: 10;
        margin-top: 800px !important;
    }

    /* Papai Noel e Moto - Reposicionados em cima da caixa */
    .scooter {
        right: 0px;
        top: 60px; /* Em cima da caixa */
        left: 280px;
        width: 90px;
        z-index: 15;
        margin-top: 780px !important;
    }

    .santa {
        right: 50px; /* Um pouco atrás da moto */
        top: 70px;
        left: 240px;
        width: 60px;
        z-index: 14;
        margin-top: 787px !important;
    }

    /* --- BOTÃO CTA --- */
    .cta {
        display: block;
        width: 100%;
        margin-top: 20px;
        padding: 15px;
        font-size: 16px;
        box-shadow: 0 4px 15px rgba(255, 92, 59, 0.5);
    }


/*BLOCO 02*/
/* ==========================
       SEÇÃO DE VÍDEOS (CARROSSEL)
    ==========================*/
    
    .video-testimonials {
        padding: 30px 0; /* Removemos o padding lateral da seção para o carrossel ir até a borda */
        overflow-x: hidden; /* Evita que a página toda role para o lado */
    }

    /* Ajuste dos Textos (para não encostarem na borda) */
    .video-testimonials .main-title,
    .video-testimonials .subtitle {
        padding: 0 20px; /* Devolvemos o padding só para o texto */
    }

    .video-testimonials .main-title {
        font-size: 22px; /* Ajuste de tamanho para mobile */
        margin-top: -30px;
    }

    .video-testimonials .subtitle {
        font-size: 13px;
        margin-bottom: 25px;
    }

    /* O CONTAINER MÁGICO DO CARROSSEL */
    .video-grid {
        display: flex; /* Muda de Grid para Flex (linha) */
        flex-wrap: nowrap; /* Impede que os vídeos caiam para a linha de baixo */
        overflow-x: auto; /* Habilita a rolagem horizontal */
        gap: 15px; /* Espaço entre os vídeos */
        padding: 5px 15px; /* Espaço nas pontas e embaixo para a sombra */
        
        /* A Mágica do Snap (Grudar no centro) */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; /* Rolagem suave no iPhone */
        
        /* Reset do Grid do Desktop */
        grid-template-columns: unset; 
    }

    /* Esconde a barra de rolagem feia (opcional, mas fica mais bonito) */
    .video-grid::-webkit-scrollbar {
        display: none;
    }

    /* O CARTÃO DE VÍDEO INDIVIDUAL */
    .video-container {
        /* Define que o vídeo ocupa 85% da tela (deixa uma pontinha do próximo aparecendo) */
        flex: 0 0 85%; 
        width: 85%;
        
        /* Garante que o vídeo pare sempre no meio da tela ao soltar o dedo */
        scroll-snap-align: center; 
        
        box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Sombra para dar destaque */
    }

    .video-testimonials .video-container {
        padding-top: 50%; 
    }
    
    /* Ajuste do botão CTA embaixo do carrossel */
    .cta-treatments {
        width: 90%; /* Botão largo */
        margin: 0 auto; /* Centralizado */
        display: block; /* Garante que aceite margens */
        font-size: 15px !important;
        padding: 15px 20px;
        white-space: nowrap; /* Texto em uma linha só */
    }

    /*BLOCO 03*/
    /* ==========================
       SEÇÃO PRODUTO (FÓRMULA) - MOBILE
    ==========================*/

    .product-details {
        padding: 40px 5%; /* Ajuste de espaçamento */
    }

    .product-details .main-title {
        font-size: 23px; /* Título principal menor */
        margin-bottom: 30px;
    }

    /* O BLOCO BRANCO PRINCIPAL */
    .product-info-block {
        flex-direction: column; /* Coloca um item embaixo do outro */
        padding: 30px 15px; /* Espaço interno menor */
        gap: 10px;
        text-align: center; /* Centraliza todo o texto */
    }

    /* --- REORDENANDO OS ELEMENTOS --- */
    /* Queremos que o texto apareça ANTES da imagem no celular */
    
    .product-text-area {
        order: 1; /* Texto sobe para primeiro lugar */
        width: 100%;
        padding: 0;
    }

    .product-image-area {
        order: 2; /* Imagem desce para segundo lugar */
        width: 100%;
        margin-top: 20px;
    }

    .christmas-ribbon-right{
        left: 130px;
    }

    /* --- ESTILOS DO TEXTO --- */
    
    /* A Tag "Fórmula Exclusiva" */
    .exclusive-formula-tag {
        margin: 0 auto 15px auto; /* Centraliza a tag */
        font-size: 12px;
        display: inline-block;
    }

    /* Ajuste do Laço para não quebrar o layout no mobile */
    .main-box-ribbon {
        width: 40px;
        top: 15px;
        right: 15px;
        /* Se o laço atrapalhar o texto em telas muito pequenas, 
           você pode remover ele com 'display: none;' */
    }

    .product-text-area h2 {
        font-size: 18px; /* Título laranja menor */
        margin-bottom: 15px;
    }

    .product-text-area p {
        font-size: 13px; /* Texto do parágrafo */
        line-height: 1.5;
        text-align: center; /* Centralizado como na foto */
        color: #555;
    }

    /* --- IMAGEM DO FRASCO --- */
    .product-showcase-img {
        width: 100%;
        max-width: 280px; /* Limita para não ficar gigante */
        height: auto;
        margin: 0 auto;
    }

   /* Centraliza a caixa que segura o botão e o chapéu */
    .cta-container {
        display: table;      /* Truque para a caixa ter o tamanho exato do botão */
        margin: 30px auto;   /* 'auto' nas laterais joga para o MEIO da tela */
    }

    /* Ajuste leve no botão */
    .cta-container a {
        /* width: 100%;  <-- REMOVA ISSO. Deixe o padding definir a largura */
        display: inline-block; 
        padding: 15px 40px;  /* Espaço interno confortável */
        font-size: 20px !important;     /* Um pouco maior para ler melhor */
    }

    .cta-container img{
        width: 150px;
        left: -70px;
        top: -60px;
    }



    /*BLOCO 04*/
    /* ==========================
       SEÇÃO COMO USAR (CARROSSEL)
    ==========================*/

    .how-to-use {
        padding: 40px 0; /* Tira o padding lateral para o carrossel encostar na borda */
        text-align: center;
    }

    .how-to-use .content-wrap {
        width: 100%; /* Garante uso total da largura */
    }

    /* Títulos */
    .how-to-use .section-title {
        font-size: 26px; /* Ajuste para mobile */
        margin-bottom: 15px;
        padding: 0 20px;
    }

    .how-to-use .section-subtitle {
        font-size: 14px;
        padding: 0 20px; /* Padding só no texto para não colar na borda */
        margin-bottom: 40px;
    }

    /* --- O CARROSSEL DOS PASSOS --- */
    .steps-grid {
        display: flex;          /* Transforma em linha */
        flex-wrap: nowrap;      /* Impede que caia para baixo */
        overflow-x: auto;       /* Habilita rolagem lateral */
        gap: 20px;              /* Espaço entre os cards */
        
        /* Padding estratégico:
           Cima/Baixo: 20px (para a sombra não cortar)
           Laterais: 5% (para dar um respiro no começo e fim) */
        padding: 20px 5%; 
        
        /* Efeito de travar no centro */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        
        /* Centraliza os itens se eles não preencherem a tela toda (opcional) */
        justify-content: flex-start; 
    }

    /* Esconde barra de rolagem */
    .steps-grid::-webkit-scrollbar {
        display: none;
    }

    /* --- O CARD INDIVIDUAL --- */
    .step-card {
        /* Tamanho do Card no Celular */
        flex: 0 0 85%;  /* Ocupa 85% da tela */
        width: 85%;
        max-width: 320px; /* Trava para não ficar gigante em celulares maiores */
        
        scroll-snap-align: center; /* Trava no meio da tela */
        
        margin: 0 auto; /* Ajuda no alinhamento */
        padding: 30px 20px; /* Espaço interno */
    }

    /* Ajuste da imagem dentro do círculo */
    .visual-wrapper {
        margin: 0 auto 25px auto; /* Centraliza a bola */
    }

    .step-desc {
        font-size: 15px;
    }

    /* --- BOTÃO (Centralizado) --- */
    /* Reaproveitando a classe que ajustamos no passo anterior */
    .how-to-use .cta-container {
        margin-top: 20px;
        /* O resto das propriedades de centralização já estão no CSS anterior */
    }

    .step-badge{
        border-radius: 8px;
    }

    /* 1. Centralizar o Container do Botão */
    .cta-container, 
    .how-to-use .cta-container {
        display: table !important; /* Faz a caixa ter o tamanho exato do botão */
        margin: 30px auto !important; /* 'auto' força ir para o MEIO */
        position: relative;
        width: auto !important; /* Removemos largura total para ele poder centralizar */
        left: auto;
        right: auto;
    }

    /* 2. Diminuir o Botão (para caber na tela sem cortar) */
    .cta-buy-now {
        font-size: 13px !important; /* Letra menor */
        padding: 12px 30px !important; /* Muito menos gordura nas laterais */
        width: auto !important;
        display: block;
        white-space: nowrap; /* Garante uma linha só */
    }

    /* 3. Ajustar o Chapéu (Menor e mais perto) */
    .santa-hat-icon-outside {
        width: 120px !important; /* Reduzimos o chapéu */
        top: -47px !important;  /* Ajuste vertical */
        left: -59px !important; /* Puxamos ele mais para dentro para não cortar na tela */
        transform: rotate(-10deg);
    }



    /* ==========================
       SEÇÃO GARANTIA (MOBILE)
    ==========================*/

    .guarantee-section {
        padding: 40px 10px; /* Padding seguro */
        text-align: center;
    }

    .guarantee-title {
        font-size: 24px; /* Título ajustado */
        line-height: 1.2;
        margin-bottom: 20px;
        padding: 0 10px;
    }

    .guarantee-content {
        display: flex;
        flex-direction: column; /* Um embaixo do outro */
        gap: 20px;
    }

    /* --- TROCA DE POSIÇÃO (Texto sobe, Imagem desce) --- */
    .guarantee-text-box {
        order: 1; /* Primeiro o texto */
        text-align: center;
        padding: 0 10px;
    }

    .guarantee-visuals {
        order: 2; /* Depois a imagem */
        justify-content: center; /* Centraliza o conjunto frasco+selo */
        margin-top: -28px;
    }

    .guarantee-text-box p {
        font-size: 14px;
        line-height: 1.5;
        color: #4a2c20; /* Garante cor escura legível */
    }

    .guarantee-text-box h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    /* --- AJUSTE DAS IMAGENS (Para caber em 320px) --- */
    .guarantee-visuals .bottle-img {
        height: 160px; /* Reduzi um pouco para não estourar */
        margin-right: -30px; /* Mantém a sobreposição */
    }

    .guarantee-visuals .seal-img {
        height: 330px !important;
    }

    /* --- SEGURANÇA DO BOTÃO (Ajuste Fino) --- */
    /* Garante que o container do botão fique no centro exato */
    .guarantee-section .cta-container {
        display: table !important; 
        margin: 30px auto !important;
        position: relative;
        width: auto !important;
        left: auto;
        right: auto;
    }

    /* Garante o tamanho do botão */
    .guarantee-section .cta-buy-now {
        
        padding: 15px 30px !important;
        display: block;
        white-space: nowrap;
        width: auto !important;
    }


    /* Ajuste do Chapéu para essa seção */
    .guarantee-section .santa-hat-icon-outside {
        width: 140px !important;
        top: -55px !important;
        left: -65px !important;
    }
    
    /* Selos Anvisa/ISO centralizados embaixo */
    .security-seals {
        justify-content: center;
        margin-top: 60px;
    }
    
    .security-seals img {
        height: 130px; /* Um pouco menor */
    }



    /* ==========================
       SEÇÃO PROMOÇÃO (UM EMBAIXO DO OUTRO)
    ==========================*/

    .offers-grid {
        /* Desliga o comportamento de grade/carrossel */
        display: flex;
        flex-direction: column; /* Empilha verticalmente */
        align-items: center;    /* Centraliza os cards */
        gap: 30px;              /* Espaço generoso entre um card e outro */
        
        /* Reseta rolagens laterais se tiverem sobrado */
        overflow-x: visible; 
        padding: 0 10px;        /* Margem de segurança nas laterais */
    }

    .offer-card {
        /* O card ocupa a largura disponível, mas com limite para não ficar gigante */
        width: 100%;
        max-width: 290px; 
        
        /* Removemos configurações de carrossel */
        flex: none; 
        margin: 0;
    }

    .card-title{
        margin-top: -4px;
    }

    .old-price{
        margin-top: -6px;
    }

    .price-info{
        margin-top: -76px; 
    }

    .big-price{
        margin-top: -8px;
    }

    .btn-buy-promo{
        margin-top: -20px;
    }

    /* Ajuste fino para o título da promoção não ficar gigante */
    .promo-header h2 {
        font-size: 30px;
        padding: 0 10px;
    }

    /* 1. Apertar o container do timer */
    .countdown-box {
        gap: 6px !important; /* Diminui muito o espaço entre os blocos */
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    /* 2. Reduzir o tamanho dos quadrados brancos */
    .time-unit {
        width: 65px !important;  /* Força um tamanho pequeno (65px x 4 = 260px, cabe na tela!) */
        height: 65px !important; /* Mantém quadrado */
        border-radius: 8px;
        padding: 5px 0 !important;
    }

    /* 3. Diminuir o tamanho do Número */
    .time-unit span {
        font-size: 24px !important; /* Reduz a fonte do número */
        line-height: 1.2;
    }

    /* 4. Diminuir o texto "DIAS/HORAS" */
    .time-unit small {
        font-size: 8px !important; /* Letra bem pequena para caber */
        margin-top: 2px;
    }

    /* 5. Ajustar o Gorrinho do Noel (para não ficar gigante) */
    .timer-santa-hat {
        width: 120px !important;
        top: -55px !important;
        right: -128px !important;
    }
}