.elementor-267 .elementor-element.elementor-element-161be71{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-267 .elementor-element.elementor-element-161be71:not(.elementor-motion-effects-element-type-background), .elementor-267 .elementor-element.elementor-element-161be71 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-267 .elementor-element.elementor-element-963e7e8{--display:flex;}.elementor-267 .elementor-element.elementor-element-6a18211{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-7155c48 *//* --- CONTAINER PRINCIPAL --- */
.cs-hero-wrapper {
  /* Substituímos a altura de "2 telas" por um auto, forçando abraçar o card */
  min-height: 100vh; 
  height: auto; 
  padding-top: 3rem;
  padding-bottom: 2rem; /* <-- Ele termina coladinho aqui embaixo! */
  
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden; 
  background-color: transparent; 
}

/* O media query com 160vh que existia antes foi completamente deletado pra matar o "vácuo" ! */

.cs-hero-container {
  /* Restante do CSS normal em diante... */

  width: 100%;
  position: relative;
  perspective: 1000px;
}

/* --- HEADER / TÍTULO --- */
.cs-hero-header {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  will-change: transform;
  z-index: 2;
  position: relative;
  padding: 0 1rem;
}

.cs-hero-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #111; 
  line-height: 1.2;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cs-hero-title-highlight {
  font-size: 3rem;
  font-weight: 700;
  margin-top: 0.25rem;
  display: block;
  line-height: 1;
}

@media (min-width: 768px) {
  .cs-hero-title { font-size: 2.5rem; }
  .cs-hero-title-highlight { font-size: 6.5rem; }
}

/* --- CARD PRINCIPAL --- */
.cs-hero-card-wrapper {
  /* Mantém a proporção real de Tablet/Monitor (16:10) para não distorcer */
  aspect-ratio: 16 / 10;
  
  /* Mobile: Ocupa 95% da caixa, deixando sombra à mostra sem vazar */
  width: 95%; 
  max-width: calc(60vh * 1.6);
  
  margin: 0 auto; 
  
  border: 4px solid #444444; 
  padding: 0.5rem;
  background-color: #222222;
  border-radius: 20px; 
  
  box-shadow: 0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
  
  transform-origin: center top;
  will-change: transform;
}

@media (min-width: 768px) {
  .cs-hero-card-wrapper { 
    /* Desktop: 90% da caixa. Garante limite pras laterais e o efeito do blur impecável! */
    width: 90%; 
    max-width: calc(65vh * 1.6); 
    
    padding: 1rem; 
    margin-top: -1.5rem; 
    border-radius: 30px;
  }
}

.cs-hero-card {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem; 
  background-color: #f3f4f6;
}

.cs-hero-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: top center;
  border-radius: inherit;
}/* End custom CSS */