/* ==================================================================
   NossosCliques — tema visual compartilhado (mesma linguagem da landing:
   fundo escuro, vidro (glassmorphism), Playfair + Inter, tom taupe/dourado).
   Usa os MESMOS nomes de classe das telas do funil para reskin global.
   ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --nc-bg: #0a0a0a;
    --nc-bg2: #121212;
    --nc-bg3: #1a1a1a;
    --nc-text: #e5e7eb;
    --nc-muted: #a1a1aa;
    --nc-soft: #71717a;
    --nc-brand: #a38a80;
    --nc-brand-400: #d2bab0;
    --nc-brand-600: #8c7368;
    --nc-border: rgba(255, 255, 255, 0.08);
    --nc-border-2: rgba(255, 255, 255, 0.14);
    --nc-gold: #d4af37;
    --nc-serif: 'Playfair Display', Georgia, serif;
    --nc-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(163, 138, 128, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 10%, rgba(163, 138, 128, 0.06), transparent 55%),
        var(--nc-bg) !important;
    color: var(--nc-text) !important;
    font-family: var(--nc-sans) !important;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--nc-serif) !important; color: #fff !important; font-weight: 400; }
a { color: inherit; }

/* ---------- Topo / navbar ---------- */
.top, header.nav { background: rgba(18,18,18,.72) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--nc-border) !important; position: sticky; top: 0; z-index: 30; }
.top .in { max-width: 980px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-family: var(--nc-serif) !important; color: #fff !important; font-size: 19px; letter-spacing: .5px; text-decoration: none; }
.brand b { color: var(--nc-brand-400) !important; font-style: italic; }
.top a.pnl, .top a.sair { color: var(--nc-muted) !important; text-decoration: none; font-size: 13px; }
.top a.pnl:hover, .top a.sair:hover { color: #fff !important; }

/* ---------- Layout ---------- */
.card {
    background: rgba(26,26,26,.6) !important;
    backdrop-filter: blur(12px);
    border: 1px solid var(--nc-border) !important;
    border-radius: 18px !important;
    padding: 28px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
    color: var(--nc-text);
}
.sub, .lead { color: var(--nc-muted) !important; }
.big { font-size: 52px; text-align: center; }
h2 { font-size: 26px; margin: 8px 0 6px; }
label { display: block; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .12em; color: var(--nc-soft) !important; margin: 16px 0 6px; }
.tip { font-size: 12.5px; color: var(--nc-soft) !important; margin-top: 8px; }
.note, .notice { background: rgba(212,175,55,.10) !important; border: 1px solid rgba(212,175,55,.35) !important; color: #e9d8a6 !important; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; }
.note a, .notice a { color: #f3e3b3; }

/* ---------- Formulários ---------- */
input, textarea, select {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid var(--nc-border-2) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #f4f4f5 !important;
    background: rgba(255,255,255,.04) !important;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #6b7280; }
input:focus, textarea:focus, select:focus { border-color: var(--nc-brand) !important; box-shadow: 0 0 0 3px rgba(163,138,128,.20); }
select option { background: var(--nc-bg3); color: #fff; }
textarea { min-height: 70px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1; min-width: 160px; }

/* ---------- Botões ---------- */
.btn {
    background: var(--nc-brand) !important; color: #fff !important; border: 1px solid transparent !important;
    border-radius: 999px !important; padding: 12px 22px !important; font-weight: 600 !important;
    letter-spacing: .3px; font-size: 13.5px !important; cursor: pointer; text-decoration: none; display: inline-block;
    transition: background .2s, transform .1s;
}
.btn:hover { background: var(--nc-brand-600) !important; }
.btn.dark { background: #fff !important; color: #0a0a0a !important; }
.btn.dark:hover { background: #e5e5e5 !important; }
.btn.ghost { background: transparent !important; color: #e5e7eb !important; border: 1px solid var(--nc-border-2) !important; }
.btn.ghost:hover { background: rgba(255,255,255,.06) !important; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }

/* ---------- Mensagens ---------- */
.err { background: rgba(239,68,68,.12) !important; color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.35) !important; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.ok { background: rgba(34,197,94,.12) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,.35) !important; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }

/* ---------- Passos ---------- */
.steps { max-width: 980px; margin: 22px auto 0; padding: 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.steps div { flex: 1; min-width: 90px; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--nc-soft) !important; border-top: 3px solid var(--nc-border) !important; padding-top: 8px; }
.steps div.on { color: #fff !important; border-top-color: var(--nc-brand-400) !important; font-weight: 700; }

/* ---------- Links / QR ---------- */
.linkrow { display: flex; gap: 8px; margin: 10px 0; }
.linkrow input { flex: 1; min-width: 0; font-size: 13px !important; }
.qr { text-align: center; margin-top: 16px; }
.qr img { width: 200px; height: 200px; border: 1px solid var(--nc-border) !important; border-radius: 12px; padding: 8px; background: #fff; }

/* ---------- Seg / tipo de evento ---------- */
.seg { display: flex; gap: 12px; flex-wrap: wrap; }
.seg label { text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; color: var(--nc-text) !important; border: 1px solid var(--nc-border-2); border-radius: 12px; padding: 14px; flex: 1; min-width: 160px; cursor: pointer; display: flex; gap: 10px; align-items: center; margin: 0; background: rgba(255,255,255,.03); }
.seg label.sel { border: 1px solid var(--nc-brand) !important; background: rgba(163,138,128,.12); box-shadow: 0 0 0 3px rgba(163,138,128,.15); }
.seg input { width: auto; }

/* ---------- Blocos ---------- */
.block { border-top: 1px solid var(--nc-border) !important; margin-top: 22px; padding-top: 20px; }

/* ---------- Upload (ensaio) ---------- */
.updrop { border: 2px dashed var(--nc-border-2) !important; border-radius: 12px; padding: 22px; text-align: center; color: var(--nc-muted) !important; cursor: pointer; background: rgba(255,255,255,.02) !important; }
.updrop:hover { border-color: var(--nc-brand) !important; color: #fff !important; }
.efotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-top: 14px; }
.efoto { position: relative; aspect-ratio: 1; border: 3px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; }
.efoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.efoto input { position: absolute; opacity: 0; }
.efoto.cap { border-color: var(--nc-gold) !important; }
.efoto .tag { position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; text-align: center; background: rgba(0,0,0,.6); color: #fff; padding: 2px 0; }
.hrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hthumb { width: 120px; height: 150px; object-fit: cover; border-radius: 12px; border: 1px solid var(--nc-border) !important; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #52525b; font-size: 12px; flex: 0 0 auto; }

/* ---------- Grade de modelos ---------- */
.mgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 640px) { .mgrid { grid-template-columns: 1fr; } }
.mcard { border: 2px solid var(--nc-border) !important; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--nc-bg3) !important; position: relative; display: block; margin: 0; letter-spacing: 0; text-transform: none; }
.mcard.sel { border-color: var(--nc-brand) !important; box-shadow: 0 12px 30px rgba(163,138,128,.22); }
.mcard input { position: absolute; opacity: 0; pointer-events: none; }
.mthumb { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; background: #EDE9E3; border-bottom: 1px solid var(--nc-border); }
.mthumb iframe { border: 0; width: 1200px; height: 1600px; transform-origin: top left; pointer-events: none; background: #FCFAF8; }
.mnm { display: block; padding: 10px 12px; font-size: 14px; color: #fff !important; font-weight: 600; }
.mcheck { position: absolute; top: 10px; right: 10px; z-index: 3; background: var(--nc-brand); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; font-weight: 700; }
.mcard.sel .mcheck { display: flex; }

/* ---------- Área do cliente ---------- */
.grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .grid { grid-template-columns: 1fr 1fr; } }
.badge { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.badge.on { background: rgba(34,197,94,.14) !important; color: #86efac !important; border: 1px solid rgba(34,197,94,.35); }
.badge.draft { background: rgba(212,175,55,.12) !important; color: #e9d8a6 !important; border: 1px solid rgba(212,175,55,.35); }
.empty { background: rgba(26,26,26,.6); border: 1px dashed var(--nc-border-2) !important; border-radius: 18px; padding: 40px; text-align: center; }

/* ---------- Cofre animado ---------- */
.cofrewrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 8px 0 22px; text-decoration: none; }
.cofre { position: relative; width: 190px; height: 150px; cursor: pointer; }
.cofre .base { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; border-radius: 12px 12px 14px 14px; background: linear-gradient(180deg,#d9b96a,#b5952f 55%,#8a6f22); box-shadow: 0 14px 30px rgba(138,111,34,.35), inset 0 2px 0 rgba(255,255,255,.4); }
.cofre .lid { position: absolute; left: 0; right: 0; top: 16px; height: 60px; border-radius: 16px 16px 4px 4px; background: linear-gradient(180deg,#e6c877,#c8a63e 60%,#9c7f28); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.34,1.56,.64,1); box-shadow: inset 0 2px 0 rgba(255,255,255,.55); }
.cofre .band { position: absolute; left: 50%; top: 16px; width: 26px; height: 140px; transform: translateX(-50%); background: linear-gradient(180deg,#f3dfa0,#c8a63e); border-radius: 6px; z-index: 3; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.cofre .lock { position: absolute; left: 50%; top: 96px; width: 26px; height: 32px; transform: translateX(-50%); z-index: 4; background: linear-gradient(180deg,#fbeec2,#d9b96a); border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.cofre .lock::after { content: ''; position: absolute; left: 50%; top: 9px; width: 7px; height: 12px; transform: translateX(-50%); background: #8a6f22; border-radius: 3px; }
.cofre .glow { position: absolute; left: 50%; top: 40px; width: 150px; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,225,150,.95), rgba(255,225,150,0)); opacity: 0; transition: opacity .5s; z-index: 2; }
.cofre:hover .lid, .cofre.open .lid { transform: rotateX(115deg); }
.cofre:hover .glow, .cofre.open .glow { opacity: 1; }
.cofre-label { font-family: var(--nc-serif); color: #fff; font-size: 16px; }
.cofre-hint { font-size: 12.5px; color: var(--nc-soft); }

/* ---------- Página /modelos ---------- */
.chip { background: rgba(255,255,255,.04) !important; border: 1px solid var(--nc-border-2) !important; color: var(--nc-muted) !important; }
.chip:hover { border-color: var(--nc-brand) !important; color: #fff !important; }
.chip.on { background: #fff !important; border-color: #fff !important; color: #0a0a0a !important; }
.thumb { background: #1a1a1a !important; border-bottom: 1px solid var(--nc-border) !important; }
.meta { background: transparent !important; }
.meta .nm { color: #fff !important; }
.meta .tag { color: var(--nc-brand-400) !important; }
.meta .go { background: var(--nc-brand) !important; border-radius: 999px !important; }
.meta .go:hover { background: var(--nc-brand-600) !important; }
.meta .see { background: transparent !important; border: 1px solid var(--nc-border-2) !important; color: #e5e7eb !important; border-radius: 999px !important; }
.meta .see:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
#more { background: transparent !important; border: 1px solid var(--nc-border-2) !important; color: #fff !important; }
#more:hover { background: #fff !important; color: #0a0a0a !important; }
.floater { background: #fff !important; color: #0a0a0a !important; }
.floater span { color: var(--nc-brand-600) !important; }
.fsx-bar { background: #0f0f0f !important; }
.fsx-use { background: var(--nc-brand) !important; border-radius: 999px !important; }
footer { background: #000 !important; color: var(--nc-muted) !important; }
footer .brand { color: #fff !important; }

/* /modelos: card do preview sem o padding do .card generico */
.cards .card { padding: 0 !important; display: flex !important; flex-direction: column; }
.cards .card.hide { display: none !important; }

/* Valores/planos (pagamento e onboarding): texto claro no tema escuro */
.summary { color: var(--nc-muted) !important; border-bottom: 1px dashed var(--nc-border) !important; }
.summary b, .summary strong, .total, .total b, .pr, .price { color: #fff !important; }

/* Marca: logo (camera line-art) ao lado do nome */
.brand { display: inline-flex !important; align-items: center; gap: 9px; }
.brand .nc-logo { width: 30px; height: 30px; color: var(--nc-brand-400); flex: 0 0 auto; }
footer .brand .nc-logo, .brand b + .nc-logo { color: var(--nc-brand-400); }

/* Caixa de plano (onboarding) no tema escuro (estava branca com texto branco) */
.plan { background: rgba(26,26,26,.6) !important; border: 1px solid var(--nc-brand) !important; border-radius: 16px; }
.plan h3 { color: #fff !important; }
.plan li { color: var(--nc-text) !important; }
.plan a { color: var(--nc-muted) !important; }
.plan a:hover { color: #fff !important; }

/* ================= RESPONSIVO (mobile-first) ================= */

/* Midia fluida (nao afeta os iframes de preview de modelo, que sao escalados por JS) */
img, video { max-width: 100%; height: auto; }

/* QR sempre dentro da tela e podendo quebrar */
.qr { flex-wrap: wrap !important; }
.qr img { max-width: 100% !important; height: auto !important; }

/* Link + botao podem quebrar linha */
.linkrow { flex-wrap: wrap; }

@media (max-width: 768px) {
    /* Evita o zoom automatico do iOS ao focar um campo */
    input, textarea, select { font-size: 16px !important; }
}

@media (max-width: 560px) {
    .top .in { padding: 12px 14px !important; }
    .brand { font-size: 16px !important; }
    .brand .nc-logo { width: 24px !important; height: 24px !important; }
    .steps div { min-width: 72px; }
}

@media (max-width: 480px) {
    .wrap { padding: 18px 14px 64px !important; }
    .card { padding: 20px 16px !important; }
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    .row > div { min-width: 100%; }
    .seg label { min-width: 100%; }
    .btns .btn { width: 100%; text-align: center; justify-content: center; }
    .hthumb { width: 96px; height: 120px; }
}