:root {
    --amarelo: #f0c800;
    --azul: #70c0f0;
    --azul-escuro: #2b8fc9;
    --texto: #666;
    --texto-forte: #333;
    --texto-suave: #7b8887;
    --fundo: #fff;
    --fundo-suave: #fafafa;
    --borda: #e6e6e6;
    --verde: #2e9e5b;
    --ambar: #d9a400;
    --cinza: #8a8f94;
    --vermelho: #c72245;
    --fonte-corpo: 'Open Sans', Arial, sans-serif;
    --fonte-menu: 'Montserrat', Arial, Helvetica, sans-serif;
    --fonte-titulo: 'Roboto', sans-serif;
    --fonte-serif: 'Libre Baskerville', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 15px/1.7 var(--fonte-corpo);
    color: var(--texto);
    background: var(--fundo);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--texto-forte); }

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }

/* Topo */
.topo {
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
}
.topo__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
.topo__marca img { display: block; height: 40px; width: auto; }
.topo__menu { display: flex; gap: 28px; }
.topo__menu a {
    font-family: var(--fonte-menu);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--texto-forte);
    transition: color .2s;
}
.topo__menu a:hover { color: var(--azul-escuro); }

/* Hero espacial */
.hero {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 72px 16px 128px;
    overflow: hidden;
    background-color: #06070f;
    background-image:
        radial-gradient(ellipse 60% 45% at 75% 45%, rgba(190, 40, 70, .45), transparent 70%),
        radial-gradient(ellipse 45% 40% at 20% 70%, rgba(160, 30, 60, .35), transparent 70%),
        radial-gradient(ellipse 70% 60% at 50% 30%, rgba(40, 50, 110, .45), transparent 75%),
        radial-gradient(1.5px 1.5px at 12% 22%, #fff 100%, transparent 100%),
        radial-gradient(1px 1px at 28% 68%, rgba(255,255,255,.9) 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 41% 15%, #fff 100%, transparent 100%),
        radial-gradient(1px 1px at 55% 80%, rgba(255,255,255,.8) 100%, transparent 100%),
        radial-gradient(2px 2px at 67% 28%, #fff 100%, transparent 100%),
        radial-gradient(1px 1px at 78% 62%, rgba(255,255,255,.9) 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 88% 18%, #fff 100%, transparent 100%),
        radial-gradient(1px 1px at 93% 76%, rgba(255,255,255,.8) 100%, transparent 100%),
        radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,.8) 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 45%, rgba(255,255,255,.9) 100%, transparent 100%),
        radial-gradient(1px 1px at 62% 55%, rgba(255,255,255,.7) 100%, transparent 100%),
        radial-gradient(1px 1px at 19% 40%, rgba(255,255,255,.7) 100%, transparent 100%),
        radial-gradient(1.5px 1.5px at 84% 42%, rgba(255,255,255,.9) 100%, transparent 100%),
        radial-gradient(1px 1px at 47% 92%, rgba(255,255,255,.7) 100%, transparent 100%),
        radial-gradient(1px 1px at 73% 8%, rgba(255,255,255,.8) 100%, transparent 100%),
        radial-gradient(1px 1px at 4% 55%, rgba(255,255,255,.6) 100%, transparent 100%),
        radial-gradient(1px 1px at 96% 50%, rgba(255,255,255,.6) 100%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 56px));
}
.hero__conteudo { position: relative; max-width: 720px; margin: 0 auto; }
.hero__simbolo { display: block; margin: 0 auto 8px; width: 120px; height: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
.hero__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 300;
    font-size: clamp(30px, 5vw, 44px);
    letter-spacing: .06em;
    margin: 0;
    color: var(--amarelo);
}
.hero__linha { display: block; width: 90px; height: 1px; margin: 16px auto; background: rgba(255,255,255,.35); }
.hero__sub {
    margin: 0;
    font-family: var(--fonte-serif);
    font-style: italic;
    font-size: 16px;
    color: rgba(255,255,255,.85);
}

/* Conteúdo */
.principal {
    flex: 1;
    margin-top: -88px;
    position: relative;
    padding-bottom: 56px;
}

.cartao {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(10, 20, 40, .18);
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 28px 28px;
    border-top: 6px solid var(--cinza);
}
.cartao--ativo { border-top-color: var(--verde); }
.cartao--vencido { border-top-color: var(--ambar); }
.cartao--inativo { border-top-color: var(--cinza); }
.cartao--nao-encontrado { border-top-color: var(--vermelho); }

.cartao__status { text-align: center; margin-bottom: 20px; }
.cartao__mensagem { margin: 12px 0 0; color: var(--texto); }
.cartao__texto { text-align: center; margin: 0; }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-menu);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    color: #fff;
    background: var(--cinza);
}
.selo__ponto { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.9); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.selo--ativo { background: var(--verde); }
.selo--vencido { background: var(--ambar); }
.selo--inativo { background: var(--cinza); }
.selo--erro { background: var(--vermelho); }

.cartao__nome {
    font-family: var(--fonte-titulo);
    font-weight: 300;
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: .03em;
    color: var(--texto-forte);
    text-align: center;
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borda);
}

.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px 24px;
    margin: 0;
}
.dados__item dt {
    font-family: var(--fonte-menu);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 2px;
}
.dados__item dd {
    margin: 0;
    font-size: 16px;
    color: var(--texto-forte);
}

.nota {
    max-width: 760px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 13px;
    color: var(--texto-suave);
}

/* Rodapé */
.rodape {
    background: var(--fundo-suave);
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 13px;
    text-align: center;
    padding: 28px 0;
}
.rodape p { margin: 2px 0; }
.rodape a { color: #636363; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape__nome { font-family: var(--fonte-menu); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--texto-forte); }
.rodape__lema { margin-top: 10px !important; font-family: var(--fonte-serif); font-style: italic; color: var(--azul-escuro); }

@media (max-width: 600px) {
    .topo__menu { display: none; }
    .hero { padding: 48px 16px 104px; }
    .cartao { padding: 26px 18px 22px; }
}

/* Avatares */
.avatar {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #e6ebf0;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(10, 20, 40, .18);
}
.avatar--consulta { width: 120px; height: 120px; margin: 0 auto 14px; }
.avatar--card { width: 96px; height: 96px; margin: 0 auto 12px; }
.cartao__identidade { text-align: center; }
.cartao__identidade .cartao__nome { border-bottom: 0; padding-bottom: 0; margin-bottom: 6px; }
.cartao__identidade { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--borda); }

/* Lista de sócios */
.grupo { max-width: 1040px; margin: 0 auto 36px; }
.grupo__titulo {
    font-family: var(--fonte-titulo);
    font-weight: 300;
    font-size: 26px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texto-forte);
    text-align: center;
    margin: 0 0 20px;
}
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-top: 4px solid var(--azul);
    border-radius: 14px;
    padding: 22px 16px 18px;
    box-shadow: 0 10px 28px rgba(10, 20, 40, .12);
}
.card--diretoria { border-top-color: var(--amarelo); }
.card__nome {
    font-family: var(--fonte-menu);
    font-weight: 600;
    font-size: 15px;
    color: var(--texto-forte);
    line-height: 1.35;
}
.card__cargo {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--fonte-menu);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7a5f00;
    background: #fff3b8;
    border-radius: 999px;
    padding: 4px 10px;
}
.card__desde { margin-top: 8px; font-size: 13px; color: var(--texto-suave); }

@media (max-width: 600px) {
    .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .card { padding: 16px 10px 14px; }
    .avatar--card { width: 72px; height: 72px; }
}

/* Busca por nome */
.busca { max-width: 560px; margin: 0 auto 28px; text-align: center; }
.busca__rotulo {
    display: block;
    font-family: var(--fonte-menu);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
    margin-bottom: 8px;
}
.busca__campo {
    width: 100%;
    font: 16px/1.4 var(--fonte-corpo);
    color: var(--texto-forte);
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow: 0 10px 28px rgba(10, 20, 40, .18);
    outline: none;
}
.busca__campo:focus { border-color: var(--azul-escuro); box-shadow: 0 0 0 3px rgba(43, 143, 201, .25), 0 10px 28px rgba(10, 20, 40, .18); }
.busca__resultado { margin: 10px 0 0; font-size: 13px; min-height: 1.6em; }
.busca__resultado:not(:empty) {
    display: inline-block;
    color: var(--texto-forte);
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: 3px 14px;
    box-shadow: 0 4px 12px rgba(10, 20, 40, .18);
}
.busca__vazio { text-align: center; color: var(--texto-suave); margin: 0 0 24px; }
.grupo[hidden], .card[hidden] { display: none; }