/* ============================================================================
   KRYPTA — Cartão digital
   Uma tela. Mobile-first (375–430px). Identidade preservada, interface reduzida.
   ========================================================================== */

body.card-body{
  min-height:100dvh;
  display:flex;flex-direction:column;
  padding:
    max(14px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow-x:hidden;
}

.card-shell{
  width:100%;max-width:440px;margin:0 auto;
  flex:1;display:flex;flex-direction:column;
  position:relative;z-index:2;
}

/* Atmosfera discreta — sem cards, sem bordas */
.card-atmos{position:fixed;inset:0;pointer-events:none;z-index:0;}
.card-atmos::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb),.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--cyan-rgb),.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 22%,#000 5%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 22%,#000 5%,transparent 72%);
}
.card-atmos::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 40% at 12% 2%,rgba(var(--cyan-rgb),.16),transparent 68%),
    radial-gradient(ellipse 70% 44% at 92% 96%,rgba(var(--violet-rgb),.15),transparent 68%);
}

/* ---- Topo ---- */
.card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:clamp(22px,5vh,44px);
}
.card-top .brand img{height:24px;width:auto;display:block;}

/* ---- Identidade ---- */
.card-id{margin-bottom:clamp(22px,4vh,34px);}
.card-av{
  width:84px;height:84px;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:.04em;
  color:#fff;background:var(--grad-brand);
  margin-bottom:20px;
  box-shadow:0 12px 34px rgba(var(--cyan-rgb),.24);
  overflow:hidden;
}
.card-av--violet{
  background:linear-gradient(135deg,var(--violet),var(--blue));
  box-shadow:0 12px 34px rgba(var(--violet-rgb),.24);
}
.card-av img{width:100%;height:100%;object-fit:cover;display:block;}

.card-name{
  font-family:var(--font-display);font-weight:700;color:var(--white);
  font-size:clamp(30px,8vw,38px);line-height:1.05;letter-spacing:-.03em;
  margin:0 0 10px;
}
.card-role{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:16px;
}
.card-av--violet ~ .card-name + .card-role,
.card-id--violet .card-role{color:var(--violet);}
.card-line{
  font-size:15.5px;line-height:1.6;color:var(--silver-dim);
  max-width:30ch;margin:0;
}

/* ---- Ações principais ---- */
.card-acts{display:grid;gap:11px;margin-bottom:clamp(20px,3.5vh,30px);}
.act{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:15px 20px;border-radius:15px;
  font-family:var(--font-body);font-size:16px;font-weight:600;
  border:1px solid transparent;cursor:pointer;width:100%;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.act svg{width:20px;height:20px;flex-shrink:0;}
.act:active{transform:scale(.975);}
.act--wa{background:#25D366;color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.28);}
.act--wa:hover{color:#fff;}
.act--save{background:var(--grad-brand);color:#fff;box-shadow:0 8px 24px rgba(var(--cyan-rgb),.24);}
.act--save:hover{color:#fff;}

/* ---- Canais secundários ---- */
.card-links{
  display:flex;flex-wrap:wrap;gap:9px;
  padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--line);
}
.chan{
  flex:1 1 0;min-width:0;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:66px;padding:11px 6px;border-radius:14px;
  border:1px solid var(--line);background:transparent;color:var(--silver-dim);
  font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:all .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chan svg{width:19px;height:19px;}
.chan:active{transform:scale(.96);}
.chan:hover{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.42);}

/* Compartilhar — ação própria, fora da linha de canais */
.share-row{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:10px;min-height:48px;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:transparent;
  color:var(--silver-dim);font-family:var(--font-body);font-size:13.5px;font-weight:500;
  cursor:pointer;transition:all .25s var(--ease);-webkit-tap-highlight-color:transparent;
}
.share-row svg{width:16px;height:16px;}
.share-row:hover{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.42);}
.share-row:active{transform:scale(.985);}

/* Telas curtas (iPhone SE): aperta o ritmo para caber sem rolagem */
@media (max-height:700px){
  .card-av{width:64px;height:64px;border-radius:19px;font-size:21px;margin-bottom:14px;}
  .card-name{font-size:27px;}
  .card-id{margin-bottom:18px;}
  .act{min-height:50px;font-size:15px;}
  .chan{min-height:58px;}
  .card-top{margin-bottom:16px;}
  .card-foot .legal{display:none;}
}

/* ---- Rodapé ---- */
.card-foot{
  margin-top:auto;padding-top:clamp(20px,4vh,34px);text-align:center;
}
.card-foot .tag{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--silver-faded);
}
.card-foot .legal{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.06em;
  color:var(--silver-faded);opacity:.72;line-height:1.8;margin-top:7px;
}
.card-foot a{color:var(--silver-faded);}
.card-foot a:hover{color:var(--cyan);}

/* ---- Bottom sheet de compartilhamento ---- */
.sheet-back{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
}
.sheet-back.is-open{opacity:1;pointer-events:auto;}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:901;
  background:var(--surface);
  border-top:1px solid var(--line);
  border-radius:26px 26px 0 0;
  padding:14px 22px calc(26px + env(safe-area-inset-bottom));
  transform:translateY(102%);transition:transform .34s var(--ease);
  max-height:92dvh;overflow-y:auto;
  box-shadow:0 -12px 40px rgba(0,0,0,.4);
}
.sheet.is-open{transform:none;}
@media (min-width:560px){
  .sheet{left:50%;right:auto;bottom:0;width:440px;transform:translate(-50%,102%);border-radius:26px 26px 0 0;}
  .sheet.is-open{transform:translate(-50%,0);}
}
.sheet-grip{
  width:38px;height:4px;border-radius:3px;background:var(--line-2);
  margin:0 auto 18px;
}
.sheet h2{
  font-family:var(--font-display);font-size:18px;font-weight:700;
  color:var(--white);text-align:center;margin:0 0 4px;
}
.sheet .sub{
  font-size:13px;color:var(--silver-dim);text-align:center;margin:0 0 20px;
}
.sheet-qr{
  width:min(238px,64vw);aspect-ratio:1;margin:0 auto 20px;
  background:#fff;border-radius:18px;padding:11px;
}
.sheet-qr img{width:100%;height:100%;display:block;border-radius:10px;}
.sheet-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sheet-close{
  width:100%;margin-top:10px;min-height:48px;
  background:transparent;border:0;color:var(--silver-faded);
  font-family:var(--font-body);font-size:14px;cursor:pointer;
}

/* ---- Toast ---- */
.toast{
  position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(22px);
  background:var(--surface-2);border:1px solid rgba(var(--cyan-rgb),.4);
  color:var(--white);font-size:13.5px;font-weight:500;
  padding:13px 22px;border-radius:13px;
  box-shadow:0 12px 32px rgba(0,0,0,.42);
  opacity:0;pointer-events:none;transition:all .3s var(--ease);
  z-index:950;max-width:86vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- Seletor (/cartao/) ---- */
.picker{display:grid;gap:12px;margin-top:8px;}
.pick{
  display:flex;align-items:center;gap:16px;
  padding:18px;border-radius:18px;border:1px solid var(--line);
  background:transparent;transition:all .25s var(--ease);
}
.pick:active{transform:scale(.985);}
.pick:hover{border-color:rgba(var(--cyan-rgb),.42);}
.pick .av{
  width:52px;height:52px;border-radius:15px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:17px;font-weight:700;
  color:#fff;background:var(--grad-brand);
}
.pick--violet .av{background:linear-gradient(135deg,var(--violet),var(--blue));}
.pick .nm{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--white);}
.pick .rl{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);margin-top:4px;
}
.pick--violet .rl{color:var(--violet);}
.pick .go{margin-left:auto;color:var(--silver-faded);width:16px;height:16px;flex-shrink:0;}

@media (prefers-reduced-motion:reduce){
  .sheet,.sheet-back,.toast,.act,.chan{transition-duration:.001ms !important;}
}