/* ========================================================================== pitch-offer.css — cópia de pitch.css, feita em 11/09/2026. Veste APENAS offer.html. Editar aqui não mexe na v919, e vice-versa. O pitch.css e o oferta.css também viraram cópia: eram os dois últimos arquivos que a v919 ainda dividia com as outras páginas, e enquanto dividisse não dava para mexer só nesta. ========================================================================== */ /* ========================================================================== PRODUTO 2 — cópia isolada de assets/css/pitch.css Fork feito em 30/08/2026. Serve APENAS v12.html e v13.html. Editar aqui NÃO afeta as outras 11 páginas, e editar as folhas originais em assets/css/ NÃO afeta estas duas. As duas árvores seguem separadas de propósito — é produto diferente. Não há url() em nenhuma delas, então a mudança de pasta é segura. ========================================================================== */ /* ========================================================================== pitch.css — BLOCO DE VENDA Tudo que aparece depois da VSL. Carregado após style.css. As seções abaixo usam a mesma numeração dos blocos no index.html. ========================================================================== */ :root{ --verde:#0E5C2F; /* fundo principal do bloco de venda */ --verde-esc:#0B4A26; /* faixas alternadas */ --verde-btn:#1F9D4D; /* botão de compra */ --verde-btn-esc:#157038; --ouro:#C8A227; } /* ========================================================================== [09] REVELAÇÃO ATRASADA O bloco inteiro nasce oculto e é liberado por revelarOferta(), no minuto configurado do vídeo. ========================================================================== */ .pitch{ display:none; } .pitch.is-visivel{ display:block; animation:pitchSurge .5s ease both; } @keyframes pitchSurge{ from{ opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } /* ========================================================================== [09.1] APROXIMAÇÃO DA OFERTA Enquanto só existe a matéria, o respiro embaixo do vídeo faz sentido. Quando a oferta abre, esse mesmo respiro vira um vão branco que pode fazer o lead achar que a página acabou. A classe entra no junto com a revelação, em mostrar(), e encolhe o espaço. .article é irmão ANTERIOR de #pitch, e CSS não seleciona para trás — por isso a classe fica no e não no próprio bloco. ========================================================================== */ body.oferta-aberta .article{ padding-bottom:14px; } body.oferta-aberta .vsl{ margin-bottom:0; } /* ========================================================================== [09.2] O QUE SOME QUANDO A OFERTA ABRE Depois do pitch, nada deve disputar atenção com os frascos. Comentários e rodapé saem de cena. Vale para as três versões — este arquivo é comum a index.html, v2.html e v3.html. A classe entra no em mostrar(), dentro de revelarOferta(). ========================================================================== */ body.oferta-aberta #socialComments, body.oferta-aberta .site-footer{ display:none; } /* ========================================================================== [10] OFERTA — cartões de preço ========================================================================== */ /* Cor de cada plano: usada na tarja do topo, na borda do cartão e na caixa de economia. Trocar aqui muda os três de uma vez. */ .plano--6{ --cor:#8C1D18; } /* vinho */ .plano--3{ --cor:#5B2A86; } /* roxo */ .plano--2{ --cor:#1F6B3B; } /* verde */ /* Faixa de confiança, nas cores do jornal — amarra o veículo à oferta. */ .selo-parceiro{ width:100%; margin:0 0 30px; padding:20px 0; overflow:hidden; background:var(--brand); color:#fff; font-size:15.5px; line-height:1.35; } .selo-parceiro__trilho{ display:flex; align-items:center; justify-content:center; gap:16px; } .selo-parceiro b{ font-weight:700; } .selo-parceiro__item{ white-space:nowrap; } .selo-parceiro__sep{ opacity:.4; } /* No desktop a lista é fixa e centralizada, então o separador do fim sobra. */ .selo-parceiro__sep--laco{ display:none; } /* No celular vira carrossel infinito: o separador do fim entra para emendar a última frase na primeira da cópia, e o trilho desliza sem parar. */ @media (max-width:760px){ .selo-parceiro{ font-size:13.5px; padding:16px 0; } .selo-parceiro__sep--laco{ display:inline; } .selo-parceiro__trilho{ justify-content:flex-start; width:max-content; animation:deslizaSelo 22s linear infinite; } @media (hover:hover) and (pointer:fine){ .selo-parceiro:hover .selo-parceiro__trilho{ animation-play-state:paused; } } } @keyframes deslizaSelo{ from{ transform:translateX(0); } to { transform:translateX(calc(-50% - 8px)); } /* metade + meio gap */ } @media (prefers-reduced-motion:reduce){ .selo-parceiro__trilho{ animation:none; } } .oferta{ background:#fff; color:var(--ink); padding:44px 0; } .oferta__titulo{ font-family:var(--serif); font-size:clamp(23px,1.4rem + 1vw,31px); text-align:center; margin:0 0 30px; line-height:1.3; } .planos{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; } .plano{ background:#fff; color:var(--ink); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; border:3px solid var(--cor); } .plano__faixa{ padding:8px; text-align:center; color:#fff; background:var(--cor); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } /* Zera a margem que style.css aplica em todo

— dentro do cartão o espaçamento é controlado item a item, senão os vãos dobram. */ .plano p{ margin:0; } .plano__nome{ padding:12px 12px 2px; text-align:center; line-height:1.3; font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } /* Mockups em .webp, sem sombra e com o produto preenchendo o quadro. Altura fixa nos três para os frascos saírem do mesmo tamanho. */ .plano__img{ padding:4px 14px 6px; display:grid; place-items:center; min-height:196px; } .plano__img img{ max-height:196px; width:auto; object-fit:contain; } .plano__dose{ padding:0 12px 18px; text-align:center; font-size:14px; color:var(--ink-3); } /* Caixa de economia — sólida na cor do plano, com um brilho que atravessa de tempos em tempos para puxar o olho. */ .plano__economia{ position:relative; overflow:hidden; margin:0 14px 18px; padding:12px 9px; border-radius:6px; text-align:center; background:var(--cor); color:#fff; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .plano__economia::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); animation:brilhoEconomia 3.2s ease-in-out infinite; } @keyframes brilhoEconomia{ 0% { left:-70%; } 45%, 100% { left:130%; } } @media (prefers-reduced-motion:reduce){ .plano__economia::after{ animation:none; opacity:0; } } .plano__normal{ margin-bottom:7px; text-align:center; font-size:14px; color:var(--ink-3); } .plano__preco{ margin:0 0 4px; text-align:center; font-size:46px; font-weight:800; line-height:1.05; letter-spacing:-.02em; } .plano__unidade{ margin-bottom:18px; text-align:center; font-size:14px; color:var(--ink-3); } .plano__total{ margin-bottom:12px; text-align:center; font-size:15px; } .plano__frete{ margin-bottom:26px; text-align:center; font-size:14.5px; font-weight:700; color:#1F6B3B; } /* Botão de compra — texto maior e um agito curto de tempos em tempos. O balanço acontece só no fim do ciclo: fica parado a maior parte do tempo e dá uma sacudida rápida, o que chama atenção sem virar ruído. */ .plano__btn{ display:block; margin:auto 12px 14px; padding:16px 14px; border-radius:6px; background:var(--verde-btn); color:#fff; text-align:center; text-decoration:none; font-size:18.5px; font-weight:800; letter-spacing:.01em; box-shadow:0 3px 0 var(--verde-btn-esc); animation:agitaBotao 4.5s ease-in-out infinite; will-change:transform; } @media (hover:hover) and (pointer:fine){ .plano__btn:hover{ background:#188A42; animation-play-state:paused; } } @keyframes agitaBotao{ 0%, 72%, 100% { transform:none; } 76% { transform:scale(1.035) rotate(-.7deg); } 80% { transform:scale(1.035) rotate(.7deg); } 84% { transform:scale(1.03) rotate(-.5deg); } 88% { transform:scale(1.02) rotate(.3deg); } 92% { transform:scale(1); } } @media (prefers-reduced-motion:reduce){ .plano__btn{ animation:none; } } /* Bandeiras de pagamento — imagem única com as sete formas aceitas. */ .plano__pagamentos{ display:block; margin:0 auto 12px; padding:0 12px; width:100%; max-width:300px; height:auto; } /* ========================================================================== [11] GARANTIA ========================================================================== */ /* O bloco inteiro é uma imagem pronta (assets/img/garantia.webp), que já traz selo, título e as três condições. O fundo claro combina com a margem branca da própria arte. Para trocar o texto, troca-se a imagem. */ .garantia{ background:#fff; padding:34px 0; } .garantia__img{ display:block; margin-inline:auto; width:100%; max-width:768px; height:auto; } /* ========================================================================== [12] DEPOIMENTOS Conteúdo precisa ser de clientes reais, com autorização de uso. ========================================================================== */ .depo{ background:var(--verde); color:#fff; padding:44px 0; } .depo__titulo{ margin:0 0 8px; text-align:center; font-size:clamp(19px,1.1rem + .8vw,26px); font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .depo__lead{ max-width:60ch; margin:0 auto 26px; text-align:center; opacity:.9; } .depo__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .depo__card{ padding:18px; border-radius:8px; background:#fff; color:var(--ink); font-size:14.5px; line-height:1.55; } .depo__estrelas{ margin-bottom:8px; color:#E8A020; letter-spacing:.14em; font-size:14px; } .depo__autor{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); } .depo__autor b{ display:block; color:var(--ink); font-size:13.5px; } /* ========================================================================== [13] INGREDIENTES ========================================================================== */ /* Verde claro, o mesmo tom do miolo da ponte da oferta. Antes era verde escuro com texto branco; a seção não tem mais texto e as fotos vêm em fundo neutro, então o escuro só criava um bloco pesado no meio da página. A tinta volta a ser a padrão porque o fundo agora é claro. */ .ingr{ background:#eef5ef; color:var(--ink); padding:44px 0; overflow:hidden; } .ingr__titulo{ margin:0 0 12px; text-align:center; font-size:clamp(21px,1.2rem + .9vw,30px); font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .ingr__sub{ max-width:70ch; margin:0 auto 16px; text-align:center; font-size:clamp(15px,.9rem + .4vw,19px); font-weight:700; text-transform:uppercase; line-height:1.35; letter-spacing:.01em; } .ingr__lead{ max-width:70ch; margin:0 auto 30px; text-align:center; font-size:17px; line-height:1.55; } /* -------------------------------------------------------------- carrossel --- */ /* O trilho anda para a esquerda sem parar. duplicarTrilho() clona os cartões, então a animação percorre exatamente metade da largura e reinicia — o corte cai no ponto em que a segunda cópia está sobre a primeira, sem emenda. */ /* SEM mask-image, de propósito. O esmaecimento das bordas era feito com máscara CSS. Máscara sobre um elemento que roda animação de transform o tempo todo é combinação que falha em parte dos navegadores de celular: quando a composição da camada não acontece, o conteúdo mascarado some por inteiro e sobra só o fundo da seção — exatamente o bug relatado, e por isso intermitente. Aqui o mesmo efeito é feito com duas faixas de degradê POR CIMA, na cor da seção. É pintura comum, sem participação da máscara na composição: se algo falhar, o pior caso é a borda não esmaecer — nunca sumir tudo. */ .ingr__carrossel{ overflow:hidden; position:relative; } .ingr__carrossel::before, .ingr__carrossel::after{ content:""; position:absolute; top:0; bottom:0; width:8%; z-index:2; pointer-events:none; } .ingr__carrossel::before{ left:0; background:linear-gradient(90deg,#eef5ef,rgba(238,245,239,0)); } .ingr__carrossel::after{ right:0; background:linear-gradient(270deg,#eef5ef,rgba(238,245,239,0)); } .ingr__trilho{ display:flex; gap:18px; width:max-content; animation:deslizaIngr 42s linear infinite; } /* A pausa ao passar o mouse só vale onde EXISTE mouse. Em tela de toque o :hover "gruda": basta o dedo encostar uma vez e o estado permanece, o que congelava o carrossel para sempre — o laço percorria tudo e nunca voltava ao primeiro cartão. @media (hover:hover) and (pointer:fine) remove a regra do celular. */ @media (hover:hover) and (pointer:fine){ .ingr__carrossel:hover .ingr__trilho{ animation-play-state:paused; } } @keyframes deslizaIngr{ from{ transform:translateX(0); } to { transform:translateX(calc(-50% - 9px)); } /* metade + meio gap */ } @media (prefers-reduced-motion:reduce){ .ingr__trilho{ animation:none; } .ingr__carrossel{ overflow-x:auto; } } .ingr__card{ flex:0 0 268px; margin:0; /* Branco sólido com contorno fino: sobre o verde claro, o translúcido de antes praticamente desaparecia. */ background:#fff; border:1px solid rgba(16,60,32,.10); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; } /* As cinco artes vêm com proporções ligeiramente diferentes (0,97 a 1,04), o que desalinhava tarjas e textos entre os cartões. Forçando quadrado com recorte ancorado embaixo: a diferença é cortada no topo, onde só há fundo, e a tarja com o nome nunca é tocada. */ /* As artes desta versão são RETRATO (890x1190, 3:4), não quadradas como as anteriores. Num quadro 1:1 elas seriam cortadas em cima e embaixo, justamente onde está o conteúdo. O recorte também deixou de ser ancorado embaixo: aqui o interesse fica no centro. */ .ingr__media{ aspect-ratio:3/4; overflow:hidden; background:#e4ece6; /* espera clara, no tom da seção */ } .ingr__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; } .ingr__texto{ margin:0; padding:16px 18px 20px; text-align:center; font-size:14.5px; line-height:1.5; } /* ========================================================================== [14] PERGUNTAS FREQUENTES ========================================================================== */ .faq{ background:var(--verde); color:#fff; padding:44px 0; } .faq__titulo{ margin:0 0 22px; text-align:center; font-size:clamp(19px,1.1rem + .8vw,26px); font-weight:800; text-transform:uppercase; letter-spacing:.03em; } .faq__item{ border-bottom:1px solid rgba(255,255,255,.16); } .faq__item summary{ position:relative; cursor:pointer; list-style:none; padding:15px 30px 15px 0; font-size:15.5px; font-weight:700; } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary::after{ content:"⌄"; position:absolute; right:6px; top:12px; font-size:19px; transition:transform .25s; } .faq__item[open] summary::after{ transform:rotate(180deg); } .faq__resposta{ padding:0 0 16px; font-size:14.5px; line-height:1.6; opacity:.92; } /* ========================================================================== [15] SELOS DE CONFIANÇA ========================================================================== */ /* Bloco final em imagem única (assets/img/selos.webp): marca, quatro selos de confiança e as bandeiras de pagamento. Para mudar texto, troca-se a arte. */ .selos{ background:#fff; padding:30px 0 40px; } .selos__img{ display:block; margin-inline:auto; width:100%; max-width:520px; height:auto; } /* ========================================================================== [16] RESPONSIVO DO BLOCO DE VENDA ========================================================================== */ @media (max-width:820px){ .planos, .depo__grid{ grid-template-columns:1fr; } .ingr__grid, .selos__grid{ grid-template-columns:1fr 1fr; } .plano__preco{ font-size:38px; } /* No celular o cartão ocupa a largura toda, então o frasco pode crescer bastante — sem isso sobra um vazio enorme em volta da imagem. */ .plano__img{ padding:6px 14px 8px; min-height:0; } .plano__img img{ max-height:min(56vw,320px); } } /* ========================================================================== [10.1] CARTÕES — NOVA SEQUÊNCIA DE INFORMAÇÃO Ordem: faixa, frascos·dias, preço por frasco, preço por dia, total, três benefícios, botão, formas de pagamento. Saíram do cartão: "Normalpreis", "Sie sparen" e a imagem de bandeiras — as formas de pagamento agora são texto, que lê melhor no celular e não custa uma requisição. ========================================================================== */ .plano__dia{ margin:0 0 14px; text-align:center; font-size:14px; color:var(--ink-3); } .plano__total{ margin:0 0 16px; text-align:center; font-size:15px; } .plano__beneficios{ margin:0 14px 18px; padding:0; list-style:none; text-align:left; font-size:14px; line-height:1.5; } .plano__beneficios li{ position:relative; padding:0 0 6px 22px; } /* O ✓ é desenhado pelo CSS, não digitado no HTML: assim o leitor de tela lê só o benefício, sem soletrar o símbolo em cada linha. */ .plano__beneficios li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:#1F6B3B; } /* O pacote de 2 tem frete cobrado. Sem ✓ e em tom neutro — marcar custo como benefício seria enganoso. */ .plano__beneficios--pago::before{ content:"+"; color:var(--ink-3); } .plano__pagto{ margin:0 12px 16px; text-align:center; font-size:12px; line-height:1.4; color:var(--ink-3); } /* Subtítulo da oferta. Não existia nesta montagem — entrou junto com o título novo, para as três primeiras páginas terem a mesma informação que as da família V4. */ .oferta__sub{ max-width:64ch; margin:-18px auto 30px; text-align:center; font-size:15px; line-height:1.5; color:var(--ink-3); } /* ========================================================================== [11.1] PRODUTO EM RESUMO Arte única logo abaixo da garantia. Sem fundo próprio: a imagem já vem com o dela, e uma faixa colorida atrás só criaria uma moldura estranha. ========================================================================== */ .produto{ background:#fff; padding:34px 0; } .produto__img{ display:block; width:100%; max-width:900px; height:auto; margin-inline:auto; border-radius:10px; } @media (max-width:760px){ .produto{ padding:22px 0; } .produto__img{ border-radius:7px; } } /* ========================================================================== [13.1] APOIO NATURAL Imagem à esquerda, texto e lista à direita. Empilha no celular, com a imagem sempre em cima. Fundo branco: a imagem já traz o próprio. ========================================================================== */ .apoio{ background:#fff; color:var(--ink); padding:44px 0; } .apoio__grade{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:38px; align-items:center; } .apoio__midia img{ display:block; width:100%; height:auto; border-radius:12px; } .apoio__texto h2{ margin:0 0 14px; font-size:clamp(22px,1.2rem + 1.1vw,32px); line-height:1.2; font-weight:800; color:#1F6B3B; } .apoio__texto p{ margin:0 0 18px; font-size:16px; line-height:1.6; color:var(--ink-2); } .apoio__lista{ margin:0; padding:0; list-style:none; } .apoio__lista li{ position:relative; padding:0 0 9px 28px; font-size:16px; line-height:1.45; } /* ✓ desenhado pelo CSS: o leitor de tela lê o benefício, não o símbolo. */ .apoio__lista li::before{ content:"✓"; position:absolute; left:0; top:0; font-weight:800; color:#1F6B3B; } @media (max-width:860px){ .apoio__grade{ grid-template-columns:1fr; gap:22px; } .apoio{ padding:32px 0; } .apoio__texto h2{ text-align:center; } } /* ========================================================================== [11.0] FAIXA DE PAGAMENTO Arte única entre os cartões de preço e a garantia. Sem fundo próprio: a imagem já traz o dela. Largura limitada para não esticar e borrar. ========================================================================== */ .selo-pagto{ background:#fff; padding:26px 0 10px; } .selo-pagto img{ display:block; width:100%; max-width:768px; height:auto; margin-inline:auto; } @media (max-width:760px){ .selo-pagto{ padding:18px 0 6px; } }