/* Site publico do Celebrations APV: privacidade, suporte e exclusao de conta. Cores do app (CoresApp / GradienteApp). */
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../fontes/Montserrat-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../fontes/Nunito-Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("../fontes/Nunito-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("../fontes/Nunito-Bold.ttf") format("truetype"); }

:root {
    --azul: #1E50D2;
    --verde: #1DBF73;
    --texto: #1B2433;
    --texto-secundario: #5E6878;
    --fundo: #F4F6FA;
    --superficie: #FFFFFF;
    --borda: #E2E7EF;
    --erro: #D64545;
    --erro-suave: #FDEDED;
    --sucesso: #0E8A52;
    --sucesso-suave: #E8F7EF;
    --raio: 14px;
    --gradiente: linear-gradient(135deg, #173DA6 0%, #1E50D2 55%, #1E87A2 100%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1rem; line-height: 1.6; }
a { color: var(--azul); }
h1, h2 { line-height: 1.25; }

.largura { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.topo { background: var(--gradiente); color: #fff; padding: 20px 0 36px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca img { width: 38px; height: 38px; padding: 6px; border-radius: 11px; background: rgba(255, 255, 255, .18); }
.marca strong { display: block; font-family: "Montserrat", sans-serif; font-weight: 800; line-height: 1.1; }
.marca small { font-size: .8rem; opacity: .85; }
.topo h1 { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.9rem; letter-spacing: -.02em; margin: 32px 0 6px; }
.topo p { margin: 0; opacity: .88; }

main { padding: 28px 0 8px; }
main section { margin-bottom: 26px; }
main h2 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; }
main li { margin-bottom: 6px; }
.versao { color: var(--texto-secundario); font-size: .85rem; }

.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; margin-bottom: 16px; }
.cartoes { display: grid; gap: 12px; }
.cartoes a { display: block; text-decoration: none; color: inherit; }
.cartoes a strong { color: var(--azul); }
.cartoes a span { display: block; color: var(--texto-secundario); font-size: .92rem; }

details { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 18px; margin-bottom: 10px; }
summary { font-weight: 700; cursor: pointer; }
details p { margin: 10px 0 0; color: var(--texto-secundario); }

form label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo { margin-bottom: 16px; }
input[type="email"], input[type="password"] { width: 100%; font: inherit; padding: 11px 14px; border: 1px solid var(--borda); border-radius: 10px; background: #fff; color: var(--texto); }
input:focus { outline: 2px solid rgba(30, 80, 210, .35); border-color: var(--azul); }
.confirmacao { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.confirmacao input { margin-top: 5px; width: 18px; height: 18px; flex-shrink: 0; }
.erro-campo { color: var(--erro); font-size: .88rem; margin-top: 4px; }
.botao-perigo { font: inherit; font-weight: 700; color: #fff; background: var(--erro); border: 0; border-radius: 10px; padding: 12px 20px; cursor: pointer; }
.botao-perigo[disabled] { opacity: .6; cursor: wait; }
.aviso { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
.aviso-erro { background: var(--erro-suave); color: #8F2424; }
.aviso-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
[hidden] { display: none !important; }

.rodape { border-top: 1px solid var(--borda); padding: 20px 16px 36px; color: var(--texto-secundario); font-size: .9rem; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 8px; }