/* ========================================================================== 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; } /* ========================================================================== [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; } .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; } .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 ========================================================================== */ .ingr{ background:#0B7A2E; color:#fff; 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. */ .ingr__carrossel{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .ingr__trilho{ display:flex; gap:18px; width:max-content; animation:deslizaIngr 42s linear infinite; } .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; background:rgba(255,255,255,.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. */ .ingr__media{ aspect-ratio:1/1; overflow:hidden; background:linear-gradient(140deg,#0E6B2A,#0A5A22); } .ingr__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; } .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); } }