/* ==========================
   PANTALLA DE ENTRADA
========================== */

.entrada {
    position: fixed;
    inset: 0;
    z-index: 200;

    display: grid;
    place-items: center;

    padding: 2rem;

    background:
        radial-gradient(
            circle at center,
            rgba(26, 22, 18, 0.95) 0%,
            rgba(5, 5, 7, 0.98) 55%,
            #000 100%
        );

    text-align: center;
}


/* ==========================
   CONTENIDO
========================== */

.entrada__contenido {
    width: min(90vw, 680px);
}


/* ==========================
   TEXTOS
========================== */

.entrada__preludio {
    margin: 0;

    color: var(--color-texto);

    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: 1.4;
}

.entrada__texto {
    margin: 1rem 0 0;

    color: rgba(245, 234, 214, 0.7);

    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-style: italic;
}


/* ==========================
   BOTÓN
========================== */

.entrada__boton {
    margin-top: 2.5rem;
    padding: 0.85rem 2.2rem;

    color: var(--color-texto);
    background: transparent;

    border: 1px solid rgba(216, 181, 106, 0.65);
    border-radius: 999px;

    cursor: pointer;

    transition:
        color var(--transicion-normal),
        background-color var(--transicion-normal),
        box-shadow var(--transicion-normal),
        transform var(--transicion-normal);

    cursor: url(../img/cursores/cursor2.png) 10 10, pointer;
}

.entrada__boton:hover {
    color: #1b160f;
    background: var(--color-dorado);

    box-shadow:
        0 0 18px rgba(216, 181, 106, 0.35),
        0 0 40px rgba(216, 181, 106, 0.15);

    transform: translateY(-2px);
}

.entrada__boton:focus-visible {
    outline: 2px solid var(--color-dorado);
    outline-offset: 5px;
}

/* ==========================
   OCULTAR ENTRADA
========================== */

.entrada {
    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}

.entrada--oculta {
    opacity: 0;
    visibility: hidden;
}