/* Donnu Studio: mockups do site (só CSS, sem dependências). A base visual vem de styles.css,
   o mesmo design system dos sites da Donnu Convert e do Donnu A/B. */

/* ---------- palco do hero: um anúncio tocando ---------- */
.st-hero { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:16px; align-items:end; max-width:580px; margin:0 auto; }
.st-film { position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; background:var(--green-900);
  box-shadow:var(--shadow-pop); color:var(--white); container-type:inline-size; }
.st-film--story { aspect-ratio:9/16; border-radius:22px; border:6px solid var(--ink); }
.st-scene { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:13% 9% 9%;
  opacity:0; animation:st-cena 12s infinite; }
.st-scene:nth-child(2) { animation-delay:3s; }
.st-scene:nth-child(3) { animation-delay:6s; }
.st-scene:nth-child(4) { animation-delay:9s; }
@keyframes st-cena { 0% { opacity:0; transform:translateY(14px); } 3%,21% { opacity:1; transform:none; } 24.5%,100% { opacity:0; transform:translateY(-10px); } }
.st-scene .k { font-size:3.4cqw; letter-spacing:.12em; text-transform:uppercase; color:var(--green-300); font-weight:700; }
.st-scene .t { font-family:var(--display); font-weight:700; font-size:8.6cqw; line-height:1.1; text-wrap:balance; }
.st-scene .t mark { background:none; color:var(--gold); }
.st-scene .p { font-size:4cqw; color:var(--green-100); }
.st-cards { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.st-cards span { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:2.6cqw; font-size:3.8cqw; font-weight:600; }
.st-num { font-family:var(--display); font-weight:700; font-size:19cqw; color:var(--gold); line-height:1; }
.st-cta { align-self:flex-start; background:var(--gold); color:var(--green-950); font-weight:800; border-radius:var(--r-pill); padding:2.4cqw 4.8cqw; font-size:4.2cqw; }
.st-film__bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.15); }
.st-film__bar i { display:block; height:100%; width:100%; background:var(--green-300); transform-origin:left; animation:st-barra 12s linear infinite; }
@keyframes st-barra { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.st-film__tag { position:absolute; top:10px; left:10px; z-index:2; font-size:.66rem; font-weight:700; background:rgba(0,0,0,.35); padding:3px 8px; border-radius:var(--r-pill); }
.st-film__voz { position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:2px; align-items:flex-end; height:14px; }
.st-film__voz i { width:3px; background:var(--green-300); border-radius:2px; animation:st-onda 1s ease-in-out infinite; }
.st-film__voz i:nth-child(2) { animation-delay:.15s; } .st-film__voz i:nth-child(3) { animation-delay:.3s; } .st-film__voz i:nth-child(4) { animation-delay:.45s; }
@keyframes st-onda { 0%,100% { height:4px; } 50% { height:14px; } }
.st-film--story .st-scene { padding:14% 10%; }
.st-film--story .st-scene .t { font-size:11cqw; }
.st-film--story .st-cards span { font-size:6.5cqw; }
.st-film--story .st-cta { font-size:6.5cqw; }
.st-film--story .st-cards { grid-template-columns:1fr; }
.st-hero__cap { grid-column:1/-1; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--n-500); }
.st-hero__cap b { color:var(--ink); }

/* ---------- roteiro (wizard) ---------- */
.st-rt__cena { display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:10px 0; border-top:1px solid var(--n-100); }
.st-rt__cena:first-of-type { border-top:0; padding-top:0; }
.st-rt__n { width:26px; height:26px; border-radius:50%; background:var(--green-100); color:var(--green-800); font-weight:800; font-size:.75rem; display:grid; place-items:center; }
.st-rt__tipo { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--n-500); }
.st-rt__txt { font-weight:700; font-size:.9rem; margin:2px 0 4px; }
.st-rt__fala { font-size:.78rem; color:var(--n-700); background:var(--n-50); border-radius:8px; padding:6px 8px; }
.st-rt__fala::before { content:"🎙 "; }
.st-rt__edit { box-shadow:inset 0 0 0 2px var(--green-400); border-radius:8px; padding:4px 6px; animation:st-pisca 4s infinite; }
@keyframes st-pisca { 0%,60%,100% { box-shadow:inset 0 0 0 2px transparent; } 70%,90% { box-shadow:inset 0 0 0 2px var(--green-400); } }
.st-vozes { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }
.st-voz { display:flex; align-items:center; gap:8px; border:1px solid var(--n-200); border-radius:10px; padding:7px 9px; font-size:.75rem; }
.st-voz b { display:block; font-size:.78rem; }
.st-voz small { color:var(--n-500); }
.st-voz .play { flex:none; width:24px; height:24px; border-radius:50%; background:var(--green-50); color:var(--green-700); display:grid; place-items:center; font-size:.6rem; }
.st-voz.is-on { border-color:var(--green-500); background:var(--green-50); }
.st-voz.is-on .play { background:var(--green-600); color:var(--white); }
.st-acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.st-acoes span { font-size:.72rem; font-weight:700; border-radius:8px; padding:6px 10px; background:var(--n-100); color:var(--n-700); }
.st-acoes span.go { background:var(--green-600); color:var(--white); }

/* ---------- estudo: fichas e personas ---------- */
.st-ficha { display:grid; gap:8px; }
.st-ficha div { border:1px solid var(--n-200); border-radius:10px; padding:8px 10px; font-size:.78rem; }
.st-ficha b { display:block; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--n-500); }
.st-personas { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.st-personas span { display:inline-flex; align-items:center; gap:6px; background:var(--green-50); border:1px solid var(--green-200); border-radius:var(--r-pill); padding:4px 10px 4px 4px; font-size:.74rem; font-weight:600; }
.st-personas i { width:20px; height:20px; border-radius:50%; background:var(--green-600); color:var(--white); font-style:normal; font-size:.62rem; display:grid; place-items:center; }
.st-paleta { display:flex; gap:6px; margin-top:12px; align-items:center; font-size:.72rem; color:var(--n-500); }
.st-paleta i { width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.08); }

/* ---------- editor ---------- */
.st-ed { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:12px; }
.st-ed__campo { border:1px solid var(--n-200); border-radius:10px; padding:7px 9px; font-size:.78rem; margin-bottom:8px; }
.st-ed__campo b { display:block; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--n-500); }
.st-ed__campo.is-on { border-color:var(--green-500); box-shadow:0 0 0 3px var(--green-100); }
.st-ed__cores { display:flex; gap:6px; }
.st-ed__cores i { width:24px; height:24px; border-radius:6px; }
.st-ed__prev { max-width:320px; width:100%; justify-self:center; border-radius:12px; background:var(--green-900); color:var(--white); aspect-ratio:1/1; display:flex; flex-direction:column; justify-content:center; padding:14px; gap:8px; }
.st-ed__prev b { font-family:var(--display); font-size:1.1rem; line-height:1.15; }
.st-ed__prev span { align-self:flex-start; background:var(--gold); color:var(--green-950); font-weight:800; font-size:.7rem; border-radius:var(--r-pill); padding:5px 10px; }
.st-ed__letra { display:flex; gap:6px; font-size:.7rem; margin-top:4px; }
.st-ed__letra span { border:1px solid var(--n-200); border-radius:6px; padding:3px 7px; font-weight:700; }

/* ---------- versões e entrega ---------- */
.st-vers { display:grid; gap:6px; }
.st-ver { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid var(--n-200); border-radius:10px; padding:7px 9px; font-size:.78rem; }
.st-ver .thumb { aspect-ratio:1/1; border-radius:6px; background:var(--green-800); }
.st-ver .thumb--story { aspect-ratio:9/16; width:26px; justify-self:center; }
.st-ver small { display:block; color:var(--n-500); font-size:.7rem; }
.st-ver.is-ok { border-color:var(--green-400); background:var(--green-50); }

/* ---------- linha do tempo do wizard ---------- */
.st-trilho { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; counter-reset:t; }
.st-trilho li { list-style:none; position:relative; background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-md); padding:18px 16px 16px; box-shadow:var(--shadow-sm); }
.st-trilho li::before { counter-increment:t; content:counter(t); display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--green-600); color:var(--white); font-weight:800; font-size:.85rem; margin-bottom:10px; }
.st-trilho b { display:block; font-family:var(--display); font-size:1.02rem; margin-bottom:4px; }
.st-trilho p { font-size:.88rem; color:var(--n-700); line-height:1.5; }
.st-trilho .tempo { display:inline-block; margin-top:8px; font-size:.72rem; font-weight:700; color:var(--green-800); background:var(--green-50); border-radius:var(--r-pill); padding:3px 9px; }
.st-trilho { padding:0; margin:0; }

/* ---------- tipos de cena ---------- */
.st-tipos { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; padding:0; margin:28px 0 0; }
.st-tipos li { list-style:none; background:var(--white); border:1px solid var(--n-200); border-radius:var(--r-sm); padding:12px; font-size:.85rem; }
.st-tipos b { display:block; font-size:.92rem; }
.st-tipos small { color:var(--n-500); font-size:.76rem; line-height:1.4; display:block; margin-top:2px; }

/* ---------- acesso antecipado ---------- */
.st-acesso { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:28px; align-items:center; background:var(--white);
  border:1px solid var(--n-200); border-radius:var(--r-xl); padding:32px; box-shadow:var(--shadow-sm); }
.st-acesso ul { margin:14px 0 0; padding:0; display:grid; gap:8px; }
.st-acesso li { list-style:none; padding-left:26px; position:relative; color:var(--n-700); }
.st-acesso li::before { content:"✓"; position:absolute; left:0; color:var(--green-600); font-weight:800; }
.st-acesso__cta { display:grid; gap:10px; }
.st-acesso__cta small { color:var(--n-500); font-size:.82rem; text-align:center; }

/* ---------- responsivo ---------- */
@media (max-width: 1024px) {
  .st-trilho { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .st-trilho li { grid-column:span 2; }
  .st-trilho li:nth-child(n+4) { grid-column:span 3; }
  .st-tipos { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .st-hero { grid-template-columns:minmax(0,1fr) 112px; gap:10px; }
  .st-trilho { grid-template-columns:minmax(0,1fr); }
  .st-trilho li, .st-trilho li:nth-child(n+4) { grid-column:auto; }
  .st-tipos { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .st-acesso { grid-template-columns:minmax(0,1fr); padding:22px; }
  .st-ed { grid-template-columns:minmax(0,1fr); }
  .st-vozes { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .st-scene { animation:none; }
  .st-scene:first-child { opacity:1; }
  .st-film__bar i, .st-film__voz i, .st-rt__edit { animation:none; }
}

/* cores e pílulas (sem style inline: a CSP do site bloqueia) */
.cor-1 { background:#0b3f33; } .cor-2 { background:#1a8a6c; } .cor-3 { background:#d9b64e; } .cor-4 { background:#f7f8f8; }
.cor-5 { background:#fff; border:1px solid #e4e8e6; }
.st-pill--azul { background:var(--blue-bg); color:var(--blue); }
.st-pill--cinza { background:var(--n-100); color:var(--n-700); }
.st-sub { text-decoration:underline; }
.st-av { width:32px; height:32px; }

/* Hero em vídeo (02/10): filme feito pela skill video-produto (video/hero-landing) */
.st-hero--video { display:block; max-width:560px; }
.st-hero__video { display:block; width:100%; height:auto; aspect-ratio:1/1; border-radius:20px; background:#0b3f33; box-shadow:0 24px 60px -24px rgba(11,63,51,.45); }
.st-hero--video .st-hero__cap { margin-top:12px; }