/* ============================================================
   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;
    align-items: center;
    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);
}

/* "Más": item com submenu, aberto por CSS puro (:hover/:focus-within,
   sem JS) — mesma ideia do hambúrguer só que sem precisar de toggle,
   já que é só mostrar/esconder, sem estado pra lembrar entre cliques. */
.nav-mais {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-mais-gatilho {
    color: var(--tinta);
    font-weight: 600;
    cursor: pointer;
    /* Mesmo padding vertical dos <a> vizinhos (.nav-secoes a) — sem
       isso a caixa do "▾" fica com altura diferente (o glifo tem
       métricas de linha maiores que texto normal) e o item some do
       alinhamento da barra. */
    padding: 0.3rem 0;
}

.nav-mais:hover .nav-mais-gatilho,
.nav-mais:focus-within .nav-mais-gatilho {
    color: var(--vermelho);
}

.nav-mais-menu {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    position: absolute;
    /* Sem margin-top: um respiro aqui criaria uma faixa "morta" entre
       o gatilho e o menu — ao descer o mouse em linha reta, o
       ponteiro sai da área de :hover nesse vão e o menu fecha antes
       de chegar. Encostado (top: 100%), o hover nunca é perdido; o
       padding interno já dá o respiro visual. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fundo);
    box-shadow: var(--sombra);
    border-radius: var(--raio);
    padding: 0.5rem;
    padding-top: 0.8rem;
    min-width: 13rem;
    z-index: 10;
}

.nav-mais:hover .nav-mais-menu,
.nav-mais:focus-within .nav-mais-menu {
    display: flex;
}

.nav-mais-menu a {
    color: var(--tinta);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
    border-radius: calc(var(--raio) - 4px);
    white-space: nowrap;
}

.nav-mais-menu a:hover {
    background: var(--fundo-suave);
    color: var(--vermelho);
}

/* Seletor de idiomas: bandeiras lado a lado no desktop. No celular
   (media query mais abaixo) vira dropdown — ver .idiomas-gatilho. */
.idiomas-grupo {
    position: relative;
    display: flex;
    align-items: center;
}

.idiomas-gatilho {
    display: none;
}

.idiomas {
    display: flex;
    gap: 0.7rem;
}

.idiomas button {
    display: flex;
    align-items: center;
    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 svg {
    width: 1.3em;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

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

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

@media (max-width: 640px) {
    /* Gatilho: só a bandeira do idioma atual — abre o menu completo
       ao tocar/focar (mesma técnica CSS-only do ".nav-mais", sem JS:
       :hover para mouse, :focus-within para toque/teclado, já que
       tocar um elemento focável no celular dispara :focus). */
    .idiomas-gatilho {
        display: flex;
        cursor: pointer;
    }

    .idiomas-gatilho svg {
        width: 1.3em;
        height: auto;
        border-radius: 2px;
    }

    .idiomas {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        position: absolute;
        top: 100%;
        /* Centralizado embaixo do gatilho (mesma técnica do
           ".nav-mais-menu") — "right: 0" alinhava pela borda da
           caixa, não pelo ícone dentro dela, e ficava puxado pra
           esquerda em vez de embaixo da bandeira. */
        left: 50%;
        transform: translateX(-50%);
        background: var(--fundo);
        box-shadow: var(--sombra);
        border-radius: var(--raio);
        padding: 0.5rem;
        z-index: 10;
    }

    .idiomas-grupo:hover .idiomas,
    .idiomas-grupo:focus-within .idiomas {
        display: flex;
    }
}

/* 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);
}

@media (max-width: 640px) {
    /* Só o ícone no celular — junto com hambúrguer, logo e as 3
       bandeiras de idioma, "Entrar" por extenso não cabia bem.
       aria-label no <a> (ver base.html) mantém o nome acessível. */
    .conta-entrar-texto {
        display: none;
    }
}

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;
}

.ver-google-maps {
    margin-top: 0.5rem;
    text-align: right;
}

/* Mesmo estilo de link de .contato a — azul da marca, sem sublinhado —
   mas menor: é um link secundário debaixo do mapa, não texto de contato. */
.ver-google-maps a {
    color: var(--azul);
    font-weight: 500;
    font-size: 0.8rem;
    text-decoration: none;
}

.ver-google-maps a:hover {
    text-decoration: underline;
}

/* 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;
}

/* Mesma linha do "voltar" nas páginas de detalhe: link à esquerda,
   balão de compartilhar à direita (wrap no celular, se precisar). */
.cabecalho-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 1em 0;
}

.compartilhar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cinza-texto);
    font-weight: 500;
}

.compartilhar a {
    display: inline-flex;
    color: var(--vermelho);
}

.compartilhar a:hover {
    color: var(--cinza-texto);
}

/* Maiores que os ícones inline de texto (svg.icon) — aqui são o
   próprio conteúdo do botão, não um acompanhamento de texto. */
.compartilhar svg {
    width: 1.6em;
    height: 1.6em;
}

/* 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:not([type="checkbox"]):not([type="radio"]) {
    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;
}

/* Texto de ajuda dos campos (ex.: regras de senha do Django) só no
   login/cadastro — não é erro nem instrução principal, então fica
   menor e discreto. Escopado em ".formulario-acesso" (não
   ".formulario-conta" genérico) pra não encolher a lista de checkbox
   de categorias que outros formulários (cadastrar/editar empresa)
   também renderizam com a mesma classe base. O <ul>/<li> vem dentro de
   um <span class="helptext"> gerado pelo Django, mas o navegador fecha
   o <p> ao encontrar o <ul> (conteúdo de bloco não pode ficar dentro
   de <p>) — na árvore renderizada o <ul> sai como irmão do <p>, ainda
   dentro do <form>, só não mais filho do .helptext. */
.formulario-acesso ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.8rem;
    color: var(--cinza-texto);
    font-size: 0.8rem;
}

.formulario-acesso ul li {
    margin-bottom: 0.15rem;
}

/* 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,
.formulario-cadastro-evento {
    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;
}

/* Atalhos no topo de "Mi cuenta" (contas/painel.html) — Cuentas
   conectadas, Cambiar contraseña, Salir. Reaproveita .enlace-conta
   pra cor/hover, só adiciona o layout em linha. */
.menu-conta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin-bottom: 1.5rem;
}

/* Dentro de um .cartao (empresa/evento no painel): margem menor (o
   .cartao já tem seu próprio respiro) + separador visual entre os
   links — sem ele, "Editar datos"/"Gestionar catálogo" ficavam
   colados, parecendo um texto só (relatado 27/08/2026). gap: 0 aqui
   porque o espaçamento vem do padding-left do separador abaixo, não
   dá pra somar os dois sem ficar espaçado demais. */
.menu-conta-cartao {
    gap: 0.4rem 0;
    margin-top: 0.8rem;
    margin-bottom: 0;
}

.menu-conta-cartao a + a {
    position: relative;
    padding-left: 1.2rem;
}

.menu-conta-cartao a + a::before {
    content: "·";
    position: absolute;
    left: 0.5rem;
    color: var(--cinza-borda);
}

/* Honeypot do formulário de contacto (portal/forms.py) — fora da tela
   pra uma pessoa de verdade nunca ver nem preencher (display:none
   seria ignorado por alguns bots, position:absolute é mais confiável). */
.campo-armadilha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Botão "Continuar con Google" (login/cadastro social, allauth) —
   mesma largura de .formulario-conta, mas outline branco (não é o CTA
   principal do vermelho da marca) com o "G" do Google embutido como
   SVG (sem CDN). */
.botao-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    max-width: 24rem;
    box-sizing: border-box;
    background: #fff;
    color: var(--tinta);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    text-decoration: none;
}

.botao-google:hover {
    background: var(--fundo-suave);
}

.botao-google svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.separador-conta {
    max-width: 24rem;
    text-align: center;
    color: var(--cinza-texto);
    font-size: 0.85rem;
    margin: 1rem 0;
}

/* ------------------------------------------------------------
   Homepage
   ------------------------------------------------------------ */
.hero {
    padding: 2.5rem 0 1.5rem;
}

.hero-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.hero-texto {
    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;
}

/* Mapa só em telas largas o bastante pra caber ao lado do texto sem
   espremer a busca — abaixo disso, o hero volta a ser só a coluna de
   texto (era o layout único que existia antes deste mapa). */
.hero-mapa {
    display: none;
}

@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: 1.1fr 1fr;
    }

    .hero-mapa {
        display: block;
        position: relative;
        /* Menor que a coluna inteira: o mapa é bem mais alto que o
           texto ao lado, sobrar largura de propósito encolhe ele (e
           os pinos junto, são % do próprio .hero-mapa) sem precisar
           recalcular posição de nada. margin-left: auto encosta na
           direita, alinhado com a borda da busca. */
        max-width: 85%;
        margin-left: auto;
    }
}

.hero-mapa img {
    width: 100%;
    height: auto;
    display: block;
    /* Sombra suave por baixo do mapa: reforça a leitura de "recortado,
       flutuando" sem precisar desenhar relevo dentro do próprio SVG. */
    filter: drop-shadow(0 16px 24px rgba(23, 23, 46, 0.12));
}

.mapa-pin {
    position: absolute;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--azul);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(23, 23, 46, 0.3);
    /* Centraliza o pino no ponto exato (left/top vêm inline, por
       cidade) em vez do canto superior esquerdo dele. */
    transform: translate(-50%, -50%);
}

.mapa-pin-ativo {
    width: 1.1rem;
    height: 1.1rem;
    background: var(--vermelho);
}

/* Anel pulsando: só a cidade ativa hoje (Encarnación) ganha esse
   destaque — Asunción/Ciudad del Este são só uma prévia de cobertura
   futura, sem chamar tanta atenção. */
.mapa-pin-ativo::after {
    content: "";
    position: absolute;
    inset: -0.55rem;
    border: 2px solid var(--vermelho);
    border-radius: 50%;
    opacity: 0.6;
    animation: pulso-mapa-pin 2s ease-out infinite;
}

@keyframes pulso-mapa-pin {
    from {
        transform: scale(0.6);
        opacity: 0.6;
    }
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mapa-pin-ativo::after {
        animation: none;
    }
}

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

/* Texto de apoio entre o título e o conteúdo de uma seção — hoje só
   "Qué hacer en la ciudad de Encarnación?" usa, mas o nome é genérico
   de propósito pra outras seções reaproveitarem sem inventar outra
   classe. margin-top: 2.5rem é o mesmo espaçamento que ".titulo-secao"
   dá à seção quando ELE é o primeiro elemento — aqui cobre o caso de
   ".subtitulo-secao" vir sozinho, sem título, como primeiro elemento
   da própria seção (ver a regra logo abaixo pro caso com título). */
.subtitulo-secao {
    color: var(--cinza-texto);
    font-size: 0.95rem;
    margin: 2.5rem 0 1.3rem;
}

/* Quando vem logo depois de ".titulo-secao" (par título + subtítulo
   na mesma seção): puxa pra mais perto dele — que já tem
   margin-bottom: 1rem — em vez de repetir o espaçamento de seção
   inteiro (bug real, 26/08/2026: sem este seletor mais específico, o
   margin-top negativo valia SEMPRE, e um ".subtitulo-secao" que virou
   o primeiro elemento da própria seção — sem título acima — ficava
   colado/sobreposto na seção anterior). */
.titulo-secao + .subtitulo-secao {
    margin-top: -0.6rem;
}

/* Carrossel de destaques: slides empilhados (position: absolute, todos
   ocupando o mesmo espaço) — trocar de slide é só alternar a opacidade
   via ".is-ativo", então a troca já vem com crossfade de graça, sem
   animar largura/transform. Mesmo tratamento de legibilidade do
   ".destaque" (degradê escuro + texto branco por cima da foto). */
.carrossel {
    position: relative;
    border-radius: var(--raio);
    overflow: hidden;
}

.carrossel-trilha {
    position: relative;
    height: 20rem;
}

.carrossel-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    text-decoration: none; /* agora é <a>: sem sublinhado herdado nos filhos */
    background-color: #3a3f52;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 45%, rgba(23, 23, 46, 0.85) 100%),
        var(--carrossel-imagem);
    opacity: 0;
    /* Sem isto, um slide invisível (opacity: 0) continua recebendo
       clique/hover — como todos ocupam o mesmo espaço (position:
       absolute) e não há z-index, o ÚLTIMO do HTML fica por cima na
       pilha e rouba o link de todos os outros, mesmo escondido. */
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.carrossel-slide.is-ativo {
    opacity: 1;
    pointer-events: auto;
}

.carrossel-conteudo {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.5rem;
    color: #fff;
}

.carrossel-etiqueta {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vermelho);
    background: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    width: fit-content;
    margin-bottom: 0.3rem;
}

.carrossel-conteudo strong {
    font-family: var(--fonte-titulo);
    font-size: 1.3rem;
}

.carrossel-conteudo span:last-child {
    font-size: 0.9rem;
    opacity: 0.9;
}

.carrossel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--tinta);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.carrossel-seta:hover {
    background: #fff;
}

.carrossel-seta-anterior {
    left: 0.8rem;
}

.carrossel-seta-proxima {
    right: 0.8rem;
}

.carrossel-pontos {
    position: absolute;
    bottom: 0.9rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.carrossel-ponto {
    width: 0.55rem;
    height: 0.55rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
}

.carrossel-ponto.is-ativo {
    background: #fff;
}

/* Variante "Qué hacer en la ciudad" do mesmo carrossel (JS/estrutura
   idênticos — só troca o que tem dentro de cada slide: em vez de UMA
   imagem de fundo com link, um grid de cartões de empresa). Reseta o
   que ".carrossel-slide" assume por padrão (imagem de fundo, altura
   fixa) pro conteúdo mandar no tamanho. */
.carrossel-trilha-capa {
    height: auto;
}

.carrossel-slide-capa {
    position: static;
    display: grid;
    /* --capa-colunas (inline, por slide — ver template): o último
       slide pode ter menos que o padrão de 4, e "repeat(4, 1fr)" fixo
       reservaria uma coluna vazia, jogando a seta "próxima" (colada
       na borda direita) longe do último cartão de verdade. */
    grid-template-columns: repeat(var(--capa-colunas, 4), 1fr);
    /* Explícito (é o default do grid, mas depender de default deixou
       passar o bug de cards desalinhados — ver .capa-cartao-dados): força
       todo cartão da fileira a ocupar a MESMA altura, a da linha inteira,
       não só a altura do próprio conteúdo. */
    align-items: stretch;
    gap: 1rem;
    background-image: none;
    background-color: transparent;
    opacity: 1;
    pointer-events: auto;
}

.carrossel-slide-capa:not(.is-ativo) {
    /* Sem "position: absolute" aqui (diferente do ".carrossel-slide"
       base): os slides ocupariam a mesma linha e cada um alargaria a
       trilha. "display: none" tira da árvore de layout de vez —
       simples porque este carrossel não faz crossfade, só troca
       (JS já cuida da transição de opacidade do ".carrossel-slide"
       base; aqui vale o corte seco). */
    display: none;
}

.capa-cartao {
    display: flex;
    flex-direction: column;
    border-radius: var(--raio);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    text-decoration: none;
    color: inherit;
}

.capa-cartao-imagem {
    height: 9rem;
    background-color: var(--fundo-suave);
    background-size: cover;
    background-position: center;
}

.capa-cartao-dados {
    display: flex;
    flex-direction: column;
    /* flex: 1 consome a altura que sobrou depois do "stretch" do card
       inteiro (a imagem tem altura fixa, 9rem) — sem isto, a altura
       extra ficaria como vão vazio no fim do card, sem empurrar nada. */
    flex: 1;
    gap: 0.2rem;
    padding: 0.9rem;
}

.capa-cartao-dados strong {
    font-family: var(--fonte-titulo);
    font-size: 1rem;
}

.capa-cartao-dados span {
    font-size: 0.85rem;
    color: var(--cinza-texto);
}

.capa-cartao-cidade {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /* Ancora no rodapé do card, alinhado com os vizinhos — sem isto,
       um nome de 2 linhas empurraria a cidade mais pra baixo que num
       card com nome de 1 linha só, mesmo com os cards já com a mesma
       altura (o vão sobraria embaixo da cidade, não acima dela). */
    margin-top: auto;
}

.capa-cartao-cidade svg {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* Sem setas nesta seção (removidas do template, de propósito) — só
   os pontos abaixo navegam. Pontos fora da imagem (embaixo do grid,
   no fluxo normal) — o ".carrossel-pontos" base assume um fundo
   escuro (fica flutuando por cima da imagem, em branco); aqui o
   fundo é claro, então a cor também inverte. */
.carrossel-capa .carrossel-pontos {
    position: static;
    margin-top: 0.9rem;
}

.carrossel-capa .carrossel-ponto {
    background: var(--cinza-borda);
}

.carrossel-capa .carrossel-ponto.is-ativo {
    background: var(--vermelho);
}

@media (max-width: 640px) {
    .carrossel-slide-capa {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 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");
}

/* ------------------------------------------------------------
   "Lugares increíbles" (mosaico assimétrico) — de propósito bem
   diferente dos outros dois padrões da home (carrossel de banner
   único com setas/pontos, e grade fixa de 4 cards com só pontos):
   aqui é ESTÁTICO, sem navegação nenhuma. 1 card grande (2 linhas de
   altura) + os demais pequenos ao lado, no estilo "bento grid". Com
   menos de 4 lugares, sobra espaço vazio no grid — faz parte do
   visual (bento), não é bug.
   ------------------------------------------------------------ */
.mosaico-lugares {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: repeat(2, 10rem);
    gap: 1rem;
}

.mosaico-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 1rem;
    border-radius: var(--raio);
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    background-color: #3a3f52;
    background-size: cover;
    background-position: center;
    /* var(--mosaico-imagem, none): sem imagem cadastrada, cai no
       background-color acima (mesma ideia de .carrossel-slide). */
    background-image: linear-gradient(180deg, rgba(23, 23, 46, 0) 45%, rgba(23, 23, 46, 0.85) 100%),
        var(--mosaico-imagem, none);
    transition: filter 0.3s ease;
}

.mosaico-cartao:hover {
    filter: brightness(1.08);
}

.mosaico-cartao-grande {
    grid-column: 1;
    grid-row: 1 / 3;
    padding: 1.5rem;
}

.mosaico-cartao-grande strong {
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
}

.mosaico-cartao-descricao {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
}

@media (max-width: 640px) {
    .mosaico-lugares {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        /* minmax (não um valor fixo tipo "11rem"): o card grande tem
           min-height maior (14rem) — com track de altura fixa, um
           conteúdo maior que ela TRANSBORDA por cima da próxima linha
           em vez de esticar a track, comendo o "gap" entre os cards
           (bug real visto só em celular de verdade, 27/08/2026 — o
           emulador do Chrome usa sempre o mesmo tamanho de fonte do
           desktop e não reproduzia). minmax deixa a track crescer até
           caber o conteúdo mais alto. */
        grid-auto-rows: minmax(11rem, auto);
    }

    .mosaico-cartao-grande {
        grid-column: auto;
        grid-row: auto;
        min-height: 14rem;
    }
}

/* ------------------------------------------------------------
   "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;
}

/* ------------------------------------------------------------
   FAQ (registro de negocio) + CTA final da home
   ------------------------------------------------------------ */
.faq {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 42rem;
}

.faq-item {
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 0 1.2rem;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Remove a seta padrão do navegador — o "+"/"×" abaixo já indica o estado. */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--vermelho);
    transition: transform 0.15s;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    color: var(--cinza-texto);
    margin: 0 0 1.1rem;
}

.cta-final {
    text-align: center;
    margin: 3rem 0 1rem;
}

.cta-final h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.4rem;
    margin: 0 0 0.6rem;
}

.cta-final p {
    color: var(--cinza-texto);
    margin: 0 0 1.2rem;
}

.botao-cta {
    display: inline-block;
    background: var(--vermelho);
    color: #fff;
    border-radius: var(--raio);
    padding: 0.8rem 1.8rem;
    font-weight: 600;
    text-decoration: none;
}

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

/* shopping-cart.svg (ícone Phosphor) não tem classe própria como os
   ícones Tabler (svg.icon acima) — escopado ao botão pra não afetar
   nenhum outro svg solto no site. */
.botao-cta svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.15em;
    margin-right: 0.3rem;
}

/* ------------------------------------------------------------
   "Quiénes somos" (portal/quienes_somos.html)
   ------------------------------------------------------------ */
.sobre-hero {
    padding: 2.5rem 0 1rem;
    max-width: 42rem;
}

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

.sobre-hero p {
    color: var(--cinza-texto);
    line-height: 1.6;
    margin: 0 0 1rem;
}

/* Linhas alternadas texto/imagem — .sobre-seccion-invertida troca o
   lado da imagem via order, sem duplicar o HTML da seção. */
.sobre-seccion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--cinza-borda);
}

.sobre-seccion-invertida .sobre-texto {
    order: 2;
}

.sobre-texto h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.sobre-texto p {
    color: var(--cinza-texto);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.sobre-texto p:last-child {
    margin-bottom: 0;
}

/* Placeholder de imagem: ícone + legenda dizendo QUE foto entra ali —
   trocar por <img>/background-image real quando houver a foto (ver
   comentário acima de cada bloco no template). */
.imagen-marcador {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    aspect-ratio: 4 / 3;
    border-radius: var(--raio);
    background: linear-gradient(135deg, var(--azul) 0%, var(--vermelho) 100%);
    color: #fff;
    text-align: center;
    padding: 1.5rem;
    box-sizing: border-box;
}

.imagen-marcador .icone-marcador {
    display: inline-flex;
    width: 3.5rem;
    height: 3.5rem;
    opacity: 0.9;
}

.imagen-marcador .icone-marcador svg {
    width: 100%;
    height: 100%;
}

.imagen-marcador-legenda {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Imagem real (quando já substituiu o placeholder): mesma caixa
   (aspect-ratio + raio) do .imagen-marcador, mas "contain" com fundo
   suave — evita cortar gráficos/ícones (ex.: mapa do Paraguay), ao
   contrário de "cover", pensado pra fotos que preenchem o quadro. */
.sobre-imagen {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--raio);
    background: var(--fundo-suave);
    object-fit: contain;
    padding: 1.5rem;
    box-sizing: border-box;
}

.sobre-cierre {
    margin: 1.5rem 0 2.5rem;
    padding: 3rem 1.5rem;
    border-radius: var(--raio);
    background: linear-gradient(135deg, var(--tinta) 0%, var(--azul) 100%);
    color: #fff;
    text-align: center;
}

.sobre-cierre h2 {
    margin: 0 0 1rem;
}

.sobre-cierre p {
    max-width: 40rem;
    margin: 0 auto 1rem;
    opacity: 0.9;
    line-height: 1.6;
}

.sobre-cierre p.sobre-cierre-lema {
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    margin: 1.5rem auto;
}

.sobre-cierre .botao-cta {
    margin-top: 0.5rem;
}

/* "Para quienes viven, visitan o llegan": só texto, sem imagem — de
   propósito para quebrar o ritmo alternado texto/imagem das seções
   acima sem precisar de outra cor de fundo. Os 3 itens são texto puro
   (sem borda/sombra/fundo) para não virarem "cards". */
.sobre-audiencia {
    padding: 2.5rem 0;
    border-top: 1px solid var(--cinza-borda);
}

.sobre-audiencia h2 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}

.sobre-audiencia > p {
    color: var(--cinza-texto);
    line-height: 1.6;
    margin: 0 0 2rem;
    max-width: 40rem;
}

.sobre-audiencia-grade {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sobre-audiencia-item strong {
    display: block;
    font-family: var(--fonte-titulo);
    color: var(--tinta);
    margin-bottom: 0.4rem;
}

.sobre-audiencia-item p {
    color: var(--cinza-texto);
    line-height: 1.6;
    margin: 0;
}

.sobre-audiencia-item p a {
    color: var(--vermelho);
    font-weight: 500;
    text-decoration: none;
}

.sobre-audiencia-item p a:hover {
    text-decoration: underline;
}

/* "También conectamos empresas con personas": painel de texto
   centralizado — nem alternância texto/imagem, nem o fundo escuro do
   ".sobre-cierre" logo abaixo. Só o layout já diferencia a seção. */
.sobre-negocios {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 0;
    border-top: 1px solid var(--cinza-borda);
    text-align: center;
}

.sobre-negocios h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}

.sobre-negocios p {
    color: var(--cinza-texto);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.sobre-negocios .enlace-cta {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--vermelho);
    font-weight: 600;
    text-decoration: none;
}

.sobre-negocios .enlace-cta:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   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;
    }

    /* :hover não existe de verdade no toque — a nav do celular já é
       uma coluna vertical (menu aberto pelo hambúrguer), então o
       submenu do "Más" fica sempre visível ali, encaixado no fluxo
       normal, em vez de depender de hover/focus. */
    .nav-mais-menu {
        display: flex;
        position: static;
        transform: none;
        box-shadow: none;
        padding: 0;
        margin-top: 0.4rem;
        align-items: center;
    }

    .nav-mais-gatilho {
        cursor: default;
    }

    .hero {
        padding-top: 1.2rem;
    }

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

    .grade-categorias {
        gap: 1rem;
    }

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

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

    .sobre-seccion {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.8rem 0;
    }

    /* Empilhado, a imagem sempre vem DEPOIS do texto — a inversão de
       lado só faz sentido em duas colunas lado a lado. */
    .sobre-seccion-invertida .sobre-texto {
        order: 0;
    }

    .imagen-marcador,
    .sobre-imagen {
        aspect-ratio: 16 / 9;
    }

    .sobre-audiencia {
        padding: 1.8rem 0;
    }

    .sobre-audiencia-grade {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .sobre-negocios {
        padding: 1.8rem 0;
    }

    .sobre-cierre {
        padding: 2rem 1.2rem;
    }
}

/* ------------------------------------------------------------
   Catálogo digital (empresas/catalogo_empresa.html)
   ------------------------------------------------------------ */
.catalogo-categoria {
    padding: 2rem 0;
    border-top: 1px solid var(--cinza-borda);
}

/* Grupo genérico (produtos sem categoria) e a 1ª categoria com título
   não têm mais um "primeiro" previsível (o genérico pode ou não vir
   antes) — folga de cima fixa em vez de um ":first-child" que só
   funcionava quando a categoria era garantida a ser o 1º elemento. */
#catalogo > .catalogo-grade {
    margin-top: 1rem;
}

.catalogo-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.2rem;
}

/* Mesmo espírito de ".cartao": borda + raio, sem sombra até o hover. */
.produto-cartao {
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--fundo);
    display: flex;
    flex-direction: column;
}

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

.produto-imagem {
    display: block;
    width: 100%;
    height: 9rem;
    object-fit: cover;
}

.produto-dados {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.produto-nome {
    margin: 0;
    font-size: 1.05rem;
}

.produto-descricao {
    color: var(--cinza-texto);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.produto-rodape {
    margin-top: auto;
    padding-top: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.produto-preco {
    font-weight: 600;
    color: var(--tinta);
}

/* Botão pequeno — vira o stepper (+/-) assim que a quantidade > 0
   (ver static/js/catalogo.js), então os dois nunca aparecem juntos. */
.produto-agregar {
    background: var(--vermelho);
    color: #fff;
    border: none;
    border-radius: var(--raio);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.produto-agregar:hover {
    background: var(--vermelho-escuro);
}

.produto-stepper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* [hidden] sozinho (regra padrão do navegador) perde pra ".produto-stepper"
   acima quando as duas empatam em especificidade — CSS de autor sempre
   vence o do user-agent em empate. Sem esta regra mais específica, o
   stepper (−/qtd/+) aparecia visível JUNTO com o botão "Agregar" em
   todo produto ainda não clicado (bug real, 27/08/2026). */
.produto-stepper[hidden] {
    display: none;
}

.produto-stepper-btn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 1px solid var(--cinza-borda);
    background: var(--fundo);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.produto-stepper-btn:hover {
    border-color: var(--vermelho);
    color: var(--vermelho);
}

.produto-stepper-cantidad {
    min-width: 1.2rem;
    text-align: center;
    font-weight: 600;
}

/* Barra fixa que só aparece quando há algo no carrinho (o JS tira o
   "hidden") — tudo sempre visível de uma vez, sem accordion/clique
   escondido pra revelar o botão de enviar (bug real, 27/08/2026: o
   <details> anterior escondia o pedido e o botão até alguém clicar
   no resumo, e ninguém percebia que dava pra clicar ali). */
.carrinho-flutuante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--fundo);
    border-top: 1px solid var(--cinza-borda);
    box-shadow: 0 -2px 10px rgba(23, 23, 46, 0.1);
}

.carrinho-caixa {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.8rem 1.5rem 1rem;
}

.carrinho-itens {
    max-height: 30vh;
    overflow-y: auto;
}

.carrinho-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    color: var(--cinza-texto);
}

.carrinho-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--cinza-borda);
    font-weight: 600;
}

.carrinho-enviar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .catalogo-grade {
        grid-template-columns: 1fr;
    }

    .carrinho-caixa {
        padding: 0.8rem 1rem 1rem;
    }
}

/* ------------------------------------------------------------
   Vertical "Vivir en Paraguay" (contenido estático, ver
   docs/vivir-en-paraguay.md) — breadcrumb, hero e grade de guías.
   ------------------------------------------------------------ */
.migalhas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--cinza-texto);
    margin-bottom: 1.2rem;
}

.migalhas a {
    color: var(--cinza-texto);
    text-decoration: none;
}

.migalhas a:hover {
    text-decoration: underline;
}

.migalhas [aria-current="page"] {
    color: var(--tinta);
}

.vivir-hero {
    max-width: 42rem;
    margin-bottom: 1rem;
}

.vivir-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

/* .cartao já dá borda/raio/sombra; só ajusta o link e o parágrafo. */
.vivir-cartao {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Mesmo espírito de .icone-vantagem (badge circular colorido), mas
   alinhado à esquerda — os cards da vertical não são centralizados. */
.icone-vivir-cartao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--fundo-suave);
    color: var(--azul);
    margin-bottom: 0.6rem;
}

.icone-vivir-cartao svg {
    width: 1.6rem;
    height: 1.6rem;
}

.vivir-cartao h3 {
    margin: 0 0 0.4rem;
}

.vivir-cartao p {
    color: var(--cinza-texto);
    margin: 0;
}

/* Corpo do artigo: largura de leitura confortável (mesma lógica de
   .faq acima) e espaçamento vertical entre títulos e parágrafos. */
.vivir-guia {
    max-width: 42rem;
}

.vivir-guia h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    margin: 2rem 0 0.6rem;
}

.vivir-guia ul {
    color: var(--cinza-texto);
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.vivir-guia li {
    margin-bottom: 0.3rem;
}

/* Aviso "esto es información general" com link a una fuente oficial
   externa (ej.: Migraciones). Borda lateral pra destacar do resto do
   texto sem parecer um erro/alerta (por isso usa --azul, não vermelho). */
.vivir-aviso {
    background: var(--fundo-suave);
    border: 1px solid var(--cinza-borda);
    border-left: 4px solid var(--azul);
    border-radius: var(--raio);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}

.vivir-aviso p {
    margin: 0;
    color: var(--cinza-texto);
    font-size: 0.95rem;
}

.vivir-aviso a {
    color: var(--azul);
    font-weight: 600;
}

/* ------------------------------------------------------------
   Cadastro de conta: painel de vantagens ao lado do formulário
   (o espaço vazio à direita, em telas largas). Empilha embaixo do
   form em telas estreitas — o form continua sendo a ação principal.
   ------------------------------------------------------------ */
.cadastro-grade {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .cadastro-grade {
        grid-template-columns: minmax(0, 24rem) 1fr;
    }
}

.cadastro-beneficios {
    background: var(--fundo-suave);
    border: 1px solid var(--cinza-borda);
    border-radius: var(--raio);
    padding: 1.5rem;
    max-width: 26rem;
}

.cadastro-beneficios-imagem {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--raio);
    margin-bottom: 1.2rem;
}

.cadastro-beneficios h2 {
    font-family: var(--fonte-titulo);
    font-size: 1.2rem;
    margin: 0 0 1rem;
}

.cadastro-beneficios ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.cadastro-beneficios li {
    position: relative;
    padding-left: 1.6rem;
    color: var(--cinza-texto);
}

/* Checkmark via ::before (mesma técnica do "+"/"×" do .faq-item), sem
   precisar de um ícone SVG novo só pra isto. */
.cadastro-beneficios li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--azul);
    font-weight: 700;
}