/* ════════════════════════════════════════════════════════
   HERO CONTACT — tipografía brutalista + lista inferior
   ════════════════════════════════════════════════════════ */

.hero-contact {
    background-color: rgb(var(--palette-0));
    color: var(--text-light);
    position: relative;
    overflow: hidden;
    height:90vh;
}

/* ─── Grano dinámico ──────────────────────────── */
.hero-contact::after {
    content: "";
    position: absolute;
    top: -100%; left: -100%;
    width: 300%; height: 300%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.04;
    animation: hero-contact-grain 0.4s steps(3) infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hero-contact-grain {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-5%, -5%); }
    100% { transform: translate(5%, 5%); }
}

/* ─── Título brutalista ───────────────────────── */
.hero-contact__titulo {
    position: relative;padding-top:10rem;
    z-index: 1;

}

/* ─── Lista inferior ──────────────────────────── */
.hero-contact__lista {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 3.75rem;
    border-top: 1px solid rgb(var(--clr-text-inverse) / 0.2);
    padding-top: 1.25rem;
    max-width: 800px;
}

.hero-contact__item {
    font-size: var(--fs-body);
    font-family: var(--font-mono);
    color: rgb(var(--clr-text-inverse) / 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 200ms ease;
}

.hero-contact__item:hover {
    color: var(--text-light);
}

/* ─── Reduce motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-contact::after {
        animation: none;
    }
}