/* Cartão digital (/card) — folha própria, sem depender do CSS do site.
   Pensado primeiro para o celular: é lá que o cartão é aberto e repassado. */

:root{
  --gold:#f0b53c;
  --gold-soft:#ffd977;
  --gold-deep:#c8871f;
  --silver:#cfd3d6;
  --disc-1:#4a4a4c;
  --disc-2:#1c1c1e;
  --ink:#3a3735;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

.card-body{
  min-height:100dvh;
  padding-bottom:calc(122px + env(safe-area-inset-bottom));
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#a9c2da 0%,#c2d0dd 16%,#dfd9d2 38%,#f2d3a4 60%,#f7b471 80%,#f3a257 100%) no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

.card-shell{max-width:520px;margin:0 auto;padding:22px 18px 8px}

.card-head{text-align:center;margin-bottom:24px}
.card-logo{width:min(74vw,326px);height:auto;filter:drop-shadow(0 6px 14px rgba(60,40,20,.28))}
.card-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px 12px;
  justify-items:center;
}

.card-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:100%;
  text-decoration:none;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}

.card-badge{
  position:relative;
  display:grid;
  place-items:center;
  width:min(23vw,96px);
  aspect-ratio:1;
  border-radius:50%;
  color:var(--gold);
  background:radial-gradient(circle at 34% 26%,var(--disc-1) 0%,var(--disc-2) 62%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.22),
    0 0 0 3px #17171a,
    0 0 0 6px var(--ring,var(--gold)),
    0 9px 18px rgba(70,45,20,.34);
  transition:transform .18s ease,box-shadow .18s ease;
}
.ring-gold{--ring:linear-gradient(var(--gold),var(--gold-deep));--ring:var(--gold)}
.ring-silver{--ring:var(--silver);color:#e9edef}

/* Brilho superior, como no cartão impresso */
.card-badge::after{
  content:"";
  position:absolute;
  inset:8% 16% 52%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));
  pointer-events:none;
}

.card-badge svg{width:48%;height:48%}
.ico-text{font-size:min(4.6vw,19px);font-weight:900;letter-spacing:.02em;line-height:1}

.card-label{
  font-size:min(3.7vw,15px);
  font-weight:800;
  text-align:center;
  line-height:1.15;
  color:#403c39;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}

.card-item:active .card-badge{transform:scale(.94)}
@media (hover:hover){
  .card-item:hover .card-badge{transform:translateY(-3px)}
  .card-item:hover .card-badge{box-shadow:inset 0 2px 6px rgba(255,255,255,.22),0 0 0 3px #17171a,0 0 0 7px var(--ring,var(--gold)),0 14px 24px rgba(70,45,20,.4)}
}

.card-address{
  margin:30px 0 0;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#5b4630;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.card-foot{text-align:center;margin:0 0 14px;padding:0 18px}
.card-foot a{color:#5d452c;font-size:13px;font-weight:700;text-decoration:underline}

/* ---------- Barra de divulgação ---------- */

.share-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:30;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(243,162,87,0),rgba(233,146,68,.92) 42%,rgba(226,133,52,.98));
  backdrop-filter:blur(4px);
  text-align:center;
}

.share-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:58px;
  padding:14px 22px;
  border:0;
  border-radius:999px;
  font-family:inherit;
  font-size:clamp(15px,4.3vw,18px);
  font-weight:900;
  line-height:1.15;
  color:#2a1c00;
  background:linear-gradient(180deg,#ffe08a,#f0b53c 55%,#dd9a20);
  box-shadow:0 0 0 2px rgba(255,255,255,.65),0 12px 26px rgba(90,52,10,.45);
  cursor:pointer;
  animation:pulseCta 2.8s ease-in-out infinite;
}
.share-btn svg{width:22px;height:22px;flex:none}
.share-btn:active{transform:scale(.98);animation:none}

@keyframes pulseCta{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.65),0 12px 26px rgba(90,52,10,.45)}
  50%{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 12px 34px rgba(90,52,10,.55)}
}

/* ---------- Folha de compartilhamento ---------- */

.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(28,16,4,.55);backdrop-filter:blur(2px)}

.sheet-panel{
  position:relative;
  width:100%;
  max-width:520px;
  max-height:92dvh;
  overflow-y:auto;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  background:#fff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -14px 44px rgba(40,20,0,.36);
  animation:sheetUp .24s ease;
}
@keyframes sheetUp{from{transform:translateY(18%);opacity:.6}to{transform:none;opacity:1}}

.sheet-grip{width:44px;height:5px;margin:0 auto 6px;border-radius:99px;background:#e0dcd6}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-head h2{margin:6px 0 12px;font-size:19px;font-weight:900;color:#2f2a25}
.sheet-close{border:0;background:none;font-size:30px;line-height:1;color:#8a8078;cursor:pointer;padding:0 4px}

.sheet-msg-label{display:block;font-size:12px;font-weight:800;color:#8a7d70;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.sheet-msg{
  width:100%;
  padding:12px 14px;
  border:1px solid #e6e0d8;
  border-radius:14px;
  background:#fbf8f4;
  font-family:inherit;
  font-size:14px;
  line-height:1.5;
  color:#3b352f;
  resize:vertical;
}
.sheet-msg:focus{outline:2px solid var(--gold);outline-offset:1px}

.sheet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:12px 8px;
  margin:16px 0 4px;
}

.dest{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:4px 2px;
  border-radius:14px;
  font-size:12px;
  font-weight:700;
  color:#4a443d;
  text-decoration:none;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.dest:active{background:#f4efe8}
.dest-ico{
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border-radius:50%;
  color:#fff;
  background:var(--bg,#6b7280);
  box-shadow:0 5px 12px rgba(60,40,15,.22);
}
.dest-ico svg{width:26px;height:26px}

.dest-whats{--bg:#25d366}
.dest-tg{--bg:#2aabee}
.dest-fb{--bg:#1877f2}
.dest-ig{--bg:#df4996}
.dest-ig .dest-ico{background:radial-gradient(circle at 28% 100%,#fdc468,#df4996 46%,#7638b7)}
.dest-x{--bg:#111}
.dest-mail{--bg:#e0782d}
.dest-sms{--bg:#5a9e4b}
.dest-copy{--bg:#6a7480}
.dest-img{--bg:#8a5a2b}
.dest-qr{--bg:#2f2a25}

/* Cada aplicativo pulsa na sua vez: a onda percorre os dez em 5s e recomeça,
   para o olho perceber que dali se compartilha. */
.dest-ico{animation:pulseDest 5s ease-in-out infinite}
.sheet-grid .dest:nth-child(1) .dest-ico{animation-delay:0s}
.sheet-grid .dest:nth-child(2) .dest-ico{animation-delay:.5s}
.sheet-grid .dest:nth-child(3) .dest-ico{animation-delay:1s}
.sheet-grid .dest:nth-child(4) .dest-ico{animation-delay:1.5s}
.sheet-grid .dest:nth-child(5) .dest-ico{animation-delay:2s}
.sheet-grid .dest:nth-child(6) .dest-ico{animation-delay:2.5s}
.sheet-grid .dest:nth-child(7) .dest-ico{animation-delay:3s}
.sheet-grid .dest:nth-child(8) .dest-ico{animation-delay:3.5s}
.sheet-grid .dest:nth-child(9) .dest-ico{animation-delay:4s}
.sheet-grid .dest:nth-child(10) .dest-ico{animation-delay:4.5s}

@keyframes pulseDest{
  0%,14%,100%{transform:scale(1);box-shadow:0 5px 12px rgba(60,40,15,.22),0 0 0 0 rgba(0,0,0,0)}
  5%{transform:scale(1.1);box-shadow:0 6px 14px rgba(60,40,15,.26),0 0 0 7px color-mix(in srgb,var(--bg,#c9a227) 34%,transparent)}
  9%{transform:scale(1.06);box-shadow:0 5px 12px rgba(60,40,15,.24),0 0 0 12px color-mix(in srgb,var(--bg,#c9a227) 8%,transparent)}
}

.sheet-hint{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#857a6e;text-align:center}

.qr-panel{text-align:center}
.qr-img{width:min(72vw,300px);height:auto;border-radius:16px;border:1px solid #ece6de}
.qr-url{margin:10px 0 0;font-size:14px;font-weight:800;color:#3b352f;word-break:break-all}

/* ---------- Aviso rápido ---------- */

.toast{
  position:fixed;
  left:50%;
  bottom:calc(150px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:90;
  max-width:88vw;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(28,22,14,.94);
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  text-align:center;
  box-shadow:0 10px 28px rgba(30,18,4,.4);
}
.toast[hidden]{display:none}

@media (min-width:560px){
  .card-shell{padding-top:34px}
  .card-grid{gap:30px 18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}