.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90vh;
    padding: 120px 20px 50px; /* Padding top extra para evitar que el nav tape el contenido */
    overflow: hidden;
}

#matrix-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0));
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    background: transparent;
    padding: 0;
    width: 100%;
}

/* Nuevo estilo de título Responsive usando clamp() */
/* clamp(minimo, ideal, maximo) asegura que nunca sea muy pequeño ni muy grande */
.hero h1 {
    font-size: clamp(2.5rem, 8vw, 4rem); 
    line-height: 1.1;
    margin-bottom: 25px;
    word-wrap: break-word; /* Evita desbordamiento en palabras largas */
}

.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: var(--text-muted);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
    padding: 0 10px;
}

/* Layout de Botones Dual */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Permite que se apilen en móvil */
}

@media (max-width: 768px) {
    .hero {
        min-height: 80vh; /* Un poco más corto en móvil */
        padding-top: 100px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        width: 100%;
    }
    
    .cta-button {
        width: 100%;
        max-width: 100%;
    }
}