:root{
  --hero-gold: #FFD700;  
  --hero-black:  #000606;  
  --hero-text:  #ffffff;
  --container-max: 1200px;
  --hero-image: url('/assets/images/personas-que-participan-en-eventos-de-negocios.jpg');
}

.hero{
  position: relative;
  min-height: clamp(380px, 65vh, 560px);
  color: var(--hero-text);
  isolation: isolate; 
}

.hero::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--hero-image) center right / cover no-repeat;
  z-index: -2;
}
.hero::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%,
                                      rgba(0,0,0,.25) 45%,
                                      rgba(0,0,0,0)   75%);
  z-index: -1;
}

.hero__content{
  width: min(var(--container-max), 92%);
  margin-inline: auto;
  padding-block: clamp(2rem, 7vw, 5rem);
  display: grid;
  gap: 1rem;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.hero__kicker{
  margin: 0;
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}

.hero__bubble{
  display: inline-block;
  align-self: start;
  background: var(--hero-gold);
  color: var(--hero-black);
  font-weight: 800;
  line-height: 1.05;
  padding: .75rem 1rem;
  border-radius: 14px;
  font-size: clamp(1.4rem, 4.6vw, 2.6rem);
  position: relative;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.hero__bubble::after{
  content: "";
  position: absolute;
  right: clamp(16px, 5vw, 36px);
  bottom: -14px;
  width: 26px; height: 26px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 4px;
  box-shadow: 10px 10px 24px rgba(0,0,0,.18);
}

.hero__sub{
  margin: 0;
  max-width: 45ch;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
}

.hero--about .hero__bubble{
  display: inline-block;    
  width: fit-content;        
  max-width: clamp(20rem, 60vw, 32rem); 
  padding: .85rem 1.25rem;   
}

.hero--about .hero__bubble::after{
  right: 24px;               
}