/* Landing page da loja (/conheca/), gerada por build/gen_seo.py a partir de build/lp_modelo.html.
   Mesmas cores, fontes e botões da loja (_proto-loja.html). Direção escolhida pelo Paulo em 03/10/2026: "Sala de cinema"
   (página longa; abre com uma parede de telas dos efeitos Ultra passando atrás do título). */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 700;font-display:swap;src:url(/loja/fontes/geist-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/loja/fontes/instrument-serif-latin.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/loja/fontes/instrument-serif-italic-latin.woff2) format('woff2')}
:root{
  --bg:#08080b;
  --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --ink:#f3efe9; --ink-2:#c9c3bb; --muted:#8a847c;
  --accent:#ff6a2b; --accent-2:#ffb35c; --accent-glow:rgba(255,106,43,.35);
  --free:#3ddc84; --ultra:#c9a2ff;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --r:16px; --borda:clamp(18px,4vw,56px); --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:#0a0a0c;color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.miolo{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--borda)}

/* fundo: o mesmo da loja (Paulo, 03/10/2026). Poeira em redemoinho no canvas, com grão e vinheta por cima.
   As regras são as do _proto-loja.html (html[data-fundo="asmr"]); o script do efeito é o loja/poeira-em-redemoinho.js. */
.atmo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmo > *{position:absolute}
.atmo .fx-poeira-em-redemoinho{inset:0;background:#0a0a0c;--fx-bg:#0a0a0c;--fx-accent:#b4dcff;--fx-raio:140px;--fx-passeio:0}
.grain{inset:-50%;width:200%;height:200%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grao 1.2s steps(6) infinite}
@keyframes grao{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.vinheta{inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.65) 100%)}
body > *:not(.atmo){position:relative;z-index:1}

.topo{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:18px;padding:0 var(--borda);
  background:rgba(8,8,11,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.marca{display:flex;align-items:center;gap:12px}
.marca .logo{width:50px;height:38px;background:url('/assets/brand/wcs-wordmark.webp') no-repeat center/contain}
.marca .loja{font-weight:500;color:var(--ink-2);font-size:.92rem;border-left:1px solid var(--line-2);padding-left:12px}
.topo nav{margin-left:auto;display:flex;gap:22px;font-size:.92rem;color:var(--ink-2)}
.topo nav a:hover{color:var(--ink)}
.topo .dir{display:flex;gap:10px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 20px;font-weight:500;font-size:.95rem;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;color:var(--ink);font-family:inherit;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}
.btn:hover{border-color:rgba(255,255,255,.3);background:var(--panel-2)}
.btn.pri{background:linear-gradient(180deg,#ff7a3d,#f15a1d);border-color:transparent;color:#1a0a03;font-weight:600;box-shadow:0 0 0 1px rgba(255,140,80,.4),0 8px 30px -6px var(--accent-glow)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,160,100,.6),0 12px 36px -6px rgba(255,106,43,.55)}
.btn.g{padding:14px 26px;font-size:1.02rem}
.btn:active{transform:scale(.97)}

.selo{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px;white-space:nowrap}
.selo.free{background:rgba(61,220,132,.16);color:var(--free);border:1px solid rgba(61,220,132,.35)}
.selo.plus{background:rgba(255,106,43,.16);color:#ff9a6b;border:1px solid rgba(255,106,43,.4)}
.selo.ultra{background:rgba(201,162,255,.14);color:var(--ultra);border:1px solid rgba(201,162,255,.4)}

.sub{color:var(--ink-2);font-size:1.08rem;max-width:60ch}

/* cartão de efeito com vídeo */
.fx{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.025);transition:transform .25s,border-color .25s,box-shadow .25s}
.fx:hover{transform:translateY(-4px);border-color:rgba(255,140,80,.35);box-shadow:0 18px 50px -18px rgba(255,106,43,.35)}
.fx .midia{position:relative;aspect-ratio:16/10;background:#000}
.fx .midia video,.fx .midia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx .info{display:flex;align-items:center;gap:10px;padding:12px 14px 14px}
.fx .nome{font-weight:500}
.fx .cat{color:var(--muted);font-size:.82rem}

/* planos */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plano{border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:26px;display:flex;flex-direction:column;gap:14px}
.plano.destaque{border-color:rgba(255,140,80,.45);background:radial-gradient(120% 100% at 100% 0%,rgba(255,106,43,.18),transparent 60%),rgba(255,255,255,.03)}
.plano h3{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:10px}
.plano .preco{font-family:var(--serif);font-size:2.9rem;line-height:1;letter-spacing:-.02em}
.plano .preco small{font-family:var(--sans);font-size:.95rem;color:var(--muted);letter-spacing:0}
.plano ul{list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:.95rem;flex:1}
.plano li{padding:8px 0;border-top:1px solid var(--line)}
.plano li::before{content:"✓";color:var(--accent);margin-right:10px;font-weight:600}

/* perguntas */

.rodape{padding:24px var(--borda) 34px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;color:var(--muted);font-size:.8rem}
.rodape nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.rodape a:hover{color:var(--ink)}

/* entra quando chega na tela */
.js .surge{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .surge.visto{opacity:1;transform:none}

@media (max-width:860px){
  .topo nav{display:none}.topo .dir{margin-left:auto}.marca .loja{display:none}
  .planos{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .surge{opacity:1;transform:none;transition:none}
  .btn,.fx{transition:none}
  .grain{animation:none}
}

/* ---------------- a página ---------------- */
.abre{position:relative;min-height:calc(100vh - 64px);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;text-align:center;padding:70px var(--borda) 0;overflow:hidden}
.abre h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.1rem,9.2vw,8.4rem);line-height:.95;letter-spacing:-.035em;max-width:11ch}
.abre .sub{margin:26px auto 0;font-size:clamp(1.05rem,1.5vw,1.25rem);text-align:center}
.abre .acoes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.abre .nota{margin-top:14px;color:var(--muted);font-size:.88rem}
/* parede de telas: três fileiras de vídeo deslizando, inclinadas em perspectiva */
.parede{justify-self:stretch;margin:54px calc(-1 * var(--borda)) 0;overflow:hidden;perspective:1400px;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.parede .plano3d{transform:rotateX(34deg) scale(1.12);transform-origin:50% 0;display:grid;gap:16px}
.fita{display:flex;gap:16px;width:max-content;animation:desliza var(--t,70s) linear infinite}
.fita:nth-child(2){animation-direction:reverse;--t:86s}
.fita:nth-child(3){--t:98s}
.fita .tela{width:clamp(220px,24vw,360px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);background:#000;flex:none}
.fita .tela video{width:100%;height:100%;object-fit:cover}
@keyframes desliza{to{transform:translateX(-50%)}}

section.bloco{padding:110px 0 0}
.cabeca{display:grid;gap:14px;margin-bottom:44px}
.cabeca h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.03em;max-width:16ch}

.numeros{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:70px}
.numeros div{padding:34px 20px;border-left:1px solid var(--line)}
.numeros div:first-child{border-left:0}
.numeros b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.03em}
.numeros > div > span{color:var(--ink-2);font-size:.95rem}

.cenas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cena{border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:28px;display:grid;gap:12px;align-content:start}
.cena i{font-family:var(--serif);font-style:italic;font-size:4.2rem;line-height:.8;color:var(--accent)}
.cena h3{font-size:1.25rem;font-weight:600}
.cena p{color:var(--ink-2)}

.cartaz{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.jeitos{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.jeito{padding:30px;border-left:1px solid var(--line);display:grid;gap:10px;align-content:start}
.jeito:first-child{border-left:0}
.jeito b{font-size:1.15rem;font-weight:600}
.jeito p{color:var(--ink-2)}
.jeito small{color:var(--muted)}

.fim{margin-top:110px;text-align:center;display:grid;justify-items:center;padding:80px var(--borda);border-top:1px solid var(--line);background:radial-gradient(60% 120% at 50% 100%,rgba(255,106,43,.18),transparent 70%)}
.fim h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,7vw,6rem);line-height:.98;letter-spacing:-.035em}
.fim .btn{margin-top:28px}
@media (max-width:860px){
  .numeros{grid-template-columns:1fr 1fr}.numeros div:nth-child(3){border-left:0}.numeros div:nth-child(n+3){border-top:1px solid var(--line)}
  .cenas,.cartaz,.jeitos{grid-template-columns:1fr}.jeito{border-left:0;border-top:1px solid var(--line)}.jeito:first-child{border-top:0}
  section.bloco{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){.fita{animation:none}}

/* ---------------- efeitos do catálogo rodando na página ----------------
   Só efeitos do plano Free (quem cria conta já baixa de graça), pra página não entregar nada pago:
   Hero Reveal Cinemático no título, Números Rolantes nos quatro números e FAQ Luminoso nas perguntas.
   O código deles vem junto em loja/lp-fx.css e loja/lp-fx.js (build/gen_seo.py monta a partir de efeitos/).
   Aqui só as cores e a tipografia da página por cima dos tokens --fx-* de cada um. */
.abre.fx-hero-reveal-cinematico{background:none;color:var(--ink);--fx-ink:var(--ink);--fx-muted:var(--ink-2);--fx-accent:var(--accent-2);--fx-stagger:.11s}
.abre .fx-hero-reveal-cinematico__accent{font-style:italic}
/* a máscara de cada palavra corta o que passa da caixa: folga pros traços do itálico e das descendentes */
.abre .fx-hero-reveal-cinematico__word{padding:.06em .09em .16em;margin:-.06em -.09em -.16em}
.abre .acoes.fx-hero-reveal-cinematico__cta{display:flex;background:none;padding:0;border-radius:0;color:inherit;font-weight:inherit}
.abre .nota.fx-hero-reveal-cinematico__sub{color:var(--muted)}
/* sem JavaScript o efeito não roda: o subtítulo e os botões (que ele deixa transparentes até entrar) e as respostas
   das perguntas (fechadas até o clique) têm de aparecer assim mesmo */
html:not(.js) .fx-hero-reveal-cinematico__sub,html:not(.js) .fx-hero-reveal-cinematico__cta{opacity:1;transform:none}
html:not(.js) .fx-faq-luminoso__painel{grid-template-rows:1fr}

.numeros.fx-numeros-rolantes{background:none;--fx-ink:var(--ink);--fx-accent:var(--ink)}
.numeros .fx-numeros-rolantes__num{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,5vw,4.4rem);letter-spacing:-.03em}

.faq.fx-faq-luminoso{--fx-bg:rgba(255,255,255,.03);--fx-ink:var(--ink);--fx-muted:var(--ink-2);--fx-accent:var(--accent);--fx-radius:16px}
.faq .fx-faq-luminoso__item{border-color:var(--line)}
.faq .fx-faq-luminoso__resposta p{max-width:70ch}

/* frase final com o Texto Foco Verdadeiro (pedido do Paulo, 03/10/2026). É um efeito do plano Plus rodando em página
   pública: exceção dele à regra de só usar efeito Free aqui. */
.fim .fx-texto-foco{--fx-ink:var(--ink);--fx-accent:var(--accent);--fx-foco-glow:rgba(255,140,80,.7);--fx-foco-blur:4px;gap:.1em .28em;margin:0 auto;max-width:14ch;font-size:clamp(2.6rem,7vw,6rem)}
.fim .fx-texto-foco__word{font-family:var(--serif);font-weight:400;font-size:1em;letter-spacing:-.03em;padding:0 .06em}
/* o título de verdade fica pro leitor de tela e pra quem está sem JavaScript; com JavaScript quem aparece é o efeito */
.js .so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- rodapé completo ---------------- */
.pe{border-top:1px solid var(--line);background:rgba(8,8,11,.55)}
.pe-colunas{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));gap:34px;padding-top:54px;padding-bottom:46px}
.pe-marca p{margin-top:16px;color:var(--ink-2);font-size:.95rem;max-width:34ch}
.pe nav{display:grid;gap:10px;align-content:start;font-size:.95rem}
.pe nav b{font-weight:600;color:var(--ink);margin-bottom:4px}
.pe nav a{color:var(--ink-2)}
.pe nav a:hover{color:var(--accent-2)}
.pe .rodape nav{display:flex;font-size:inherit}
.pe .rodape nav a{color:inherit}
.pe .rodape nav a:hover{color:var(--ink)}
@media (max-width:860px){.pe-colunas{grid-template-columns:1fr 1fr;gap:30px 20px}.pe-marca{grid-column:1 / -1}.pe-marca .loja{display:inline}}