.sobre-hero{
  width:100%;
  min-height:calc(100vh - 76px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:64px 32px 40px;
  box-sizing:border-box;
  background:#fff;
}

.sobre-hero-inner{
  width:100%;
  max-width:1210px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  gap:56px;
}

/* -------- Text column -------- */

.sobre-hero-text{
  max-width:560px;
}

.sobre-greeting{
  font-size:44px;
  font-weight:800;
  color:#0a1b33;
  margin:0 0 24px;
  line-height:1.1;
}

.wave-emoji{
  display:inline-block;
  font-size:0.85em;
  transform-origin:70% 70%;
  animation:sobre-wave 2.2s ease-in-out infinite;
}

.sobre-hero-text p{
  font-size:15px;
  line-height:1.75;
  color:#3d4a5c;
  margin:0 0 20px;
}

.sobre-hero-text p:last-child{
  margin-bottom:0;
}

.sobre-hero-text strong{
  color:#0a3776;
  font-weight:700;
}



.sobre-hero-media{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  border-radius:8px;
  overflow:hidden;
  background:#eef1f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cbd6' stroke-width='1.2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") no-repeat center / 64px;
}

.sobre-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  filter:grayscale(100%);
  opacity:0;
  transition:opacity .4s ease;
}

.sobre-photo.is-loaded{
  opacity:1;
}



.sobre-scroll-cue{
  margin-top:48px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #d5dbe4;
  background:#fff;
  color:#0a3776;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  animation:sobre-bounce 1.8s ease-in-out infinite;
}

.sobre-scroll-cue:hover{
  background:#f2f5fa;
}

.sobre-scroll-cue svg{
  width:18px;
  height:18px;
}



@keyframes sobre-wave{
  0%, 100%{
    transform:rotate(0deg);
  }

  15%{
    transform:rotate(14deg);
  }

  30%{
    transform:rotate(-8deg);
  }

  45%{
    transform:rotate(14deg);
  }

  60%{
    transform:rotate(0deg);
  }
}

@keyframes sobre-bounce{
  0%, 100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(6px);
  }
}



@media (prefers-reduced-motion: reduce){

  .wave-emoji,
  .sobre-scroll-cue{
    animation:none;
  }

}



@media (max-width:900px){

  .sobre-hero-inner{
    grid-template-columns:1fr;
    gap:32px;
  }

  .sobre-hero-media{
    order:-1;
    aspect-ratio:16/10;
    max-width:420px;
    margin:0 auto;
  }

  .sobre-hero-text{
    max-width:none;
  }

}

@media (max-width:600px){

  .sobre-hero{
    padding:40px 20px 32px;
  }

  .sobre-greeting{
    font-size:34px;
  }

}