.hero {
    position: relative;
    background: var(--grad-panel);
    color: var(--c-blanco);
    text-align: center;
    padding-top: calc(var(--navbar-altura) + 28px);
    padding-bottom: 168px;
}

.hero-dash {
    position: relative;
    z-index: 2;
}

.hero-fondo {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-onda { position: absolute; width: 360px; height: 240px; }
.hero-onda path { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 1.5; }
.hero-onda-izq { left: -40px; bottom: 30px; }
.hero-onda-der { right: -40px; top: calc(var(--navbar-altura) + 10px); }

.hero-lentes { position: absolute; }
.hero-lentes circle, .hero-lentes path { fill: none; stroke: rgba(255, 255, 255, .11); stroke-width: 2; }
.lentes-1 { width: 230px; left: 3%; top: 24%; transform: rotate(-14deg); }
.lentes-2 { width: 300px; right: 2%; top: 14%; transform: rotate(11deg); }
.lentes-3 { width: 170px; right: 12%; bottom: 6%; transform: rotate(-7deg); }

.hero-puntos { position: absolute; width: 120px; height: 120px; }
.hero-puntos circle { fill: rgba(255, 255, 255, .14); }
.puntos-1 { left: 6%; bottom: 10%; }
.puntos-2 { right: 5%; top: 40%; }

.hero-glow {
    position: absolute;
    left: 50%;
    bottom: -140px;
    transform: translateX(-50%);
    width: 920px;
    height: 480px;
    background: radial-gradient(closest-side, rgba(91, 101, 132, .38), transparent 72%);
}

.hero-texto { position: relative; max-width: 660px; }

.hero-kicker {
    font-size: .85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    animation: hero-entrada .7s ease both;
}

.hero-titulo {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.22;
    margin: .55rem auto 0;
    max-width: 580px;
    animation: hero-entrada .7s ease .08s both;
}

.hero-bajada {
    max-width: 540px;
    margin: .7rem auto 0;
    font-size: .98rem;
    color: rgba(255, 255, 255, .75);
    animation: hero-entrada .7s ease .16s both;
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
    animation: hero-entrada .7s ease .24s both;
}

.hero-ctas .boton { padding: .6rem 1.3rem; font-size: .92rem; }

@keyframes hero-entrada {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-kicker, .hero-titulo, .hero-bajada, .hero-ctas { animation: none; }
}

@media (max-width: 767.98px) {
    .hero { padding-top: calc(var(--navbar-altura) + 20px); padding-bottom: 185px; }
    .hero-onda, .lentes-1 { display: none; }
    .lentes-2 { width: 130px; right: -14px; top: calc(var(--navbar-altura) + 4px); }
    .lentes-3 { width: 110px; left: -10px; right: auto; bottom: auto; top: 38%; }
    .puntos-1 { left: auto; right: 4%; bottom: 4%; width: 80px; height: 80px; }
    .puntos-2 { display: none; }
}