/* 1. Altura controlada respecto al viewport */
.hero-section {
    /* dvh: dynamic viewport height (evita el "jump" por barras del navegador móvil) */
    /* Fallback para navegadores legacy */
    height: 50vh; 
    height: 50dvh;
    min-height: 420px; /* Garantiza legibilidad en pantallas verticales */
    max-height: 800px; /* Evita estiramiento excesivo en monitores ultrawide */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido interno */
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(12, 18, 32, 0.78) 0%, rgba(12, 18, 32, 0.45) 100%);
    z-index: 1;
    pointer-events: none; /* No interfiere con clics/hover */
}

/* 2. Panel absoluto: hereda altura fija del section */
.hero-panel {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    overflow: hidden;
    color: #ffffff; /* Texto claro para contraste óptimo */
}

/* 3. Imagen: recorte proporcional sin distorsión */
.hero-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%; /* Ajuste fino: sube el punto focal un 10% para evitar recortes en encabezados */
    display: block;
}

/* 4. Contenido: contexto de apilamiento independiente */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1,
.hero-content h3,
.hero-content p,
.hero-content a {
    color: inherit;
}