/* Casca comum das páginas do clube (perfil, projetos, entregas, notificações, assinatura, presentes,
   kits extras, carrinho). Tokens do manual da marca + ritmo do grid de 32px (ver branding-guide.html):
   conteúdo centralizado até 1216px, grid deslocado para a borda do conteúdo cair 8px após uma linha,
   blocos em múltiplos de 32, botão preto com sombra dura = borda branca, cartões com borda fina. */
:root{--cx:88px;--black:#111111;--grey:#4a4a4a;--white:#ffffff;--yellow:#fff3a0;--pink:#ffc6e3;--blue:#bee7ff;--green:#3edc8c;--lavender:#d6ccff;--lime:#dfffc2;--mint:#bff2d8;
  --bg:#f9faf7;--bg-soft:#f3f6f4;--bg-grid:#f6f7f9;--grid-line:#d0d5dd;--text:#111111;--text-2:#666666;--text-3:#9a9a9a;--err:#b3261e;--ok:#1a8f55;
  --bw:2px;--shadow:6px;--display:"Anton","Inter",sans-serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--tag:"Space Grotesk","Inter",sans-serif;--hand:"Shadows Into Light Two","Comic Sans MS",cursive;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body);background:var(--white);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}button{font-family:inherit}[hidden]{display:none!important}
/* topo */
.top{position:sticky;top:0;z-index:20;background:transparent;transition:background .25s,box-shadow .25s}
.top.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--grid-line)}
.top .in{padding:0 24px 0 40px;height:48px;display:flex;align-items:center;gap:10px}
.ic{width:40px;height:40px;border:0;background:transparent;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--text);text-decoration:none;position:relative}
.ic:hover{background:var(--bg-soft)}
.ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btnNotif,#btnCart{width:44px;height:44px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:50%}
#btnNotif svg,#btnCart svg{width:22px;height:22px}
#btnNotif .n,#btnCart .n{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#e53935;color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center}
.brand{font-weight:800;letter-spacing:.08em;font-size:1.05rem;text-decoration:none;flex:1}
/* gaveta */
.drawer{position:fixed;inset:0;z-index:30;visibility:hidden;pointer-events:none}
.drawer.open{visibility:visible;pointer-events:auto}
.drawer .veil{position:absolute;inset:0;background:rgba(17,17,17,.45);opacity:0;transition:opacity .25s}
.drawer.open .veil{opacity:1}
.drawer nav{position:absolute;top:0;left:0;bottom:0;width:min(320px,86vw);background:var(--white);box-shadow:0 0 32px rgba(0,0,0,.18);border-radius:0 20px 20px 0;padding:32px 0 24px;display:flex;flex-direction:column;overflow:auto;transform:translateX(-100%);transition:transform .3s cubic-bezier(.65,0,.35,1)}
.drawer.open nav{transform:none}
.drawer a,.drawer button.item{display:flex;align-items:center;gap:14px;padding:13px 24px;text-decoration:none;font-weight:600;font-size:.95rem;border:0;background:none;width:100%;text-align:left;cursor:pointer;color:var(--text)}
.drawer .t{padding:0 .1em;background-image:linear-gradient(transparent 36%,var(--green) 36%,var(--green) 84%,transparent 84%);background-repeat:no-repeat;background-size:0 100%;transition:background-size .3s ease-out}
.drawer a:hover .t,.drawer button.item:hover .t,.drawer a.on .t{background-size:100% 100%} /* marca-texto verde, como nos títulos */
.drawer svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--grey)}
.drawer .sep{flex:1}
.drawer .sair{border-top:1px solid var(--grid-line);margin-top:8px}
/* página: grid de fundo + conteúdo (padding lateral calculado em club.js) */
.page{position:relative;flex:1;margin-top:-48px;padding-top:48px;overflow:hidden}
.page .grid{position:absolute;top:48px;left:48px;width:calc(100% - 96px);height:calc(100% - 48px);pointer-events:none;background-image:linear-gradient(rgba(208,213,221,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(208,213,221,.45) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(#000 calc(100% - 160px),transparent);-webkit-mask-image:linear-gradient(#000 calc(100% - 160px),transparent)}
.page .in{position:relative;padding:64px 48px 64px var(--cx)}
.head{display:flex;align-items:center;gap:16px;height:64px;margin:0 0 32px}
.back{width:40px;height:40px;border:0;background:var(--white);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text);text-decoration:none;flex:none}
.back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.head h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:2rem;line-height:64px;margin:0;flex:1}
.head h1 .hl{padding:0 .1em;background-image:linear-gradient(transparent 28%,var(--green) 28%,var(--green) 86%,transparent 86%)}
.eyebrow{font-family:var(--tag);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0;line-height:32px;height:32px}
h2.sec{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.4rem;line-height:32px;margin:32px 0 16px}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.cols.two{grid-template-columns:minmax(0,1fr) 352px}
.stack{display:grid;gap:16px}
/* cartões */
.card{background:var(--white);border:1px solid var(--grid-line);border-radius:16px;padding:24px;transition:border-color .12s,box-shadow .12s}
.card.link{cursor:pointer;text-decoration:none;display:block;color:inherit}
.card.link:hover{border-color:var(--black);box-shadow:var(--shadow) var(--shadow) 0 var(--black)}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.25rem;line-height:32px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.card h3 .act{margin-left:auto}
.card p{margin:0;color:var(--grey)}
.row{display:flex;justify-content:space-between;gap:12px;line-height:32px;font-size:.95rem}
.row small{color:var(--text-2)}
.muted{color:var(--text-2)}
.empty{text-align:center;padding:48px 24px;border:1px dashed var(--grid-line);border-radius:16px;background:rgba(255,255,255,.7)}
.empty .em{font-size:2.4rem;line-height:1;margin-bottom:12px}
.empty b{display:block;font-size:1.05rem;margin-bottom:4px}
.empty p{margin:0;color:var(--text-2);max-width:40ch;margin-inline:auto}
.msg{min-height:32px;line-height:32px;font-size:.85rem;color:var(--err);margin:0}
.msg.ok{color:var(--ok)}
/* selos e chips */
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-grid);color:var(--text)}
.chip.ok{background:var(--green)}.chip.warn{background:var(--yellow)}.chip.bad{background:var(--pink)}.chip.info{background:var(--blue)}.chip.soft{background:var(--lavender)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--lime);font-size:.8rem;font-weight:700}
/* botões: preto com sombra dura = borda branca; altura 48 (começa no meio da célula com margem 8) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:var(--bw) solid var(--white);border-radius:999px;background:var(--black);color:var(--white);font-weight:800;font-size:.95rem;text-decoration:none;cursor:pointer;box-shadow:var(--shadow) var(--shadow) 0 var(--black);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--black)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn.ghost{background:var(--white);color:var(--text);border-color:var(--black);box-shadow:none}
.btn.ghost:hover{box-shadow:4px 4px 0 var(--black)}
.btn.danger{background:#fff;color:var(--err);border-color:var(--err);box-shadow:none}
.btn.sm{height:36px;padding:0 14px;font-size:.85rem;box-shadow:none;border-color:var(--black);background:var(--white);color:var(--text)}
.btn.sm:hover{box-shadow:3px 3px 0 var(--black);transform:none}
.btn.sm.fill{background:var(--black);color:var(--white);border-color:var(--white);box-shadow:4px 4px 0 var(--black)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
/* formulários */
label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin:10px 0 4px}
input,select,textarea{width:100%;height:44px;padding:0 12px;border:var(--bw) solid var(--black);border-radius:10px;font:inherit;font-size:.95rem;background:var(--white);color:var(--text)}
textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:3px 3px 0 var(--black)}
input[readonly]{background:var(--bg-grid);border-color:var(--grid-line)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.f3{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.switch{display:flex;align-items:center;gap:14px;cursor:pointer}
.switch input{appearance:none;width:44px;height:26px;border-radius:13px;background:#cfd4da;border:0;padding:0;position:relative;flex:none;cursor:pointer;transition:background .2s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.switch input:checked{background:var(--green)}.switch input:checked::after{transform:translateX(18px)}
.switch input:focus{box-shadow:none}
.switch b{display:block}.switch small{color:var(--text-2)}
/* modal (estilo GiftModal) */
.modal{position:fixed;inset:0;z-index:60;background:rgba(17,17,17,.55);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .box{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;background:var(--white);border:var(--bw) solid var(--black);border-radius:18px;box-shadow:var(--shadow) var(--shadow) 0 var(--black)}
.modal .x{position:absolute;top:-14px;left:-14px;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid #111;font-size:1.2rem;line-height:1;cursor:pointer;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.modal .mhead{height:120px;background:url(/assets/gift/header_cami.png) center top/cover;border-radius:16px 16px 0 0}
.modal .body{padding:20px 24px 24px}
.modal h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:1.5rem;line-height:1.1;margin:0 0 4px}
.modal .sub{color:var(--text-2);font-size:.9rem;margin:0 0 12px}
.modal .mbtns{display:flex;gap:12px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
/* rodapé */
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--grid-line);border-top-color:var(--black);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{to{opacity:1}}
.page .grid,.page .in,.top{opacity:0;animation:fadeIn .6s ease forwards}
.page .grid{animation-delay:.05s}.page .in{animation-delay:.3s}.top{animation-delay:.6s}
@media (prefers-reduced-motion:reduce){.page .grid,.page .in,.top{opacity:1;animation:none}}
@media (max-width:900px){.cols.two{grid-template-columns:1fr}.top .in{padding-left:16px}.page .grid{left:16px;width:calc(100% - 32px)}.page .in{padding:48px 24px}.f2,.f3{grid-template-columns:1fr}}