@font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter.woff2') format('woff2');
}

:root {
    --navy: #0B1E32;
    --navy-2: #0F2740;
    --vermelho: #E5313D;
    --laranja: #F5934D;
    --dourado: #F2A93A;
    --texto: #16233A;
    --texto-fraco: #6B7280;
    --linha: #ECECEC;
    --paper: #FFFFFF;
    /* Cor de marca do portal (cor_primaria/cor_secundaria) — sobrescrita
       inline no <head> de cada página a partir do banco; os valores aqui
       são só um fallback de segurança antes desse <style> carregar. */
    --marca: #6C3AED;
    --marca-2: #8E11D8;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--texto); font-family: 'Inter', sans-serif; }
a { color: inherit; }

.site { width: 100%; }

.visualmente-oculto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Barra de navegação fixa (some ao descer, volta ao subir) ---------- */
body { padding-top: 74px; }
.topo-fixo {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff;
    box-shadow: 0 1px 0 rgba(16,23,39,0.06); transition: transform 0.3s ease;
}
.topo-fixo.escondido { transform: translateY(-100%); }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px 40px; position: relative; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-pin { width: 26px; height: 30px; flex-shrink: 0; }
.logo-imagem { height: 42px; width: auto; display: block; }
.logo-texto { display: flex; flex-direction: column; line-height: 1.05; }
.logo-texto b { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: 0.2px; }
.logo-texto span { font-size: 11px; font-weight: 700; color: var(--texto-fraco); letter-spacing: 2px; }

.nav { display: flex; align-items: center; gap: 20px; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); }
.nav a { color: #000; text-decoration: none; font-size: 15px; font-weight: 600; padding-bottom: 6px; white-space: nowrap; -webkit-text-stroke: 0.3px currentColor; }
.nav a.ativo { color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--marca); }

/* ---------- Mega-menu (dropdown por grupo de categorias) ---------- */
.nav-dropdown { position: relative; padding: 8px 0; }
.nav-dropdown-gatilho {
    display: flex; align-items: center; gap: 5px; cursor: pointer;
    color: #000; font-size: 15px; font-weight: 600; white-space: nowrap;
    padding-bottom: 6px; border-bottom: 2px solid transparent; -webkit-text-stroke: 0.3px currentColor;
}
.nav-dropdown-gatilho::after {
    content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); margin-top: -3px; opacity: 0; transition: opacity 0.15s ease;
}
.nav-dropdown:hover .nav-dropdown-gatilho::after { opacity: 0.6; }
.nav-dropdown.ativo .nav-dropdown-gatilho { color: var(--navy); font-weight: 700; border-bottom-color: var(--marca); }
.nav-dropdown-painel {
    display: none; position: absolute; top: 100%; left: -14px; z-index: 10;
    background: var(--paper); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(16,23,39,0.25);
    border: 1px solid var(--linha); padding: 10px; min-width: 220px; flex-direction: column; gap: 2px;
}
.nav-dropdown:hover .nav-dropdown-painel { display: flex; }
.nav-dropdown:hover .nav-dropdown-gatilho { color: var(--navy); }
.nav-dropdown-painel a {
    color: var(--texto); text-decoration: none; font-size: 13.5px; font-weight: 500;
    padding: 9px 12px; border-radius: 8px; white-space: nowrap;
}
.nav-dropdown-painel a:hover { background: var(--linha); color: var(--marca); }

/* ---------- Lateral direita: busca + redes sociais ---------- */
.nav-direita { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.busca-topo { display: flex; align-items: center; position: relative; }
.busca-topo-resultados {
    display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 20;
    background: var(--paper); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(16,23,39,0.25);
    border: 1px solid var(--linha); padding: 8px; width: 320px; max-height: 400px; overflow-y: auto;
}
.busca-topo-resultados.aberto { display: block; }
.busca-topo-resultados .item-resultado {
    display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px;
    text-decoration: none; color: inherit;
}
.busca-topo-resultados .item-resultado:hover { background: var(--linha); }
.busca-topo-resultados .item-resultado .foto {
    width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; background-size: cover;
    background-position: center; background-color: #1B3047;
}
.busca-topo-resultados .item-resultado .corpo { min-width: 0; }
.busca-topo-resultados .item-resultado .tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-bottom: 2px; }
.busca-topo-resultados .item-resultado h5 { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.busca-topo-resultados .sem-resultado { padding: 14px 10px; font-size: 13px; color: var(--texto-fraco); text-align: center; }
.busca-topo-resultados .ver-todos { display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--linha); font-size: 12.5px; font-weight: 700; color: var(--marca); text-decoration: none; }
.busca-topo-input {
    width: 0; opacity: 0; padding: 0; margin-right: 0; border: 1px solid var(--linha); border-radius: 100px;
    font-size: 13px; font-family: 'Inter'; color: var(--texto); outline: none;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin-right 0.25s ease;
}
.busca-topo.aberto .busca-topo-input { width: 190px; opacity: 1; padding: 8px 14px; margin-right: 8px; }
.btn-busca-topo { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none; background: transparent; color: #000; cursor: pointer; padding: 0; }
.btn-busca-topo svg { width: 19px; height: 19px; }

.redes-sociais-topo { display: flex; align-items: center; gap: 12px; }
.redes-sociais-topo a { display: flex; color: #000; }
.redes-sociais-topo svg { width: 17px; height: 17px; }
.redes-sociais-topo a:hover { color: var(--marca); }

/* ---------- Hamburguer (só aparece no mobile) ---------- */
.btn-hamburguer { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; padding: 0; margin-left: auto; }
.btn-hamburguer span { display: block; width: 100%; height: 2px; background: #000; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.btn-hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Grid bento de destaques (1 grande + 4 pequenas) ---------- */
.destaques-bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, 1fr); gap: 12px; height: 620px; padding: 24px 40px; }
.destaques-bento > a:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.destaques-bento > a:nth-child(2) { grid-column: 2; grid-row: 1; }
.destaques-bento > a:nth-child(3) { grid-column: 3; grid-row: 1; }
.destaques-bento > a:nth-child(4) { grid-column: 2; grid-row: 2; }
.destaques-bento > a:nth-child(5) { grid-column: 3; grid-row: 2; }

/* Card de foto de matéria/evento/comércio (".foto"/".thumb", usado em
   dezenas de listagens do site inteiro) -- era só background-image no
   CSS (sem alt, mal indexado no Google Imagens); agora tem um <img> de
   verdade dentro (ver fotoImg() em includes/bootstrap.php), preenchendo
   o container do mesmo jeito que o background-size:cover fazia antes.
   Regra única, genérica (sem qualificar o seletor pai) porque cada
   contexto (.destaques-bento-item .foto, .thumb, .teatro-card .foto...)
   já define o tamanho/aspect-ratio/border-radius do próprio container —
   só falta a foto por dentro preencher igual. overflow:hidden garante
   que o <img> respeita o border-radius do container (filho não herda
   corner-radius do pai sozinho, sem isso a foto ficava quadrada vazando
   pelos cantos arredondados). */
.foto, .thumb { overflow: hidden; }
.foto img, .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.destaques-bento-item { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; }
.destaques-bento-item .foto { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #1B3047; transition: transform 0.35s ease; }
.destaques-bento-item:hover .foto { transform: scale(1.04); }
.destaques-bento-item .scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,12,22,0.88) 0%, rgba(6,12,22,0.35) 45%, rgba(6,12,22,0) 70%); }
.destaques-bento-item .tag { position: absolute; top: 14px; left: 14px; z-index: 2; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 12px; border-radius: 6px; }
.destaques-bento-item .corpo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px; }
.destaques-bento-item h2 { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.destaques-bento-item .byline { font-size: 11.5px; color: rgba(255,255,255,0.7); font-weight: 500; }
.destaques-bento > a:nth-child(1) h2 { font-size: 22px; }
.destaques-bento > a:nth-child(1) .corpo { padding: 26px; }

.categorias-icones-wrap { background: var(--paper); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px 16px; }
.categorias-icones { display: flex; flex-wrap: nowrap; gap: 26px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; max-width: min(744px, calc(100% - 100px)); cursor: grab; user-select: none; }
.categorias-icones::-webkit-scrollbar { display: none; }
.categorias-icones.arrastando { cursor: grabbing; scroll-behavior: auto; }
.categorias-icones.arrastando .cat-icone { pointer-events: none; }
.cat-icone { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; width: 84px; flex-shrink: 0; }
.cat-icone-quadrado { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 16px -8px rgba(16,23,39,0.35); transition: transform 0.15s ease; }
.cat-icone svg { width: 30px; height: 30px; color: #fff; }
.cat-icone-label { font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.3; }
.cat-icone:hover .cat-icone-quadrado { transform: translateY(-4px); }

.cat-icone-seta { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); background: var(--paper); color: var(--texto); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px -6px rgba(16,23,39,0.25); transition: background 0.15s ease; }
.cat-icone-seta svg { width: 18px; height: 18px; }
.cat-icone-seta:hover { background: var(--linha); }

/* ---------- Listas compactas (trio de categorias, mais lidas) ---------- */
.secao-titulo { font-size: 18px; font-weight: 800; color: var(--texto); margin: 32px 0 18px; }

.lista-noticias { display: flex; flex-direction: column; }
.item-noticia { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.item-noticia:first-child { padding-top: 0; }
.item-noticia .thumb { width: 100px; height: 72px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; }
.item-noticia .corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.item-noticia .tag-inline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.item-noticia h4 { font-size: 14.5px; font-weight: 700; color: var(--texto); margin: 0; line-height: 1.35; }
.item-noticia .data { font-size: 11.5px; color: var(--texto-fraco); }

.lista-trending { display: flex; flex-direction: column; }
.item-trending { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.item-trending:first-child { padding-top: 0; }
.item-trending .num { font-size: 20px; font-weight: 800; color: var(--linha); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 24px; }
.item-trending span.titulo { font-size: 13.5px; font-weight: 600; color: var(--texto); line-height: 1.4; }

.sem-conteudo { padding: 30px 0; color: var(--texto-fraco); font-size: 13.5px; }

/* ---------- Página de categoria (site público) ---------- */
.categoria-banner { padding: 58px 40px 52px; }
.categoria-banner h1 { font-size: clamp(28px, 4vw, 40px); }
.categoria-banner-contagem { display: inline-flex; align-items: center; margin-top: 18px; padding: 7px 16px; border-radius: 100px; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; }
.categoria-destaque { margin-bottom: 30px; box-shadow: 0 12px 30px -18px rgba(16,23,39,0.35); }
.categoria-grid.grid-categoria { row-gap: 26px; }
.categoria-vazio { padding: 60px 0 30px; text-align: center; }
.categoria-vazio .sem-conteudo { padding: 0 0 16px; }
.categoria-vazio-link { color: var(--marca); font-weight: 700; font-size: 13.5px; text-decoration: none; }

/* ---------- Banner de anunciante ---------- */
.banner-anuncio { display: block; margin: 32px 100px; border-radius: 12px; overflow: hidden; position: relative; text-decoration: none; aspect-ratio: 6 / 1; }
.banner-anuncio img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mesma proporção do desktop (6:1) -- era 16:9 antes, e como é a MESMA
   imagem cortada em duas razões bem diferentes (6:1 vs 16:9), qualquer
   arte que coubesse certinho no desktop perdia a maior parte da largura
   no corte do mobile (achado real: era a causa do banner "cortar toda
   hora" mesmo depois de ajustar tamanho/design correto). Unificado pra
   nunca mais precisar de dois enquadramentos diferentes da mesma arte. */
@media (max-width: 760px) { .banner-anuncio { margin-left: 20px; margin-right: 20px; } }
.banner-anuncio .rotulo { position: absolute; top: 10px; left: 10px; background: rgba(16,23,39,0.65); color: #fff; font-size: 10px; padding: 3px 9px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }

/* Variante compacta — pra não repetir sempre o mesmo banner "billboard"
   largura total; usada nos slots do meio (Jequitibá/Serras), reservando o
   tamanho grande só pros slots de abertura/fechamento da home. */
.banner-anuncio--compacto { max-width: 1060px; margin-left: auto; margin-right: auto; box-shadow: 0 10px 24px -14px rgba(16,23,39,0.35); border: 1px solid var(--linha); }

/* ---------- Blocos de categoria em destaque (matéria grande + linha de pequenas) ---------- */
.destaque-semana-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: center; background: var(--linha); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; }
.destaque-semana-card .foto { aspect-ratio: 16/11; background-size: cover; background-position: center; }
.destaque-semana-card .corpo { padding: 20px 32px 20px 0; }
.destaque-semana-card .tag-inline { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.destaque-semana-card h3 { font-size: 24px; font-weight: 800; color: var(--texto); margin: 10px 0 12px; line-height: 1.25; }
.destaque-semana-card p { font-size: 13.5px; color: var(--texto-fraco); line-height: 1.6; margin: 0 0 16px; }
.destaque-semana-card .ler-mais { color: var(--marca); font-weight: 700; font-size: 13px; }

.secao-categoria { padding: 8px 40px 32px; }
.destaques-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.destaques-topo h2 { margin: 0; color: var(--texto); }
.destaques-topo a { font-size: 12.5px; font-weight: 700; color: var(--marca); text-decoration: none; flex-shrink: 0; }

.secao-juridico, .secao-bares { border-top: 1px solid var(--linha); padding-top: 32px; }
.secao-juridico .destaques-topo { align-items: flex-start; }
.secao-juridico-legenda { margin: 6px 0 0; font-size: 13px; color: var(--texto-fraco); }
.secao-categoria--spotlight.invertida .destaque-semana-card { grid-template-columns: 1fr 1.1fr; }
.secao-categoria--spotlight.invertida .destaque-semana-card .foto { order: 2; }
.secao-categoria--spotlight.invertida .destaque-semana-card .corpo { order: 1; padding: 20px 0 20px 32px; }
.secao-categoria--spotlight .grid-categoria { margin-top: 16px; }

/* Variante escura, pra dar ritmo visual entre os blocos claros (mesmo navy do rodapé) */
.secao-categoria--escura { background: var(--navy); padding-top: 32px; padding-bottom: 40px; }
.secao-categoria--escura .destaques-topo h2 { color: #fff; }
.secao-categoria--escura .destaques-topo a { color: var(--laranja); }
.secao-categoria--escura .destaque-semana-card { background: var(--navy-2); }
.secao-categoria--escura .destaque-semana-card h3 { color: #fff; }
.secao-categoria--escura .destaque-semana-card p { color: rgba(255,255,255,0.65); }
.secao-categoria--escura .destaque-semana-card .ler-mais { color: var(--laranja); }
.secao-categoria--escura .mini-card h4 { color: #fff; }
.secao-categoria--escura .mini-card .data { color: rgba(255,255,255,0.5); }

/* ---------- Área de Teatro (carrossel escuro, peças/shows em cartaz) ---------- */
.secao-teatro { background: var(--navy); padding: 32px 0 40px; }
.destaques-topo--teatro { padding: 0 40px; margin-bottom: 20px; }
.destaques-topo--teatro h2 { color: #fff; font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; }
.destaques-topo--teatro a { color: var(--laranja); }
.teatro-carrossel-wrap { display: flex; align-items: center; gap: 10px; padding: 0 40px; }
.teatro-trilha { display: flex; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; }
.teatro-trilha::-webkit-scrollbar { display: none; }
.teatro-trilha.arrastando { cursor: grabbing; }
.teatro-trilha.arrastando .teatro-card { pointer-events: none; }
.teatro-card { flex: 0 0 220px; text-decoration: none; color: #fff; }
.teatro-card .foto { aspect-ratio: 16/11; border-radius: 10px; margin-bottom: 12px; background-size: cover; background-position: center; background-color: var(--navy-2); }
.teatro-card .tag-inline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--laranja); }
.teatro-card h4 { font-size: 14px; font-weight: 700; margin: 6px 0 4px; line-height: 1.35; }
.teatro-card .byline { display: block; font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.teatro-card p { font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.5; margin: 0; }
.teatro-seta { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: var(--navy-2); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; }
.teatro-seta svg { width: 18px; height: 18px; }
.teatro-seta:hover { background: rgba(255,255,255,0.15); }

.grid-categoria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-categoria--5 { grid-template-columns: repeat(5, 1fr); }
.mini-card { text-decoration: none; color: inherit; }
.mini-card .foto { aspect-ratio: 16/11; border-radius: 10px; margin-bottom: 10px; background-size: cover; background-position: center; }
.mini-card .tag-inline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.mini-card h4 { font-size: 13px; font-weight: 700; color: var(--texto); margin: 6px 0 5px; line-height: 1.35; }
.mini-card .data { font-size: 11px; color: var(--texto-fraco); }

/* ---------- Curadoria "O que rola em SP" (Fase 16) — visual sempre
   distinto do conteúdo próprio, deixando claro que é fonte externa. ---------- */
.sp-secao { background: var(--linha); padding: 32px 0 36px; margin-top: 8px; }
.sp-legenda { padding: 0 40px; margin: -6px 0 16px; font-size: 12.5px; color: var(--texto-fraco); }
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 40px; }
.sp-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.sp-card .foto { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #1B3047; }
.sp-card .corpo { padding: 12px 14px 14px; }
.sp-fonte { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--texto-fraco); background: var(--linha); padding: 3px 8px; border-radius: 6px; margin-bottom: 7px; }
.sp-card h4 { font-size: 13.5px; font-weight: 700; color: var(--texto); margin: 0; line-height: 1.4; }

/* ---------- Trio de categorias (colunas lado a lado) ---------- */
.categorias-trio { padding: 8px 40px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; border-top: 1px solid var(--linha); }
.categorias-duo { padding: 8px 40px 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; border-top: 1px solid var(--linha); }
.categorias-duo:has(> .categoria-coluna:only-child) { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
.categoria-coluna-titulo { font-size: 16px; font-weight: 800; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 2px solid; }
.categoria-coluna .item-noticia .thumb { width: 76px; height: 60px; }
.categoria-coluna .item-noticia h4 { font-size: 13.5px; }
.ver-mais-coluna { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--marca); text-decoration: none; }
.sem-conteudo-coluna { font-size: 13px; color: var(--texto-fraco); line-height: 1.6; }
.sem-conteudo-coluna a { color: var(--marca); font-weight: 700; text-decoration: none; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--navy); color: rgba(255,255,255,0.65); padding: 44px 40px 22px; }
.rodape-news { display: flex; align-items: center; justify-content: center; gap: 28px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center; }
.rodape-news h3 { color: #fff; font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.rodape-news p { font-size: 13px; margin: 0; color: rgba(255,255,255,0.55); }
.rodape-news form { display: flex; gap: 8px; flex-shrink: 0; }
.rodape-whatsapp-canal { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
.rodape-whatsapp-canal svg { width: 16px; height: 16px; }
.rodape-whatsapp-canal:hover { filter: brightness(1.08); }
.rodape-news input { padding: 11px 16px; border-radius: 8px; border: none; font-size: 13px; width: 220px; font-family: 'Inter'; }
.rodape-news button { background: var(--marca); color: #fff; border: none; padding: 11px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: 'Inter'; }

.rodape-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
.rodape-grid h5 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; font-weight: 700; }
.rodape-grid a { display: block; color: rgba(255,255,255,0.55); text-decoration: none; font-size: 13.5px; margin-bottom: 9px; }
.rodape-social { display: flex; gap: 10px; margin-top: 14px; }
.rodape-social a { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(255,255,255,0.75); transition: background 0.15s ease, color 0.15s ease; }
.rodape-social a:hover { background: rgba(255,255,255,0.18); color: #fff; }
.rodape-social a svg { width: 16px; height: 16px; }
.rodape-baixo { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; font-size: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; text-align: center; }

/* ---------- Banner de página interna (Notícias, Comércios, Eventos...) ---------- */
.pagina-banner { background: linear-gradient(100deg, var(--marca) 0%, var(--marca-2) 100%); padding: 44px 40px; }
.pagina-banner .trilha { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.pagina-banner .trilha a { color: rgba(255,255,255,0.55); text-decoration: none; }
.pagina-banner h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: #fff; margin: 0; }
.pagina-banner p { font-size: 14px; color: rgba(255,255,255,0.65); margin: 10px 0 0; max-width: 560px; line-height: 1.55; }

/* ---------- Barra de filtros (categoria + busca) ---------- */
.filtros-barra { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 40px 4px; flex-wrap: wrap; }
.filtros-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filtro-pill { display: inline-block; padding: 8px 16px; border-radius: 100px; background: var(--linha); color: var(--texto-fraco); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.filtro-pill.ativo { background: var(--marca); color: #fff; }
.filtros-busca { display: flex; align-items: center; }
.filtros-busca input, .filtros-busca select { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-family: 'Inter'; color: var(--texto); background: var(--paper); min-width: 180px; }

/* ---------- Guia Comercial: busca grande + ícones de categoria + lista ---------- */
.busca-grande-wrap { padding: 24px 40px 0; }
.busca-grande { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; background: var(--paper); border: 1px solid var(--linha); border-radius: 100px; padding: 12px 20px; box-shadow: 0 6px 20px -12px rgba(16,23,39,0.25); }
.busca-grande svg { width: 18px; height: 18px; color: var(--texto-fraco); flex-shrink: 0; }
.busca-grande input { flex: 1; border: none; background: transparent; font-size: 14px; font-family: 'Inter'; color: var(--texto); outline: none; }
.categoria-filtro-icones { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 28px; padding: 24px 40px; }
.categoria-filtro-icones .cat-icone-quadrado { width: 60px; height: 60px; border-radius: 16px; }
.categoria-filtro-icones .cat-icone svg { width: 26px; height: 26px; }
.cat-icone--ativo .cat-icone-quadrado { outline: 3px solid var(--marca); outline-offset: 3px; }
.cat-icone--ativo .cat-icone-label { color: var(--marca); }

.lista-comercios { display: flex; flex-direction: column; }
.comercio-linha { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
.comercio-linha:first-child { padding-top: 0; }
.comercio-linha-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.comercio-linha-icone { width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background-color: #1B3047; flex-shrink: 0; }
.comercio-linha-icone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comercio-linha-icone--cor { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 800; text-transform: uppercase; }
.comercio-linha-corpo { min-width: 0; }
.comercio-linha-corpo h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--texto); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comercio-linha-destaque { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--marca); background: color-mix(in srgb, var(--marca) 14%, transparent); padding: 2px 8px; border-radius: 100px; }
.comercio-linha-cupom { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #B45309; background: #FEF3C7; padding: 2px 8px; border-radius: 100px; }
.comercio-linha-meta { font-size: 12.5px; color: var(--texto-fraco); display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comercio-linha-acoes { display: flex; gap: 8px; flex-shrink: 0; }
.comercio-linha-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); background: var(--paper); color: var(--marca); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s ease; }
.comercio-linha-btn:hover { background: var(--linha); }
.comercio-linha-btn svg { width: 17px; height: 17px; }

/* ---------- Grid de listagem genérico (comércios, eventos, vagas, guias, classificados) ---------- */
.conteudo-pagina { padding: 24px 40px 50px; }
.grid-listagem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-listagem { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.card-listagem .foto { aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #1B3047; position: relative; }
.card-listagem .foto .selo { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 11px; border-radius: 6px; background: var(--marca); }
.card-listagem .corpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-listagem .tag-inline { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.card-listagem h3 { font-size: 15px; font-weight: 700; color: var(--texto); margin: 0; line-height: 1.35; }
.card-listagem .meta { font-size: 12.5px; color: var(--texto-fraco); display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.card-listagem .preco { font-size: 16px; font-weight: 800; color: var(--texto); margin-top: 4px; }
.evento-data-badge { position: absolute; top: 10px; left: 10px; background: #fff; border-radius: 8px; padding: 6px 10px; text-align: center; line-height: 1.1; }
.evento-data-badge b { display: block; font-size: 17px; font-weight: 800; color: var(--navy); }
.evento-data-badge span { font-size: 9.5px; font-weight: 700; color: var(--marca); text-transform: uppercase; letter-spacing: 0.5px; }

.paginacao { display: flex; justify-content: center; gap: 8px; padding: 34px 0 6px; }
.paginacao a, .paginacao span { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--texto); border: 1px solid var(--linha); }
.paginacao a.ativo, .paginacao span.ativo { background: var(--marca); color: #fff; border-color: var(--marca); }

/* ---------- Ficha de detalhe (comércio, vaga, evento, guia) ---------- */
.ficha-header { padding: 40px; }
.ficha-trilha { font-size: 12px; color: var(--texto-fraco); margin-bottom: 16px; }
.ficha-trilha a { color: var(--texto-fraco); text-decoration: none; }
.ficha-cat { display: inline-block; color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 100px; margin-bottom: 16px; }

/* ---------- Destaque pago (Fase 17) — Vagas e Classificados ---------- */
.card-listagem--destaque { border-color: #F2C94C; box-shadow: 0 0 0 1px #F2C94C; }
.selo-destaque { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #B45309; background: #FEF3C7; padding: 2px 8px; border-radius: 100px; margin-left: 8px; vertical-align: middle; }
.ficha-header h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; color: var(--texto); line-height: 1.25; margin: 0; }
.ficha-header .meta { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--texto-fraco); flex-wrap: wrap; }
.ficha-corpo-geral { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; padding: 0 40px 60px; }
.ficha-corpo-geral > * { min-width: 0; }
.ficha-img-destaque { width: 100%; aspect-ratio: 16/9; border-radius: 14px; margin-bottom: 24px; overflow: hidden; background-color: #1B3047; }
.ficha-img-destaque img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ficha-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }
.ficha-galeria .foto { aspect-ratio: 1; border-radius: 8px; background-size: cover; background-position: center; background-color: #1B3047; }
.ficha-texto { font-size: 15.5px; line-height: 1.8; color: var(--texto); overflow-wrap: break-word; }
.ficha-texto p { margin: 0 0 18px; }
.ficha-texto img { max-width: 100%; border-radius: 8px; }
.ficha-texto table { max-width: 100%; display: block; overflow-x: auto; }
.ficha-texto pre { max-width: 100%; overflow-x: auto; }
.ficha-texto iframe { max-width: 100%; }

.comercio-cupom { display: flex; align-items: flex-start; gap: 12px; background: #FFFBEB; border: 1.5px dashed #F2C94C; border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
.comercio-cupom svg { width: 24px; height: 24px; color: #B45309; flex-shrink: 0; margin-top: 2px; }
.comercio-cupom-rotulo { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #B45309; margin-bottom: 4px; }
.comercio-cupom p { margin: 0; font-size: 14.5px; font-weight: 600; color: #78350F; }
.comercio-cupom-validade { display: block; font-size: 12px; color: #92672E; margin-top: 4px; }

/* Galeria de fotos inserida dentro do conteúdo rico (matéria/guia/página) —
   igual ao bloco de galeria do WordPress: grade de miniaturas quadradas,
   sem depender de nenhum wrapper específico (funciona em .materia-texto,
   .ficha-texto e .pagina-institucional, já que a classe vem pronta do
   editor do admin). */
/* Flexbox com 3 colunas por linha, cada linha sempre preenchendo 100%
   da coluna de texto — sem tamanho manual (igual WordPress), sem sobrar
   espaço em branco nem quando a última linha tem menos de 3 fotos.
   `flex-grow:1` é o que faz isso: com 2 fotos, cada uma vira ~50% (some
   o "buraco" da 3ª); com 4, a 4ª sozinha vira 100% da sua linha; com 5,
   as 2 últimas dividem 50/50 a linha delas. `flex-basis` de 33.33% só
   define quando QUEBRA pra próxima linha (nunca mais de 3 por linha) —
   quem decide o tamanho final de cada foto é o `flex-grow` distribuindo
   o espaço sobrando entre as fotos da MESMA linha. */
.galeria-materia-grid { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
/* Foto pode vir de dois jeitos no HTML salvo: <img> solto direto na grade
   (formato antigo) ou <span class="galeria-materia-foto"><img></span>
   (formato novo, depois que a matéria passou pelo excluir/arrastar foto
   individual no admin — ver rodape.php). Os dois precisam continuar
   funcionando pro conteúdo antigo não quebrar -- regras totalmente
   separadas de propósito, pra não ter conflito de cascata entre elas. */
.galeria-materia-grid > img { flex: 1 1 calc(33.3333% - 10.667px); width: calc(33.3333% - 10.667px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin: 0; display: block; background: var(--linha); cursor: zoom-in; }
.galeria-materia-grid > .galeria-materia-foto { flex: 1 1 calc(33.3333% - 10.667px); width: calc(33.3333% - 10.667px); aspect-ratio: 1; display: block; }
.galeria-materia-grid > .galeria-materia-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; margin: 0; display: block; background: var(--linha); cursor: zoom-in; }
@media (max-width: 600px) {
    .galeria-materia-grid > img,
    .galeria-materia-grid > .galeria-materia-foto { flex-basis: calc(50% - 8px); width: calc(50% - 8px); }
}

/* Post do Instagram incorporado -- centralizado por padrão (mesmo
   comportamento de sempre, mantém compatível com post salvo antes do
   controle de alinhamento existir), com opção de jogar pra esquerda ou
   direita escolhida no editor (ver .instagram-materia-align em
   rodape.php/admin app.css). max-width bate com o do blockquote oficial
   do Instagram (ver htmlBlockquoteInstagram) -- sem isso o alinhamento
   não tem espaço sobrando pra empurrar o bloco pra nenhum lado. */
.instagram-materia { max-width: 540px; margin: 20px auto; }
.instagram-materia[data-alinhamento="esquerda"] { margin-left: 0; margin-right: auto; }
.instagram-materia[data-alinhamento="direita"] { margin-left: auto; margin-right: 0; }

/* Imagem redimensionada no editor (bloco de Imagem, igual WordPress) —
   sem tamanho escolhido na edição, preenche 100% da coluna de texto por
   padrão (igual ao WordPress — nada de sobrar espaço em branco nas
   laterais); se o usuário arrastar a alça pra redimensionar, o `width`
   inline que isso grava no `<img>` sempre vence sobre esse padrão. */
.editor-img-wrap { max-width: 100%; line-height: 0; }
.editor-img-wrap img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 0; cursor: zoom-in; }

/* Lightbox de fotos do conteúdo — clica numa foto (imagem única ou
   galeria) e ela abre grande por cima da página, sem sair dela, igual
   ao comportamento do tatuapebairro.com.br (JS em site.js). */
.lightbox-conteudo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 300; align-items: center; justify-content: center; padding: 40px; }
.lightbox-conteudo.aberto { display: flex; }
.lightbox-conteudo img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; }
.lightbox-conteudo-fechar { position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-conteudo-fechar:hover { background: rgba(255,255,255,0.2); }
.lightbox-conteudo-fechar svg { width: 20px; height: 20px; }
.lightbox-conteudo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-conteudo-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-conteudo-nav svg { width: 24px; height: 24px; }
.lightbox-conteudo-anterior { left: 20px; }
.lightbox-conteudo-proxima { right: 20px; }
.lightbox-conteudo-contador { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); font-size: 13px; }
@media (max-width: 600px) { .lightbox-conteudo-nav { width: 38px; height: 38px; } .lightbox-conteudo-anterior { left: 8px; } .lightbox-conteudo-proxima { right: 8px; } }
.ficha-lateral { background: var(--linha); border-radius: 14px; padding: 24px; align-self: flex-start; }
.ficha-lateral .preco { font-size: 24px; font-weight: 800; color: var(--texto); margin: 0 0 4px; }
.ficha-lateral .item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 13.5px; }
.ficha-lateral .item span:first-child { color: var(--texto-fraco); }
.ficha-lateral .item span:last-child { font-weight: 700; color: var(--texto); }
.btn-contato { display: block; text-align: center; background: var(--marca); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 10px; margin-top: 16px; }
.btn-contato--google { background: #fff; color: #1a73e8; border: 1.5px solid #1a73e8; }
.btn-contato--outline { background: transparent; color: var(--marca); border: 1.5px solid var(--marca); display: flex; align-items: center; justify-content: center; gap: 8px; word-break: break-all; }
.btn-contato--outline svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- Ficha de comércio no plano Pago (hero + abas + mapa) ---------- */
.comercio-hero { position: relative; height: 300px; overflow: hidden; background-color: #1B3047; background-image: linear-gradient(135deg, var(--navy), #24406b); }
.comercio-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.comercio-hero-logo { position: absolute; left: 40px; bottom: -44px; width: 92px; height: 92px; border-radius: 20px; overflow: hidden; background-color: var(--paper); border: 4px solid var(--paper); box-shadow: 0 8px 20px -8px rgba(16,23,39,0.35); }
.comercio-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comercio-topo { position: relative; z-index: 1; margin-top: -22px; padding: 60px 40px 50px; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: 0 -14px 30px -20px rgba(16,23,39,0.2); }
.comercio-topo-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.comercio-topo-linha h1 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 800; color: var(--texto); line-height: 1.2; margin: 0; }
.comercio-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 5px 12px; border-radius: 100px; }
.comercio-status--aberto { background: #dcfce7; color: #16A34A; }
.comercio-status--fechado { background: #fee2e2; color: var(--vermelho); }
.comercio-subtitulo { font-size: 14px; color: var(--texto-fraco); margin: 6px 0 0; }
.comercio-acoes-topo { display: flex; align-items: center; gap: 22px; margin-top: 18px; }
.comercio-acao-simples { display: flex; align-items: center; gap: 7px; border: none; background: none; padding: 0; color: var(--texto-fraco); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: 'Inter'; }
.comercio-acao-simples svg { width: 18px; height: 18px; }
.comercio-acao-simples:hover { color: var(--marca); }
#btn-favoritar.ativo { color: var(--marca); }
#btn-favoritar.ativo svg { fill: var(--marca); stroke: var(--marca); }
.comercio-compartilhar-wrap { position: relative; display: flex; align-items: center; }
.comercio-compartilhar-opcoes { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.comercio-compartilhar-opcoes[hidden] { display: none; }
.comercio-abas { display: flex; gap: 6px; margin-top: 24px; border-bottom: 1px solid var(--linha); overflow-x: auto; }
.comercio-aba-btn { border: none; background: none; padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--texto-fraco); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; font-family: 'Inter'; }
.comercio-aba-btn.ativa { color: var(--marca); border-bottom-color: var(--marca); }
.comercio-aba-painel { padding-top: 24px; }
.comercio-sobre-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.comercio-info-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.comercio-info-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--texto); }
.comercio-info-item svg { width: 18px; height: 18px; color: var(--marca); flex-shrink: 0; margin-top: 1px; }
.comercio-info-item--horario { margin-top: 12px; }
.comercio-mapa { aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); }
.comercio-cta-linha { display: flex; gap: 12px; margin-top: 24px; max-width: 420px; }
.comercio-cta-linha .btn-contato { margin-top: 0; flex: 1; }
.btn-contato--chegar { background: var(--marca); }
.btn-contato--whatsapp { background: #25D366; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-contato--whatsapp svg { width: 17px; height: 17px; }
.horarios-lista { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.horarios-lista .linha { display: flex; justify-content: space-between; gap: 16px; }
.horarios-lista .hoje { font-weight: 700; color: var(--texto); }

/* ---------- Anuncie: planos ---------- */
.planos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 10px 40px 50px; }
.plano-card { background: var(--paper); border: 1px solid var(--linha); border-radius: 16px; padding: 30px 26px; text-align: center; }
.plano-card.destaque { border: 2px solid var(--marca); position: relative; }
.plano-card.destaque::before { content: 'Mais popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--marca); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; white-space: nowrap; }
.plano-card h3 { font-size: 17px; margin: 6px 0 4px; color: var(--texto); }
.plano-card .preco-plano { font-size: 32px; font-weight: 800; color: var(--texto); margin: 12px 0; }
.plano-card .preco-plano span { font-size: 13px; font-weight: 500; color: var(--texto-fraco); }
.plano-card ul { list-style: none; padding: 0; margin: 20px 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.plano-card li { font-size: 13.5px; color: var(--texto); display: flex; gap: 8px; }
.plano-card li::before { content: '✓'; color: var(--marca); font-weight: 700; }
.plano-card .btn-contato { margin-top: 0; }

.anuncie-banner { padding: 58px 40px 52px; }
.anuncie-banner h1 { font-size: clamp(28px, 4vw, 40px); }

.anuncie-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 1000px; margin: 34px auto 0; padding: 0 40px; }
.anuncie-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--paper); border: 1px solid var(--linha); border-radius: 14px; padding: 22px 16px; }
.anuncie-stat svg { width: 24px; height: 24px; color: var(--marca); }
.anuncie-stat strong { font-size: 24px; font-weight: 800; color: var(--texto); }
.anuncie-stat span { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.4; }

.anuncie-secao-titulo { text-align: center; max-width: 560px; margin: 50px auto 26px; padding: 0 40px; }
.anuncie-secao-titulo h2 { font-size: 24px; font-weight: 800; color: var(--texto); margin: 0 0 8px; }
.anuncie-secao-titulo p { font-size: 14px; color: var(--texto-fraco); margin: 0; line-height: 1.6; }

.anuncie-passos { background: var(--navy); padding: 48px 40px; margin-top: 44px; }
.anuncie-passos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1000px; margin: 0 auto; }
.anuncie-passo { text-align: center; }
.anuncie-passo-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--laranja); color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 14px; }
.anuncie-passo h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.anuncie-passo p { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.6; margin: 0; }

.anuncie-form-secao { padding-top: 6px; }
.anuncie-form-secao .form-contato { margin-top: 4px; }

.contato-banner { padding: 58px 40px 52px; }
.contato-banner h1 { font-size: clamp(28px, 4vw, 40px); }

.contato-secao { max-width: 1000px; margin: 0 auto; padding: 40px; display: grid; grid-template-columns: 340px 1fr; gap: 26px; align-items: start; }
.contato-info-card, .contato-form-card { background: var(--paper); border: 1px solid var(--linha); border-radius: 16px; padding: 28px; }
.contato-info-card h3, .contato-form-card h3 { font-size: 17px; font-weight: 800; color: var(--texto); margin: 0 0 6px; }
.contato-info-card > p, .contato-form-card > p { font-size: 13.5px; color: var(--texto-fraco); margin: 0 0 20px; line-height: 1.55; }

.contato-canais { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }

.contato-info-item { display: flex; gap: 12px; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--linha); }
.contato-info-item svg { width: 19px; height: 19px; color: var(--marca); flex-shrink: 0; margin-top: 1px; }
.contato-info-item strong { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--texto-fraco); margin-bottom: 3px; }
.contato-info-item a { font-size: 14px; color: var(--texto); text-decoration: none; font-weight: 600; }
.contato-info-item a:hover { color: var(--marca); }

.contato-redes { display: flex; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linha); }
.contato-redes a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; color: var(--texto-fraco); text-decoration: none; transition: all 0.15s ease; }
.contato-redes a svg { width: 16px; height: 16px; }
.contato-redes a:hover { color: var(--marca); border-color: var(--marca); }

.contato-form-card .form-contato { max-width: none; margin: 0; padding: 0; }
.contato-form-card .form-aviso { max-width: none; margin: 0 0 18px; }

.sobre-banner { padding: 58px 40px 52px; }
.sobre-banner h1 { font-size: clamp(28px, 4vw, 40px); }
.sobre-stats { margin-top: 0; }
.sobre-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; margin: 34px auto 60px; padding: 0 40px; }
.sobre-links .btn-contato { flex: 0 1 auto; padding-left: 22px; padding-right: 22px; }

/* ---------- Formulário institucional (Contato) ---------- */
.pagina-institucional { max-width: 760px; margin: 0 auto; padding: 40px; font-size: 15px; line-height: 1.8; color: var(--texto); }
.pagina-institucional img { max-width: 100%; border-radius: 10px; }
.pagina-institucional > p:first-of-type { font-size: 17px; font-weight: 600; color: var(--texto); }
.form-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 30px auto 0; padding: 0 40px 60px; }
.form-contato .campo-full { grid-column: 1 / -1; }
.form-contato label { display: block; font-size: 12.5px; font-weight: 700; color: var(--texto-fraco); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.form-contato input, .form-contato textarea { width: 100%; border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; font-size: 14px; font-family: 'Inter'; color: var(--texto); background: var(--paper); }
.form-contato textarea { resize: vertical; min-height: 110px; }
.form-contato button { background: var(--marca); color: #fff; border: none; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: 'Inter'; }
.form-aviso { max-width: 640px; margin: 20px auto 0; padding: 14px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.form-aviso.sucesso { background: #DCFCE7; color: #166534; }
.form-aviso.erro { background: #FEE2E2; color: #991B1B; }

/* ---------- Compartilhar matéria ---------- */
.materia-compartilhar { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linha); }
.materia-compartilhar-label { font-size: 12.5px; font-weight: 700; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 4px; }
.compartilhar-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; color: var(--texto-fraco); background: var(--paper); cursor: pointer; transition: all 0.15s ease; text-decoration: none; }
.compartilhar-btn svg { width: 17px; height: 17px; }
.compartilhar-btn:hover { border-color: currentColor; }
.compartilhar-whatsapp:hover { color: #25D366; }
.compartilhar-facebook:hover { color: #1877F2; }
.compartilhar-x:hover { color: #000; }
.compartilhar-copiar:hover { color: var(--marca); }
.compartilhar-copiar.copiado { color: #16A34A; border-color: #16A34A; }

/* ---------- Comentários ---------- */
.mapa-bairro-container { width: 100%; height: 600px; }

.materia-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.materia-tag-pill { font-size: 12.5px; font-weight: 600; color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, transparent); padding: 6px 13px; border-radius: 100px; text-decoration: none; }
.materia-tag-pill:hover { background: color-mix(in srgb, var(--marca) 18%, transparent); }

.materia-comentarios { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linha); }
.materia-comentarios h3 { font-size: 18px; font-weight: 800; color: var(--texto); margin: 0 0 20px; }
.lista-comentarios { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.comentario-item { padding-bottom: 18px; border-bottom: 1px solid var(--linha); }
.comentario-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.comentario-topo strong { font-size: 14px; color: var(--texto); }
.comentario-data { font-size: 12px; color: var(--texto-fraco); }
.comentario-item p { font-size: 14px; line-height: 1.6; color: var(--texto); margin: 0; white-space: pre-line; }
.comentario-curtir { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 100px; border: 1px solid var(--linha); background: transparent; color: var(--texto-fraco); font-size: 12.5px; font-weight: 700; font-family: 'Inter'; cursor: pointer; transition: all .15s ease; }
.comentario-curtir svg { width: 14px; height: 14px; }
.comentario-curtir:hover:not(:disabled) { border-color: var(--marca); color: var(--marca); }
.comentario-curtir.curtido { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 10%, transparent); color: var(--marca); }
.comentario-curtir:disabled { cursor: default; }
.campo-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aviso-privacidade { font-size: 11.5px; color: var(--texto-fraco); margin: -4px 0 0; }
.aviso-privacidade a { color: var(--marca); text-decoration: underline; }
.form-comentario { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.form-comentario-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-comentario input, .form-comentario textarea { width: 100%; border: 1px solid var(--linha); border-radius: 8px; padding: 12px 14px; font-size: 14px; font-family: 'Inter'; color: var(--texto); background: var(--paper); }
.form-comentario textarea { resize: vertical; min-height: 90px; }
.form-comentario button { align-self: flex-start; background: var(--marca); color: #fff; border: none; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: 'Inter'; }
@media (max-width: 760px) { .form-comentario-linha { grid-template-columns: 1fr; } }

.enquete-widget { max-width: 640px; margin: 0 auto 36px; padding: 24px 28px; border: 1px solid var(--linha); border-radius: 14px; background: var(--paper); }
.enquete-rotulo { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--marca); background: color-mix(in srgb, var(--marca) 12%, transparent); padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.enquete-pergunta { font-size: 18px; font-weight: 800; color: var(--texto); margin: 0 0 16px; }
.enquete-opcoes { display: flex; flex-direction: column; gap: 10px; }
.enquete-opcao { text-align: left; width: 100%; border: 1.5px solid var(--linha); background: transparent; color: var(--texto); font-size: 14px; font-weight: 600; padding: 12px 16px; border-radius: 10px; cursor: pointer; font-family: 'Inter'; transition: border-color .15s ease, background .15s ease; }
.enquete-opcao:hover:not(:disabled) { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 6%, transparent); }
.enquete-opcao:disabled { cursor: default; opacity: 0.6; }
.enquete-barra-item { margin-bottom: 12px; }
.enquete-barra-topo { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 5px; }
.enquete-barra-trilha { background: var(--linha); border-radius: 20px; height: 8px; overflow: hidden; }
.enquete-barra-preenchida { background: var(--marca); height: 100%; border-radius: 20px; transition: width .4s ease; }
.enquete-total-votos { display: block; font-size: 12px; color: var(--texto-fraco); margin-top: 10px; }

.whatsapp-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #25D366; color: #fff; text-decoration: none; padding: 14px 20px 14px 14px; border-radius: 50px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-weight: 700; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-flutuante:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.whatsapp-flutuante svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 760px) { .whatsapp-flutuante span { display: none; } .whatsapp-flutuante { padding: 14px; right: 16px; bottom: 16px; } }

.push-flutuante { position: fixed; left: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--marca); color: #fff; border: none; text-decoration: none; padding: 14px 14px 14px 16px; border-radius: 50px; box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-weight: 700; font-size: 13.5px; font-family: 'Inter'; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.push-flutuante[hidden] { display: none; }
.push-flutuante:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.push-flutuante svg { width: 22px; height: 22px; flex-shrink: 0; }
.push-flutuante-fechar { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.2); font-size: 11px; flex-shrink: 0; }
.push-flutuante-fechar:hover { background: rgba(255,255,255,0.35); }
@media (max-width: 760px) { .push-flutuante span:not(.push-flutuante-fechar) { display: none; } .push-flutuante { padding: 14px; left: 16px; bottom: 16px; } }

@media (max-width: 760px) {
    .btn-hamburguer { display: flex; }
    .nav-direita { display: none; }
    .categorias-icones-wrap { padding: 24px 10px; gap: 4px; }
    .categorias-icones { max-width: calc(100% - 76px); }
    .destaques-topo--teatro, .teatro-carrossel-wrap { padding-left: 20px; padding-right: 20px; }
    /* No mobile o card mostrava 1 inteiro + um pedaço do próximo cortado
       ao meio (largura fixa de 200px não acompanha a tela). Ocupando
       100% da trilha, só aparece 1 por vez -- comportamento de slide,
       arraste/seta troca pro próximo inteiro. Só no mobile -- desktop
       continua com vários cards visíveis lado a lado. */
    .teatro-card { flex-basis: 100%; }
    .grid-categoria, .grid-listagem, .planos-grid, .sp-grid { grid-template-columns: 1fr 1fr; }
    .sp-legenda, .sp-grid { padding-left: 20px; padding-right: 20px; }
    .sp-secao .destaques-topo { padding-left: 20px !important; padding-right: 20px !important; }

    .destaques-bento { display: flex; flex-direction: column; height: auto; padding: 16px 20px; }
    .destaques-bento > a { grid-column: unset !important; grid-row: unset !important; height: 220px; }
    .destaques-bento > a:nth-child(1) { height: 280px; }
    .destaques-bento > a:nth-child(1) h2 { font-size: 18px; }
    .destaques-bento > a:nth-child(1) .corpo { padding: 18px; }
    .destaque-semana-card, .rodape-grid, .ficha-corpo-geral, .form-contato,
    .secao-categoria--spotlight.invertida .destaque-semana-card { grid-template-columns: 1fr; }
    .secao-categoria--spotlight.invertida .destaque-semana-card .foto,
    .secao-categoria--spotlight.invertida .destaque-semana-card .corpo { order: unset; padding: 20px; }
    .destaque-semana-card .corpo { padding: 20px; }
    .categorias-trio, .categorias-duo { grid-template-columns: 1fr; gap: 8px; }
    .categoria-coluna { padding-bottom: 20px; border-bottom: 1px solid var(--linha); }
    .categoria-coluna:last-child { border-bottom: none; padding-bottom: 0; }
    .rodape-news { flex-direction: column; align-items: center; }
    .pagina-banner, .filtros-barra, .conteudo-pagina, .ficha-header { padding-left: 20px; padding-right: 20px; }
    .anuncie-stats, .anuncie-secao-titulo, .anuncie-passos { padding-left: 20px; padding-right: 20px; }
    .anuncie-passos-grid { grid-template-columns: 1fr; gap: 26px; }
    .contato-secao { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; }
    .sobre-links { padding-left: 20px; padding-right: 20px; }
    .busca-grande-wrap, .categoria-filtro-icones { padding-left: 20px; padding-right: 20px; }
    .comercio-hero { height: 200px; }
    .comercio-hero-logo { left: 20px; width: 76px; height: 76px; bottom: -36px; }
    .comercio-topo { padding: 50px 20px 40px; }
    .comercio-sobre-grid { grid-template-columns: 1fr; }
    .comercio-mapa { aspect-ratio: 16/10; }
    .comercio-cta-linha { max-width: none; flex-direction: column; }

    /* Menu vira um drawer deslizando da direita, dropdowns viram acordeão */
    .nav {
        position: fixed; top: 74px; left: 0; right: 0; bottom: 0; z-index: 99;
        background: #fff; flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 24px 24px; overflow-y: auto; transform: translate(0, 0) translateX(100%);
        transition: transform 0.25s ease; box-shadow: -8px 0 30px -12px rgba(16,23,39,0.15);
    }
    .nav.aberto { transform: translate(0, 0) translateX(0); }
    .nav > a { padding: 15px 0; border-bottom: 1px solid var(--linha); }
    .nav-dropdown { padding: 0; border-bottom: 1px solid var(--linha); }
    .nav-dropdown-gatilho { padding: 15px 0; border-bottom: none; justify-content: space-between; }
    .nav-dropdown-gatilho::after { opacity: 0.6; transition: transform 0.2s ease; }
    .nav-dropdown.painel-aberto .nav-dropdown-gatilho::after { transform: rotate(225deg); margin-top: 3px; }
    .nav-dropdown-painel {
        position: static; box-shadow: none; border: none; padding: 0 0 10px 12px; min-width: 0;
        background: transparent; border-radius: 0;
    }
    .nav-dropdown.painel-aberto .nav-dropdown-painel { display: flex; }
    .nav-dropdown-painel a { padding: 11px 12px; }
}
