/* Songs On Time — /image (AI portraits). Reusa as fontes carregadas no . */ :root{ --pink:#c43a5d; --pink2:#e85f55; --teal:#176c72; --teal2:#2a9895; --bg:#fff8f5; --ink:#21171b; --muted:rgba(33,23,27,.6); --line:rgba(33,23,27,.13); --card:#fff; --radius:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5} a{color:var(--pink)} .is-hidden{display:none!important} .topbar{display:flex;align-items:center;justify-content:space-between;max-width:1040px;margin:0 auto;padding:18px 20px} .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:Georgia,"Fraunces",serif;font-weight:800;font-size:22px} .brand span span{color:var(--pink)} .topbar__price{text-align:right;font-size:13px;color:var(--muted)} .topbar__price strong{display:block;color:var(--ink)} .shell{max-width:1040px;margin:0 auto;padding:0 20px 80px} .hero{text-align:center;padding:26px 0 8px} .eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--pink);font-weight:700;margin:0 0 10px} .hero h1{font-family:Georgia,"Fraunces",serif;font-size:clamp(28px,5vw,46px);line-height:1.08;margin:0 0 12px;font-weight:800} .hero p.lead{font-size:17px;color:var(--muted);max-width:620px;margin:0 auto 14px} .badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:8px} .badges span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px} .pills{display:flex;gap:6px;justify-content:center;margin:18px 0 26px;flex-wrap:wrap} .pill{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px} .pill.is-active{background:var(--ink);color:#fff;border-color:var(--ink)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;max-width:760px;margin:0 auto;box-shadow:0 10px 40px rgba(33,23,27,.05)} h2.panel-title{font-family:Georgia,"Fraunces",serif;font-size:24px;margin:0 0 6px} p.panel-sub{color:var(--muted);margin:0 0 20px;font-size:15px} /* Vitrine de estilos */ .style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px} .style-card{position:relative;border:2px solid var(--line);border-radius:14px;padding:16px 12px;cursor:pointer;text-align:center;transition:.15s;background:#fff} .style-card:hover{border-color:var(--pink)} .style-card input{position:absolute;opacity:0;pointer-events:none} .style-card.is-sel{border-color:var(--pink);background:#fff1f4} .style-card .emoji{font-size:30px;display:block;margin-bottom:6px} .style-card .name{font-weight:700;font-size:14px} .style-card .blurb{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35} /* Upload */ .uploader{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;cursor:pointer;transition:.15s;margin-bottom:18px} .uploader:hover{border-color:var(--teal)} .uploader.has-img{border-style:solid;border-color:var(--teal)} .uploader input{display:none} .uploader__hint{color:var(--muted);font-size:14px} .uploader__hint strong{color:var(--teal)} .selfie-preview{max-width:160px;max-height:160px;border-radius:12px;margin:0 auto 8px;display:block;object-fit:cover} .field{margin-bottom:16px} .field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px} .field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit} .field input:focus{outline:none;border-color:var(--pink)} .btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:16px;padding:14px 22px;border-radius:12px;text-align:center;width:100%} .btn--pink{background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff} .btn--teal{background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff} .btn--ghost{background:#fff;border:1px solid var(--line);color:var(--ink)} .btn:disabled{opacity:.55;cursor:not-allowed} .btn+.btn{margin-top:10px} /* Generating theater */ .gen{text-align:center} .gen__timer{font-size:38px;font-weight:800;font-family:Georgia,serif} .progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:16px 0} .progress>span{display:block;height:100%;width:6%;background:linear-gradient(90deg,var(--pink),var(--teal));transition:width .6s} .gen__status{color:var(--muted);font-size:15px;min-height:22px} .gen__steps{list-style:none;padding:0;margin:18px auto 0;max-width:320px;text-align:left} .gen__steps li{padding:8px 0 8px 28px;position:relative;color:var(--muted);font-size:14px} .gen__steps li::before{content:"○";position:absolute;left:6px} .gen__steps li.is-active{color:var(--ink)} .gen__steps li.is-active::before{content:"●";color:var(--teal)} /* Galeria (preview + success) */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0} .tile{position:relative;border-radius:12px;overflow:hidden;background:#eee;aspect-ratio:3/4} .tile img{width:100%;height:100%;object-fit:cover;display:block} /* Preview: 1 hero nítida (marca leve) + 5 borradas com cadeado */ .tile .badge{position:absolute;top:8px;left:8px;background:rgba(33,23,27,.72);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;z-index:2} .tile.hero .wm{position:absolute;inset:0;pointer-events:none;z-index:1; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150'%3E%3Ctext x='0' y='90' transform='rotate(-24 0 75)' fill='rgba(255,255,255,0.32)' font-size='15' font-family='Arial' font-weight='bold'%3Esongsontime.com%3C/text%3E%3C/svg%3E"); background-repeat:repeat} .tile.blurred img{filter:blur(15px) brightness(.97);transform:scale(1.06)} .tile.placeholder{background:linear-gradient(135deg,#ead9e0,#cfe0e3 60%,#e9d0d8)} .tile.blurred .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(33,23,27,.10);pointer-events:none} .tile .dl{position:absolute;right:8px;bottom:8px;background:rgba(33,23,27,.78);color:#fff;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;text-decoration:none;z-index:2} .locked-note{text-align:center;color:var(--muted);font-size:14px;margin:4px 0 18px} /* Payment */ #stripeMount{margin-top:16px;min-height:60px} .pay-summary{background:#fff1e5;border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:14px;display:flex;justify-content:space-between} .pay-summary strong{font-size:16px} /* OTO */ .oto{background:linear-gradient(135deg,#fff1f4,#fff);border:2px solid var(--pink);border-radius:16px;padding:22px;margin-top:22px} .oto__tag{display:inline-block;background:var(--pink);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:999px;margin-bottom:8px} .oto h3{font-family:Georgia,serif;margin:0 0 6px;font-size:20px} .oto p{color:var(--muted);font-size:14px;margin:0 0 14px} .oto__styles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .oto__styles label{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer} .oto__styles input{margin-right:5px} .oto__status{font-size:13px;color:var(--pink);min-height:18px;margin-top:8px;text-align:center} .tiny{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}