/* Landing pages das obras — identidade Psi.se v5 (08/10/2026). Cor da obra em --cor/--escuro/--claro. */
:root{--bg:#EEDBC0;--ink:#151413;--ink-2:#3A3633;--muted:#7A726B;--line:#EDE6DD;--peach:#F4CFAE;--peach-2:#F9E6D3;--terra:#C4512E;
  --display:'Syne',sans-serif;--sans:'Manrope',system-ui,sans-serif;--r:28px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.shell{max-width:1240px;margin:0 auto;padding:0 clamp(12px,3vw,36px)}
.card{background:#fff;border-radius:var(--r);margin-top:20px;position:relative}
.dot{color:var(--cor)}
.eyebrow{font:800 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--escuro)}
h1{font:800 clamp(40px,5.6vw,76px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.015em;margin:12px 0 16px;color:var(--ink)}
h1.h1-promessa{font:800 clamp(28px,3.2vw,44px)/1.12 var(--sans);text-transform:none;letter-spacing:-.02em}
h2{font:700 clamp(28px,3.6vw,46px)/1.05 var(--display);text-transform:uppercase;margin:10px 0 22px}
h3{font:700 19px/1.25 var(--sans)}
.head{font:600 clamp(19px,1.8vw,23px)/1.4 var(--sans)}
.lead{font-size:17px;color:var(--ink-2);margin-top:12px;max-width:640px}
.btn{display:inline-flex;align-items:center;gap:12px;border:1.5px solid var(--ink);border-radius:999px;padding:14px 22px;font-weight:700;font-size:15.5px;transition:all .25s}
.btn:hover{background:var(--ink);color:#fff}
.btn-fill{background:var(--cor);border-color:var(--cor);color:#fff;box-shadow:0 14px 30px -14px var(--cor)}
.btn-fill:hover{background:var(--ink);border-color:var(--ink)}
.btn .arr{transition:transform .3s}.btn:hover .arr{transform:rotate(45deg)}
.btn.mini{padding:9px 18px;font-size:14px;background:var(--ink);color:#fff}
/* abertura */
.hero{padding:24px clamp(20px,3vw,44px) 44px;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:30px}
.tag-pro{font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--claro);color:var(--escuro);padding:8px 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--cor)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-top:34px}
.txt>*{opacity:0;transform:translateY(16px);animation:in .7s cubic-bezier(.2,.8,.2,1) forwards}
.txt>*:nth-child(2){animation-delay:.08s}.txt>*:nth-child(3){animation-delay:.16s}.txt>*:nth-child(n+4){animation-delay:.24s}
@keyframes in{to{opacity:1;transform:none}}
.idades{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 4px}
.idades b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.idades span{font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px;background:var(--claro);color:var(--escuro);box-shadow:inset 0 0 0 1.5px var(--cor)}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:20px 0 6px}
.preco s{color:var(--muted);font-size:16px}
.preco b{font:800 42px/1 var(--display);color:var(--ink)}
.preco span{font-weight:700;color:var(--ink-2)}
.preco small{width:100%;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.gar{font-size:14px;color:var(--muted);margin-top:12px}
.mock{position:relative;text-align:center}
.mock img{width:118%;max-width:640px;margin-left:-6%;margin:auto;animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 30px 40px rgba(60,30,10,.18))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-.6deg)}}
.mock figcaption{font-size:11.5px;color:var(--muted);margin-top:6px}
.mock .vol{position:absolute;right:4%;top:6%;z-index:2;width:118px;height:118px;border-radius:50%;background:var(--cor);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);border:6px solid #fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.4)}
.mock .vol b{font:800 34px/1 var(--display)}.mock .vol span{font:800 11px/1.1 var(--sans);text-transform:uppercase;max-width:90px}
.star{position:absolute;width:34px;height:34px;background:var(--cor);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:tw 4s ease-in-out infinite}
.s1{left:4%;top:14%}.s2{right:8%;bottom:16%;width:22px;height:22px;animation-delay:1.2s}
@keyframes tw{50%{transform:scale(.55) rotate(45deg);opacity:.6}}
/* faixa */
.marquee{margin-top:20px;overflow:hidden;border-radius:999px;background:var(--ink);color:#fff;padding:15px 0}
.marquee .row{display:flex;gap:40px;width:max-content;animation:slide 40s linear infinite;font:700 18px var(--display);text-transform:uppercase}
.marquee span{display:flex;align-items:center;gap:40px;white-space:nowrap}
.marquee span::after{content:"✦";color:var(--cor)}
@keyframes slide{to{transform:translateX(-50%)}}
/* seções */
.sec{padding:clamp(32px,5vw,64px) clamp(22px,4vw,60px)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.lst{list-style:none;display:grid;gap:10px}
.lst li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.lst i{flex:0 0 26px;height:26px;border-radius:50%;background:var(--cor);color:#fff;display:grid;place-items:center;margin-top:2px}
.lst i svg{width:15px;height:15px}
.lst.neg i{background:var(--claro);color:var(--escuro)}
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.mod{border:1.5px solid var(--line);border-radius:24px;padding:22px;transition:transform .3s,border-color .3s,background .3s}
.mod:hover{transform:translateY(-5px);border-color:var(--cor);background:var(--claro)}
.mod .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:800 15px var(--display);margin-bottom:12px}
.mod h3{margin-bottom:10px}.mod .lst li{font-size:14.5px}.mod .lst i{flex-basis:20px;height:20px}.mod .lst i svg{width:12px;height:12px}
.fmt{margin-top:18px;color:var(--ink-2)}
.plat{background:var(--ink);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.plat .eyebrow{color:var(--cor)}.plat .lst li{font-size:18px;font-weight:700}
.bons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bon{background:var(--claro);border-radius:22px;padding:20px}.bon p{font-size:14.5px;color:var(--ink-2);margin-top:6px}
.prints{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.print img{border-radius:18px;border:1px solid var(--line)}
.oferta{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center;background:linear-gradient(180deg,#fff 0,#fff 60%,var(--claro) 100%)}
.mock.small img{max-width:380px;animation:none}
.cbl{font-size:13px;color:var(--muted);margin-top:12px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font:800 22px var(--display);color:var(--cor);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:10px;color:var(--ink-2)}
.foot{background:var(--ink);color:#D9D2CA;padding:40px clamp(22px,4vw,60px);margin-bottom:28px;font-size:14px;display:grid;gap:8px}
.flogo{height:34px;width:auto;margin-bottom:8px}.foot a{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.txt>*{opacity:1;transform:none}}
@media (max-width:960px){
  .hero-grid,.duo,.plat,.oferta{grid-template-columns:1fr}
  .mods,.bons,.prints{grid-template-columns:1fr 1fr}
  .tag-pro{display:none}
  .mock{order:-1}.mock img{width:100%;max-width:360px}
}
@media (max-width:560px){.mods,.bons,.prints{grid-template-columns:1fr}.preco b{font-size:34px}}
/* topo mais compacto no computador: CTA dentro da primeira tela em 1440x900 (pedido do tráfego, 09/10/2026) */
@media (min-width:961px){
  .hero-grid{margin-top:16px}
  h1{font-size:clamp(40px,4.4vw,64px)}
  .lead{font-size:16px;margin-top:8px;line-height:1.6}
  .idades{margin:12px 0 2px}
  .preco{margin:14px 0 4px}
  .ctas{margin-top:12px}
  .gar{margin-top:8px}
}