/* ========================================================================== 
   SJB NA MÍDIA — V5.6 RESPONSIVO FINAL
   Arquivo carregado APÓS style.css e legacy.css.
   Objetivo: uma camada única e previsível para tablet/smartphone, evitando
   conflitos com regras antigas e patches acumulados.
   ========================================================================== */

/* -------------------------- Salvaguardas gerais --------------------------- */
html, body.site-body { max-width:100%; overflow-x:hidden; }
body.site-body { min-width:0; }
.site-body img { max-width:100%; }
.site-body main, .site-body section, .site-body article, .site-body aside { min-width:0; }

/* O cabeçalho deve rolar com a página, nunca acompanhar o usuário. */
.main-header {
  position:relative !important;
  top:auto !important;
  inset:auto !important;
}

/* ---------------------------- Desktop refinado ---------------------------- */
@media (min-width:901px) {
  .home-hero-section { padding:20px 0 8px; }
  .feature-slides { min-height:440px; }
  .feature-content { padding:26px 30px 24px; }
  .feature-content h1 { max-width:900px; font-size:clamp(28px,2.7vw,40px); line-height:1.04; }

  .story-card,
  .more-story-card,
  .sidebar-widget,
  .related .mini-card {
    border:0 !important;
    box-shadow:0 7px 24px rgba(10,40,68,.075) !important;
  }
}

/* ------------------------------ Tablet ------------------------------------ */
@media (max-width:900px) {
  .container { width:min(calc(100% - 28px), var(--container)) !important; }

  .header-main-content {
    min-height:68px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding-top:4px;
    padding-bottom:4px;
  }
  .header-brand-group { min-width:0; }
  .header-brand-copy, .header-quick-actions { display:none !important; }
  .site-logo-img { width:124px !important; max-height:52px !important; filter:none !important; }
  .header-actions { display:flex !important; gap:7px !important; }
  .header-search-toggle,
  .menu-toggle {
    width:40px !important;
    height:40px !important;
    border:1px solid #e0e7ee !important;
    border-radius:11px !important;
    background:#f7f9fb !important;
    color:var(--navy-900) !important;
  }

  .header-search {
    display:none !important;
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    min-height:44px !important;
    margin:0 0 8px !important;
    border:1px solid #dbe4ec !important;
    border-radius:12px !important;
    background:#f8fafc !important;
    box-shadow:none !important;
  }
  .header-search.open { display:flex !important; }
  .search-input-wrap input { height:44px !important; font-size:16px !important; }
  .search-button { min-width:52px !important; width:52px !important; margin:3px !important; padding:0 !important; border-radius:9px !important; }
  .search-button span { display:none !important; }

  .main-nav {
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    z-index:1000 !important;
    max-height:min(72vh,560px) !important;
    overflow:auto !important;
    background:var(--navy-900) !important;
    box-shadow:0 18px 34px rgba(6,28,51,.22) !important;
  }
  .nav-list { display:grid !important; gap:0 !important; }
  .nav-item { min-height:46px !important; padding:0 18px !important; border-bottom:1px solid rgba(255,255,255,.07) !important; color:#edf4f8 !important; }

  .home-content-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .home-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
  .home-sidebar .advertisement,
  .home-sidebar .ad-slot,
  .home-sidebar .sidebar-ad { grid-column:1 / -1 !important; }
}

/* ------------------------- Smartphone principal --------------------------- */
@media (max-width:760px) {
  :root { --radius:14px; --radius-sm:12px; }

  .container { width:calc(100% - 24px) !important; }
  .top-bar { display:none !important; }

  /* Header compacto: logo + lupa + menu. */
  .header-main { border-bottom:1px solid #edf1f5 !important; }
  .header-main-content {
    width:calc(100% - 24px) !important;
    min-height:64px !important;
    padding:3px 0 !important;
  }
  .site-logo-img { width:116px !important; max-height:48px !important; }
  .header-search-toggle,
  .menu-toggle { width:38px !important; height:38px !important; border-radius:10px !important; }

  /* Hero é definido somente no bloco editorial V5.11 abaixo.
     Removemos a versão intermediária para evitar sobreposição de regras. */

  /* Ritmo geral da Home. */
  .home-shell { padding-top:20px !important; padding-bottom:36px !important; }
  .home-primary { gap:30px !important; }
  .home-section { min-width:0 !important; }

  /* Cabeçalhos de seção: sempre alinhados à esquerda, sem saltos estranhos. */
  .section-heading {
    min-height:0 !important;
    margin:0 0 12px !important;
    padding:0 0 10px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:10px !important;
    border-bottom:1px solid #e7edf2 !important;
    text-align:left !important;
  }
  .section-heading > div { min-width:0 !important; margin:0 !important; text-align:left !important; }
  .section-kicker { margin:0 0 3px !important; font-size:8.5px !important; letter-spacing:.13em !important; }
  .section-heading h2 {
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    color:var(--navy-900) !important;
    font-size:22px !important;
    line-height:1.05 !important;
    text-align:left !important;
  }
  .section-heading h2::before { width:4px !important; height:25px !important; flex:0 0 4px !important; }
  .section-heading > a {
    flex:0 0 auto !important;
    margin:0 !important;
    padding:7px 10px !important;
    border:1px solid #f0bdc3 !important;
    border-radius:999px !important;
    background:#fff7f8 !important;
    color:var(--red-600) !important;
    font-size:8.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Últimas notícias: sempre imagem em cima + texto embaixo. */
  .story-list { gap:12px !important; }
  .story-card,
  .story-card--lead {
    display:block !important;
    grid-template-columns:none !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:13px !important;
    background:#fff !important;
    box-shadow:0 5px 18px rgba(10,40,68,.075) !important;
    transform:none !important;
  }
  .story-media,
  .story-card--lead .story-media {
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    overflow:hidden !important;
    background:#e8eef3 !important;
  }
  .story-media img { width:100% !important; height:100% !important; object-fit:cover !important; }
  .story-media.image-fit-contain img { object-fit:contain !important; }
  .story-body { padding:13px 14px 14px !important; }
  .story-meta-top { gap:6px !important; }
  .story-category { font-size:9px !important; }
  .urgent-text { font-size:8px !important; }
  .story-body h3,
  .story-card--lead .story-body h3 {
    margin:6px 0 !important;
    font-size:18px !important;
    line-height:1.18 !important;
    letter-spacing:-.2px !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .story-body time { font-size:9px !important; }
  .story-body p {
    margin:7px 0 0 !important;
    font-size:11.5px !important;
    line-height:1.45 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .story-read { margin-top:0 !important; padding-top:9px !important; align-self:flex-end !important; font-size:9px !important; }

  /* Mais notícias: também vertical; regra antiga de 430px não pode voltar a
     colocar uma miniatura estreita na lateral. */
  .more-story-grid { grid-template-columns:1fr !important; gap:12px !important; }
  .more-story-card {
    display:block !important;
    grid-template-columns:none !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:13px !important;
    background:#fff !important;
    box-shadow:0 5px 18px rgba(10,40,68,.07) !important;
  }
  .more-story-media {
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
  }
  .more-story-media img { width:100% !important; height:100% !important; object-fit:cover !important; }
  .more-story-media.image-fit-contain img { object-fit:contain !important; }
  .more-story-body { padding:12px 13px 13px !important; }
  .more-story-body h3 { margin:5px 0 7px !important; font-size:16px !important; line-height:1.22 !important; -webkit-line-clamp:2 !important; }
  .more-story-body time { font-size:9px !important; }

  /* Agenda: cartões mais baixos e fáceis de escanear. */
  .city-agenda-grid { grid-template-columns:1fr !important; gap:9px !important; }
  .city-agenda-card {
    grid-template-columns:50px minmax(0,1fr) !important;
    gap:11px !important;
    min-height:76px !important;
    padding:11px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#f6f8fb !important;
  }
  .city-agenda-date { width:50px !important; height:50px !important; border-radius:11px !important; }
  .city-agenda-date strong { font-size:19px !important; }
  .city-agenda-card h3 { margin:2px 0 3px !important; font-size:12.5px !important; line-height:1.22 !important; }
  .city-agenda-card p { font-size:9px !important; line-height:1.25 !important; }

  /* Serviços: 2x2 para reduzir rolagem; no telefone muito estreito volta a 1 coluna. */
  .useful-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  .useful-service {
    min-height:94px !important;
    padding:12px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:9px !important;
    border:0 !important;
    border-radius:12px !important;
    background:#f6f8fb !important;
  }
  .useful-service > i { width:34px !important; height:34px !important; flex:0 0 34px !important; border-radius:9px !important; font-size:13px !important; }
  .useful-service div { gap:2px !important; }
  .useful-service strong { font-size:11.5px !important; line-height:1.18 !important; }
  .useful-service span { font-size:9px !important; line-height:1.25 !important; }

  /* Categorias: 2 colunas estáveis e compactas. */
  .category-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  .category-shortcuts a {
    min-height:68px !important;
    padding:10px !important;
    gap:9px !important;
    border:0 !important;
    border-radius:11px !important;
    background:#f6f8fb !important;
    box-shadow:inset 0 0 0 1px #e9eef3 !important;
  }
  .category-shortcut-icon { width:30px !important; height:30px !important; flex:0 0 30px !important; border-radius:8px !important; font-size:12px !important; }
  .category-shortcuts strong { font-size:12px !important; line-height:1.15 !important; white-space:normal !important; }
  .category-shortcuts small { font-size:8.5px !important; }
  .category-shortcut-arrow { display:none !important; }

  /* Sidebar da home em uma coluna limpa. */
  .home-sidebar { grid-template-columns:1fr !important; gap:12px !important; }
  .sidebar-widget { border:0 !important; border-radius:13px !important; box-shadow:0 5px 18px rgba(10,40,68,.06) !important; }

  /* Páginas de categoria e busca. */
  .page-title { padding:22px 0 16px !important; }
  .page-title h1 { font-size:27px !important; line-height:1.08 !important; }
  .layout { grid-template-columns:1fr !important; gap:22px !important; padding-bottom:36px !important; }
  .news-list { gap:12px !important; }
  .news-list .news-card {
    display:block !important;
    grid-template-columns:none !important;
    min-height:0 !important;
    border:0 !important;
    border-radius:13px !important;
    box-shadow:0 5px 18px rgba(10,40,68,.07) !important;
  }
  .news-list .news-card .thumb { width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:16/9 !important; }
  .news-list .news-body { padding:13px 14px 14px !important; }
  .news-list .news-body h2 { font-size:18px !important; line-height:1.2 !important; }
  .news-list .news-body p { font-size:12px !important; line-height:1.45 !important; }
  .layout > .sidebar { grid-template-columns:1fr !important; }

  /* Matéria: tipografia confortável e sidebar abaixo, sem sobreposição. */
  .article-page { width:100% !important; padding:22px 12px 38px !important; }
  .article-header { max-width:none !important; margin:0 0 17px !important; }
  .article-header .label { padding:4px 8px !important; font-size:9px !important; }
  .article-header h1 { margin:10px 0 9px !important; font-size:clamp(29px,8.4vw,36px) !important; line-height:1.06 !important; letter-spacing:-.55px !important; }
  .article-header > p { font-size:15.5px !important; line-height:1.45 !important; }
  .article-header .news-meta { margin-top:11px !important; font-size:10px !important; }
  .article-image-frame {
    width:100% !important;
    margin:0 auto 20px !important;
    aspect-ratio:16/9 !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }
  .article-grid { grid-template-columns:1fr !important; gap:22px !important; }
  .article-content { max-width:none !important; font-size:16.5px !important; line-height:1.68 !important; }
  .article-content p { margin:0 0 1.1em !important; }
  .article-grid > .sidebar { grid-template-columns:1fr !important; }
  .share-box { margin-top:26px !important; padding:14px !important; border-radius:12px !important; }
  .share { min-height:38px !important; justify-content:center !important; }
  .related { margin-top:30px !important; }
  .related > h2 { font-size:20px !important; }
  .related-grid { grid-template-columns:1fr !important; gap:11px !important; }
  .related .mini-card { border:0 !important; border-radius:12px !important; box-shadow:0 5px 16px rgba(10,40,68,.065) !important; }
  .related .mini-card-img { aspect-ratio:16/9 !important; }
  .related .mini-card-body { padding:11px 12px 12px !important; }
  .related .mini-card-body h3 { font-size:16px !important; line-height:1.22 !important; }

  /* Publicidade nunca ultrapassa o telefone. */
  .ad-slot,.ad-card,.advertisement,.sidebar-ad,.home-horizontal-ad,.custom-footer-banner-wrap { max-width:100% !important; overflow:hidden !important; }
  .ad-slot img,.ad-card img,.advertisement img,.sidebar-ad img,.home-horizontal-ad img { width:100% !important; height:auto !important; object-fit:contain !important; }

  /* Rodapé mobile: marca central, links compactos e sem coluna perdida. */
  .main-footer { margin-top:24px !important; }
  .main-footer .footer-content {
    width:calc(100% - 28px) !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:24px 18px !important;
    padding:27px 0 23px !important;
  }
  .main-footer .footer-brand-col {
    grid-column:1 / -1 !important;
    align-items:center !important;
    text-align:center !important;
    gap:10px !important;
  }
  .main-footer .footer-logo .site-logo-img { width:112px !important; }
  .main-footer .footer-description { max-width:34ch !important; margin-inline:auto !important; font-size:11.5px !important; }
  .main-footer .footer-social-wrap { justify-content:center !important; }
  .main-footer .footer-heading { margin-bottom:10px !important; font-size:10px !important; }
  .main-footer .footer-links-list { gap:7px !important; }
  .main-footer .footer-links-list a { font-size:11px !important; }
  .main-footer .footer-content > .footer-col:last-child { grid-column:1 / -1 !important; text-align:center !important; }
  .main-footer .footer-content > .footer-col:last-child .footer-links-list { justify-content:center !important; }
  .main-footer .footer-bottom-content { width:calc(100% - 28px) !important; padding:13px 0 15px !important; gap:3px !important; }
}

/* --------------------------- Telefones estreitos -------------------------- */
@media (max-width:360px) {
  .container { width:calc(100% - 20px) !important; }
  .header-main-content { width:calc(100% - 20px) !important; }
  .site-logo-img { width:108px !important; }
  .header-search-toggle,.menu-toggle { width:36px !important; height:36px !important; }

  .feature-content { padding:12px 12px 13px !important; }
  .feature-content h1 { font-size:20px !important; }
  .feature-content p { display:none !important; }

  .section-heading h2 { font-size:20px !important; }
  .section-heading > a { padding:6px 8px !important; font-size:8px !important; }

  .useful-service-grid { grid-template-columns:1fr !important; }
  .useful-service { min-height:68px !important; flex-direction:row !important; align-items:center !important; }

  .category-shortcuts { gap:7px !important; }
  .category-shortcuts a { min-height:64px !important; padding:9px !important; gap:7px !important; }
  .category-shortcut-icon { width:28px !important; height:28px !important; flex-basis:28px !important; }
  .category-shortcuts strong { font-size:11px !important; }

  .article-page { padding-inline:10px !important; }
  .article-header h1 { font-size:28px !important; }

  .main-footer .footer-content { width:calc(100% - 22px) !important; gap:22px 14px !important; }
}

/* Respeita usuários que preferem menos animação. */
@media (prefers-reduced-motion:reduce) {
  .story-card,.more-story-card,.city-agenda-card,.useful-service,.category-shortcuts a { transform:none !important; }
}

/* ========================================================================== 
   SJB NA MÍDIA — V5.11 HERO EDITORIAL MOBILE CONSOLIDADO
   Escopo: somente destaque principal em smartphones.
   Objetivo: remover aparência de card genérico e entregar um hero editorial
   compacto, legível e confortável para uso por toque.
   ========================================================================== */
@media (max-width:760px) {
  /* Um pouco mais de presença visual sem encostar nas bordas do aparelho. */
  .home-hero-section {
    padding:8px 0 8px !important;
  }
  .home-hero-section .home-hero-grid {
    width:100% !important;
    max-width:none !important;
    margin-inline:auto !important;
  }

  .feature-carousel {
    overflow:hidden !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 12px 34px rgba(7,37,64,.12) !important;
  }

  .feature-slide {
    background:#fff !important;
  }

  /* A imagem continua responsiva e respeita o modo cover/contain da notícia. */
  .feature-media {
    aspect-ratio:2 / 1 !important;
    isolation:isolate !important;
    background:#0b2945 !important;
  }
  .feature-media::after {
    display:block !important;
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    inset:0 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(4,22,39,.02) 45%,rgba(4,22,39,.20) 100%) !important;
  }
  .feature-media.image-fit-contain::after {
    display:block !important;
    background:linear-gradient(180deg,rgba(4,22,39,0) 58%,rgba(4,22,39,.16) 100%) !important;
  }

  /* Contador discreto deixa claro que existe mais de um destaque. */
  .feature-slide-count {
    position:absolute !important;
    z-index:4 !important;
    top:11px !important;
    right:11px !important;
    min-width:48px !important;
    height:27px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    padding:0 9px !important;
    border:1px solid rgba(255,255,255,.24) !important;
    border-radius:999px !important;
    background:rgba(5,28,49,.58) !important;
    color:rgba(255,255,255,.72) !important;
    font-family:var(--font-body) !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    backdrop-filter:blur(8px) !important;
    -webkit-backdrop-filter:blur(8px) !important;
  }
  .feature-slide-count strong {
    color:#fff !important;
    font-size:10px !important;
    font-weight:800 !important;
  }

  /* O conteúdo vira uma "folha editorial" que invade levemente a imagem. */
  .feature-content {
    position:relative !important;
    z-index:5 !important;
    margin-top:0 !important;
    padding:18px 16px 15px !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  .feature-labels {
    margin:0 0 9px !important;
    gap:6px !important;
  }
  .category-chip,
  .urgent-chip {
    min-height:23px !important;
    padding:0 8px !important;
    border-radius:999px !important;
    font-family:var(--font-body) !important;
    font-size:8.5px !important;
    letter-spacing:.075em !important;
    font-weight:800 !important;
  }
  .category-chip {
    border:1px solid #f3d7da !important;
    background:#fff6f7 !important;
    color:var(--red-600) !important;
  }

  .feature-content h1 {
    max-width:none !important;
    margin:0 !important;
    color:var(--navy-900) !important;
    font-size:clamp(22px,6.2vw,25px) !important;
    line-height:1.08 !important;
    letter-spacing:-.55px !important;
    font-weight:750 !important;
    -webkit-line-clamp:3 !important;
  }
  .feature-content h1 a {
    color:inherit !important;
  }

  .feature-content p {
    margin:8px 0 0 !important;
    max-width:42ch !important;
    color:#667a8c !important;
    font-size:12.5px !important;
    line-height:1.42 !important;
    -webkit-line-clamp:2 !important;
  }

  .feature-footer {
    margin-top:13px !important;
    padding-top:12px !important;
    border-top:1px solid #edf1f4 !important;
    align-items:center !important;
  }
  .feature-footer time {
    color:#8a98a6 !important;
    font-family:var(--font-body) !important;
    font-size:9px !important;
    font-weight:600 !important;
  }

  /* CTA mais editorial: texto + círculo vermelho em vez de botão pesado. */
  .feature-read {
    min-height:30px !important;
    gap:7px !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--red-600) !important;
    font-family:var(--font-body) !important;
    font-size:10px !important;
    font-weight:800 !important;
  }
  .feature-read span {
    width:27px !important;
    height:27px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:var(--red-600) !important;
    color:#fff !important;
    font-size:13px !important;
    transition:transform .18s ease !important;
  }
  .feature-read:active span {
    transform:translateX(2px) !important;
  }

  /* No telefone o carrossel funciona por swipe. Setas grandes só poluem. */
  .feature-arrow {
    display:none !important;
  }

  /* Indicador compacto fica dentro da imagem, como em apps editoriais. */
  .feature-dots {
    left:12px !important;
    right:auto !important;
    top:calc((100vw - 16px) * .5 - 22px) !important;
    bottom:auto !important;
    transform:none !important;
    gap:4px !important;
    padding:5px 7px !important;
    border-radius:999px !important;
    background:rgba(5,28,49,.42) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }
  .feature-dots button {
    width:14px !important;
    height:3px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.50) !important;
  }
  .feature-dots button.active {
    width:28px !important;
    height:3px !important;
    background:#fff !important;
  }

  /* Feedback visual de toque sem animação exagerada. */
  .feature-media,
  .feature-read,
  .feature-dots button {
    -webkit-tap-highlight-color:transparent !important;
  }
}

@media (max-width:430px) {
  .home-hero-section .home-hero-grid {
    width:100% !important;
  }
  .feature-content {
    margin-top:0 !important;
    padding:16px 14px 14px !important;
  }
  .feature-content h1 {
    font-size:clamp(21px,6.4vw,24px) !important;
  }
  .feature-content p {
    font-size:12px !important;
  }
  .feature-dots {
    top:calc((100vw - 14px) * .5 - 21px) !important;
  }
}

@media (max-width:360px) {
  .feature-content {
    padding:15px 13px 13px !important;
  }
  .feature-content h1 {
    font-size:20px !important;
    -webkit-line-clamp:3 !important;
  }
  .feature-content p {
    display:-webkit-box !important;
    font-size:11.5px !important;
    -webkit-line-clamp:2 !important;
  }
  .feature-footer {
    margin-top:11px !important;
    padding-top:10px !important;
  }
}


/* ========================================================================
   V5.12 — PUBLICIDADE 1200×200 NO SMARTPHONE
   Mantém proporção 6:1 e reduz os espaços verticais sem deformar a arte.
   ======================================================================== */
@media (max-width:760px) {
  .home-top-ad-wrap,
  .footer-managed-ad-wrap {
    width:calc(100% - 24px) !important;
    margin:10px auto 12px !important;
  }

  .managed-ad--home_top,
  .managed-ad--home_horizontal,
  .managed-ad--footer {
    width:100% !important;
    max-width:none !important;
    margin:10px auto !important;
    padding:0 !important;
  }

  .managed-ad--home_top .managed-ad-legacy-item,
  .managed-ad--home_top .managed-ad-campaign,
  .managed-ad--home_horizontal .managed-ad-legacy-item,
  .managed-ad--home_horizontal .managed-ad-campaign,
  .managed-ad--footer .managed-ad-legacy-item,
  .managed-ad--footer .managed-ad-campaign,
  .managed-ad--home_top img,
  .managed-ad--home_horizontal img,
  .managed-ad--footer img {
    aspect-ratio:6 / 1 !important;
    border-radius:9px !important;
  }
}

/* ========================================================================
   V5.13 — MAIS NOTÍCIAS NO SMARTPHONE
   A principal continua visual; as demais viram linhas compactas para reduzir
   a rolagem e evitar oito cards grandes empilhados.
   ======================================================================== */
@media (max-width:760px) {
  .home-section--more-news .section-heading { margin-bottom:11px !important; }
  .more-news-editorial { display:block !important; }
  .more-news-lead {
    border:0 !important;
    border-radius:13px !important;
    box-shadow:none !important;
    filter:none !important;
  }
  .more-news-lead-media { aspect-ratio:16/9 !important; }
  .more-news-lead-body { padding:13px 14px 14px !important; }
  .more-news-lead-body h3 {
    margin:5px 0 6px !important;
    font-size:19px !important;
    line-height:1.16 !important;
    text-shadow:none !important;
    filter:none !important;
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
  .more-news-lead-body h3 a,
  .more-news-lead-body p {
    text-shadow:none !important;
    filter:none !important;
  }
  .more-news-lead-body p {
    font-size:11.5px !important;
    line-height:1.42 !important;
    -webkit-line-clamp:2 !important;
  }
  .more-news-meta { padding-top:10px !important; }

  .more-news-side-list,
  .more-news-bottom-grid {
    margin-top:10px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    gap:8px !important;
  }
  .more-news-side-card,
  .more-news-mini-card {
    display:grid !important;
    grid-template-columns:112px minmax(0,1fr) !important;
    min-height:88px !important;
    border:0 !important;
    border-radius:11px !important;
    background:#fff !important;
    box-shadow:0 4px 14px rgba(10,40,68,.055) !important;
  }
  .more-news-side-media,
  .more-news-mini-media {
    width:112px !important;
    min-height:88px !important;
    aspect-ratio:auto !important;
  }
  .more-news-side-body,
  .more-news-mini-body { padding:9px 10px !important; }
  .more-news-side-body h3,
  .more-news-mini-body h3 {
    margin:3px 0 5px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    -webkit-line-clamp:2 !important;
  }
  .more-news-side-body .story-category,
  .more-news-mini-body .story-category { font-size:8px !important; }
  .more-news-side-body time,
  .more-news-mini-body time { font-size:8.5px !important; }
}

@media (max-width:380px) {
  .more-news-side-card,
  .more-news-mini-card { grid-template-columns:96px minmax(0,1fr) !important; min-height:80px !important; }
  .more-news-side-media,
  .more-news-mini-media { width:96px !important; min-height:80px !important; }
  .more-news-side-body h3,
  .more-news-mini-body h3 { font-size:12px !important; }
}

/* ========================================================================== 
   SJB NA MÍDIA — V5.15 RODAPÉ MOBILE COMPACTO
   Estrutura mobile:
   1) marca + descrição + redes
   2) Categorias à esquerda
   3) Serviços e Portal empilhados à direita
   Evita o grande vazio que surgia abaixo de Serviços.
   ========================================================================== */
@media (max-width:760px) {
  .main-footer {
    margin-top:22px !important;
    border-top-width:2px !important;
  }

  .main-footer .footer-content {
    width:calc(100% - 28px) !important;
    display:block !important;
    padding:24px 0 20px !important;
  }

  .main-footer .footer-brand-col {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 22px !important;
    text-align:center !important;
  }

  .main-footer .footer-logo {
    margin:0 !important;
  }

  .main-footer .footer-logo .site-logo-img {
    width:92px !important;
    max-height:none !important;
  }

  .main-footer .footer-description {
    max-width:31ch !important;
    margin:0 auto 2px !important;
    color:#9db1c2 !important;
    font-size:10.5px !important;
    line-height:1.42 !important;
  }

  .main-footer .footer-social-wrap {
    justify-content:center !important;
    gap:7px !important;
    margin-top:2px !important;
  }

  .main-footer .social-icons {
    gap:6px !important;
  }

  .main-footer .social-link {
    width:31px !important;
    height:31px !important;
    border-radius:9px !important;
    font-size:12px !important;
  }

  .main-footer .footer-whatsapp-btn {
    min-height:31px !important;
    padding:0 10px !important;
    border-radius:9px !important;
    font-size:8.5px !important;
  }

  .main-footer .footer-nav-grid {
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
    align-items:start !important;
    padding-top:18px !important;
    border-top:1px solid rgba(255,255,255,.075) !important;
  }

  .main-footer .footer-nav-stack {
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .main-footer .footer-col {
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
  }

  .main-footer .footer-heading {
    margin:0 0 9px !important;
    color:#f1f6fa !important;
    font-size:9.5px !important;
    line-height:1.2 !important;
    letter-spacing:.085em !important;
  }

  .main-footer .footer-links-list {
    display:grid !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .main-footer .footer-links-list li {
    margin:0 !important;
    padding:0 !important;
  }

  .main-footer .footer-links-list li a,
  .main-footer .footer-links-list a {
    width:100% !important;
    min-height:29px !important;
    display:flex !important;
    align-items:center !important;
    padding:4px 0 !important;
    color:#a9bdcc !important;
    font-size:10.5px !important;
    line-height:1.25 !important;
    transform:none !important;
  }

  .main-footer .footer-portal-col {
    padding-top:17px !important;
    border-top:1px solid rgba(255,255,255,.065) !important;
  }

  .main-footer .footer-bottom-bar {
    margin-top:20px !important;
  }

  .main-footer .footer-bottom-content {
    width:calc(100% - 28px) !important;
    min-height:0 !important;
    padding:12px 0 13px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    text-align:center !important;
  }

  .main-footer .footer-bottom-content p {
    font-size:7.8px !important;
    line-height:1.35 !important;
  }
}

@media (max-width:380px) {
  .main-footer .footer-content {
    width:calc(100% - 22px) !important;
    padding-top:22px !important;
  }

  .main-footer .footer-logo .site-logo-img {
    width:86px !important;
  }

  .main-footer .footer-description {
    max-width:29ch !important;
    font-size:10px !important;
  }

  .main-footer .footer-nav-grid {
    gap:14px !important;
  }

  .main-footer .footer-heading {
    font-size:9px !important;
  }

  .main-footer .footer-links-list li a,
  .main-footer .footer-links-list a {
    min-height:27px !important;
    font-size:10px !important;
  }

  .main-footer .footer-bottom-content {
    width:calc(100% - 22px) !important;
  }
}

/* ========================================================================
   V5.16 — ÔNIBUS NO SMARTPHONE
   ======================================================================== */
@media (max-width:760px) {
  .bus-page {
    width: calc(100% - 24px) !important;
    padding-top: 14px !important;
    padding-bottom: 42px !important;
  }

  .bus-page .bus-hero {
    min-height: 0 !important;
    margin-bottom: 14px !important;
    padding: 20px 17px !important;
    gap: 13px !important;
    border-radius: 16px !important;
  }
  .bus-hero-icon {
    flex-basis: 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
    font-size: 22px !important;
  }
  .bus-page .bus-hero-content { min-width: 0 !important; }
  .bus-page .bus-kicker { font-size: 8px !important; }
  .bus-page .bus-hero h1 {
    font-size: clamp(26px,8vw,32px) !important;
    letter-spacing: -.45px !important;
  }
  .bus-page .bus-hero p {
    margin-top: 6px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .bus-hero-meta { margin-top: 11px !important; gap: 6px !important; }
  .bus-hero-meta span { min-height: 27px !important; padding: 0 8px !important; font-size: 8.5px !important; }

  .bus-page .bus-controls {
    margin-bottom: 22px !important;
    padding: 15px !important;
    border-radius: 14px !important;
    box-shadow: 0 5px 18px rgba(10,40,68,.055) !important;
  }
  .bus-controls-head { margin-bottom: 11px !important; align-items: center !important; }
  .bus-controls-kicker { font-size: 8px !important; }
  .bus-controls-head h2,
  .bus-results-heading h2 { font-size: 20px !important; }
  .bus-result-count { min-height: 27px !important; padding: 0 8px !important; font-size: 8.5px !important; }
  .bus-search-box { min-height: 46px !important; border-radius: 11px !important; }
  .bus-search-box input { height: 46px !important; padding-left: 40px !important; font-size: 16px !important; }
  .bus-search-box > i { left: 14px !important; font-size: 13px !important; }

  .bus-page .filter-groups {
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .bus-page .filter-group {
    display: block !important;
  }
  .bus-page .filter-label {
    margin-bottom: 7px !important;
    font-size: 8.5px !important;
  }
  .bus-page .filter-buttons {
    width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  .bus-page .filter-buttons::-webkit-scrollbar { display: none !important; }
  .bus-page .filter-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    font-size: 9.5px !important;
  }

  .bus-results-heading {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    align-items: flex-end !important;
  }
  .bus-results-heading p { display: none !important; }

  .bus-page .bus-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  .bus-page .bus-card {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 15px rgba(10,40,68,.055) !important;
    transform: none !important;
  }
  .bus-card-top { min-height: 26px !important; }
  .bus-page .line-code-badge { height: 25px !important; min-width: 32px !important; font-size: 9px !important; }
  .bus-operation-status { max-width: 58% !important; font-size: 8.5px !important; }
  .bus-page .line-name {
    min-height: 0 !important;
    margin: 10px 0 11px !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
  }
  .bus-page .line-route {
    padding: 11px !important;
    grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr) !important;
    gap: 5px !important;
    border-radius: 11px !important;
  }
  .route-stop { gap: 7px !important; }
  .route-dot { flex-basis: 8px !important; width: 8px !important; height: 8px !important; margin-top: 4px !important; }
  .route-stop small { font-size: 7.5px !important; }
  .route-stop strong { font-size: 10px !important; white-space: normal !important; }
  .route-connector { width: 22px !important; height: 22px !important; }
  .bus-page .bus-card-actions { padding-top: 12px !important; gap: 7px !important; }
  .bus-page .btn-bus { min-height: 38px !important; border-radius: 9px !important; font-size: 9.5px !important; }

  .bus-modal-overlay { padding: 10px !important; align-items: flex-end !important; }
  .bus-modal {
    width: 100% !important;
    max-height: 90vh !important;
    border-radius: 18px 18px 8px 8px !important;
  }
  .bus-modal-header {
    min-height: 68px !important;
    padding: 14px 15px !important;
  }
  .bus-modal-header .modal-title { font-size: 20px !important; }
  .modal-close-btn { width: 36px !important; height: 36px !important; }
  .bus-modal-body {
    max-height: calc(90vh - 68px) !important;
    padding: 15px !important;
  }
  .schedule-tables-grid { grid-template-columns: 1fr !important; gap: 9px !important; }
  .schedule-col { padding: 11px !important; }
  .time-item { padding: 8px 9px !important; }
  .time-tag { min-width: 51px !important; font-size: 10.5px !important; }
  .time-obs { font-size: 9.5px !important; }
}

@media (max-width:380px) {
  .bus-page { width: calc(100% - 20px) !important; }
  .bus-page .bus-hero { padding: 17px 14px !important; }
  .bus-hero-icon { display: none !important; }
  .bus-page .line-route { grid-template-columns: 1fr !important; gap: 8px !important; }
  .route-connector {
    margin-left: 3px !important;
    transform: rotate(90deg) !important;
  }
}

/* ========================================================================== 
   V5.19 — MAIS NOTÍCIAS SEM SOMBRA NO SMARTPHONE
   Remove o efeito de sombra/glow atrás dos cards e títulos no mobile.
   Mantém apenas uma borda discreta para separar o conteúdo do fundo.
   ========================================================================== */
@media (max-width:760px) {
  .home-section--more-news .more-news-lead,
  .home-section--more-news .more-news-side-card,
  .home-section--more-news .more-news-mini-card {
    box-shadow:none !important;
    filter:none !important;
    border:1px solid #e7edf2 !important;
    background:#fff !important;
  }

  .home-section--more-news .more-news-lead-body,
  .home-section--more-news .more-news-side-body,
  .home-section--more-news .more-news-mini-body {
    box-shadow:none !important;
    filter:none !important;
    text-shadow:none !important;
    background:#fff !important;
  }

  .home-section--more-news .more-news-lead-body h3,
  .home-section--more-news .more-news-lead-body h3 a,
  .home-section--more-news .more-news-lead-body p,
  .home-section--more-news .more-news-side-body h3,
  .home-section--more-news .more-news-side-body h3 a,
  .home-section--more-news .more-news-mini-body h3,
  .home-section--more-news .more-news-mini-body h3 a {
    text-shadow:none !important;
    filter:none !important;
    -webkit-text-stroke:0 transparent !important;
    box-shadow:none !important;
  }
}