:root {
            --fundo: #11150f;
            --painel: #1a2017;
            --verde: #71834a;
            --verde-claro: #a7bb73;
            --laranja: #e5a344;
            --texto: #f0f0e7;
            --suave: #a6ad9b;
            --borda: rgba(167, 187, 115, .22);
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            color: var(--texto);
            background-color: var(--fundo);
            background-image:
                radial-gradient(ellipse at 15% 20%, rgba(91,112,57,.22), transparent 42%),
                radial-gradient(ellipse at 90% 80%, rgba(109,79,37,.13), transparent 38%),
                repeating-linear-gradient(135deg, transparent 0, transparent 45px, rgba(255,255,255,.012) 46px, transparent 47px);
        }

        .pagina {
            width: 100%;
            max-width: 1040px;
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            overflow: hidden;
            background: rgba(21,26,19,.97);
            border: 1px solid var(--borda);
            border-radius: 18px;
            box-shadow: 0 28px 80px rgba(0,0,0,.55);
        }

        .painel-militar {
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 38px;
            background: linear-gradient(145deg, rgba(38,49,30,.98), rgba(20,26,18,.98) 70%);
            border-right: 1px solid var(--borda);
        }

        .painel-militar::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .18;
            background-image: repeating-linear-gradient(45deg, transparent 0, transparent 32px, #8d9d70 33px, transparent 34px, transparent 64px);
            pointer-events: none;
        }

        .painel-militar::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            right: -120px;
            bottom: 50px;
            border: 1px solid rgba(167,187,115,.16);
            border-radius: 50%;
            box-shadow: 0 0 0 25px rgba(167,187,115,.025), 0 0 0 55px rgba(167,187,115,.025), 0 0 0 85px rgba(167,187,115,.025);
            pointer-events: none;
        }

        .conteudo-painel, .rodape-painel { position: relative; z-index: 1; }

        .marca { display: flex; align-items: center; gap: 13px; }

        .emblema {
            width: 54px;
            height: 54px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--verde);
            color: #10150d;
            clip-path: polygon(50% 0, 91% 18%, 91% 68%, 50% 100%, 9% 68%, 9% 18%);
            font-size: 22px;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .marca-texto strong {
            display: block;
            font-size: 23px;
            font-weight: 900;
            letter-spacing: 2px;
        }

        .marca-texto span {
            display: block;
            margin-top: 5px;
            color: var(--verde-claro);
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 2.5px;
        }

        .apresentacao { margin-top: 58px; }

        .etiqueta {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 11px;
            border: 1px solid rgba(167,187,115,.25);
            border-radius: 4px;
            color: var(--verde-claro);
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 1.5px;
        }

        .ponto {
            width: 7px;
            height: 7px;
            background: var(--laranja);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(229,163,68,.6);
        }

        .apresentacao h1 {
            margin: 22px 0 15px;
            font-size: clamp(31px, 3.6vw, 45px);
            line-height: 1.08;
            letter-spacing: -1.5px;
        }

        .apresentacao h1 span { color: var(--verde-claro); }

        .apresentacao p {
            color: var(--suave);
            font-size: 14px;
            line-height: 1.8;
        }

        .lista-recursos { display: grid; gap: 16px; margin-top: 30px; }

        .recurso { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #d8ddcf; }

        .recurso-icone {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--borda);
            border-radius: 7px;
            color: var(--verde-claro);
            font-size: 17px;
        }

        .rodape-painel {
            margin-top: 35px;
            padding-top: 18px;
            border-top: 1px solid var(--borda);
            color: #838b79;
            font-size: 10px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }

        .painel-formulario { padding: 36px 38px; }

        .titulo { margin-bottom: 24px; }

        .mini-titulo {
            display: block;
            margin-bottom: 10px;
            color: var(--laranja);
            font-size: 10px;
            font-weight: bold;
            letter-spacing: 2.5px;
        }

        .titulo h2 { margin: 0 0 9px; font-size: 27px; letter-spacing: -.5px; }

        .titulo p { margin: 0; color: var(--suave); font-size: 13px; line-height: 1.6; }

        .mensagem {
            padding: 13px 14px;
            border-radius: 7px;
            margin-bottom: 19px;
            font-size: 13px;
            line-height: 1.5;
        }

        .mensagem.erro { background: rgba(190,57,49,.12); border: 1px solid rgba(255,104,95,.35); color: #ffaaa3; }
        .mensagem.sucesso { background: rgba(65,145,72,.14); border: 1px solid rgba(120,190,100,.35); color: #c1e8ad; }

        .linha { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

        .grupo { margin-bottom: 16px; min-width: 0; }

        label {
            display: block;
            margin-bottom: 8px;
            color: #dfe4d6;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: .6px;
        }

        input, select {
            width: 100%;
            min-height: 45px;
            padding: 12px 13px;
            border: 1px solid #394332;
            border-radius: 7px;
            outline: none;
            background: #131811;
            color: var(--texto);
            font-family: inherit;
            font-size: 13px;
            transition: border-color .2s, box-shadow .2s;
        }

        input::placeholder { color: #6e7865; }
        input:focus, select:focus { border-color: var(--verde-claro); box-shadow: 0 0 0 3px rgba(167,187,115,.10); }
        select option { background: #1a2017; color: var(--texto); }
        select:disabled { opacity: .55; cursor: not-allowed; }

        .aviso { margin-top: 6px; color: #89927f; font-size: 11px; line-height: 1.5; }

        .botao {
            width: 100%;
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 5px;
            padding: 13px;
            border: 1px solid #a7bb73;
            border-radius: 7px;
            background: linear-gradient(135deg, #819653, #667b3d);
            color: #11160e;
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 1.3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform .2s, filter .2s, box-shadow .2s;
        }

        .botao:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 8px 25px rgba(113,131,74,.18); }

        .login {
            margin-top: 22px;
            color: var(--suave);
            font-size: 12px;
            line-height: 1.8;
            text-align: center;
        }

        .login a { color: var(--verde-claro); font-weight: bold; text-decoration: none; }
        .login a:hover { color: var(--laranja); text-decoration: underline; }

        .privacidade { margin-top: 17px; color: #737d69; font-size: 10px; line-height: 1.6; text-align: center; }

        @media (max-width: 800px) {
            body { padding: 16px; }
            .pagina { max-width: 560px; grid-template-columns: 1fr; }
            .painel-militar { display: none; }
            .painel-formulario { padding: 30px 25px; }
            .titulo h2 { font-size: 25px; }
        }

        @media (max-width: 430px) {
            body { padding: 10px; }
            .painel-formulario { padding: 24px 18px; }
            .linha { grid-template-columns: 1fr; gap: 0; }
        }
 /* =====================================================
   DATA DE NASCIMENTO — CAMPOS COMPATÍVEIS COM CELULAR
===================================================== */

.data-nascimento-campos {
    display: grid;
    grid-template-columns: 0.8fr 1.5fr 1fr;
    gap: 10px;
    width: 100%;
}

.data-nascimento-campos > div {
    min-width: 0;
}

.data-nascimento-campos .data-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
}

.data-nascimento-campos select {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 8px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 8px;
}

@media (max-width: 380px) {
    .data-nascimento-campos {
        gap: 6px;
        grid-template-columns: 0.8fr 1.3fr 1fr;
    }

    .data-nascimento-campos select {
        padding: 0 5px;
        font-size: 13px;
    }
}