.hero-section {
    padding: 5%;
    min-height: 47vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Necesario para posicionar navbar absoluto */
    width: 100%;
    color: white;
    background: url('https://caosgrowth.com/storage/img/caos-background.webp') no-repeat center/cover;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2); /* overlay */
    pointer-events: none;
}

/* Navbar encima del hero */
.hero-section > .navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10; /* encima del overlay y hero-content */
}

/* Hero content centrado vertical y horizontal */
.hero-content {
    max-width: 90%;
    position: relative;
    z-index: 5; /* debajo del navbar, pero encima del overlay */
    text-align: center;
    justify-items: center;
    padding: 0 5%;
}

.hero-title-container {
    display: grid;
   
}
.hero-text{
    position: relative;
    z-index: 2;
}

/* Hero text */
.hero-title { font-family: "Poppins", Sans-serif; font-size: clamp(2.3rem,4vw,4rem); font-weight: 600; color: #fff; margin:0; line-height: 0.8;}
.hero-line-1 { font-family: "Poppins", Sans-serif; font-size: clamp(1.3rem,2vw,2.8rem); font-weight:500; color:#fff; margin: -1%; }
.hero-line-2 { font-family: "Aminute", Sans-serif; font-size: clamp(2.3rem,6vw,4rem); font-weight:500; color:#E67E22; margin:-3%; }
.hero-text p { margin-top:1rem; font-size: clamp(1rem,2.5vw,1.3rem); line-height:1.6; color:#CFA77A; text-shadow:1px 1px 8px rgba(0,0,0,0.5); }

.hero-image {
   margin: -1rem;
}
.hero-image img {
    position: relative;
    z-index: 1;
    width: clamp(200px, 20vw, 400px);
    object-fit: cover;
}
/* Responsivo */
@media (max-width: 768px) { .hero-content { padding:0 6%; } }
@media (max-width: 480px) { .hero-content { padding:0 5%; } }