.hero {
    position: relative;
    min-height: 220px; /* o 250px si quieres un poquito más */
    background-image: url("images/banner.jpg");
    background-size: cover;
    background-position: center;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(138, 166, 138, 0.65);
    z-index: 1; /* ABAJO DEL HIBRIDO */
}
.hero-content {
    position: relative;
    z-index: 1;
    color: var(--cream);
    padding: 80px 70px;
}
.hero h1 {
    font-size: 42px;
    margin-bottom: 10px;
}
.hero p {
    font-size: 20px;
    margin-bottom: 20px;
}
.hero-button {
    display: inline-block;
    padding: 10px 22px;
    background-color: var(--brown-dark);
    color: var(--cream);
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
}
.hero-button:hover {
    background-color: #3a2f20;
}
.hero-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 10px 40px;
}

.hero-hybrid {
    width: 220px;
    position: relative;
    z-index: 3; /* AQUI ESTA LA MAGIA */
}

.hero-title h1 {
    font-family: 'Allura', cursive; /* o la que elijas */
    font-size: 64px;
    color: var(--cream);
    margin: 0;
}

.hero-title p {
    font-size: 22px;
    color: var(--cream);
    margin-top: 5px;
}
.hero-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 4;
}
.hero-title h1,
.hero-title p {
    color: #4A5F4A
}
.hero {
    padding: 0px 0; /* antes 80px o 100px */
}
.npip {
    font-weight: bold;
    color: #2f2a24;
    margin-top: -5px;
    display: block;
}