*{
    outline: 1px solid rebeccapurple;
}
:root{
    --color-principal: rgb(235, 235, 235);
    --color-secundario: #1F1C18;
    --bonito-color: #F2E640;
    --fuente-primera: "Libre Baskerville", serif;
    --la-otra-fuente:  "Cutive Mono", monospace;
}
body{
    background-color: var(--color-principal);
    color: var(--color-secundario);
    font-family: "Libre Baskerville", serif;
}
.bg-hero {
    position: relative;
    background-image: url('/administracion-contenidos/nota-tres/interfaz/imagenes/hero_img.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Pseudo-elemento que hace el degradado (invisible al principio) */
.bg-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        to top right
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.85) 7%,
        transparent 50%,
        rgba(235, 235, 235, 0.89) 80%,
        rgba(235, 235, 235, 1) 100%
    );
    transition: opacity 2.5s ease;  
    z-index: 1;
    pointer-events: none;
}

.bg-hero:hover::before {
    opacity: 1;
}

/* El contenido del header debe estar por encima */
.bg-hero h1 {
    position: relative;
    z-index: 2;
    color: var(--bonito-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.bg-hero p {
    position: relative;
    z-index: 2;
    color: var(--color-principal);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.bg-hero .btn {
    position: relative;
    z-index: 2;
    color: var(--color-principal);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.bg-hero .info {
    position: relative;
    z-index: 2;
    color: var(--color-principal);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.bonito-color{
    color: var(--bonito-color);
}
.ff-2{
    font-family: var(--la-otra-fuente);
}