/* Fontes hospedadas no próprio site (variáveis: um arquivo cobre todos os pesos; só o subconjunto latino,
   que cobre todo o português). Antes vinham do Google via @import em cadeia, o que atrasava a tela. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/bricolage-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

/* Link "pular para o conteúdo" - invisível até alguém navegar até ele pelo teclado (Tab) */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 10001;
    background: var(--azul-marinho, #0B4257);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: top 0.2s;
}
.skip-link:focus-visible {
    top: 12px;
}

body { background-color: #f8f4ea; color: #333; }

/* Direção "Ilha do Sol": Santa Maria é a única ilha dos Açores com praias de areia
   clara - por isso o apelido. A paleta vem daí (mar profundo, água rasa turquesa,
   areia, terra vermelha do Barreiro da Faneca) em vez do azul/ciano genérico de tech. */
:root {
    --azul-marinho: #0B4257; /* "Atlântico" - o mar profundo em volta da ilha */
    --ciano: #2FA6A0; /* "Turquesa" - a água rasa nas praias */
    --branco: #FFFCF5; /* branco quente, como as paredes caiadas das casas */
    --terracota: #C1552C; /* acento raro (terra vermelha) - usar com moderação */
    --areia: #F3E4C0; /* areia dourada, pra fundos e destaques suaves */
}

.titulo-display { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; }

/* Folhas de outono: decoração sazonal leve, flutuando por cima do conteúdo sem atrapalhar cliques */
.folhas-outono { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.folha { position: absolute; top: -40px; font-size: 1.6rem; opacity: 0.75; animation: cairFolha linear infinite; }
.folha-1 { left: 8%;  animation-duration: 13s; animation-delay: 0s;  }
.folha-2 { left: 22%; animation-duration: 17s; animation-delay: 2s;  font-size: 1.3rem; }
.folha-3 { left: 41%; animation-duration: 15s; animation-delay: 5s;  }
.folha-4 { left: 63%; animation-duration: 19s; animation-delay: 1s;  font-size: 1.4rem; }
.folha-5 { left: 79%; animation-duration: 14s; animation-delay: 7s;  }
.folha-6 { left: 92%; animation-duration: 21s; animation-delay: 4s;  font-size: 1.2rem; }
@keyframes cairFolha {
    0%   { transform: translateY(-5vh) translateX(0) rotate(0deg); }
    25%  { transform: translateY(25vh) translateX(20px) rotate(90deg); }
    50%  { transform: translateY(50vh) translateX(-15px) rotate(180deg); }
    75%  { transform: translateY(75vh) translateX(20px) rotate(270deg); }
    100% { transform: translateY(105vh) translateX(-10px) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .folhas-outono { display: none; }
}
@media (max-width: 768px) {
    .folha { font-size: 1.2rem; }
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    background: var(--branco);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--terracota), #D98E2A, #8C3A4B) 1;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 9999;
}
.nav-links { list-style: none; display: flex; gap: 20px; }
.nav-links a { text-decoration: none; color: var(--azul-marinho); font-weight: 600; font-size: 0.9rem; transition: color 0.2s;}
.nav-links a:hover { color: var(--ciano); }

/* Widget de clima ao lado da logo (Open-Meteo, sem chave/API key) */
.logo { display: flex; align-items: center; gap: 12px; }
.widget-clima { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--azul-marinho); background: linear-gradient(135deg, var(--areia), #F0CE94); padding: 5px 11px; border-radius: 20px; white-space: nowrap; }
.widget-clima i { color: var(--terracota); font-size: 0.95rem; }

/* Menu recolhível (vira um painel no celular, é só um agrupamento normal no desktop) */
.navbar-menu { display: flex; align-items: center; gap: 24px; }
.btn-hamburguer { display: none; background: none; border: none; font-size: 1.5rem; color: var(--azul-marinho); cursor: pointer; padding: 8px; }

/* Agrupamento dos Botões no Topo */
.botoes-topo {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.btn-cyan { background-color: var(--ciano); color: var(--branco); padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 700; transition: background 0.3s;}
.btn-cyan:hover { background-color: #0096b4; }

/* Estilo do Botão do Facebook */
.btn-facebook {
    background-color: #1877F2; 
    color: #ffffff;
    padding: 10px 20px; 
    border-radius: 25px; 
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-facebook:hover {
    background-color: #145dbf;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Estilo do Botão do Instagram */
.btn-instagram {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.btn-instagram:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.08);
}

/* Idiomas */
.seletor-idioma { display: flex; gap: 8px; }
.btn-lang { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 2px solid var(--azul-marinho); color: var(--azul-marinho); padding: 5px 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.8rem; transition: background-color 0.3s, color 0.3s; }
.btn-lang svg { border-radius: 2px; flex-shrink: 0; }
.btn-lang:hover, .btn-lang.ativo { background: var(--azul-marinho); color: var(--branco); }

/* Hero */
.hero {
    position: relative;
    background:
        radial-gradient(ellipse 900px 480px at 50% -12%, rgba(243,228,192,0.30), transparent 60%),
        linear-gradient(180deg, rgba(11,66,87,0.68), rgba(11,66,87,0.62)),
        url('img/hero-800.jpg') center/cover no-repeat;
    color: var(--branco);
    text-align: center;
    padding: 80px 20px 110px 20px;
    overflow: hidden;
}
@media (min-width: 801px) {
    .hero {
        background:
            radial-gradient(ellipse 900px 480px at 50% -12%, rgba(243,228,192,0.30), transparent 60%),
            linear-gradient(180deg, rgba(11,66,87,0.68), rgba(11,66,87,0.62)),
            url('img/hero-1600.jpg') center/cover no-repeat;
    }
}
.hero h1 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: 2.6rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 15px; text-wrap: balance; }
.hero p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 30px; }

/* Onda decorativa na base do Hero */
.hero-wave { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; }
.hero-wave svg { display: block; width: 100%; height: 70px; }

/* Busca */
.search-box { background: var(--branco); max-width: 700px; margin: 0 auto; border-radius: 50px; display: flex; align-items: center; padding: 5px 5px 5px 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.search-box i { color: #888; font-size: 1.2rem; }
.search-box input { flex: 1; border: none; padding: 15px; font-size: 1rem; outline: none; background: transparent;}
.btn-buscar { background-color: var(--ciano); color: var(--branco); border: none; padding: 15px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; transition: background-color 0.3s;}
.btn-buscar:hover { background-color: #0096b4; }

/* Alternador Todas / Abertas agora */
.filtro-status { display: flex; justify-content: center; gap: 8px; margin-top: 15px; }
.btn-filtro-status { background: rgba(255,255,255,0.12); color: var(--branco); border: 1px solid rgba(255,255,255,0.4); padding: 7px 18px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; display: inline-flex; align-items: center; gap: 7px; }
.btn-filtro-status i { font-size: 0.5rem; color: #10b981; }
.btn-filtro-status:hover { background: rgba(255,255,255,0.22); }
.btn-filtro-status.ativo { background: var(--ciano); border-color: var(--ciano); }
.btn-filtro-status.ativo i { color: var(--branco); }

/* Categorias */
.categorias-rapidas { display: flex; justify-content: center; gap: 15px; margin-top: -35px; margin-bottom: 50px; flex-wrap: wrap; padding: 0 20px; scroll-margin-top: 90px; }
.dica-deslizar { display: none; }
.btn-categoria { position: relative; background: var(--branco); border: none; padding: 15px 25px; border-radius: 12px; font-weight: 600; font-size: 1rem; color: var(--azul-marinho); box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform 0.2s; min-width: 120px;}
.btn-categoria:hover { transform: translateY(-5px); border-bottom: 3px solid var(--ciano); }
.btn-categoria svg { width: 1.5rem; height: 1.5rem; color: var(--ciano); }

/* Ícones de categoria (Phosphor Duotone inline): tamanho segue o font-size do elemento
   em volta, igual um ícone de fonte, pra caber em qualquer contexto (botão, tag, modal) */
.icone-cat { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

/* Botões "Em breve" (sem empresas cadastradas ainda) */
.btn-em-breve { opacity: 0.65; cursor: not-allowed; }
.btn-em-breve:hover { transform: none; border-bottom: none; }
.selo-em-breve {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 20px;
    transform: rotate(10deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Estilo Destaque - Produtores Locais */
.btn-categoria.btn-produtores { background-color: #d1fae5; color: #064e3b; }
.btn-categoria.btn-produtores svg { color: #10b981; }
.btn-categoria.btn-produtores:hover { background-color: #bbf7d0; border-bottom: 3px solid #10b981; }

/* Cor de destaque própria por categoria (ícone + borda no hover) - paleta "Ilha do Sol",
   uma família só de cores (céu, oliva, vinho, dourado, ameixa, pedra, canela, verde-mar,
   atlântico, malva) em vez de cores aleatórias sem relação entre si */
#cat-rest svg { color: #B8722F; }
#cat-rest:hover { border-bottom-color: #B8722F; }
#cat-com svg { color: #9C5B8C; }
#cat-com:hover { border-bottom-color: #9C5B8C; }
#cat-serv svg { color: #56635F; }
#cat-serv:hover { border-bottom-color: #56635F; }
#cat-tur svg { color: #4F7D6B; }
#cat-tur:hover { border-bottom-color: #4F7D6B; }
#cat-pontos svg { color: #3D7A8C; }
#cat-pontos:hover { border-bottom-color: #3D7A8C; }
#cat-taxis svg { color: #C99A3E; }
#cat-taxis:hover { border-bottom-color: #C99A3E; }
#cat-bus svg { color: #0B4257; }
#cat-bus:hover { border-bottom-color: #0B4257; }
#cat-rent svg { color: #8C3A4B; }
#cat-rent:hover { border-bottom-color: #8C3A4B; }
#cat-conducao svg { color: #B8722F; }
#cat-conducao:hover { border-bottom-color: #B8722F; }
#cat-farm svg { color: #6B8E4E; }
#cat-farm:hover { border-bottom-color: #6B8E4E; }
#cat-atm svg { color: #56635F; }
#cat-atm:hover { border-bottom-color: #56635F; }
#cat-gas svg { color: #B8722F; }
#cat-gas:hover { border-bottom-color: #B8722F; }
#cat-lavagem svg { color: #3D7A8C; }
#cat-lavagem:hover { border-bottom-color: #3D7A8C; }
#cat-beleza svg { color: #9C5B8C; }
#cat-beleza:hover { border-bottom-color: #9C5B8C; }
#cat-super svg { color: #4F7D6B; }
#cat-super:hover { border-bottom-color: #4F7D6B; }
#cat-hotel svg { color: #8C3A4B; }
#cat-hotel:hover { border-bottom-color: #8C3A4B; }
#cat-pub svg { color: #0B4257; }
#cat-pub:hover { border-bottom-color: #0B4257; }
#cat-vet svg { color: #6B8E4E; }
#cat-vet:hover { border-bottom-color: #6B8E4E; }
#cat-imob svg { color: #C99A3E; }
#cat-imob:hover { border-bottom-color: #C99A3E; }
#cat-ginasio svg { color: #8C3A4B; }
#cat-ginasio:hover { border-bottom-color: #8C3A4B; }
#cat-conta svg { color: #56635F; }
#cat-conta:hover { border-bottom-color: #56635F; }
#cat-mkt svg { color: #6B4E71; }
#cat-mkt:hover { border-bottom-color: #6B4E71; }
#cat-jardim svg { color: #6B8E4E; }
#cat-jardim:hover { border-bottom-color: #6B8E4E; }

/* Grid de Empresas */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.titulo-secao { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; text-align: center; color: var(--azul-marinho); margin-bottom: 30px; font-weight: 800; letter-spacing: -0.01em; }
#vitrine, #listaGeral { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Cartões */
.cartao { position: relative; background: var(--branco); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s; }
.cartao:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
@media (hover: hover) and (pointer: fine) {
    .cartao:hover { transform: translateY(-4px); }
}

/* Entrada dos cartões ao rolar: a classe é posta pelo app.js e retirada quando a animação acaba,
   então não fica nada "preso" no cartão depois (nem conflita com o hover). */
.cartao.revelar { opacity: 0; }
.cartao.revelar.visivel { animation: surgirCartao 0.5s ease-out both; }
@keyframes surgirCartao {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cartao.revelar { opacity: 1; }
    .cartao.revelar.visivel { animation: none; }
}
.cartao img { width: 100%; height: 180px; object-fit: cover; transition: transform 0.45s ease; }
.cartao:hover img { transform: scale(1.08); }
/* Pra logos/imagens que não podem ser cortadas (ex: brasões quadrados) - mostra inteira, sem cortar */
/* Sem fundo fixo no card: deixa aparecer a cor do próprio cartão (branco no normal,
   ou a cor do destaque/produtor quando for o caso) em vez de sempre forçar branco */
.cartao img.sem-corte { object-fit: contain; background: transparent; }
.modal-empresa img.sem-corte { object-fit: contain; background: var(--branco); }

/* Placeholder mostrado quando a empresa não tem foto (ou a foto quebra ao carregar):
   ícone da categoria centralizado, no lugar de um ícone de imagem quebrada do navegador. */
.placeholder-imagem { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; }
.placeholder-imagem .icone-cat { width: 48px; height: 48px; }
.modal-empresa .placeholder-imagem { height: 200px; border-radius: 10px; margin-bottom: 15px; }
.modal-empresa .placeholder-imagem .icone-cat { width: 64px; height: 64px; }

/* Selo "Destaque" nos cartões VIP - fica no conteúdo do cartão (não em cima da foto),
   pra não tapar a logo/imagem do parceiro */
.fita-destaque {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #f59e0b, #fbbf24);
    color: #78350f;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(245,158,11,0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.fita-destaque i { color: #b45309; font-size: 0.65rem; animation: cintilarEstrela 2.2s ease-in-out infinite; }
@keyframes cintilarEstrela {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 0.7; }
}
/* Brilho que passa pela etiqueta de tempos em tempos, tipo selo premium */
.fita-destaque::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
    animation: brilhoSelo 3.2s ease-in-out infinite;
}
@keyframes brilhoSelo {
    0% { left: -60%; }
    35%, 100% { left: 140%; }
}

/* Selo de contagem regressiva nos cartões de promoção - mesma linguagem visual do
   selo "Destaque", mas em tom de urgência (terracota) em vez de dourado */
.cartao-promocao {
    border: 2px solid var(--terracota);
    background: linear-gradient(160deg, #FFF6EF 0%, #FFE9DC 100%);
    animation: pulsarBordaPromocao 2.4s ease-in-out infinite;
}
@keyframes pulsarBordaPromocao {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.05), 0 0 0 0 rgba(193,85,44,0.35); }
    50% { box-shadow: 0 4px 15px rgba(0,0,0,0.05), 0 0 0 7px rgba(193,85,44,0); }
}
.fita-promocao {
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, var(--terracota), #e07a4e);
    color: var(--branco);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 10px rgba(193,85,44,0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}
.fita-promocao i { animation: cintilarEstrela 2.2s ease-in-out infinite; }
/* Brilho passando na fita, igual ao selo de destaque */
.fita-promocao::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75), transparent);
    animation: brilhoSelo 3.2s ease-in-out infinite;
}

/* Texto "Restam: X" nos cartões de promoção com estoque limitado */
.estoque-promocao { display: block; font-size: 0.8rem; font-weight: 700; color: var(--terracota); margin-bottom: 10px; }

/* Chama do título "Promoções" tremendo */
.chama-titulo { display: inline-block; animation: tremerChama 1.6s ease-in-out infinite; }
@keyframes tremerChama {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.12) rotate(-6deg); }
    75% { transform: scale(1.12) rotate(6deg); }
}

/* Cabeçalho do cartão: nome + coração de favoritar lado a lado (fora da foto,
   pra não tapar a logo/imagem do parceiro) */
.cabecalho-cartao { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.cabecalho-cartao h2 { margin-bottom: 0; }
.cartao .btn-favorito {
    flex-shrink: 0;
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.cartao .btn-favorito:hover { background: #f0f4f8; color: var(--terracota); transform: scale(1.1); }
.cartao .btn-favorito.ativo { color: var(--terracota); }
.cartao .btn-favorito.ativo i { animation: pulsarFavorito 0.35s ease; }
@keyframes pulsarFavorito {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.conteudo-cartao { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.conteudo-cartao h2 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--azul-marinho); margin-bottom: 10px; letter-spacing: -0.01em; }
.conteudo-cartao p { font-size: 0.9rem; color: #666; margin-bottom: 15px; }
.tag-categoria { display: inline-flex; align-items: center; gap: 6px; background: #eef2f5; color: var(--azul-marinho); padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 700; margin-bottom: 15px; align-self: flex-start; }

/* Botões de Ação */
.acoes { display: flex; gap: 10px; margin-top: auto; }
.btn-outline { border: 2px solid var(--ciano); color: var(--ciano); background: transparent; padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 0.8rem; text-align: center; flex: 1; transition: background-color 0.3s, color 0.3s;}
.btn-outline:hover { background: var(--ciano); color: var(--branco); }
.btn-solid { background: #25D366; color: var(--branco); padding: 10px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 0.8rem; text-align: center; flex: 1; transition: background-color 0.3s;}
.btn-solid:hover { background: #1ebd5a; }
.btn-solid:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-solid:disabled:hover { background: inherit; }

/* Rodapé */
.rodape { background: var(--azul-marinho); color: rgba(255,255,255,0.85); margin-top: 60px; }
.rodape-conteudo {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
}
.rodape-logo { height: 42px; object-fit: contain; margin-bottom: 15px; background: var(--branco); padding: 8px 14px; border-radius: 10px; }
.rodape-marca p { font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.65); max-width: 320px; }
.rodape-coluna h3 { color: var(--branco); font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.rodape-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rodape-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.rodape-links a:hover { color: var(--ciano); }

.rodape-social { display: flex; gap: 12px; margin-bottom: 20px; }
.rodape-icone-social {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--branco);
    font-size: 1rem;
    transition: background-color 0.3s, transform 0.3s;
}
.rodape-icone-social:hover { background: var(--ciano); transform: translateY(-3px); }

.rodape-btn-cadastro { display: inline-block; font-size: 0.85rem; padding: 10px 18px; }

.rodape-base {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.1);
}
.rodape-base a { color: rgba(255,255,255,0.5); text-decoration: underline; transition: color 0.2s; }
.rodape-base a:hover { color: var(--branco); }
.rodape-base .separador-rodape { margin: 0 6px; }

/* Páginas de texto (Aviso Legal, Política de Privacidade): coluna estreita, boa pra leitura */
.pagina-legal { max-width: 760px; margin: 0 auto; padding: 60px 20px 80px; }
.pagina-legal h1 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: 2rem; font-weight: 800; color: var(--azul-marinho); margin-bottom: 6px; letter-spacing: -0.01em; }
.pagina-legal .atualizado-em { color: #777; font-size: 0.85rem; margin-bottom: 40px; }
.pagina-legal h2 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--azul-marinho); margin: 34px 0 12px; letter-spacing: -0.01em; }
.pagina-legal p, .pagina-legal li { font-size: 0.98rem; line-height: 1.7; color: #333; margin-bottom: 12px; }
.pagina-legal ul { padding-left: 22px; }
.pagina-legal a { color: var(--ciano); }
.pagina-legal .voltar-link { display: inline-flex; align-items: center; gap: 6px; color: var(--azul-marinho); font-weight: 600; text-decoration: none; margin-bottom: 24px; font-size: 0.9rem; }
.pagina-legal .voltar-link:hover { color: var(--ciano); }


/* =========================================
   Responsivo para Celulares (Escala Miniatura)
========================================= */
@media (max-width: 768px) {
    /* Topo mais compacto */
    .navbar { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; padding: 12px 15px; }
    .btn-hamburguer { display: flex; align-items: center; justify-content: center; }
    .logo { gap: 8px; }
    .widget-clima { font-size: 0.75rem; padding: 4px 8px; gap: 4px; }
    .widget-clima i { font-size: 0.8rem; }

    .navbar-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--branco);
        padding: 15px;
        box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    }
    .navbar-menu.aberto { display: flex; }

    .nav-links { flex-direction: column; align-items: center; gap: 4px; }
    .nav-links a { padding: 10px 4px; display: inline-block; }

    .seletor-idioma { justify-content: center; }
    .btn-lang { padding: 10px 16px; }

    .botoes-topo { flex-direction: column; gap: 10px; }
    .botoes-topo a { justify-content: center; text-align: center; }
    .btn-cyan, .btn-facebook, .btn-instagram { padding: 10px 15px; font-size: 0.85rem; }
    
    .hero { padding: 40px 10px 60px 10px; }
    .hero-wave svg { height: 36px; }
    .hero h1 { font-size: 1.4rem; }
    .hero p { font-size: 0.9rem; }
    
    .search-box input { padding: 10px; font-size: 16px; }
    .btn-buscar { padding: 10px 20px; font-size: 0.9rem; }

    /* Botões: Deslizar para o lado (Scroll Horizontal) */
    .categorias-rapidas {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        /* Esmaece os últimos botões na borda direita pra sinalizar que dá pra deslizar mais */
        -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
        mask-image: linear-gradient(to right, black 88%, transparent 100%);
    }
    .categorias-rapidas::-webkit-scrollbar { display: none; }
    .btn-categoria { 
        flex: 0 0 auto; 
        min-width: 100px; 
        padding: 8px; 
        font-size: 0.75rem; 
        border-radius: 8px;
    }
    .btn-categoria svg { width: 1.2rem; height: 1.2rem; }
    /* No celular o selo fica DENTRO do botão (não acima) porque a fileira de categorias
       usa overflow-x:auto, e isso força o navegador a cortar tudo que passa da borda em Y */
    .selo-em-breve { top: 4px; right: 4px; font-size: 0.5rem; padding: 3px 6px; }

    .dica-deslizar { display: block; text-align: center; font-size: 0.75rem; color: #888; margin-top: 8px; }
    .dica-deslizar i { display: inline-block; animation: chacoalharDeslizar 1.6s ease-in-out infinite; }
    @keyframes chacoalharDeslizar {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
    }

    /* Cartões: 2 Colunas super compactas */
    #vitrine, #listaGeral { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 8px; /* Menos espaço entre os cartões */
    }
    
    /* Ajustes dos Cartões para Miniatura */
    .cartao { border-radius: 8px; }
    .cartao img, .cartao .placeholder-imagem { height: 90px; } /* Imagem mais baixinha */
    
    .conteudo-cartao { padding: 8px; }
    .conteudo-cartao h2 { font-size: 0.85rem; margin-bottom: 5px; line-height: 1.1; }
    .cabecalho-cartao { margin-bottom: 5px; }
    .cabecalho-cartao h2 { margin-bottom: 0; }
    .cartao .btn-favorito { width: 24px; height: 24px; font-size: 0.85rem; }
    .fita-destaque { font-size: 0.6rem; padding: 4px 9px; margin-bottom: 6px; }
    
    /* O SEGREDO: Corta a descrição em apenas 2 linhas no telemóvel */
    .conteudo-cartao p { 
        font-size: 0.7rem; 
        margin-bottom: 8px; 
        display: -webkit-box;
        -webkit-line-clamp:2; /* Mostra só 2 linhas */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .tag-categoria { font-size: 0.6rem; padding: 3px 6px; margin-bottom: 8px; border-radius: 6px; }
    
    /* Status e Horários em miniatura */
    .status-badge { font-size: 0.65rem; padding: 2px 6px; margin-bottom: 5px; }
    .cartao-horario { font-size: 0.65rem; padding: 4px; display: block; text-align: left; margin-bottom: 10px;}
    
    /* Botão "Ver Detalhes" mais compacto */
    .acoes { gap: 4px; }
    .acoes .btn-outline, .acoes .btn-solid { padding: 6px; font-size: 0.7rem; border-radius: 5px;}
    
    /* Ajustes para a Janela Modal no Celular */
    .modal-conteudo { padding: 20px; max-height: 85vh; }
    .modal-conteudo h2 { font-size: 1.2rem; margin-bottom: 10px; }
    .modal-fechar { top: 10px; right: 15px; font-size: 24px; }
    .modal-empresa img, .modal-empresa .placeholder-imagem { height: 150px; }

    /* Rodapé em coluna única */
    .rodape-conteudo { grid-template-columns: 1fr; gap: 30px; text-align: center; padding: 40px 20px; }
    .rodape-marca p { margin: 0 auto; }
    .rodape-links { align-items: center; }
    .rodape-social { justify-content: center; }
}


/* =========================================
   Estilos da Janela Modal (Sobre Nós e Detalhes)
========================================= */
.modal-fundo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 34, 53, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; 
    padding: 20px;
}
.modal-conteudo {
    background-color: var(--branco);
    padding: 40px;
    border-radius: 15px;
    max-width: 650px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    animation: modalEntrada 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@keyframes modalEntrada {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-fechar { position: absolute; top: 15px; right: 25px; font-size: 28px; font-weight: bold; color: var(--azul-marinho); cursor: pointer; transition: color 0.2s; background: none; border: none; padding: 0; font-family: inherit; line-height: 1; }
.modal-fechar:hover { color: var(--ciano); }
.btn-compartilhar { position: absolute; top: 18px; right: 65px; background: #f0f4f8; border: none; width: 34px; height: 34px; border-radius: 50%; color: var(--azul-marinho); font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-compartilhar:hover { background: var(--ciano); color: var(--branco); }
.btn-compartilhar.copiado { background: #10b981; color: var(--branco); }

#btnFavoritoModal { position: absolute; top: 18px; right: 111px; background: #f0f4f8; border: none; width: 34px; height: 34px; border-radius: 50%; color: var(--azul-marinho); font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s, color 0.2s; display: flex; align-items: center; justify-content: center; }
#btnFavoritoModal:hover { background: var(--terracota); color: var(--branco); }
#btnFavoritoModal.ativo { background: var(--terracota); color: var(--branco); }
#btnFavoritoModal.ativo i { animation: pulsarFavorito 0.35s ease; }
.modal-conteudo h2 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; color: var(--azul-marinho); font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.01em; }
.modal-conteudo p { color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 15px; }

.sobre-lista { list-style: none; margin: 20px 0; padding: 0; }
.sobre-lista li { background: #f8f4ea; padding: 12px 15px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; color: #444; }
.sobre-lista li strong { color: var(--azul-marinho); }

.cartao-horario { font-size: 0.85rem; color: #555; background: #f0f4f8; padding: 6px 10px; border-radius: 6px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.cartao-horario i { color: var(--ciano); }

.modal-empresa img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 15px; }

/* EXTRAS OPCIONAIS DO MODAL: estrelas, frase de destaque e destaques com ícones */
.detalhe-estrelas { gap: 3px; margin: 0 0 15px 8px; color: #f5b301; font-size: 0.9rem; vertical-align: middle; }
.detalhe-subtitulo { font-size: 1.05rem; font-weight: 700; color: var(--azul-marinho); line-height: 1.4; margin: 0 0 10px 0; }
.detalhe-destaques { list-style: none; padding: 0; margin: 15px 0 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.detalhe-destaques li { display: flex; align-items: center; gap: 10px; background-color: #f0f9ff; border: 1px solid #bae6fd; color: #0c4a6e; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.detalhe-destaques li .icone-cat { color: #0077b6; width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 400px) { .detalhe-destaques { grid-template-columns: 1fr; } }

/* EXTRAS: PRODUTORES LOCAIS (MODAL) */
.titulo-produtor { font-size: 1.1rem; color: #064e3b; margin: 15px 0 10px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #d1fae5; padding-bottom: 5px; }
.lista-itens-produtor { list-style: none; padding: 0; margin-bottom: 20px; }
.lista-itens-produtor li { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; padding: 10px 15px; border-radius: 8px; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }

/* Selos de Status (Aberto / Fechado) com Bolinhas Coloridas */
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: bold; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.status-aberto { background-color: #e1fdf4; color: #0d9488; }
.status-aberto i { color: #10b981; font-size: 0.55rem; animation: piscarVerde 2s infinite; }
.status-fechado { background-color: #fee2e2; color: #b91c1c; }
.status-fechado i { color: #ef4444; font-size: 0.55rem; }

@keyframes piscarVerde {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   CARTÕES VIP (DESTAQUE)
========================================= */
.cartao-destaque {
    background-color: #E8F5F3 !important; /* Turquesa bem clarinho, da paleta Ilha do Sol */
    border: 2px solid var(--ciano); /* Borda elegante para destacar */
}

/* Opcional: Deixar a caixinha do horário branca para dar contraste com o fundo */
.cartao-destaque .cartao-horario {
    background-color: #ffffff;
    border: 1px solid #D3E8E5;
}

/* Feijão Markt Digital: contorno e fundo na cor de Marketing Digital (ameixa) */
.cartao-destaque.cartao-feijao {
    border-color: #6B4E71;
    background-color: #F1E7ED !important;
}
.cartao-destaque.cartao-feijao .cartao-horario {
    background-color: #ffffff;
    border: 1px solid #E3D3DE;
}

/* =========================================
   CARTÕES DE PRODUTORES LOCAIS
========================================= */
.cartao-produtor {
    background-color: #ecfdf5 !important; /* Verde clarinho e suave */
    border: 2px solid #10b981; /* Verde, mesma cor do botão Produtores Locais */
}

.cartao-produtor .cartao-horario {
    background-color: #ffffff;
    border: 1px solid #bbf7d0;
}

/* =========================================
   Acessibilidade: foco visível ao navegar por teclado (Tab)
========================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--ciano);
    outline-offset: 2px;
}
.search-box input:focus-visible {
    outline: 2px solid var(--ciano);
    outline-offset: -2px;
    border-radius: 4px;
}

/* =========================================
   Acessibilidade: respeita "reduzir movimento" do sistema
========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}