/* Rota Coins — tema compartilhado (dourado + preto, extraído do logo).
   Para mudar as cores do site inteiro, edite só as variáveis abaixo. */

:root {
    /* Paleta do logo */
    --bg: #070402;
    --gold-light: #f5d64f;
    --gold: #f2b51d;
    --gold-mid: #ca8e21;
    --gold-deep: #976017;
    --bronze: #5d360d;
    --gold-grad: linear-gradient(135deg, #f5d64f 0%, #f2b51d 40%, #ca8e21 75%, #976017 100%);
    --gold-grad-h: linear-gradient(90deg, #f5d64f, #f2b51d 45%, #ca8e21);
    --gold-btn: linear-gradient(180deg, #f9e481 0%, #f2b51d 48%, #ca8e21 100%);

    /* Superfícies e texto */
    --card: rgba(20, 13, 6, 0.9);
    --card-inner: rgba(7, 4, 2, 0.72);
    --border: rgba(202, 142, 33, 0.34);
    --border-strong: rgba(245, 214, 79, 0.6);
    --text: #f8f0dc;
    --muted: rgba(248, 240, 220, 0.66);
    --gold-soft: rgba(245, 214, 79, 0.78);
    --on-gold: #1a1003;

    /* Estados */
    --alert: #ff8a4c;
    --green: #34d399;

    --font-display: 'Russo One', 'Montserrat', system-ui, sans-serif;
    --cut: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Montserrat', system-ui, sans-serif;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(245, 214, 79, 0.2), transparent 62%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(202, 142, 33, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 85%, rgba(151, 96, 23, 0.16), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
}
body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(245, 214, 79, 0.85), transparent),
        radial-gradient(1px 1px at 78% 12%, rgba(255, 236, 160, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 88% 64%, rgba(245, 214, 79, 0.7), transparent),
        radial-gradient(1px 1px at 22% 72%, rgba(255, 236, 160, 0.8), transparent),
        radial-gradient(1px 1px at 52% 42%, rgba(245, 214, 79, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 64% 88%, rgba(255, 236, 160, 0.6), transparent);
}

/* Logo (WebP com fundo transparente: o brilho dourado se funde com a página) */
.logo-img {
    display: block; object-fit: contain; color: transparent;
    filter: drop-shadow(0 6px 22px rgba(242, 181, 29, 0.28));
}

/* Header */
.header {
    position: sticky; top: 0; z-index: 10;
    background: rgba(7, 4, 2, 0.84);
    backdrop-filter: blur(12px);
}
.header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-mid) 20%, var(--gold-light) 50%, var(--gold-mid) 80%, transparent);
}
.header-inner {
    max-width: 56rem; margin: 0 auto; height: 3.75rem;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand img {
    width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
    overflow: hidden; color: transparent; background: #100a03;
    border: 1px solid var(--border-strong);
    box-shadow: 0 0 16px rgba(242, 181, 29, 0.4);
}
.brand-name {
    font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.06em; line-height: 1;
    background: var(--gold-grad-h); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Cabeçalho de página */
.badge {
    display: inline-block; margin-bottom: 0.75rem;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold-light); padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-strong); background: rgba(245, 214, 79, 0.08);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.title {
    margin: 0; font-family: var(--font-display); font-weight: 400;
    font-size: 1.6rem; letter-spacing: 0.03em; text-transform: uppercase;
    background: var(--gold-grad-h); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtle { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--gold-soft); }

/* Card: cantos cortados como o escudo do logo, com borda dourada metálica */
.card {
    position: relative; isolation: isolate;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep) 50%, var(--gold-mid));
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.card::before {
    content: ''; position: absolute; inset: 1px; z-index: -1;
    background:
        radial-gradient(ellipse 90% 60% at 0% 0%, rgba(245, 214, 79, 0.09), transparent 60%),
        linear-gradient(180deg, #17100a, #0c0703);
    clip-path: polygon(calc(var(--cut) - 0.6px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.6px), calc(100% - var(--cut) + 0.6px) 100%, 0 100%, 0 calc(var(--cut) - 0.6px));
}
.card-glow::before {
    background:
        radial-gradient(ellipse 90% 70% at 0% 0%, rgba(245, 214, 79, 0.18), transparent 62%),
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(202, 142, 33, 0.14), transparent 62%),
        linear-gradient(180deg, #19110a, #0c0703);
}

/* Botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    border: 0; cursor: pointer; font-family: inherit;
    font-weight: 800; font-size: 0.875rem; text-decoration: none; letter-spacing: 0.02em;
    padding: 0.75rem 1.2rem; color: var(--text); transition: filter 0.2s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-gold {
    color: var(--on-gold); background: var(--gold-btn);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 240, 170, 0.55), inset 0 -3px 6px rgba(151, 96, 23, 0.35);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-gold:hover { filter: brightness(1.08); }

/* Campos */
.field-label, .label {
    display: block; margin-bottom: 0.45rem;
    font-size: 0.8rem; font-weight: 700; color: var(--gold-light);
}
.input, input[type="text"] {
    width: 100%; padding: 0.75rem 0.9rem;
    border-radius: 0.4rem; border: 1px solid var(--border);
    background: var(--card-inner); color: var(--text);
    font-family: inherit; font-size: 0.9rem; outline: none;
}
.input::placeholder, input[type="text"]::placeholder { color: rgba(248, 240, 220, 0.35); }
.input:focus, input[type="text"]:focus {
    border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 181, 29, 0.22);
}

/* Rodapé */
.footer {
    position: relative; z-index: 1; text-align: center; padding: 1.25rem 1rem 1.75rem;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(245, 214, 79, 0.6);
}
.footer span { color: var(--gold-light); margin: 0 0.4rem; }