/* Topo compartilhado por todas as páginas do site: marca, menu "Funções" e botão Entrar / Minha conta. Só modo claro. */
:root { --fundo: #faf7ef; --cartao: #ffffff; --texto: #0c1c16; --suave: #54655d; --borda: #cbd6c9; --azul: #007948; --botao: #006a43; --ok: #007948; --papel-2: #edf6ef; --menta: #a9e8c6; --faixa: #0c1c16; --faixa-texto: #faf7ef; --faixa-suave: #b9c8bf; --sombra: #0c1c1626; --branco: #ffffff; --contorno: #005f3a; --aviso-fundo: #fff4d6; --aviso-borda: #e0b100; --aviso-texto: #5a3e00; }
:root { --fonte-titulo: "Schibsted Grotesk", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; --fonte-texto: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif; --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Botões: moldados, verde no principal, claro no secundário. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 0; border-radius: 10px; font: 500 17px var(--fonte-texto); text-decoration: none; cursor: pointer; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.btn-primario { background: var(--botao); color: var(--branco); box-shadow: 0 0 0 1px var(--contorno), 0 3px 0 var(--contorno); }
.btn-secundario { background: var(--cartao); color: var(--texto); box-shadow: 0 0 0 1px var(--borda), 0 3px 0 var(--borda); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--contorno); }
.btn-secundario:active { box-shadow: 0 0 0 1px var(--borda); }

/* Topo */
.nav, .nav * { box-sizing: border-box; }
.nav [hidden] { display: none !important; }
.nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--borda); background: var(--fundo); font: 17px/1.55 var(--fonte-texto); color: var(--texto); }
.nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); min-height: 68px; gap: 16px; }
.nav .marca { font: 700 21px var(--fonte-titulo); letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.nav .marca { white-space: nowrap; flex-shrink: 0; }
.marca { display: inline-flex; align-items: center; gap: 10px; }
.marca img { flex-shrink: 0; display: block; }
.nav .conta-email { min-width: 0; flex-shrink: 1; font-size: 14px; color: var(--suave); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { display: flex; align-items: center; gap: 8px; margin-right: auto; margin-left: 24px; }
.menu a { color: var(--texto); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.menu a:hover { background: var(--papel-2); }
.menu a[aria-current="page"] { background: var(--papel-2); font-weight: 500; }
.nav a:focus-visible, .nav summary:focus-visible { outline: 3px solid var(--contorno); outline-offset: 3px; }
/* Menu "Funções": lista que abre por cima da página (details/summary, funciona até sem JavaScript). */
.funcoes { position: relative; }
.funcoes summary { list-style: none; cursor: pointer; font-size: 15px; padding: 8px 12px; border-radius: 8px; display: flex; align-items: center; gap: 6px; }
.funcoes summary::-webkit-details-marker { display: none; }
.funcoes summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.funcoes[open] summary::after { transform: translateY(2px) rotate(225deg); }
.funcoes summary:hover, .funcoes[open] summary, .funcoes.atual summary { background: var(--papel-2); }
.funcoes.atual summary { font-weight: 500; }
.funcoes-lista { position: absolute; top: calc(100% + 8px); left: 0; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 8px; list-style: none; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 24px 48px -20px var(--sombra); }
.funcoes-lista a { display: block; padding: 10px 12px; white-space: normal; color: var(--texto); text-decoration: none; border-radius: 8px; font-size: 15px; }
.funcoes-lista a:hover { background: var(--papel-2); }
.funcoes-lista b { display: block; font-weight: 500; }
.funcoes-lista span { display: block; font-size: 14px; color: var(--suave); }

/* "Funções" na abertura: o summary é o botão branco .btn-secundario (altura, padding e fonte do .btn), com a mesma seta; a lista abre logo abaixo, à esquerda. */
.funcoes-abertura summary.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 10px; font: 500 17px var(--fonte-texto); cursor: pointer; list-style: none; }
.funcoes-abertura summary.btn::-webkit-details-marker { display: none; }
.funcoes-abertura summary.btn:hover, .funcoes-abertura[open] summary.btn { background: var(--cartao); }
.funcoes-abertura summary:focus-visible { outline: 3px solid var(--contorno); outline-offset: 3px; }
.funcoes-abertura .funcoes-lista { z-index: 5; }

@media (max-width: 60rem) {
  .nav .container { flex-wrap: wrap; padding-block: 8px; }
  .nav .conta-email { max-width: 16ch; }
  .menu { order: 3; width: 100%; margin: 0; flex-wrap: wrap; gap: 2px 4px; position: relative; } /* no celular o menu vai para a linha de baixo e quebra em linhas; sem overflow, para não cortar o dropdown */
  .nav .funcoes { position: static; } /* a lista se ancora no menu inteiro, não no item, e cabe na tela */
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }