/* =====================================================
   Portal Jaguaquara - Estilo Principal
   Tema: Amarelo Onça Pintada
   Mobile-first
   ===================================================== */

/* Variáveis de tema */
:root {
    --cor-primaria: #F5B700;        /* Amarelo onça */
    --cor-primaria-escuro: #C99500;
    --cor-secundaria: #1A1A1A;      /* Preto manchas */
    --cor-acento: #E8A317;
    --cor-fundo: #FFFCF5;
    --cor-fundo-card: #FFFFFF;
    --cor-texto: #222222;
    --cor-texto-claro: #666666;
    --cor-borda: #E5E1D6;
    --cor-sucesso: #2E8B57;
    --cor-erro: #C0392B;
    --sombra-card: 0 2px 8px rgba(0,0,0,.08);
    --sombra-hover: 0 4px 16px rgba(0,0,0,.12);
    --raio: 8px;
    --transicao: .2s ease;
}

/* Reset básico */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
    color: var(--cor-texto);
    background: var(--cor-fundo);
    line-height: 1.5;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--cor-primaria-escuro); text-decoration: none; transition: var(--transicao); }
a:hover { color: var(--cor-secundaria); }

/* ===================== TOPO ===================== */
.topo {
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-acento));
    color: var(--cor-secundaria);
    box-shadow: var(--sombra-card);
    position: sticky;
    top: 0;
    z-index: 100;
}

.topo-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
    display: block;
}
.logo-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    color: var(--cor-secundaria);
}
.logo-portal {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.logo-cidade {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.2px;
}

/* Busca */
.busca {
    flex: 1 1 100%;
    order: 3;
    display: flex;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.busca input {
    flex: 1;
    border: 0;
    padding: 10px 16px;
    outline: none;
    font-size: 15px;
}
.busca button {
    background: var(--cor-secundaria);
    color: var(--cor-primaria);
    border: 0;
    padding: 0 18px;
    font-weight: 600;
    cursor: pointer;
}

/* Menu mobile */
.menu-toggle {
    background: transparent;
    border: 0;
    color: var(--cor-secundaria);
    font-size: 1.5rem;
    cursor: pointer;
    margin-left: auto;
}

.nav-principal {
    display: none;
    flex: 1 1 100%;
    order: 5;
    border-top: 1px solid rgba(0,0,0,.12);
    margin-top: 4px;
    padding-top: 6px;
}
.nav-principal.aberto { display: block; }
.nav-principal ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-principal a {
    display: block;
    padding: 10px 12px;
    color: var(--cor-secundaria);
    font-weight: 600;
    border-radius: 6px;
}
.nav-principal a:hover { background: rgba(0,0,0,.12); }

.acesso {
    display: flex;
    gap: 8px;
}
.acesso a {
    background: var(--cor-secundaria);
    color: var(--cor-primaria);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.acesso a.outline {
    background: transparent;
    color: var(--cor-secundaria);
    border: 2px solid var(--cor-secundaria);
}

/* ===================== CONTAINER ===================== */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
}

/* ===================== BANNER ===================== */
.banner-topo, .banner-rodape, .banner-entre {
    margin: 16px auto;
    text-align: center;
    max-width: 1280px;
    padding: 0 16px;
}
.banner-topo img, .banner-rodape img, .banner-entre img {
    margin: 0 auto;
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    max-width: 100%;
}
.banner-lateral {
    text-align: center;
    margin-bottom: 16px;
}
.banner-lateral img {
    max-width: 100%;
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
}
.banner-placeholder {
    background: repeating-linear-gradient(45deg, #fff7d6, #fff7d6 10px, #fff0b3 10px, #fff0b3 20px);
    border: 2px dashed var(--cor-primaria-escuro);
    color: var(--cor-primaria-escuro);
    padding: 30px 20px;
    border-radius: var(--raio);
    font-weight: 600;
}

/* ===================== CARROSSEL DE BANNERS ===================== */
.banner-carrossel {
    position: relative;
    max-width: 1280px;
    margin: 16px auto;
    aspect-ratio: 4 / 1;
    overflow: hidden;
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
    background: #f5f5f5;
}
.banner-carrossel .carrossel-slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    animation: carrosselFade var(--carr-duracao, 15s) infinite;
}
.banner-carrossel .carrossel-slide img {
    width: 100%; height: 100%; object-fit: cover;
}
@keyframes carrosselFade {
    0%, 25% { opacity: 1; }
    33%, 100% { opacity: 0; }
}

/* ===================== HERO ===================== */
.hero {
    background: linear-gradient(135deg, #fff8db, #ffeea8);
    padding: 30px 16px;
    text-align: center;
    border-radius: var(--raio);
    margin-bottom: 24px;
}
.hero h1 {
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    color: var(--cor-secundaria);
    margin-bottom: 8px;
}
.hero p { color: #444; }

/* ===================== SECTIONS ===================== */
.secao {
    margin-bottom: 32px;
}
.secao-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid var(--cor-primaria);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.secao-titulo h2 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
}
.secao-titulo a {
    font-size: 14px;
    font-weight: 600;
    color: var(--cor-primaria-escuro);
}

/* ===================== GRID ===================== */
.grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

/* Cards de categoria */
.card-categoria {
    background: var(--cor-fundo-card);
    padding: 18px 12px;
    border-radius: var(--raio);
    text-align: center;
    box-shadow: var(--sombra-card);
    transition: var(--transicao);
    border: 2px solid transparent;
}
.card-categoria:hover {
    transform: translateY(-4px);
    border-color: var(--cor-primaria);
    box-shadow: var(--sombra-hover);
}
.card-categoria .ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    background: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 800;
}
.card-categoria h3 {
    font-size: 0.95rem;
    color: var(--cor-secundaria);
}

/* ===================== CARDS DE EMPRESA ===================== */
/* Design: fundo branco, barra lateral amarela de 6px             */
.card-empresa {
    background: #fff;
    border-left: 6px solid var(--cor-primaria);
    border-radius: var(--raio);
    box-shadow: 0 2px 6px rgba(0,0,0,.10);
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 20px;
    overflow: hidden;
}
.card-empresa:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }

/* Gratuito: borda cinza, cursor pointer p/ modal upgrade */
.card-empresa.gratis { border-left-color: #ddd; cursor: pointer; }
.card-empresa.gratis:hover { border-left-color: #bbb; }

/* Wrapper do logo */
.card-empresa .emp-logo-wrap {
    flex-shrink: 0;
    width: 60px; height: 60px;
    background: #f0f0f0;
    border-radius: 6px;
    display: grid;
    place-items: center;
    overflow: hidden;
    align-self: flex-start;
}
.card-empresa .emp-logo-wrap img { width: 60px; height: 60px; object-fit: contain; }
/* Ícone placeholder quando não há logo (nunca mostra letra) */
.card-empresa .emp-logo-ph { font-size: 1.4rem; color: #bbb; line-height: 1; }

/* Coluna de informações */
.card-empresa .emp-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.card-empresa .emp-top {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px; margin-bottom: 2px;
}
.card-empresa h3 { color: var(--cor-secundaria); font-size: 1rem; margin: 0; }
.card-empresa .info { color: var(--cor-texto-claro); font-size: 13px; }
.card-empresa .estrelas { color: var(--cor-primaria-escuro); font-size: 14px; }

/* Badge Premium */
.badge-premium {
    background: var(--cor-primaria); color: #000;
    font-size: 11px; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    flex-shrink: 0; white-space: nowrap;
}

/* Mensagem de contato dentro do card — discreta, menor fonte */
.card-emp-msg {
    margin-top: 4px; padding: 4px 7px;
    background: #fffbef; border-left: 2px solid #fbbf24;
    border-radius: 3px; font-size: 11px; color: #92640a;
    display: flex; gap: 4px; align-items: flex-start; line-height: 1.4;
}

/* Botão Ver detalhes */
.card-emp-link {
    display: inline-block; margin-top: auto; padding-top: 8px;
    font-size: 13px; font-weight: 700; color: var(--cor-primaria-escuro);
}
/* Botão Upgrade (gratuito) */
.card-emp-upgrade {
    display: inline-block; margin-top: 6px;
    font-size: 12px; font-weight: 600; color: #999;
    border: 1px dashed #ccc; padding: 3px 10px; border-radius: 6px;
    transition: var(--transicao);
}
.card-empresa.gratis:hover .card-emp-upgrade {
    background: #fff3cd; border-color: var(--cor-primaria); color: var(--cor-primaria-escuro);
}

/* Card de notícia */
.card-noticia {
    background: var(--cor-fundo-card);
    border-radius: var(--raio);
    overflow: hidden;
    box-shadow: var(--sombra-card);
    transition: var(--transicao);
}
.card-noticia:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); }
.card-noticia .img {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #ffe27a, #ffb733);
}
.card-noticia .corpo { padding: 14px; }
.card-noticia h3 { color: var(--cor-secundaria); font-size: 1rem; margin-bottom: 6px; }
.card-noticia .data { color: var(--cor-texto-claro); font-size: 12px; }

/* ===================== RODAPÉ ===================== */
.rodape {
    background: var(--cor-secundaria);
    color: #ddd;
    margin-top: 40px;
    padding: 32px 16px 16px;
}
.rodape-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr;
}
.rodape h4 {
    color: var(--cor-primaria);
    margin-bottom: 12px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.rodape ul { list-style: none; }
.rodape ul li { margin-bottom: 6px; }
.rodape a { color: #ddd; }
.rodape a:hover { color: var(--cor-primaria); }
.rodape-bottom {
    border-top: 1px solid #333;
    margin-top: 24px;
    padding-top: 16px;
    text-align: center;
    font-size: 13px;
    color: #888;
}

/* ===================== FORMULÁRIOS ===================== */
.form-box {
    max-width: 460px;
    margin: 40px auto;
    background: #fff;
    padding: 28px;
    border-radius: var(--raio);
    box-shadow: var(--sombra-card);
}
.form-box h1 { color: var(--cor-secundaria); margin-bottom: 18px; text-align: center; }
.form-grupo { margin-bottom: 14px; }
.form-grupo label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--cor-borda);
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    transition: var(--transicao);
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
}
/* Campo de senha com botão mostrar/ocultar */
.senha-wrap { position: relative; }
.senha-wrap input { padding-right: 46px; }
.senha-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 8px;
    font-size: 18px;
    color: var(--cor-texto-claro);
    line-height: 1;
}
.senha-toggle:hover { color: var(--cor-secundaria); }

.btn {
    background: var(--cor-primaria);
    color: var(--cor-secundaria);
    border: 0;
    padding: 12px 22px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    transition: var(--transicao);
    display: inline-block;
    text-align: center;
}
.btn:hover { background: var(--cor-primaria-escuro); color: #fff; }
.btn-block { width: 100%; }
.btn-secundario { background: var(--cor-secundaria); color: var(--cor-primaria); }
.btn-perigo { background: var(--cor-erro); color: #fff; }
.btn-perigo:hover { background: #962a1c; color: #fff; }

/* Alertas */
.alerta {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 14px;
}
.alerta-sucesso { background: #d8f2e3; color: #1f5e3a; border: 1px solid #2E8B57; }
.alerta-erro    { background: #f7d7d2; color: #7a1d12; border: 1px solid #C0392B; }
.alerta-info    { background: #fff5cc; color: #6b5500; border: 1px solid #F5B700; }

/* ===================== RESPONSIVO ===================== */
@media (min-width: 768px) {
    .menu-toggle { display: none; }
    .nav-principal {
        display: block !important;
        flex: 1 1 100%;
        order: 5;
        border-top: 1px solid rgba(0,0,0,.15);
        margin-top: 8px;
        padding-top: 6px;
    }
    .nav-principal ul {
        flex-direction: row;
        gap: 2px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
    }
    .nav-principal a {
        white-space: nowrap;
        padding: 8px 14px;
    }
    .busca { order: initial; flex: 1 1 280px; max-width: 380px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .rodape-container { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .grid-categorias { grid-template-columns: repeat(4, 1fr); }
    .rodape-container { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1440px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
    .grid-categorias { grid-template-columns: repeat(6, 1fr); }
}