/* =========================================================================
   CÓPIA PARA A BLOG1 — criada em 21/09/2026, a partir da v923.
   EXCLUSIVO DESTA PÁGINA. Editar este arquivo não pode mudar a v923 nem a
   v919, que está duas cópias atrás.
   ========================================================================= */
/* =========================================================================
   CÓPIA PARA A V923 — criada em 17/09/2026, a partir da v919.
   EXCLUSIVO DESTA PÁGINA. Editar este arquivo não pode mudar a v919.

   Atenção ao original: style.css, pitch.css e oferta.css NÃO têm versão no
   nome e são dividas por v12, v13, v14, v15, v916, v917, v918 e v919. Era
   justamente por isso que a v923 precisava das próprias — mexer lá mexeria
   em oito páginas de uma vez.
   ========================================================================= */
/* ==========================================================================
   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;
        }
/* VERMELHAS desde 03/11/2026, a pedido. Eram o rosa #E91E7A do bloco de
   oferta. Usa o --v3-vermelho da identidade, o mesmo dos separadores da
   tira e do filete da editoria — a página segue com UM vermelho só. */
.gelatin .dot{
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--v3-vermelho);
            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 */
/* NA COR DA TARJA desde 27/09/2026. Era rosa (#E91E7A na borda, degrade
   rosa no cabecalho). Usa o --v3-rodape, a mesma variavel da tarja do
   topo, e nao um escuro novo.

   O VEU ROSA DO TOPO DO CORPO saiu junto. Ele existia para o cartao
   continuar o rosa do cabecalho; sob um cabecalho escuro, ficaria um rosa
   orfao que nenhuma outra cor da pagina explica. Virou um cinza do mesmo
   frio do --v3-rodape, so para o corpo nao nascer branco chapado.      */
.gelatin .card-best{
            border: 3px solid var(--v3-rodape);
            transform: scale(1.05);
            box-shadow: 0 8px 40px rgba(195,122,53,0.25);
            z-index: 10;
            background: linear-gradient(180deg, #EEF0F3 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; }
/* Chapado, e nao degrade: a tarja do topo e uma cor so, e um degrade aqui
   leria como outro elemento.
   O TEXTO VOLTOU A SER BRANCO em 27/09/2026: em rosa sobre o escuro ele
   dava 3,68:1 de contraste, abaixo do minimo para 16px. Quem devolve a cor
   da marca a faixa agora sao as estrelas dos lados — decoracao pode ter
   contraste baixo, texto nao.                                          */
.gelatin .card-best .card-header{ background: var(--v3-rodape); color: #fff; }
.gelatin .card-header__ico{
  color: #E10A85;
  margin: 0 10px;
  font-size: 1.05em;
  line-height: 1;
}
.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;
            /* Era vidro CLARO sobre fundo escuro; no branco some. Vira o
               inverso: um cinza levíssimo com borda um pouco mais firme. */
            background: rgba(17,17,17,.04);
            border: 1px solid rgba(17,17,17,.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(17,17,17,.06);
            /* O verde escureceu junto com o fundo. O #22c55e foi escolhido
                 para contrastar com #111; sobre branco ele dá 2,3:1, abaixo
                 do mínimo legível. O #15803D dá 4,8:1 e mantém a leitura de
                 "suporte disponível" que a cor carrega.                    */
            color: #15803D;
        }
.gelatin .footer-suporte__icone svg{ width: 21px; height: 21px; }
.gelatin .footer-suporte__titulo{
            font-size: 14px;
            font-weight: 700;
            color: var(--v3-tinta);
            margin-bottom: 2px;
        }
.gelatin .footer-suporte__email{
            display: inline-block;
            font-size: 14px;
            font-weight: 600;
            color: #15803D;   /* ver a nota de contraste no ícone acima */
            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: var(--v3-tinta-2);
            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;
            /* Pintava de BRANCO para o fundo escuro. Com o rodapé branco,
               qualquer logo que usasse esta regra ficaria invisível. Agora
               pinta de PRETO. Hoje nada usa .footer-logo sem a variante
               --marca, que desliga o filtro — mas a armadilha ficaria
               armada para o próximo que acrescentasse um selo aqui.      */
            filter: brightness(0);
            opacity: .85;
        }

        /* ===== FOOTER ===== */
/* BRANCO desde 27/09/2026, para casar com o .site-footer, o rodapé do
   artigo. A borda no topo é necessária pelo mesmo motivo que lá: o bloco
   de oferta acima também é claro, e sem a linha o rodapé não termina em
   lugar nenhum. As cores saem das variáveis do tema, não de valores
   soltos, para os dois rodapés mudarem juntos se a paleta mudar.        */
.gelatin .footer-section{
            background: #fff;
            color: var(--v3-tinta-2);
            border-top: 1px solid var(--v3-linha);
            /* 34px e 13px são os valores do .site-footer, lidos do computed
               style dele — não estimados. O alinhamento à esquerda é o que
               muda a cara do bloco.                                       */
            padding: 34px 20px;
            font-size: 13px;
            text-align: left;
        }
/* A logo abre o bloco, como no rodapé do artigo. O .rodape-marca de lá usa
   margin-bottom:18px; aqui vale o mesmo.                                  */
.gelatin .footer-marca-bloco{ margin: 0 0 18px; }
.gelatin .footer-links{
            display: flex;
            justify-content: flex-start;   /* era center */
            gap: 18px;                     /* o gap do .site-footer nav */
            flex-wrap: wrap;
            margin-bottom: 16px;
        }
.gelatin .footer-links a{
            color: var(--v3-tinta);
            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: 13px;
            color: var(--v3-tinta-2);
            margin-top: 0;
        }

/* ===== AVISO DE COMPRA RECENTE =====================================
   REESCRITO EM 18/10/2026. O elemento saiu de dentro do .pitch.gelatin,
   então as regras perdem o prefixo .gelatin — e precisam perder, senão
   deixam de casar. Os nomes toast-* não existem em nenhum outro ponto da
   página, conferido antes de soltar.

   MESMA LINGUAGEM DO AVISO DE COMENTÁRIOS: centralizado no rodapé da
   janela, sobe de baixo, acima da barra do navegador pelo safe-area. Eram
   duas aparências diferentes para a mesma função na mesma tela.

   SÓ EXISTE DEPOIS DO PITCH. A primeira regra o esconde enquanto o <body>
   não tem .oferta-aberta; é a trava que não depende de JS.

   z-index 59, um abaixo do aviso de comentários: se os dois caírem na
   mesma hora, quem fala de compra não cobre quem fala de comentário —
   mas na prática não se encontram, porque os comentários somem no pitch. */
body:not(.oferta-aberta) .toast-notification{ display:none; }
.toast-notification{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:59;
  width:min(420px, calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #E4E6EB;
  border-left:4px solid #22c55e;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
  text-align:left;
  transform:translate(-50%, calc(100% + 24px));
  opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), opacity .32s ease;
}
.toast-notification.show{ transform:translate(-50%,0); opacity:1; }
.toast-icon{
  width:36px; height:36px;
  background:#22c55e;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.toast-icon svg{ width:18px; height:18px; fill:#fff; }
.toast-text{ font-size:13px; color:#333; line-height:1.4; }
.toast-text strong{ color:#2D1B25; }
.toast-time{ font-size:11px; color:#9AA0A8; margin-top:2px; }
@media (prefers-reduced-motion:reduce){
  .toast-notification{ transition:none; }
}


        /* ===== 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; }
.toast-notification{ padding:9px 11px; }
.toast-text{ font-size:12.5px; }
.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;
    }
/* position/overflow acrescentados em 17/09/2026 para o círculo receber a
   foto por cima das iniciais. As medidas, a cor de fundo e o place-items
   são os de antes — sem foto, o avatar continua igual ao da v919. */
.gm-reviews .gm-avatar{
      position:relative;
      overflow:hidden;
      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-avatar img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      border-radius:50%;
    }
.gm-reviews .gm-avatar__ini{ line-height:1; }
.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}
    }

/* A logo do blog no rodapé. A regra .footer-logo aplica filter:brightness(0)
   — desde 27/09/2026, quando o rodapé virou branco; antes era
   brightness(0) invert(1), para pintar de branco sobre o fundo escuro.
   A nossa arte é rosa e contrasta sozinha com o branco, então o filtro sai. */
.gelatin .footer-logo--marca{
  filter:none;
  opacity:1;
  /* 92px é a largura do .rodape-marca__logo no rodapé do artigo, reduzida
     de 120 em 15/10/2026 — este acompanha para os dois nao ficarem
     diferentes na mesma rolagem.
     margin-inline:0 anula o "margin: 0 auto" herdado de .footer-logo, que
     é o que centralizava a imagem.                                       */
  width:92px;
  max-width:92px;
  margin:0;
}
.gelatin .footer-marca{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:500;
  font-size:19px;
  line-height:1;
  letter-spacing:.14em;
  color:#E10A85;
  margin:0 0 10px;
}

/* ------------------------------------------------ ACTU PEOPLE ---
   Cartao da foto antes/depois, abaixo da garantia. 27/09/2026.

   overflow:hidden e o que faz a tarja rosa respeitar o canto
   arredondado do cartao: sem ele a tarja vaza em quadrado sobre o raio,
   e o canto inferior fica com um degrau.

   max-width acompanha a .garantia-caixa logo acima, para os dois blocos
   terminarem na mesma linha vertical.

   A imagem e display:block porque <img> e inline por padrao: sem isso
   sobra uma faixa branca de alguns pixels entre a foto e a tarja, do
   espaco reservado para as descidas das letras.                       */
.gelatin .actu{
  max-width: 700px;
  margin: 22px auto 0;
  background: #fff;
  border: 1px solid var(--v3-linha);
  border-radius: 10px;
  overflow: hidden;
}
.gelatin .actu__img{
  display: block;
  width: 100%;
  height: auto;
}
.gelatin .actu__tag{
  background: #E10A85;
  color: #fff;
  font-family: var(--v3-titulo, inherit);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  padding: 11px 16px;
  line-height: 1;
}
@media (max-width: 480px){
  .gelatin .actu{ margin-top: 18px; }
  .gelatin .actu__tag{ font-size: 13px; padding: 10px 14px; }
}

/* --------------------------------------------- ACTU INTRO ---
   Manchete e linha de apoio acima do cartao Actu people. 27/09/2026.

   Mesma largura do .actu logo abaixo (420px) para os dois blocos
   dividirem a mesma coluna: manchete mais larga que a foto faria o
   conjunto parecer dois elementos soltos em vez de um so.

   A tipografia vem de .main-heading e .main-sub, que ja vestem os
   titulos deste bloco. So o corpo do titulo encolhe: ele legenda uma
   foto, nao abre uma secao, e no tamanho de secao competiria com
   "Questions frequentes" logo abaixo.

   O margin-bottom do .main-sub e zerado porque o espaco entre a linha de
   apoio e o cartao ja vem do margin-top do proprio .actu — somar os dois
   abriria um vao que nao existe entre os outros blocos.            */
/* TIPOGRAFIA DA MANCHETE DO TOPO, a pedido. O bloco de oferta usa
   Roboto Slab; o topo do artigo usa a --v3-titulo (Fira Sans Condensed),
   peso 800, espacamento negativo e alinhamento a esquerda. Aqui valem as
   do topo — por isso cada propriedade e redeclarada, e nao so a familia:
   .main-heading traria peso, cor e entrelinha do bloco de venda.

   O UNICO DESVIO e o corpo. O topo usa clamp(28px, 1rem + 3.6vw, 54px),
   dimensionado para a coluna do artigo, que ocupa a largura toda. Aqui a
   coluna tem 420px: 54px caberiam em duas ou tres palavras por linha e a
   citacao viraria um bloco de seis linhas. O clamp abaixo mantem a mesma
   curva, com teto compativel com a coluna.

   O text-align vira left junto: a manchete do topo e alinhada a esquerda
   desde 21/09, e centralizar aqui quebraria a semelhanca que se quer.  */
/* MESMA COLUNA DA .garantia-caixa logo acima: 700px, e nao 420px.
   Antes este bloco era uma ilha de 420px centralizada — no desktop ele
   comecava 140px a direita da garantia e do FAQ, e o conjunto lia como
   elemento solto no meio da pagina. Agora abre na mesma margem                */
.gelatin .actu-intro{
  max-width: 700px;
  /* O VAO ACIMA E O DOS OUTROS BLOCOS. A pagina separa bloco de bloco com
     --esp-secao (48px): e o vao dos cartoes para a garantia, e o do relato
     para o FAQ. Aqui vale UMA VEZ E MEIA isso (72px), a pedido: o
     depoimento e conteudo editorial no meio de um bloco de venda, e um vao
     maior que o padrao e o que diz ao olho que mudou de assunto.
     Expresso em calc() sobre a variavel, e nao como 72px cravado: se o
     respiro da pagina mudar, este acompanha.
     Os 10px de baixo ficam: a manchete e a foto
     pertencem ao MESMO bloco, e o respiro entre elas tem de ser menor que
     o que separa o bloco dos vizinhos.                                  */
  margin: calc(var(--esp-secao) * 1.5) auto 10px;
  text-align: left;
}
.gelatin .actu-intro .main-heading{
  font-family: var(--v3-titulo);
  font-weight: 800;
  font-size: clamp(24px, 1rem + 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--v3-tinta);
  margin-bottom: 10px;
}
/* Linha de apoio sob a manchete. Ela ja tinha existido e saido hoje de
   manha, quando o texto passou a caber inteiro na manchete; voltou a
   tarde com conteudo proprio.

   Os valores sao os da .dek, a linha de apoio sob a manchete do TOPO —
   mesma referencia que a manchete daqui usa. Foram lidos do computed
   style dela na propria pagina, nao estimados: Fira Sans, peso 400,
   16px, entrelinha 1.62, #111111.

   Nome proprio, e nao .main-sub reaproveitada: aquela carrega a cor e a
   largura do bloco de venda, e o modelo aqui e o do artigo.          */
.gelatin .actu-intro__sub{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  color: var(--v3-tinta);
  text-align: left;
  margin: 0;
}
@media (max-width: 480px){
  /* Sem reducao do vao de cima: no celular ele tambem tem de ser o mesmo
     dos outros blocos, senao o depoimento volta a colar na garantia. */
}

/* ------------------------------------------- ACTU RELATO ---
   Linha de apoio e depoimento, abaixo da foto. 27/09/2026.

   Mesma coluna de 700px da .garantia-caixa, do .actu-intro e do .actu:
   os cinco blocos seguidos abrem na mesma margem.

   A TIPOGRAFIA E A DO ARTIGO, nao a do bloco de venda: Fira Sans em
   #111111, os mesmos valores da .dek do topo. O relato e leitura corrida
   e longa, e o serif pesado do bloco de oferta cansaria.

   A BARRA ROSA a esquerda e o unico ornamento. Ela existe para separar
   a fala da Emma do texto da pagina — sem ela, seis paragrafos em
   primeira pessoa passam por copy da marca. E o #E10A85 da marca.

   O margin do <blockquote> e zerado: o navegador aplica 40px de recuo
   lateral por padrao, e ele empurraria a fala para fora do alinhamento
   dos outros blocos.                                                  */
.gelatin .actu-relato{
  max-width: 700px;
  margin: 18px auto 0;
  text-align: left;
}
.gelatin .actu-relato__intro{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  color: var(--v3-tinta);
  margin: 0 0 16px;
}
.gelatin .actu-relato__fala{
  margin: 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid #E10A85;
}
.gelatin .actu-relato__fala p{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.62;
  color: var(--v3-tinta-2);
  margin: 0 0 12px;
}
.gelatin .actu-relato__fala p:last-child{ margin-bottom: 0; }
@media (max-width: 480px){
  .gelatin .actu-relato__intro,
  .gelatin .actu-relato__fala p{ font-size: 15px; }
  .gelatin .actu-relato__fala{ padding-left: 13px; }
}

/* ===== CONTADOR DE FRASCOS ==========================================
   18/10/2026. Fica entre o subtítulo e os cartões de produto.

   O PONTO PULSA, o número não. O olho precisa achar a linha, mas um número
   piscando o tempo todo cansa — ele só acende no instante em que muda.

   tabular-nums no número: sem isso, 84 -> 78 muda a largura do bloco e a
   linha inteira dá um salto lateral a cada baixa.                      */
.gelatin .estoque{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:14px auto 0;
  padding:9px 16px;
  width:fit-content;
  max-width:calc(100% - 32px);
  border:1px solid rgba(225,10,133,.22);
  border-radius:999px;
  background:rgba(225,10,133,.05);
}
.gelatin .estoque__ponto{
  flex-shrink:0;
  width:9px; height:9px;
  border-radius:50%;
  background:#E10A85;
  animation:pulsarEstoque 1.8s ease-in-out infinite;
}
@keyframes pulsarEstoque{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.45; transform:scale(.82); }
}
.gelatin .estoque__texto{
  margin:0;
  font-size:14px;
  line-height:1.3;
  color:#5a3a4a;
  text-align:left;
}
.gelatin .estoque__num{
  font-weight:800;
  font-size:16px;
  color:#E10A85;
  font-variant-numeric:tabular-nums;
}
.gelatin .estoque__num--muda{ animation:acenderEstoque 1.1s ease-out 1; }
@keyframes acenderEstoque{
  from{ color:#1c7c46; transform:scale(1.22); }
  to{ color:#E10A85; transform:scale(1); }
}
@media (max-width:480px){
  .gelatin .estoque{ padding:8px 13px; gap:8px; }
  .gelatin .estoque__texto{ font-size:13px; }
  .gelatin .estoque__num{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .gelatin .estoque__ponto{ animation:none; }
  .gelatin .estoque__num--muda{ animation:none; }
}