/** Shopify CDN: Minification failed Line 990:16 Unexpected "/" Line 990:100 Unterminated string token **/ :root{ --off-white:#F5F4F0; --nude-1-50:#EEDED3; --nude-1:#DCBFA7; --nude-2:#CCA686; --nude-3:#BE9374; --nude-4:#AD7F66; --rotulo:#8C6753; --rotulo-forte:#7D5B49; /* caramelo da marca, brilho baixado ate 4,5:1 */ --white:#FFF; --ink:#1C1C1C; --cta:#5FA830; --cta-dark:#4E8C27; --gold:#EDA900/*estrela*/; --gold-soft:#F5CE63; --pat-1:#D8B99F; --pat-2:#C79F7E; --pat-3:#B88A6B; --pat-4:#A6765E; --ink-70:rgb(28 28 28/.70); --ink-45:rgb(28 28 28/.45); --ink-16:rgb(28 28 28/.16); --ink-08:rgb(28 28 28/.08); --sh-1:0 4px 18px rgb(28 28 28/.06); --sh-2:0 8px 24px rgb(28 28 28/.10); --sh-3:0 16px 44px rgb(28 28 28/.14); --e-standard:cubic-bezier(.4,0,.2,1); --e-out:cubic-bezier(0,0,.2,1); --e-emph:cubic-bezier(.2,0,0,1); --e-sweep:cubic-bezier(.5,0,.2,1); --e-expo:cubic-bezier(.16,1,.3,1); --t-fast:150ms; --t-base:300ms; --t-sweep:450ms; --t-slow:700ms; --t-chrome:340ms; --r-4:4px; --r-8:8px; --r-12:12px; --r-16:16px; --r-20:20px; --r-pill:999px; --container:1360px; --gutter:40px; --pill-h:66px; --f:"Montserrat","Helvetica Neue",Arial,sans-serif; --header-h:122px; --hdr-y:56px; } @media(max-width:860px){:root{--gutter:20px}} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--off-white);color:var(--ink);font-family:var(--f);font-weight:500;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} p,h1,h2,h3,h4,ol,ul{margin:0}ol,ul{padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} :focus-visible{outline:2px solid var(--nude-4);outline-offset:3px} .shell{max-width:calc(var(--container) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)} /* tipografia · papéis do MIV. Na PDP o H1 tem o MESMO corpo do título de dobra: o maior tipo da página é a frase de benefício, não o nome do que se vende. */ .t-benef{font-weight:300;font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:.04em;text-transform:uppercase} .t-dobra{font-weight:300;font-size:30px;line-height:1.06;letter-spacing:.3px;text-transform:uppercase} @media(max-width:860px){.t-dobra{font-size:24px;letter-spacing:.24px}} .t-h1{font-weight:300;font-size:30px;line-height:1.1;letter-spacing:.2px;text-transform:uppercase} .t-card{font-weight:600;font-size:16px;line-height:1.3} .atributo{font-weight:600;font-size:11.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase} .corpo{font-weight:500;font-size:16px;line-height:1.6;color:var(--ink-70)} .corpo b{font-weight:700;color:var(--ink)} .corpo-sm{font-weight:500;font-size:14px;line-height:20px;color:var(--ink-70)} .cap{font-weight:500;font-size:12px;line-height:1.45;color:var(--ink-45)} .preco{font-weight:600;font-size:32px;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .preco-de{font-weight:500;font-size:15px;color:var(--ink-45);text-decoration:line-through;font-variant-numeric:tabular-nums} .stars{color:var(--gold);font-size:14px;letter-spacing:.14em} code{font-family:ui-monospace,Consolas,monospace;font-size:.86em;background:var(--nude-1-50);border-radius:3px;padding:1px 5px} /* pattern do MIV */ .pat{position:absolute;inset:0;pointer-events:none;overflow:hidden;--pc:var(--pat-1);--per:52px} .pat i{position:absolute;top:0;bottom:0;display:block;background-repeat:repeat-y} .pat i:nth-child(1){left:0;width:20.54%;background-image:repeating-linear-gradient(to bottom,transparent 0 23.5px,var(--pc) 23.5px 28.5px,transparent 28.5px var(--per))} .pat i:nth-child(2){left:20.54%;width:20.47%;background-image:repeating-linear-gradient(to bottom,transparent 0 21px,var(--pc) 21px 31px,transparent 31px var(--per))} .pat i:nth-child(3){left:41.01%;width:19.65%;background-image:repeating-linear-gradient(to bottom,transparent 0 18.5px,var(--pc) 18.5px 33.5px,transparent 33.5px var(--per))} .pat i:nth-child(4){left:60.66%;width:19.34%;background-image:repeating-linear-gradient(to bottom,transparent 0 16px,var(--pc) 16px 36px,transparent 36px var(--per))} .pat i:nth-child(5){left:79.98%;width:20.02%;background-image:repeating-linear-gradient(to bottom,transparent 0 13.5px,var(--pc) 13.5px 38.5px,transparent 38.5px var(--per))} @keyframes pat-drift{from{background-position:0 0}to{background-position:0 var(--per)}} .pat--drift i{animation:pat-drift 22s linear infinite} /* ticker + header */ .ticker{position:fixed;left:0;right:0;top:0;z-index:51;height:56px;background:var(--rotulo);color:var(--white); overflow:hidden;display:flex;align-items:center;transition:transform var(--t-chrome) var(--e-standard),opacity var(--t-chrome) var(--e-standard)} html.is-scrolled .ticker{transform:translateY(-100%);opacity:0} /* barra parada: o formato do desktop. Quatro promessas de uma vez, cada uma com seu ícone, separadas por um fio, sem nada andando. O fundo é --rotulo e não --nude-4 porque branco sobre o nude dá 3,5:1, abaixo do mínimo para 11,5px em caixa alta. */ .tk-fixa{display:flex;align-items:center;justify-content:center;width:100%;height:56px;padding:0 20px} .tk-i{display:inline-flex;align-items:center;gap:9px;padding:0 26px;position:relative; font-weight:500;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap} .tk-i+.tk-i::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:14px;background:rgb(255 255 255/.34)} .tk-i svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} /* no celular quatro itens não cabem lado a lado, então a lista continua correndo: ninguém perde informação */ .ticker .track{display:none;width:max-content;animation:tick 46s linear infinite} .ticker:hover .track{animation-play-state:paused} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker .track>span{font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap} .ticker em{font-style:normal;padding:0 26px;color:rgb(255 255 255/.72)} @media(max-width:900px){ .tk-fixa{display:none} .ticker .track{display:flex} } @media(prefers-reduced-motion:reduce){.ticker .track{animation:none}} .hdr{position:fixed;left:0;right:0;top:0;z-index:50;transform:translateY(var(--hdr-y));transition:transform var(--t-chrome) var(--e-standard)} .hdr .pill{max-width:min(var(--container),calc(100% - var(--gutter)*2));margin:0 auto;height:var(--pill-h); display:flex;align-items:center;gap:34px;padding:0 24px;background:var(--white); border:1px solid transparent;border-radius:var(--r-pill); transition:max-width var(--t-chrome) var(--e-standard),border-color var(--t-chrome) var(--e-standard),box-shadow var(--t-chrome) var(--e-standard),background-color var(--t-chrome) var(--e-standard)} html.is-scrolled .hdr .pill{max-width:1080px;border-color:var(--ink-16);box-shadow:var(--sh-2)} .logo{display:flex;align-items:center;color:var(--ink);flex:0 0 auto} .logo svg{height:21px;width:auto;display:block;fill:currentColor} .hdr nav{display:flex;gap:24px;align-items:center} @media(max-width:900px){.hdr nav{display:none}} .hdr nav a{font-weight:600;font-size:14px;line-height:21px;letter-spacing:1.4px;text-transform:uppercase} .hdr .right{margin-left:auto;display:flex;align-items:center;gap:10px} .icon{position:relative;width:44px;height:44px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;transition:background var(--t-base) var(--e-standard)} .icon:hover{background:var(--nude-1-50)} .icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block} .icon .bolha{position:absolute;top:4px;right:4px;min-width:17px;height:17px;border-radius:var(--r-pill); background:var(--cta);color:var(--white);font-weight:700;font-size:10px;line-height:17px;text-align:center;padding:0 4px} /* seletor de linha (troca as 3 PDPs) */ /* padding-top, nao o shorthand: o elemento e .shell seletor, e o shorthand zerava o padding horizontal do .shell, jogando o bloco para x=0 em vez dos 40px do gutter. */ .seletor{padding-top:calc(var(--header-h) + 22px)} /* max-width + scroll: com os três rótulos o controle mede 511px, e numa tela de 390 o terceiro botão começava fora da tela, por baixo do vizinho. */ .seg{display:flex;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none; background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-pill);padding:4px;gap:2px;box-shadow:var(--sh-1)} .seg::-webkit-scrollbar{display:none} .seg button{flex:0 0 auto;padding:0 18px;height:38px;border-radius:var(--r-pill);font-weight:600;font-size:12px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-45);white-space:nowrap;transition:background var(--t-base) var(--e-standard),color var(--t-base) var(--e-standard)} .seg button[aria-current="true"]{background:var(--ink);color:var(--white)} .seg button:hover{color:var(--ink)} .seg button[aria-current="true"]:hover{color:var(--white)} /* troca de linha: só o bloco da linha ativa aparece. A especificidade aqui NÃO é detalhe: `.foto-bloco img{display:block}` é (0,1,1) e venceria um `[data-l]{display:none}` que é (0,1,0), fazendo as três linhas aparecerem juntas. Por isso a regra que esconde é ancorada no id (1,1,0) e a que mostra em (1,2,0). */ #pdp [data-l]{display:none} /* barra-linha: a barra de compra vive fora do #pdp, então precisa do próprio par */ #barra [data-l]{display:none} #barra[data-linha="ah"] [data-l="ah"],#barra[data-linha="ge"] [data-l="ge"],#barra[data-linha="ma"] [data-l="ma"]{display:block} #pdp[data-linha="ah"] [data-l="ah"],#pdp[data-linha="ge"] [data-l="ge"],#pdp[data-linha="ma"] [data-l="ma"]{display:block} .crumb{padding:14px 0 0;font-weight:500;font-size:12px;color:var(--ink-45)} .crumb b{color:var(--ink);font-weight:600} /* ---------- HERO da PDP: galeria + buy box ---------- */ .hero-pdp{display:grid;grid-template-columns:1fr .78fr;gap:56px;padding:22px 0 64px;align-items:start} @media(max-width:1000px){.hero-pdp{grid-template-columns:1fr;gap:28px}} .galeria{display:grid;grid-template-columns:1fr 1fr;gap:14px} .galeria .tile{position:relative;aspect-ratio:1;border-radius:var(--r-16);overflow:hidden;background:var(--white);border:1px solid var(--ink-08)} /* 1:1 e nao 4/3: TODOS os criativos da galeria sao quadrados (760x760), desenhados com a composicao propria. Num tile 4/3 o object-fit:cover cortava 25% da altura e fatiava os potes. Com o tile quadrado a arte aparece inteira, sem recorte. */ .galeria .tile:first-child{grid-column:1/3;aspect-ratio:1} /* faixa do video: o poster e retrato (1080x1130) e aqui vira banner, entao o recorte e proposital e o object-position sobe pra nao cortar o rosto. */ .galeria .tile--largo{grid-column:1/3;aspect-ratio:4/3} .galeria .tile--largo img{object-position:center 22%} .galeria .tile--largo .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:52px;height:52px;border-radius:var(--r-pill);background:rgb(255 255 255/.92); display:inline-flex;align-items:center;justify-content:center;pointer-events:none} .galeria .tile--largo .play svg{width:18px;height:18px;fill:var(--ink);margin-left:2px} /* selo do canto, igual ao da PDP no ar */ .galeria .selo-gal{position:absolute;left:14px;top:14px;z-index:2;background:var(--ink);color:var(--off-white); border-radius:var(--r-pill);padding:6px 13px;font-weight:600;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase} .galeria img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) var(--e-out)} .galeria .tile:hover img{transform:scale(1.04)} /* coluna de compra PINADA, como na PDP deles (top 100px) */ .buy{position:sticky;top:calc(var(--header-h) + 14px);display:flex;flex-direction:column;gap:16px} @media(max-width:1000px){.buy{position:static}} .buy .nota-linha{display:flex;align-items:center;gap:9px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips span{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-70); border:1px solid var(--ink-16);border-radius:var(--r-pill);padding:5px 11px} /* fluxo de compra em 2 passos numerados (modelo deles) */ .passo{border:1px solid var(--ink-08);border-radius:var(--r-16);background:var(--white);overflow:hidden} .passo-cab{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--ink-08)} .passo-cab .n{width:22px;height:22px;border-radius:var(--r-pill);background:var(--ink);color:var(--white); font-weight:700;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px} .passo-cab .t-card{font-size:14px} .opcoes{display:flex;flex-direction:column;padding:8px} .opcao{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:13px 12px; border-radius:var(--r-8);cursor:pointer;transition:background var(--t-base) var(--e-standard)} .opcao:hover{background:var(--nude-1-50)} .opcao input{appearance:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-16);margin:0; transition:border-color var(--t-base) var(--e-standard),box-shadow var(--t-base) var(--e-standard)} .opcao input:checked{border-color:var(--cta);border-width:5px} .opcao:has(input:checked){background:var(--nude-1-50)} .opcao .nome{font-weight:600;font-size:14px} .opcao .sub{font-weight:500;font-size:12px;color:var(--ink-45)} .opcao .val{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;text-align:right} .opcao .selo-op{display:inline-block;margin-left:8px;background:var(--ink);color:var(--white);border-radius:var(--r-pill); padding:2px 8px;font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;vertical-align:1px} .inclui{display:flex;flex-direction:column;gap:9px;padding:14px 18px} .inclui li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-weight:500;font-size:13.5px;line-height:1.45;color:var(--ink-70)} .inclui .tick{color:var(--cta);font-weight:700} /* UM preço, não cinco */ .bloco-preco{display:flex;flex-direction:column;gap:4px;padding:2px 0} .bloco-preco .linha1{display:flex;align-items:baseline;gap:11px} .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill); font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:0 30px;height:54px; background:var(--cta);color:var(--white);box-shadow:var(--sh-1); transition:background var(--t-base) var(--e-standard),box-shadow var(--t-base) var(--e-standard),transform var(--t-base) var(--e-emph)} .btn:hover{background:var(--cta-dark);box-shadow:var(--sh-3);transform:translateY(-1px)} .btn--full{width:100%} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-16);box-shadow:none} .btn--ghost:hover{background:var(--white);border-color:var(--rotulo);box-shadow:var(--sh-1)} .garante{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px} .garante li{display:grid;grid-template-columns:15px 1fr;gap:9px;font-weight:500;font-size:12.5px;color:var(--ink-70)} .garante .tick{color:var(--rotulo);font-weight:700} /* nav de âncoras PINADA · aqui ela faz sentido: a página tem 12 mil pixels */ /* A barra de ancoras cola na BASE da pilha do header. O -46px punha ela em 34px, que cai dentro da faixa da pilula (8 a 74 com scroll), e ela aparecia por tras e pelos lados dela. --header-h ja e a altura do header + folga, e e o que .buy e .seletor usam. */ /* SEM GRUDAR. Ela era sticky e acompanhava a rolagem, aparecendo por cima de todas as dobras. Agora fica onde nasceu, logo abaixo do topo, e vai embora com a pagina. Continua sendo navegacao de PAGINA; o que saiu foi a perseguicao. */ .ancoras{position:relative;z-index:40;background:var(--white); border-top:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08)} .ancoras ul{display:flex;overflow-x:auto;scrollbar-width:none} .ancoras ul::-webkit-scrollbar{display:none} .ancoras a{display:block;padding:15px 16px;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-45);white-space:nowrap;border-bottom:2px solid transparent; transition:color var(--t-base) var(--e-standard),border-color var(--t-base) var(--e-standard)} .ancoras a:hover{color:var(--ink)} .ancoras a.on{color:var(--ink);border-bottom-color:var(--rotulo)} /* eyebrow em pílula, como nas dobras centralizadas da v5 */ .pill-eyebrow{display:inline-flex;align-items:center;background:var(--nude-1-50);color:var(--rotulo); border-radius:var(--r-pill);padding:7px 15px;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase} .head--centro{align-items:center;text-align:center;max-width:none;margin-left:auto;margin-right:auto} .head--centro .corpo{max-width:62ch} .dobra--nude{background:var(--nude-1-50)} /* v5 · Você se reconhece: 6 linhas de sintoma em acordeão */ .sintomas{display:flex;flex-direction:column;gap:10px} .sint{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-8);overflow:hidden; transition:border-color var(--t-base) var(--e-standard)} .sint:hover{border-color:var(--rotulo)} .sint-cab{width:100%;display:grid;grid-template-columns:30px 1fr 20px;gap:12px;align-items:center;padding:13px 16px;text-align:left} .sint-cab .ico{width:30px;height:30px;border-radius:var(--r-pill);background:var(--nude-1-50); display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--rotulo)} .sint-cab .nome{font-weight:600;font-size:14px} .sint-cab .mais{position:relative;width:16px;height:16px} .sint-cab .mais::before,.sint-cab .mais::after{content:"";position:absolute;background:var(--ink-45); transition:transform var(--t-base) var(--e-emph),opacity var(--t-base) var(--e-standard)} .sint-cab .mais::before{left:0;right:0;top:7px;height:2px} .sint-cab .mais::after{top:0;bottom:0;left:7px;width:2px} .sint-cab[aria-expanded="true"] .mais::after{transform:rotate(90deg);opacity:0} .sint-corpo{height:0;overflow:hidden;transition:height 350ms var(--e-standard)} .sint-corpo .inner{padding:0 16px 14px 58px} .sint.open .sint-corpo{height:var(--h)} /* v5 · O que a NHV faz: 4 cards com ilustração */ .faz{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media(max-width:900px){.faz{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.faz{grid-template-columns:1fr}} /* SEM moldura: a ilustracao do v5 ja vem com o proprio fundo rosa arredondado, e o card branco com borda + o box nude do .ilu criavam tres molduras encaixadas. Na PDP real nao existe nenhuma: e a ilustracao e o texto embaixo. */ .faz-card{background:transparent;border:0;border-radius:0;box-shadow:none; display:flex;flex-direction:column} /* a ilustração existe em 282x300 no Figma e o Figma não faz upscale, então ela nunca pode renderizar acima disso: com padding ela cabe no card de 322 no tamanho nativo. */ /* O arquivo da ilustracao e um retangulo creme com CANTOS ARREDONDADOS, e os pixels de fora do canto sao quase brancos (254,252,254 contra o creme 250,242,234). Sobre a dobra off-white isso aparecia como uma franja clara nos quatro cantos. O raio aqui clipa exatamente esses pixels. Sem background proprio de proposito: cada uma das quatro tem um creme ligeiramente diferente, e o painel tem o tamanho exato da imagem. */ /* prato nude: a ilustracao tem fundo claro e sobre o off-white da dobra ela sumia */ .faz-card .ilu{background:var(--nude-1-50);overflow:hidden;border-radius:var(--r-16);max-width:282px;margin-inline:auto; display:flex;align-items:center;justify-content:center} .faz-card .ilu img{max-width:282px;width:100%;height:auto;object-fit:contain;display:block} /* mesma largura e mesma centralizacao da .ilu: sem isso o texto comeca 19px a esquerda da imagem no desktop e 32px no mobile */ .faz-card .txt{max-width:282px;margin-inline:auto;padding:16px 0 0; display:flex;flex-direction:column;gap:6px} /* hover: o card levanta e a ilustracao flutua. De proposito SEM escalar a imagem, porque ela ja renderiza no tamanho nativo (282px) e ampliar so borraria. */ .faz-card{transition:transform var(--t-base) var(--e-emph)} .faz-card:hover{transform:translateY(-6px)} .faz-card .ilu img{transition:transform var(--t-sweep) var(--e-emph)} .faz-card:hover .ilu img{transform:translateY(-6px)} @media(prefers-reduced-motion:reduce){ .faz-card:hover{transform:none} .faz-card:hover .ilu img{transform:none} } /* v5 · Resultado e Importante: 2 painéis nude */ .dois-paineis{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:760px){.dois-paineis{grid-template-columns:1fr}} .painel-n{background:var(--nude-1-50);border-radius:var(--r-16);padding:26px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:10px} .painel-n .ico{width:34px;height:34px;border-radius:var(--r-pill);background:var(--white); display:inline-flex;align-items:center;justify-content:center;color:var(--rotulo);font-size:15px} .painel-n .corpo-sm{max-width:46ch} /* v5 · Antes & Depois com tarja */ /* 700 e não 1048: a fonte tem 516px de largura, então em 1048 cada foto renderizava a 514 e ficava gigante na página. A 700 cada uma sai a ~342, que é a escala da home. */ .par-ad{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:700px;margin:0 auto} @media(max-width:700px){.par-ad{grid-template-columns:1fr}} .ad{position:relative;border-radius:var(--r-16);overflow:hidden;background:var(--white);border:1px solid var(--ink-08)} .ad img{width:100%;height:auto;display:block} .ad .tarja{position:absolute;top:14px;left:14px;z-index:2;border-radius:var(--r-pill);padding:6px 13px; font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--white)} .ad .tarja--antes{background:var(--ink)} .ad .tarja--depois{background:#8E6350} /* v5 · Histórias em vídeo · sistema de reels medido da home da Renova: full-bleed, 9:16, raio 20, card ativo em scale 1.14 com opacidade 1 e os outros em .66, vizinhos empurrados por --reel-shift, tudo em 420ms na curva enfática. No lugar do nome da pessoa eles usam esse espaço pra um chip de vidro com o produto. */ /* --sb e a largura da barra de rolagem, medida no JS. Sem descontar ela, 100vw fica MAIOR que a largura util e a faixa full-bleed empurra a pagina pro lado (~15px no Windows). No Chromium headless a barra e sobreposta e vale 0, e o bug nao aparece. */ .reels{margin-left:calc(50% - 50vw + var(--sb,0px) / 2);margin-right:calc(50% - 50vw + var(--sb,0px) / 2); overflow:hidden;padding:24px 24px 40px; --reel-scale:1.06;--reel-w:62vw;--reel-gap:12px; --reel-shift:calc(var(--reel-w) * (var(--reel-scale) - 1) / 2)} @media(min-width:641px){.reels{--reel-scale:1.14;--reel-w:min(66vw,268px);--reel-gap:clamp(12px,2vw,22px);padding:40px 24px 48px}} /* Os cards dividem a largura INTEIRA da faixa em vez de ficarem centrados com sobra nas pontas: --reel-n e a quantidade de cards da pista. O teto de 420px existe para as pistas de 1 ou 2 cards (gestantes e masculino) nao virarem um card gigante. */ @media(min-width:1000px){ .reels{--reel-w:min(calc((100% - var(--reel-gap) * (var(--reel-n,4) - 1)) / var(--reel-n,4)),420px)} } .reels-pista{display:flex;justify-content:safe center;margin-left:calc(var(--reel-gap) * -1);overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab} .reels-pista::-webkit-scrollbar{display:none} .reels-pista.dragging{cursor:grabbing;scroll-snap-type:none} .reel{position:relative;flex:0 0 auto;width:calc(var(--reel-w) + var(--reel-gap));padding-left:var(--reel-gap); scroll-snap-align:center;cursor:pointer} .reel[data-ativo]{z-index:3} /* A escala vai no wrapper de FORA, nunca na .reel-caixa. Escalar a propria caixa que tem overflow:hidden + border-radius faz o Chromium pintar os filhos absolutos duas vezes (o chip aparecia fantasma, deslocado). Medido: com scale:1 na caixa o fantasma some. */ .reel-mov{position:relative;display:block;width:100%;aspect-ratio:9/16;transition:transform 420ms var(--e-emph)} .reel[data-lado="antes"] .reel-mov{transform:translateX(calc(var(--reel-shift) * -1))} .reel[data-lado="depois"] .reel-mov{transform:translateX(var(--reel-shift))} .reel[data-ativo] .reel-mov{transform:scale(var(--reel-scale))} .reel-caixa{position:absolute;inset:0;overflow:hidden;border-radius:var(--r-20);background:var(--nude-1-50); opacity:.66;transition:opacity 420ms var(--e-emph)} .reel[data-ativo] .reel-caixa{opacity:1} /* Sem rolagem nao existe carrossel: ninguem escurece, ninguem cresce, ninguem desloca. Sem isso, no desktop (onde os 4 cabem) sobrava um card inflado e tres apagados. */ .reels-pista:not(.tem-rolagem) .reel-caixa{opacity:1} .reels-pista:not(.tem-rolagem){cursor:default} /* filho direto: senao essa regra pega tambem o thumb dentro do chip e o joga pra absolute */ .reel-caixa>img,.reel-caixa>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .reel-veu{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgb(28 28 28/.55),rgb(28 28 28/.05) 55%,transparent)} .reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none; width:44px;height:44px;border-radius:var(--r-pill);background:rgb(28 28 28/.32);backdrop-filter:blur(1px); display:inline-flex;align-items:center;justify-content:center} .reel-play svg{width:18px;height:18px;fill:var(--off-white);margin-left:2px} .reel-chip{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px} .reel-chip>span{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 8px;border-radius:14px; border:1px solid rgb(255 255 255/.55);background:rgb(255 255 255/.68);backdrop-filter:blur(12px)} .reel-chip a{display:flex;flex:1;min-width:0;align-items:center;gap:6px;text-decoration:none} .reel-chip .thumb{width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-8);background:var(--white); object-fit:cover;display:block} .reel-chip .txt{flex:1;min-width:0;overflow:hidden} .reel-chip .nome{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:500;font-size:13px;line-height:1.25;color:var(--ink)} .reel-chip .precos{display:flex;align-items:baseline;gap:6px;white-space:nowrap} .reel-chip .precos s{font-size:12px;color:var(--ink-45)} .reel-chip .precos strong{font-weight:700;font-size:13px;color:var(--ink)} @media(max-width:899px){.reel-chip .precos s{display:none}} .reel-chip button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:var(--r-pill);background:var(--white); color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer; transition:background var(--t-base) var(--e-standard),color var(--t-base) var(--e-standard)} .reel-chip button:hover{background:var(--cta);color:var(--white)} .reel-chip button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8} /* v5 · Informação nutricional: tabela de verdade, com os valores do rótulo */ .nutri{max-width:640px;margin:0 auto;background:var(--white);border:1px solid var(--ink-08); border-radius:var(--r-16);box-shadow:var(--sh-1);overflow:hidden} .nutri-topo{padding:18px 22px 14px;border-bottom:1px solid var(--ink-08);background:var(--nude-1-50)} .nutri-topo strong{display:block;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} .nutri-topo span{display:block;margin-top:4px;font-weight:500;font-size:12.5px;color:var(--ink-70)} .nutri-rolo{overflow-x:auto;min-width:0;contain:paint} .nutri table{border-collapse:collapse;width:100%} .nutri thead th{padding:11px 22px;text-align:right;font-weight:600;font-size:10.5px;letter-spacing:.07em; text-transform:uppercase;color:var(--ink-45);border-bottom:1px solid var(--ink-08);white-space:nowrap} .nutri thead th:first-child{text-align:left} .nutri tbody th{padding:10px 22px;text-align:left;font-weight:500;font-size:14px;color:var(--ink)} .nutri tbody td{padding:10px 22px;text-align:right;font-weight:600;font-size:14px;color:var(--ink-70); font-variant-numeric:tabular-nums;white-space:nowrap} .nutri tbody tr+tr th,.nutri tbody tr+tr td{border-top:1px solid var(--ink-08)} .nutri tbody tr:nth-child(even){background:rgb(28 28 28/.015)} .nutri tbody tr.so-ah th,.nutri tbody tr.so-ah td{font-weight:700;color:var(--ink);background:var(--nude-1-50)} .nutri-pe{padding:12px 22px 0;font-weight:500;font-size:11px;line-height:1.45;color:var(--ink-45)} .nutri-pe:last-child{padding-bottom:18px} /* gestantes: a tabela dessa linha tem 17 nutrientes e não leva ácido hialurônico */ #pdp[data-linha="ge"] .nutri tr.so-ah{display:none} /* v5 · Comparativo de 3 colunas */ .comp{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-16);box-shadow:var(--sh-1);overflow-x:auto;min-width:0} .comp table{border-collapse:collapse;width:100%;min-width:440px} .comp thead th{padding:18px 12px 14px;text-align:center;font-weight:600;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-45);vertical-align:bottom} .comp thead th:first-child{text-align:left;font-weight:500;text-transform:none;letter-spacing:0;font-size:12px} .comp thead th.nhv span{display:inline-flex;align-items:center;justify-content:center;background:var(--cta); color:var(--white);border-radius:var(--r-8);padding:8px 14px;font-weight:700;font-size:12px;letter-spacing:.08em} .comp tbody td{padding:13px 12px;border-top:1px solid var(--ink-08);text-align:center;font-weight:700;font-size:15px} .comp tbody td:first-child{text-align:left;font-weight:500;font-size:13.5px;color:var(--ink-70)} .comp .s{color:var(--cta)} .comp .p{color:var(--gold)} .comp .n{color:#C0392B} /* v5 · Como tomar: 4 itens com ícone escuro */ /* Coluna de 360 em vez de metade da tela: a foto centrada numa coluna de 660 deixava 190px de vao de cada lado. Em REGRA e nao em style inline, porque inline nao obedece media query e no mobile a coluna de 360 estourava a largura da tela. */ #como .g2{grid-template-columns:360px 1fr;gap:40px;align-items:center} @media(max-width:860px){#como .g2{grid-template-columns:1fr;gap:28px}} #como .foto-bloco{max-width:360px} .tomar{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px} @media(max-width:560px){.tomar{grid-template-columns:1fr}} .tomar .it{display:flex;flex-direction:column;gap:7px} .tomar .ico{width:34px;height:34px;border-radius:var(--r-pill);background:var(--ink);color:var(--white); display:inline-flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:4px} /* v5 · Avaliações */ .aval{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start} @media(max-width:900px){.aval{grid-template-columns:1fr;gap:26px}} .nota-grande{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-16);padding:26px; display:flex;flex-direction:column;gap:3px} .nota-grande .n{font-weight:300;font-size:64px;line-height:1} .bars{display:flex;flex-direction:column;gap:8px;margin-top:16px} .bar{display:grid;grid-template-columns:30px 1fr 62px;gap:10px;align-items:center; font-weight:500;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-70)} .bar .track{height:5px;border-radius:var(--r-pill);background:var(--ink-08);overflow:hidden} .bar .track b{display:block;height:100%;background:var(--gold);border-radius:var(--r-pill)} .bar .qt{text-align:right;color:var(--ink-45)} .depo{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-16);padding:22px; display:flex;flex-direction:column;gap:10px} .depo .quote{font-weight:500;font-size:15px;line-height:1.55;color:var(--ink)} .depo .quem{font-weight:600;font-size:13px} .depo .meta{font-weight:500;font-size:11.5px;color:var(--ink-45)} /* chips zero */ .zeros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px} .zeros span{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--ink-08); border-radius:var(--r-pill);padding:8px 15px;font-weight:600;font-size:12px;color:var(--ink-70)} .zeros .tick{color:var(--cta);font-weight:700;font-style:normal} /* dobras */ .dobra{padding:80px 0;position:relative;background:var(--off-white)} @media(max-width:640px){.dobra{padding:56px 0}} .dobra--white{background:var(--white)} .dobra--ink{background:var(--ink);color:var(--off-white)} .dobra--ink .corpo{color:rgb(245 244 240/.72)} .dobra--ink .corpo b{color:var(--off-white)} .head{display:flex;flex-direction:column;gap:10px;margin-bottom:34px;max-width:58ch} /* reveal escalonado */ html.js [data-rev]:not([data-anim]){opacity:0;transform:translateY(40px)} html.js [data-rev]:not([data-anim]).in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)} html.js [data-rev]:not([data-anim]).now{opacity:1;transform:none} /* grade genérica de 4 */ .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.g4{grid-template-columns:1fr}} .g2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} @media(max-width:900px){.g2{grid-template-columns:1fr;gap:24px}} .cartao{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-16);padding:22px; display:flex;flex-direction:column;gap:8px} .foto-bloco{border-radius:var(--r-16);overflow:hidden;background:var(--white);border:1px solid var(--ink-08)} .foto-bloco img{width:100%;height:auto;display:block} /* PainMatch em abas */ .abas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px} .abas button{padding:0 18px;height:44px;border:1px solid var(--ink-16);border-radius:var(--r-pill); font-weight:600;font-size:13px;color:var(--ink-70);background:var(--white); transition:border-color var(--t-base) var(--e-standard),background var(--t-base) var(--e-standard),color var(--t-base) var(--e-standard)} .abas button:hover{border-color:var(--rotulo)} .abas button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)} .painel-caso{background:var(--nude-1-50);border-radius:var(--r-16);padding:30px} .painel-caso[hidden]{display:none} .painel-caso .g2{gap:34px;align-items:start} /* linha do tempo */ .tl{--tl-fill:0;position:relative;padding-top:8px} /* top 16 e nao 19: o centro da bolinha esta em 8 (padding do .tl) + 9 (metade de 18) = 17, e o trilho tem 2px de altura. Com 19 ele passava 5px abaixo das bolinhas. */ .tl .rail{position:absolute;left:0;right:0;top:16px;height:2px;background:var(--ink-08)} .tl .rail b{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--nude-3);display:block; transform:scaleX(var(--tl-fill));transform-origin:left center} .fases{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative} @media(max-width:860px){.fases{grid-template-columns:repeat(2,1fr);gap:30px}.tl .rail{display:none}} .fase{display:flex;flex-direction:column;gap:7px} /* box-sizing pra borda nao vazar 2px pra fora da coluna, e 18px pra manter o tamanho */ .fase .dot{box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:var(--off-white);border:2px solid var(--ink-16); margin-bottom:14px;transition:background var(--t-base) var(--e-emph),border-color var(--t-base) var(--e-emph),transform var(--t-base) var(--e-emph)} .fase.on .dot{background:var(--nude-3);border-color:var(--rotulo);transform:scale(1.35)} .fase .marca{font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45);transition:color var(--t-base) var(--e-standard)} .fase.on .marca{color:var(--rotulo)} .fase .quando{font-weight:600;font-size:22px;line-height:1.1;transition:color var(--t-base) var(--e-standard)} .fase.on .quando{color:var(--rotulo)} .fase ul{display:flex;flex-direction:column;gap:5px;margin-top:4px} .fase li{display:grid;grid-template-columns:14px 1fr;gap:8px;font-weight:500;font-size:13px;line-height:1.4;color:var(--ink-70)} .fase .tick{color:var(--rotulo)} .selo-fase{align-self:flex-start;background:var(--nude-4);color:var(--white);border-radius:var(--r-pill); padding:4px 11px;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-top:2px} .pcts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--ink-08)} @media(max-width:760px){.pcts{grid-template-columns:1fr;gap:18px}} .pct{display:flex;align-items:baseline;gap:14px} .pct b{font-weight:300;font-size:52px;line-height:.9;color:var(--rotulo);font-variant-numeric:tabular-nums} .pct span{font-weight:500;font-size:13.5px;line-height:1.4;color:var(--ink-70);max-width:18ch} /* acordeão · altura medida, 350ms */ .acc{border-top:1px solid var(--ink-08)} .acc-item{border-bottom:1px solid var(--ink-08)} .acc-trigger{width:100%;display:flex;align-items:center;gap:14px;padding:20px 0;text-align:left;min-height:66px} .acc-trigger .nome{font-weight:600;font-size:16px;flex:1} .acc-trigger .dose{font-weight:600;font-size:12px;letter-spacing:.08em;color:var(--rotulo); border:1px solid var(--ink-16);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap; transition:border-color var(--t-base) var(--e-standard),background var(--t-base) var(--e-standard)} .acc-trigger:hover .dose{border-color:var(--rotulo);background:var(--nude-1-50)} .acc-trigger .mais{width:22px;height:22px;position:relative;flex:0 0 22px} .acc-trigger .mais::before,.acc-trigger .mais::after{content:"";position:absolute;background:var(--ink); transition:transform var(--t-base) var(--e-emph),opacity var(--t-base) var(--e-standard)} .acc-trigger .mais::before{left:0;right:0;top:10px;height:2px} .acc-trigger .mais::after{top:0;bottom:0;left:10px;width:2px} .acc-trigger[aria-expanded="true"] .mais::after{transform:rotate(90deg);opacity:0} .acc-panel{height:0;overflow:hidden;transition:height 350ms var(--e-standard)} .acc-panel .inner{padding:0 0 22px;max-width:66ch} .acc-item.open .acc-panel{height:var(--panel-h)} /* barra de compra FIXA no rodapé da tela, como na PDP deles */ .barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--white); border-top:1px solid var(--ink-08);box-shadow:0 -8px 30px rgb(28 28 28/.08); transform:translateY(110%);transition:transform var(--t-chrome) var(--e-emph)} .barra-compra.on{transform:translateY(0)} .barra-compra .in{display:flex;align-items:center;gap:20px;padding:12px 0} .barra-compra .qual{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .barra-compra .mini{width:46px;height:46px;border-radius:var(--r-8);overflow:hidden;border:1px solid var(--ink-08);flex:0 0 46px} .barra-compra .mini img{width:100%;height:100%;object-fit:cover;display:block} .barra-compra .txt{min-width:0} .barra-compra .txt .t-card{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barra-compra .preco{font-size:22px} @media(max-width:640px){ .barra-compra .qual .txt{display:none} .barra-compra .btn{flex:1;padding:0 16px} } /* FAB do WhatsApp */ .fab{position:fixed;right:20px;bottom:96px;z-index:54;width:52px;height:52px;border-radius:var(--r-pill); background:var(--cta);color:var(--white);display:inline-flex;align-items:center;justify-content:center; box-shadow:var(--sh-3);transition:transform var(--t-base) var(--e-emph)} .fab:hover{transform:scale(1.06)} .fab svg{width:26px;height:26px;fill:currentColor} /* aviso */ /* mesmo tratamento de card do resto da página: fio de 1px e raio 16. A ênfase fica no eyebrow em caramelo, não numa tarja lateral. */ .aviso{background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-16); padding:22px;display:flex;flex-direction:column;gap:10px;max-width:76ch} .aviso .atributo{color:var(--rotulo)} .rodape{background:var(--ink);color:rgb(245 244 240/.6);padding:40px 0 110px;font-weight:500;font-size:12px;line-height:1.7} .rodape b{color:var(--off-white);font-weight:600} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html.js [data-rev]{opacity:1;transform:none} } /* ============================================================ RODAPÉ do site · quatro colunas + barra legal Conteúdo, links, telefone, e-mail e CNPJ são os que estão no rodapé da loja no ar. Marcas de pagamento em SVG inline: vetor não borra em nenhuma densidade e não pesa base64. ============================================================ */ .pe{background:var(--ink);color:rgb(245 244 240/.62);padding:64px 0 0} .pe a{color:rgb(245 244 240/.62);text-decoration:none;transition:color var(--t-base) var(--e-standard)} .pe a:hover{color:var(--off-white)} .pe-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px} @media(max-width:900px){.pe-grade{grid-template-columns:1fr 1fr;gap:34px}} @media(max-width:560px){.pe-grade{grid-template-columns:1fr;gap:30px}} .pe-marca .logo{display:inline-flex;color:var(--off-white)} .pe-marca .logo svg{height:22px;width:auto;fill:currentColor} .pe-marca p{margin-top:16px;font-weight:500;font-size:13px;line-height:1.65;max-width:34ch} .pe h3{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--off-white);margin-bottom:16px} .pe ul{display:flex;flex-direction:column;gap:10px} .pe li{font-weight:500;font-size:13.5px;line-height:1.4} .pe-fala{display:flex;flex-direction:column;gap:10px;font-weight:500;font-size:13.5px} .pe-fala a{display:inline-flex;align-items:center;gap:9px} .pe-fala svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;flex:0 0 16px} .pe-selos{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .pe-selos span{border:1px solid rgb(245 244 240/.2);border-radius:var(--r-8);padding:7px 11px; font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgb(245 244 240/.72)} .pe-barra{margin-top:52px;border-top:1px solid rgb(245 244 240/.14);padding:22px 0 26px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .pe-legal{font-weight:500;font-size:12px;line-height:1.6} .pe-legal b{color:var(--off-white);font-weight:600} .pe-pag{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pe-pag i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:26px; background:var(--white);border-radius:var(--r-4);padding:3px} .pe-pag i svg{width:100%;height:100%} .pe-pag em{font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.08em;color:var(--ink); display:inline-flex;align-items:center;justify-content:center;min-width:40px;padding:0 7px;height:26px; background:var(--white);border-radius:var(--r-4);white-space:nowrap} .pe-nota{border-top:1px solid rgb(245 244 240/.14);padding:20px 0 110px;font-weight:500;font-size:11.5px; line-height:1.65;color:rgb(245 244 240/.42)} .pe-nota b{color:rgb(245 244 240/.62);font-weight:600} .pe-nota code{background:rgb(245 244 240/.1);color:rgb(245 244 240/.72);border-radius:3px;padding:1px 5px} /* ---------- Ajustes de tela pequena, todos medidos ---------- */ /* Em 320px a pilula pode ter 100%-40=280px, mas o conteudo minimo pedia ~308: logo 74 + gap 34 + bloco da direita 152 + padding 48. Aqui ela ganha o espaco. */ @media(max-width:900px){ /* "Rastrear pedido" vive no menu de tela cheia e no rodape; no header ele era o que mais empurrava a pilula no mobile. */ .hdr .rastrear{display:none} } @media(max-width:420px){ /* Precisa repetir o seletor do estado rolado: html.is-scrolled .hdr .pill tem (0,3,0) e sobrescrevia o max-width daqui, deixando a pilula estourar em 320px. */ .hdr .pill,html.is-scrolled .hdr .pill{max-width:calc(100% - 16px);padding:0 10px;gap:8px} .hdr .logo svg{height:16px} .hdr .right{gap:0} /* em 320 nao cabem quatro alvos de 44px: a conta e o menos essencial e sai */ .hdr .right [aria-label="Minha conta"]{display:none} /* os cartoes de selo nao encolhiam abaixo do conteudo e vazavam 34px */ .selo{padding:16px 8px} .selo img{width:84px} } /* Alvo de toque de 44px: o logo tem 18px de altura de desenho, o resto vem de padding. Nao muda nada visual, so a area clicavel. */ .hdr .logo{padding:13px 0} /* O botao do chip do reel tem 36px (o mesmo da Renova). No carrossel de toque isso fica abaixo do minimo de 44, entao ele cresce onde a pista e arrastada com o dedo. */ @media(max-width:1000px){ .reel-chip button{width:44px;height:44px;flex:0 0 44px} .reel-chip>span{min-height:56px} } /* ---------- Menu de tela cheia no mobile ---------- Medido no site deles em 390px: painel branco ocupando a tela inteira, transição de 520ms em cubic-bezier(.16,1,.3,1), e véu escuro a 50% em 420ms ease-in-out. Sem [hidden]: uso visibility com delay, porque classe de display contra [hidden] já me custou três bugs nesta página. */ .menu-abre{display:none} @media(max-width:900px){.menu-abre{display:inline-flex}} .menu-veu{position:fixed;inset:0;z-index:70;background:rgb(28 28 28/.5);opacity:0; visibility:hidden;transition:opacity 420ms ease-in-out,visibility 0s linear 420ms} .menu-veu.on{opacity:1;visibility:visible;transition:opacity 420ms ease-in-out,visibility 0s} .menu-mob{position:fixed;inset:0;z-index:71;background:var(--white);color:var(--ink); transform:translateX(100%);visibility:hidden;overflow-y:auto; transition:transform 520ms var(--e-expo),visibility 0s linear 520ms; display:flex;flex-direction:column;padding:20px 20px 40px} .menu-mob.on{transform:none;visibility:visible;transition:transform 520ms var(--e-expo),visibility 0s} .menu-topo{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:26px} .menu-mob h2{font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)} .menu-mob ul{display:flex;flex-direction:column} .menu-mob li{border-bottom:1px solid var(--ink-08)} .menu-mob li a{display:flex;align-items:center;min-height:56px;font-weight:300;font-size:22px; letter-spacing:.03em;text-transform:uppercase;color:var(--ink)} .menu-mob .secao{margin-top:30px} .menu-mob .secao li a{font-size:15px;font-weight:500;text-transform:none;letter-spacing:0;min-height:48px} .menu-mob .pe-fala{margin-top:auto;padding-top:30px;color:var(--ink-70)} .menu-mob .pe-fala a{color:var(--ink-70)} /* ---------- Prévia mobile (ferramenta de conferência, não é parte do site) ---------- */ .previa-abre{position:fixed;left:16px;bottom:16px;z-index:150;display:inline-flex;align-items:center;gap:9px; min-height:44px;padding:0 16px;border:1px solid var(--ink-16);border-radius:var(--r-pill); background:var(--white);color:var(--ink);box-shadow:var(--sh-2);cursor:pointer; font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase; transition:transform var(--t-base) var(--e-emph),box-shadow var(--t-base) var(--e-standard)} .previa-abre:hover{transform:translateY(-2px);box-shadow:var(--sh-3)} .previa-abre svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8} @media(max-width:900px){.previa-abre{display:none}} .previa{position:fixed;inset:0;z-index:200;background:rgb(28 28 28/.86);opacity:0;visibility:hidden; transition:opacity 320ms var(--e-standard),visibility 0s linear 320ms; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px} .previa.on{opacity:1;visibility:visible;transition:opacity 320ms var(--e-standard),visibility 0s} .previa-barra{display:flex;align-items:center;gap:8px} .previa-barra button{min-height:38px;padding:0 15px;border:1px solid rgb(245 244 240/.28); border-radius:var(--r-pill);background:transparent;color:rgb(245 244 240/.7);cursor:pointer; font-weight:600;font-size:11.5px;letter-spacing:.08em; transition:background var(--t-base) var(--e-standard),color var(--t-base) var(--e-standard)} .previa-barra button:hover{color:var(--off-white);background:rgb(245 244 240/.1)} .previa-barra button[aria-pressed="true"]{background:var(--off-white);color:var(--ink);border-color:var(--off-white)} .previa-barra .fecha{margin-left:10px} /* moldura de aparelho: a altura acompanha a tela para caber em notebook */ .previa-frame{background:var(--ink);border-radius:46px;padding:11px;box-shadow:0 30px 80px rgb(0 0 0/.5); flex:0 0 auto;transition:width 320ms var(--e-emph)} .previa-frame iframe{display:block;width:100%;height:min(844px,calc(100vh - 190px)); border:0;border-radius:36px;background:var(--white)} .previa-nota{font-weight:500;font-size:11.5px;color:rgb(245 244 240/.55);text-align:center;max-width:44ch} /* ---------- Carrosseis: setas, como no mobile deles ---------- Injetadas por JS so nas pistas que de fato transbordam, entao nao aparecem quando todos os itens ja cabem na tela. */ .rolo-setas{display:flex;justify-content:flex-end;gap:8px;margin-top:14px} .rolo-setas button{width:44px;height:44px;border-radius:var(--r-pill); border:1px solid var(--ink-16);background:var(--white);color:var(--ink);cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:background var(--t-base) var(--e-standard),border-color var(--t-base) var(--e-standard), opacity var(--t-base) var(--e-standard)} .rolo-setas button:hover{background:var(--nude-1-50);border-color:var(--rotulo)} .rolo-setas button[disabled]{opacity:.34;cursor:default} .rolo-setas svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2} /* dentro da faixa full-bleed dos reels as setas respeitam o gutter */ .reels .rolo-setas{padding:0 4px} /* "Produtos em destaque": grade de 2 colunas no mobile em vez de carrossel. Como carrossel de 64% ele cortava o segundo card no meio do preco. */ @media(max-width:900px){ .strip{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 12px;overflow:visible;cursor:default} .strip>.card{flex:none;min-width:0} } @media(max-width:360px){.strip{grid-template-columns:1fr;gap:26px}} /* ---------- Carrinho: cupom, desconto e total ---------- */ .dw-cupom{margin-bottom:14px} .dw-cupom-linha{display:flex;gap:8px} .dw-cupom-linha input{flex:1 1 auto;min-width:0;height:44px;padding:0 14px; border:1px solid var(--ink-16);border-radius:var(--r-10);background:var(--white); font:inherit;font-size:14px;color:var(--ink)} .dw-cupom-linha input::placeholder{color:var(--ink-45)} .dw-cupom-linha input:focus-visible{outline:2px solid var(--ink);outline-offset:1px} .dw-cupom-linha button{flex:0 0 auto;height:44px;padding:0 18px;border:0; border-radius:var(--r-10);background:var(--ink);color:var(--off-white); font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer} .dw-cupom-msg{margin:8px 0 0;font-size:12.5px;line-height:1.4} .dw-cupom-msg[data-ok]{color:var(--cta-dark)} .dw-cupom-msg[data-erro]{color:#B4423A} /* o botao de tirar o cupom e texto, nao caixa: ele nao disputa com o Aplicar */ .dw-tira-cupom{border:0;background:none;padding:0 0 0 6px;font:inherit;font-size:11.5px; color:var(--ink-45);text-decoration:underline;cursor:pointer} .soma--desc .preco{color:var(--cta-dark)} .soma--total{border-top:1px solid var(--ink-08);padding-top:10px;margin-top:2px} /* ---------- CORTINA · uma folha solida desce, cobre e continua descendo ---------- Sem fundo proprio: so as barras, em ink. O quadro do pattern ja mede 96vw e o que anima e o clip-path, entao as barras nunca esticam. Fundo off-white so no instante do corte. */ .cortina{position:fixed;inset:0;z-index:9000;pointer-events:none;visibility:hidden} .cortina[data-ativa]{visibility:visible;pointer-events:auto} /* DESCIDA: a folha do pattern desce de cima, cobre e continua descendo para sair. transform em vez de clip-path porque translate so compoe, nao repinta, e porque a folha anda inteira: nenhuma barra do pattern estica em nenhum quadro. Fundo off-white na propria folha, e nao no veu atras: quem cobre a pagina e ela. */ .ct-pat{position:absolute;inset:0;width:100%; will-change:transform;background:var(--ink); transform:translateY(-100%); transition:transform 620ms var(--e-emph)} .cortina[data-aberta] .ct-pat{transform:translateY(0)} /* chegada: a borda esquerda avanca e descobre a pagina nova, saindo pela direita. Declarada depois de [data-aberta] para vencer o empate de especificidade. */ .cortina[data-saindo] .ct-pat{transform:translateY(100%); transition-timing-function:cubic-bezier(.4,0,1,1)} .cortina[data-seco] .ct-pat,.cortina[data-seco]::before{transition:none} @media(prefers-reduced-motion:reduce){.cortina{display:none}} /* ---------- Quebra de linha equilibrada em TODA head e subhead ---------- Regra do Matheus: a ultima linha nunca pode ficar com duas ou tres palavras soltas. text-wrap:balance faz o navegador testar as quebras e escolher a que deixa as linhas com larguras parecidas; pretty resolve o caso do corpo longo, onde balance nao age (o motor limita balance a poucas linhas) mas a orfa de uma palavra ainda incomoda. */ h1,h2,h3,h4,.t-dobra,.t-benef,.t-card,.atributo,.pagto-titulo,.vip-tit, .head .corpo,.head .corpo-sm,.vip-sub,.quem,.lbl{text-wrap:balance} .corpo,.corpo-sm,.cap,.quote,.meta,p{text-wrap:pretty} /* ---------- Mobile: head e subhead centradas ---------- Medido na home deles: no mobile TODA head e subhead sai com text-align:center (dobra a dobra, folga 0/0 nas duas bordas); no desktop as mesmas voltam a left. Aqui isso vira uma regra do sistema em vez de ajuste dobra a dobra: .head e um flex em coluna, entao basta align-items e text-align, e margem auto nos filhos para os que carregam max-width proprio. */ @media(max-width:860px){ .head{align-items:center;text-align:center;max-width:none; margin-left:auto;margin-right:auto} .head>*{margin-left:auto;margin-right:auto} /* subheads que vivem fora de .head */ .cap-equilibrio{margin-left:auto;margin-right:auto} } /* ---------- Convivencia com a mola do anime.js ---------- A mola escreve transform inline a cada quadro; transition de transform em cima disso transforma cada quadro numa transicao e arrasta o movimento. */ html[data-anime-hover] .card .tile,html[data-anime-hover] .porta{transition:none} html[data-anime-heads] .head .t-dobra{opacity:1} /* ---------- Padrao da loja: botao, rodape e header ---------- Um botao primario para a loja toda: caramelo de base, verde varrendo por cima e ficando, 46px de altura (44 no mobile). Antes so os cards da home tinham isso; o .btn base nao declarava altura e ela vinha do padding, dando 53 ou 54px. */ .btn:not(.btn--ghost):not(.btn--ink):not(.btn--claro){ height:46px;padding:0 30px; background-color:var(--rotulo); background-image:linear-gradient(to right,var(--cta) 50%,transparent 50%); background-size:220% 100%;background-position:100% 0; transition:background-position var(--t-sweep) var(--e-sweep), box-shadow var(--t-base) var(--e-standard)} .btn:not(.btn--ghost):not(.btn--ink):not(.btn--claro):hover{background-position:0 0;box-shadow:var(--sh-3)} @media(max-width:1000px){.btn:not(.btn--ghost):not(.btn--ink):not(.btn--claro){height:44px;padding:0 22px}} /* o rodape na camada do painel: o hero e sticky pela pagina inteira e, com z-index menor, pintava por cima do rodape. Vale para qualquer pagina que ganhe um sticky. */ .pe{position:relative;z-index:2} /* a logo respirando no mobile: com 10px ela encostava na borda do pill */ @media(max-width:860px){ .hdr .pill,html.is-scrolled .hdr .pill{padding:0 16px} } /* ---------- PDP: alinhamentos e linha do tempo ---------- */ /* 3b. a foto e os cartoes partem do MESMO topo. Com align-items:center a coluna de cartoes, mais alta, centralizava a foto e ela flutuava no meio da dobra. */ #como .g2{align-items:start} /* 3c. a foto de produto tem fundo branco; sobre a dobra branca ela desaparecia. Prato nude atras dela, e a dobra volta ao off-white. */ #como .foto-bloco{background:var(--nude-1-50);border-radius:var(--r-16); overflow:hidden;padding:0} /* 4b. LINHA DO TEMPO VERTICAL NO MOBILE, igual a da home. Sem trilho, a bolinha solta no canto do card nao quer dizer nada. Aqui a linha desce: uma coluna, trilho por segmento dentro de cada passo (termina sozinho no ultimo) e a bolinha sentada nele. */ @media(max-width:860px){ .fases{grid-template-columns:1fr;gap:0} .tl .rail{display:none} .tl-step{position:relative;display:grid;grid-template-columns:auto 1fr; column-gap:16px;align-items:start;padding-bottom:28px} .fases li.tl-step:last-child{padding-bottom:0} .tl-step::before{content:"";position:absolute;left:5px;top:18px;bottom:-11px; width:2px;background:var(--ink-08)} .fases li.tl-step:last-child::before{display:none} .tl-step.on::before{background:var(--nude-3)} .tl-step .dot,.fase .dot{grid-area:1/1;width:12px;height:12px;margin:5px 0 0; align-self:start} .tl-step.on .dot,.fase.on .dot{transform:scale(1.25)} .tl-step .marca{grid-area:1/2;margin:0} .tl-step .quando,.tl-step .selo-fase,.tl-step ul{grid-column:2} .tl-step .quando{margin:4px 0 8px} .tl-step .selo-fase{justify-self:start;margin-bottom:8px} } /* ---------- Videos: hover e entrada ---------- Antes o reel so tinha o estado ativo do carrossel (opacidade e escala) e nenhuma resposta ao mouse. O hover NAO vai no .reel-mov: e ali que mora a escala do item ativo, e as duas brigariam. Vai na imagem, que esta dentro de .reel-caixa com overflow:hidden, e no botao de play. */ .reel-caixa>img,.reel-caixa>video{transition:transform 560ms var(--e-out)} .reel:hover .reel-caixa>img,.reel:focus-visible .reel-caixa>img, .reel:hover .reel-caixa>video,.reel:focus-visible .reel-caixa>video{transform:scale(1.06)} .reel-play{transition:transform 320ms var(--e-emph),box-shadow 320ms var(--e-standard),opacity 260ms var(--e-standard)} .reel:hover .reel-play,.reel:focus-visible .reel-play{transform:translate(-50%,-50%) scale(1.14); box-shadow:var(--sh-3)} /* o veu escurece um tico no hover, para o play ganhar contraste */ .reel-veu{transition:opacity 380ms var(--e-standard)} .reel:hover .reel-veu{opacity:.82} /* ---------- Depoimento em video no card e no visor ---------- Os arquivos vem dos Arquivos da Shopify (720x1280 com audio AAC), nao do YouTube. No card: mudo, em laco, e o poster continua sendo o primeiro quadro que a pessoa ve. No visor: com voz. O play desaparece enquanto toca, senao fica um botao de tocar sobre um video que ja esta tocando. */ .reel-vid{opacity:0;transition:opacity 300ms var(--e-standard)} .reel[data-tocando] .reel-vid{opacity:1} .reel[data-tocando] .reel-play{opacity:0;transform:translate(-50%,-50%) scale(.86)} .visor-palco>video{display:none;background:var(--ink)} .visor-palco>video[data-usando]{display:block} @media(prefers-reduced-motion:reduce){.reel-vid{display:none}} @media(hover:none){ .reel-caixa>img,.reel-caixa>video,.reel-play,.reel-veu{transition:none} } /* ---------- Como tomar: rotina numerada ---------- Eram tres caixas brancas com borda empilhadas ao lado da foto: tres molduras sobre uma dobra que ja e um fundo, e nada indicava que a ordem importa. Aqui e sequencia, na mesma linguagem da linha do tempo da pagina: numero, trilho ligando um ao outro, texto ao lado. O trilho e um ::before DENTRO de cada item, entao o ultimo nao desenha nada e nao sobra risco solto na ponta. */ .rotina{list-style:none;margin:0;padding:0;display:grid;gap:0} .rotina li{position:relative;display:grid;grid-template-columns:auto 1fr; column-gap:16px;align-items:start;padding-bottom:26px} .rotina li:last-child{padding-bottom:0} .rotina li::before{content:"";position:absolute;left:15px;top:34px;bottom:-2px; width:2px;background:var(--ink-08)} .rotina li:last-child::before{display:none} /* o numero e o mesmo marcador da linha do tempo, com o algarismo dentro */ .rotina .num{box-sizing:border-box;width:32px;height:32px;border-radius:50%; background:var(--nude-1-50);color:var(--rotulo); display:inline-flex;align-items:center;justify-content:center; font-weight:600;font-size:14px;letter-spacing:0;flex:0 0 auto} .rotina .t-card{margin:5px 0 4px} .rotina .corpo-sm{max-width:46ch} /* ---------- Titulo fatiado: nao duplicar na copia ---------- O text.split do anime.js guarda o texto inteiro num span invisivel para leitor de tela, e marca as palavras visiveis como aria-hidden. Isso e certo para acessibilidade, mas ao SELECIONAR a dobra o texto vinha duas vezes, porque os dois sao selecionaveis. user-select:none no clone resolve a copia sem tirar ele da arvore de acessibilidade. */ .head .t-dobra span[style*="clip-path"]{-webkit-user-select:none;user-select:none} /* ---------- Visor dos depoimentos ---------- O play nao tocava nada porque nao existe arquivo de video. Aqui ele abre a imagem em tela cheia. Quando os videos existirem, o