/* ══════════════════════════════════════════════════════════════════════════ Folha compartilhada das páginas de produto. As três páginas usam ESTE arquivo e mudam só duas coisas: a cor do produto (`--c`, declarada no de cada uma) e o conteúdo. É o que garante que Store, Care e Pratto sejam irmãos de verdade, e não três páginas parecidas que vão divergir no primeiro ajuste apressado. Herdamos o desenho da capa: mesma serifa, mesmo ouro, mesma respiração. Quem chega aqui vindo de lá não sente que trocou de site. ══════════════════════════════════════════════════════════════════════════ */ :root{ --tinta:#06060f; --tinta-2:#0d0d1c; --papel:#f3f1ff; --fraco:#a8a3d0; --linha:rgba(243,241,255,.10); --ouro:#c9b037; --sombra:0 24px 60px -32px rgba(0,0,0,.9), 0 2px 0 rgba(243,241,255,.05) inset; --sombra-alta:0 34px 80px -30px rgba(0,0,0,1), 0 2px 0 rgba(243,241,255,.09) inset; --serifa:'Fraunces',Georgia,serif; --sans:'Manrope',system-ui,-apple-system,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--tinta);color:var(--papel); font-family:var(--sans);font-size:17px;line-height:1.7; -webkit-font-smoothing:antialiased; } .env{width:min(1120px,92vw);margin:0 auto} a{color:inherit} /* ── movimento ─────────────────────────────────────────────────────────── */ .fio{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ouro);z-index:60;transition:width .1s linear} .halo{ position:absolute;inset:-30% -12% auto -12%;height:760px;z-index:1;pointer-events:none; background:radial-gradient(46% 58% at 22% 26%, var(--c-fraco), transparent 70%), radial-gradient(38% 48% at 78% 8%, rgba(201,176,55,.10), transparent 70%); } @media (prefers-reduced-motion: no-preference){ .halo{animation:respira 16s ease-in-out infinite alternate} @keyframes respira{ from{transform:translate3d(0,0,0) scale(1);opacity:.85} to{transform:translate3d(0,-22px,0) scale(1.07);opacity:1} } .revela{opacity:0;transform:translateY(20px); transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)} .revela.visivel{opacity:1;transform:none} .modulos.visivel li{animation:sobe .6s cubic-bezier(.2,.7,.2,1) both} .modulos.visivel li:nth-child(2){animation-delay:.04s} .modulos.visivel li:nth-child(3){animation-delay:.08s} .modulos.visivel li:nth-child(4){animation-delay:.12s} .modulos.visivel li:nth-child(5){animation-delay:.16s} .modulos.visivel li:nth-child(6){animation-delay:.2s} @keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} } /* ── cabeçalho ─────────────────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:40;background:rgba(6,6,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)} header .env{display:flex;align-items:center;justify-content:space-between;height:74px;gap:18px} .marca{display:flex;align-items:center;gap:11px;text-decoration:none} .marca svg{height:24px;width:auto} .marca span{font-weight:700;letter-spacing:.14em;font-size:14px} .marca .prod{color:var(--c);font-weight:500} header .voltar{font-size:14px;color:var(--fraco);text-decoration:none;transition:color .2s} header .voltar:hover{color:var(--papel)} /* ── abertura ──────────────────────────────────────────────────────────── */ .abre{padding:104px 0 90px;position:relative;overflow:hidden} .abre .env{position:relative;z-index:2} .olho{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:24px;font-weight:600} h1{ font-family:var(--serifa);font-weight:400; font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.02em;max-width:19ch; } h1 b{font-weight:600} h1 .pt{color:var(--ouro)} .abre .lead{margin-top:30px;max-width:58ch;font-size:19px;color:var(--fraco)} .acoes{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap} .btn{display:inline-block;padding:14px 26px;border-radius:999px;text-decoration:none; font-weight:600;font-size:15px;transition:transform .15s,box-shadow .25s,border-color .2s} .btn:hover{transform:translateY(-1px)} .btn.cheio{background:var(--c);color:#06060f;box-shadow:0 16px 40px -20px var(--c)} .btn.cheio:hover{box-shadow:0 22px 52px -22px var(--c)} .btn.vazio{border:1px solid var(--linha)} .btn.vazio:hover{border-color:var(--c)} /* ── seções ────────────────────────────────────────────────────────────── */ section{padding:90px 0;border-top:1px solid var(--linha)} .rotulo{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);margin-bottom:20px} h2{font-family:var(--serifa);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.16;letter-spacing:-.015em;max-width:21ch} h2 em{font-style:italic;color:var(--fraco)} .sub{margin-top:20px;max-width:62ch;color:var(--fraco);font-size:17.5px} /* ── a origem ──────────────────────────────────────────────────────────── */ .origem{margin-top:44px;padding:34px 36px;border-left:2px solid var(--c); background:var(--tinta-2);border-radius:0 14px 14px 0;box-shadow:var(--sombra)} .origem p{font-family:var(--serifa);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.42;max-width:40ch} .origem .quem{margin-top:18px;font-family:var(--sans);font-size:14px;color:var(--fraco);letter-spacing:.04em} /* ── módulos ───────────────────────────────────────────────────────────── */ .modulos{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:2px;background:var(--linha);border-radius:14px;overflow:hidden;list-style:none;box-shadow:var(--sombra)} .modulos li{background:var(--tinta);padding:22px 22px 20px;transition:background .25s} .modulos li:hover{background:var(--tinta-2)} .modulos .n{font-family:var(--serifa);font-size:13px;color:var(--c);opacity:.75;display:block;margin-bottom:6px} .modulos .t{font-weight:600;font-size:16px;display:block;margin-bottom:5px} .modulos .d{color:var(--fraco);font-size:14.5px;line-height:1.55} /* ── destaques do produto ──────────────────────────────────────────────── */ .destaques{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px} .destaques article{padding:28px 26px;border-radius:14px;background:var(--tinta-2); border:1px solid var(--linha);box-shadow:var(--sombra);position:relative;overflow:hidden} .destaques article::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c)} .destaques h3{font-size:17px;font-weight:600;margin-bottom:10px} .destaques p{color:var(--fraco);font-size:15.5px} /* ── planos ────────────────────────────────────────────────────────────── */ .planos{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px} .plano{padding:30px 28px;border-radius:16px;background:var(--tinta-2);border:1px solid var(--linha); box-shadow:var(--sombra);display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s} .plano:hover{border-color:var(--c);box-shadow:var(--sombra-alta)} .plano.destaque{border-color:var(--c)} .plano .selo{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c); font-weight:700;margin-bottom:14px;min-height:17px} .plano .nome{font-family:var(--serifa);font-size:27px;margin-bottom:6px} .plano .cabe{color:var(--fraco);font-size:15px;margin-bottom:20px} .plano .valor{font-size:15px;color:var(--papel);padding:16px 0;border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);margin-bottom:20px} .plano .valor b{font-family:var(--serifa);font-size:26px;font-weight:600;display:block;margin-bottom:2px} .plano ul{list-style:none;margin-bottom:24px} .plano li{color:var(--fraco);font-size:15px;padding-left:20px;position:relative;margin-bottom:8px} .plano li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; border-radius:50%;background:var(--c);opacity:.6} .plano .btn{margin-top:auto;text-align:center} .nota-plano{margin-top:26px;color:var(--fraco);font-size:14.5px;max-width:64ch} /* ── implantação ───────────────────────────────────────────────────────── */ .dois{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .dois article{padding:30px 28px;border-radius:14px;border:1px solid var(--linha);background:var(--tinta-2);box-shadow:var(--sombra)} .dois h3{font-size:18px;font-weight:600;margin-bottom:12px} .dois p{color:var(--fraco);font-size:15.5px} /* ── fechamento ────────────────────────────────────────────────────────── */ .final{padding:100px 0} footer{border-top:1px solid var(--linha);padding:36px 0;color:var(--fraco);font-size:14px} footer .env{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center} footer a{text-decoration:none;transition:color .2s} footer a:hover{color:var(--papel)} /* ── as telas do sistema ─────────────────────────────────────────────────── Print de tela é o argumento mais barato e mais forte de uma página de produto: o leitor para de imaginar e passa a ver. A moldura escura em volta existe para a imagem não brigar com o fundo da página, e a legenda existe porque tela sem explicação vira enfeite. */ .telas{margin-top:44px;display:grid;gap:20px} .tela{border-radius:16px;overflow:hidden;border:1px solid var(--linha); background:var(--tinta-2);box-shadow:var(--sombra);transition:border-color .25s,box-shadow .25s} .tela:hover{border-color:var(--c);box-shadow:var(--sombra-alta)} .tela img{display:block;width:100%;height:auto} .tela figcaption{padding:20px 24px 22px;border-top:1px solid var(--linha)} .tela .t{font-weight:600;font-size:16.5px;margin-bottom:5px;display:block} .tela .d{color:var(--fraco);font-size:15px} @media(min-width:820px){ .telas{grid-template-columns:1fr 1fr} .telas .tela:first-child{grid-column:1 / -1} }