/* ==========================================================================
   GELATIN-V919.CSS — folha da oferta Gelatin Meister
   Recorte fiel do <style> da nossa página gelatinmeister.com/dtc-de,
   trazido em 02/09/2026. Serve APENAS a v919.html.

   O QUE MUDOU EM RELAÇÃO AO ORIGINAL
   Todo seletor ganhou o prefixo .gelatin. Sem isso as duas regras globais
   da folha original — * { margin:0; padding:0 } e body { font-family:Poppins }
   — repintariam a v919 inteira: manchete, artigo, comentários e rodapé.
   Com o prefixo, elas valem só dentro do contêiner .gelatin.
     *    virou  .gelatin, .gelatin *
     body virou  .gelatin
   Nenhuma declaração foi alterada: cores, medidas e animações são as mesmas.

   ÍNDICE (mesma ordem da folha original)
     Barra de contagem regressiva
     Passos 1-2-3 e prova social
     Cartões de produto e botões de checkout
     Aviso de estoque
     Perguntas frequentes
     Garantia e selos
     Rodapé
     Toast de compra, CTA fixa no celular e pop-up de saída
     Responsivo
========================================================================== */

.gelatin, .gelatin *{ margin: 0; padding: 0; box-sizing: border-box; }
.gelatin{
            /* ===== RITMO DE ESPAÇAMENTO — 04/09/2026 =====
               Três degraus, e só três. Antes cada seção usava o número que
               parecesse bom no dia em que foi escrita, e o resultado era
               respiro diferente a cada rolagem.
                 --esp-secao  separa SEÇÕES (o respiro grande)
                 --esp-bloco  separa blocos dentro de uma seção
                 --esp-item   separa itens irmãos (título/subtítulo, etc.)
               Os valores caem no celular pela regra de 900px lá embaixo. */
            --esp-secao: 72px;
            --esp-bloco: 40px;
            --esp-item: 16px;

            /* Tamanho ÚNICO dos títulos de seção. Antes eram cinco números
               avulsos (30, 34, 30, 30, 24) e a hierarquia não se lia: o
               título das avaliações era maior que o da oferta principal. */
            --tit-secao: 38px;

            font-family: 'Poppins', sans-serif;
            background-color: #fff;
            color: #333;
            -webkit-font-smoothing: antialiased;
        }

        /* ===== COUNTDOWN TIMER BAR =====
   Desceu para junto do aviso de estoque em 04/09/2026.
   Saiu o position:sticky que tinha quando ficava no topo do bloco: no meio
   da página ele passaria a grudar no alto da tela assim que o leitor
   rolasse por cima, cobrindo o que vem depois.
   Ganhou a mesma sangria lateral das outras seções de largura total. */
.gelatin .countdown-bar{
            background: linear-gradient(90deg, #2D1B25, #3D2330);
            color: #fff;
            text-align: center;
            padding: 14px 16px;
            border-top: 2px solid #E91E7A;
            border-bottom: 2px solid #E91E7A;
            margin-inline: calc(-1 * var(--pad-lateral, 20px));
            margin-top: var(--esp-bloco);
        }

/* A segunda grade de potes precisa de respiro do contador logo acima.
   A de cima não leva margem nenhuma: quem separa ela do título é o padding
   da própria .products-section.

   Duas classes no seletor de propósito. Com apenas .products-grid--repetida
   o peso empata com o .products-grid lá embaixo, que traz margin:0 auto —
   e em empate quem vem depois no arquivo vence, zerando esta margem.
   Com as duas, ganha por peso e a ordem deixa de importar. */
.gelatin .products-grid.products-grid--repetida{
            margin-top: var(--esp-bloco);
        }

/* ===== RETOMADA =====
   Título e subtítulo repetidos antes do contador. O respiro grande de
   seção passou para cá: o contador agora encosta perto, porque é este
   título que o apresenta. */
.gelatin .reprise{
            text-align: center;
            margin-top: var(--esp-secao);
        }

/* ===== BARRA DE ABERTURA =====
   Substituiu o contador no topo do bloco de oferta. Azul do cabeçalho,
   o mesmo --v919-azul-claro da tarja e do selo da manchete. */
.gelatin .countdown-bar p{
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 6px;
            letter-spacing: 0.5px;
        }
.gelatin .countdown-bar p span{ color: #ff6b6b; }
.gelatin .timer-blocks{
            display: flex;
            justify-content: center;
            gap: 6px;
        }
.gelatin .time-block{
            background: #e63946;
            color: #fff;
            padding: 5px 10px;
            border-radius: 6px;
            min-width: 44px;
            text-align: center;
            font-weight: 800;
            font-size: 18px;
            line-height: 1;
        }
.gelatin .time-block small{
            display: block;
            font-size: 9px;
            font-weight: 500;
            opacity: 0.8;
            margin-top: 2px;
            letter-spacing: 1px;
        }
.gelatin .timer-sep{
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
            align-self: center;
        }

        /* ===== STEPS SECTION ===== */.gelatin .steps-section{
            background: #fff;
            padding: var(--esp-secao) 20px var(--esp-bloco);
            text-align: center;
        }
.gelatin .steps-bar{
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
.gelatin .step{
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #2D1B25;
            background: #fff;
            padding: 8px 20px;
            border-radius: 25px;
            border: 1px solid #F8BBD9;
            box-shadow: 0 2px 8px rgba(233,30,122,0.08);
        }
/* Azul do cabeçalho, não o rosa da oferta — pedido em 04/09/2026.
   É o mesmo --v919-azul-claro da tarja, então a pílula ativa amarra o topo
   da página ao bloco de oferta sem precisar de faixa nenhuma no meio. */
/* Rosa de novo. Na v916 esta pílula foi para o azul, para casar com o
   cabeçalho azul de lá. Aqui o hero é o vermelho da v14 e a oferta é rosa:
   o azul não pertenceria a nenhum dos dois. */
.gelatin .step.active{
            background: #E91E7A;
            border-color: #E91E7A;
            color: #fff;
        }
.gelatin .step-number{
            background: #F8BBD9;
            color: #7B1450;
            width: 24px; height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
        }
/* O círculo do número fica no MESMO rosa das pílulas 2 e 3 — pedido em
   04/09/2026. Antes a ativa recebia branco translúcido, que servia quando
   a pílula era rosa; sobre o azul de agora ele sumia no fundo.
   Sem regra própria, ela herda o .step-number lá de cima. */
.gelatin .main-heading{
            font-family: 'Roboto Slab', serif;
            font-size: var(--tit-secao);
            font-weight: 800;
            color: #2D1B25;
            margin-bottom: 12px;
            line-height: 1.3;
        }
.gelatin .main-heading span{ color: #E91E7A; }
/* Subtítulo do bloco de venda — acrescentado em 04/09/2026 junto com o
   texto novo. Peso normal e cor apagada de propósito: é explicação, não
   manchete, e não pode competir com o .main-heading logo acima. */
.gelatin .main-sub{
            max-width: 620px;
            margin: 0 auto 14px;
            font-size: 15px;
            line-height: 1.6;
            color: #5a3a4a;
        }
.gelatin .dots-row{
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
        }
.gelatin .dot{
            width: 8px; height: 8px;
            border-radius: 50%;
            background: #E91E7A;
            opacity: 0.6;
        }

        /* ===== SOCIAL PROOF BAR ===== */.gelatin .social-proof-bar{
            background: #fff;
            border: 1px solid #F8BBD9;
            border-radius: 12px;
            padding: 12px 20px;
            max-width: 700px;
            margin: 15px auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
            flex-wrap: wrap;
            box-shadow: 0 4px 16px rgba(233,30,122,0.08);
        }
/* Selo do Trustpilot no lugar das estrelas de texto — 04/09/2026.
   A altura é que manda; a largura acompanha sozinha, então trocar o
   arquivo por outra faixa de nota não exige mexer aqui.
   As antigas .proof-stars saíram: nada mais usa a classe. */
.gelatin .proof-selo{
            height: 22px;
            width: auto;
            display: inline-block;
            vertical-align: middle;
        }
.gelatin .proof-text{
            color: #5a3a4a;
            font-size: 13px;
        }
.gelatin .proof-text strong{ color: #2D1B25; }
/* Contador de espectadores ao vivo: OCULTO a pedido, em 04/09/2026.
   O markup e o JS que atualiza o número seguem no lugar — para religar,
   basta apagar a linha do display:none abaixo. */
.gelatin .live-viewers{
            display: flex;
            align-items: center;
            gap: 6px;
            color: #5a3a4a;
            font-size: 13px;
        }
/* Contador de espectadores ao vivo: OCULTO a pedido, em 04/09/2026.
   Regra separada e DEPOIS da de cima de propósito — dentro do mesmo bloco,
   o display:flex que já existia venceria, porque em empate de peso quem
   vem por último manda. O markup e o JS seguem no lugar: para religar,
   basta apagar estas duas linhas. */
.gelatin .live-viewers{ display: none; }

.gelatin .pulse-dot{
            width: 8px; height: 8px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulseDot 1.5s infinite;
        }

        @keyframes pulseDot {
            0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
            70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
            100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
        }

        /* ===== PRODUCT CARDS ===== */.gelatin .products-section{
            background: #fff;
            padding-block: var(--esp-bloco) var(--esp-secao);
            /* Em variável porque a seção de ingredientes precisa anular
               exatamente este valor para sangrar de ponta a ponta. Mudou
               aqui, a margem negativa lá acompanha sozinha. */
            --pad-lateral: 20px;
            padding-inline: var(--pad-lateral);
        }
.gelatin .products-grid{
            display: grid;
            grid-template-columns: 1fr 1.15fr 1fr;
            gap: 24px;
            max-width: 1100px;
            margin: 0 auto;
            align-items: stretch;
        }
.gelatin .product-card{
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            border: 2px solid #e5e7eb;
        }
.gelatin .product-card:hover{
            transform: scale(1.03);
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }

        /* Best offer card highlight */.gelatin .card-best{
            border: 3px solid #E91E7A;
            transform: scale(1.05);
            box-shadow: 0 8px 40px rgba(195,122,53,0.25);
            z-index: 10;
            background: linear-gradient(180deg, #FFF0F5 0%, #ffffff 15%);
        }
.gelatin .card-best:hover{
            transform: scale(1.07);
            box-shadow: 0 12px 50px rgba(195,122,53,0.35);
        }
.gelatin .card-header{
            padding: 12px 20px;
            text-align: center;
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
.gelatin .card-basic .card-header{ background: #6B7280; }
.gelatin .card-best .card-header{ background: linear-gradient(135deg, #E91E7A, #C2185B); }
.gelatin .card-popular .card-header{ background: #7B1450; }
.gelatin .card-body{
            padding: 25px 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }
.gelatin .best-badge{
            background: linear-gradient(135deg, #E91E7A, #C2185B);
            color: #fff;
            font-size: 11px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 20px;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }
.gelatin .bottle-count{
            font-size: 26px;
            font-weight: 800;
            color: #2D1B25;
            margin-bottom: 2px;
        }
.gelatin .day-supply{
            font-size: 14px;
            font-weight: 500;
            color: #6B7280;
            margin-bottom: 10px;
        }
.gelatin .img-wrapper{
            width: 100%;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
.gelatin .product-img{
            max-width: 100%;
            max-height: 100%;
            height: auto;
            width: auto;
            object-fit: contain;
        }
.gelatin .price-row{
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 6px;
            margin-bottom: 12px;
        }
/* O € vem DEPOIS do número no padrão francês (79 €), então deixou de ser
   sobrescrito: saiu o align-self:flex-start, que o empurrava para o topo
   como se fosse expoente, e ele passa a sentar na linha de base do número.
   A ordem dos spans está no HTML. */
.gelatin .currency{
            font-size: 30px;
            font-weight: 800;
            color: #2D1B25;
            line-height: 1;
        }
.gelatin .price-num{
            font-size: 64px;
            font-weight: 900;
            color: #2D1B25;
            line-height: 1;
        }
/* Virou uma linha só ("/ flacon"): não precisa mais do flex-end + 8px que
   existiam para acompanhar as duas linhas de "par / flacon". */
.gelatin .per-bottle{
            font-size: 14px;
            font-weight: 500;
            color: #6B7280;
            line-height: 1.2;
        }
.gelatin .checklist{
            list-style: none;
            margin-bottom: 15px;
            text-align: left;
            display: inline-block;
            min-height: 72px;
        }
.gelatin .checklist li{
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #2D1B25;
            margin-bottom: 6px;
        }
.gelatin .check-icon{ width: 20px; height: 20px; flex-shrink: 0; }
.gelatin .check-icon svg{ fill: #22c55e; width: 20px; height: 20px; }
.gelatin .card-bottom{
            margin-top: auto;
            width: 100%;
        }

        /* CTA Buttons */.gelatin .cta-btn{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 16px 20px;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 800;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
            box-shadow: 0 4px 15px rgba(34,197,94,0.3);
            animation: ctaPulse 2s infinite;
        }
.gelatin .cta-btn:hover{
            background: linear-gradient(135deg, #16a34a, #15803d);
            box-shadow: 0 6px 20px rgba(34,197,94,0.4);
        }

        @keyframes ctaPulse {
            0% { box-shadow: 0 4px 15px rgba(34,197,94,0.3); }
            50% { box-shadow: 0 4px 25px rgba(34,197,94,0.5); transform: scale(1.01); }
            100% { box-shadow: 0 4px 15px rgba(34,197,94,0.3); }
        }
.gelatin .cart-icon{ width: 20px; height: 20px; fill: #fff; }
.gelatin .secure-text{
            font-size: 11px;
            color: #6B7280;
            margin-bottom: 10px;
        }
.gelatin .cards-img{
            width: 100%;
            max-width: 200px;
            height: auto;
            margin: 0 auto 10px;
            display: block;
        }
.gelatin .total-line{
            font-size: 16px;
            font-weight: 700;
            color: #2D1B25;
            margin-bottom: 4px;
        }
.gelatin .total-line s{ color: #e63946; font-weight: 400; }
.gelatin .shipping-line{
            font-size: 14px;
            font-weight: 700;
            color: #22c55e;
        }
/* .shipping-line.paid removida em 04/09/2026 junto com o texto
   "+ 19,99 € Versand" do cartão de 2 potes: era a única coisa que usava. */

        /* ===== STOCK WARNING — no ritmo em 04/09/2026 ===== */
.gelatin .stock-warning{
            max-width: 650px;
            /* Atalho margin, não margin-top: o atalho vinha DEPOIS na mesma
               regra e zerava o valor anterior. */
            margin: var(--esp-bloco) auto 0;
            background: #fff3cd;
            border: 1px solid #ffc107;
            border-left: 4px solid #e63946;
            border-radius: 10px;
            padding: 16px 20px;
        }
.gelatin .stock-bar-container{
            background: #eee;
            border-radius: 10px;
            height: 10px;
            overflow: hidden;
            margin-bottom: 10px;
        }
.gelatin .stock-bar{
            background: linear-gradient(90deg, #e63946, #ff6b6b);
            height: 100%;
            border-radius: 10px;
            width: 23%;
            animation: pulseBar 2s infinite;
        }

        @keyframes pulseBar {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
.gelatin .stock-warning p{
            font-size: 13px;
            color: #333;
            line-height: 1.5;
        }
.gelatin .stock-warning .stock-count{
            color: #e63946;
            font-weight: 800;
            font-size: 15px;
        }

        /* ===== FAQ SECTION ===== */.gelatin .faq-section{
            background: #fff;
            padding: var(--esp-secao) 20px;
        }
.gelatin .faq-title{
            font-family: 'Roboto Slab', serif;
            font-size: var(--tit-secao);
            font-weight: 800;
            color: #2D1B25;
            text-align: center;
            margin-bottom: 25px;
        }
.gelatin .faq-container{
            max-width: 700px;
            margin: 0 auto;
        }
.gelatin .faq-item{
            background: #fff;
            border: 1px solid #F8BBD9;
            border-radius: 10px;
            margin-bottom: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(233,30,122,0.06);
        }
.gelatin .faq-question{
            padding: 16px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #2D1B25;
            font-weight: 600;
            font-size: 15px;
            transition: background 0.2s;
        }
.gelatin .faq-question:hover{ background: #fafafa; }
.gelatin .faq-arrow{
            transition: transform 0.3s;
            font-size: 18px;
            color: #E91E7A;
        }
.gelatin .faq-item.open .faq-arrow{ transform: rotate(180deg); }
.gelatin .faq-answer{
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
.gelatin .faq-answer-inner{
            padding: 0 20px 16px;
            color: #5a3a4a;
            font-size: 14px;
            line-height: 1.7;
        }

        /* ===== GARANTIA — caixa compacta =====
   Substituiu a antiga .guarantee-section em 04/09/2026. Herda o desenho da
   .social-proof-bar (fundo branco, borda rosa, cantos arredondados) para as
   duas lerem como o mesmo elemento em pontos diferentes da página.
   As regras .guarantee-section/-inner/-badge/-content saíram junto com o
   markup delas: não sobrou nada usando essas classes. */
.gelatin .garantia-caixa{
            background: #fff;
            border: 1px solid #F8BBD9;
            border-radius: 12px;
            padding: 20px 26px;
            max-width: 700px;
            /* Um degrau ACIMA do resto dos blocos, de propósito: os cartões
               terminam num botão verde de compra, e a caixa colada nele lê
               como parte do cartão. O respiro maior a separa como bloco. */
            margin: var(--esp-secao) auto 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            box-shadow: 0 4px 16px rgba(233,30,122,0.08);
        }
.gelatin .garantia-caixa__selo{
            width: 104px;
            height: auto;
            flex-shrink: 0;
            object-fit: contain;
        }
.gelatin .garantia-caixa__texto{
            flex: 1 1 300px;
            font-size: 15px;
            line-height: 1.6;
            color: #5a3a4a;
            text-align: left;
        }
.gelatin .garantia-caixa__texto strong{ color: #2D1B25; font-weight: 700; }
.gelatin .trust-badges{
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 40px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
.gelatin .trust-badges img{
            width: 80px; height: 80px;
            object-fit: contain;
            border-radius: 10px;
            border: 1px solid rgba(45,27,37,0.1);
            background: #fff;
        }

/* Bloco de suporte e logo do rodapé — acrescentados em 10/09/2026. */
.gelatin .footer-suporte{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            max-width: 420px;
            margin: 26px auto 0;
            padding: 16px 20px;
            background: rgba(255,255,255,.05);
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 12px;
            text-align: left;
        }
.gelatin .footer-suporte__icone{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,.08);
            color: #22c55e;
        }
.gelatin .footer-suporte__icone svg{ width: 21px; height: 21px; }
.gelatin .footer-suporte__titulo{
            font-size: 14px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 2px;
        }
.gelatin .footer-suporte__email{
            display: inline-block;
            font-size: 14px;
            font-weight: 600;
            color: #22c55e;
            text-decoration: none;
            word-break: break-all;
        }
/* Sem :hover com sublinhado: deixou de ser link em 10/09/2026, e um
   sublinhado ao passar o mouse prometeria um clique que não existe. */
.gelatin .footer-suporte__nota{
            font-size: 12px;
            color: rgba(255,255,255,.55);
            margin-top: 3px;
        }

/* Logo do rodapé. Ver o comentário no HTML sobre o filtro. */
.gelatin .footer-logo{
            display: block;
            width: 100%;
            max-width: 170px;
            height: auto;
            margin: 0 auto 12px;
            filter: brightness(0) invert(1);
            opacity: .85;
        }

        /* ===== FOOTER ===== */.gelatin .footer-section{
            background: #111;
            padding: var(--esp-secao) 20px;
            text-align: center;
        }
.gelatin .footer-links{
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
.gelatin .footer-links a{
            color: #888;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.2s;
        }
.gelatin .footer-links a:hover{ color: #E91E7A; }
/* .footer-disclaimer removida em 10/09/2026 junto com os dois parágrafos
   de aviso do rodapé: era a única coisa que usava a classe. */

.gelatin .footer-copyright{
            font-size: 12px;
            color: #555;
            margin-top: 20px;
        }

        /* ===== TOAST NOTIFICATIONS ===== */.gelatin .toast-notification{
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.15);
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 9998;
            transform: translateX(-120%);
            transition: transform 0.4s ease;
            max-width: 320px;
            border-left: 4px solid #22c55e;
        }
.gelatin .toast-notification.show{ transform: translateX(0); }
.gelatin .toast-icon{
            width: 36px; height: 36px;
            background: #22c55e;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
.gelatin .toast-icon svg{ width: 18px; height: 18px; fill: #fff; }
.gelatin .toast-text{
            font-size: 13px;
            color: #333;
            line-height: 1.4;
        }
.gelatin .toast-text strong{ color: #2D1B25; }
.gelatin .toast-time{
            font-size: 11px;
            color: #999;
            margin-top: 2px;
        }

        /* ===== STICKY MOBILE CTA ===== */.gelatin .sticky-mobile-cta{
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 9990;
            background: #fff;
            border-top: 2px solid #e5e7eb;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
            padding: 10px 16px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
.gelatin .sticky-mobile-cta.visible{ transform: translateY(0); }
.gelatin .sticky-inner{
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 500px;
            margin: 0 auto;
            gap: 12px;
        }
.gelatin .sticky-info{ font-size: 12px; color: #666; line-height: 1.3; }
.gelatin .sticky-info s{ color: #e63946; }
.gelatin .sticky-info strong{ color: #16a34a; font-size: 16px; }
.gelatin .sticky-shipping{ color: #16a34a; font-size: 11px; display: block; }
.gelatin .sticky-btn{
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: #fff;
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            white-space: nowrap;
            animation: ctaPulse 2s infinite;
        }

/* As regras do pop-up de saída (.exit-overlay, .exit-popup, .exit-close,
   .exit-price, .exit-save, .exit-cta) saíram em 10/09/2026 junto com o
   markup dele. Nada mais na página usava essas classes. */


        /* ===== RESPONSIVE ===== */
        @media (max-width: 900px) {.gelatin .products-grid{
                grid-template-columns: 1fr;
                max-width: 420px;
                gap: 25px;
            }
.gelatin .card-best{ order: -1; transform: none; }
.gelatin .card-best:hover{ transform: scale(1.02); }
.gelatin .main-sub{ font-size: 14px; }
.gelatin .garantia-caixa{ flex-direction: column; text-align: center; }
/* flex:0 1 auto anula o flex-basis:300px da regra de cima. Em coluna, o
   basis passa a valer para a ALTURA e esticava a caixa para 300px de texto. */
.gelatin .garantia-caixa__texto{ text-align: center; flex: 0 1 auto; }
.gelatin .trust-badges img{ width: 60px; height: 60px; }
.gelatin .sticky-mobile-cta{ display: block; }
.gelatin .toast-notification{ bottom: 80px; left: 10px; max-width: 280px; }
.gelatin .social-proof-bar{ flex-direction: column; gap: 8px; }
        }

        @media (max-width: 480px) {
/* Tela bem estreita: encolhe pela variável, para os cinco títulos de seção
   acompanharem juntos em vez de só o da oferta. */
.gelatin{ --tit-secao: 23px; }
.gelatin .steps-bar{ gap: 8px; }
.gelatin .step{ font-size: 12px; padding: 6px 14px; }
.gelatin .price-num{ font-size: 52px; }
.gelatin .product-card:hover{ transform: none; }
.gelatin .card-best:hover{ transform: none; }
.gelatin .countdown-bar p{ font-size: 11px; }
.gelatin .time-block{ font-size: 16px; padding: 4px 8px; min-width: 38px; }
        }
    

/* ==========================================================================
   INFORMAÇÕES NO MODELO DA V9 — acrescentado em 04/09/2026
   Campos que a folha original do Gelatin não tinha e que a v9 mostra nos
   cartões: preço por dia, nota de imposto e formas de pagamento por extenso.
   Tudo dentro do escopo .gelatin, como o resto desta folha.
========================================================================== */

/* Preço por dia, logo abaixo do preço por frasco. Menor e apagado de
   propósito: é âncora de comparação, não o número principal. */
.gelatin .preco-dia{
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  margin: -6px 0 12px;
}

/* Nota de imposto, colada no total. Peso normal para não competir com o
   preço final, que está em <b> ao lado. */
.gelatin .total-line .mwst{
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
}


/* ==========================================================================
   DIFERENCIAIS — seção "Warum ist Gelatin Meister® anders?"
   Acrescentada em 04/09/2026. Duas colunas no computador, uma no celular.
   A barrinha rosa na borda esquerda de cada cartão é o mesmo recurso que a
   página já usa nos cartões de produto, para os dois blocos lerem como
   parte do mesmo desenho.
========================================================================== */
.gelatin .difs{
  background: #fff;
  /* Só respiro em cima e embaixo. O padding lateral saiu em 04/09/2026:
     a .products-section, que envolve esta seção, já dá 20px de cada lado,
     e os dois somados deixavam os cartões 40px mais estreitos que a caixa
     de garantia logo acima — duas larguras diferentes na mesma coluna. */
  padding-block: var(--esp-secao);
}
.gelatin .difs__h{
  font-family: 'Roboto Slab', serif;
  font-size: var(--tit-secao);
  font-weight: 800;
  color: #2D1B25;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 12px;
}
.gelatin .difs__sub{
  max-width: 620px;
  margin: 0 auto var(--esp-bloco);
  font-size: 15px;
  line-height: 1.6;
  color: #5a3a4a;
  text-align: center;
}
/* A foto ancora a seção. Largura contida para não virar o assunto: quem
   manda aqui são os seis cartões. */
.gelatin .difs__foto{
  display: block;
  width: 100%;
  /* 360px, não 520: a foto passou a ser vertical (680x850) em 08/09/2026.
     Na largura antiga ela renderizaria 650px de altura e empurraria os
     cartões para muito abaixo da dobra. */
  max-width: 360px;
  height: auto;
  margin: 0 auto var(--esp-bloco);
}
.gelatin .difs__grade{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  /* Mais largo desde 04/09/2026: com o texto ao lado do ícone, o cartão
     ficou baixo e largo, e 900px deixava a linha de texto curta demais. */
  max-width: 1060px;
  margin: 0 auto;
}
/* Ícone à ESQUERDA, texto ao lado — antes era ícone em cima e texto
   embaixo, e cada cartão ficava alto. Assim a seção inteira encurta. */
.gelatin .difs__card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid rgba(233,30,122,.14);
  border-left: 4px solid #E91E7A;
  border-radius: 10px;
  /* Folga interna menor desde 04/09/2026: o ícone e o texto encostam mais
     na borda e o cartão inteiro encolhe, sem mexer no tamanho da letra. */
  padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(233,30,122,.06);
}
.gelatin .difs__icone{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FCE4EF;
  color: #E91E7A;
  /* flex-shrink:0 impede que o quadrado do ícone seja espremido quando o
     texto ao lado é longo. margin-bottom saiu: só servia no empilhado. */
  flex-shrink: 0;
}
.gelatin .difs__icone svg{ width: 20px; height: 20px; }

/* Invólucro do texto. flex:1 faz ele tomar toda a largura que sobra. */
.gelatin .difs__corpo{ flex: 1; min-width: 0; }
.gelatin .difs__titulo{
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 700;
  color: #2D1B25;
  margin-bottom: 8px;
  line-height: 1.3;
}
.gelatin .difs__texto{
  font-size: 13.5px;
  line-height: 1.6;
  color: #5a3a4a;
}


@media (max-width: 900px){
  /* Um lugar só para afrouxar o ritmo no celular: as seções não repetem
     número nenhum, todas leem estas variáveis. */
  .gelatin{
    --esp-secao: 48px;
    --esp-bloco: 28px;
    --esp-item: 12px;
    --tit-secao: 27px;
  }
  .gelatin .difs__sub{ font-size: 14px; }
  .gelatin .difs__grade{ grid-template-columns: 1fr; gap: 14px; }
  .gelatin .difs__foto{ max-width: 250px; margin-bottom: 24px; }
}

/* ==========================================================================
   INGREDIENTES — carrossel em laço infinito
   Acrescentada em 04/09/2026, abaixo dos diferenciais.

   O trilho é clonado pelo duplicarTrilho() da seção [08], que escreve
   --laco-passo (largura de UMA volta, com o vão) e --laco-tempo aqui.
   Os valores de reserva só valem se o JS não rodar.
========================================================================== */
/* Largura total: a seção mora dentro da .products-section, que tem padding
   lateral. A margem negativa devolve exatamente esse espaço, então o fundo
   rosa encosta nas duas bordas da tela.
   Não usa 100vw de propósito: em computador com barra de rolagem visível,
   100vw é mais largo que a área útil e sobra faixa para o lado. */
.gelatin .ingr2{
  /* Passagem do branco para o tom da seção, em vez de troca seca.
     O degradê ocupa os primeiros 120px e depois segura a cor até o fim —
     é o mesmo efeito de um fundo chapado, com a borda de cima dissolvida.
     background-color fica como reserva, para navegador que não pinte o
     degradê não exibir a seção transparente.
     A margem de cima é o respiro pedido: antes os cartões encostavam. */
  background-color: #FDF6F9;
  background-image: linear-gradient(180deg, #fff 0, #FDF6F9 120px);
  margin-top: var(--esp-secao);
  padding-block: var(--esp-secao);
  overflow: hidden;
  margin-inline: calc(-1 * var(--pad-lateral, 20px));
}
.gelatin .ingr2__h{
  font-family: 'Roboto Slab', serif;
  font-size: var(--tit-secao);
  font-weight: 800;
  color: #2D1B25;
  text-align: center;
  line-height: 1.25;
  margin: 0 20px 12px;
}
.gelatin .ingr2__sub{
  max-width: 620px;
  margin: 0 auto var(--esp-bloco);
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #5a3a4a;
  text-align: center;
}

/* Carrossel arrastável. Substituiu a lista vertical em 04/09/2026.
   Sem animação: a rolagem é a nativa do navegador, movida pelo dedo ou pelo
   mouse. O laço infinito é feito no JS, em carrosselArrastavel(). */
.gelatin .ingr2__carrossel{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 20px 12px;
  /* Sem barra de rolagem: quem avisa que dá para arrastar é o cartão
     seguinte meio à mostra, não um risco cinza. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Embala o arrasto no iOS, senão o movimento morre no fim do dedo. */
  -webkit-overflow-scrolling: touch;
  /* Só rolagem horizontal: sem isso o gesto na diagonal leva a página junto
     e o carrossel trava no meio do caminho. */
  overscroll-behavior-x: contain;
  cursor: grab;
}
.gelatin .ingr2__carrossel::-webkit-scrollbar{ display: none; }
.gelatin .ingr2__carrossel.esta-arrastando{ cursor: grabbing; }
/* Enquanto o mouse arrasta, o texto não pode ser selecionado — senão o
   arrasto vira seleção e o carrossel não anda. */
.gelatin .ingr2__carrossel.esta-arrastando *{ user-select: none; }

.gelatin .ingr2__card{
  flex: 0 0 268px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  background: #fff;
  border: 1px solid rgba(233,30,122,.14);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(233,30,122,.06);
}

.gelatin .ingr2__icone{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #FCE4EF;
  color: #E91E7A;
}
.gelatin .ingr2__icone svg{ width: 14px; height: 14px; }

.gelatin .ingr2__nome{
  font-size: 14px;
  font-weight: 700;
  color: #2D1B25;
  line-height: 1.35;
  margin-bottom: 2px;
}
.gelatin .ingr2__dose{
  font-size: 12.5px;
  font-weight: 700;
  color: #E91E7A;
  margin-bottom: 4px;
}
.gelatin .ingr2__texto{
  font-size: 13px;
  line-height: 1.5;
  color: #5a3a4a;
}

@media (max-width: 900px){
  .gelatin .ingr2__sub{ font-size: 14px; }
  /* 76% da largura visível: sobra um pedaço do próximo cartão à direita,
     que é o sinal de que o bloco anda para o lado. Sem isso o carrossel
     parece um cartão solto e ninguém tenta arrastar. */
  .gelatin .ingr2__card{ flex-basis: 76%; }
  .gelatin .ingr2__carrossel{ padding-inline: 16px; gap: 12px; }
}

/* ==========================================================================
   AVALIAÇÕES — bloco gm-reviews
   Recorte do <style> que veio colado junto com o markup, em 04/09/2026.
   Todo seletor ganhou o prefixo .gm-reviews. Sem isso as três regras
   globais da folha — :root, * e body — valiam para a página inteira, e a
   de body já estava trocando a fonte de tudo para Arial.
   Nenhuma declaração foi alterada: cores, medidas e animação são as mesmas.
========================================================================== */

.gm-reviews{
      --gm-bg:#ffffff;
      --gm-card:#ffffff;
      --gm-text:#181818;
      --gm-muted:#6b6b6b;
      --gm-border:#ded8d1;
      --gm-green:#00b67a;
      --gm-green-4:#73cf11;
      --gm-star-empty:#d9dde2;
      --gm-arrow-bg:#eef2ff;
      --gm-arrow:#6f8ee8;
      --gm-shadow:0 1px 2px rgba(0,0,0,.03);
      --gm-gap:16px;
      --gm-card-w:320px;
      --gm-card-h:400px;
      --gm-speed:36s;
    }
.gm-reviews, .gm-reviews *{box-sizing:border-box}
.gm-reviews{margin:0;background:var(--gm-bg);font-family:Arial,Helvetica,sans-serif;color:var(--gm-text)}
/* Ritmo e sangria acrescentados em 04/09/2026: o bloco chegou com padding
   próprio (20/24) e preso ao padding lateral da .products-section. Agora
   segue a mesma escala das demais seções e encosta nas duas bordas. */
.gm-reviews{
      width:auto;
      padding-block: var(--esp-secao, 72px);
      padding-inline: 0;
      margin-inline: calc(-1 * var(--pad-lateral, 20px));
      overflow:hidden;
      background:var(--gm-bg);
    }
.gm-reviews__header{
      max-width:1200px;
      margin:0 auto 14px;
      padding:0 18px;
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:18px;
    }
.gm-reviews__header h2{
      margin:0;
      /* Lia clamp(22px,3vw,34px) e herdava Arial do bloco colado — ficava
         MAIOR que o título da oferta principal e com outra tipografia.
         Agora segue a mesma variável e a mesma família das demais seções. */
      font-family:'Roboto Slab', serif;
      font-size: var(--tit-secao);
      line-height:1.15;
      font-weight:800;
      letter-spacing:-.02em;
    }
.gm-reviews__header p{
      margin:6px 0 0;
      color:var(--gm-muted);
      font-size:14px;
    }
.gm-reviews .gm-viewport{
      position:relative;
      width:100%;
      overflow:hidden;
      padding:2px 0;
      -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
      mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
    }
.gm-reviews .gm-track{
      display:flex;
      width:max-content;
      gap:var(--gm-gap);
      padding-left:16px;
      animation:gm-scroll var(--gm-speed) linear infinite;
      will-change:transform;
    }
.gm-reviews .gm-viewport:hover .gm-track{animation-play-state:paused}


    @keyframes gm-scroll{
      from{transform:translateX(0)}
      to{transform:translateX(calc(-1 * var(--gm-loop-distance)))}
    }
.gm-reviews .gm-card{
      flex:0 0 var(--gm-card-w);
      min-height:var(--gm-card-h);
      border:1px solid var(--gm-border);
      border-radius:16px;
      background:var(--gm-card);
      box-shadow:var(--gm-shadow);
      padding:18px 16px 14px;
      display:flex;
      flex-direction:column;
    }
.gm-reviews .gm-top{
      display:flex;
      align-items:flex-start;
      gap:12px;
    }
.gm-reviews .gm-avatar{
      width:44px;
      height:44px;
      border-radius:50%;
      display:grid;
      place-items:center;
      font-size:15px;
      font-weight:700;
      flex:0 0 44px;
      color:#303030;
      background:#ede7ff;
    }
.gm-reviews .gm-card:nth-child(3n+2) .gm-avatar{background:#ffe9d9}
.gm-reviews .gm-card:nth-child(3n+3) .gm-avatar{background:#e6f3ff}
.gm-reviews .gm-name{
      margin:1px 0 4px;
      font-weight:700;
      font-size:16px;
      line-height:1.15;
    }
.gm-reviews .gm-date{
      color:#3e3e3e;
      font-size:14px;
      line-height:1.2;
    }
.gm-reviews .gm-rating{
      display:flex;
      gap:2px;
      margin:18px 0 12px;
      align-items:center;
    }
.gm-reviews .gm-star{
      width:18px;
      height:18px;
      border-radius:1px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:14px;
      line-height:1;
      background:var(--gm-green);
    }
.gm-reviews .gm-star.is-empty{background:var(--gm-star-empty)}
.gm-reviews .gm-rating.is-four .gm-star:not(.is-empty){background:var(--gm-green-4)}
.gm-reviews .gm-review{
      font-size:16px;
      line-height:1.42;
      margin:0;
      color:#161616;
    }
.gm-reviews .gm-actions{
      margin-top:auto;
      padding-top:22px;
      display:flex;
      gap:18px;
      align-items:center;
      color:#5e5e5e;
      font-size:13px;
    }
.gm-reviews .gm-action{
      display:inline-flex;
      align-items:center;
      gap:6px;
      white-space:nowrap;
      color:inherit;
    }
.gm-reviews button.gm-action{
      appearance:none;
      -webkit-appearance:none;
      border:1px solid transparent;
      background:transparent;
      font:inherit;
      margin:0;
      padding:6px 9px;
      border-radius:8px;
      cursor:pointer;
      transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease;
    }
.gm-reviews button.gm-action:hover{
      background:#f5f5f5;
      color:#303030;
    }
.gm-reviews button.gm-action:active{
      transform:scale(.97);
    }
.gm-reviews button.gm-action.is-active{
      color:#008a5c;
      background:#e9f9f2;
      border-color:#bfead8;
      font-weight:700;
    }
.gm-reviews button.gm-action.is-active svg{
      fill:currentColor;
      stroke:currentColor;
    }
.gm-reviews .gm-action svg{
      width:16px;
      height:16px;
      stroke:currentColor;
      fill:none;
      stroke-width:1.6;
    }



    @media (max-width:640px){.gm-reviews{--gm-card-w:286px;--gm-card-h:380px;--gm-gap:12px;--gm-speed:30s}/* padding-top removido: a escala --esp-secao já cuida disso */.gm-reviews .gm-card{padding:16px 14px 13px;border-radius:14px}.gm-reviews .gm-review{font-size:15px}.gm-reviews__header{padding:0 14px}
    }


    @media (prefers-reduced-motion:reduce){.gm-reviews .gm-track{animation:none;transform:none}.gm-reviews .gm-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
    }