/* ================================================================
   Diferentona — design system público (neobrutalist)
   Site de vendas + painel do cliente + painel do afiliado
   ================================================================ */
:root{
  --pink:#EA0A8C; --pink-d:#C10673; --lime:#BAD532; --ink:#141414;
  --bg:#FFF4FA; --rose:#F9A8D4; --rose-l:#F368B4; --white:#fff;
  --ok:#1a9e4b; --warn:#e08a00; --err:#d32f2f;
  --shadow:6px 6px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
  --r:16px; --border:3px solid var(--ink);
  --sans:'Space Grotesk',system-ui,sans-serif; --display:'Anton',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:var(--sans);color:var(--ink);overflow-x:hidden;font-size:16px}
a{color:var(--pink);text-decoration:none} a:hover{color:var(--pink-d)}
img{max-width:100%}
::selection{background:var(--lime);color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1}

/* animações */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
details[open] summary .plus{transform:rotate(45deg)}
details summary::-webkit-details-marker{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:var(--display);font-size:18px;letter-spacing:.4px;text-transform:uppercase;
  padding:14px 26px;border-radius:14px;border:var(--border);box-shadow:var(--shadow-sm);
  background:var(--white);color:var(--ink);transition:transform .12s,box-shadow .12s;min-height:48px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.btn-lime{background:var(--lime)} .btn-pink{background:var(--pink);color:#fff}
.btn-ghost{box-shadow:none;background:transparent} .btn-block{width:100%}
.btn-sm{font-size:14px;padding:9px 16px;min-height:40px;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--shadow-sm)}

/* ---------- Cartões ---------- */
.card{background:#fff;border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:26px}
.card-flat{background:#fff;border:var(--border);border-radius:var(--r);padding:20px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;padding:6px 12px;border-radius:999px;border:2.5px solid var(--ink)}
.badge-lime{background:var(--lime)} .badge-pink{background:var(--pink);color:#fff}
.badge-ok{background:#c9f5d8} .badge-warn{background:#ffe6b3} .badge-err{background:#ffd6d6}
.badge-gray{background:#eee}

/* ---------- Formulários ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.input,input:not([type]),input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%;padding:13px 14px;border:var(--border);border-radius:12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.input:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--pink);outline-offset:1px}
textarea{resize:vertical;min-height:110px}
.hint{font-size:12px;color:#777;margin-top:4px}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1;min-width:150px}

/* ---------- Toast / flash ---------- */
.toasts{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:90vw}
.toast{background:#fff;border:var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:13px 16px;font-weight:600;font-size:14px;animation:rise .25s ease both;display:flex;gap:10px;align-items:center}
.toast.ok{background:#e8fbef}.toast.erro{background:#ffecec}.toast.info{background:#eef4ff}

/* ================= PAINEL (cliente / afiliado) ================= */
.painel{min-height:100vh;background:var(--bg)}
.painel-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 22px;background:var(--pink);border-bottom:var(--border)}
.painel-top .logo img{height:30px;display:block}
.painel-top nav{display:flex;gap:8px;flex-wrap:wrap}
.painel-top nav a{color:#fff;font-weight:700;font-size:14px;padding:8px 12px;border-radius:10px}
.painel-top nav a.on,.painel-top nav a:hover{background:rgba(255,255,255,.2)}
.painel-wrap{max-width:1000px;margin:0 auto;padding:26px 20px 60px}
.painel h1{font-size:34px;margin:0 0 4px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.stat{background:#fff;border:var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:20px}
.stat .n{font-family:var(--display);font-size:38px;line-height:1}
.stat .l{font-size:13px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.4px}

/* tabela */
.tabela{width:100%;border-collapse:collapse;background:#fff;border:var(--border);border-radius:var(--r);overflow:hidden}
.tabela th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tabela td{padding:12px 14px;border-top:2px solid #f0e0ea;font-size:14px}
.tabela tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;border-radius:var(--r)}

/* auth card */
.auth{max-width:430px;margin:6vh auto;padding:0 18px}
.auth .card{padding:30px}
.auth h1{font-size:30px;text-align:center;margin:0 0 4px}
.auth .sub{text-align:center;color:#666;font-size:14px;margin-bottom:22px}
.auth-logo{text-align:center;margin-bottom:18px}.auth-logo img{height:40px}

/* utilidades */
.muted{color:#777}.center{text-align:center}.mt{margin-top:18px}.mb{margin-bottom:18px}
.flex{display:flex;gap:12px;align-items:center}.between{justify-content:space-between}
.wrap-narrow{max-width:720px;margin:0 auto}
.pill-status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:2px solid var(--ink);text-transform:uppercase}
.s-ativa,.s-pago,.s-disponivel,.s-entregue{background:#c9f5d8}
.s-pendente,.s-solicitada,.s-aberto,.s-enviado{background:#ffe6b3}
.s-pausada,.s-aguardando{background:#e5e5e5}
.s-cancelada,.s-falhou,.s-inadimplente,.s-recusado,.s-fechado{background:#ffd6d6}
@media(max-width:600px){.painel h1{font-size:28px}.painel-wrap{padding:18px 14px 50px}}

/* ================================================================
   MOTION — reveal na rolagem · sanfona FAQ · transição de página
   Ativa só onde <html class="motion"> (home + checkout).
   Degrada 100% sem JS ou com prefers-reduced-motion.
   ================================================================ */

/* ---- Scroll reveal ---- */
html.motion [data-reveal]{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.25,1.15);transition-delay:var(--rd,0ms)}
html.motion [data-reveal="up"]{transform:translateY(38px)}
html.motion [data-reveal="right"]{transform:translateX(48px)}
html.motion [data-reveal="left"]{transform:translateX(-48px)}
/* "fade" = só opacidade: preserva rotate/lift inline dos cards */
html.motion [data-reveal="fade"]{transform:none}
html.motion [data-reveal].in{opacity:1;transform:none}

/* Quando o GSAP assume (html.gsapon), ele escreve transform/opacity a cada frame:
   a transition do CSS só atrapalharia. O CSS acima segue como fallback se o GSAP
   não carregar (ou em prefers-reduced-motion, onde o gsapon nem é aplicado). */
html.gsapon [data-reveal]{transition:none!important}
html.gsapon details.card>.faq-body{transition:none!important}

/* ---- Sanfona FAQ: altura animada de verdade ---- */
html.motion details.card>.faq-body{overflow:hidden;transition:height .4s cubic-bezier(.4,0,.2,1)}

/* ---- Transição de página ---- */
html.motion body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.motion body.is-leaving{animation:pageOut .3s ease forwards}
@keyframes pageOut{to{opacity:0;transform:translateY(-12px)}}

/* ---- Nav ganha sombra dura ao rolar (on-brand brutalist) ---- */
html.motion nav.top,html.motion .painel-top{transition:box-shadow .25s ease}
html.motion nav.top.scrolled{box-shadow:0 5px 0 -1px var(--ink),0 12px 26px rgba(20,20,20,.18)}
html.motion .painel-top.scrolled{box-shadow:0 10px 24px rgba(20,20,20,.16)}

/* ---- Smooth scroll dos links de âncora (offset da nav fixa) ---- */
html.motion,html.motion body{scroll-padding-top:78px}
html.motion.no-smooth,html.motion.no-smooth body{scroll-behavior:auto!important}

/* ---- Marquee pausa no hover ---- */
html.motion .marquee:hover .track{animation-play-state:paused}

/* ---- Micro-bump nos números da calculadora ---- */
@keyframes bump{0%{transform:scale(1)}32%{transform:scale(1.16)}62%{transform:scale(.95)}100%{transform:scale(1)}}
html.motion .bumped{display:inline-block;animation:bump .42s cubic-bezier(.3,1.4,.5,1)}

/* ---- Respeita movimento reduzido: mostra tudo, sem deslocar ---- */
@media (prefers-reduced-motion:reduce){
  html.motion [data-reveal]{opacity:1!important;transition:none!important}
  html.motion [data-reveal="up"],
  html.motion [data-reveal="left"],
  html.motion [data-reveal="right"]{transform:none!important}
  html.motion details.card>.faq-body{transition:none!important}
  html.motion body,html.motion body.is-leaving{animation:none!important}
  html.motion .bumped{animation:none!important}
}