:root {
    --cor-primaria: #1d5c8a;
    --cor-primaria-escura: #123f5f;
    --cor-primaria-clara: #eaf3fa;
    --cor-acento: #c47d1f;
    --cor-acento-escura: #9c611a;
    --cor-texto: #1a2027;
    --cor-texto-suave: #5a6472;
    --cor-fundo: #ffffff;
    --cor-fundo-alt: #f4f7fa;
    --cor-borda: #d7dee6;
    --cor-erro: #b3261e;
    --cor-sucesso: #1b7a3d;
    --fonte-titulo: Georgia, "Times New Roman", serif;
    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-3: 1rem;
    --espaco-4: 1.5rem;
    --espaco-5: 2rem;
    --raio: 8px;
    --sombra-cartao: 0 1px 3px rgba(26, 32, 39, 0.08), 0 1px 2px rgba(26, 32, 39, 0.06);
}

* {
    box-sizing: border-box;
}

/* O atributo HTML `hidden` normalmente vira "display: none" via UA
   stylesheet, mas qualquer regra de autor que defina `display`
   explicitamente (como button/.botao abaixo) tem prioridade e
   silenciosamente reativa o elemento -- garantir aqui que `hidden`
   sempre vence, não importa o componente. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo-alt);
    line-height: 1.5;
}

.pular-conteudo {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--cor-primaria);
    color: #fff;
    padding: var(--espaco-2) var(--espaco-3);
    z-index: 100;
}
.pular-conteudo:focus {
    left: var(--espaco-2);
    top: var(--espaco-2);
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
}
a:hover {
    color: var(--cor-primaria-escura);
    text-decoration: underline;
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 400;
    text-wrap: balance;
}
/* h1 recebe foco via tabindex="-1" a cada navegação (js/router.js,
   moverFoco) só pra leitor de tela anunciar a troca de página -- não é
   um alvo de Tab de verdade, então o anel de foco padrão do navegador
   (grosso, chamativo) não deve aparecer pra quem usa mouse/teclado. */
h1:focus {
    outline: none;
}

.cabecalho {
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
    padding: var(--espaco-3);
}
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2) var(--espaco-4);
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}
.nav-marca {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: 1.4rem;
    margin-right: auto;
    text-decoration: none;
    color: var(--cor-primaria);
}
.nav a,
.nav button {
    font: inherit;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--espaco-4) var(--espaco-3);
    min-height: 60vh;
}
main:focus {
    outline: none;
}

.rodape {
    background: var(--cor-fundo);
    border-top: 1px solid var(--cor-borda);
    padding: var(--espaco-3);
    display: flex;
    gap: var(--espaco-3);
    justify-content: center;
}

/* Sem isso, um formulário curto (login, cadastro) espalha os campos
   pela largura inteira do main (960px) -- estreita pro tamanho real do
   conteúdo. Formulários com grade de filtros/checkboxes precisam de
   mais espaço pras colunas, então ganham exceção. */
form {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
form:has(.grade-filtros) {
    max-width: none;
}
form:has(.grade-checkboxes) {
    max-width: 640px;
}

label {
    display: block;
    font-weight: 600;
    margin-top: var(--espaco-3);
}
input,
select,
textarea {
    width: 100%;
    padding: var(--espaco-2);
    border: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
    border-radius: var(--raio);
    font: inherit;
    margin-top: var(--espaco-1);
}
textarea {
    min-height: 6rem;
    resize: vertical;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
a:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

button,
.botao {
    display: inline-block;
    background: var(--cor-primaria);
    color: #fff;
    border: none;
    padding: var(--espaco-2) var(--espaco-4);
    border-radius: var(--raio);
    cursor: pointer;
    font: inherit;
    text-decoration: none;
    margin-top: var(--espaco-3);
}
button:hover,
.botao:hover {
    background: var(--cor-primaria-escura);
}
button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}
.botao-secundario {
    background: transparent;
    color: var(--cor-primaria);
    border: 1px solid var(--cor-primaria);
}

.input-senha-wrapper {
    position: relative;
}
.input-senha-wrapper input {
    padding-right: 2.25rem;
}
.botao-toggle-senha {
    position: absolute;
    right: var(--espaco-1);
    top: calc(50% + var(--espaco-1));
    transform: translateY(-50%);
    background: none;
    border: none;
    margin: 0;
    padding: var(--espaco-1);
    cursor: pointer;
    display: flex;
    color: var(--cor-texto-suave);
}
.botao-toggle-senha:hover {
    background: none;
    color: var(--cor-texto);
}
.botao-toggle-senha svg {
    display: block;
}

.erro {
    color: var(--cor-erro);
    font-weight: 600;
}
.sucesso {
    color: var(--cor-sucesso);
    font-weight: 600;
}

.cartao {
    background: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-cartao);
    padding: var(--espaco-4);
    margin-bottom: var(--espaco-3);
}

fieldset {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    margin-top: var(--espaco-3);
    padding: var(--espaco-3);
}
legend {
    font-weight: 600;
    padding: 0 var(--espaco-1);
}

.opcoes-papel,
.opcao-checkbox {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    font-weight: normal;
    margin-top: var(--espaco-2);
}
.opcao-checkbox input,
.opcoes-papel input {
    width: auto;
    margin: 0;
}

.busca-ajuda {
    color: var(--cor-texto-suave);
    max-width: 640px;
    margin-bottom: var(--espaco-3);
}

.grade-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--espaco-3);
    align-items: end;
}
.grade-filtros-acao {
    grid-column: 1 / -1;
}

.grade-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--espaco-2);
    margin-top: var(--espaco-2);
}

.lista-resultados,
.lista-comentarios {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
}

.botao-reacao {
    display: inline-flex;
    align-items: center;
    gap: var(--espaco-1);
    background: var(--cor-fundo);
    color: var(--cor-texto-suave);
    border: 1px solid var(--cor-borda);
    border-radius: 999px;
    padding: var(--espaco-1) var(--espaco-3);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    margin: var(--espaco-2) var(--espaco-2) 0 0;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.botao-reacao:hover {
    background: var(--cor-fundo-alt);
}
.botao-reacao:active {
    transform: scale(0.92);
}
.botao-reacao svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: fill 0.12s ease;
}
.botao-reacao:active svg {
    fill: currentColor;
}
.botao-reacao[data-tipo="gostei"] {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria-clara);
}
.botao-reacao[data-tipo="gostei"]:hover {
    background: var(--cor-primaria-clara);
}
.botao-reacao[data-tipo="amei"] {
    color: var(--cor-acento-escura);
    border-color: var(--cor-acento);
}
.botao-reacao[data-tipo="amei"]:hover {
    background: color-mix(in srgb, var(--cor-acento) 12%, var(--cor-fundo));
}
.botao-reacao-inverso svg {
    transform: rotate(180deg);
}

.selo-confirmado {
    color: var(--cor-sucesso);
    font-weight: 600;
}

.acoes-home {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-3);
    margin-top: var(--espaco-4);
}

img, video {
    max-width: 100%;
    height: auto;
}

.hero {
    text-align: center;
    padding: var(--espaco-5) 0 var(--espaco-4);
}
.hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cor-acento-escura);
    margin: 0 0 var(--espaco-2);
}
.hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    line-height: 1.2;
    max-width: 640px;
    margin: 0 auto var(--espaco-3);
}
.hero-subtitulo {
    font-size: 1.1rem;
    color: var(--cor-texto-suave);
    max-width: 560px;
    margin: 0 auto;
}
.hero .acoes-home {
    justify-content: center;
}

#perfil-contato {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espaco-1) var(--espaco-3);
}
#perfil-contato dt {
    font-weight: 600;
}
#perfil-contato dd {
    margin: 0;
}

@media (max-width: 640px) {
    main {
        padding: var(--espaco-3);
    }
    .hero {
        padding: var(--espaco-4) 0 var(--espaco-3);
    }
    .hero .acoes-home {
        flex-direction: column;
        align-items: stretch;
    }
    .hero .botao {
        text-align: center;
    }
    form {
        max-width: none;
    }
    #perfil-contato {
        grid-template-columns: 1fr;
        gap: 0 0;
    }
    #perfil-contato dd {
        margin-bottom: var(--espaco-2);
    }
}