/* Cartões de vidro (telas de exemplo: Google, Instagram, WhatsApp, site, automação) */
/* cartões de vidro */
.jc { position: relative; background: linear-gradient(160deg, rgba(34,34,37,.94), rgba(16,16,18,.96)); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; padding: 22px 22px 24px; color: #fff; box-shadow: 0 40px 90px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(217,174,108,.06); font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.jc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(217,174,108,.12), transparent 60%); pointer-events: none; }
.jc small, .jc i { font-style: normal; }
.jc-tag { position: absolute; top: -13px; left: 22px; padding: 5px 13px; border-radius: 99px; background: var(--gold-grad); color: #120c05; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

/* 1 Google */
.g-top b { display: block; font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.g-rate { color: #f1d19a; letter-spacing: .06em; font-size: 13px; }
.g-rate em { font-style: normal; color: #fff; margin-right: 6px; font-size: 14px; letter-spacing: 0; }
.g-cat { color: var(--soft); margin: 4px 0 16px; }
.g-cat i { color: #6fd08c; }
.g-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.g-btns span { text-align: center; font-size: 11.5px; padding: 9px 0; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); color: var(--text); }
.g-btns span:first-child { background: rgba(217,174,108,.18); border-color: rgba(217,174,108,.5); color: #f1d19a; }
.g-photos { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; height: 74px; }
.g-photos i { border-radius: 14px; background: linear-gradient(135deg, rgba(217,174,108,.35), rgba(255,255,255,.06)); }
.g-photos i:nth-child(2) { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(217,174,108,.18)); }

/* 2 Instagram */
.ig-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ig-av { width: 62px; height: 62px; border-radius: 50%; padding: 3px; background: var(--gold-grad); flex-shrink: 0; }
.ig-av i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #17171a; border: 3px solid #17171a; box-shadow: inset 0 0 0 20px rgba(217,174,108,.22); }
.ig-top b { display: block; font-size: 16px; font-weight: 500; }
.ig-top small { color: var(--soft); font-size: 12px; }
.ig-bio { color: var(--text); font-size: 13px; margin-bottom: 14px; }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ig-btns span { text-align: center; padding: 9px 0; border-radius: 99px; font-size: 12px; border: 1px solid rgba(255,255,255,.16); }
.ig-btns span:first-child { background: #fff; color: #0a0a0a; border-color: #fff; font-weight: 500; }
.ig-hl { display: flex; justify-content: space-between; }
.ig-hl span { width: 62px; text-align: center; font-size: 10.5px; color: var(--soft); }
.ig-hl span::before { content: ''; display: block; width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 50%; border: 1.5px solid rgba(217,174,108,.6); background: rgba(217,174,108,.1); }

/* 3 WhatsApp */
.wa-h { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 14px; }
.wa-h i { width: 34px; height: 34px; border-radius: 50%; background: rgba(217,174,108,.25); flex-shrink: 0; }
.wa-h b { display: block; font-weight: 500; font-size: 14px; }
.wa-h small { color: #6fd08c; font-size: 11.5px; }
.wa-b { max-width: 84%; padding: 10px 14px; border-radius: 18px; margin-bottom: 8px; font-size: 13px; }
.wa-b.in { background: rgba(255,255,255,.09); border-bottom-left-radius: 6px; }
.wa-b.out { margin-left: auto; background: rgba(37,150,90,.34); border: 1px solid rgba(80,200,130,.3); border-bottom-right-radius: 6px; }
.wa-b.link { margin-left: auto; padding: 10px 14px; background: rgba(217,174,108,.16); border: 1px solid rgba(217,174,108,.45); color: #f1d19a; border-radius: 14px; font-size: 12.5px; }

/* 4 Site + agenda */
.bw-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.bw-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.bw-bar b { margin-left: 8px; font-weight: 400; font-size: 11.5px; color: var(--soft); background: rgba(255,255,255,.06); padding: 4px 12px; border-radius: 99px; }
.bw-t { font-size: 15px; font-weight: 500; margin-bottom: 12px; }
.bw-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.bw-cal span { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.06); }
.bw-cal span.on { background: rgba(217,174,108,.25); }
.bw-cal span.sel { background: var(--gold-grad); }
.bw-time { display: flex; gap: 8px; margin-bottom: 16px; }
.bw-time span { flex: 1; text-align: center; padding: 8px 0; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); font-size: 12px; }
.bw-time span.sel { border-color: var(--gold); color: #f1d19a; background: rgba(217,174,108,.14); }
.bw-go { text-align: center; padding: 12px; border-radius: 99px; background: var(--gold-grad); color: #120c05; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* 5 Automação */
.au-t { font-size: 15px; font-weight: 500; margin-bottom: 14px; }
.au-r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); margin-bottom: 9px; font-size: 12.5px; }
.au-r::before { content: '✓'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(111,208,140,.2); color: #6fd08c; font-size: 13px; }

/* 6 Fechado */
.jc-done { background: var(--gold-grad); border-color: rgba(255,255,255,.3); color: #120c05; text-align: center; padding: 30px 24px 32px; box-shadow: 0 40px 90px -20px rgba(217,174,108,.5); }
.jc-done::before { background: radial-gradient(ellipse 70% 60% at 30% 0%, rgba(255,255,255,.35), transparent 60%); }
.jd-ok { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #120c05; color: #f1d19a; display: grid; place-items: center; font-size: 30px; }
.jc-done b { display: block; font-family: var(--display); font-size: 26px; zoom: var(--d-zoom, 1); text-transform: uppercase; font-weight: var(--d-weight, 500); letter-spacing: var(--d-track, .06em); line-height: 1; margin-bottom: 8px; }
.jc-done span { font-size: 13px; opacity: .8; }