* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: #f2f4f7; color: #1a1a2e; }
/* maozinha em tudo que e clicavel, mesmo sem href visivel (cards, botoes-span) */
a[href], [data-href], [role="link"], [role="button"] { cursor: pointer; }
.topo { background: #0a1128; padding: 22px 16px; display: flex; justify-content: center; }
.topo-inner { width: 100%; max-width: 1040px; }
.topo h1 { color: #fff; font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.topo .sub { color: #aeb8cc; font-size: 13px; margin-bottom: 14px; }
/* faixa de marca publica: full-width no cinza da pagina + inner alinhado ao header
   (mesmo max-width do .topo-inner); logo recuado 15px do inicio do titulo */
.marca-topo { background: #f2f4f7; padding: 10px 16px; display: flex; justify-content: center; }
.marca-topo-inner { width: 100%; max-width: 1040px; display: flex; align-items: center; }
.marca-logo { display: inline-block; margin-left: 15px; }
.marca-topo img { height: 52px; width: auto; display: block; }
.datas { display: flex; gap: 12px; width: 100%; align-items: stretch; cursor: pointer; }
.datas-editar { display: flex; align-items: center; color: #fff; background: #1a3a8f;
                border-radius: 6px; padding: 0 16px; font-size: 13px; font-weight: 700;
                white-space: nowrap; }
.campo { flex: 1; background: #fff; border-radius: 6px; padding: 8px 14px; }
.campo label { display: block; font-size: 11px; color: #6b7280; }
.campo span { font-weight: 700; }
.barra { max-width: 1040px; margin: 12px auto 6px; padding: 0 8px; display: flex;
         justify-content: space-between; font-size: 13px; color: #6b7280; }
.lista { max-width: 1040px; margin: 0 auto; padding: 0 8px 40px; }
.card-bloco { margin-bottom: 12px; }
/* cabecalho da lista de alternativas no modo ?hotel= (abaixo do destaque).
   Mesma fonte/cor do .nome do card-cta; padding lateral igual pra alinhar o texto */
.secao-perto { font-size: 13px; font-weight: 700; color: #1a3a8f;
               margin: 20px 0 15px; padding: 0 14px; }
.card { display: grid; grid-template-columns: 240px 1fr 200px; gap: 16px;
        background: #fff; border-radius: 8px; padding: 12px;
        text-decoration: none; color: inherit; position: relative;
        box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .15s; }
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.card.popular { background: #e8f0fe; }
.card.destaque { border: 2px solid #1a3a8f; border-radius: 8px 8px 0 0;
                 box-shadow: 0 4px 16px rgba(26,58,143,.18); }
.card.destaque .badge { background: #1a3a8f; }
/* barra-CTA abaixo do card: nome + Mapa | Fotos | Ofertas (clicaveis) */
.card-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            background: #eef1f6; padding: 8px 14px;
            font-size: 13px; border-top: 1px solid #dfe3ea; }
.card-cta .nome { font-weight: 700; color: #1a3a8f; margin-right: auto; }
.card-cta .nome-dist { font-weight: 400; font-size: 12px; color: #6b7280; margin-left: 6px; }
.card-cta a, .card-cta .map-link, .card-cta .review-link, .card-cta .foto-link {
                color: #1460aa; text-decoration: underline; font-weight: 600; cursor: pointer; }
.card-cta a:hover, .card-cta .map-link:hover, .card-cta .review-link:hover,
.card-cta .foto-link:hover { color: #0a1128; }
.beneficio { display: inline-block; margin-top: 6px; background: #e6f4ea; color: #0a7d33;
             font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; }
/* comodidades reais do hotel, dentro do card destaque (coluna .info) */
.perto .rot::after, .comodidades .rot::after { content: " ↴"; }
.info .comodidades { margin-top: 10px; }
.info .comodidades .rot { display: block; font-size: 11px; text-transform: uppercase;
                          letter-spacing: .04em; color: #6b7280; margin-bottom: 15px; }
.info .comodidades ul { list-style: none; flex: 1; display: grid;
                        grid-template-columns: repeat(3, 1fr); gap: 6px; }
.info .comodidades li { background: #eef1f6; border-radius: 14px; padding: 3px 10px;
                        font-size: 12px; color: #1a3a8f; text-align: center; }
/* painel do hotel-alvo: localizacao + microcopy editorial + trust honesto */
.enriquecimento { background: #fbfaf6; border-radius: 0 0 8px 8px; padding: 14px;
                  border-top: 1px dashed #dfe3ea; }
.enriquecimento .microcopy { font-size: 15px; line-height: 1.5; color: #2a2f3a;
                             font-style: italic; margin-bottom: 10px; }
.enriquecimento .local { font-size: 13px; color: #4b5563; margin-bottom: 8px; }
.enriquecimento .local strong { color: #1a3a8f; margin-right: 8px; }
.enriquecimento .perto { margin-bottom: 8px; }
.enriquecimento .perto .rot { display: block; font-size: 11px; text-transform: uppercase;
                              letter-spacing: .04em; color: #6b7280; margin-bottom: 14px; }
/* icone marcando a categoria a esquerda da fileira de chips (perto e comodidades) */
.chips-linha { display: flex; align-items: center; gap: 7px; }
.chips-linha .grupo-ic { flex: none; font-size: 15px; line-height: 22px; }
.enriquecimento .perto ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.enriquecimento .perto li { background: #eef1f6; border-radius: 14px; padding: 4px 11px;
                            font-size: 13px; color: #1a3a8f; }
.enriquecimento .perto li small { color: #6b7280; margin-left: 4px; }
.info .trust { font-size: 13px; color: #0a7d33; font-weight: 600; margin-bottom: 6px; }
.badge { position: absolute; top: 0; left: 0; background: #f4762a; color: #fff;
         font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 8px 0 8px 0; }
.foto img { width: 240px; height: 150px; object-fit: cover; border-radius: 6px; }
.info h2 { font-size: 18px; color: #1a3a8f; margin-bottom: 6px; }
.estrelas { color: #f4b400; font-size: 14px; }
.rating strong { font-size: 20px; }
.rating small { display: block; color: #6b7280; font-size: 12px; }
.preco { text-align: right; display: flex; flex-direction: column; justify-content: center;
         align-items: flex-end; }
.preco .preco-de { color: #9aa1ac; font-size: 14px; text-decoration: line-through; }
.preco .valor { color: #0a7d33; font-size: 22px; font-weight: 700; }
.preco small { color: #6b7280; font-size: 11px; }
.cta { margin-top: 8px; background: #1a3a8f; color: #fff; padding: 8px 16px;
       border-radius: 6px; font-weight: 700; font-size: 14px; }
.vazio { padding: 40px; text-align: center; color: #6b7280; }
/* modal de datas */
.modal-datas { position: fixed; inset: 0; background: rgba(10,17,40,.55); z-index: 100;
               display: none; align-items: center; justify-content: center; padding: 16px; }
.modal-datas.open { display: flex; }
.modal-box { background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 400px;
             position: relative; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.modal-box h2 { font-size: 20px; color: #0a1128; margin-bottom: 6px; }
.modal-box .modal-sub { font-size: 13px; color: #6b7280; margin-bottom: 18px; }
.modal-x { position: absolute; top: 10px; right: 14px; background: none; border: none;
           font-size: 26px; line-height: 1; color: #9aa1ac; cursor: pointer; }
.modal-campos { display: flex; gap: 12px; margin-bottom: 18px; }
.modal-campos label { flex: 1; display: flex; flex-direction: column; gap: 5px;
                      font-size: 12px; font-weight: 700; color: #4b5563; }
.modal-campos input { border: 1px solid #cbd2dc; border-radius: 6px; padding: 9px 10px;
                      font-size: 14px; font-family: inherit; color: #1a1a2e; }
.modal-ok { width: 100%; background: #1a3a8f; color: #fff; border: none; border-radius: 6px;
            padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer; }
.modal-ok:hover { background: #142e73; }
@media (max-width: 720px) {
  .card { grid-template-columns: 1fr; }
  .foto img { width: 100%; height: 180px; }
  .preco { text-align: left; align-items: flex-start; }
}

/* ===== /intel dashboard =====
   Bloco isolado do dashboard de inteligência competitiva. Tema claro, denso em
   dados, fonte Inter, azul #2563eb nos estados ativos. Aditivo: não altera as
   regras do MVP acima (mudança cirúrgica). Layout do protótipo Stitch (DASH-02). */
.intel-body { font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
              background: #f8fafc; color: #0f172a; }
.intel-shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

/* Sidebar-roadmap: mapa do produto, seções futuras esmaecidas com selo "em breve" */
.intel-sidebar { background: #0f172a; padding: 20px 14px; }
.intel-marca { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.5px;
               margin-bottom: 22px; padding: 0 8px; }
.intel-nav { display: flex; flex-direction: column; gap: 2px; }
.intel-nav-item { display: flex; align-items: center; justify-content: space-between;
                  gap: 8px; padding: 9px 10px; border-radius: 6px; font-size: 13px;
                  font-weight: 500; color: #cbd5e1; text-decoration: none; }
.intel-nav-item.ativo { background: #2563eb; color: #fff; font-weight: 600; }
.intel-nav-item.desabilitado { color: #64748b; cursor: not-allowed; }
.badge-embreve { font-size: 10px; font-weight: 600; text-transform: uppercase;
                 letter-spacing: .4px; background: #1e293b; color: #94a3b8;
                 padding: 2px 6px; border-radius: 10px; white-space: nowrap; }

/* Main */
.intel-main { padding: 24px 28px 48px; }
.intel-header { display: flex; flex-wrap: wrap; align-items: flex-start;
                justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.intel-titulo h1 { font-size: 22px; font-weight: 700; color: #0f172a; }
.intel-tagline { font-size: 13px; color: #64748b; margin-top: 2px; }

/* Pills dos geos */
.geo-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-pill { border: 1px solid #cbd5e1; background: #fff; color: #334155;
            font-family: inherit; font-size: 12px; font-weight: 600;
            padding: 6px 12px; border-radius: 999px; cursor: pointer;
            transition: all .12s; }
.geo-pill:hover { border-color: #2563eb; color: #2563eb; }
.geo-pill.ativo { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Sub-header: âncora + provenance */
.intel-subheader { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
                   margin: 12px 0 16px; padding: 10px 14px; background: #eff6ff;
                   border-left: 3px solid #2563eb; border-radius: 6px; }
.intel-ancora { font-size: 13px; font-weight: 600; color: #1e3a8a; }
.intel-fonte { font-size: 11px; color: #64748b; }

/* Faixa de KPIs */
.kpi-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
            margin-bottom: 18px; }
.kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
            padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-valor { font-size: 24px; font-weight: 700; color: #0f172a; line-height: 1; }
.kpi-rotulo { font-size: 12px; color: #64748b; font-weight: 500; }

/* Controles: toggle de nível + busca */
.intel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
                  margin-bottom: 12px; }
.nivel-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 6px;
                overflow: hidden; }
.nivel-toggle button { font-family: inherit; font-size: 13px; font-weight: 600;
                       padding: 7px 14px; border: none; background: #fff;
                       color: #475569; cursor: pointer; }
.nivel-toggle button + button { border-left: 1px solid #cbd5e1; }
.nivel-toggle button.ativo { background: #2563eb; color: #fff; }
.intel-busca { flex: 1; min-width: 200px; max-width: 340px; font-family: inherit;
               font-size: 13px; padding: 8px 12px; border: 1px solid #cbd5e1;
               border-radius: 6px; color: #0f172a; }
.intel-busca:focus { outline: none; border-color: #2563eb;
                     box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* Tabela densa */
.intel-tabela-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
                     overflow-x: auto; }
.intel-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.intel-tabela thead th { position: sticky; top: 0; background: #f1f5f9; color: #475569;
                         font-weight: 600; text-align: left; padding: 10px 12px;
                         border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.intel-tabela th.num, .intel-tabela td.num { text-align: right; }
.th-ordenavel { cursor: pointer; user-select: none; }
.th-ordenavel:hover { color: #2563eb; }
.th-ordenavel.ordenado { color: #2563eb; }
.intel-tabela tbody td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
                         color: #1e293b; white-space: nowrap; }
.intel-tabela tbody tr:hover { background: #f8fafc; }
.intel-tabela tbody tr.linha-topo { background: #eff6ff; }
.intel-tabela tbody tr.linha-topo:hover { background: #dbeafe; }
.col-expandir { width: 28px; text-align: center; }
.btn-expandir { background: none; border: none; color: #2563eb; font-size: 12px;
                cursor: pointer; padding: 2px 4px; line-height: 1; }

/* Sub-tabela do drill-down */
.linha-drill > td { padding: 0 12px 10px 40px; background: #f8fafc; }
.intel-subtabela { width: 100%; border-collapse: collapse; font-size: 12px;
                   margin-top: 4px; }
.intel-subtabela th { text-align: left; padding: 6px 10px; color: #64748b;
                      font-weight: 600; border-bottom: 1px solid #e2e8f0; }
.intel-subtabela th.num, .intel-subtabela td.num { text-align: right; }
.intel-subtabela td { padding: 5px 10px; color: #334155;
                      border-bottom: 1px solid #eef2f6; }

.intel-vazio { padding: 28px; text-align: center; color: #64748b; font-size: 13px; }

@media (max-width: 720px) {
  .intel-shell { grid-template-columns: 1fr; }
  .intel-sidebar { display: none; }
  .kpi-band { grid-template-columns: repeat(2, 1fr); }
}

/* Link do rotulo para a landing real do concorrente (tema Stitch) */
.intel-link { color: #2563eb; text-decoration: none; }
.intel-link:hover { text-decoration: underline; }
/* Icone da coluna Link: abre a landing que geramos (cinza discreto, azul no hover) */
.link-landing-icon { display: inline-flex; align-items: center;
                     justify-content: center; color: #94a3b8; }
.link-landing-icon:hover { color: #2563eb; }
.link-landing-icon svg { display: block; }

/* Badge de oportunidade: Home de alto volume no top-25% do pais */
.badge-oportunidade { display: inline-block; margin-left: 6px; padding: 1px 7px;
                      font-size: 10px; font-weight: 600; text-transform: uppercase;
                      letter-spacing: .3px; color: #2563eb; background: #eff6ff;
                      border: 1px solid #bfdbfe; border-radius: 999px;
                      vertical-align: middle; }

/* Badges de status da superficie de revisao /intel/landings (Phase 7, D-03) */
.badge-status { display: inline-block; padding: 1px 8px; border-radius: 10px;
                font-size: 11px; font-weight: 600; text-transform: uppercase;
                letter-spacing: .3px; }
.status-resolvido { background: #dcfce7; color: #166534; }
.status-quente    { background: #ffedd5; color: #9a3412; }
.status-frio      { background: #dbeafe; color: #1e40af; }
.status-pulado    { background: #fee2e2; color: #991b1b; }

/* ===== pagina de cidade (Phase 10) =====
   Aditivo ao design system publico (Arial, tokens do MVP acima). Reusa
   .marca-topo/.topo/.badge/.foto img/.info h2/.estrelas/.cta/.vazio; so as
   pecas novas (intro editorial, byline, heading, card de cidade, rodape
   global) entram aqui. NAO altera regra existente (mudanca cirurgica). */
.cidade-intro { max-width: 1040px; margin: 24px auto 0; padding: 0 14px; }
.cidade-intro p { font-size: 15px; line-height: 1.5; color: #1a1a2e;
                  margin-bottom: 24px; }
.cidade-byline { font-size: 13px; color: #6b7280; }
.byline-autor { color: #1a3a8f; font-weight: 700; text-decoration: none; }
.byline-data { color: #6b7280; }
.cidade-heading { font-size: 18px; font-weight: 700; color: #1a3a8f;
                  max-width: 1040px; margin: 24px auto 15px; padding: 0 14px; }
.cidade-card { display: grid; grid-template-columns: 240px 1fr 200px; gap: 16px;
               background: #fff; border-radius: 8px; padding: 12px;
               position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.08);
               transition: box-shadow .15s; margin-bottom: 12px; }
.cidade-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.foto-vazia { width: 240px; height: 150px; background: #e5e7eb; border-radius: 6px; }
.chip-nota { display: inline-block; font-size: 13px; color: #6b7280;
             margin-bottom: 6px; }
.cidade-desc { font-size: 15px; line-height: 1.5; color: #1a1a2e; }
.cidade-card .acao { display: flex; align-items: center; justify-content: flex-end; }
/* Sticky footer nas paginas publicas: body em coluna ocupa a viewport inteira e o
   margin-top auto empurra o rodape (e sua linha) pro fim quando o conteudo e curto.
   Escopado com :not(.intel-body) pra nao afetar o dashboard /intel (grid proprio). */
body:not(.intel-body) { display: flex; flex-direction: column; min-height: 100vh; }
.rodape-publico { background: #f2f4f7; padding: 24px 14px; margin-top: auto;
                  border-top: 2px solid #0a1128; }
.rodape-inner { max-width: 1040px; margin: 0 auto; }
.disclosure { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
.rodape-links a { font-size: 13px; color: #1a3a8f; text-decoration: none;
                  margin-right: 18px; }
@media (max-width: 720px) {
  .cidade-card { grid-template-columns: 1fr; }
  .foto-vazia { width: 100%; height: 180px; }
  .cidade-card .foto img { width: 100%; height: 180px; }
  .cidade-card .acao { justify-content: flex-start; }
}

/* ===== home de destinos (Phase 11) =====
   Card VERTICAL de vitrine da cidade (distinto do .cidade-card horizontal).
   Aditivo; reusa .foto-vazia/.vazio/.cidade-heading do bloco acima. */
.home-grid { max-width: 1040px; margin: 24px auto 48px; padding: 0 14px;
             display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cidade-home-card { display: block; background: #fff; border-radius: 8px;
                    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
                    transition: box-shadow .15s; text-decoration: none;
                    color: inherit; }
.cidade-home-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cidade-home-card .foto img { width: 100%; height: 180px; object-fit: cover;
                              display: block; }
.cidade-home-card .foto-vazia { width: 100%; height: 180px; background: #e5e7eb; }
.cidade-home-card .info { padding: 12px 14px 16px; }
.cidade-home-card h2 { font-size: 18px; font-weight: 700; color: #1a3a8f;
                       margin: 0 0 6px; }
.home-snippet { font-size: 15px; line-height: 1.5; color: #1a1a2e; margin: 0; }
@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* Paginas institucionais (/about, /contato, /metodologia, /privacidade — Plan 04).
   Aditivo: reusa .marca-topo/.topo/.rodape-publico; so o corpo de texto e novo. */
.pagina-inst { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; }
.pagina-inst h2 { color: #1a3a8f; font-size: 18px; margin: 24px 0 8px; }
.pagina-inst p { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.pagina-inst a { color: #1a3a8f; }

/* Painel /intel/campanhas (Phase 15, REL-02/REL-03): banner de disapproval
   "impossivel de nao ver" no topo (D-08) + badge do policy topic por ad group.
   Aditivo, sem refatorar o existente. */
.banner-disapproval { background: #fef2f2; border: 1px solid #fca5a5;
                      color: #991b1b; padding: 12px 16px; border-radius: 8px;
                      margin-bottom: 16px; font-weight: 600; }
.badge-policy { display: inline-block; margin-left: 6px; padding: 1px 8px;
                border-radius: 10px; font-size: 11px; font-weight: 600;
                background: #fee2e2; color: #991b1b; }