body {
  background: url(../media/7.svg);
  background-size: cover;
}

.hero-section {
  min-height: 100vh;
  padding-top: 320px;
  display: flex;
  align-items: center;
}
/* ============================= */
/* HERO CONTENT */
/* ============================= */

.hero-content {
  width: 70vw;      /* 🔥 clave */
  max-width: 1200px;

  padding: 80px 80px 80px 10vw;

  background:
    rgba(234,207,133,0.40);

  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;

  display: flex;
  flex-direction: column;
  gap: 30px;
}

.hero-title {
  font-size: clamp(36px, 3vw, 48px);
  font-weight: 700;
  color: #d6cb8d;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: #d6cb8d;
}

@media (max-width: 992px){

  .hero-section{
    padding-top: 200px;   /* mantiene separación con header */
    padding-left: 20px;
    padding-right: 20px;
    justify-content: center;
  }

  .hero-content{
    width: 100%;
    max-width: 700px;

    padding: 50px 30px;

    border-radius: 20px;        /* elimina efecto lateral en móvil */
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  }

}

@media (max-width: 576px){

  .hero-section{
    padding-top: 170px;
  }

  .hero-content{
    padding: 40px 25px;
  }

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

  .hero-subtitle{
    font-size: 16px;
  }

}