/* StraRq! · prévia Bandit Studio — tokens em ../DESIGN.md */
:root{
  --acafrao:#F3A53F; --magenta:#CF125B; --coral:#EA5D45; --teal:#28A1A5; --pessego:#F8C48A;
  --tinta:#17120F; --papel:#FFFFFF; --teal-txt:#1E7F83; --coral-txt:#E04E2E; --azul:#1F3B5C; --rosa:#F4CFCA; --vinho:#6E1033; --madeira:#7A4A31;
  --bg:var(--papel); --fg:var(--tinta);
  --display:"Fraunces", "Cooper Black", Georgia, serif;
  --texto:"Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g:16px; --sec:clamp(88px, 14vw, 200px);
  --t-display:clamp(3.4rem, 15.5vw, 12.5rem);
  --t-h2:clamp(2.7rem, 11vw, 7.2rem);
  --t-h3:clamp(1.5rem, 4vw, 2.4rem);
  --sai:cubic-bezier(.16,1,.3,1);
}
@media (min-width:900px){ :root{ --g:40px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (pointer:fine){ html{ overscroll-behavior:none; } }
h1,h2,h3{ text-wrap:balance; }
.citacao,.proj-p,.bast-p,.cartao p{ text-wrap:pretty; }
body{ margin:0; background:var(--papel); color:var(--tinta); font:300 17px/1.6 var(--texto); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
main,footer{ overflow-x:clip; }
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
b,strong{ font-weight:500; }
button,input,select{ font:inherit; color:inherit; touch-action:manipulation; }
a,button,label{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
::selection{ background:var(--magenta); color:#fff; }
html{ scrollbar-color:var(--coral) var(--papel); }
:focus-visible{ outline:3px solid var(--magenta); outline-offset:3px; border-radius:4px; }
input,select{ caret-color:var(--magenta); }
.pular{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--tinta); color:var(--papel); padding:10px 16px; border-radius:999px; }
.pular:focus{ left:8px; }
h1,h2,h3,p{ margin:0; }
.display, .capa-tit, .proj-tit, .sel-tit, .quem-tit, .conte-tit, .bast-tit, .aval-nota, .pessoa h3, .rod-marca span, .mani-txt{
  font-family:var(--display); font-variation-settings:"SOFT" 100; font-optical-sizing:auto; font-weight:900; letter-spacing:-.035em;
}

/* botões */
.bt{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px; font-weight:500; font-size:16px; text-decoration:none; border:2px solid var(--tinta); cursor:pointer; background:none; }
.bt-tinta{ background:var(--tinta); color:var(--papel); }
.bt-tinta:hover{ background:#000; }
.bt-linha{ color:var(--tinta); }
.bt-linha:hover{ background:var(--tinta); color:var(--papel); }
.bt-largo{ width:100%; }

/* topo */
.topo{ position:fixed; inset:0 0 auto 0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--g); padding-top:max(12px, env(safe-area-inset-top)); transition:background-color .35s, box-shadow .35s; }
.topo.solido{ background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(23,18,15,.08); }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.marca-bolha{ width:40px; height:40px; }
.marca-txt{ display:flex; flex-direction:column; line-height:1.05; }
.marca-txt b{ font:900 21px/1 var(--display); font-variation-settings:"SOFT" 100; letter-spacing:-.03em; }
.marca-txt small{ font-size:11px; letter-spacing:.02em; opacity:.8; font-weight:400; }
.topo-cta{ font-size:14px; font-weight:500; text-decoration:none; padding:10px 16px; border-radius:999px; background:var(--tinta); color:var(--papel); white-space:nowrap; }

/* 1. capa */
.capa{ position:relative; min-height:100svh; background:var(--acafrao); color:var(--tinta); display:flex; align-items:flex-end; overflow:hidden; padding:96px var(--g) 28px; }
.capa-aneis{ position:absolute; width:min(134vw, 1300px); right:-36vw; top:58px; pointer-events:none; overflow:visible; }
@media (min-width:900px){ .capa-aneis{ width:min(66vw, 1050px); right:-8vw; top:max(70px, calc(50vh - 30vw)); } }
.conte-aneis{ overflow:visible; }
.anel{ transform-origin:0 0; }
.a1{ fill:var(--teal); } .a2{ fill:var(--magenta); } .a3{ fill:var(--coral); } .a4{ fill:var(--pessego); } .a5{ fill:var(--acafrao); }
.capa-in{ position:relative; width:100%; max-width:1400px; margin:0 auto; }
.capa-tit{ font-size:clamp(3.4rem, 16.4vw, 11rem); line-height:.84; display:flex; flex-direction:column; margin-bottom:20px; }
.lin{ display:flex; align-items:center; gap:.12em; white-space:nowrap; }
.l2{ padding-left:.9em; }
.pal{ display:inline-block; }
.capa-sub{ max-width:34ch; font-size:17px; line-height:1.5; margin-bottom:22px; }
.capa-sub b{ font-weight:500; }
.capa-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.capa-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:14px; }
.capa-meta b{ font-weight:600; }
.estrelas{ display:inline-block; width:78px; color:var(--tinta); }
.estrelas.grande{ width:150px; color:var(--magenta); }
.sep{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; }
@media (min-width:900px){
  .capa{ align-items:center; padding-top:120px; }
  .capa-sub{ font-size:19px; }
}

/* 2. faixas */
.faixas{ position:relative; z-index:2; }
.faixa{ overflow:hidden; white-space:nowrap; padding:14px 0; }
.f1{ background:var(--coral); color:var(--tinta); transform:rotate(-2deg) scale(1.04); margin-top:-18px; }
.f2{ background:var(--teal); color:var(--tinta); transform:rotate(1.5deg) scale(1.04); margin-top:-6px; }
.faixa-trilho{ display:inline-flex; align-items:center; gap:22px; font:900 clamp(1.6rem, 6vw, 3.4rem)/1 var(--display); font-variation-settings:"SOFT" 100; letter-spacing:-.02em; will-change:transform; }
.faixa-trilho i{ width:.55em; height:.55em; border-radius:46% 54% 60% 40% / 50% 42% 58% 50%; background:var(--tinta); flex:none; }

/* 3. manifesto */
.manifesto{ padding:var(--sec) var(--g); max-width:1300px; margin:0 auto; }
.mani-txt{ font-size:clamp(2.1rem, 8.4vw, 5.6rem); line-height:1.02; font-weight:800; }
.mani-txt em{ font-style:normal; color:var(--magenta); }
.mani-txt .w{ opacity:.14; }
.mani-ass{ margin-top:28px; font-size:14px; letter-spacing:.02em; opacity:.7; }

/* 4. projetos */
.quartos{ background:var(--bg); color:var(--fg); }
.proj{ padding:var(--sec) var(--g); max-width:1500px; margin:0 auto; }
.proj-cab{ margin-bottom:clamp(28px, 5vw, 64px); }
.proj-tit{ font-size:var(--t-h2); line-height:.86; display:flex; flex-direction:column; }
.sil{ display:block; }
.proj-rot{ margin-top:16px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400; opacity:.85; }
.foto{ margin:0; overflow:hidden; position:relative; }
.foto img{ width:100%; height:100%; object-fit:cover; transform-origin:50% 50%; }
.proj-txt{ max-width:620px; margin:clamp(28px,5vw,56px) 0; display:grid; gap:20px; }
.citacao{ font-family:var(--display); font-variation-settings:"SOFT" 100; font-weight:700; font-size:clamp(1.45rem, 4.6vw, 2.3rem); line-height:1.15; letter-spacing:-.02em; }
.proj-p{ max-width:46ch; font-size:17px; }
.detalhes{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:16px; }
.detalhes li{ padding-top:10px; border-top:1px solid currentColor; }
.foto-alta{ aspect-ratio:3/4; }
.foto-larga{ aspect-ratio:3/2; margin-inline:calc(var(--g) * -1); }
.foto-meia{ aspect-ratio:3/2; width:82%; margin-left:auto; }
.par{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.par .foto{ aspect-ratio:3/4; }
.par-b{ margin-top:22%; }
@media (min-width:900px){
  .p-lavabo{ display:grid; grid-template-columns:1.05fr 1fr; gap:0 6vw; align-items:start; }
  .p-lavabo .proj-cab{ grid-column:1 / -1; }
  .p-lavabo .foto-alta{ grid-row:2 / span 2; }
  .p-lavabo .proj-txt{ margin-top:0; }
  .foto-larga{ margin-inline:0; aspect-ratio:16/9; }
  .p-rosa .proj-txt{ margin-left:auto; }
  .foto-meia{ width:56%; margin-top:-8vw; margin-left:0; position:relative; z-index:2; }
}

/* episódios */
.epis-intro{ margin:-12px 0 28px; }
.epis{ list-style:none; margin:0 calc(var(--g) * -1); padding:0 var(--g) 8px; display:grid; grid-auto-flow:column; grid-auto-columns:72%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.epis::-webkit-scrollbar{ display:none; }
.epis:focus-visible,.aval-lista:focus-visible{ outline-offset:-3px; }
.ep{ scroll-snap-align:start; }
.ep-vid{ aspect-ratio:9/16; overflow:hidden; background:rgba(0,0,0,.12); }
.ep-vid video{ width:100%; height:100%; object-fit:cover; }
.ep-n{ margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.ep-f{ margin-top:6px; font-family:var(--display); font-variation-settings:"SOFT" 100; font-weight:700; font-size:1.25rem; line-height:1.3; letter-spacing:-.01em; }
@media (min-width:900px){
  .epis{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; margin:0; padding:0; }
  .ep:nth-child(even){ margin-top:9vw; }
}

/* quarto */
.quarto-grade{ display:grid; gap:36px; }
.quarto-txt{ display:grid; gap:22px; align-content:center; }
@media (min-width:900px){ .quarto-grade{ grid-template-columns:.9fr 1fr; gap:6vw; align-items:center; } }

/* 5. seleção */
.selecao{ background:var(--papel); padding:var(--sec) 0 calc(var(--sec) * .6); }
.sel-cab{ padding:0 var(--g); max-width:1500px; margin:0 auto 40px; }
.sel-tit{ display:flex; flex-direction:column; line-height:.82; }
.sel-num{ font-size:clamp(6rem, 34vw, 22rem); color:var(--coral-txt); font-variant-numeric:tabular-nums; }
.sel-lin{ font-size:var(--t-h3); letter-spacing:-.02em; margin-top:8px; }
.sel-p{ margin-top:18px; max-width:40ch; }
.sel-palco{ overflow:hidden; }
.sel-trilho{ display:flex; align-items:flex-end; gap:12px; padding:0 var(--g); width:max-content; will-change:transform; }
.sel-f{ margin:0; flex:none; overflow:hidden; }
.sel-f img{ height:100%; width:auto; max-width:none; }
.sel-f.h1{ height:clamp(220px, 46vw, 520px); }
.sel-f.h2{ height:clamp(170px, 34vw, 380px); }
.sel-f.h3{ height:clamp(260px, 56vw, 620px); }

/* 6. quem */
.quem{ padding:var(--sec) var(--g); max-width:1500px; margin:0 auto; }
.quem-tit{ font-size:var(--t-h2); line-height:.86; display:flex; flex-direction:column; margin-bottom:36px; }
.quem-tit .sil:nth-child(2){ color:var(--magenta); padding-left:.6em; }
.quem-foto{ aspect-ratio:3/2; margin-inline:calc(var(--g) * -1); }
.quem-duo{ display:grid; gap:36px; margin-top:40px; }
.pessoa h3{ font-size:clamp(2.2rem, 8vw, 4rem); line-height:.9; }
.pessoa h3 span{ display:block; color:var(--teal-txt); }
.pessoa-cargo{ margin:14px 0 14px; font-weight:500; }
.pessoa ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pessoa li{ padding-top:8px; border-top:1px solid rgba(23,18,15,.18); }
@media (min-width:900px){
  .quem-foto{ margin-inline:0; aspect-ratio:21/10; }
  .quem-duo{ grid-template-columns:1fr 1fr; gap:6vw; }
}

/* 7. bastidores */
.bastidores{ background:var(--tinta); color:var(--papel); padding:var(--sec) 0; }
.bast-tit{ font-size:clamp(2.3rem, 9vw, 6rem); line-height:.92; padding:0 var(--g); max-width:15ch; margin:0 auto 0 0; }
@media (min-width:900px){ .bast-tit{ margin-left:var(--g); } }
.bast-faixa{ margin:48px 0; display:grid; gap:6px; overflow:hidden; }
.bast-trilho{ display:inline-flex; gap:28px; white-space:nowrap; font:900 clamp(1.8rem, 8vw, 5rem)/1.05 var(--display); font-variation-settings:"SOFT" 100; letter-spacing:-.03em; width:max-content; will-change:transform; }
.bast-trilho span:nth-child(3n+1){ color:var(--coral); }
.bast-trilho span:nth-child(3n+2){ color:var(--pessego); }
.bast-trilho span:nth-child(3n){ color:var(--teal); }
.bast-p{ padding:0 var(--g); max-width:38ch; font-size:clamp(1.15rem, 3.6vw, 1.6rem); line-height:1.4; margin-bottom:48px; }
@media (min-width:900px){ .bast-p{ margin-left:var(--g); } }
.bast-grade{ display:grid; gap:40px; padding:0 var(--g); max-width:1500px; margin:0 auto; }
.bast-foto{ aspect-ratio:4/5; }
.faz{ list-style:none; margin:0; padding:0; display:grid; gap:0; align-content:center; counter-reset:f; }
.faz li{ display:grid; gap:6px; padding:22px 0; border-top:1px solid rgba(255,248,238,.22); counter-increment:f; }
.faz li::before{ content:"0" counter(f); font-size:13px; color:var(--pessego); letter-spacing:.1em; }
.faz b{ font-family:var(--display); font-variation-settings:"SOFT" 100; font-weight:800; font-size:clamp(1.5rem, 4.6vw, 2.2rem); line-height:1.05; letter-spacing:-.02em; }
.faz span{ opacity:.82; font-size:16px; }
@media (min-width:900px){ .bast-grade{ grid-template-columns:.8fr 1fr; gap:6vw; } }

/* 8. avaliações */
.aval{ padding:var(--sec) 0; background:var(--papel); }
.aval-cab{ display:flex; align-items:center; gap:18px; padding:0 var(--g); max-width:1500px; margin:0 auto 36px; }
.aval-nota{ font-size:clamp(5.5rem, 26vw, 13rem); line-height:.8; color:var(--magenta); font-variant-numeric:tabular-nums; }
.aval-tit{ font:500 clamp(1.1rem, 3.6vw, 1.6rem)/1.25 var(--texto); max-width:20ch; margin-bottom:10px; }
.aval-lista{ list-style:none; margin:0; padding:0 var(--g) 10px; display:grid; grid-auto-flow:column; grid-auto-columns:84%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.aval-lista::-webkit-scrollbar{ display:none; }
.cartao{ scroll-snap-align:center; border-radius:28px; padding:28px 24px; display:flex; flex-direction:column; justify-content:space-between; gap:22px; min-height:280px; }
.cartao p{ font-size:17px; line-height:1.5; }
.cartao span{ font-weight:500; font-size:14px; }
.c1{ background:var(--acafrao); } .c2{ background:var(--teal); } .c3{ background:var(--rosa); }
.c4{ background:var(--pessego); } .c5{ background:var(--coral); } .c6{ background:#D5ECEC; }
@media (min-width:900px){
  .aval-lista{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; max-width:1500px; margin:0 auto; }
  .cartao:nth-child(3n+2){ transform:translateY(40px); }
}

/* 9. formulário */
.conte{ position:relative; background:var(--acafrao); overflow:hidden; padding:var(--sec) var(--g); }
.conte-aneis{ position:absolute; width:min(130vw, 1100px); left:-50vw; bottom:-38vw; opacity:.95; pointer-events:none; }
@media (min-width:900px){ .conte-aneis{ left:-18vw; bottom:-30vw; width:min(70vw, 1000px); } }
.conte-in{ position:relative; max-width:640px; margin:0 auto; }
.conte-tit{ font-size:var(--t-h2); line-height:.86; margin-bottom:16px; }
.conte-p{ margin-bottom:28px; font-size:17px; max-width:36ch; }
.form{ display:grid; gap:18px; background:var(--papel); border-radius:28px; padding:24px 18px; }
@media (min-width:600px){ .form{ padding:36px; } }
.campo{ border:0; margin:0; padding:0; display:grid; gap:8px; min-width:0; }
.campo legend,.rot{ font-size:14px; font-weight:500; padding:0; margin-bottom:8px; }
.campo .rot{ margin-bottom:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{ position:relative; cursor:pointer; }
.chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.chips span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid rgba(23,18,15,.28); font-size:15px; font-weight:400; transition:background-color .2s, border-color .2s, color .2s; }
.chips label:hover span{ border-color:var(--tinta); }
.chips input:checked + span{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); }
.chips input:focus-visible + span{ outline:3px solid var(--magenta); outline-offset:2px; }
.linha2{ display:grid; gap:18px; }
@media (min-width:600px){ .linha2{ grid-template-columns:1fr 1.4fr; } }
input:not([type=radio]):not([type=checkbox]),select{ color:var(--tinta); background-color:#fff; width:100%; min-height:52px; border-radius:14px; border:1.5px solid rgba(23,18,15,.28); background:#fff; padding:0 14px; font-size:16px; font-weight:400; }
input::placeholder{ color:rgba(23,18,15,.62); }
input:focus,select:focus{ border-color:var(--tinta); outline:none; box-shadow:0 0 0 3px rgba(207,18,91,.25); }
.aviso{ color:#A30E48; font-weight:500; font-size:15px; }
.enviado{ background:#FDEBD2; border-radius:18px; padding:16px; display:grid; gap:12px; }
.enviado-acoes{ display:flex; gap:8px; flex-wrap:wrap; }
.priv{ font-size:13px; line-height:1.5; opacity:.8; }
.priv a{ font-weight:500; }

/* rodapé */
.rodape{ background:var(--tinta); color:var(--papel); padding:64px var(--g) 8px; }
.rod-in{ max-width:1500px; margin:0 auto; display:grid; gap:36px; }
.rod-marca{ position:relative; width:min(68vw, 300px); aspect-ratio:1; display:grid; place-items:center; text-decoration:none; color:var(--tinta); }
.rod-bolha{ position:absolute; inset:0; width:100%; height:100%; }
.rod-marca span{ position:relative; font-size:clamp(3.6rem, 18vw, 6rem); line-height:1; }
.rod-frase{ font-family:var(--display); font-variation-settings:"SOFT" 100; font-weight:800; font-size:clamp(1.8rem, 6vw, 3rem); line-height:1; letter-spacing:-.02em; margin-bottom:22px; }
.rod-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rod-links a{ text-decoration:none; border-bottom:1px solid rgba(255,248,238,.35); }
.rod-links a:hover{ border-color:var(--pessego); }
@media (min-width:900px){ .rod-in{ grid-template-columns:auto 1fr; align-items:center; gap:6vw; } }
.rodape .bandit-ass-linha{ margin-top:40px; border-top:1px solid rgba(255,248,238,.12); }

/* zap flutuante */
.zap-flut{ position:fixed; right:14px; bottom:max(14px, env(safe-area-inset-bottom)); z-index:45; display:flex; align-items:center; gap:8px; height:52px; padding:0 18px 0 14px; border-radius:999px; background:var(--tinta); color:var(--papel); text-decoration:none; font-weight:500; font-size:14px; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .35s, transform .35s var(--sai), visibility .35s; box-shadow:0 10px 30px rgba(23,18,15,.25); }
.zap-flut.ver{ opacity:1; visibility:visible; transform:none; }
.zap-flut svg{ width:22px; height:22px; fill:#25D366; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mani-txt .w{ opacity:1; }
  *{ animation:none !important; transition:none !important; }
}

/* ajustes de computador */
@media (min-width:900px){
  .capa-tit{ font-size:clamp(5rem, 8.4vw, 9rem); }
  .capa-in{ padding-right:44vw; }
  .capa-aneis{ width:min(50vw, 860px); right:-3vw; top:max(84px, calc(50vh - 26vw)); }
  .sel-cab{ display:flex; align-items:flex-end; gap:48px; margin-bottom:48px; }
  .sel-num{ font-size:clamp(8rem, 15vw, 15rem); }
  .sel-tit{ flex:none; }
  .sel-p{ margin:0 0 12px; }
  .sel-f.h1{ height:clamp(220px, 30vw, 420px); }
  .sel-f.h2{ height:clamp(170px, 22vw, 300px); }
  .sel-f.h3{ height:clamp(260px, 36vw, 480px); }
}