/* Página de escolha de módulos refinada para Google Ads.
   Atua somente na rota /area-selection e preserva a lógica original. */
body.modules-ads-page {
  background: #f4f7ff !important;
  overflow-x: hidden !important;
}

/* Rodapé preservado: o ajuste final v4 controla quando ele fica aparente. */

body.modules-ads-page .modules-ads-main {
  min-height: calc(100vh - 72px) !important;
  padding: 1.05rem 1rem 1.25rem !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .18), transparent 30rem),
    radial-gradient(circle at 90% 12%, rgba(15, 23, 42, .12), transparent 24rem),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #edf4ff 100%) !important;
}

body.modules-ads-page .modules-ads-container {
  max-width: 1180px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.modules-ads-page .modules-ads-hero {
  margin-bottom: .88rem !important;
  border-radius: 1.35rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(37, 99, 235, .26) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
  isolation: isolate !important;
  position: relative !important;
  background-color: #0f172a !important;
}

body.modules-ads-page .modules-ads-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(2, 6, 23, .84), rgba(15, 23, 42, .58) 42%, rgba(29, 78, 216, .54)),
    radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 20rem);
  z-index: 0;
}

body.modules-ads-page .modules-ads-hero > div,
body.modules-ads-page .modules-ads-hero > div > div {
  position: relative !important;
  z-index: 1 !important;
}

body.modules-ads-page .modules-ads-hero > div,
body.modules-ads-page .modules-ads-hero:not([style]) {
  padding: 1.45rem 1.45rem !important;
}

body.modules-ads-page .modules-ads-icon-remove {
  display: none !important;
}

body.modules-ads-page .modules-ads-hero h1 {
  margin: 0 0 .38rem !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .38) !important;
}

body.modules-ads-page .modules-ads-hero p {
  margin: 0 auto !important;
  max-width: 800px !important;
  font-size: clamp(.92rem, 1.25vw, 1.08rem) !important;
  line-height: 1.36 !important;
  color: #dbeafe !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .32) !important;
}

body.modules-ads-page .modules-ads-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .82rem !important;
  align-items: stretch !important;
}

body.modules-ads-page .modules-ads-item {
  min-width: 0 !important;
}

body.modules-ads-page .modules-ads-card {
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(37, 99, 235, .22) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .09) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

body.modules-ads-page .modules-ads-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: .34rem;
  background: linear-gradient(180deg, #2563eb, #0f172a) !important;
}

body.modules-ads-page .modules-ads-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(37, 99, 235, .10), transparent 12rem) !important;
}

body.modules-ads-page .modules-ads-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(37, 99, 235, .58) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .14) !important;
}

body.modules-ads-page .modules-ads-card-content {
  position: relative !important;
  z-index: 1 !important;
  min-height: 5.8rem !important;
  padding: .95rem 1rem .95rem 1.2rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .95rem !important;
}

body.modules-ads-page .modules-ads-card-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: left !important;
}

body.modules-ads-page .modules-ads-card-title {
  margin: 0 !important;
  color: #071225 !important;
  font-size: clamp(1rem, 1.45vw, 1.22rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

body.modules-ads-page .modules-ads-card-desc {
  margin-top: .24rem !important;
  color: #475569 !important;
  font-size: .86rem !important;
  line-height: 1.3 !important;
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.modules-ads-page .modules-ads-card-button {
  width: auto !important;
  min-width: 8.9rem !important;
  min-height: 2.48rem !important;
  margin: 0 !important;
  padding: .68rem .98rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  font-size: .82rem !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .25) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

body.modules-ads-page .modules-ads-card-button:hover {
  filter: brightness(1.06) !important;
}

@media (min-width: 1024px) and (min-height: 700px) {
  body.modules-ads-page .modules-ads-main {
    padding-top: 1.25rem !important;
  }

  body.modules-ads-page .modules-ads-hero > div,
  body.modules-ads-page .modules-ads-hero:not([style]) {
    padding: 1.65rem 1.6rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    min-height: 6.15rem !important;
  }
}

/* Telas desktop baixas: mantém 4 módulos visíveis na primeira dobra. */
@media (min-width: 769px) and (max-height: 760px) {
  body.modules-ads-page .modules-ads-main {
    padding-top: .72rem !important;
    padding-bottom: .8rem !important;
  }

  body.modules-ads-page .modules-ads-hero {
    margin-bottom: .62rem !important;
  }

  body.modules-ads-page .modules-ads-hero > div,
  body.modules-ads-page .modules-ads-hero:not([style]) {
    padding: 1.05rem 1.2rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    min-height: 4.95rem !important;
    padding-top: .72rem !important;
    padding-bottom: .72rem !important;
  }

  body.modules-ads-page .modules-ads-card-desc {
    -webkit-line-clamp: 1 !important;
  }
}

@media (max-width: 768px) {
  body.modules-ads-page .modules-ads-main {
    min-height: calc(100vh - 56px) !important;
    padding: .52rem .62rem .72rem !important;
  }

  body.modules-ads-page .modules-ads-hero {
    margin-bottom: .48rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .17) !important;
  }

  body.modules-ads-page .modules-ads-hero > div,
  body.modules-ads-page .modules-ads-hero:not([style]) {
    padding: .82rem .78rem !important;
  }

  body.modules-ads-page .modules-ads-hero h1 {
    font-size: clamp(1.16rem, 6vw, 1.45rem) !important;
    line-height: 1.04 !important;
    margin-bottom: .22rem !important;
  }

  body.modules-ads-page .modules-ads-hero p {
    font-size: .76rem !important;
    line-height: 1.18 !important;
    max-height: 1.85rem !important;
    overflow: hidden !important;
  }

  body.modules-ads-page .modules-ads-grid {
    grid-template-columns: 1fr !important;
    gap: .38rem !important;
  }

  body.modules-ads-page .modules-ads-card {
    border-radius: .86rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    min-height: 3.9rem !important;
    padding: .5rem .54rem .5rem .76rem !important;
    gap: .42rem !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  body.modules-ads-page .modules-ads-card::before {
    width: .25rem !important;
  }

  body.modules-ads-page .modules-ads-card-title {
    font-size: .84rem !important;
    line-height: 1.08 !important;
  }

  body.modules-ads-page .modules-ads-card-desc {
    margin-top: .16rem !important;
    font-size: .68rem !important;
    line-height: 1.14 !important;
    -webkit-line-clamp: 1 !important;
  }

  body.modules-ads-page .modules-ads-card-button {
    width: auto !important;
    min-width: 5.25rem !important;
    min-height: 1.96rem !important;
    padding: .42rem .54rem !important;
    font-size: .62rem !important;
    letter-spacing: .01em !important;
  }
}

@media (max-width: 390px) {
  body.modules-ads-page .modules-ads-main {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    min-height: 3.72rem !important;
    padding-top: .44rem !important;
    padding-bottom: .44rem !important;
  }

  body.modules-ads-page .modules-ads-card-title {
    font-size: .78rem !important;
  }

  body.modules-ads-page .modules-ads-card-desc {
    font-size: .64rem !important;
  }

  body.modules-ads-page .modules-ads-card-button {
    min-width: 4.85rem !important;
    padding-left: .44rem !important;
    padding-right: .44rem !important;
    font-size: .58rem !important;
  }
}


/* Ajuste v3 solicitado:
   - foto do topo garantida também no desktop;
   - layout mobile travado/estável ao atualizar;
   - rodapé preservado, oculto no topo e visível somente após rolagem. */
html.modules-ads-route,
html.modules-ads-route body,
body.modules-ads-page {
  overflow-x: hidden !important;
}

body.modules-ads-page .modules-ads-hero.modules-ads-has-photo {
  background-image: var(--modules-ads-hero-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 769px) {
  body.modules-ads-page .modules-ads-hero.modules-ads-has-photo {
    background-image: var(--modules-ads-hero-image) !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  body.modules-ads-page .modules-ads-hero.modules-ads-has-photo::before {
    background:
      linear-gradient(120deg, rgba(2, 6, 23, .76), rgba(15, 23, 42, .50) 42%, rgba(29, 78, 216, .48)),
      radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 20rem) !important;
  }
}

/* O rodapé volta a existir. Ele apenas fica invisível enquanto o usuário está no topo. */
body.modules-ads-page footer {
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(18px) !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

body.modules-ads-page.modules-ads-footer-visible footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Evita a troca visual entre o layout original e o refinado durante refresh no celular. */
html.modules-ads-route body:not(.modules-ads-ready) #root main {
  opacity: 0 !important;
}

body.modules-ads-page.modules-ads-ready #root main {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  body.modules-ads-page .modules-ads-grid,
  body.modules-ads-page .modules-ads-grid > *,
  body.modules-ads-page .modules-ads-item,
  body.modules-ads-page .modules-ads-card,
  body.modules-ads-page .modules-ads-card-content,
  body.modules-ads-page .modules-ads-card-text,
  body.modules-ads-page .modules-ads-card-button {
    animation: none !important;
  }

  body.modules-ads-page .modules-ads-grid > *,
  body.modules-ads-page .modules-ads-item {
    opacity: 1 !important;
    transform: none !important;
  }

  body.modules-ads-page .modules-ads-grid {
    grid-template-columns: 1fr !important;
    gap: .52rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.modules-ads-page .modules-ads-card-text {
    min-height: 120px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  body.modules-ads-page .modules-ads-card-button {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 390px) {
  body.modules-ads-page .modules-ads-grid {
    gap: .52rem !important;
  }

  body.modules-ads-page .modules-ads-card-content {
    min-height: 3.9rem !important;
    padding: .5rem .54rem .5rem .76rem !important;
    gap: .42rem !important;
  }

  body.modules-ads-page .modules-ads-card-text {
    min-height: 120px !important;
  }

  body.modules-ads-page .modules-ads-card-title {
    font-size: .84rem !important;
    line-height: 1.08 !important;
  }

  body.modules-ads-page .modules-ads-card-desc {
    font-size: .68rem !important;
  }

  body.modules-ads-page .modules-ads-card-button {
    min-width: 5.25rem !important;
    min-height: 1.96rem !important;
    padding: .42rem .54rem !important;
    font-size: .62rem !important;
  }
}


/* Ajuste v4 definitivo solicitado:
   - preserva o botão de WhatsApp no rodapé;
   - força a foto do título em desktop e mobile;
   - impede alternância/flash entre layouts ao entrar pela home ou atualizar. */
html.modules-ads-route,
html.modules-ads-route body,
body.modules-ads-page {
  overflow-x: hidden !important;
}

html.modules-ads-route #root main,
body.modules-ads-page .modules-ads-main {
  min-height: 100vh !important;
  padding: 1.05rem 1rem 1.25rem !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .18), transparent 30rem),
    radial-gradient(circle at 90% 12%, rgba(15, 23, 42, .12), transparent 24rem),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 42%, #edf4ff 100%) !important;
}

html.modules-ads-route #root main > .container,
html.modules-ads-route #root main > div,
body.modules-ads-page .modules-ads-container {
  max-width: 1180px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.modules-ads-route #root main > .container > div:first-child,
html.modules-ads-route #root main > div > div:first-child,
body.modules-ads-page .modules-ads-hero {
  margin-bottom: .88rem !important;
  border-radius: 1.35rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(37, 99, 235, .26) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
  isolation: isolate !important;
  position: relative !important;
  background-color: #0f172a !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html.modules-ads-route #root main > .container > div:first-child::before,
html.modules-ads-route #root main > div > div:first-child::before,
body.modules-ads-page .modules-ads-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, rgba(2, 6, 23, .78), rgba(15, 23, 42, .52) 42%, rgba(29, 78, 216, .50)),
    radial-gradient(circle at top right, rgba(255, 255, 255, .18), transparent 20rem) !important;
  z-index: 0 !important;
}

html.modules-ads-route #root main > .container > div:first-child > div,
html.modules-ads-route #root main > div > div:first-child > div,
html.modules-ads-route #root main > .container > div:first-child > div > div,
html.modules-ads-route #root main > div > div:first-child > div > div,
body.modules-ads-page .modules-ads-hero > div,
body.modules-ads-page .modules-ads-hero > div > div {
  position: relative !important;
  z-index: 1 !important;
}

html.modules-ads-route #root main > .container > div:first-child[data-modules-ads-photo="1"],
html.modules-ads-route #root main > div > div:first-child[data-modules-ads-photo="1"],
body.modules-ads-page .modules-ads-hero.modules-ads-has-photo {
  background-image:
    linear-gradient(120deg, rgba(2, 6, 23, .72), rgba(15, 23, 42, .46) 42%, rgba(29, 78, 216, .46)),
    var(--modules-ads-hero-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

html.modules-ads-route #root main > .container > div:first-child h1,
html.modules-ads-route #root main > div > div:first-child h1,
body.modules-ads-page .modules-ads-hero h1 {
  margin: 0 0 .38rem !important;
  font-size: clamp(1.75rem, 3vw, 2.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  color: #ffffff !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .38) !important;
}

html.modules-ads-route #root main > .container > div:first-child p,
html.modules-ads-route #root main > div > div:first-child p,
body.modules-ads-page .modules-ads-hero p {
  margin: 0 auto !important;
  max-width: 800px !important;
  font-size: clamp(.92rem, 1.25vw, 1.08rem) !important;
  line-height: 1.36 !important;
  color: #dbeafe !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .32) !important;
}

html.modules-ads-route #root main > .container > .grid,
html.modules-ads-route #root main > div > .grid,
body.modules-ads-page .modules-ads-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .82rem !important;
  align-items: stretch !important;
}

/* Mantém o rodapé e o WhatsApp no fluxo do rodapé, porém escondidos no topo. */
body.modules-ads-page footer,
body.modules-ads-page .whatsapp-footer-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(18px) !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

body.modules-ads-page footer {
  display: block !important;
}

body.modules-ads-page .whatsapp-footer-button {
  display: flex !important;
  position: static !important;
  margin: -84px 32px 28px auto !important;
  z-index: 20 !important;
}

body.modules-ads-page.modules-ads-footer-visible footer,
body.modules-ads-page.modules-ads-footer-visible .whatsapp-footer-button {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Evita que a versão original da tela apareça antes do refinamento. */
html.modules-ads-route body:not(.modules-ads-ready) #root main {
  opacity: 0 !important;
}
body.modules-ads-page.modules-ads-ready #root main {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  html.modules-ads-route #root main,
  body.modules-ads-page .modules-ads-main {
    min-height: 100vh !important;
    padding: .52rem .62rem .72rem !important;
  }

  html.modules-ads-route #root main > .container > div:first-child,
  html.modules-ads-route #root main > div > div:first-child,
  body.modules-ads-page .modules-ads-hero {
    margin-bottom: .48rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .17) !important;
  }

  html.modules-ads-route #root main > .container > div:first-child > div,
  html.modules-ads-route #root main > div > div:first-child > div,
  body.modules-ads-page .modules-ads-hero > div,
  body.modules-ads-page .modules-ads-hero:not([style]) {
    padding: .82rem .78rem !important;
  }

  html.modules-ads-route #root main > .container > div:first-child h1,
  html.modules-ads-route #root main > div > div:first-child h1,
  body.modules-ads-page .modules-ads-hero h1 {
    font-size: clamp(1.16rem, 6vw, 1.45rem) !important;
    line-height: 1.04 !important;
    margin-bottom: .22rem !important;
  }

  html.modules-ads-route #root main > .container > div:first-child p,
  html.modules-ads-route #root main > div > div:first-child p,
  body.modules-ads-page .modules-ads-hero p {
    font-size: .76rem !important;
    line-height: 1.18 !important;
    max-height: 1.85rem !important;
    overflow: hidden !important;
  }

  html.modules-ads-route #root main > .container > .grid,
  html.modules-ads-route #root main > div > .grid,
  body.modules-ads-page .modules-ads-grid {
    grid-template-columns: 1fr !important;
    gap: .52rem !important;
  }

  html.modules-ads-route #root main > .container > .grid > *,
  html.modules-ads-route #root main > div > .grid > *,
  body.modules-ads-page .modules-ads-grid > *,
  body.modules-ads-page .modules-ads-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  html.modules-ads-route #root main > .container > .grid > * > [class*="rounded-xl"],
  html.modules-ads-route #root main > div > .grid > * > [class*="rounded-xl"],
  body.modules-ads-page .modules-ads-card {
    border-radius: .86rem !important;
    height: 100% !important;
  }

  html.modules-ads-route #root main > .container > .grid > * [class*="p-8"],
  html.modules-ads-route #root main > div > .grid > * [class*="p-8"],
  body.modules-ads-page .modules-ads-card-content {
    min-height: 3.9rem !important;
    padding: .5rem .54rem .5rem .76rem !important;
    gap: .42rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  html.modules-ads-route #root main > .container > .grid > * [class*="min-h"],
  html.modules-ads-route #root main > div > .grid > * [class*="min-h"],
  body.modules-ads-page .modules-ads-card-text {
    min-height: 120px !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  html.modules-ads-route #root main > .container > .grid h2,
  html.modules-ads-route #root main > div > .grid h2,
  body.modules-ads-page .modules-ads-card-title {
    font-size: .84rem !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  html.modules-ads-route #root main > .container > .grid p,
  html.modules-ads-route #root main > div > .grid p,
  body.modules-ads-page .modules-ads-card-desc {
    margin-top: .16rem !important;
    font-size: .68rem !important;
    line-height: 1.14 !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
  }

  html.modules-ads-route #root main > .container > .grid button,
  html.modules-ads-route #root main > div > .grid button,
  body.modules-ads-page .modules-ads-card-button {
    width: auto !important;
    min-width: 5.25rem !important;
    min-height: 1.96rem !important;
    padding: .42rem .54rem !important;
    border-radius: 999px !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  body.modules-ads-page .whatsapp-footer-button {
    margin: -70px auto 22px auto !important;
  }
}