@media (max-width: 600px) {
  .hero, .banner, #home, [role="banner"] {
    background-image: url('assets/hero-mobile.jpg') !important;
  }
}
/* Garante altura mínima para o background cobrir toda a área visível */
.hero, .banner, #home, [role="banner"] {
  min-height: 100vh;
  background-image: url('assets/hero-new.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-color: transparent !important;
}
/* Reforça a aplicação do background principal do index.html nas seções principais */
#root, .hero, .banner, .home, [role="banner"], [data-section="home"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

@media (max-width: 1024px) {
  #root, .hero, .banner, .home, [role="banner"], [data-section="home"] {
    background-attachment: scroll !important;
  }
}

/* Remove qualquer background-color sólido que possa sobrepor a imagem nas seções principais */
#root, .hero, .banner, .home, [role="banner"], [data-section="home"] {
  background-color: transparent !important;
}

/* Não afeta botões, ícones ou cartões */

.hero .container, .hero .main, .hero .section, .hero .content, .hero .inner,
.banner .container, .banner .main, .banner .section, .banner .content, .banner .inner,
.home .container, .home .main, .home .section, .home .content, .home .inner,
[role="banner"] .container, [role="banner"] .main, [role="banner"] .section, [role="banner"] .content, [role="banner"] .inner,
[data-section="home"] .container, [data-section="home"] .main, [data-section="home"] .section, [data-section="home"] .content, [data-section="home"] .inner {
  background-color: transparent !important;
}

/* Propriedades responsivas para o background das seções principais (sem forçar imagem) */
.hero, .banner, .home, [role="banner"], #home, body {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1024px) {
  .hero, .banner, .home, [role="banner"], #home, body {
    background-attachment: scroll !important;
  }
}
/* Global responsive enhancements (non-breaking) */
/* Typography scales */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
}
h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.2; }
h2 { font-size: clamp(24px, 4vw, 36px); line-height: 1.25; }
h3 { font-size: clamp(20px, 3vw, 28px); line-height: 1.3; }

/* Media scales */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Container utility if not using a layout container */
.resp-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .resp-container { max-width: 640px; } }
@media (min-width: 768px) { .resp-container { max-width: 768px; } }
@media (min-width: 1024px) { .resp-container { max-width: 1024px; } }
@media (min-width: 1280px) { .resp-container { max-width: 1280px; } }

/* Section spacing */
.resp-section {
  padding-top: clamp(2rem, 6vw, 6rem);
  padding-bottom: clamp(2rem, 6vw, 6rem);
}

/* Background helpers for hero/banners using background-image */
.bg-cover-center {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Home/Hero/Banner background fixes */
#home, .home, .hero, .banner, [role="banner"], [data-section="home"] {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative; /* enable layering */
  z-index: 0;
  /* Ensure no solid fill blocks the background image */
  background: none !important;
  background-color: transparent !important;
}

/* Apply the hero background directly on the container (all viewports) */
#home, .home, .hero, .banner, [role="banner"], [data-section="home"] {
}

/* On small screens, avoid fixed backgrounds which can cause jank */
@media (max-width: 1024px) {
  #home, .home, .hero, .banner, [role="banner"], [data-section="home"] {
    background-attachment: scroll !important;
  }
}

/* Optional utility to explicitly use an assets-based hero image */
.use-assets-hero {
}

/* Remove common overlay layers inside hero to expose background image */
#home::before, .home::before, .hero::before, .banner::before,
[role="banner"]::before, [data-section="home"]::before,
#home::after, .home::after, .hero::after, .banner::after,
[role="banner"]::after, [data-section="home"]::after {
  content: none !important;
  background: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: auto !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

#home .overlay, .home .overlay, .hero .overlay, .banner .overlay,
[role="banner"] .overlay, [data-section="home"] .overlay,
#home .bg-overlay, .home .bg-overlay, .hero .bg-overlay, .banner .bg-overlay,
[role="banner"] .bg-overlay, [data-section="home"] .bg-overlay,
#home .mask, .home .mask, .hero .mask, .banner .mask,
[role="banner"] .mask, [data-section="home"] .mask,
#home .backdrop, .home .backdrop, .hero .backdrop, .banner .backdrop,
[role="banner"] .backdrop, [data-section="home"] .backdrop,
#home .gradient-overlay, .home .gradient-overlay, .hero .gradient-overlay, .banner .gradient-overlay,
[role="banner"] .gradient-overlay, [data-section="home"] .gradient-overlay {
  background: none !important;
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  z-index: auto !important;
  pointer-events: none !important;
  box-shadow: none !important;
  position: static !important;
}

/* Ensure hero text/content sits above background and any (now disabled) overlays */
#home .content, .home .content, .hero .content, .banner .content,
[role="banner"] .content, [data-section="home"] .content,
#home .container, .home .container, .hero .container, .banner .container,
[role="banner"] .container, [data-section="home"] .container,
#home .inner, .home .inner, .hero .inner, .banner .inner,
[role="banner"] .inner, [data-section="home"] .inner {
  position: relative;
  z-index: 2;
}

/* Optional: enable a semi-transparent debug veil when body has .debug-hero */
body.debug-hero #home::after,
body.debug-hero .home::after,
body.debug-hero .hero::after,
body.debug-hero .banner::after,
body.debug-hero [role="banner"]::after,
body.debug-hero [data-section="home"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 255, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

/* Ensure hero sections maintain a visible area on small screens */
@media (max-width: 640px) {
  #home, .home, .hero, .banner, [role="banner"], [data-section="home"] {
    min-height: 60vh;
  }
}

/* Button sizing and tap target */
button, .btn, [role="button"], .button {
  min-height: 44px; /* WCAG touch target */
  padding: 0.625rem 1rem;
}

/* Prevent horizontal scroll on small screens (non-destructive) */
html, body {
  overflow-x: hidden;
}

/* Utility: responsive grid helper (opt-in) */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}

/* Utility: clamp spacing */
.resp-gap { gap: clamp(8px, 2vw, 20px); }
.resp-mx { margin-left: clamp(8px, 2vw, 24px); margin-right: clamp(8px, 2vw, 24px); }
.resp-px { padding-left: clamp(8px, 2vw, 24px); padding-right: clamp(8px, 2vw, 24px); }

/* Forms */
input, select, textarea {
  font-size: 1rem;
  max-width: 100%;
}

/* Tables */
.table-wrap { overflow-x: auto; }

/* Safe defaults for embeds */
iframe {
  border: 0;
  display: block;
}