/* ============================================================
   Punto Paraguay — folha de estilo do site.
   Variáveis de design primeiro: cores e medidas definidas UMA vez
   e reusadas com var(--nome). Mudar a paleta = mudar aqui.
   ============================================================ */

/* Fontes locais (static/fonts/). São fontes VARIÁVEIS: um arquivo
   cobre a faixa toda de pesos (por isso font-weight com dois valores).
   font-display: swap = mostra o texto na fonte do sistema enquanto
   a nossa carrega, em vez de texto invisível. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/inter.260c81a4759b.woff2") format("woff2");
}

@font-face {
    font-family: "Sora";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/sora.fc575ebf6f7c.woff2") format("woff2");
}

:root {
    /* Paleta oficial do design system (imagem de 19/07/2026) */
    --vermelho: #d32f2f;
    --vermelho-escuro: #b02424;
    --azul: #0d47a1;
    --tinta: #17172e;          /* texto principal, quase-preto azulado */
    --cinza-texto: #55586a;    /* texto secundário */
    --cinza-borda: #e4e6ec;
    --fundo: #ffffff;
    --fundo-suave: #f5f7fa;    /* fundo de seções alternadas */
    --raio: 12px;              /* raio padrão dos cantos arredondados */
    --sombra: 0 2px 10px rgba(23, 23, 46, 0.07);
    /* Tipografia do design system: Sora nos títulos, Inter no texto. */
    --fonte-texto: "Inter", system-ui, sans-serif;
    --fonte-titulo: "Sora", var(--fonte-texto);
}

body {
    font-family: var(--fonte-texto);
    margin: 0;
    color: var(--tinta);
    background: var(--fundo);
}

h1, h2, h3 {
    font-family: var(--fonte-titulo);
}

/* Ícones Tabler (templates/icones/*.svg, via include): tamanho
   relativo ao texto ao redor; a cor vem de currentColor. Regra no
   topo de propósito — componentes abaixo podem sobrescrevê-la. */
svg.icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    flex-shrink: 0;
}

/* Único ícone com cor própria: o verde oficial do WhatsApp */
.icone-whatsapp {
    color: #25d366;
}

/* ------------------------------------------------------------
   Header em duas linhas, como no design:
   barra do topo (hambúrguer | logo centrado | idiomas) + nav.
   ------------------------------------------------------------ */
header {
    background: var(--fundo);
    box-shadow: var(--sombra);
    padding: 0.8rem 1.5rem;
}

/* Grid 1fr auto 1fr: as laterais têm a MESMA largura, então o logo
   fica no centro exato — mesmo quando o hambúrguer some no desktop. */
.barra-topo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.menu-hamburguer {
    grid-column: 1;
    justify-self: start;
    display: none;             /* só aparece no celular (media query) */
    background: none;
    border: none;
    color: var(--tinta);
    cursor: pointer;
    padding: 0.3rem;
}

.menu-hamburguer svg {
    width: 1.6rem;
    height: 1.6rem;
}

.logo {
    grid-column: 2;
}

.logo img {
    height: 40px;
    display: block;            /* remove o respiro fantasma sob imagens inline */
}

.barra-direita {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* Navegação de seções (Empresas | Eventos | Teléfonos útiles) */
.nav-secoes {
    display: flex;
    justify-content: center;
    gap: 1.8rem;
    margin-top: 0.7rem;
}

.nav-secoes a {
    color: var(--tinta);
    text-decoration: none;
    font-weight: 600;
    padding: 0.3rem 0;
}

.nav-secoes a:hover {
    color: var(--vermelho);
}

.nav-secoes a.secao-ativa {
    color: var(--vermelho);
    border-bottom: 2px solid var(--vermelho);
}

/* Seletor de idiomas: texto discreto, idioma ativo em destaque */
.idiomas {
    display: flex;
    gap: 0.7rem;
}

.idiomas button {
    background: none;
    border: none;
    color: var(--cinza-texto);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.1rem 0.2rem;
}

.idiomas button:hover {
    color: var(--vermelho);
}

.idiomas button.idioma-ativo {
    color: var(--vermelho);
    cursor: default;
}

/* Conta (login/logout) no cabeçalho — mesma linguagem discreta do
   seletor de idiomas, ao lado dele. */
.conta-topo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.conta-topo svg {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: text-bottom;
}

.conta-topo a,
.conta-usuario {
    color: var(--cinza-texto);
    text-decoration: none;
    font-weight: 600;
}

.conta-topo a:hover {
    color: var(--vermelho);
}

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Mensagens do django.contrib.messages (base.html) — a cor da barra
   lateral vem de message.tags (padrão do Django: "success", "info",
   "warning", "error"). Sem cor "verde" nas variáveis do site hoje;
   reaproveita --azul pra success/info e --vermelho pra warning/error
   em vez de inventar uma cor nova sem avisar. */
.mensajes {
    max-width: 60rem;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}

.mensaje {
    background: var(--fundo-suave);
    border-left: 4px solid var(--azul);
    border-radius: var(--raio);
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
}

.mensaje-warning,
.mensaje-error {
    border-left-color: var(--vermelho);
}

/* ------------------------------------------------------------
   Cartões (empresas, eventos, grupos de telefones)
   ------------------------------------------------------------ */
.cartao {
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    background: var(--fundo);
}

.cartao:hover {
    box-shadow: var(--sombra);
}

.cartao h3 {
    margin-top: 0;
}

.panfleto {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: var(--raio);
    margin-bottom: 0.8rem;
}

/* Panfleto de evento: ao contrário das fotos de Lugar/Cidade (onde
   cortar um pouco a borda não faz diferença), o panfleto tem texto e
   rosto até a borda — cover cortaria informação. contain + fundo
   neutro (letterbox) mostra o cartaz inteiro; cursor: zoom-in avisa
   que dá pra ampliar (ver static/js/galeria.js). */
.panfleto-evento {
    max-height: 420px;
    object-fit: contain;
    background: var(--fundo-suave);
    cursor: zoom-in;
}

.cartao h3 a {
    color: inherit;
    text-decoration: none;
}

/* Layout de duas colunas (empresas destaque): imagem grande, tipo
   ícone, ao lado dos dados. Empresas comuns não usam este modificador
   — só têm a coluna de dados, sem imagem nenhuma. */
.cartao-destaque {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cartao-destaque-imagem {
    display: block;
    width: 9rem;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--raio);
    flex-shrink: 0;
}

.cartao-destaque-dados {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .cartao-destaque {
        flex-direction: column;
    }

    .cartao-destaque-imagem {
        width: 100%;
        height: 10rem;
    }
}

/* Mesma ideia de .cartao-destaque, mas para a listagem de eventos:
   aqui todo evento com panfleto usa o layout de duas colunas (não só
   os "destaque" — Evento nem tem esse campo), miniatura à esquerda. */
.cartao-evento {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.cartao-evento-imagem {
    display: block;
    width: 9rem;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--raio);
    flex-shrink: 0;
}

.cartao-evento-dados {
    flex: 1;
    min-width: 0;
}

@media (max-width: 640px) {
    .cartao-evento {
        flex-direction: column;
    }

    .cartao-evento-imagem {
        width: 100%;
        height: 10rem;
    }
}

/* Mesma ideia de .cartao-destaque, na página de detalhe da empresa. */
.empresa-cabecalho-destaque {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.empresa-cabecalho-destaque .empresa-cabecalho-imagem {
    display: block;
    width: 9rem;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--raio);
    flex-shrink: 0;
}

.empresa-cabecalho-destaque .empresa-cabecalho-dados h1 {
    margin-top: 0;
}

@media (max-width: 640px) {
    .empresa-cabecalho-destaque {
        flex-direction: column;
    }

    .empresa-cabecalho-destaque .empresa-cabecalho-imagem {
        width: 100%;
        height: 12rem;
    }
}

#mapa {
    height: 320px;
    border-radius: var(--raio);
    margin-top: 1rem;
}

/* Galeria de fotos (detalhe de Lugar) */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
    margin-top: 1rem;
}

.galeria img {
    width: 100%;
    height: 9rem;
    object-fit: cover;
    border-radius: var(--raio);
}

/* Lightbox da galeria (static/js/galeria.js) */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(23, 23, 46, 0.92);
    align-items: center;
    justify-content: center;
}

.lightbox-aberta {
    display: flex;
}

.lightbox-imagem {
    max-width: 85vw;
    max-height: 85vh;
    border-radius: var(--raio);
    object-fit: contain;
}

.lightbox-fechar,
.lightbox-seta {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.lightbox-fechar:hover,
.lightbox-seta:hover {
    background: rgba(255, 255, 255, 0.3);
}

.lightbox-fechar {
    top: 1.2rem;
    right: 1.2rem;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.5rem;
}

.lightbox-seta {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
}

.lightbox-anterior {
    left: 1rem;
}

.lightbox-proxima {
    right: 1rem;
}

@media (max-width: 640px) {
    .lightbox-seta {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.6rem;
    }
}

/* Chips de categoria, como no design system */
.etiqueta {
    background: var(--fundo);
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    padding: 0.15rem 0.6rem;
    font-size: 0.85rem;
    color: var(--cinza-texto);
    display: inline-block;
}

.contato {
    font-size: 0.9rem;
    color: var(--cinza-texto);
}

/* Links dentro do bloco de contato (tel:, site) em azul da marca */
.contato a {
    color: var(--azul);
    font-weight: 500;
    text-decoration: none;
}

/* Link "voltar" das páginas de detalhe */
.voltar {
    color: var(--vermelho);
    text-decoration: none;
    font-weight: 500;
}

.voltar:hover {
    text-decoration: underline;
}

/* Link "Saber más" nos cards da listagem */
.saber-mas {
    color: var(--vermelho);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.saber-mas:hover {
    text-decoration: underline;
}


.quando {
    color: var(--vermelho);
    font-weight: 600;
    font-size: 0.95rem;
}

/* ------------------------------------------------------------
   Filtros de categoria (pílulas) e caixa de busca
   ------------------------------------------------------------ */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.filtros a {
    border: 1px solid var(--cinza-borda);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    text-decoration: none;
    color: var(--tinta);
    font-size: 0.9rem;
}

.filtros a:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.filtros a.filtro-ativo {
    background: var(--vermelho);
    border-color: var(--vermelho);
    color: #fff;
}

/* Paginação: mesma linguagem visual dos filtros (pílula + vermelho no hover) */
.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.paginacao a {
    border: 1px solid var(--cinza-borda);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    text-decoration: none;
    color: var(--tinta);
    font-size: 0.9rem;
}

.paginacao a:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.paginacao span {
    color: var(--cinza-texto);
    font-size: 0.9rem;
}

/* Busca: input arredondado + botão vermelho redondo, como no mockup */
.busca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.busca input {
    flex: 1;
    box-sizing: border-box;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 999px;
    font: inherit;
    box-shadow: var(--sombra);
}

.busca input:focus {
    outline: 2px solid var(--vermelho);
    border-color: transparent;
}

.botao-busca {
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vermelho);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.botao-busca:hover {
    background: var(--vermelho-escuro);
}

.botao-busca svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Formulários de conta (login, cadastro, salir — templates/account/) */
.formulario-conta {
    max-width: 24rem;
}

.formulario-conta p {
    margin-bottom: 1rem;
}

.formulario-conta label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.formulario-conta input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    font: inherit;
}

.formulario-conta input:focus {
    outline: 2px solid var(--vermelho);
    border-color: transparent;
}

.formulario-conta button {
    background: var(--vermelho);
    color: #fff;
    border: none;
    border-radius: var(--raio);
    padding: 0.6rem 1.4rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.formulario-conta button:hover {
    background: var(--vermelho-escuro);
}

.formulario-conta .errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 0.4rem;
    color: var(--vermelho-escuro);
    font-size: 0.85rem;
}

/* select/textarea/file: mesma caixa dos <input> de texto (só eles
   tinham regra até aqui — login/cadastro de conta não usa nenhum
   destes). textarea ganha altura mínima; o <select multiple> de
   categorias (CheckboxSelectMultiple, ver empresas/forms.py) sai como
   uma lista de checkboxes — tira o marcador padrão de <ul>/<li> e
   deixa a caixinha ao lado do texto, sem caixa própria (não é um
   campo único, cada opção já tem seu próprio <input>). */
.formulario-conta select,
.formulario-conta textarea,
.formulario-conta input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    font: inherit;
}

.formulario-conta textarea {
    min-height: 6rem;
    resize: vertical;
}

.formulario-conta select:focus,
.formulario-conta textarea:focus {
    outline: 2px solid var(--vermelho);
    border-color: transparent;
}

.formulario-conta ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.formulario-conta ul li {
    margin-bottom: 0.3rem;
}

.formulario-conta ul label {
    display: inline;
    font-weight: 400;
    margin-left: 0.3rem;
}

/* Este form tem mais campos que login/cadastro de conta (que reusam
   a mesma .formulario-conta) — 24rem fica apertado pro textarea e
   pra lista de categorias. */
.formulario-cadastro-empresa {
    max-width: 34rem;
}

/* Link dentro do form (ex.: "¿Ha olvidado tu contraseña?", texto de
   ajuda do próprio allauth no campo senha) — mesmo padrão de .voltar/
   .saber-mas, reaproveitado aqui como .enlace-conta pros links FORA
   do form (Regístrate, Volver a entrar...). */
.formulario-conta a,
.enlace-conta {
    color: var(--vermelho);
    text-decoration: none;
    font-weight: 500;
}

.formulario-conta a:hover,
.enlace-conta:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Homepage
   ------------------------------------------------------------ */
.hero {
    padding: 2.5rem 0 1.5rem;
    max-width: 38rem;         /* linhas curtas leem melhor */
}

.hero h1 {
    font-size: 2.3rem;
    line-height: 1.15;
    margin: 0 0 0.8rem;
}

.hero-subtitulo {
    color: var(--cinza-texto);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
}

.titulo-secao {
    font-size: 1.3rem;
    margin: 2.5rem 0 1rem;
}

/* Grade de atalhos por categoria: ícone em cartão + rótulo abaixo */
.grade-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.grade-categorias a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--tinta);
    font-size: 0.9rem;
    font-weight: 500;
    width: 5.5rem;
    text-align: center;
}

.grade-categorias .icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--fundo);
    color: var(--azul);       /* o SVG herda via stroke="currentColor" */
}

.grade-categorias .icone svg {
    width: 1.8rem;
    height: 1.8rem;
}

.grade-categorias a:hover .icone {
    border-color: var(--azul);
    box-shadow: var(--sombra);
}

/* Página "Categorías" (categoria de EMPRESA, ex.: Restaurantes) —
   grade diferente da .grade-categorias acima (que é a nav de seções
   do site: Empresas/Eventos/Teléfonos). Card horizontal: ícone (se a
   categoria tiver um cadastrado) + nome + seta, como no mockup. */
.grade-categorias-negocio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.grade-categorias-negocio a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    background: var(--fundo);
    text-decoration: none;
    color: var(--tinta);
    font-weight: 500;
}

.grade-categorias-negocio a:hover {
    border-color: var(--azul);
    box-shadow: var(--sombra);
}

.grade-categorias-negocio .icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    color: var(--vermelho);
}

.grade-categorias-negocio .icone svg {
    width: 1.8rem;
    height: 1.8rem;
}

.grade-categorias-negocio .nome-categoria {
    flex: 1;
}

.grade-categorias-negocio .seta {
    color: var(--cinza-texto);
}

/* Cartões de destaque: foto de fundo com degradê escuro por cima
   (texto continua legível em qualquer foto), texto branco ancorado
   embaixo, como no design. */
.destaques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.destaque {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.15rem;
    min-height: 11rem;
    padding: 1rem 1.2rem;
    border-radius: var(--raio);
    text-decoration: none;
    color: #fff;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
}

.destaque strong {
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
}

.destaque span {
    font-size: 0.85rem;
    opacity: 0.85;
}

.destaque:hover {
    box-shadow: var(--sombra);
    filter: brightness(1.08);
}

/* background-color é o "antes da foto chegar"/imagem quebrada: o
   degradê some.
   O degradê garante contraste pro texto branco mesmo em fotos claras. */
.destaque-empresas {
    background-color: #3a3f52;
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 40%, rgba(23, 23, 46, 0.9) 100%),
        url("../img/destaque-empresas.3304657c1418.jpg");
}

.destaque-eventos {
    background-color: #5b2340;
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 40%, rgba(23, 23, 46, 0.9) 100%),
        url("../img/destaque-eventos.5ceef9d76c7f.jpg");
}

.destaque-lugares {
    background-color: #1e4d3a;
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 40%, rgba(23, 23, 46, 0.9) 100%),
        url("../img/destaque-lugares.30a2705b211e.jpg");
}

.destaque-telefones {
    background-color: #1c3e73;
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 40%, rgba(23, 23, 46, 0.9) 100%),
        url("../img/destaque-telefones.a24d88a3218b.jpg");
}

/* ------------------------------------------------------------
   "Por que usar" (4 vantagens com ícone)
   ------------------------------------------------------------ */
.vantagens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem;
}

.vantagem {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

.icone-vantagem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--fundo-suave);
    color: var(--azul);
    margin-bottom: 0.3rem;
}

.icone-vantagem svg {
    width: 2.2rem;
    height: 2.2rem;
}

.vantagem strong {
    font-family: var(--fonte-titulo);
}

.vantagem span {
    color: var(--cinza-texto);
    font-size: 0.9rem;
}

/* ------------------------------------------------------------
   Rodapé
   ------------------------------------------------------------ */
.rodape {
    margin-top: 3rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--cinza-borda);
    background: var(--fundo-suave);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.rodape-marca {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.rodape-marca img {
    height: 1.8rem;
}

.rodape-marca p {
    color: var(--cinza-texto);
    font-size: 0.85rem;
    margin: 0;
}

.rodape-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.rodape-links a {
    color: var(--cinza-texto);
    text-decoration: none;
    font-size: 0.9rem;
}

.rodape-links a:hover {
    color: var(--azul);
}

.rodape-copyright {
    color: var(--cinza-texto);
    font-size: 0.8rem;
    margin: 0;
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--cinza-borda);
    padding-top: 1rem;
}

/* ------------------------------------------------------------
   Celular (até 640px): hambúrguer entra, nav vira menu vertical
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    main {
        padding: 1rem;
    }

    .menu-hamburguer {
        display: flex;
    }

    .logo img {
        height: 32px;
    }

    /* A nav some; o hambúrguer põe .menu-aberto no header e a revela.
       Ela continua no HTML sempre — display:none esconde só do olho
       (e o conteúdo segue lá para buscadores e para o teste). */
    .nav-secoes {
        display: none;
    }

    header.menu-aberto .nav-secoes {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.9rem;
        padding: 0.9rem 0 0.3rem;
    }

    .hero {
        padding-top: 1.2rem;
    }

    .hero h1 {
        font-size: 1.7rem;
    }

    .grade-categorias {
        gap: 1rem;
    }

    .grade-categorias .icone {
        width: 3.4rem;
        height: 3.4rem;
    }
}