/* ============================================================
   Páginas de setor (Camisetas, Gráfica, Sinalização...).
   Usa base.css; a página declara <html data-setor="...">.
   ============================================================ */

/* ---------- abertura sóbria (igual à home e ao catálogo) ---------- */
.s-abertura{text-align:center;padding-block:72px 48px}
.s-trilha{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:13px;color:var(--texto-2);margin-bottom:18px}
.s-trilha a:hover{color:var(--texto)}
.s-trilha strong{font-weight:600;color:var(--setor-texto)}
.s-abertura h1{font-size:clamp(40px,6.5vw,80px);font-weight:700;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.s-abertura .sub{font-size:clamp(17px,1.8vw,21px);color:var(--texto-2);max-width:600px;margin:20px auto 28px;text-wrap:balance}
.s-acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- blocos ---------- */
.s-bloco{padding-block:88px;border-top:1px solid var(--linha)}
.s-cab{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.s-cab h2{font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.s-cab p{color:var(--texto-2);font-size:17px;max-width:420px}
.etapa{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-2);margin-bottom:14px}
.etapa b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--setor);color:var(--setor-tinta);font-size:13px}

/* ---------- montador: modelos ---------- */
.modelos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.modelo{position:relative;border:1.5px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--fundo);cursor:pointer;text-align:left;padding:0;transition:border-color .2s,transform .2s}
.modelo:hover{border-color:var(--setor)}
.modelo[aria-pressed="true"]{border-color:var(--setor);box-shadow:0 0 0 3px var(--setor-claro)}
.modelo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.modelo .m-txt{display:block;padding:14px 18px 18px} /* span vira bloco: sem isso o padding lateral não valia e o texto colava na borda */
.modelo b{display:block;font-size:16px;letter-spacing:-.02em;font-weight:600}
.modelo small{display:block;margin-top:2px;color:var(--texto-2);font-size:13px}
.modelo .marca-ok{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:var(--setor);color:var(--setor-tinta);display:none;place-items:center;font-size:14px;font-weight:700}
.modelo[aria-pressed="true"] .marca-ok{display:grid}

.variantes{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.variantes[hidden]{display:none}
.pilula{font-size:14px;padding:8px 16px;border:0;border-radius:999px;background:var(--fundo);color:var(--texto-2);box-shadow:inset 0 0 0 1.5px var(--linha-forte);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.pilula:hover{box-shadow:inset 0 0 0 1.5px var(--setor);color:var(--texto)}
.pilula[aria-pressed="true"]{background:var(--setor);color:var(--setor-tinta);box-shadow:none}

/* ---------- montador: cores ---------- */
.cores{display:flex;flex-wrap:wrap;gap:12px}
.cor{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-size:12.5px;color:var(--texto-2);width:72px}
.cor i{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .15s}
.cor:hover i{transform:scale(1.08)}
.cor[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 3px var(--fundo),0 0 0 5px var(--setor)}
.cor[aria-pressed="true"]{color:var(--texto);font-weight:600}
.aviso-p{font-size:13px;color:var(--texto-3);margin-top:14px}

/* ---------- montador: grade de tamanhos ---------- */
.grade-wrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio)}
.grade{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
.grade th,.grade td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--linha);font-size:15px}
.grade thead th{background:var(--fundo-2);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-2)}
.grade thead th.tam{color:var(--texto);font-size:16px;letter-spacing:0}
.grade tbody th{text-align:left;font-weight:500;color:var(--texto-2);font-size:14px;white-space:nowrap}
.grade tr:last-child th,.grade tr:last-child td{border-bottom:0}
.grade input{width:64px;padding:9px 6px;text-align:center;border:1.5px solid var(--linha-forte);border-radius:10px;font-size:15px;font-variant-numeric:tabular-nums;background:var(--fundo)}
.grade input:focus{outline:none;border-color:var(--setor);box-shadow:0 0 0 3px var(--setor-claro)}
.grade-rodape{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.grade-rodape p{font-size:13px;color:var(--texto-3);max-width:560px}
.total{font-size:15px;color:var(--texto-2)}
.total b{font-size:22px;color:var(--texto);letter-spacing:-.02em}

/* ---------- montador: lista do pedido ---------- */
.pedido{margin-top:36px;background:var(--fundo-2);border-radius:var(--raio);padding:24px}
.pedido[hidden]{display:none}
.pedido h3{font-size:20px;letter-spacing:-.02em;margin-bottom:14px}
.pedido ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pedido li{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--fundo);border-radius:var(--raio-p);padding:12px 16px;font-size:14.5px}
.pedido li span{color:var(--texto-2)}
.pedido li button{background:none;border:0;color:var(--texto-3);cursor:pointer;font-size:13px;text-decoration:underline}
.pedido .s-acoes{justify-content:flex-start}
.erro-p{font-size:13.5px;color:#C23B3B;margin-top:10px;min-height:1em}

/* ---------- técnicas e etapas ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.card-s{background:var(--fundo-2);border-radius:var(--raio);padding:26px 22px}
.card-s .n{font-size:13px;color:var(--setor-texto);font-weight:600}
.card-s b{display:block;font-size:20px;letter-spacing:-.03em;margin:8px 0 8px;font-weight:600}
.card-s p{color:var(--texto-2);font-size:15px}

/* ---------- chamada final ---------- */
.s-final{text-align:center;padding-block:110px}
.s-final h2{font-size:clamp(34px,5vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.s-final p{color:var(--texto-2);font-size:18px;margin:16px auto 28px;max-width:520px}

@media (max-width:1000px){ .modelos{grid-template-columns:repeat(3,minmax(0,1fr))} .cards4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .modelos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .modelo .m-txt{padding:12px 14px 14px}
  .modelo b{font-size:14px}
  .cards4{grid-template-columns:1fr}
  .s-bloco{padding-block:64px}
  .s-abertura{padding-block:48px 32px}
}

/* etiqueta de material no card do modelo */
.modelo .material{position:absolute;top:12px;left:12px;z-index:1;font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--texto)}
.material-texto{font-size:15px;color:var(--texto-2);margin-bottom:16px;max-width:680px}
.material-texto b{color:var(--texto)}

/* ---------- montador: estampa (posições com desenho da camiseta) ---------- */
.est-grupo{margin-bottom:22px}
.est-grupo h4{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-2);margin-bottom:12px}
.est-opcoes{display:flex;flex-wrap:wrap;gap:12px}
.est{width:150px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 12px 16px;border:1.5px solid var(--linha);border-radius:var(--raio);background:var(--fundo);cursor:pointer;text-align:center;transition:border-color .2s}
.est:hover{border-color:var(--setor)}
.est[aria-pressed="true"]{border-color:var(--setor);box-shadow:0 0 0 3px var(--setor-claro)}
.est svg{width:96px;height:96px;margin-bottom:6px}
.est .cam{fill:var(--fundo-2);stroke:var(--linha-forte);stroke-width:1.2;stroke-linejoin:round}
.est .area{fill:var(--linha-forte)}
.est[aria-pressed="true"] .area,.est:hover .area{fill:var(--setor)}
.est .lado{font-size:7px;fill:var(--texto-3);text-anchor:middle;letter-spacing:.05em}
.est b{font-size:14px;letter-spacing:-.01em}
.est small{font-size:12px;color:var(--texto-2);line-height:1.35}
@media (max-width:640px){ .est{width:calc(50% - 6px)} }

/* ---------- obrigatórios: selo no título do passo + destaque quando falta ---------- */
.etapa em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;font-size:12px;color:var(--texto-3);background:var(--fundo-2);padding:3px 9px;border-radius:999px}
.aviso-falta{display:none;font-size:14px;font-weight:500;color:#C23B3B;margin:-4px 0 14px}
.falta .aviso-falta{display:block}
.falta .etapa em{background:#FDECEC;color:#C23B3B}
.falta{scroll-margin-top:90px}

/* confirmação depois de adicionar ao orçamento único */
.adicionado{margin-top:28px;background:var(--setor-claro);border-radius:var(--raio);padding:22px 24px}
.adicionado[hidden]{display:none}
.adicionado p{font-size:15.5px;color:var(--texto-2);margin-bottom:14px}
.adicionado b{color:var(--texto)}

/* ---------- famílias sem catálogo (Gráfica) ---------- */
.familias{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.familia{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:var(--fundo);display:flex;flex-direction:column;transition:border-color .2s}
.familia:hover,.familia.adicionada{border-color:var(--setor)}
.familia img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 100%;display:block}
.familia-txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.familia h3{font-size:18px;letter-spacing:-.02em}
.familia p{color:var(--texto-2);font-size:14px}
.familia-link{color:var(--setor-texto);font-weight:500;white-space:nowrap}
.familia-abrir{align-self:flex-start;margin-top:auto}
.familia-form,.livre{display:flex;flex-direction:column;gap:10px}
.familia-form[hidden]{display:none}
.familia-form label,.livre label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--texto-2)}
.familia-form textarea,.familia-form input,.livre textarea,.livre input{padding:10px 12px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);font-size:15px;background:var(--fundo);resize:vertical}
.familia-form textarea:focus,.familia-form input:focus,.livre textarea:focus,.livre input:focus{outline:none;border-color:var(--setor);box-shadow:0 0 0 3px var(--setor-claro)}
.familia-form .btn{align-self:flex-start}
.familia-erro{font-size:13px;color:#C23B3B}
.familia-erro:empty{display:none}
.livre{max-width:640px}
.livre-ok{font-size:14.5px;font-weight:600;color:var(--setor-texto)}
.livre-ok[hidden]{display:none}
.projetos-setor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.projetos-setor .app{background:var(--fundo-2);border-radius:var(--raio);overflow:hidden}
.projetos-setor .app img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.projetos-setor .info{padding:16px 18px 20px}
.projetos-setor .info b{display:block;font-size:17px;letter-spacing:-.02em}
.projetos-setor .info small{color:var(--texto-2);font-size:14px}
.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .familias,.projetos-setor{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .familia-txt{padding:16px} .familia h3{font-size:18px} }
@media (max-width:600px){ .cards3{grid-template-columns:1fr} }

.familia-pedir{margin-top:auto;font-size:14px;font-weight:600;color:var(--setor-texto)}
.familia-pedir:hover{text-decoration:underline}
.livre select{padding:10px 12px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);font-size:15px;background:var(--fundo)}
.livre-linha{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#demanda{scroll-margin-top:70px}
@media (max-width:1000px){ .familias{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .livre-linha{grid-template-columns:1fr} .familias{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .familia-txt{padding:12px} .familia h3{font-size:15px} .familia p{font-size:12.5px} }

/* ---------- Gráfica: "Mais pedidos" (lista curada, sem foto) ---------- */
#filtro-itens{margin-bottom:18px}
#filtro-itens .filtro{--c:var(--setor)}
#filtro-itens .filtro:hover,#filtro-itens .filtro[aria-pressed="true"]{background:var(--setor);color:#fff}
.itens-graf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.item-graf{display:flex;flex-direction:column;gap:5px;padding:18px 18px 16px;border:1px solid var(--linha);border-radius:var(--raio-p);background:var(--fundo);border-top:3px solid var(--setor)}
.item-graf[hidden]{display:none}
.item-grupo{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3)}
.item-graf b{font-size:16px;letter-spacing:-.02em}
.item-graf small{font-size:13px;color:var(--texto-2);line-height:1.4}
.item-graf .familia-pedir{margin-top:6px}
@media (max-width:1000px){ .itens-graf{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .itens-graf{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .itens-graf{grid-template-columns:1fr} }

/* ---------- Sinalização: locação/venda + briefing do evento ---------- */
.familias-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.familias-2 .familia img{aspect-ratio:3/2;object-position:50% 60%}
.familia .item-grupo{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--setor-texto)}
.briefing{max-width:760px}
.briefing fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.briefing legend{font-size:13px;color:var(--texto-2);margin-bottom:6px}
.br-titulo{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-3);margin-top:8px}
.br-linha{flex-direction:row!important;align-items:center;gap:12px!important;padding:10px 14px;border:1px solid var(--linha);border-radius:var(--raio-p);cursor:pointer;font-size:15px!important;color:var(--texto)!important;transition:border-color .2s,background .2s}
.br-linha.marcada{border-color:var(--setor);background:var(--setor-claro)}
.br-linha span{flex:1}
.br-linha input[type=checkbox]{width:18px;height:18px;accent-color:var(--setor-texto)}
.br-linha input[type=number]{width:80px}
.br-linha input[type=text]{width:170px}
.br-arte{flex-direction:row!important;flex-wrap:wrap;gap:8px 18px!important}
.br-arte label{flex-direction:row!important;align-items:center;gap:8px!important;font-size:15px!important;color:var(--texto)!important}
.cards2{grid-template-columns:repeat(2,minmax(0,1fr))}
.faq{display:flex;flex-direction:column;gap:10px;max-width:820px}
.faq details{border:1px solid var(--linha);border-radius:var(--raio-p);padding:16px 20px}
.faq summary{cursor:pointer;font-weight:600;font-size:16px}
.faq p{margin-top:10px;color:var(--texto-2)}
@media (max-width:640px){
  .familias-2,.cards2{grid-template-columns:1fr}
  .br-linha{flex-wrap:wrap}
  .br-linha input[type=text]{width:100%}
}
.familias-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){ .familias-5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .familias-5{grid-template-columns:repeat(2,minmax(0,1fr))} }
.br-linha select{padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);font-size:14px;background:var(--fundo)}
.br-mais{background:none;border:0;color:var(--setor-texto);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.br-mais:hover{text-decoration:underline}
.br-remover{color:var(--texto-3);font-weight:500}
.br-copia{margin-left:28px}
.br-medidas{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-2)}
.br-medidas input{width:84px!important;padding:8px 10px;border:1px solid var(--linha-forte);border-radius:var(--raio-p);font-size:14px}
@media (max-width:640px){ .br-medidas{width:100%} .br-medidas input{flex:1} }
.br-locacao{padding:16px 18px!important;border:1px solid var(--setor)!important;border-radius:var(--raio-p);background:var(--setor-claro);gap:14px!important}
.br-locacao[hidden]{display:none!important}
.br-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.br-grupo>span{width:100%;font-size:13px;color:var(--texto-2)}
.br-grupo label{flex-direction:row!important;align-items:center;gap:8px!important;font-size:15px!important;color:var(--texto)!important}
.br-quando{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:640px){ .br-quando{grid-template-columns:1fr 1fr!important} }
.familias-2 .familia img{object-position:50% 50%}
/* bolinhas das cores disponíveis em cada modelo (clicar escolhe modelo + cor) */
.modelo .m-cores{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.modelo .m-cores i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .15s}
.modelo .m-cores i:hover{transform:scale(1.25)}
@media (max-width:640px){ .modelo .m-cores{gap:4px} .modelo .m-cores i{width:12px;height:12px} }