/*
Theme Name: Guia de Marília
Theme URI: https://guiademarilia.com.br
Author: Agência Bulboo
Author URI: https://guiademarilia.com.br
Description: Tema do Guia de Marília, o guia comercial da cidade de Marília, no centro-oeste paulista — a terra do amendoim, do Zoológico Municipal e da paleontologia que rendeu à cidade o dinossauro da marca. Reúne num só lugar os comércios e serviços da cidade por zona e bairro, as vagas de emprego, os cupons de desconto, os produtos das lojas locais, a agenda de eventos, os pontos turísticos e os resultados das loterias. Traz ficha de empresa com horário de funcionamento calculado na hora, rota pelo Google Maps, contato protegido contra robôs, candidatura a vagas com envio de currículo e planos de divulgação com pagamento por Pix. Desenho neo-brutalista em verde floresta (#0D332A), coral (#E85D35) e areia (#FAF8F5), feito primeiro para o celular, com ilustrações da Basílica, da Rodoviária e do skyline de Marília. Acompanha SEO, dados estruturados, sitemap e aviso de cookies conforme a LGPD.
Version: 1.45.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 7.1
License: Uso exclusivo do Guia de Marília
Tags: guia-comercial, marilia, diretorio-local, mobile-first, acessibilidade
Text Domain: tema-guia-marilia
*/

/* ==========================================================================
   CSS Reset, Box-Sizing & Global Links
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* --------------------------------------------------------------------------
     TOKENS BASE — são estes que o Customizador do Tema sobrescreve.
     Todo o resto da paleta deriva deles, então trocar um token aqui se propaga
     por botões, bordas, sombras e títulos sem precisar editar mais nada.
     -------------------------------------------------------------------------- */
  --color-pine: #0D332A;           /* Verde Floresta Profundo - Marca Principal */
  --color-coral: #E85D35;          /* Terracota / Coral Vivo - CTAs de Destaque */
  --color-amber: #F59E0B;          /* Âmbar / Ouro */
  --bg-page: #FAF8F5;              /* Fundo Areia Quente (Warm Sand) Oficial */
  --bg-card: #FFFFFF;              /* Fundo de Card Branco */
  --color-text-main: #0D332A;      /* Texto Principal de Alto Contraste (WCAG AAA) */
  --color-text-muted: #536B63;     /* Texto Secundário */
  --border-color: var(--color-pine); /* Borda Física Marcante */

  /* Tons derivados dos tokens base. Cada par declara primeiro o valor literal
     do design original e depois o color-mix: navegadores sem color-mix
     descartam a segunda linha e ficam com a primeira, então nada quebra. */
  --color-pine-light: #16473B;
  --color-pine-light: color-mix(in srgb, var(--color-pine) 90%, #FFFFFF);
  --color-pine-soft: #EAF2EE;
  --color-pine-soft: color-mix(in srgb, var(--color-pine) 10%, #FFFFFF);
  --color-blue-dark: #07221B;
  --color-blue-dark: color-mix(in srgb, var(--color-pine) 68%, #000000);

  --color-coral-hover: #D44E28;
  --color-coral-hover: color-mix(in srgb, var(--color-coral) 91%, #000000);
  --color-coral-active: #B93E1B;
  --color-coral-active: color-mix(in srgb, var(--color-coral) 80%, #000000);
  --color-coral-soft: #FDF1ED;
  --color-coral-soft: color-mix(in srgb, var(--color-coral) 8%, #FFFFFF);

  /* Aliases para Retrocompatibilidade com Templates Internos */
  --color-primary: var(--color-coral);
  --color-primary-hover: var(--color-coral-hover);
  --color-primary-active: var(--color-coral-active);
  --color-secondary: var(--color-pine);
  --color-secondary-hover: var(--color-pine-light);

  --color-teal: #10B981;           /* Verde Sucesso / Ativo */
  --color-blue: #2563EB;           /* Azul Destaque */
  --color-pink: #EC4899;           /* Rosa / Saúde */

  --color-text: var(--color-text-main);
  --text-main: var(--color-text-main);
  --color-text-light: var(--bg-page); /* Texto Claro para Fundos Escuros */

  --color-action: var(--color-coral);
  --color-action-hover: var(--color-coral-hover);

  --bg-primary: var(--bg-page);
  --bg-card-alt: #F4F0E8;
  --bg-card-alt: color-mix(in srgb, var(--bg-page) 94%, var(--color-amber));
  --bg-card-soft: var(--bg-page);
  --bg-dark: var(--color-pine);    /* Fundo Escuro Oficial */

  /* Neo-Brutalist Tactile System */
  --border-width: 2px;
  --border-soft: rgba(13, 51, 42, 0.16);
  --border-soft: color-mix(in srgb, var(--border-color) 16%, transparent);
  --border-dark: var(--border-color);

  --shadow-hard: 3px 3px 0px var(--border-color);
  --shadow-hover: 5px 5px 0px var(--border-color);
  --shadow-active: 1px 1px 0px var(--border-color);
  --shadow-soft: 2px 2px 0px var(--border-color);
  --shadow-card: 3px 3px 0px var(--border-color);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --radius-btn: 9999px;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Tipografia de display do brand book: peso único, bem mais encorpado que o
     900 da Plus Jakarta Sans, para as chamadas de maior impacto. */
  --font-display: 'Archivo Black', 'Plus Jakarta Sans', Impact, sans-serif;
  --font-cursive: 'Caveat', cursive, sans-serif;

  /* Intensidade da marca d'água ilustrada de Marília ao fundo da página.
     Único ponto de ajuste: subir aproxima do grafismo, descer discretiza. */
  --bg-pattern-opacity: 0.32;

  /* Verde exato em que a onda do skyline termina. O rodapé usa este tom (e não
     o --color-pine) para ser a continuação literal da ilustração, sem emenda. */
  --footer-bg: #034848;

  /* Grafismos de fundo. Declarados como variáveis para que o Customizador do
     Tema possa trocar a arte sem reescrever as regras que as consomem. */
  --bg-pattern-image: url('images/marilia-site-bg.png');
  --bg-pattern-repeat: no-repeat;
  --bg-pattern-size: cover;
  --footer-pattern-image: url('images/marilia-pattern-light.png');
  --footer-pattern-opacity: 0.055;
}

html {
  background-color: var(--bg-page);
}

body {
  background-color: transparent;
  color: var(--color-text-main);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Marca d'água ilustrada de Marília: camada fixa de viewport inteira.
   Fica presa ao viewport (não ao fluxo da página), então nunca corta, nunca
   emenda e não estica em nenhuma resolução. A intensidade é controlada
   exclusivamente por --bg-pattern-opacity. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-pattern-image);
  background-repeat: var(--bg-pattern-repeat);
  background-position: center center;
  background-size: var(--bg-pattern-size);
  opacity: var(--bg-pattern-opacity);
}

main {
  flex: 1;
}

/* Prevenção de links azuis não estilizados do navegador */
a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Containers Globais (.site-container & .container-mobile)
   ========================================================================== */
.site-container, .container-mobile {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .site-container, .container-mobile {
    padding: 0 24px;
  }
}

.page-side-watermark-wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: transparent;
}

/* ==========================================================================
   Ícones SVG Puros (Sem Emojis)
   ========================================================================== */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 18px; height: 18px; }
.icon-md { width: 22px; height: 22px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 36px; height: 36px; }

/* ==========================================================================
   Botões Neo-Brutalistas Táteis (.btn-neo, .btn-neo-pill & Variantes)
   ========================================================================== */
.btn-neo, .btn-neo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 14px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-btn);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  cursor: pointer;
  color: var(--color-pine);
  background-color: #FFFFFF;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease, color 0.15s ease;
  gap: 8px;
  line-height: 1;
  white-space: nowrap;
}

.btn-neo:hover, .btn-neo-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.btn-neo:active, .btn-neo-pill:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-active);
}

.btn-primary, .btn-action, .btn-accent, .btn-coral {
  background-color: var(--color-coral);
  color: #FFFFFF;
  border-color: var(--border-color);
}
.btn-primary:hover, .btn-action:hover, .btn-accent:hover, .btn-coral:hover {
  background-color: var(--color-coral-hover);
  color: #FFFFFF;
}

.btn-secondary, .btn-white {
  background-color: #FFFFFF;
  color: var(--color-pine);
  border-color: var(--border-color);
}
.btn-secondary:hover, .btn-white:hover {
  background-color: var(--color-coral-soft);
  color: var(--color-coral);
}

.btn-dark, .btn-pine {
  background-color: var(--color-pine);
  color: #FFFFFF;
  border-color: var(--border-color);
}
.btn-dark:hover, .btn-pine:hover {
  background-color: var(--color-pine-light);
  color: #FFFFFF;
}

.btn-amber {
  background-color: var(--color-amber);
  color: var(--color-pine);
  border-color: var(--border-color);
}
.btn-amber:hover {
  background-color: #D97706;
  color: #FFFFFF;
}

.btn-outline-pill {
  background-color: #FFFFFF;
  color: var(--color-coral);
  border-color: var(--border-color);
}
.btn-outline-pill:hover {
  background-color: var(--color-coral);
  color: #FFFFFF;
}

.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 12.5px; }
.btn-lg { min-height: 50px; padding: 14px 28px; font-size: 16px; }
.w-full { width: 100%; }

/* ==========================================================================
   Cards Neo-Brutalistas (.card-neo, .card-tint, .card-neo-hover)
   ========================================================================== */
.card-neo {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card-neo-hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.card-tint {
  background: var(--bg-card-alt);
}

/* ==========================================================================
   Badges Neo-Brutalistas (.badge-neo)
   ========================================================================== */
.badge-neo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1.5px solid var(--border-color);
  border-radius: 9999px;
  box-shadow: 1.5px 1.5px 0px var(--border-color);
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.badge-teal { background: #10B981; color: #FFFFFF; }
.badge-blue, .badge-pro { background: #2563EB; color: #FFFFFF; }
.badge-gold { background: #F59E0B; color: var(--color-pine); }
.badge-action, .badge-coral { background: var(--color-coral-soft); color: var(--color-coral); border-color: var(--color-coral); }
.badge-neutral, .badge-white { background: #FFFFFF; color: var(--color-pine); }

/* ==========================================================================
   Controles de Formulários Neo-Brutalistas (.input-neo, .select-neo, etc.)
   ========================================================================== */
.input-neo, .select-neo, .textarea-neo {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-pine);
  background-color: #FFFFFF;
  box-shadow: 2px 2px 0px var(--border-color);
  outline: none;
  transition: box-shadow 0.1s ease, border-color 0.1s ease;
  box-sizing: border-box;
}

.input-neo:focus, .select-neo:focus, .textarea-neo:focus {
  border-color: var(--color-coral);
  box-shadow: 4px 4px 0px var(--border-color);
}

/* Barra de Filtros das Páginas Internas */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: #FFFFFF;
  padding: 16px 20px;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  margin-bottom: 28px;
  align-items: center;
}

/* Esticar vale para campo de texto e select. A caixa de marcar tem largura
   própria: sem a ressalva abaixo ela virava um retângulo de 180 px e o
   quadradinho ficava solto, longe do texto que ele marca. */
.filter-bar input:not([type="checkbox"]):not([type="radio"]),
.filter-bar select {
  flex: 1;
  min-width: 180px;
}

@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }
  .filter-bar input:not([type="checkbox"]):not([type="radio"]),
  .filter-bar select,
  .filter-bar button,
  .filter-bar a {
    width: 100%;
  }
}

/* ==========================================================================
   Grids das Páginas Internas (.grid-cards, .grid-produtos, .grid-planos)
   ========================================================================== */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 768px) {
  .grid-produtos {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

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

.grid-planos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* auto-fit em vez de 3 fixas: o painel permite criar mais planos, e a grade
   precisa acomodar 2, 4 ou 5 cards sem espremer. */
@media (min-width: 768px) {
  .grid-planos {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* Componentes Específicos das Páginas Internas */
.produto-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border: var(--border-width) solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 8px;
  background: #FFFFFF;
  display: block;
}

.coupon-card {
  position: relative;
  background: #FFFFFF;
  border: var(--border-width) dashed var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  padding: 18px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.coupon-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.coupon-code-box {
  background: var(--bg-card-alt);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 10px;
}

/* Paginação das Páginas Internas */
.page-numbers, .pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.page-numbers a, .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 10px;
  font-weight: 800;
  font-size: 13.5px;
  color: var(--color-pine);
  box-shadow: 2px 2px 0 var(--border-color);
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.15s ease;
}

.page-numbers a:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--border-color);
  background: var(--color-coral-soft);
  color: var(--color-coral);
}

.page-numbers .current {
  background: var(--color-coral);
  color: #FFFFFF;
}

/* ==========================================================================
   1. Barra Utilitária Superior Oficial (.top-utility-bar)
   ========================================================================== */
.top-utility-bar {
  background-color: var(--color-pine);
  color: var(--color-text-light);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  padding: 8px 0;
}

.top-utility-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.top-utility-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
}

.city-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #FFFFFF;
  font-weight: 800;
}

.city-location .svg-icon {
  color: var(--color-coral);
}

.top-utility-divider {
  opacity: 0.4;
  font-size: 10px;
}

.city-slogan {
  color: rgba(250, 248, 245, 0.8);
  font-weight: 500;
}

/* A frase da barra superior costumava sumir no celular por ser enfeite.
   Agora ela é conteúdo — muda a cada visita e é cadastrada no painel —,
   então continua visível; quem sai em tela estreita é a localização. */

.top-utility-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.top-utility-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.top-utility-links a {
  color: rgba(250, 248, 245, 0.85);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.top-utility-links a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .top-utility-links {
    display: none;
  }
}

.top-utility-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-utility-social a {
  color: rgba(250, 248, 245, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.1s ease;
}

.top-utility-social a:hover {
  color: var(--color-coral);
  transform: translateY(-1px);
}

.top-utility-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: background-color 0.15s ease;
}

.top-utility-login:hover {
  background-color: var(--color-coral);
  border-color: var(--color-coral);
}

/* ==========================================================================
   2. Header Principal de Navegação (.navbar-main)
   ========================================================================== */
.navbar-main {
  background-color: #FFFFFF;
  border-bottom: var(--border-width) solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 16px;
}

.brand-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-img {
  /* Altura definida em Aparência do Portal. O SVG não tem pixel próprio, então
     é a altura que manda: a largura acompanha sozinha. */
  height: var(--logo-header-altura, 42px);
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}

.nav-desktop-menu {
  display: none;
  align-items: center;
  gap: 18px;
}

@media (min-width: 992px) {
  .nav-desktop-menu {
    display: flex;
  }
}

.nav-item {
  color: var(--color-pine);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 4px;
  transition: color 0.15s ease;
}

.nav-item:hover {
  color: var(--color-coral);
}

/* Ícone de cada item do menu, igual ao do menu do celular */
.nav-item-icone {
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.nav-item:hover .nav-item-icone {
  color: var(--color-coral);
}

/* Em telas mais estreitas o texto encolhe antes de o menu quebrar */
@media (min-width: 1024px) and (max-width: 1180px) {
  .nav-item {
    font-size: 12.5px;
    gap: 4px;
  }
}

.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown-toggle {
  cursor: pointer;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-announce {
  min-height: 40px;
  padding: 8px 20px;
  font-size: 13.5px;
}

@media (max-width: 640px) {
  .btn-announce {
    display: none;
  }
}

.mobile-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-pine);
  box-shadow: 2px 2px 0 var(--border-color);
}

@media (min-width: 992px) {
  .mobile-nav-toggle {
    display: none;
  }
}

/* ==========================================================================
   Menu Mobile Drawer (.mobile-menu-drawer)
   ========================================================================== */
/* O drawer cobre a tela inteira. `fixed` é o ponto: antes ele era `relative`,
   no fluxo logo abaixo do cabeçalho, então quem estava no meio da página
   clicava no menu e nada aparecia — o menu tinha aberto lá em cima. */
.mobile-menu-drawer {
  display: none;
  background: #FFFFFF;
  padding: 18px 20px 24px;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu-drawer.open {
  display: block;
}

/* Trava a página atrás: sem isso o dedo rola o conteúdo de baixo em vez do
   menu. `position: fixed` é o que prende de verdade — `overflow: hidden` no
   body é ignorado pelo Safari do iPhone. O `top` é posto pelo JavaScript com
   a altura em que a pessoa estava, para a página não saltar para o começo. */
body.menu-mobile-aberto {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* O cabeçalho do drawer fica colado no alto enquanto a lista rola. */
.mobile-menu-drawer .mobile-menu-header {
  position: sticky;
  top: -18px;
  background: #FFFFFF;
  padding-top: 18px;
  margin-top: -18px;
  z-index: 1;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--border-soft);
}

.mobile-menu-close {
  background: none;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 24px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-pine);
  font-weight: 800;
  line-height: 1;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.mobile-menu-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-pine);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-soft);
}

.mobile-menu-links a:hover {
  color: var(--color-coral);
  background: var(--color-coral-soft);
  border-radius: 8px;
}

.mobile-menu-footer {
  margin-top: 14px;
}

/* ==========================================================================
   SEÇÃO 1: HERO SECTION FIEL AO MOCKUP (.hero-mockup-section)
   ========================================================================== */
.hero-mockup-section {
  padding: 32px 0 44px;
  border-bottom: var(--border-width) solid var(--border-color);
  position: relative;
}

.hero-mockup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 992px) {
  .hero-mockup-grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: 36px;
  }
}

@media (min-width: 1200px) {
  .hero-mockup-grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
}

.hero-mockup-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-tag-phrase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--color-pine);
  text-transform: uppercase;
}

.hero-tag-dash {
  color: var(--color-coral);
  font-weight: 900;
}

.hero-mockup-title {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 400; /* Archivo Black já é o peso; 900 faria o navegador simular */
  line-height: 1.08;
  color: var(--color-pine);
  letter-spacing: -1px;
  margin: 0;
}

@media (min-width: 640px) {
  .hero-mockup-title {
    font-size: 44px;
  }
}

@media (min-width: 1024px) {
  .hero-mockup-title {
    font-size: 50px;
  }
}

.text-accent {
  color: var(--color-coral);
  position: relative;
  display: inline-block;
}

.hero-mockup-desc {
  font-size: 15.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-weight: 600;
  max-width: 560px;
  margin: 0;
}

/* Campo de Busca Pill Neo-Brutalist */
.hero-pill-search-form {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 2.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  box-shadow: 4px 4px 0 var(--border-color);
  padding: 5px 6px 5px 18px;
  gap: 10px;
  margin-top: 6px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.hero-pill-search-form:focus-within {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--border-color);
}

.hero-search-leading-icon {
  color: var(--color-pine);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.hero-pill-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-pine);
  flex: 1;
  min-width: 0;
}

.hero-pill-search-input::placeholder {
  color: #8C9E97;
  font-weight: 600;
}

.hero-pill-search-btn {
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 22px;
}

/* O texto do botão era escondido abaixo de 480px porque ele dividia a pílula
   com o campo. Agora o botão ocupa a linha inteira no celular, então esconder
   o rótulo deixaria só uma lupa numa barra larga — sem dizer o que faz. */
@media (max-width: 480px) {
  .hero-pill-search-btn {
    padding: 8px 14px;
  }
}

/* 6 Categorias Rápidas com Caixas de Ícones Coloridos */
.hero-category-pills-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .hero-category-pills-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-category-pills-row::-webkit-scrollbar {
    display: none;
  }
}

.hero-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--border-color);
  padding: 6px 14px 6px 7px;
  text-decoration: none;
  color: var(--color-pine);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.12s ease;
}

.hero-cat-pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--border-color);
  background-color: var(--color-coral-soft);
}

.cat-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.cat-icon-orange { background-color: #F97316; }
.cat-icon-teal   { background-color: #10B981; }
.cat-icon-blue   { background-color: #2563EB; }
.cat-icon-cyan   { background-color: #06B6D4; }
.cat-icon-pink   { background-color: #EC4899; }
.cat-icon-amber  { background-color: #F59E0B; }

/* Coluna Direita: Composição Visual com Basílica, Lettering e Card em Tempo Real */
.hero-mockup-right {
  display: flex;
  justify-content: center;
  position: relative;
}

@media (max-width: 600px) {
  .hero-visual-composition {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
}

@media (min-width: 992px) {
  .hero-arch-photo-container {
    height: 370px;
  }
}

@keyframes pulseLive {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ==========================================================================
   SEÇÃO 2: 3 CARDS DE AÇÃO DIRETA TÁTEIS (.grid-three-action-cards)
   ========================================================================== */
.section-quick-actions {
  padding: 32px 0 16px;
}

.grid-three-action-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .grid-three-action-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.action-card-neo {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.action-card-neo:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.action-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-pine-soft);
  border: var(--border-width) solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pine);
  box-shadow: 2px 2px 0 var(--border-color);
}

.circle-arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pine);
  background: #FFFFFF;
  text-decoration: none;
  transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease;
}

.circle-arrow-btn:hover {
  transform: scale(1.1);
  background-color: var(--color-coral);
  color: #FFFFFF;
}

.action-card-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.3;
}

.action-card-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
  flex: 1;
}

/* ==========================================================================
   SEÇÃO 3: CALLOUT DE COMERCIANTES COM MASCOTE (.callout-card-neo)
   ========================================================================== */
.section-comerciante-callout {
  margin: 28px 0;
}

.callout-card-neo {
  background: var(--color-pine);
  color: #FFFFFF;
  border: 2.5px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--border-color);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.callout-dino-image {
  height: 80px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.callout-text-col {
  flex: 1;
  min-width: 240px;
}

.callout-main-title {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 4px;
}

.callout-main-desc {
  font-size: 14px;
  color: rgba(250, 248, 245, 0.85);
  font-weight: 500;
}

.callout-buttons-col {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .callout-card-neo {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .callout-dino-image {
    height: 64px;
  }
  .callout-buttons-col {
    width: 100%;
  }
  .callout-buttons-col .btn-neo-pill {
    width: 100%;
  }
}

/* ==========================================================================
   SEÇÃO 4: EMPRESAS EM DESTAQUE (.section-empresas-destaque)
   ========================================================================== */
.section-empresas-destaque {
  margin: 36px 0;
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-title-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.2;
}

.section-title-dash {
  color: var(--color-coral);
  font-weight: 900;
}

.section-header-subtitle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.grid-four-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 36px;
}

@media (min-width: 640px) {
  .grid-four-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-four-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.empresa-card-neo {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.empresa-card-neo:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.empresa-card-thumb-wrap {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: var(--bg-card-alt);
  border-bottom: var(--border-width) solid var(--border-color);
  overflow: hidden;
}

.empresa-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.empresa-card-neo:hover .empresa-card-thumb {
  transform: scale(1.04);
}

.empresa-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1.5px solid var(--border-color);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

.badge-cat-orange { background-color: #F97316; }
.badge-cat-blue   { background-color: #2563EB; }
.badge-cat-gold   { background-color: #D97706; }
.badge-cat-pink   { background-color: #EC4899; }

.empresa-favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 1.5px 1.5px 0 var(--border-color);
  color: var(--color-pine);
  transition: transform 0.1s ease, color 0.15s ease;
}

.empresa-favorite-btn:hover {
  transform: scale(1.1);
  color: var(--color-coral);
}

.empresa-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.empresa-card-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.3;
  margin: 0;
}

.empresa-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.empresa-card-title a:hover {
  color: var(--color-coral);
}

.empresa-card-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

.empresa-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}

/* Sem horário cadastrado o rodapé fica só com o local: sozinho, ele iria
   parar na direita por causa do space-between. Aqui volta para a esquerda. */
.empresa-card-footer > :only-child {
  margin-right: auto;
}

/* O selo de aberto/fechado ocupa o lugar que era da nota. */
.empresa-card-footer .status-horario {
  flex-shrink: 0;
}

.empresa-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-pine);
}

/* ==========================================================================
   SEÇÃO 5: BANNER PANORÂMICO "DESCUBRA MARÍLIA" (.descubra-banner-card)
   ========================================================================== */
.section-descubra-marilia {
  margin: 36px 0;
}

.descubra-banner-card {
  background: var(--color-pine);
  border: 2.5px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 4px 4px 0 var(--border-color);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  color: #FFFFFF;
}

@media (min-width: 992px) {
  .descubra-banner-card {
    grid-template-columns: 1fr 1.2fr 1fr;
  }
}

.descubra-left-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.descubra-big-title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}

.descubra-big-title strong {
  color: var(--color-coral);
  font-size: 34px;
}

.descubra-subtitle-text {
  font-size: 14px;
  color: rgba(250, 248, 245, 0.85);
  line-height: 1.45;
}

.descubra-center-photo {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.descubra-skyline-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.descubra-right-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.descubra-cursive-text {
  font-family: var(--font-cursive);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-coral);
}

.descubra-dino-mascot {
  height: 70px;
  width: auto;
}

.descubra-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* ==========================================================================
   SEÇÃO 6: VAGAS DE EMPREGO EM MARÍLIA (.section-vagas-emprego)
   ========================================================================== */
.section-vagas-emprego {
  margin: 36px 0;
}

.vaga-card-neo {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.vaga-card-neo:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hover);
}

.vaga-card-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--border-color);
}

.bg-teal { background-color: #10B981; }
.bg-blue { background-color: #2563EB; }
.bg-dark { background-color: var(--color-pine); }
.bg-pink { background-color: #EC4899; }

.vaga-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.vaga-card-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.3;
  margin: 0;
}

.vaga-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.vaga-card-title a:hover {
  color: var(--color-coral);
}

.vaga-card-company {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.vaga-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-pine);
  margin-top: 6px;
}

.vaga-badge-pill {
  background: var(--color-pine-soft);
  border: 1px solid var(--border-color);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 800;
}

/* ==========================================================================
   SEÇÃO 7: BANNER PROMOCIONAL "MARÍLIA SHOPPING" (.shopping-promo-card)
   ========================================================================== */
.section-shopping-promo {
  margin: 36px 0 44px;
}

.shopping-promo-card {
  background: #FFFFFF;
  border: 2.5px solid var(--border-color);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--border-color);
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.shopping-facade-img {
  width: 130px;
  height: 95px;
  border-radius: 12px;
  border: var(--border-width) solid var(--border-color);
  object-fit: cover;
  flex-shrink: 0;
}

.shopping-promo-content {
  flex: 1;
  min-width: 240px;
}

.shopping-promo-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.3;
  margin-bottom: 4px;
}

.shopping-promo-desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.shopping-promo-burst {
  color: var(--color-coral);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.shopping-promo-action {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .shopping-promo-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .shopping-promo-action {
    width: 100%;
  }
  .shopping-promo-action .btn-neo-pill {
    width: 100%;
  }
}

/* ==========================================================================
   Publicidade & Google AdSense Slots (.ad-slot-wrapper)
   ========================================================================== */
/* Cada espaço recebe do PHP as variáveis --ad-w / --ad-h (medida exata do
   formato IAB escolhido) e --ad-mw / --ad-mh (formato equivalente no celular).
   A caixa nunca passa da medida padrão: o banner é exibido no tamanho real,
   centralizado, e apenas encolhe proporcionalmente em telas estreitas. */
.ad-slot-wrapper {
  --ad-w: 970;
  --ad-h: 250;
  --ad-mw: 320;
  --ad-mh: 100;
  display: block;
  width: 100%;
  margin: 20px auto;
  clear: both;
}

.ad-slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(var(--ad-w) * 1px);
  margin: 0 auto;
}

/* Os formatos horizontais acompanham a largura do conteúdo em vez de parar na
   medida nominal — a proporção do formato é mantida, então a arte não deforma,
   e o banner encosta nas bordas em vez de flutuar com sobra dos lados.
   Retângulos e verticais ficam na medida exata: esticá-los tomaria a página. */
.ad-expande .ad-slot-inner {
  max-width: 100%;
}

.ad-header-meta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 0 4px;
}

.ad-disclaimer {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-muted);
  opacity: 0.85;
}

.ad-category-badge {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  background: var(--color-coral-soft);
  color: var(--color-coral);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}

.ad-code-container {
  width: 100%;
  aspect-ratio: var(--ad-w) / var(--ad-h);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ad-banner-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ad-banner-link:hover {
  transform: translateY(-2px);
}

.ad-card-banner {
  aspect-ratio: var(--ad-w) / var(--ad-h);
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ad-card-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 240px;
}

.ad-card-brand-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-pine-soft);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-pine);
  flex-shrink: 0;
}

.ad-card-text {
  flex: 1;
}

.ad-card-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-pine);
  line-height: 1.3;
  margin: 0;
}

.ad-card-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-top: 4px;
}

.ad-card-action {
  flex-shrink: 0;
}

.ad-cta-btn {
  pointer-events: none;
}

.ad-banner-img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ad-w) / var(--ad-h);
  object-fit: contain;
  /* Arte fora da proporção do formato sobra dentro da moldura. O fundo
     acompanha a página em vez de ser um bloco branco, para a sobra parecer
     parte da moldura — e não uma faixa branca colada no banner. */
  background: var(--bg-page);
  display: block;
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ad-banner-link:hover .ad-banner-img {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Espaçamento por posição na página (a medida vem do formato, não daqui) */
.ad-pos-topo   { margin: 16px auto 8px; }
.ad-pos-meio   { margin: 32px auto 24px; }
.ad-pos-rodape { margin: 36px auto 14px; }

/* Formatos verticais convivem melhor alinhados ao conteúdo em telas largas */
.ad-format-half_page .ad-card-banner,
.ad-format-wide_skyscraper .ad-card-banner {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
}

.ad-format-half_page .ad-card-content,
.ad-format-wide_skyscraper .ad-card-content,
.ad-format-medium_rectangle .ad-card-content,
.ad-format-large_rectangle .ad-card-content {
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

/* Formatos de faixa baixa (90px ou menos) não comportam descrição nem ícone */
.ad-format-leaderboard .ad-card-desc,
.ad-format-super_leaderboard .ad-card-desc,
.ad-format-mobile_banner .ad-card-desc,
.ad-format-mobile_banner .ad-card-brand-icon,
.ad-format-large_mobile_banner .ad-card-desc {
  display: none;
}

.ad-format-leaderboard .ad-card-banner,
.ad-format-super_leaderboard .ad-card-banner,
.ad-format-large_mobile_banner .ad-card-banner,
.ad-format-mobile_banner .ad-card-banner {
  padding: 8px 12px;
  gap: 10px;
  flex-wrap: nowrap;
}

.ad-format-leaderboard .ad-card-title,
.ad-format-super_leaderboard .ad-card-title,
.ad-format-large_mobile_banner .ad-card-title,
.ad-format-mobile_banner .ad-card-title {
  font-size: 13px;
}

.ad-format-mobile_banner .ad-card-title {
  font-size: 11.5px;
}

/* Abaixo de 640px cada formato assume seu equivalente oficial de celular
   (320 × 50, 320 × 100 ou 300 × 250), conforme definido no plugin. */
@media (max-width: 640px) {
  .ad-slot-inner {
    max-width: calc(var(--ad-mw) * 1px);
  }
  .ad-expande .ad-slot-inner {
    max-width: 100%;
  }
  .ad-banner-img,
  .ad-code-container,
  .ad-card-banner {
    aspect-ratio: var(--ad-mw) / var(--ad-mh);
  }
  .ad-card-banner {
    padding: 10px 12px;
    gap: 8px;
  }
  .ad-card-desc,
  .ad-card-brand-icon {
    display: none;
  }
  .ad-card-title {
    font-size: 12.5px;
  }
  .ad-cta-btn {
    font-size: 11px;
    padding: 6px 12px;
  }
}

/* ==========================================================================
   RODAPÉ NEO-BRUTALIST COM SKYLINE (.footer-neo-modern)
   ========================================================================== */
/* A onda do skyline já termina no verde-pinheiro da marca: o divisor e o rodapé
   se encostam sem borda e sem fundo próprio, formando uma transição contínua.
   A imagem mantém a proporção nativa (altura automática) — nada de recorte. */
.skyline-footer-divider {
  width: 100%;
  line-height: 0;
  margin-top: 40px;
  margin-bottom: -1px;
}

/* A arte já vem recortada exatamente na banda da cidade (proporção ~3,9:1), sem
   céu sobrando. Por isso ela roda em altura natural: qualquer object-fit: cover
   aqui voltaria a decapitar palmeiras, torres e o dino. */
.skyline-footer-img {
  width: 100%;
  height: auto;
  display: block;
}

.footer-neo-modern {
  background-color: var(--footer-bg);
  color: var(--color-text-light);
  padding-top: 48px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Grafismo da cidade em marca d'água dentro do verde do rodapé.
   Usa o tile claro sobre transparência (marilia-pattern-light.png): o tile
   creme chapado do corpo da página só clarearia o verde por igual. */
.footer-neo-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--footer-pattern-image);
  background-repeat: repeat;
  background-size: 900px auto;
  background-position: center top;
  opacity: var(--footer-pattern-opacity);
}

.footer-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 40px;
}

/* Tablet: 2x2 — quatro colunas a partir de 768px espremem demais os links */
@media (min-width: 600px) {
  .footer-content-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 32px;
  }
}

@media (min-width: 992px) {
  .footer-content-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 32px;
  }
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-logo-link {
  display: inline-block;
}

.footer-brand-img {
  height: var(--logo-rodape-altura, 44px);
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
}

.footer-brand-tagline {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(250, 248, 245, 0.8);
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-title {
  font-size: 15px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.footer-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links-list a {
  color: rgba(250, 248, 245, 0.75);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.1s ease;
  display: inline-block;
}

.footer-links-list a:hover {
  color: #FFFFFF;
  transform: translateX(3px);
}

.footer-social-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.social-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(250, 248, 245, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.social-circle-btn:hover {
  background-color: var(--color-coral);
  border-color: var(--color-coral);
  transform: translateY(-2px);
}

.footer-cursive-phrase {
  font-family: var(--font-cursive);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-coral);
  margin-top: 8px;
}

.footer-bottom-bar {
  border-top: 1.5px solid rgba(250, 248, 245, 0.12);
  padding: 18px 0;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(250, 248, 245, 0.6);
}

@media (min-width: 768px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-copyright {
  color: rgba(250, 248, 245, 0.7);
}

.footer-manifesto {
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-coral);
  text-transform: uppercase;
  font-size: 11px;
}

/* ==========================================================================
   Toast Notificação
   ========================================================================== */
#toast-neo {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--color-pine);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  border: var(--border-width) solid #FFFFFF;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px 20px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

#toast-neo.show {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Layout do Blog com Barra Lateral (.blog-layout / .blog-sidebar)
   ========================================================================== */
/* A coluna lateral só existe aqui — é por isso que a posição "Barra Lateral"
   de publicidade (retângulo 300 × 250) é oferecida apenas nas telas de blog. */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

@media (min-width: 1024px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.blog-main {
  min-width: 0;
}

/* Na listagem com barra lateral sobra menos largura: dois cards por linha, não três */
@media (min-width: 1024px) {
  .blog-layout .grid-cards-blog {
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .blog-sidebar {
    position: sticky;
    top: 20px;
  }
}

.blog-sidebar .ad-slot-wrapper {
  margin: 0 auto;
}

.blog-sidebar-card {
  background: #FFFFFF;
  padding: 18px;
}

.blog-sidebar-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-secondary);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--bg-card-alt);
}

.blog-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-sidebar-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.blog-sidebar-list img,
.blog-sidebar-thumb-empty {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--border-color);
  background: var(--bg-page);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.blog-sidebar-list strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--color-secondary);
}

.blog-sidebar-list em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.blog-sidebar-list a:hover strong {
  color: var(--color-primary);
}

.blog-sidebar-cta p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

/* ==========================================================================
   Caixa de Compartilhamento (.gm-share)
   ========================================================================== */
.gm-share {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px dashed var(--bg-card-alt);
}

.gm-share-compact {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  text-align: right;
}

.gm-share-label {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.gm-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gm-share-compact .gm-share-buttons {
  justify-content: flex-end;
}

.gm-share-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  background: #FFFFFF;
  color: var(--color-secondary);
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.gm-share-btn:hover {
  transform: translateY(-2px);
  background: var(--color-secondary);
  color: #FFFFFF;
}

.gm-share-whatsapp:hover { background: #25D366; border-color: #128C3E; }
.gm-share-facebook:hover { background: #1877F2; border-color: #0C4FA8; }
.gm-share-linkedin:hover { background: #0A66C2; border-color: #084A8C; }
.gm-share-x:hover        { background: #0F172A; border-color: #0F172A; }

/* ==========================================================================
   Contato Protegido contra Coleta (.gm-contato-protegido)
   ========================================================================== */
.gm-contato-protegido,
.empresa-contato-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-secondary);
  background: var(--bg-page);
  border: 2px solid var(--border-color);
  border-radius: 9999px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}

.gm-contato-protegido:hover,
.empresa-contato-link:hover {
  transform: translateY(-1px);
  background: var(--color-pine-soft, #EAF2EE);
}

.gm-contato-protegido.revelado {
  cursor: default;
  background: #FFFFFF;
}

.gm-contato-protegido.revelado:hover {
  transform: none;
}

.empresa-contatos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px dashed var(--bg-card-alt);
}

/* ==========================================================================
   Perfil da Empresa com Capa (.empresa-perfil-card)
   ========================================================================== */
.empresa-perfil-card {
  /* Quanto da logo fica sobre a capa. Três regras dependem deste número
     (a subida da logo e o recuo do texto e do compartilhar ao lado dela);
     mantê-lo em um lugar só evita que o cabeçalho desalinhe ao ajustar. */
  --logo-sobreposicao: 64px;
  background: #FFFFFF;
  padding: 0;
  overflow: hidden;
}

/* A capa fica recuada da borda do cartão: a moldura branca em volta dela é o
   que dá o respiro. Só a logomarca avança por cima da imagem. */
.empresa-capa {
  position: relative;
  width: auto;
  margin: 18px 18px 0;
  aspect-ratio: 4 / 1;
  max-height: 298px;
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card-alt);
}

.empresa-capa-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Slide: as fotos ficam empilhadas e só a ativa aparece */
.empresa-capa-slide .empresa-capa-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.empresa-capa-slide .empresa-capa-img.ativa {
  opacity: 1;
  pointer-events: auto;
}

/* Canto direito: o canto esquerdo é onde a logomarca sobe sobre a capa.
   Como o slide passa sozinho e não há mais setas, os pontos são o único
   controle — ganham uma faixa escura atrás para não sumirem em foto clara. */
.empresa-capa-pontos {
  position: absolute;
  right: 16px;
  bottom: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9999px;
  background: rgba(13, 51, 42, 0.45);
  backdrop-filter: blur(3px);
  z-index: 2;
}

.empresa-capa-ponto {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}

.empresa-capa-ponto:hover {
  background: rgba(255, 255, 255, 0.7);
}

.empresa-capa-ponto.ativo {
  background: #FFFFFF;
  border-color: #FFFFFF;
  width: 26px;
}

.empresa-perfil-corpo {
  padding: 0 26px 28px;
}

/* Sem capa, o cabeçalho é o topo do cartão e precisa do próprio respiro */
.empresa-perfil-corpo.sem-capa {
  padding-top: 26px;
}

.empresa-perfil-topo {
  display: flex;
  flex-wrap: wrap;
  /* flex-start, e não flex-end: alinhar pelo rodapé fazia a posição da logo
     depender da altura do texto ao lado — mudar o nome da empresa movia a logo.
     Com o topo fixo, cada bloco é posicionado pelo próprio recuo. */
  align-items: flex-start;
  gap: 18px 22px;
  margin-top: calc(-1 * var(--logo-sobreposicao));
  padding-bottom: 4px;
}

.empresa-perfil-corpo.sem-capa .empresa-perfil-topo {
  margin-top: 0;
}

.empresa-perfil-corpo.sem-capa .empresa-perfil-identidade,
.empresa-perfil-corpo.sem-capa .empresa-perfil-share {
  padding-top: 0;
}

.empresa-logo-wrap {
  flex-shrink: 0;
  /* A capa é recuada 18px da borda e o corpo tem 26px de padding: este empurrão
     coloca a logo dentro da moldura da capa, em vez de encostada na borda. */
  margin-left: 6px;
  /* A capa é um elemento posicionado (por causa das setas do slide) e por isso
     passava a pintar por cima da logo, que vem depois no HTML mas não tem
     posição. O z-index devolve a logo para a frente. */
  position: relative;
  z-index: 2;
}

.empresa-logo-img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid #FFFFFF;
  box-shadow: 2px 2px 0 var(--border-color);
  background: #FFFFFF;
  display: block;
}

.empresa-logo-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  border: 3px solid #FFFFFF;
  background: var(--bg-page);
}

/* Os selos sobem para dentro da capa, junto com a logo; o nome fica abaixo
   dela. O recuo menor é o que traz os selos para cima da imagem. */
.empresa-perfil-identidade {
  flex: 1;
  min-width: 240px;
  padding-top: calc(var(--logo-sobreposicao) - 38px);
}

.empresa-perfil-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Folga suficiente para o nome começar abaixo da capa, sem encostar nela */
  margin-bottom: 16px;
  /* Mesmo motivo do z-index da logo: a capa é posicionada e cobriria os selos,
     que sobem para dentro dela. */
  position: relative;
  z-index: 2;
}

.empresa-perfil-nome {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0;
}

.empresa-perfil-endereco {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.empresa-perfil-rota {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.empresa-perfil-rota:hover {
  border-bottom-color: var(--color-primary);
}

.empresa-perfil-share {
  padding-top: var(--logo-sobreposicao);
}

@media (max-width: 720px) {
  .empresa-perfil-card {
    --logo-sobreposicao: 46px;
  }
  .empresa-capa {
    margin: 12px 12px 0;
  }
  .empresa-capa-pontos {
    right: 10px;
    bottom: 8px;
  }
  .empresa-perfil-corpo {
    padding: 0 18px 24px;
  }
  .empresa-perfil-corpo.sem-capa {
    padding-top: 20px;
  }
  .empresa-perfil-topo {
    margin-top: calc(-1 * var(--logo-sobreposicao));
  }
  .empresa-logo-img {
    width: 82px;
    height: 82px;
  }
  .empresa-perfil-identidade,
  .empresa-perfil-share {
    padding-top: 0;
    min-width: 100%;
  }
  .empresa-perfil-tags {
    margin-bottom: 8px;
  }
  .empresa-perfil-nome {
    font-size: 22px;
  }
  .gm-share-compact {
    text-align: left;
  }
  .gm-share-compact .gm-share-buttons {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Slide da Página Inicial (.hero-slide)
   ==========================================================================
   Substitui a composição antiga (arco + card flutuante) por um único bloco de
   imagem que passa sozinho. O recorte é assimétrico — canto superior esquerdo e
   inferior direito bem arredondados, os outros dois quase retos — para não
   repetir o arco usado nos cards de turismo. */
.hero-slide {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.hero-slide-moldura {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--bg-card-alt);
  border: var(--border-width) solid var(--border-color);
  border-radius: 120px 26px 120px 26px;
  box-shadow: var(--shadow-hover);
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.hero-slide-img.ativa {
  opacity: 1;
  pointer-events: auto;
}

/* Uma imagem só: sem transição e sempre visível */
.hero-slide:not(.hero-slide-auto) .hero-slide-img {
  opacity: 1;
  position: relative;
}

/* Selo circular sobre o canto reto de cima, herdado da composição anterior */
.hero-slide-selo {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 9999px;
  background: #FCD34D;  /* mesmo amarelo do selo da composição anterior */
  border: var(--border-width) solid var(--border-color);
  box-shadow: var(--shadow-card);
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-secondary);
  padding: 6px;
  z-index: 2;
}

.hero-slide-pontos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.hero-slide-ponto {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease, width 0.15s ease;
}

.hero-slide-ponto:hover {
  background: var(--color-pine-soft, #EAF2EE);
}

.hero-slide-ponto.ativo {
  background: var(--color-primary);
  width: 28px;
}

@media (max-width: 900px) {
  .hero-slide {
    max-width: 380px;
  }
  .hero-slide-moldura {
    border-radius: 90px 20px 90px 20px;
  }
  .hero-slide-selo {
    width: 72px;
    height: 72px;
    font-size: 8.5px;
    top: 10px;
    right: 10px;
  }
}

/* ==========================================================================
   Paginação (.paginacao-neo)
   ==========================================================================
   O paginate_links() do WordPress sai como links soltos, sem relação com o
   resto do layout. Estes estilos vestem a saída dele com o design system. */
.paginacao-neo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.paginacao-neo .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-secondary);
  text-decoration: none;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.paginacao-neo a.page-numbers:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hover);
  background: var(--color-pine-soft);
}

.paginacao-neo a.page-numbers:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border-color);
}

/* Página atual: sem link, em destaque */
.paginacao-neo .page-numbers.current {
  background: var(--color-primary);
  color: #FFFFFF;
  cursor: default;
}

/* As reticências não são botão */
.paginacao-neo .page-numbers.dots {
  border: none;
  box-shadow: none;
  background: transparent;
  min-width: 20px;
  padding: 0 2px;
}

.paginacao-neo .prev .svg-icon {
  transform: rotate(180deg);
}

@media (max-width: 520px) {
  .paginacao-neo .prev span:not(.svg-icon),
  .paginacao-neo .next span:not(.svg-icon) {
    display: none;
  }
  .paginacao-neo .page-numbers {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
  }
}

/* ==========================================================================
   Página de Planos
   ========================================================================== */
/* Alternador mensal / anual */
.planos-periodo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  margin: 0 auto 26px;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 9999px;
  box-shadow: var(--shadow-card);
  /* O bloco é inline-flex; este wrapper centraliza sem div extra */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.planos-periodo-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-secondary);
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.planos-periodo-btn:hover {
  background: var(--color-pine-soft);
}

.planos-periodo-btn.ativo {
  background: var(--color-secondary);
  color: #FFFFFF;
}

.planos-periodo-selo {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 9999px;
  background: #FCD34D;
  color: var(--color-secondary);
  border: 1.5px solid var(--border-color);
}

/* Dois quadros lado a lado, largura contida para não esticarem demais */
/* Cada quadro com a altura do próprio conteúdo. Esticar os dois até a altura
   do maior deixava um vão de branco no plano gratuito, que tem menos itens. */
.grid-planos-duplo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 820px) {
  .grid-planos-duplo {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* O cartão distribui o conteúdo: topo, lista que cresce e botão sempre embaixo.
   É o que elimina a sobra de branco quando um plano tem menos itens que o outro. */
.plano-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  background: #FFFFFF;
}

.plano-card-destaque {
  border-width: 3px;
  box-shadow: 6px 6px 0 var(--border-color);
}

.plano-card-topo {
  flex-shrink: 0;
}

.plano-card-nome {
  font-size: 21px;
  font-weight: 900;
  margin: 12px 0 0;
  color: var(--color-secondary);
}

/* No plano gratuito "Grátis" faz as vezes de nome e de preço, então vem no
   mesmo tamanho do valor do plano pago — as duas colunas se alinham. */
.plano-nome-gratis {
  font-size: 30px;
  margin-top: 14px;
}

.plano-card-preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 30px;
  font-weight: 900;
  color: var(--color-secondary);
  margin: 10px 0 0;
}

.plano-card-preco span,
.plano-preco-periodo {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.plano-preco-valor {
  font-size: 30px;
  font-weight: 900;
  color: var(--color-secondary);
}

/* display:flex do autor vence o display:none que o atributo hidden aplica pela
   folha do navegador — sem esta regra, o aviso aparecia no período mensal. */
.plano-economia[hidden],
.plano-lista li[hidden] {
  display: none;
}

.plano-economia {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #166534;
  background: #DCFCE7;
  border: 1.5px solid #166534;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 12px 0 0;
}

.plano-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}

/* A lista ocupa o espaço restante: o botão fica colado na base nos dois cartões */
.plano-lista {
  flex: 1;
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-text);
}

.plano-lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.plano-lista-check {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.plano-card-cta {
  margin-top: auto;
}

/* ==========================================================================
   Dúvidas Frequentes em sanfona (.faq-neo)
   ========================================================================== */
.faq-neo {
  margin-top: 44px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.faq-neo-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 900;
  color: var(--color-secondary);
  margin: 0 0 20px;
}

.faq-neo-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-secondary);
  cursor: pointer;
  list-style: none;
  transition: background 0.12s ease;
}

/* Esconde o marcador nativo do <details> nos dois motores */
.faq-pergunta::-webkit-details-marker { display: none; }
.faq-pergunta::marker { content: ''; }

.faq-pergunta:hover {
  background: var(--color-pine-soft);
}

.faq-sinal {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  background: var(--bg-page);
  color: var(--color-secondary);
  transition: transform 0.2s ease, background 0.15s ease;
}

.faq-item[open] .faq-sinal {
  transform: rotate(180deg);
  background: var(--color-primary);
  color: #FFFFFF;
}

.faq-resposta {
  padding: 0 18px 17px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-text-muted);
  border-top: 1px dashed var(--bg-card-alt);
  padding-top: 14px;
  margin: 0 18px;
  padding-left: 0;
  padding-right: 0;
}

.faq-neo-rodape {
  text-align: center;
  font-size: 13.5px;
  color: var(--color-text-muted);
  margin: 22px 0 0;
}

.faq-neo-rodape a {
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.faq-neo-rodape a:hover {
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   Ajustes de Toque e Leitura no Celular
   ==========================================================================
   O layout já não estoura na horizontal — o que faltava era qualidade de uso
   com o dedo. Estas regras valem do celular até 767px e são desfeitas no
   desktop, onde o ponteiro do mouse acerta alvos pequenos sem esforço.

   Três problemas medidos e corrigidos aqui:

   1. ALVO DE TOQUE. 49 elementos interativos tinham menos de 44px — a medida
      recomendada pela WCAG 2.5.5 e pelas diretrizes da Apple e do Google.
      Os piores: os ícones sociais do topo (14 × 14 px) e o campo de busca da
      home (19 px de altura clicável).

   2. ZOOM NO iOS. O Safari dá zoom automático ao focar um campo com fonte
      menor que 16px, e o zoom desloca a página inteira. Cinco campos tinham
      13 a 14,5px. Subi para 16px só no celular; no desktop o tamanho
      compacto original volta.

   3. TEXTO MIÚDO. 25 trechos abaixo de 12px — legíveis no monitor, cansativos
      no celular. Piso de 12px, e 11,5px onde é rótulo curto em caixa alta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Item de grid/flex não encolhe abaixo do próprio conteúdo
   --------------------------------------------------------------------------
   Item de grid e de flex nasce com min-width:auto, que impede encolher abaixo
   da largura mínima do conteúdo. Bastava a linha de categorias do hero (que
   rola na horizontal, com nowrap) para esticar a coluna inteira: no celular
   ela ficava com 710px dentro de uma tela de 375px, e a página inteira ganhava
   rolagem lateral. min-width:0 devolve o controle ao container.
   Vale em qualquer largura — no desktop o efeito é o mesmo, só não aparecia. */
.hero-mockup-left,
.hero-mockup-right,
.blog-main,
.blog-sidebar,
.plano-card,
.empresa-perfil-identidade,
.footer-brand-col,
.footer-nav-col,
.callout-text-col,
.shopping-promo-content,
.ad-card-content {
  min-width: 0;
}

/* O mesmo para os containers que seguram grades */
.grid-cards > *,
.grid-produtos > *,
.grid-planos > *,
.grid-planos-duplo > *,
.hero-mockup-grid > *,
.blog-layout > * {
  min-width: 0;
}

@media (max-width: 767px) {

  /* ----- 1. Campos de formulário: 16px evita o zoom do iOS ----- */
  .input-neo,
  .select-neo,
  .textarea-neo,
  .hero-pill-search-input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }

  /* ----- 2. Alvos de toque com no mínimo 44px ----- */
  .btn-neo,
  .btn-neo-pill {
    min-height: 46px;
  }

  /* O botão pequeno deixa de ser pequeno no celular: ele é o "Ver Detalhes",
     o "WhatsApp" e o "Filtrar" — ações principais, não secundárias. */
  .btn-sm {
    min-height: 46px;
    padding: 10px 16px;
    font-size: 13.5px;
  }

  .hero-cat-pill {
    min-height: 46px;
    padding: 8px 16px 8px 9px;
  }

  .mobile-nav-toggle {
    min-width: 46px;
    min-height: 46px;
  }

  .top-utility-login {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* Ícone social tinha 14 × 14: área de toque vem do link, não do desenho */
  .top-utility-social a {
    min-width: 44px;
    min-height: 44px;
  }

  /* A logomarca é um link para a home e merece a mesma área dos demais */
  .brand-logo-link {
    min-height: 46px;
    align-items: center;
  }

  /* Links do rodapé tinham 22px de altura: em lista longa, erra o dedo */
  .footer-links-list li a,
  .top-utility-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-links-list li {
    line-height: 1.2;
  }

  .gm-share-btn {
    width: 46px;
    height: 46px;
  }

  .gm-contato-protegido,
  .empresa-contato-link {
    min-height: 46px;
    font-size: 14px;
  }

  .paginacao-neo .page-numbers {
    min-width: 46px;
    height: 46px;
  }

  .faq-pergunta {
    min-height: 52px;
    font-size: 15px;
  }

  .faq-sinal {
    width: 34px;
    height: 34px;
  }

  .planos-periodo-btn {
    min-height: 46px;
    font-size: 15px;
  }

  .empresa-perfil-rota {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }

  /* Bolinha de slide: o desenho continua pequeno, a área de toque não.
     O pseudo-elemento estende o alvo sem mexer no visual. */
  .hero-slide-ponto,
  .empresa-capa-ponto {
    position: relative;
  }

  .hero-slide-ponto::after,
  .empresa-capa-ponto::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Espaço entre as bolinhas para o alvo ampliado de uma não invadir a vizinha */
  .hero-slide-pontos,
  .empresa-capa-pontos {
    gap: 14px;
  }

  /* ----- 3. Piso de legibilidade ----- */
  .ad-disclaimer,
  .ad-category-badge,
  .gm-share-label,
  .badge-neo,
  .hero-tag-phrase {
    font-size: 11.5px;
  }

  .plano-card-desc,
  .plano-lista,
  .blog-sidebar-list em,
  .faq-neo-rodape,
  .empresa-perfil-endereco,
  .card-neo p {
    font-size: 13.5px;
  }

  /* ----- 4. Respiro geral ----- */
  /* Formulário de busca do hero: os três blocos empilham e cada um ganha
     altura de dedo, em vez de dividirem uma pílula de 19px. */
  .hero-pill-search-form {
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
    border-radius: var(--radius-card);
  }

  .hero-pill-search-input {
    flex: 1 1 100%;
    min-height: 46px;
    padding: 0 6px;
  }

  .hero-pill-search-btn {
    flex: 1 1 100%;
    min-height: 48px;
    justify-content: center;
  }

  .hero-search-leading-icon {
    display: none;
  }

  /* Barra de filtros: um campo por linha, cada um com altura de toque */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .filter-bar input,
  .filter-bar select,
  .filter-bar button,
  .filter-bar .btn-neo {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  /* Os dois botões do card ficam lado a lado, mas com altura de dedo */
  .grid-cards .btn-sm {
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* Telas bem estreitas (iPhone SE e similares) */
@media (max-width: 380px) {
  .grid-cards .btn-sm {
    font-size: 12px;
    padding: 10px 6px;
  }

  .empresa-perfil-nome {
    font-size: 20px;
  }

  .hero-mockup-title {
    font-size: 28px;
  }
}

/* --------------------------------------------------------------------------
   Correções medidas no site em execução, a 375px
   --------------------------------------------------------------------------
   O que segue foi encontrado auditando as páginas reais, não o CSS no papel:
   a barra superior transbordava 11px e quatro tipos de botão ficavam abaixo
   dos 44px recomendados para toque.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* A barra superior tinha "Marília/SP", os ícones sociais e o botão Entrar
     lado a lado, somando mais que a largura da tela. Agora ela pode quebrar
     em duas linhas em vez de empurrar a página. */
  .top-utility-inner {
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
  }

  .top-utility-right {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .top-utility-left {
    justify-content: center;
  }

  /* Botões redondos do portal: a seta dos carrosséis, o coração de favorito
     e os ícones sociais do rodapé estavam entre 32 e 36px. */
  .circle-arrow-btn,
  .empresa-favorite-btn,
  .social-circle-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Link de texto em lista: a altura de linha não dá alvo suficiente.
     O padding vertical resolve sem mudar o desenho. */
  .footer-links-list a,
  .top-utility-links a,
  .mobile-menu-links a {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* O título do card é o alvo principal de quem quer abrir o estabelecimento,
     e tinha só a altura da linha de texto. O padding amplia o toque sem
     mudar o desenho do card. */
  .grid-cards h2 a,
  .grid-cards h3 a,
  .grid-produtos h3 a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   Sem overflow-x:hidden como rede de segurança
   --------------------------------------------------------------------------
   A tentação é travar html/body com overflow-x:hidden para garantir que nada
   role de lado. Não fazemos isso por dois motivos, ambos verificados aqui:

   1. QUEBRA O STICKY. Com overflow-x:hidden no html, o elemento de rolagem
      muda e position:sticky para de funcionar — a barra lateral do blog
      deixava de acompanhar a leitura.
   2. ESCONDE O PROBLEMA EM VEZ DE RESOLVER. A trava faz o sintoma sumir e a
      causa continuar. Foi corrigindo a causa (min-width:0 nos itens de grid)
      que a rolagem lateral acabou de verdade, em todas as páginas, de 320px
      para cima.

   Se a rolagem lateral voltar, é sinal de um elemento novo sem min-width:0 —
   e é melhor que apareça do que fique escondido. */

/* --------------------------------------------------------------------------
   Escolha de plano no cadastro (.plano-escolha)
   --------------------------------------------------------------------------
   Era um label em linha única com estilo embutido: marcador, descrição e preço
   lado a lado. Em 375px o preço saía da tela, e o marcador tinha 13px de alvo.
   Agora o preço quebra para a linha de baixo quando falta espaço, e o label
   inteiro é a área de toque — que é como um seletor de plano deve funcionar. */
.plano-escolha {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  min-height: 56px;
}

.plano-escolha > div {
  flex: 1;
  min-width: 0;
}

.plano-escolha input[type="radio"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.plano-escolha > span {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Sem espaço para o preço ao lado: ele passa para a linha de baixo,
     alinhado à direita, em vez de vazar da tela. */
  .plano-escolha > span {
    width: 100%;
    text-align: right;
    padding-left: 34px;
  }
}

/* ==========================================================================
   Página Inicial no Celular
   ========================================================================== */

/* Título do menu lateral, no lugar da logomarca que já está no cabeçalho */
.mobile-menu-titulo {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* A frase da barra superior troca com uma passagem suave */
.city-slogan {
  transition: opacity 0.35s ease;
}

.city-slogan.trocando {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Carrossel horizontal no celular (.carrossel-celular)
   --------------------------------------------------------------------------
   As grades da home viram faixas que deslizam com o dedo em vez de empilhar
   cartões um embaixo do outro — a página ficava longa demais para rolar.
   No computador nada muda: as mesmas grades continuam valendo. */
@media (max-width: 767px) {
  .carrossel-celular {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 14px;
    /* Cada cartão para no lugar, em vez de parar no meio do caminho */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Sangra até a borda da tela para o próximo cartão aparecer espiando */
    margin-left: -16px;
    margin-right: -16px;
    padding: 4px 16px 14px;
  }

  .carrossel-celular::-webkit-scrollbar {
    display: none;
  }

  .carrossel-celular > * {
    scroll-snap-align: start;
    flex: 0 0 82%;
    min-width: 0;
  }

  /* Empresas em destaque: um cartão de cada vez, como pedido.
     A sobra de 12% mostra a borda do próximo — é o que avisa que dá para
     deslizar, sem precisar de seta nem instrução. */
  .carrossel-um-a-um > * {
    flex: 0 0 88%;
  }

  /* Cartões de ação mais enxutos: o texto longo virava um bloco alto que
     empurrava o resto da página. */
  .carrossel-celular .action-card-neo {
    padding: 16px;
  }

  /* Corta em três linhas por altura, e não por -webkit-line-clamp: o cartão é
     um container flex, e o navegador converte o display:-webkit-box do filho
     para flow-root — o clamp deixa de valer e o texto volta a aparecer todo. */
  .carrossel-celular .action-card-desc {
    font-size: 13px;
    line-height: 1.55;
    max-height: calc(1.55em * 3);
    overflow: hidden;
  }

  .carrossel-celular .action-card-title {
    font-size: 16px;
  }

}

/* --------------------------------------------------------------------------
   Slide da home: opcional no celular
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-mockup-right.esconde-no-celular {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Barra superior em uma linha só
   --------------------------------------------------------------------------
   Antes ela quebrava em duas: "Marília/SP" em cima, ícones e botão embaixo.
   Agora a frase da cidade some quando o espaço aperta, e o que resta —
   localização, redes e acesso — cabe numa linha. */
@media (max-width: 767px) {
  .top-utility-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
  }

  .top-utility-left {
    min-width: 0;
    flex-shrink: 1;
  }

  .top-utility-right {
    flex-wrap: nowrap;
    gap: 4px;
    flex-shrink: 0;
  }

  .top-utility-divider {
    display: none;
  }

  /* A frase é o conteúdo que muda e vale ser lido; ela nunca quebra linha,
     corta com reticências se o espaço apertar. */
  .city-slogan {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .city-location strong {
    font-size: 12px;
  }

  /* Os ícones sociais ficam para o rodapé, onde já aparecem maiores */
  .top-utility-social {
    display: none;
  }

  /* O acesso ao painel passou para dentro do menu: na barra fica só a
     frase, que é o conteúdo que muda e vale ser lido. */
  .top-utility-right {
    display: none;
  }

  /* "Marília/SP" no canto, em laranja; a frase centralizada na barra.

     São três colunas: a terceira fica vazia de propósito. Com ela, as duas
     laterais têm a mesma largura e a frase cai no meio de verdade — sem a
     coluna vazia, a frase apenas dividia o espaço que sobrava e ficava
     deslocada para a direita (medido: 43 px fora do centro). */
  .top-utility-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
  }

  .top-utility-left {
    display: contents;
  }

  .city-location {
    color: var(--color-primary);
    white-space: nowrap;
    justify-self: start;
  }

  .city-location strong {
    font-size: 12px;
    color: var(--color-primary);
  }

  .city-slogan {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Rodapé centralizado no celular
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer-content-grid {
    text-align: center;
  }

  /* A marca fica centralizada; as colunas de navegação alinham à esquerda,
     que é como sanfona se lê — título e seta nas pontas da mesma linha.
     Os ícones sociais acompanham os títulos para não ficarem órfãos. */
  .footer-brand-col {
    align-items: center;
  }

  .footer-social-col {
    align-items: stretch;
    width: 100%;
  }

  .footer-content-grid .footer-social-icons {
    justify-content: flex-start;
  }

  .footer-content-grid .footer-social-col {
    text-align: left;
  }

  .footer-cursive-phrase {
    align-self: center;
  }

  /* A sanfona precisa da largura toda: é ela a área de toque do cabeçalho,
     e é ela que dá a linha divisória de ponta a ponta. */
  .footer-nav-col {
    align-items: stretch;
    width: 100%;
  }

  .footer-logo-link {
    justify-content: center;
  }

  .footer-links-list {
    align-items: center;
  }

  .footer-social-icons {
    justify-content: center;
  }

  .footer-cursive-phrase {
    text-align: center;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
}

/* ==========================================================================
   Sanfonas do rodapé e do filtro
   ==========================================================================
   Os dois usam o <details> nativo do HTML: abrem e fecham sem JavaScript e o
   leitor de tela anuncia o estado sozinho. No computador o conteúdo é forçado
   a aparecer e o cabeçalho deixa de responder ao clique — a sanfona existe
   só onde ela resolve um problema, que é o espaço do celular.
   ========================================================================== */

/* Esconde o triângulo padrão do <details> nos dois motores */
.footer-nav-col > summary::-webkit-details-marker,
.filtro-recolhivel > summary::-webkit-details-marker {
  display: none;
}

.footer-nav-col > summary::marker,
.filtro-recolhivel > summary::marker {
  content: '';
}

/* -------------------------------------------------------------- Rodapé -- */
.footer-nav-col > summary {
  list-style: none;
  cursor: pointer;
}

.footer-col-sinal {
  display: none;
}

@media (max-width: 767px) {
  .footer-nav-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    margin: 0;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .footer-col-sinal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease, background 0.15s ease;
  }

  .footer-nav-col[open] > summary .footer-col-sinal {
    transform: rotate(180deg);
    background: rgba(255, 255, 255, 0.15);
  }

  .footer-nav-col[open] > summary {
    border-bottom-color: transparent;
  }

  .footer-col-conteudo {
    padding: 6px 4px 14px;
  }

  /* Sanfona fechada é uma lista de títulos: alinhar à esquerda deixa a
     coluna de toque previsível, em vez de cada título num lugar. */
  .footer-content-grid .footer-nav-col {
    text-align: left;
  }

  .footer-nav-col .footer-links-list {
    align-items: flex-start;
  }
}

/* No computador a sanfona some: tudo aberto e sem clique.

   Atencao: `display` NAO reabre um <details> fechado. O navegador esconde o
   conteudo com `content-visibility: hidden` no `::details-content`, que
   ganha de qualquer display do autor. Por isso o <details> nasce com o
   atributo `open` no HTML e o JavaScript so o FECHA no celular — assim,
   com o script desligado, nada fica escondido em lugar nenhum. */
@media (min-width: 768px) {
  .footer-nav-col > summary {
    pointer-events: none;
  }
}

/* -------------------------------------------------------------- Filtro -- */
.filtro-recolhivel {
  margin-bottom: 28px;
}

.filtro-recolhivel > summary {
  list-style: none;
  cursor: pointer;
  display: none; /* no computador nao ha o que recolher */
}

/* O <details> fica aberto por padrao; quem recolhe no celular e o script. */

.filtro-recolhivel .filter-bar {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .filtro-recolhivel > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    font-size: 15px;
    font-weight: 800;
    color: var(--color-secondary);
  }

  .filtro-recolhivel[open] > summary {
    margin-bottom: 12px;
  }

  .filtro-recolhivel-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  /* Quantos filtros estão aplicados: com a caixa fechada, é o que diz que a
     lista abaixo não é a lista completa. */
  .filtro-recolhivel-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 9999px;
    background: var(--color-primary);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 900;
  }

  .filtro-recolhivel-sinal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9999px;
    border: 2px solid var(--border-color);
    background: var(--bg-page);
    transition: transform 0.2s ease, background 0.15s ease;
  }

  .filtro-recolhivel[open] > summary .filtro-recolhivel-sinal {
    transform: rotate(180deg);
    background: var(--color-primary);
    color: #FFFFFF;
  }
}

/* ==========================================================================
   Selo de Aberto / Fechado (.status-horario)
   ========================================================================== */
.status-horario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.status-horario-bolinha {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: currentColor;
  position: relative;
}

.status-horario-detalhe {
  font-weight: 600;
  opacity: 0.85;
}

/* Aberto: verde com a bolinha pulsando devagar, como um sinal de vida */
.esta-aberto {
  background: #DCFCE7;
  color: #166534;
  border-color: #166534;
}

.esta-aberto .status-horario-bolinha::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: status-pulso 2.2s ease-out infinite;
}

@keyframes status-pulso {
  0%   { transform: scale(0.6); opacity: 0.75; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Fechado: vermelho, para bater o olho e já saber que não adianta ir agora. */
.esta-fechado {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #B91C1C;
}

/* O pulso é decorativo: quem pediu menos animação recebe a bolinha parada */
@media (prefers-reduced-motion: reduce) {
  .esta-aberto .status-horario-bolinha::after {
    animation: none;
  }
}

/* Versão dos cards: só bolinha e rótulo */
.status-horario-compacto {
  padding: 4px 10px;
  font-size: 11.5px;
  border-width: 1.5px;
  margin-bottom: 8px;
}

/* ==========================================================================
   Agenda de horários no perfil (.agenda-horarios)
   ========================================================================== */
.agenda-horarios {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px dashed var(--bg-card-alt);
}

.agenda-horarios-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 900;
  color: var(--color-secondary);
  margin: 0 0 12px;
}

.agenda-horarios-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 460px;
}

.agenda-horarios-lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 2px;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--bg-card-alt);
}

.agenda-horarios-lista li:last-child {
  border-bottom: none;
}

.agenda-dias {
  font-weight: 800;
  color: var(--color-secondary);
}

.agenda-horas {
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
}

.agenda-fechado .agenda-dias,
.agenda-fechado .agenda-horas {
  color: var(--color-text-muted);
  font-weight: 600;
}

@media (max-width: 767px) {
  .agenda-horarios-lista li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .agenda-horas {
    text-align: left;
  }
}

/* ==========================================================================
   Formulário de candidatura à vaga (.form-candidatura)
   ========================================================================== */
.form-candidatura-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-candidatura-linha label {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-secondary);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.form-candidatura .obrigatorio {
  color: var(--color-primary);
}

.form-candidatura .form-dica {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.form-candidatura-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Campo de arquivo com a mesma cara dos outros controles */
.input-arquivo {
  width: 100%;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-page);
  border: 2px dashed var(--border-color);
  border-radius: 10px;
  cursor: pointer;
}

.input-arquivo::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-secondary);
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
}

.input-arquivo:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.form-candidatura-aviso {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: center;
}

.form-candidatura-aviso a {
  color: var(--color-secondary);
  font-weight: 700;
}

/* O campo isca precisa sumir sem usar display:none — navegador de robô
   costuma ignorar o que está escondido assim e preencher mesmo assim. */
.campo-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------- Recado pós-envio -- */
.aviso-candidatura {
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 2px solid;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.55;
}

.aviso-ok {
  background: #DCFCE7;
  border-color: #166534;
  color: #14532D;
}

.aviso-erro {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #991B1B;
}

@media (max-width: 767px) {
  .form-candidatura-duplo {
    grid-template-columns: 1fr;
  }

  /* 16px é o mínimo para o iOS não dar zoom ao focar. O campo de arquivo não
     recebe digitação, mas fica na mesma medida dos vizinhos. */
  .input-arquivo {
    font-size: 16px;
  }
}

/* ==========================================================================
   Imprimir um cupom
   ========================================================================== */
.coupon-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Só existe no papel */
.cupom-rodape-impressao {
  display: none;
}

@media print {
  /* Esconde tudo e revela só o cupom escolhido.

     Usamos `visibility` em vez de listar o que esconder (cabeçalho, rodapé,
     banners...): visibility é herdada, então um único par de regras cobre a
     página inteira e continua valendo quando algum bloco for renomeado ou
     algum novo aparecer. A lista por nome de classe quebra calada. */
  body.imprimindo-cupom * {
    visibility: hidden;
  }

  body.imprimindo-cupom .cupom-para-imprimir,
  body.imprimindo-cupom .cupom-para-imprimir * {
    visibility: visible;
  }

  /* Os botões não servem no papel. */
  body.imprimindo-cupom .coupon-acoes {
    display: none !important;
  }

  /* Sobe o cupom para o alto da folha: os blocos de cima continuam ocupando
     lugar no layout, mesmo invisíveis, e deixariam a folha 1 em branco. */
  body.imprimindo-cupom .cupom-para-imprimir {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 460px;
    /* Corta na tesoura: a borda tracejada mostra onde. */
    border: 2px dashed #000 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    padding: 22px !important;
    page-break-inside: avoid;
  }

  body.imprimindo-cupom .cupom-rodape-impressao {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #666;
    font-size: 10px;
    color: #333;
    text-align: center;
  }

  /* O código é o que o caixa vai ler: sai grande, com borda forte. */
  body.imprimindo-cupom .cupom-para-imprimir .coupon-code-box {
    border: 2px solid #000 !important;
    background: #FFF !important;
    padding: 12px 14px !important;
  }

  body.imprimindo-cupom .cupom-para-imprimir .coupon-code-box span[style*="monospace"] {
    font-size: 22px !important;
    letter-spacing: 2px !important;
  }

  /* Papel branco: o fundo ilustrado do site não vai para a impressora. */
  body.imprimindo-cupom {
    background: #FFF !important;
  }

  /* Tinta preta no papel branco, independente do tema do site. */
  body.imprimindo-cupom .cupom-para-imprimir,
  body.imprimindo-cupom .cupom-para-imprimir * {
    background: #FFF !important;
    color: #000 !important;
  }

  @page {
    margin: 14mm;
  }
}

/* -------------------------------------------------- Painel no menu mobile -- */
.mobile-menu-painel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-bottom: 10px;
  padding: 11px 16px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--color-secondary);
  text-decoration: none;
  background: var(--bg-page);
  border: 2px solid var(--border-color);
  border-radius: 9999px;
}

.mobile-menu-painel:hover,
.mobile-menu-painel:focus-visible {
  background: #FFFFFF;
}

/* -------------------------------------- Cupom no celular: só o ícone -- */
@media (max-width: 767px) {
  /* Com a palavra, os dois botões quebravam em duas linhas dentro da caixa
     do código. O ícone sozinho resolve e ainda vira um alvo quadrado maior. */
  .coupon-acoes .btn-copiar span,
  .coupon-acoes .btn-imprimir-cupom span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .coupon-acoes .btn-copiar,
  .coupon-acoes .btn-imprimir-cupom {
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .coupon-acoes .svg-icon {
    width: 19px;
    height: 19px;
  }
}

/* -------------------------------------------------- Botão "Ver Vaga" -- */
/* Fundo difuso em vez do branco: dentro do card, que já é branco, o botão
   branco sumia e só a borda o separava do resto. Um véu esverdeado leve o
   destaca sem competir com o laranja das ações principais do portal. */
.btn-vaga {
  background: linear-gradient(180deg, rgba(30, 107, 104, 0.13), rgba(30, 107, 104, 0.07));
  color: var(--color-pine);
  border-color: var(--border-color);
}

.btn-vaga:hover,
.btn-vaga:focus-visible {
  background: linear-gradient(180deg, rgba(30, 107, 104, 0.22), rgba(30, 107, 104, 0.13));
  color: var(--color-pine);
}

/* ==========================================================================
   Eventos (.evento-card, .evento-pagina)
   ========================================================================== */
.evento-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 14px;
  overflow: hidden;
}

.evento-card-foto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-card-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border-width) solid var(--border-color);
}

.evento-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.evento-card-sem-foto {
  color: var(--color-text-muted);
  opacity: 0.55;
}

/* Selo de tempo, no alto à esquerda */
.evento-selo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 11px;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  background: #FFFFFF;
  color: var(--color-secondary);
}

.evento-selo-agora {
  background: #DCFCE7;
  color: #166534;
  border-color: #166534;
}

.evento-selo-passou {
  background: var(--bg-card-alt);
  color: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

/* Preço, no alto à direita: é a primeira coisa que a pessoa procura */
.evento-selo-ingresso {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 12px;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.ingresso-gratis {
  background: #DCFCE7;
  color: #14532D;
  border-color: #166534;
}

.ingresso-pago {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* O evento passado fica discreto sem sumir: continua legível para consulta */
.evento-passou .evento-card-foto img {
  filter: grayscale(0.7);
  opacity: 0.75;
}

.evento-card-corpo {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  flex: 1;
}

.evento-card-categoria {
  align-self: flex-start;
  font-size: 10.5px;
}

.evento-card-titulo {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--color-secondary);
  margin: 2px 0 0;
}

.evento-card-titulo a {
  color: inherit;
  text-decoration: none;
}

.evento-card-quando,
.evento-card-local {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.evento-card-quando .svg-icon,
.evento-card-local .svg-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.evento-card-resumo {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

/* O botão desce para a base: os cards da grade terminam alinhados mesmo
   com textos de tamanhos diferentes. */
.evento-card-botao {
  margin-top: auto;
}

/* ------------------------------------------------- Filtro da agenda -- */
.filtro-passados {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* Não cresce nem encolhe: ocupa a largura do próprio texto, ao lado do
     select, em vez de se espalhar pela barra. */
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.filtro-passados input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ------------------------------------------------- Página do evento -- */
.evento-pagina-capa {
  aspect-ratio: 16 / 7;
  background: var(--bg-card-alt);
  border-bottom: var(--border-width) solid var(--border-color);
}

.evento-pagina-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.evento-pagina-corpo {
  padding: 26px 24px;
}

.evento-pagina-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Na página os selos entram na linha, sem o canto da foto */
.evento-pagina-selos .evento-selo-ingresso {
  position: static;
}

.evento-pagina-titulo {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-secondary);
  margin: 0;
}

.evento-pagina-organizador {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.evento-aviso-passado {
  margin-top: 16px;
  padding: 12px 14px;
  border: 2px solid var(--color-text-muted);
  border-radius: 12px;
  background: var(--bg-card-alt);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.evento-pagina-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 22px 0;
  padding: 18px;
  background: var(--bg-page);
  border: 2px solid var(--border-color);
  border-radius: 14px;
}

.evento-dado {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  /* Sem isto, a coluna do grid não encolhe e o endereço longo estoura. */
  min-width: 0;
}

.evento-dado-icone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  color: var(--color-primary);
}

.evento-dado > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.evento-dado-rotulo {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.evento-dado strong {
  font-size: 14.5px;
  font-weight: 900;
  color: var(--color-secondary);
  line-height: 1.3;
}

.evento-dado-extra {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.evento-pagina-texto {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
}

.evento-pagina-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.evento-pagina-acoes .btn-neo {
  flex: 1 1 220px;
}

@media (max-width: 767px) {
  .evento-pagina-corpo {
    padding: 20px 16px;
  }

  .evento-pagina-titulo {
    font-size: 22px;
  }

  .evento-pagina-dados {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  /* Um por linha: dois botões grandes lado a lado ficam estreitos demais
     para o polegar. */
  .evento-pagina-acoes .btn-neo {
    flex: 1 1 100%;
  }

  .filtro-passados {
    white-space: normal;
  }
}

/* ==========================================================================
   Resultados da Loteria (.loteria-card, .loteria-carrossel)
   ========================================================================== */
.section-loterias {
  margin-top: 48px;
}

/* No celular é carrossel — um card por vez, com encaixe. No computador vira
   grade de três: a home mostra só os três sorteios mais recentes, então eles
   cabem lado a lado e não sobra barra de rolagem. O resto fica em /loterias. */
.loteria-carrossel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
}

.loteria-carrossel > .loteria-card {
  flex: 0 0 290px;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .loteria-carrossel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    padding: 4px;
  }

  /* Em grade o item não é mais um item de flex: sem isto ele continuaria
     preso aos 290 px e a grade ficaria com buracos. */
  .loteria-carrossel > .loteria-card {
    flex: initial;
  }
}

/* Na página /loterias os cards viram grade, sem rolagem lateral. */
.loteria-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}

.loteria-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 14px;
  /* A faixa colorida no topo é o que identifica a loteria de relance. */
  border-top: 6px solid var(--loteria-cor, var(--color-primary));
  box-shadow: var(--shadow-neo, 4px 4px 0 var(--border-color));
  /* Sem isto, um card de conteúdo largo (Lotofácil, Federal) força a
     largura do item do flex e estoura o carrossel. */
  min-width: 0;
}

.loteria-card-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.loteria-card-nome {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--loteria-cor, var(--color-secondary));
}

.loteria-card-concurso {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.loteria-selo {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 2px solid var(--border-color);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.loteria-selo-acumulou {
  background: #FEF3C7;
  color: #92400E;
  border-color: #B45309;
}

.loteria-selo-premiado {
  background: #DCFCE7;
  color: #166534;
  border-color: #166534;
}

.loteria-selo-neutro {
  background: var(--bg-card-alt);
  color: var(--color-text-muted);
  border-color: var(--color-text-muted);
}

/* ------------------------------------------------------------ Dezenas -- */
.loteria-bolas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.loteria-bola {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: var(--loteria-cor, var(--color-primary));
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.loteria-sorteio {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loteria-sorteio-rotulo,
.loteria-coluna-rotulo,
.loteria-extra-rotulo,
.loteria-premio-rotulo {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

/* Super Sete: cada algarismo embaixo do nome da sua coluna */
.loteria-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.loteria-coluna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* Federal: bilhete é número de conferir, então sai em fonte de largura fixa */
.loteria-bilhetes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.loteria-bilhetes li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: var(--bg-page);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
}

.loteria-bilhete-lugar {
  font-size: 11px;
  font-weight: 900;
  color: var(--loteria-cor, var(--color-primary));
  min-width: 22px;
}

.loteria-bilhete-numero {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-secondary);
}

/* ------------------------------------------------ Trevos, time, mês -- */
.loteria-extra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 13px;
  color: var(--color-secondary);
}

.loteria-trevo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: #FDE68A;
  border: 1.5px solid #B45309;
  color: #7C2D12;
  font-size: 12px;
  font-weight: 900;
}

/* ------------------------------------------------------------- Prêmio -- */
.loteria-premio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 11px 13px;
  border-radius: 10px;
  /* Um véu da cor da loteria: destaca o valor sem pedir mais uma cor nova. */
  background: color-mix(in srgb, var(--loteria-cor, #1E6B68) 10%, #FFFFFF);
  border: 1.5px solid color-mix(in srgb, var(--loteria-cor, #1E6B68) 35%, #FFFFFF);
}

.loteria-premio-valor {
  font-size: 16px;
  font-weight: 900;
  color: var(--loteria-cor, var(--color-secondary));
  font-variant-numeric: tabular-nums;
}

.loteria-proximo-sorteio {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted);
}

.loteria-aviso {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  /* Um card por vez, ocupando quase a tela: é o que o dedo espera de um
     carrossel no celular. */
  .loteria-carrossel > .loteria-card {
    flex-basis: 84vw;
    max-width: 320px;
  }

  /* Cada card com a sua altura. No computador eles ficam lado a lado e a
     altura igual alinha bonito; no celular, visto um por vez, a altura do
     mais alto (Lotomania, 20 dezenas) abria um vão enorme dentro dos
     cards curtos, como a Quina, que tem cinco. */
  .loteria-carrossel {
    align-items: flex-start;
  }

  /* Sem o empurrão para a base, o prêmio vem logo após as dezenas. */
  .loteria-carrossel .loteria-premio {
    margin-top: 0;
  }

  .loteria-grade {
    grid-template-columns: 1fr;
  }

  .loteria-bola {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

/* Navegador sem color-mix cai num cinza claro em vez de ficar sem fundo. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .loteria-premio {
    background: var(--bg-page);
    border-color: var(--border-soft, #D9D4C7);
  }
}

/* ==========================================================================
   Submenu "Mais" do topo
   ========================================================================== */
/* O botão era um <a href="#"> sem nada dentro: clicava e não acontecia nada.
   Agora é um <button> de verdade, com painel e estado anunciado. */
.dropdown-toggle {
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  /* Só a família é herdada. O atalho `font: inherit` também zerava tamanho e
     peso, e como esta regra vem depois da .nav-item o botão saía em 16px/400
     enquanto os links do menu estão em 13,5px/800 — o "Mais" ficava mais
     fino e maior que os vizinhos. */
  font-family: inherit;
}

/* O `display: flex` abaixo vence o `[hidden] { display: none }` do navegador,
   que tem especificidade menor. Sem esta linha o painel fica SEMPRE visível,
   por mais que o atributo `hidden` esteja lá — foi o que aconteceu. */
.dropdown-painel[hidden] {
  display: none;
}

.dropdown-painel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  min-width: 228px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-neo, 4px 4px 0 var(--border-color));
}

/* Ponte invisível sobre a folga entre o botão e o painel: sem ela o ponteiro
   sai da área ao descer e o painel fecharia no meio do caminho. */
.dropdown-painel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.dropdown-painel a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-painel a:hover,
.dropdown-painel a:focus-visible {
  background: var(--bg-page);
  color: var(--color-primary);
}

.dropdown-painel .nav-item-icone {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* A seta vira para cima enquanto o painel está aberto. */
.dropdown-toggle[aria-expanded="true"] .svg-icon {
  transform: rotate(180deg);
}

.dropdown-toggle .svg-icon {
  transition: transform 0.18s ease;
}

/* ==========================================================================
   Aviso de cookies (LGPD)
   ========================================================================== */
/* O `display: flex` abaixo venceria o `[hidden]` do navegador, que tem
   especificidade menor — sem esta linha o aviso ficaria sempre na tela. */
.lgpd-aviso[hidden],
.lgpd-escolhas[hidden],
.lgpd-reabrir[hidden] {
  display: none;
}

/* Barra de largura cheia, encostada no rodape da janela. O cartao flutuante
   que havia aqui cobria o conteudo no meio da tela e competia com ele; uma
   barra corrida se le como aviso do site, nao como janela a fechar. */
.lgpd-aviso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #FFFFFF;
  border: none;
  border-top: var(--border-width) solid var(--border-color);
  border-radius: 0;
  box-shadow: 0 -4px 0 rgba(13, 51, 42, 0.08);
}

/* O texto e os botoes acompanham a largura do resto do portal, em vez de
   esticarem de ponta a ponta numa tela larga. */
.lgpd-caixa {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 768px) {
  .lgpd-caixa {
    padding: 16px 24px;
  }
}

.lgpd-conteudo {
  flex: 1;
  min-width: 0;
}

.lgpd-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 900;
  color: var(--color-secondary);
}

.lgpd-titulo .svg-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.lgpd-texto {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
}

.lgpd-texto a {
  color: var(--color-secondary);
  font-weight: 700;
}

/* Os três botões com o mesmo tamanho e lado a lado: recusar não pode ser
   mais difícil de achar que aceitar. */
.lgpd-botoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.lgpd-botoes .btn-neo {
  min-height: 44px;
  white-space: nowrap;
}

/* -------------------------------------------------- Escolha por categoria -- */
.lgpd-escolhas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px;
  border-top: 2px dashed var(--bg-card-alt);
  background: var(--bg-page);
  max-height: 46vh;
  overflow-y: auto;
}

.lgpd-categoria-topo {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-secondary);
  min-height: 32px;
}

.lgpd-categoria-topo input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.lgpd-categoria-topo input:disabled {
  cursor: default;
  opacity: 0.75;
}

.lgpd-sempre {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  padding: 2px 8px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 9999px;
}

.lgpd-categoria-desc {
  margin: 4px 0 0 27px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.lgpd-botoes-escolhas {
  justify-content: flex-end;
}

/* ---------------------------------------------------- Voltar ao aviso -- */
.lgpd-reabrir {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-secondary);
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 9999px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}

.lgpd-reabrir:hover,
.lgpd-reabrir:focus-visible {
  opacity: 1;
}

.lgpd-reabrir .svg-icon {
  color: var(--color-primary);
}

@media (max-width: 767px) {
  /* No celular o texto vem em cima e os botões embaixo, em largura cheia:
     três botões lado a lado numa tela de 375 px ficariam estreitos demais
     para o polegar. */
  .lgpd-caixa {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .lgpd-botoes .btn-neo {
    flex: 1 1 100%;
  }

  .lgpd-reabrir {
    left: 10px;
    bottom: 10px;
  }
}

/* ==========================================================================
   Conteúdo escrito pelo lojista e pela redação (.conteudo-rico)
   ==========================================================================
   O reset do tema zera a margem de TUDO (`* { margin: 0 }`). Isso é bom para
   o layout, mas apagava o espaço entre parágrafos justamente onde ele importa:
   o texto vinha do editor já com <p>, e na tela aparecia tudo grudado.
   Aqui a tipografia do texto corrido é devolvida — e só dentro desta caixa,
   sem mexer no resto do portal. */
.conteudo-rico > *:first-child {
  margin-top: 0;
}

.conteudo-rico > *:last-child {
  margin-bottom: 0;
}

.conteudo-rico p {
  margin: 0 0 1em;
  line-height: 1.7;
}

.conteudo-rico h2,
.conteudo-rico h3,
.conteudo-rico h4 {
  margin: 1.4em 0 0.5em;
  font-weight: 900;
  line-height: 1.25;
  color: var(--color-secondary);
}

.conteudo-rico h2 { font-size: 1.35em; }
.conteudo-rico h3 { font-size: 1.18em; }
.conteudo-rico h4 { font-size: 1.05em; }

.conteudo-rico ul,
.conteudo-rico ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.conteudo-rico li {
  margin-bottom: 0.35em;
  line-height: 1.6;
}

.conteudo-rico ul { list-style: disc; }
.conteudo-rico ol { list-style: decimal; }

.conteudo-rico a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.conteudo-rico strong,
.conteudo-rico b {
  font-weight: 800;
  color: var(--color-secondary);
}

.conteudo-rico blockquote {
  margin: 0 0 1em;
  padding: 12px 16px;
  border-left: 4px solid var(--color-primary);
  background: var(--bg-page);
  border-radius: 0 10px 10px 0;
  font-style: italic;
}

.conteudo-rico img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 0.5em 0 1em;
}

/* Tabela colada num guia comercial costuma ser lista de preço ou horário:
   precisa rolar sozinha em vez de esticar a página no celular. */
.conteudo-rico table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 1em;
}

.conteudo-rico th,
.conteudo-rico td {
  padding: 8px 12px;
  border: 1px solid var(--border-soft, #D9D4C7);
  text-align: left;
}

.conteudo-rico hr {
  margin: 1.5em 0;
  border: none;
  border-top: 2px dashed var(--bg-card-alt);
}

/* ----------------------------------------- Plano de entrada (pagamento único) -- */
/* O selo que diz o que mais importa neste plano: a cobrança não volta. */
.plano-selo-unico {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 5px 11px;
  border-radius: 9999px;
  background: #DCFCE7;
  border: 1.5px solid #166534;
  font-size: 11.5px;
  font-weight: 800;
  color: #14532D;
}

.plano-selo-unico .svg-icon {
  color: #166534;
  flex-shrink: 0;
}

/* "uma vez só" no lugar de "/mês": a diferença entre os dois quadros é essa. */
.plano-card-entrada .plano-preco-periodo {
  font-weight: 700;
}

/* Com um quadro só, ele fica centralizado em vez de preso na coluna da
   esquerda — foi o que deixou o card do PRO torto e meia-largura. */
.grid-planos-solo {
  grid-template-columns: minmax(0, 420px) !important;
  justify-content: center;
}


/* ==========================================================================
   Calendário do Comércio (.cal-*)
   ==========================================================================
   Doze meses numa tela só. No celular eles viram uma coluna; no desktop, uma
   grade que acompanha a largura disponível. As cores dos dias são as mesmas
   da legenda impressa da ACIM, para quem tem o calendário na parede
   reconhecer a tela. */

/* ------------------------------------------------------- O dia de hoje -- */
.cal-hoje {
  display: block;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: var(--color-secondary);
  border: var(--border-width) solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-neo, 5px 5px 0 var(--border-color));
  border-left: 10px solid var(--cal-cor, var(--color-primary));
}

.cal-hoje-marca {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.cal-hoje-horario {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
  color: #FFFFFF;
}

.cal-hoje-data {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

.cal-hoje-data strong { color: #FFFFFF; }

.cal-hoje-nota {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------- Anos ----- */
.cal-anos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.cal-ano-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-secondary);
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 9999px;
  text-decoration: none;
}

.cal-ano-btn.ativo {
  background: var(--color-secondary);
  color: #FFFFFF;
}

/* ---------------------------------------------------------- Legenda ----- */
.cal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.cal-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 13px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-secondary);
  background: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 9999px;
  cursor: pointer;
}

.cal-legenda-item[aria-pressed="true"] {
  background: var(--color-secondary);
  color: #FFFFFF;
}

.cal-bolinha {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  flex-shrink: 0;
}

.cal-dica {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

/* ------------------------------------------------------------ Meses ----- */
.cal-meses {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 560px) {
  .cal-meses { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .cal-meses { grid-template-columns: repeat(3, 1fr); }
}

.cal-mes {
  background: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-neo, 5px 5px 0 var(--border-color));
  padding: 14px;
  /* Sem isto, um mês com muitas observações no rodapé fica mais alto que os
     vizinhos e a grade ganha buracos. */
  display: flex;
  flex-direction: column;
}

/* O mês corrente se anuncia: é o que a pessoa veio ver. */
.cal-mes-atual {
  border-color: var(--color-primary);
  box-shadow: 5px 5px 0 var(--color-primary);
}

.cal-mes-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cal-mes-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.cal-mes-nome {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: var(--color-secondary);
}

.cal-semana-topo,
.cal-grade {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-semana-topo {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--bg-card-alt);
}

.cal-semana-topo span {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--color-text-muted);
}

.cal-semana-topo .domingo { color: var(--color-primary); }

.cal-dia {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid rgba(13, 51, 42, 0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cal-dia:hover { transform: scale(1.12); }

.cal-dia:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Dia com observação ganha um ponto: o rodapé do mês conta o que é. */
.cal-dia-nota { font-weight: 900; border-color: var(--border-color); }

.cal-dia-hoje {
  box-shadow: 0 0 0 3px var(--color-primary);
  font-weight: 900;
}

/* Filtro da legenda: o que não é do horário escolhido esmaece, em vez de
   sumir — o mês precisa continuar sendo um mês. */
.cal-dia.apagado { opacity: 0.18; }

.cal-mes-notas {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 2px dashed var(--bg-card-alt);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.cal-mes-notas li {
  display: flex;
  gap: 6px;
  margin-bottom: 3px;
}

.cal-mes-notas strong {
  color: var(--color-secondary);
  flex-shrink: 0;
}

.cal-mes-notas strong.feriado { color: var(--color-primary); }

/* ----------------------------------------------------- Detalhe do dia --- */
.cal-detalhe {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 44px 16px 18px;
  background: var(--color-secondary);
  color: #FFFFFF;
  border: var(--border-width) solid var(--border-color);
  border-radius: 14px;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
}

.cal-detalhe[hidden] { display: none; }

.cal-detalhe-data {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cal-detalhe-horario {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.cal-detalhe-obs,
.cal-detalhe-nota {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.cal-detalhe-obs:empty,
.cal-detalhe-nota:empty { display: none; }

.cal-detalhe-fechar {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: #FFFFFF;
  background: transparent;
  border: none;
  cursor: pointer;
}

.cal-rodape {
  margin: 26px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.cal-rodape a {
  color: var(--color-secondary);
  font-weight: 700;
}

/* ----------------------------------------------------------- Impressão -- */
@media print {
  .cal-anos,
  .cal-legenda,
  .cal-dica,
  .cal-detalhe { display: none !important; }

  .cal-mes {
    box-shadow: none;
    break-inside: avoid;
  }
}