/* Canecas TeamFOP - estilo minimalista. Fundo quente, tipografia forte, a caneca no centro. */
*{box-sizing:border-box}
/* o atributo hidden precisa vencer os display:flex/grid abaixo (senao overlay/tools vazam) */
[hidden]{display:none!important}
:root{
  --bg:#faf8f5; --ink:#211c17; --muted:#6f655b; --line:#e7e0d6;
  --accent:#8b5a2b; --accent-ink:#fff; --card:#fff; --ok:#2f7d4f; --err:#b03a2e;
  --radius:16px; --shadow:0 10px 30px rgba(50,35,20,.08);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2{letter-spacing:-.02em; line-height:1.08; margin:0}

/* topo */
.top{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; max-width:1080px; margin:0 auto}
.brand{font-weight:800; font-size:22px; text-decoration:none; color:var(--ink)}
.brand span{color:var(--accent)}
.brand-by{font-size:14px; text-decoration:none; color:var(--accent); font-weight:600}

main{max-width:1080px; margin:0 auto; padding:0 20px}

/* hero */
.hero{padding:26px 0 8px; max-width:720px}
.hero h1{font-size:clamp(34px,7vw,60px); font-weight:800}
.lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); margin:14px 0 0}
.price-tag{margin:16px 0 0; font-size:15px; color:var(--ink)}
.price-tag strong{color:var(--accent); font-size:19px}

/* faixa de confianca (selos verdadeiros: garantia, entrega, pagamento) */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;padding:0;margin:18px 0 0}
.trust li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);font-weight:600}
.trust svg{flex:none;color:var(--accent)}

/* estudio: previa + controles */
.studio{display:grid; grid-template-columns:1fr; gap:22px; margin:26px 0 8px}
@media(min-width:860px){ .studio{grid-template-columns:1.15fr .85fr; align-items:start} }

.stage{background:linear-gradient(160deg,#f3ece2,#e7ddce); border-radius:var(--radius); padding:26px 20px; box-shadow:var(--shadow)}
.cup{position:relative; margin:6px auto; width:min(100%,460px); background:#fff; border-radius:18px;
  padding:16px; box-shadow:0 8px 20px rgba(60,40,20,.14), inset 0 0 0 1px rgba(0,0,0,.03)}
.cup:before{content:""; position:absolute; inset:6px; border-radius:14px;
  background:linear-gradient(90deg,rgba(0,0,0,.05),transparent 12%,transparent 88%,rgba(0,0,0,.06)); pointer-events:none}
.band{display:block; width:100%; height:auto; border-radius:10px; background:#fff; touch-action:none; cursor:grab}
.band.dragging{cursor:grabbing}
.handle{position:absolute; right:-30px; top:26%; width:56px; height:48%;
  border:13px solid #fff; border-radius:50%; border-left-color:transparent;
  box-shadow:6px 0 14px rgba(60,40,20,.10)}
.stage-hint{position:absolute; inset:auto 0 50%; text-align:center; color:#9a8f80; font-size:15px; margin:0; pointer-events:none}
.stage-cap{text-align:center; color:var(--muted); font-size:13px; margin:14px 0 0}

/* controles */
.controls{display:flex; flex-direction:column; gap:16px}
.drop{background:var(--card); border:1.5px dashed var(--line); border-radius:14px; padding:18px; text-align:center}
.drop.drag{border-color:var(--accent); background:#fbf6f0}
.drop-help{display:block; color:var(--muted); font-size:13px; margin-top:10px}
.warn{color:var(--err); font-size:13px; margin:10px 0 0; background:#fbeae7; padding:8px 10px; border-radius:8px}

.tools{background:var(--card); border-radius:14px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.tool{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.tool input[type=range]{width:100%; accent-color:var(--accent); height:26px}
.tool input[type=text]{width:100%}
.tool-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.drag-tip{font-size:12.5px; color:var(--muted); margin:0}

input[type=text],input[type=tel],input[type=email],select{
  font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

.swatches{display:flex; gap:8px}
.sw{width:34px; height:34px; border-radius:50%; border:2px solid var(--line); cursor:pointer}
.sw-preto{background:#111} .sw-branco{background:#fff}
.sw.is-on{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent)}

/* quantidade + totais */
.qtybox{background:var(--card); border-radius:14px; padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.qty{display:flex; align-items:center; justify-content:space-between; font-weight:700}
.stepper{display:flex; align-items:center; gap:4px}
.stepper button{width:40px; height:40px; border:1px solid var(--line); background:#fff; border-radius:10px; font-size:20px; cursor:pointer; color:var(--ink)}
.stepper output{min-width:40px; text-align:center; font-size:18px; font-weight:700}
.totals{display:flex; flex-direction:column; gap:6px; font-size:15px; border-top:1px solid var(--line); padding-top:12px}
.totals .row{display:flex; justify-content:space-between; color:var(--muted)}
.totals .total{color:var(--ink); font-weight:800; font-size:18px; border-top:1px dashed var(--line); padding-top:8px; margin-top:2px}
.totals .total span:last-child{color:var(--accent)}

/* esgotado */
.sold{background:#fbf1e9; border:1px solid #ecd9c6; border-radius:14px; padding:18px; text-align:center}
.sold strong{display:block; font-size:18px; margin-bottom:4px}
.sold p{color:var(--muted); margin:0 0 12px}
.mini-form{display:flex; flex-direction:column; gap:8px}

/* botoes */
.btn{font:inherit; font-weight:700; border:none; border-radius:11px; padding:12px 18px; cursor:pointer; min-height:44px}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink)}
.btn-mini{background:#fff; border:1px solid var(--line); color:var(--ink); padding:9px 12px; border-radius:10px; font-size:13.5px}
.btn-lg{padding:15px 22px; font-size:17px; width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* passos */
.steps{display:grid; grid-template-columns:1fr; gap:12px; margin:30px 0}
@media(min-width:640px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{display:flex; gap:12px; align-items:center; background:var(--card); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.step span{flex:none; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800}
.step p{margin:0; font-size:14.5px}

/* checkout */
.checkout{background:var(--card); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow); margin:0 0 30px; scroll-margin-top:18px}
.checkout h2{font-size:24px; margin-bottom:16px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form-grid label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:var(--muted)}
.form-grid .f-full{grid-column:1/-1}
.form-grid .uf{max-width:100%}
.checkout-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:6px}
.pay-total{font-size:15px; color:var(--muted)}
.pay-total strong{font-size:22px; color:var(--accent); margin-left:6px}
.checkout-foot .btn{flex:1; min-width:200px}
.err-msg{color:var(--err); background:#fbeae7; padding:10px 12px; border-radius:8px; font-size:14px; margin:4px 0 0}
.ok-msg{color:var(--ok); font-size:14px; margin:4px 0 0}
.secure-note{color:var(--muted); font-size:13px; margin:14px 0 0; text-align:center}

/* rodape */
.foot{max-width:1080px; margin:0 auto; padding:24px 20px 40px; color:var(--muted); font-size:13.5px; text-align:center}

/* overlay */
.overlay{position:fixed; inset:0; background:rgba(30,22,14,.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:50; color:#fff}
.spinner{width:44px; height:44px; border:4px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:520px){
  .checkout-foot .btn{min-width:100%}
  .handle{right:-22px; width:44px; border-width:11px}
}