.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--navbar-altura) + 44px);
    padding-bottom: 64px;
    color: var(--texto);
    background:
        linear-gradient(to bottom, transparent 70%, rgba(246, 238, 230, .5) 100%),
        linear-gradient(100deg, rgba(246, 238, 230, .97) 0%, rgba(246, 238, 230, .9) 30%, rgba(246, 238, 230, .6) 48%, rgba(246, 238, 230, .2) 68%, rgba(246, 238, 230, 0) 84%),
        url(/img/fondohero.webp) center / cover no-repeat;
}
.hero-inner { position: relative; }
.hero-texto { max-width: 560px; }
.hero-titulo { font-size: clamp(2.3rem, 5.6vw, 3.8rem); line-height: 1.07; color: var(--texto); }
.hero-bajada { margin-top: 1.1rem; max-width: 480px; font-size: 1.12rem; color: var(--texto-suave); }
.hero-acciones { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero .boton-fantasma { background: rgba(255, 255, 255, .5); border-color: rgba(35, 32, 30, .4); color: var(--c-carbon); }
.hero .boton-fantasma:hover { background: rgba(255, 255, 255, .8); border-color: var(--c-carbon); color: var(--c-carbon); }

.hero-confianza {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.4rem, 4vw, 2.8rem);
    margin-top: 2.4rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--borde);
}
.hero-confianza li { display: flex; flex-direction: column; }
.hero-confianza strong { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.hero-confianza span { font-size: .85rem; color: var(--texto-suave); }

.hero-scroll {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    color: var(--c-carbon);
    background: rgba(255, 255, 255, .5);
    box-shadow: var(--sombra-suave);
    animation: hero-bajar 2.2s ease-in-out infinite;
}
.hero-scroll:hover { background: rgba(255, 255, 255, .85); }
.hero-scroll .icono { width: 22px; height: 22px; }

@keyframes hero-bajar {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 5px); }
}

@media (max-width: 900px) {
    .hero {
        background:
            linear-gradient(180deg, rgba(246, 238, 230, .92) 0%, rgba(246, 238, 230, .66) 42%, rgba(246, 238, 230, .86) 100%),
            url(/img/fondohero.webp) center / cover no-repeat;
    }
    .hero-texto { max-width: 600px; }
}
@media (max-width: 640px) {
    .hero-bajada { font-size: 1rem; }
    .hero-confianza strong { font-size: 1.3rem; }
    .hero-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scroll { animation: none; }
}